/* Self-hosted Geist + Source Serif 4, latin subset, variable. These are the
     exact files Google's CSS2 response pointed at (geist/v5, sourceserif4/v14):
     all five Geist weight rules and both Source Serif 4 rules resolved to a
     single variable file per family, so one ranged @font-face each is
     equivalent to Google's 5+2 discrete rules. unicode-range is copied verbatim
     from that response. latin only — the page renders 8 non-ASCII codepoints
     and 7 are in this range (the 8th, U+2248, only appears inside a comment).

     ROMAN ONLY, DELIBERATELY. Google serves no italic face for Source Serif 4
     here, so the italic used at .quote-line and in the canvas caption is
     SYNTHESISED by the browser. Adding a real italic @font-face would visibly
     change those glyphs. Don't. */
  @font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/tabflows-playbook/fonts/geist-latin-v5.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/tabflows-playbook/fonts/source-serif-4-latin-v14.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    color-scheme: light;
    --paper: #fbfaf8;
    --ink: #0f1115;
    --ink-soft: #6b6f76;
    --ink-faint: #b7bac0;
    --line: rgba(15, 17, 21, 0.12);
    --line-strong: rgba(15, 17, 21, 0.22);
    --navy: #182244;
    --coral: #fe4f45;
    --blue: #1297f3;
    --yellow: #f7c91b;
    --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --ease: cubic-bezier(0.2, 0.7, 0.22, 1);
  }
  * { box-sizing: border-box; }
  html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); }
  body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  button { color: inherit; font: inherit; }
  button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
  [hidden] { display: none !important; }

  .stage { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
  .scene-shell { position: absolute; inset: 0; z-index: 3; }
  #scene { display: block; width: 100%; height: 100%; cursor: default; opacity: 0; touch-action: none; transition: opacity 800ms var(--ease); }
  .ready #scene { opacity: 1; }
  #scene.has-cover-hover { cursor: pointer; }
  #scene.has-page-hover { cursor: grab; }
  /* Oversized custom cursor while actively grabbing/flipping a page — the
     native "grabbing" glyph is too small to read as an emphasized action. */
  #scene.is-dragging {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56"><g fill="none" stroke="%230f1115" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 26v-6a4 4 0 0 1 8 0v4M28 24v-7a4 4 0 0 1 8 0v7M36 24v-5a4 4 0 0 1 8 0v9c0 8-6 14-14 14h-2c-6 0-10-3-13-8l-4-7a3 3 0 0 1 5-3l4 5"/></g></svg>') 28 28, grabbing;
  }

  .masthead {
    position: absolute; top: 28px; left: 32px; right: 32px; z-index: 8;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    pointer-events: none;
  }
  .brand-mark { display: flex; align-items: center; gap: 10px; }
  .brand-mark svg { display: block; height: 20px; width: auto; }

  .controls-bar {
    position: absolute; left: 50%; bottom: 26px; z-index: 7;
    display: flex; align-items: center; gap: 12px;
    width: auto; max-width: calc(100vw - 48px);
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(15, 17, 21, 0.07);
    backdrop-filter: blur(14px);
  }

  .chapter-rail {
    position: fixed; left: 22px; top: 50%; z-index: 6;
    display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
    transform: translateY(-50%);
    opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease);
  }
  .chapter-rail.chapter-rail-visible { opacity: 1; pointer-events: auto; }
  .chapter-tick {
    border: none; background: var(--line-strong); cursor: pointer; padding: 0;
    width: 14px; height: 3px; border-radius: 2px;
    transition: width 200ms var(--ease), height 200ms var(--ease), background 200ms ease;
  }
  .chapter-tick:hover { background: var(--ink-soft); }
  .chapter-tick.chapter-tick-active { width: 26px; height: 6px; background: var(--blue); }
  @media (max-width: 900px) {
    .chapter-rail { display: none; }
  }
  .round-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms var(--ease), opacity 160ms ease;
  }
  .round-btn { position: relative; display: grid; width: 28px; height: 28px; padding: 0; border-radius: 50%; place-items: center; flex: 0 0 auto; }
  .round-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
  .round-btn:hover:not(:disabled) {
    color: var(--ink); background: #fff; border-color: var(--line);
    transform: translateY(-1px) scale(1.05); box-shadow: 0 4px 10px rgba(15, 17, 21, 0.08);
  }
  .round-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); box-shadow: none; }
  .round-btn::after {
    content: attr(aria-label); position: absolute; bottom: calc(100% + 9px); left: 50%;
    background: #1c1d21; color: #fff; font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
    padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 10;
    opacity: 0; transform: translate(-50%, 4px); transition: opacity 140ms ease, transform 140ms ease;
  }
  .round-btn:hover::after { opacity: 1; transform: translate(-50%, 0); }
  .round-btn:disabled { opacity: 0.3; cursor: default; }

  .page-status { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; text-align: center; }
  .page-status strong { overflow: hidden; font-size: 0.74rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .page-status span { color: var(--ink-faint); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

  .fallback {
    position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; gap: 22px; padding: 40px;
    background: var(--paper); color: var(--ink); text-align: center;
  }
  .ready .fallback { display: none; }
  .fallback h2 { max-width: 520px; margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
  .fallback p { max-width: 460px; margin: 0; color: var(--ink-soft); line-height: 1.5; }

  .loading { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--paper); }
  .loading-inner { display: grid; justify-items: center; gap: 14px; }
  .loading-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--coral); animation: pulse 1.4s var(--ease) infinite; }
  .loading p { margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.55; } }

  .teaser {
    position: fixed; inset: 0; z-index: 25;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 24px 40px 32px; background: #ffffff;
    opacity: 1; transition: opacity 480ms var(--ease);
  }
  .teaser.teaser-hidden { opacity: 0; pointer-events: none; }

  .teaser-nav {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  }
  .teaser-nav .brand-mark svg { display: block; height: 18px; width: auto; }
  .teaser-nav .teaser-sep { color: var(--line-strong); }

  .teaser-stage { position: relative; flex: 1 1 auto; display: grid; align-items: center; margin: 10px 0; }
  .teaser-chapter {
    grid-area: 1 / 1; max-width: 760px;
    display: grid;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  }
  .teaser-chapter.teaser-chapter-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  /* teaser-chapter-active's own pointer-events: auto outranks the parent's
     inherited "none" once .teaser-hidden fades the whole section out — left
     the still-active chapter's text invisibly clickable/hoverable right on
     top of the book underneath it. Force it off for real once hidden. */
  .teaser.teaser-hidden .teaser-chapter-active { pointer-events: none; }
  .teaser-copy {
    display: grid; gap: 24px; font-family: var(--serif); font-weight: 400; font-style: normal;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.5; letter-spacing: -0.005em; color: var(--ink);
  }
  .teaser-copy p { margin: 0; min-height: 1.4em; text-wrap: pretty; }
  .teaser-caret {
    display: inline-block; width: 0.5em; height: 0.88em; margin-left: 1px;
    background: var(--coral); border-radius: 0; vertical-align: baseline;
  }
  /* Solid while actively typing (reads as "still writing"); once a chapter
     finishes, switch to a blinking idle cursor instead of just parking it
     lit at the end of the last sentence. */
  .teaser-copy-done .teaser-caret { animation: teaser-caret-blink 1s step-end infinite; }
  @keyframes teaser-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .teaser-copy-done .teaser-caret { animation: none; }
  }
  .teaser-highlight-coral { color: var(--coral); font-weight: 500; }
  .teaser-highlight-blue { color: var(--blue); font-weight: 500; }
  .teaser-highlight-yellow { color: #b3860a; font-weight: 500; }

  /* Dictionary-style word lookup, triggered automatically once the preface
     finishes typing (not on hover): the rest of the paragraphs blur, the
     word lights up, and a definition types in right where the sentence
     was. */
  .teaser-copy.teaser-lookup-active p {
    transition: filter 420ms ease, opacity 420ms ease;
  }
  .teaser-copy.teaser-lookup-active p:not(.teaser-lookup-host) {
    filter: blur(3px); opacity: 0.4;
  }
  .teaser-lookup-blur {
    display: inline; filter: blur(3px); opacity: 0.4;
    transition: filter 420ms ease, opacity 420ms ease;
  }
  .teaser-lookup-word {
    background: transparent; border-radius: 3px; padding: 0 3px; margin: 0 -3px;
    font-weight: 500; transition: background 320ms ease;
  }
  .teaser-lookup-word.teaser-lookup-word-lit { background: rgba(247, 201, 27, 0.55); }
  .teaser-lookup-def { color: var(--ink); }
  .teaser-lookup-caret {
    display: inline-block; width: 0.45em; height: 0.85em; margin-left: 1px;
    background: var(--coral); vertical-align: baseline;
  }
  @media (prefers-reduced-motion: reduce) {
    .teaser-copy.teaser-lookup-active p { transition: none; }
    .teaser-lookup-blur { transition: none; }
    .teaser-lookup-word { transition: none; }
  }

  .teaser-controls { display: flex; align-items: center; justify-content: flex-start; gap: 20px; }

  .teaser-next {
    position: relative; overflow: hidden; border: none; cursor: pointer;
    background: var(--blue); color: #fff; border-radius: 3px;
    min-width: 176px; height: 46px; padding: 0;
    font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    transition: background 160ms ease, opacity 260ms ease;
  }
  /* Static label (replaces the old auto-scrolling ticker) with an iOS
     "slide to unlock" shimmer: a soft highlight band sweeping through the
     dim label text, looping while the handle sits idle at rest. */
  .teaser-ticker {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding-left: 30px; white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(
      110deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 42%,
      rgba(255,255,255,1) 50%, rgba(255,255,255,0.5) 58%, rgba(255,255,255,0.5) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: teaser-shimmer 3.4s ease-in-out infinite;
    /* Cut by JS as the handle travels: transparent up to the handle's
       position (plus a soft feather), opaque past it — the label
       dissipates under and behind the slider instead of just being
       covered by it. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 0, black 0, black 100%);
    mask-image: linear-gradient(to right, transparent 0, transparent 0, black 0, black 100%);
  }
  @keyframes teaser-shimmer { 0% { background-position: 200% 0; } 55%, 100% { background-position: -40% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .teaser-ticker { animation: none; }
  }
  /* Slide-to-unlock handle, iPhone-4 style: a knob riding the same blue
     track, dragged (or tapped, which auto-slides) to the right to advance. */
  .teaser-next-handle {
    position: absolute; top: 3px; left: 3px; width: 40px; height: 40px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--blue); border-radius: 2px;
    cursor: grab; touch-action: none;
    box-shadow: 0 1px 3px rgba(15, 17, 21, 0.35);
  }
  .teaser-next-handle:active { cursor: grabbing; }
  .teaser-next-handle svg { width: 16px; height: 16px; }

  @media (max-width: 720px) {
    .teaser { padding: 22px 22px 32px; }
    .teaser-stage { margin: 14px 0; }
    .teaser-copy { font-size: clamp(0.95rem, 4.6vw, 1.15rem); gap: 16px; }
    .teaser-controls { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
    .teaser-next { width: 100%; }
  }

  @media (max-width: 720px) {
    .masthead { top: 18px; left: 18px; right: 18px; }
    .controls-bar { bottom: 16px; gap: 10px; padding: 8px 10px; }
  }

  .hyperjump {
    position: fixed; inset: 0; z-index: 25; background: #ffffff;
    opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease);
  }
  .hyperjump.hyperjump-active { opacity: 1; pointer-events: auto; }
  #hyperjump-canvas { display: block; width: 100%; height: 100%; }
  .hyperjump-hint {
    position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); margin: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft); opacity: 0.55; transition: opacity 320ms var(--ease);
  }
  .hyperjump-hint.hyperjump-hint-faded { opacity: 0; }
  .hyperjump-hint svg { width: 26px; height: 42px; overflow: visible; }
  /* The mouse body stays put as a constant "this is a scroll" reference;
     the wheel dot is the only thing that moves, rolling down and fading
     out on a loop like a repeated scroll demo. */
  .hyperjump-hint-wheel { animation: hyperjump-wheel-scroll 1.6s ease-in-out infinite; transform-origin: 13px 13px; }
  @keyframes hyperjump-wheel-scroll {
    0% { transform: translateY(0); opacity: 0; }
    18% { opacity: 1; }
    58% { transform: translateY(9px); opacity: 1; }
    82% { transform: translateY(13px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hyperjump-hint-wheel { animation: none; transform: translateY(0); opacity: 1; }
  }
  @media (max-width: 720px) {
    .hyperjump-hint { bottom: 34px; }
  }

  .testimonials {
    position: fixed; inset: 0; z-index: 25; background: #fbfaf8;
    opacity: 0; pointer-events: none; transition: opacity 480ms var(--ease);
    overflow: hidden;
  }
  .testimonials.testimonials-active { opacity: 1; pointer-events: auto; }
  .testimonial-rail { position: relative; width: 100%; height: 100%; }
  .testimonial-kicker {
    display: block; margin: 14px 0 0; text-wrap: pretty;
    font-family: var(--serif); font-size: 0.95rem; font-weight: 400; font-style: italic;
    letter-spacing: 0.01em; color: var(--blue);
  }
  .testimonial-card {
    position: absolute; top: 50%; left: 50%; width: min(640px, 80vw); padding: 0 20px;
    text-align: center; font-family: var(--serif); color: var(--ink);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease), filter 420ms var(--ease);
  }
  .testimonial-card blockquote {
    margin: 0; font-size: clamp(1.25rem, 2.8vw, 1.85rem); line-height: 1.45; font-style: normal; text-wrap: pretty;
  }
  .testimonial-clinic-logo {
    display: block; height: 40px; width: auto; max-width: 220px; margin: 0 auto 18px; object-fit: contain;
  }
  .testimonial-card-current { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); z-index: 2; }
  .testimonial-card-enter { transform: translate(-50%, -85%) scale(1); opacity: 0; z-index: 2; filter: blur(0); }
  .testimonial-card-exit { transform: translate(-50%, -12%) scale(0.96); opacity: 0; z-index: 2; filter: blur(0); }
  .testimonial-card-enter-back { transform: translate(-50%, -15%) scale(1); opacity: 0; z-index: 2; filter: blur(0); }
  .testimonial-card-exit-back { transform: translate(-50%, -88%) scale(0.96); opacity: 0; z-index: 2; filter: blur(0); }
  .testimonial-card-prev,
  .testimonial-card-next {
    opacity: 0.3; filter: blur(5px); z-index: 1; color: rgba(15, 17, 21, 0.3);
  }
  .testimonial-card-prev { transform: translate(-138%, -50%) scale(0.78); }
  .testimonial-card-next { transform: translate(38%, -50%) scale(0.78); }
  .testimonial-attrib {
    display: block; margin: 26px 0 0; font-family: var(--serif); font-size: 0.92rem; font-weight: 400;
    font-style: normal; letter-spacing: 0.01em; color: var(--ink-soft);
  }
  .testimonial-attrib strong { color: var(--ink); font-weight: 500; }
  .testimonial-avatar {
    display: inline-block; width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    vertical-align: middle; margin: -3px 8px 0 0; border: 1px solid rgba(15, 17, 21, 0.15);
  }
  .testimonial-clip-frame {
    width: min(360px, 60vw); margin: 0 auto 28px; border-radius: 10px; overflow: hidden;
    background: #eceae5; box-shadow: 0 20px 44px -18px rgba(15, 17, 21, 0.3);
  }
  .testimonial-clip-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #ddd9d2; }
  .testimonial-clip-bar span { display: block; width: 10px; height: 10px; border-radius: 50%; }
  .testimonial-clip-bar span:nth-child(1) { background: #ff5f57; }
  .testimonial-clip-bar span:nth-child(2) { background: #febc2e; }
  .testimonial-clip-bar span:nth-child(3) { background: #28c840; }
  /* aspect-ratio reserves the height before video metadata loads — without it
     the card settles, then jumps when the video's intrinsic size arrives. */
  .testimonial-clip { display: block; width: 100%; aspect-ratio: 16 / 9; }
  .testimonials { cursor: none; }
  .testimonial-progress {
    position: fixed; top: 0; left: 0; transform: translate(-9999px, -9999px);
    width: 64px; height: 64px; border: none; background: rgba(255, 255, 255, 0.85); border-radius: 50%;
    display: grid; place-items: center; pointer-events: none; z-index: 3;
    box-shadow: 0 4px 14px rgba(15, 17, 21, 0.15);
  }
  .testimonial-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
  .testimonial-ring-track { fill: none; stroke: rgba(15, 17, 21, 0.12); stroke-width: 2; }
  .testimonial-ring-fill {
    fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 175.93; stroke-dashoffset: 175.93; transition: stroke-dashoffset 420ms var(--ease);
  }
  #testimonial-count { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
  @media (max-width: 720px) {
    .testimonial-card-prev, .testimonial-card-next { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }