/* ═══════════════════════════════════════════════════════════════════════════
   CueCard Teleprompter — editorial, on paper.

   The site is white, like the app's own script view, and it is built out of
   two section designs and nothing else:

     · LEDGER — an eyebrow label on a hairline, a heading, an optional lede,
       then ruled rows. Numbered rows, app rows, role rows, download rows and
       the FAQ are all the same object with different contents.
     · CARD — a bordered panel on tinted paper, for the things that are
       objects rather than lists: screenshots, the demo links, the script
       syntax panels, the cross-sell to the other half of the product.

   Every section is one solid colour — paper, or the tint — and the two
   alternating is the whole of the page's rhythm. There is no video and no
   texture anywhere on this site.

   Order: tokens, chrome, type, the two section designs, the pieces built from
   them, the pages with their own furniture, then touch and motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Paper. --leaf is the tint that marks a passage of reading; alternating it
     against plain paper is what gives the page its rhythm now that there is
     no film behind it. */
  --paper:    #ffffff;
  --leaf:     #f7f5f0;
  --leaf-2:   #efece4;
  --ink:      #101014;
  --ash:      #4a4a55;
  --smoke:    #62626b;
  --hairline: rgba(16, 16, 20, 0.115);
  --hair-hi:  rgba(16, 16, 20, 0.26);

  /* The accents are the app's own, and they are only ever signals: a cue, or
     a running clock. Nothing decorative is coloured. */
  --cue:  #d1006b;
  --live: #087a3a;
  --warn: #b45309;
  --hot:  #d1006b;

  /* Type. Apple devices render SF Pro Rounded natively through ui-rounded;
     Nunito is the cross-platform rounded fallback. The rounded face is what
     keeps the site matching the app's own chrome. */
  --display: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;
  --ui: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --maxw: 1140px;
  --narrow: 720px;
  --gutter: clamp(20px, 5vw, 64px);
  /* Sections are deliberately shorter than they were. Every one of them says
     one thing; none of them needs a screen and a half to say it. */
  --section: clamp(46px, 6vw, 84px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: #fff; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Icons are always the size of the word they sit beside, and never stretch. */
.icon { flex: none; display: inline-block; vertical-align: -0.16em; }

/* ════════════════════════ MASTHEAD ══════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  min-height: 62px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { border-radius: 50%; flex: none; display: block; }
.brand-text {
  font-family: var(--display);
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); white-space: nowrap;
}
.brand-text b { font-weight: 800; }

.nav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav-actions { position: relative; display: flex; align-items: center; gap: 12px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display);
  font-size: 14px; font-weight: 600;
  color: var(--ash);
  transition: color .2s var(--ease);
}
.nav-link { min-height: 44px; }
.nav-link:hover { color: var(--ink); }

/* The download menu. A <details>, so it opens with no JavaScript; the button
   is the <summary>. Its label never changes between pages, which is the whole
   point of it. */
.nav-get { position: static; margin-left: 4px; }
/* Scoped under .nav to outrank .btn, which comes later and is 48px tall. */
.nav .nav-get-btn {
  list-style: none; cursor: pointer;
  min-height: 38px; padding: 7px 15px; font-size: 13.5px; gap: 7px;
  white-space: nowrap;
}
.nav-get-btn::-webkit-details-marker { display: none; }
.nav-get-caret { transition: transform .22s var(--ease); }
.nav-get[open] .nav-get-caret { transform: rotate(180deg); }

.nav-get-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 16, 20, 0.16);
  animation: dlmenu-in .18s var(--ease);
}
@keyframes dlmenu-in { from { opacity: 0; transform: translateY(-6px); } }

.dlmenu-group + .dlmenu-group { border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 6px; }
.dlmenu-label {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--smoke);
}
.dlmenu-list { list-style: none; }
.dlmenu-list a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  transition: background .16s var(--ease);
}
.dlmenu-list a:hover { background: var(--leaf); }
.dlmenu-icon { display: flex; color: var(--ash); }
.dlmenu-name {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: -0.012em; color: var(--ink);
}
/* A platform that has no store to send anyone to reads as a line, not a link
   dressed up as one. */
.dlmenu-list a.is-soon .dlmenu-name { color: var(--ash); }
.dlmenu-list a.is-soon .dlmenu-cta { color: var(--smoke); }
.dlmenu-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--smoke); white-space: nowrap;
}
.dlmenu-list a:hover .dlmenu-cta { color: var(--ink); }
.dlmenu-foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 6px; padding: 12px;
  border-top: 1px solid var(--hairline);
}
.dlmenu-foot a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--smoke);
  transition: color .2s var(--ease);
}
.dlmenu-foot a:hover { color: var(--ink); }

.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0; margin-right: -9px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
/* Two 20px bars, 8px apart centre to centre, so each moves 4px to cross. */
.nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* The strip that sends you to the other half of the product. */
.nav-secondary { border-top: 1px solid var(--hairline); background: var(--leaf); }
.nav-secondary-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 10px var(--gutter);
  font-family: var(--display);
  font-size: 13px; font-weight: 600;
  color: var(--ash);
  transition: color .2s var(--ease);
}
.nav-secondary-btn:hover { color: var(--ink); }
.nav-secondary-btn:hover .nav-secondary-arrow { transform: translateX(3px); }
.nav-secondary-arrow { transition: transform .2s var(--ease); }
.nav-secondary-text-mobile { display: none; }

@media (max-width: 980px) {
  .nav { min-height: 58px; }
  /* Holds the top row's height when the open menu wraps below it, so the logo
     and buttons don't jump up. */
  .nav > .brand, .nav-actions { min-height: 58px; }
  .nav-ready .nav-toggle { display: flex; }
  .nav-actions { margin-left: auto; order: 2; }
  .nav-links {
    display: flex; width: 100%; order: 3;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding-bottom: 8px; border-top: 1px solid var(--hairline);
  }
  .nav-ready .nav-links:not(.open) { display: none; }
  .nav-links .nav-link {
    width: 100%; padding: 12px 0; font-size: 17px; color: var(--ink);
    border-bottom: 1px solid var(--hairline);
  }
  /* The topbar's own border closes the list; a second line under it doubled up. */
  .nav-links .nav-link:last-child { border-bottom: 0; }
  .nav-get { margin: 0; }
  .nav .nav-get-btn { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
  .nav-get-panel {
    position: absolute; right: 0; width: 340px;
    max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain;
    animation: none;
  }
}

@media (max-width: 560px) {
  .nav-secondary-text { display: none; }
  .nav-secondary-text-mobile { display: inline; }
}

/* ════════════════════════ BUTTONS ═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  min-height: 48px; padding: 12px 21px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .14s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
  text-align: center;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { transform: scale(1.03); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary,
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--hair-hi); font-weight: 600;
}
.btn-secondary:hover,
.btn-ghost:hover { border-color: var(--ink); background: var(--leaf); }

.actions,
.hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: clamp(22px, 2.6vw, 30px);
}

@media (max-width: 480px) {
  .hero-cta .btn, .actions .btn { width: 100%; }
}

/* ════════════════════════ LAYOUT & RHYTHM ═══════════════════════════════ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow .faq-list,
.wrap-narrow .prose { max-width: var(--narrow); }

/* Every section is separated by a full-bleed hairline. Nothing is a box. */
main > section {
  padding: var(--section) 0;
  border-top: 1px solid var(--hairline);
  position: relative;
}
main > section:first-of-type { border-top: 0; }

/* Two solid colours, alternating: a tinted section is a passage of reading, a
   plain one is paper. That alternation is the page's whole rhythm.

   It is worked out from position, not from a class a template remembers to
   set. Every page counts its sections differently - a role page has a `uses`
   section, the Slides page has the extension, the iPad page has no "also on
   iPad" card - so any hand-set colour was one edit away from printing two
   tinted sections against each other. Counting from the top instead means the
   hero is always paper, which is what it needs to be under the tinted nav
   strip, and every section after it simply flips. Sections can be added and
   removed and the rhythm cannot break. */
main > section { background: var(--paper); }
main > section:nth-of-type(even) { background: var(--leaf); }

[id] { scroll-margin-top: 110px; }
html { scroll-padding-top: 16px; }

/* ════════════════════════ TYPOGRAPHY ════════════════════════════════════ */
/* SECTION DESIGN ONE — LEDGER. Eyebrow on a hairline, heading, optional lede,
   then ruled rows. Every list on the site is this. */
.micro,
.section-tag {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ui);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--smoke);
  padding-bottom: 11px; margin-bottom: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--hairline);
}
.micro .icon, .section-tag .icon, .platforms-label .icon { color: var(--smoke); flex: none; }
.micro a { color: inherit; transition: color .2s var(--ease); }
.micro a:hover { color: var(--ink); }

.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.038em;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--cue); }

.section-h,
.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.section-h em, .section-title em { font-style: normal; color: var(--cue); }

/* One lede paragraph per section, and it is a short one. */
.body,
.section-desc {
  margin-top: clamp(12px, 1.6vw, 18px);
  max-width: 66ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--ash);
}
.body + .body { margin-top: 1em; }
.body strong, .section-desc strong { color: var(--ink); font-weight: 650; }
.body a, .section-desc a { color: var(--ink); border-bottom: 1px solid var(--hair-hi); }
.body a:hover, .section-desc a:hover { border-bottom-color: var(--cue); color: var(--cue); }

.meta-note { display: block; margin-top: 14px; font-size: 14px; color: var(--smoke); }
.meta-note a { color: var(--ash); border-bottom: 1px solid var(--hairline); }
.meta-note a:hover { color: var(--cue); border-bottom-color: var(--cue); }

/* The line under the screenshots that sends a reader to the other app. A
   sentence, so it is a block rather than the flex row .strip-note is. */
.shots-foot {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: 13.5px; line-height: 1.65; color: var(--smoke);
}
.shots-foot a { color: var(--ink); border-bottom: 1px solid var(--hair-hi); }
.shots-foot a:hover { color: var(--cue); border-bottom-color: var(--cue); }

/* The download count and "free and open source", on one rule, on every page. */
.statline {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 9px clamp(16px, 2.4vw, 28px);
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.statline li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--smoke);
}
.statline .icon { color: var(--smoke); }
.statline b {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.statline a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s var(--ease); }
.statline a:hover { color: var(--ink); }
.statline a:hover .icon { color: var(--cue); }

/* Headlines that come from a page's own sentence-shaped copy rather than a
   written headline. */
.display-long {
  font-size: clamp(1.85rem, 3.9vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 26ch;
}

code, .notes-content { font-family: var(--mono); font-size: 0.92em; }
.body code, .faq-answer code, .feature-desc code {
  padding: 2px 6px; border-radius: 5px;
  background: var(--leaf-2);
  color: var(--ink);
}

/* A quiet line of onward links, drawn on its own rule. */
.backline {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: clamp(22px, 2.8vw, 32px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.backline a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--ash);
  transition: color .2s var(--ease);
}
.backline a:hover { color: var(--cue); }

.shimmer, .hero-tagline {
  margin-top: 14px;
  font-size: 13.5px; color: var(--smoke);
  max-width: 56ch;
}

/* Content is visible immediately, including when scripting fails to load. */
.reveal { opacity: 1; transform: none; }
.reveal.in, .reveal.revealed { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .05s; }
.reveal.d2 { transition-delay: .1s; }
.reveal.d3 { transition-delay: .15s; }

.desktop-br { display: none; }
@media (min-width: 700px) { .desktop-br { display: inline; } }

/* ════════════════════════ BREADCRUMBS ═══════════════════════════════════ */
.crumbs { margin-bottom: clamp(18px, 2.4vw, 26px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; }
.crumbs li {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--smoke);
}
.crumbs li + li::before { content: "/"; color: rgba(16,16,20,0.22); font-weight: 400; }
.crumbs a { transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ash); }

/* ════════════════════════ HERO ══════════════════════════════════════════ */
.hero {
  padding-top: clamp(44px, 7vh, 78px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.hero .body { max-width: 56ch; }
.hero-404 { min-height: 66svh; display: flex; align-items: center; }

/* On the pages that carry the live prompter, the hero is two columns: the
   argument on the left, the app doing the thing on the right. */
.hero-grid {
  display: grid; gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

/* The strip of apps a page is about. */
.hero-platforms { margin-top: clamp(28px, 3.6vw, 44px); }
.platforms-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--smoke);
  padding-bottom: 11px; border-bottom: 1px solid var(--hairline);
}
.platforms-logos {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.platform-logo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 13px;
  color: var(--ash);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.platform-logo:hover { color: var(--ink); border-color: var(--hair-hi); transform: translateY(-2px); }
.platforms-more { margin-top: 13px; font-size: 13px; color: var(--smoke); }
.platforms-more a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s var(--ease); }
.platforms-more a:hover { color: var(--cue); }

/* ════════════════════════ THE LIVE PROMPTER ═════════════════════════════ */
/* SECTION DESIGN TWO — CARD, in its most literal form: the app, running, in
   the page. It is not a video and not a screenshot; it is the same script
   scrolling at the same lines-per-minute the app scrolls at, with the cues in
   the cue colour and the clock counting. Press it and it stops. */
.deck {
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(16, 16, 20, 0.09), 0 2px 6px rgba(16,16,20,0.04);
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.deck-bar {
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--leaf);
}
.deck-close {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--paper);
  display: grid; place-items: center; color: var(--smoke);
  font-size: 12px; line-height: 1;
}
.deck-title {
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  letter-spacing: -0.015em; color: var(--ink); text-align: center;
}
.deck-clock {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--live);
  padding: 4px 9px; border-radius: 999px;
  background: rgba(18, 161, 80, 0.09);
}
.deck-clock.is-warn { color: var(--warn); background: rgba(180, 83, 9, 0.09); }

.deck-screen {
  position: relative;
  height: clamp(260px, 42vh, 340px);
  overflow: hidden;
  background: #fbf9f4;
}
.deck-script {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 18px clamp(16px, 4vw, 26px);
  will-change: transform;
}
.deck-line {
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.46;
  letter-spacing: -0.018em;
  color: var(--ash);
  margin-bottom: 0.62em;
  transition: color .35s var(--ease);
}
.deck-line.is-on { color: var(--ink); }
.deck-line.is-cue {
  color: var(--cue);
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
}
.deck-line.is-cue.is-on { color: var(--cue); }

.deck-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--leaf);
}
.deck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--paper);
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.deck-btn:hover { border-color: var(--hair-hi); }
.deck-btn-main { background: var(--ink); color: #fff; border-color: var(--ink); }
.deck-btn-main:hover { background: #000; }
.deck-speed { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.deck-speed label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }
.deck-speed input { min-height: 44px; width: 84px; accent-color: var(--cue); }
.deck-legend {
  margin-top: 12px; text-align: center;
  font-size: 14px; color: var(--smoke);
}
.deck-legend b { color: var(--cue); font-weight: 700; }
@media (max-width: 420px) {
  .deck-speed label { display: none; }
  .deck-speed input { width: 70px; }
}

/* The Teleprompter / Cards switch, in the demo's title bar where the app
   keeps its mode menu. Both demos carry one; script.js keeps them in step. */
.demo-switch {
  justify-self: center;
  display: inline-flex; gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--paper);
}
.demo-tab {
  height: 26px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent;
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  letter-spacing: -0.012em; color: var(--ash);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.demo-tab:hover { color: var(--ink); }
.demo-tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.demo-tab:focus-visible { outline: 2px solid var(--cue); outline-offset: 2px; }
/* The cards panel matches the prompter's height, so switching does not move
   the page: the prompter's screen, less the row of dots. */
[data-demo-panel="cards"] .cardsdemo-stage { height: calc(clamp(260px, 42vh, 340px) - 20px); }

/* ════════════════════════ THE LIVE DECK OF CARDS ════════════════════════ */
/* Cards mode, in the same frame as the live prompter: one card on top, the
   next peeking out behind it, turned with a swipe or Back and Next. The
   watch version is the same deck on a black face. */
.cardsdemo {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(16, 16, 20, 0.09), 0 2px 6px rgba(16,16,20,0.04);
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.cardsdemo-bar {
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--leaf);
}
.cardsdemo-clock { justify-self: center; }
.cardsdemo-count {
  font-size: 12px; font-weight: 600; color: var(--smoke);
  font-variant-numeric: tabular-nums;
}
.cardsdemo-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 14px 0 0;
  background: #fbf9f4;
}
.cardsdemo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(16, 16, 20, 0.16);
  transition: background .3s var(--ease);
}
.cardsdemo-dot.is-on { background: var(--live); }
.cardsdemo-stage {
  position: relative;
  height: clamp(240px, 36vh, 290px);
  background: #fbf9f4;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.cardsdemo-stage:focus-visible { outline: 2px solid var(--cue); outline-offset: -4px; }
.cardsdemo-card {
  position: absolute; inset: 16px 26px 24px 20px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(16, 16, 20, 0.08), 0 1px 3px rgba(16, 16, 20, 0.06);
  font-family: var(--display);
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.cardsdemo-card .cue { color: var(--cue); }
.cardsdemo-card.is-current { z-index: 3; transform: none; opacity: 1; }
.cardsdemo-card.is-next { z-index: 2; transform: translate(10px, 8px) rotate(1.6deg) scale(0.97); opacity: 1; }
.cardsdemo-card.is-later { z-index: 1; transform: translate(14px, 12px) scale(0.94); opacity: 0; }
.cardsdemo-card.is-past { z-index: 4; transform: translateX(-115%) rotate(-8deg); opacity: 0; pointer-events: none; }
.cardsdemo-controls {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--leaf);
}
.cardsdemo-controls .deck-btn:disabled { opacity: 0.4; cursor: default; }
.cardsdemo-controls .deck-btn-main { background: var(--live); border-color: var(--live); }
.cardsdemo-controls .deck-btn-main:hover { background: #0e8a44; }

/* The watch: a black face in a case, with a crown on the side. */
.cardsdemo-watch {
  max-width: 290px;
  border: 11px solid #1c1c21;
  border-radius: 62px;
  background: #000;
  overflow: visible;
  padding: 16px 10px 14px;
  box-shadow: 0 24px 60px rgba(16, 16, 20, 0.2), 0 0 0 1px rgba(16,16,20,0.3);
}
.cardsdemo-watch::after {
  content: ""; position: absolute; right: -19px; top: 26%;
  width: 8px; height: 46px; border-radius: 4px;
  background: #2a2a31;
}
.cardsdemo-watch .cardsdemo-bar {
  grid-template-columns: auto minmax(0,1fr);
  background: transparent; border: 0; padding: 4px 12px;
}
.cardsdemo-watch .cardsdemo-clock { justify-self: start; background: rgba(52, 210, 123, 0.14); color: #34d27b; }
.cardsdemo-watch .cardsdemo-count { justify-self: end; color: #8e8e96; }
.cardsdemo-watch .cardsdemo-stage { height: 190px; background: #000; border-radius: 28px; }
.cardsdemo-watch .cardsdemo-card {
  inset: 6px 12px;
  padding: 4px;
  background: transparent; box-shadow: none;
  font-size: 20px; line-height: 1.25;
  color: #fff;
}
.cardsdemo-watch .cardsdemo-card .cue { color: #ff5fae; }
.cardsdemo-watch .cardsdemo-card.is-next { opacity: 0; }
.cardsdemo-watch .cardsdemo-controls { background: transparent; border: 0; padding: 8px 6px 4px; }
.cardsdemo-watch .deck-btn { background: #2a2a31; border-color: #2a2a31; color: #fff; height: 38px; }
.cardsdemo-watch .deck-btn-main { background: rgba(52, 210, 123, 0.2); border-color: transparent; color: #34d27b; }
.cardsdemo-watch .deck-btn-main:hover { background: rgba(52, 210, 123, 0.3); }

/* ════════════════════════ THE THREE PARTS ═══════════════════════════════ */
/* Teleprompter, Cards and Apple Watch: three cards in a row on a wide screen,
   stacked on a narrow one. The one for the page you are on is not a link. */
.modes-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  margin-top: clamp(20px, 2.8vw, 32px);
}
.modes-card {
  display: flex; flex-direction: column; gap: 8px;
  height: 100%;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--paper);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
a.modes-card:hover { transform: translateY(-3px); border-color: var(--hair-hi); box-shadow: 0 18px 44px rgba(16,16,20,0.08); }
.modes-card.is-current { background: transparent; border-style: dashed; }
.modes-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--leaf); color: var(--ink);
}
.modes-name {
  margin-top: 6px;
  font-family: var(--display); font-weight: 800; font-size: 1.2rem;
  letter-spacing: -0.025em; color: var(--ink);
}
.modes-blurb { font-size: 14.5px; line-height: 1.55; color: var(--ash); flex: 1; }
.modes-go {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--ink);
}
.modes-card.is-current .modes-go { color: var(--smoke); }
a.modes-card:hover .modes-go { color: var(--cue); }
@media (max-width: 760px) {
  .modes-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════ THE SCREENSHOTS ═══════════════════════════════ */
/* CARD again: the App Store artwork, one strip per device, side by side on a
   wide screen. They are the only photographs on the site. */
.shots-grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(20px, 2.8vw, 32px);
}

.shot {
  border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.shot:hover { border-color: var(--hair-hi); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16,16,20,0.08); }
.shot-media { display: block; width: 100%; height: auto; background: var(--paper); }
.shot-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--hairline);
}
.shot-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.018em; color: var(--ink); white-space: nowrap;
}
.shot-cap { font-size: 12.5px; line-height: 1.5; color: var(--smoke); text-align: right; }
@media (max-width: 560px) {
  .shot-foot { flex-direction: column; gap: 5px; }
  .shot-cap { text-align: left; }
}

/* ════════════════════════ THE DESKTOP SCREENS ═══════════════════════════ */
/* The same card as the screenshots, holding the desktop app's screens: side
   by side on a wide screen, one after another on a narrow one. */
.reel-card {
  margin-top: clamp(20px, 2.8vw, 32px);
  border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
}
.reel-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.4vw, 18px);
  padding: clamp(12px, 1.8vw, 22px) clamp(12px, 1.8vw, 22px) 6px;
}
.reel-frame img { display: block; width: 100%; height: auto; }
.reel-zoom { display: block; border-radius: 10px; cursor: zoom-in; transition: transform .3s var(--ease); }
.reel-zoom:hover { transform: translateY(-3px); }
.reel-zoom:focus-visible { outline: 2px solid var(--cue); outline-offset: 2px; }

/* The expanded screen: the image at up to its own size, on dimmed page. */
.reel-dialog {
  margin: auto; padding: 0; border: 0;
  width: min(1612px, 94vw); max-height: 94vh;
  background: transparent; overflow: visible;
}
.reel-dialog::backdrop { background: rgba(16, 16, 20, 0.72); }
.reel-dialog figure {
  border-radius: 18px; background: var(--paper);
  overflow: hidden; cursor: zoom-out;
}
.reel-dialog-img {
  display: block; width: 100%; height: auto;
  max-height: calc(94vh - 52px); object-fit: contain;
}
.reel-dialog-cap {
  padding: 12px 18px 16px; text-align: center;
  font-size: 13.5px; color: var(--ash);
  border-top: 1px solid var(--hairline);
}
.reel-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  cursor: pointer;
}
.reel-close:hover { border-color: var(--hair-hi); }
.reel-frame .shot-cap { text-align: center; padding: 4px 8px 10px; }
@media (max-width: 760px) {
  .reel-grid { grid-template-columns: 1fr; gap: 4px; }
}

/* ════════════════════════ THE DEMOS ═════════════════════════════════════ */
/* Three links out to YouTube, drawn as the device each was filmed on. Nothing
   is embedded anywhere on this site: an iframe would drag a third-party
   player onto every page it appeared on, and a link costs nothing. */
.watchgrid {
  list-style: none;
  display: grid; gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(20px, 2.8vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.watch-card {
  display: flex; flex-direction: column; gap: 14px;
  height: 100%;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--paper);
  transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.watch-card:hover { border-color: var(--hair-hi); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16,16,20,0.08); }
.watch-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.watch-device {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--smoke);
}
.watch-device .icon { color: var(--smoke); }
.watch-len { font-family: var(--mono); font-size: 11px; color: var(--smoke); }

/* The device, drawn rather than photographed: a frame, a page of ruled script
   inside it, and a play mark over the top. */
.watch-frame {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 152px;
  height: 208px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #fbf9f4;
  overflow: hidden;
  display: grid; align-content: start; gap: 8px;
  padding: 16px 13px;
}
.watch-card--landscape .watch-frame {
  max-width: 100%; width: 100%; border-radius: 12px; padding: 18px 20px;
}
.watch-rule { height: 7px; border-radius: 3px; background: rgba(16,16,20,0.11); }
.watch-rule.w1 { width: 92%; }
.watch-rule.w2 { width: 76%; }
.watch-rule.w3 { width: 84%; }
.watch-rule.w4 { width: 61%; }
.watch-rule.is-cue { background: rgba(209,0,107,0.3); width: 40%; height: 6px; }
.watch-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(16,16,20,0.28);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.watch-play::after {
  content: ""; margin-left: 3px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.watch-card:hover .watch-play { transform: translate(-50%, -50%) scale(1.1); background: var(--cue); }
.watch-go {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  border-top: 1px solid var(--hairline);
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--ash);
  transition: color .2s var(--ease);
}
.watch-card:hover .watch-go { color: var(--cue); }

/* ════════════════════════ THE CROSS-SELL PANEL ══════════════════════════ */
/* One card, used wherever a page has to point at the other half of the
   product without giving it a whole section of its own. */
.crosspanel {
  display: grid; gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(20px, 2.8vw, 32px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--hairline); border-radius: 20px;
  background: var(--paper);
}
@media (min-width: 860px) { .crosspanel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; } }
.crosspanel-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--smoke);
}
.crosspanel-h {
  margin-top: 12px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.1;
  letter-spacing: -0.028em; color: var(--ink);
}
.crosspanel-p { margin-top: 11px; font-size: 15px; line-height: 1.6; color: var(--ash); max-width: 52ch; }
.crosspanel-p a { color: var(--ink); border-bottom: 1px solid var(--hair-hi); }
.crosspanel-p a:hover { color: var(--cue); border-bottom-color: var(--cue); }
.crosspanel-apps { list-style: none; display: grid; gap: 1px; background: var(--hairline); border-radius: 14px; overflow: hidden; }
.crosspanel-apps li { background: var(--leaf); }
.crosspanel-apps a {
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 12px;
  padding: 13px 16px;
  transition: background .2s var(--ease);
}
.crosspanel-apps a:hover { background: var(--paper); }
.crosspanel-apps .icon { color: var(--ash); }
.crosspanel-name { font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.018em; }
.crosspanel-state {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--live); white-space: nowrap;
}

/* The three steps beside the Google Slides panel. The same ruled list as
   .crosspanel-apps above, but numbered prose rather than links. */
.slidesteps {
  list-style: none; display: grid; gap: 1px;
  background: var(--hairline); border-radius: 14px; overflow: hidden;
}
.slidesteps li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  padding: 14px 16px; background: var(--leaf);
}
.slidestep-n {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 11.5px;
}
.slidestep-t {
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.018em; color: var(--ink);
}
.slidestep-d {
  display: block; margin-top: 4px;
  font-family: var(--ui); font-weight: 400; font-size: 13px; line-height: 1.5;
  letter-spacing: 0; color: var(--ash);
}

/* ════════════════════════ RULED FEATURE ROWS ════════════════════════════ */
.rowlist {
  list-style: none;
  margin-top: clamp(20px, 2.8vw, 32px);
  display: grid;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  /* Two columns of rows: the same object, half the scrolling. */
  .rowlist { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); }
}
.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 clamp(12px, 2vw, 22px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--hairline);
}
.row-n {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
  color: var(--cue); padding-top: 4px;
}
.row-body h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.2;
  letter-spacing: -0.022em; color: var(--ink);
}
.row-body p {
  margin-top: 7px; max-width: 52ch;
  font-size: 14.5px; line-height: 1.58; color: var(--ash);
}
@media (max-width: 620px) {
  .row { grid-template-columns: 1fr; gap: 6px; }
  .row-n { padding-top: 0; }
}

/* ════════════════════════ APP ROWS ══════════════════════════════════════ */
.leaguerows {
  list-style: none;
  margin-top: clamp(20px, 2.8vw, 32px);
  display: grid;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .leaguerows { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); }
}
.leaguerow { border-top: 1px solid var(--hairline); }
.leaguerow a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(10px, 2vw, 20px);
  padding: clamp(12px, 1.6vw, 16px) 0;
  transition: padding-left .25s var(--ease);
}
.leaguerow a:hover { padding-left: 10px; }
.lr-icon { display: flex; color: var(--ash); }
.leaguerow a:hover .lr-icon { color: var(--cue); }
.lr-name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: -0.022em;
  color: var(--ink);
}
.lr-meta { font-size: 12.5px; color: var(--smoke); white-space: nowrap; }
.lr-state {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smoke); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 4px 9px; white-space: nowrap;
}
.lr-state.is-live { color: var(--live); border-color: rgba(18, 161, 80, 0.35); }
.strip-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: 13px; color: var(--smoke);
}
.strip-note a { color: var(--ash); border-bottom: 1px solid var(--hairline); }
.strip-note a:hover { color: var(--cue); border-bottom-color: var(--cue); }

@media (max-width: 700px) {
  .leaguerow a { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; }
  .lr-meta { display: none; }
}
@media (max-width: 420px) {
  .leaguerow a { grid-template-columns: 22px minmax(0, 1fr); }
  .lr-state { display: none; }
}

/* ════════════════════════ ROLE GRID ═════════════════════════════════════ */
.crestgrid {
  list-style: none;
  margin-top: clamp(20px, 2.8vw, 32px);
  display: grid; gap: 0 clamp(18px, 3vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--hairline);
}
.crestgrid li { border-bottom: 1px solid var(--hairline); }
.crestgrid a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  transition: padding-left .25s var(--ease);
}
.crestgrid a:hover { padding-left: 8px; }
.crest-arrow { flex: none; color: var(--smoke); transition: transform .2s var(--ease), color .2s var(--ease); }
.crestgrid a:hover .crest-arrow { color: var(--cue); transform: translateX(3px); }
.crestgrid a > span:first-child { flex: 1 1 auto; min-width: 0; }
.crestgrid span {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.25;
}
/* The keyword half of the anchor text: there for crawlers, quiet for readers. */
.crestgrid em {
  display: block; font-style: normal; font-weight: 500;
  font-size: 12px; color: var(--smoke); letter-spacing: 0;
}

/* ════════════════════════ THE SCRIPT PANELS ═════════════════════════════ */
.features-grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(20px, 2.8vw, 32px);
}
.feature-card {
  border: 1px solid var(--hairline); border-radius: 16px;
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--paper);
  display: flex; flex-direction: column;
}
.feature-header { display: flex; align-items: baseline; gap: 12px; }
.feature-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.18rem); letter-spacing: -0.022em;
}
.feature-desc { margin-top: 9px; font-size: 14px; line-height: 1.56; color: var(--ash); }
.notes-preview {
  margin-top: 16px; flex: 1;
  padding: 15px; border-radius: 12px;
  background: #fbf9f4;
  border: 1px solid var(--hairline);
  overflow-x: auto;
}
.notes-content {
  white-space: pre-line;
  font-size: 12.5px; line-height: 1.68;
  color: var(--ash);
}
.notes-preview-raw .notes-content { color: var(--smoke); }
.action-tag { color: var(--cue); font-weight: 700; }
.timestamp { color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; }
.timestamp-warning { color: var(--warn); }
.timestamp-danger { color: var(--hot); }

/* Use-case chips on the role pages, which have no page of their own to go to. */
.usecase {
  display: block; padding: 12px 0;
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  letter-spacing: -0.012em; color: var(--ash);
}

/* ════════════════════════ FAQ ═══════════════════════════════════════════ */
.faq-list { margin-top: clamp(20px, 2.8vw, 32px); border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-question {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 16px 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(15px, 1.4vw, 17px); letter-spacing: -0.018em;
  color: var(--ink);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-icon { flex: none; color: var(--smoke); transition: transform .3s var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(180deg); color: var(--cue); }
.faq-answer { padding-bottom: 18px; }
.faq-answer p { max-width: 66ch; font-size: 15px; line-height: 1.62; color: var(--ash); }
.faq-answer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-hi); }
.faq-answer a:hover { color: var(--cue); text-decoration-color: var(--cue); }

/* The FAQ page: its search box and grouped lists. */
.faq-page-hero { padding-bottom: clamp(32px, 5vh, 56px); }
.faq-search { position: relative; margin-top: clamp(20px, 2.6vw, 30px); max-width: var(--narrow); }
.faq-search-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--smoke); }
.faq-search-input {
  width: 100%; padding: 13px 0 13px 32px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--hair-hi);
  font-family: var(--display); font-size: 16px; font-weight: 600;
}
.faq-search-input::placeholder { color: var(--smoke); font-weight: 500; }
.faq-search-input:focus { outline: none; border-bottom-color: var(--cue); }
.faq-group + .faq-group { margin-top: clamp(36px, 5vw, 60px); }
.faq-empty { margin-top: 24px; color: var(--smoke); font-size: 15px; }

.faq-cta { max-width: var(--narrow); }

/* ════════════════════════ FINAL CTA ═════════════════════════════════════ */
.cta .display { max-width: 18ch; }

/* ════════════════════════ GET CUECARD ═══════════════════════════════════ */
.getgroups { margin-top: clamp(20px, 2.8vw, 32px); display: grid; gap: clamp(26px, 3.4vw, 40px); }
/* Side by side, the two groups share their rows, so a note that wraps in one
   column does not leave its rule lower than the other's. */
@media (min-width: 900px) {
  .getgroups-2 { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); }
  .getgroups-2 .getgroup { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}

.getgroup-head {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 5px 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair-hi);
}
.getgroup-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.2rem); letter-spacing: -0.022em;
  color: var(--ink);
}
.getgroup-title .icon { color: var(--ash); }
.getgroup-note { font-size: 13px; color: var(--smoke); }

.getrows { list-style: none; }
.getrow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 2vw, 20px);
  padding: clamp(13px, 1.8vw, 17px) 0;
  border-bottom: 1px solid var(--hairline);
}
.getrow-icon { display: flex; color: var(--ash); }
.getrow-body { display: grid; gap: 3px; min-width: 0; }
.getrow-name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: -0.022em;
  color: var(--ink);
}
.getrow-name a { transition: color .2s var(--ease); }
.getrow-name a:hover { color: var(--cue); }
/* A platform with no store to send anyone to yet: a state, not a button. */
.getrow-soon {
  padding: 8px 15px; border-radius: 999px;
  border: 1px dashed var(--hair-hi);
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--smoke); white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.getrow-soon:hover { color: var(--ink); border-color: var(--ink); }
.getrow-meta { font-size: 14px; color: var(--smoke); }
.getrow-btn { padding: 9px 17px; font-size: 13px; white-space: nowrap; }

@media (max-width: 620px) {
  .getrow { grid-template-columns: 24px minmax(0, 1fr); row-gap: 12px; }
  .getrow-btn, .getrow-soon { grid-column: 1 / -1; width: 100%; text-align: center; }
}

/* ════════════════════════ DESKTOP RELEASE DOWNLOADS ═════════════════════ */
.download-container { margin-top: clamp(20px, 2.8vw, 32px); }

.release-selector {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.release-selector label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--smoke);
}
.release-dropdown {
  flex: 1; min-width: 0; max-width: 320px;
  padding: 9px 12px; border-radius: 9px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline);
  font-family: var(--display); font-size: 14px; font-weight: 600;
}
.release-dropdown option { background: var(--paper); color: var(--ink); }

.download-grid {
  display: grid; gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  margin-top: clamp(18px, 2.6vw, 28px);
}
.download-loading { grid-column: 1 / -1; padding: 22px 0; color: var(--smoke); font-size: 14.5px; }

.platform-card {
  border: 1px solid var(--hairline); border-radius: 16px;
  padding: 20px; background: var(--paper);
  display: flex; flex-direction: column; gap: 14px;
}
.platform-card-header { display: grid; gap: 5px; }
.platform-icon { color: var(--ash); margin-bottom: 4px; }
.platform-icon svg { width: 24px; height: 24px; }
.platform-name { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.02em; }
.platform-subtitle { font-size: 14px; color: var(--smoke); }
.platform-downloads { display: grid; gap: 8px; }
.platform-download-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  background: var(--leaf); border: 1px solid var(--hairline);
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.platform-download-btn:hover { background: var(--leaf-2); border-color: var(--hair-hi); }
.btn-label { display: block; }
.btn-subtitle, .btn-version { display: block; font-size: 11.5px; font-weight: 500; color: var(--smoke); }
.platform-badge, .coming-soon-badge {
  display: inline-block; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smoke);
}

.manual-install-section, .install-instructions { border-top: 1px solid var(--hairline); padding-top: 13px; }
.manual-install-summary, .install-instructions-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  color: var(--ash);
}
.manual-install-summary::-webkit-details-marker,
.install-instructions-summary::-webkit-details-marker { display: none; }
.manual-install-icon, .install-instructions-icon { flex: none; transition: transform .25s var(--ease); }
.manual-install-section[open] .manual-install-icon,
.install-instructions[open] .install-instructions-icon { transform: rotate(180deg); }
.manual-install-content { margin-top: 13px; display: grid; gap: 11px; }
.install-instructions-list { margin: 11px 0 0 18px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.6; color: var(--smoke); }

.release-notes-btn { cursor: pointer; }

/* ════════════════════════ FOOTER ════════════════════════════════════════ */
/* The footer is the one band that is neither paper nor the tint. Whichever
   colour a page happens to end on, the footer is a step darker than it, so the
   page always has a floor rather than trailing off into a section the same
   colour as itself. */
.footer { background: var(--leaf-2); border-top: 1px solid var(--hairline); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 5.5vw, 72px) var(--gutter) clamp(28px, 4vw, 44px);
  display: grid; gap: clamp(28px, 4.4vw, 52px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
}
.footer-col .micro { margin-bottom: 15px; }
.footer-micro-2 { margin-top: 24px; }
.footer-col .brand { margin-bottom: 14px; }
.footer-blurb { max-width: 38ch; margin-bottom: 20px; font-size: 13px; line-height: 1.62; color: var(--smoke); }
.footer-list { list-style: none; display: grid; gap: 9px; }
.footer-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.footer-list a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--smoke);
  transition: color .2s var(--ease);
}
.footer-list a:hover { color: var(--cue); }
.footer-list-lead a { color: var(--ash); font-weight: 600; }

.statline-footer { margin-top: 20px; padding-top: 16px; }
.statline-footer li { font-size: 12px; }
.statline-footer b { font-size: 13px; }

.footer-social { list-style: none; display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline); color: var(--ash);
  background: var(--paper);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-social a:hover { color: var(--cue); border-color: var(--cue); }

.footer-cross { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.footer-cross a {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  line-height: 1.5; color: var(--ash);
  transition: color .2s var(--ease);
}
.footer-cross a:hover { color: var(--cue); }

.footer-base {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px var(--gutter) clamp(26px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
  display: grid; gap: 9px;
}
.footer .copy { font-size: 12px; color: var(--smoke); }
.footer .disclaimer { font-size: 11px; color: var(--smoke); max-width: 82ch; line-height: 1.55; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .footer-list-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════════════════ BLOG ══════════════════════════════════════════ */
.blog-hero .display { max-width: 20ch; }
.blog-entry { padding: clamp(24px, 3.4vw, 38px) 0; border-top: 1px solid var(--hairline); }
.blog-entry:first-child { border-top: 0; padding-top: 0; }
.blog-entry:last-child { padding-bottom: 0; }
.blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--smoke);
}
.blog-meta-separator { color: rgba(16,16,20,0.22); }
.blog-entry-title {
  margin-top: 12px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 2.9vw, 2rem); line-height: 1.08; letter-spacing: -0.03em;
  max-width: 26ch;
}
.blog-entry-title a { transition: color .2s var(--ease); }
.blog-entry-title a:hover { color: var(--cue); }
.blog-entry-content { margin-top: 14px; max-width: 72ch; }
.blog-entry-content p, .blog-entry-content ul, .blog-entry-content ol {
  font-size: 17px; line-height: 1.75; color: var(--ash); margin-bottom: 13px;
}
.blog-entry-content ul, .blog-entry-content ol { padding-left: 20px; }
.blog-entry-content li { margin-bottom: 7px; }
.blog-entry-content h2, .blog-entry-content h3 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.026em;
  color: var(--ink); margin: 24px 0 11px;
}
.blog-entry-content h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); padding-top: 18px; border-top: 1px solid var(--hairline); }
.blog-entry-content h3 { font-size: clamp(1.02rem, 1.9vw, 1.2rem); }
.blog-entry-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-hi); }
.blog-entry-content a:hover { color: var(--cue); text-decoration-color: var(--cue); }
.blog-entry-content strong { color: var(--ink); }
.blog-entry-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--smoke); transition: color .2s var(--ease);
}
.blog-entry-link:hover { color: var(--cue); }

.blog-post-header .blog-meta { margin-bottom: 16px; }
.blog-post-page .blog-entry-content { margin-top: 0; }

/* ════════════════════════ POLICY PAGES ══════════════════════════════════ */
.policy-page { padding-bottom: clamp(44px, 6vw, 80px); }
.policy-header, .policy-content {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
/* The crumbs sit where the title used to start, and the title follows them -
   the same order, and the same gap, a hero gives it. */
.policy-page > .wrap { padding-top: clamp(44px, 7vh, 84px); }
.policy-header { padding-top: 0; }
.policy-title, .doc-h {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.02; letter-spacing: -0.033em;
}
.policy-date, .updated { margin-top: 11px; color: var(--smoke); font-size: 12.5px; }
.policy-content, .prose { margin-top: clamp(24px, 3.4vw, 38px); }
.policy-content h2, .prose h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.08rem, 2vw, 1.32rem); letter-spacing: -0.02em; color: var(--ink);
  margin: 32px 0 12px; padding-top: 18px; border-top: 1px solid var(--hairline);
}
.policy-content h3, .prose h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  margin: 20px 0 9px; color: var(--ink);
}
.policy-content p, .policy-content ul, .policy-content ol,
.prose p, .prose ul, .prose ol {
  color: var(--ash); font-size: 17px; line-height: 1.75;
  margin-bottom: 14px; max-width: 68ch;
}
.policy-content ul, .policy-content ol, .prose ul, .prose ol { padding-left: 20px; }
.policy-content li, .prose li { margin-bottom: 8px; }
.policy-content strong, .prose strong, .prose b { color: var(--ink); font-weight: 600; }
.policy-content a, .prose a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--hair-hi);
}
.policy-content a:hover, .prose a:hover { color: var(--cue); text-decoration-color: var(--cue); }

/* ════════════════════════ ODDS AND ENDS ═════════════════════════════════ */
.noise-overlay, .cursor-glow { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  z-index: 80;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ════════════════════════ TOUCH ═════════════════════════════════════════ */
/* On a finger, a link that is its own row has to be worth hitting. These sit
   at 17-21px on a mouse, which is right for the type but under the 24px floor
   a touch target wants, so they grow only where there is no cursor. Links
   flowing inside a sentence are left alone: padding them apart would break the
   line they are set in. */
@media (pointer: coarse) {
  .footer-list a,
  .backline a,
  .dlmenu-foot a,
  .footer-social a,
  .statline a { min-height: 24px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
  .faq-question { min-height: 44px; }
}

/* ════════════════════════ MOTION ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .leaguerow a:hover, .crestgrid a:hover { padding-left: 0; }
  .nav-get-panel { animation: none; }
  .reel-zoom, .reel-zoom:hover { transition: none; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Written guides use the same two-column ledger as the feature section. */
.resource-template {
  max-width: 980px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 100px;
}
.resource-template h3 { font: 700 clamp(1.2rem, 2.5vw, 1.6rem)/1.25 var(--display); }
.resource-template p { max-width: 68ch; margin: 16px 0; line-height: 1.65; color: var(--ash); }
.template-script, .template-cards pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.7;
}
.template-script { padding: clamp(18px, 3vw, 28px); background: var(--leaf); border-radius: 14px; }
.template-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; }
.template-cards li { padding: 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); }
.template-cards pre { margin-top: 12px; }
.resource-template .btn { white-space: normal; text-align: center; }
@media (max-width: 620px) {
  .template-cards { grid-template-columns: 1fr; }
}
.workflow-section, .setup-guide { padding: clamp(44px, 6vw, 68px) 0; }
.setup-guide .body, .workflow-section .body { max-width: 64ch; }
.tutorial-action { margin-top: 18px; }

.setup-steps {
  display: grid;
  gap: 0 clamp(28px, 4vw, 56px);
  margin: 26px 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  list-style: none;
}
.setup-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 clamp(12px, 2vw, 22px);
  min-width: 0;
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--hairline);
}
.setup-step h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.setup-step-number {
  padding-top: 4px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cue);
}
.setup-step p {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ash);
}
@media (min-width: 860px) {
  .setup-steps { grid-template-columns: 1fr 1fr; }
}

.sample-script {
  max-width: 980px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
}
.sample-script summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 13px 15px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.sample-script summary::-webkit-details-marker { display: none; }
.sample-script summary .icon { color: var(--smoke); transition: transform .2s var(--ease), color .2s var(--ease); }
.sample-script[open] summary .icon { transform: rotate(180deg); color: var(--cue); }
.sample-script p { padding: 0 18px; font-size: 13.5px; line-height: 1.62; color: var(--ash); }
.sample-script pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 14px 18px 18px;
  padding: 16px;
  border-radius: 10px;
  background: var(--leaf);
}
.sample-script[open] summary { border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }

.guide-link-group { margin-top: 26px; }
.guide-group-title,
.related-heading {
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ash);
}
.related-heading { margin-top: 28px; }
.guide-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 1100px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-link-grid-short { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.guide-link-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  min-height: 58px;
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: 13px;
  background: var(--paper);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--ink);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.guide-link-grid a .icon { flex: none; color: var(--smoke); transition: transform .2s var(--ease), color .2s var(--ease); }
.guide-link-grid a:hover {
  transform: translateY(-2px);
  border-color: var(--hair-hi);
  box-shadow: 0 12px 28px rgba(16,16,20,0.06);
  color: var(--cue);
}
.guide-link-grid a:hover .icon { transform: translateX(3px); color: var(--cue); }

@media (max-width: 760px) {
  .guide-link-grid, .guide-link-grid-short { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .setup-step { grid-template-columns: 1fr; gap: 6px; }
  .setup-step-number { padding-top: 0; }
}

/* Keep primary content and downloads usable with keyboards, zoom or no script. */
[hidden] { display: none !important; }
html:not(.nav-ready) .topbar { position: relative; }
.skip-link {
  position: fixed; top: 10px; left: 16px; z-index: 100;
  padding: 12px 20px; border-radius: 8px; background: var(--ink); color: white;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
:where(a, button, input, select, summary, [tabindex]) { scroll-margin-block: 110px 24px; }
.hero-eyebrow {
  margin-bottom: 16px; color: var(--cue); font-size: 14px; font-weight: 700;
}
.hero-copy .display { line-height: 1.06; }
.footer-list a, .backline a, .dlmenu-foot a, .statline a { min-height: 28px; }
.demo-switch button { min-height: 36px; }
.cardsdemo-controls { flex-wrap: wrap; }
.cardsdemo-watch .deck-btn { min-height: 44px; }
@media (max-width: 480px) {
  .nav { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav .nav-get-btn { padding-inline: 14px; }
  .nav-get-btn .icon-download { display: none; }
  .nav-get-caret { display: none; }
  .deck-controls { flex-wrap: wrap; }
  .hero { padding-top: 32px; }
  .hero-eyebrow { margin-bottom: 12px; }
}

/* Current iOS workflow and task-focused help. */
.workflow-grid,.help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:32px 0; }
.workflow-card,.help-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px; border:1px solid var(--hairline); border-radius:18px; background:var(--paper); color:var(--ink); text-decoration:none; min-width:0; transition:border-color .2s,transform .2s; }
.workflow-card:hover,.help-card:hover { border-color:var(--ink); transform:translateY(-3px); }
.workflow-number { font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--smoke); }
.workflow-card h3,.help-card h2 { font-size:24px; line-height:1.2; margin:22px 0 12px; }
.workflow-card p,.help-card p { color:var(--ash); line-height:1.7; margin:0 0 24px; }
.help-card-link { font-size:14px; font-weight:800; margin-top:auto; }
.workflow-extras { display:flex; flex-wrap:wrap; gap:16px 32px; padding-top:20px; border-top:1px solid var(--hairline); }
.workflow-extras a { color:var(--ink); font-weight:700; text-underline-offset:5px; }
.workflow-extras span { color:var(--smoke); font-size:13px; }
.guide-header { padding-top:56px; padding-bottom:48px; }
.guide-header .display { max-width:960px; margin:20px 0; }
.guide-header .body { max-width:740px; }
.guide-header .actions { margin:24px 0; }
.guide-layout { display:grid; grid-template-columns:240px minmax(0,760px); gap:64px; padding-bottom:80px; align-items:start; }
.guide-sidebar { display:flex; flex-direction:column; gap:4px; position:sticky; top:100px; }
.guide-sidebar a { color:var(--ash); padding:9px 12px; font-size:14px; line-height:1.45; text-decoration:none; border-radius:8px; }
.guide-sidebar a:hover,.guide-sidebar a[aria-current] { background:var(--leaf); color:var(--ink); }
.guide-sidebar a[aria-current] { font-weight:800; }
.guide-sidebar .guide-back { font-weight:800; margin-bottom:12px; }
.guide-prose { color:var(--ash); font-size:18px; line-height:1.8; min-width:0; overflow-wrap:anywhere; }
.guide-prose h2 { font-size:29px; line-height:1.25; letter-spacing:-.025em; color:var(--ink); margin:44px 0 18px; }
.guide-prose h2:first-child { margin-top:0; }
.guide-prose p,.guide-prose ul,.guide-prose ol { margin:0 0 22px; }
.guide-prose ul,.guide-prose ol { padding-left:26px; }
.guide-prose li { margin:10px 0; }
.guide-prose strong { color:var(--ink); }
.guide-prose a,.help-contact a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.guide-standalone { max-width:820px; padding-bottom:64px; }
.help-search { max-width:700px; margin-top:32px; }
.help-search label { display:block; font-weight:800; margin-bottom:10px; }
.help-search input { width:100%; box-sizing:border-box; padding:18px 20px; border:1px solid var(--hair-hi); border-radius:12px; font:inherit; font-size:18px; background:var(--paper); color:var(--ink); }
.help-search input:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.help-search [role=status] { min-height:24px; margin:10px 0 0; color:var(--smoke); }
.help-list { padding-bottom:72px; }
.help-list .help-grid { margin-top:0; }
.help-contact { background:var(--leaf); border-radius:16px; padding:28px; margin-top:36px; }
.help-contact h2 { font-size:24px; margin:0 0 12px; color:var(--ink); }
.help-contact p { margin:0; line-height:1.75; }
.help-card[hidden], [data-help-empty][hidden], [data-help-search][hidden] { display:none; }
@media(max-width:900px) { .workflow-grid,.help-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-layout { grid-template-columns:180px minmax(0,1fr); gap:28px; } }
@media(max-width:600px) { .workflow-grid,.help-grid { grid-template-columns:1fr; } .guide-layout { display:flex; flex-direction:column; gap:24px; } .guide-sidebar { position:static; order:2; width:100%; border-top:1px solid var(--hairline); padding-top:20px; } .guide-header { padding-top:32px; padding-bottom:32px; } .guide-prose { font-size:17px; } .workflow-card,.help-card { padding:24px; } .guide-prose h2 { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { .workflow-card,.help-card { transition:none; } .workflow-card:hover,.help-card:hover { transform:none; } }

.help-footer { padding:40px 0; }
.help-footer p { margin:16px 0; color:var(--ash); }
.help-footer nav { display:flex; flex-wrap:wrap; gap:14px 24px; }
.help-footer nav a { color:var(--ink); text-underline-offset:4px; }