@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap");


      /* Full light-theme refresh: higher contrast and cleaner hierarchy. */
      :root {
        --palette-primary: #d56a3f;
        --palette-secondary: #0f8c95;
        --palette-tertiary: #b24d3d;
        --palette-on-background: #1b2329;
        --palette-on-surface: #1b2329;
        --palette-on-primary: #0f0f0f;
        --palette-on-secondary: #ffffff;
        --palette-on-tertiary: #ffffff;
        --palette-outline: #c2ccd8;
        --palette-on-surface-variant: rgba(27, 35, 41, 0.78);
        --palette-turquoise: #00666c;
        --palette-coral-pink: #c65d52;
        --palette-orange: #ec935e;
        --palette-deep-turquoise: #1b454b;
        --palette-deep-coral-pink: #7a413a;
        --palette-deep-orange: #a36645;
        --palette-ink: #242d36;
        --palette-charcoal: #556274;
        --palette-warm-gray: #77808a;
        --palette-divider: #c2ccd8;
        --palette-background: #f4f7fb;
        --palette-surface-default: #f4f7fb;
        --palette-surface: #edf2f7;
        --palette-surface-container: #e2e8f0;
        --palette-surface-muted: #eaf2f5;
        --palette-surface-muted-resolved: #f1f5f8;
        --palette-surface-container-highest: #d8dde8;
        --palette-surface-highlight: #f8fbff;
        --palette-surface-card: #ffffff;
        --palette-accent: #ec935e;
        --palette-accent-soft: #ffe9d6;
        --palette-accent-dark: #9f5c42;
        --palette-on-accent: #2e1d12;
        --palette-success: #00de94;
        --palette-success-dark: #00b377;
        --palette-success-soft: #cffbea;
        --palette-warning: #fbbc04;
        --palette-warning-soft: #fff0bf;
        --palette-error: #c65d52;
        --palette-error-soft: #f2d7d4;
        --palette-card-mint: #99f7d0;
        --palette-card-blue: #adbeff;
        --palette-card-purple: #d3b8ff;
        --palette-dark-surface: #111318;
        --palette-dark-surface-elevated: #181b22;
        --palette-dark-surface-muted: #1d2129;
        --palette-dark-surface-deep: #090a0d;
        --palette-warm-white: #f4f7fb;
        --palette-cream-mist: #f4f6fa;
        --palette-sage-mist: #edf4f8;

        --palette-primary-rgb: 213 106 63;
        --palette-secondary-rgb: 27 145 152;
        --palette-tertiary-rgb: 178 77 61;
        --palette-ink-rgb: 36 45 54;
        --palette-charcoal-rgb: 85 98 116;
        --palette-background-rgb: 244 247 251;
        --palette-surface-rgb: 237 242 247;
        --palette-surface-container-rgb: 226 232 240;
        --palette-surface-default-rgb: 244 247 251;
        --palette-surface-muted-rgb: 234 242 245;
        --palette-surface-muted-resolved-rgb: 241 245 248;
        --palette-surface-container-highest-rgb: 216 221 232;
        --palette-surface-card-rgb: 255 255 255;
        --palette-dark-surface-rgb: 17 19 24;
        --palette-dark-surface-elevated-rgb: 24 27 34;
        --palette-dark-surface-muted-rgb: 29 33 41;
        --palette-dark-surface-deep-rgb: 9 10 13;
        --palette-orange-rgb: 236 147 94;
        --palette-card-mint-rgb: 153 247 208;
        --palette-card-blue-rgb: 173 190 255;
        --palette-card-purple-rgb: 211 184 255;
        --palette-warm-white-rgb: 244 247 251;
        --palette-sage-mist-rgb: 237 244 248;

        --turquoise: var(--palette-turquoise);
        --coral: var(--palette-coral-pink);
        --orange: var(--palette-orange);
        --on-accent: var(--palette-on-accent);

        --font-body: "Nunito", "Inter", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-display: "Caveat", "Comic Sans MS", "Brush Script MT", cursive;

        --card-1: var(--palette-card-mint);
        --card-2: var(--palette-card-blue);
        --card-3: var(--palette-card-purple);

        --ink: var(--palette-on-surface);
        --charcoal: var(--palette-on-surface-variant);
        --divider: var(--palette-outline);
        --accent-text: var(--palette-primary);

        --surface: var(--palette-surface);
        --surface-card: var(--palette-surface-card);
        --surface-muted: var(--palette-surface-muted);
        --surface-glass: rgba(var(--palette-surface-container-rgb), 0.86);

        --success: var(--palette-success);
        --error: var(--palette-error);
        --note-ok: var(--palette-success);
        --note-error: var(--palette-error);

        --shadow: 0 12px 30px -18px rgba(var(--palette-ink-rgb), 0.55);

        --scene-deep: var(--palette-surface-container-highest);
        --scene-shallow: var(--palette-surface);
        --scene-glint: var(--palette-surface-muted-resolved);
        --scene-depth-scale: 1.85;

        --grad-a: var(--turquoise);
        --grad-b: var(--coral);

        /* One vertical step, shared by both columns. */
        --rhythm: clamp(1.15rem, 3vh, 2.1rem);

        --radius-card: clamp(1.05rem, 2vw, 1.35rem);
        --radius-chip: 999px;
        --surface-panel: linear-gradient(180deg, var(--palette-surface) 0%, var(--palette-surface-container) 100%);
        --panel-border: rgba(var(--palette-ink-rgb), 0.16);
        --panel-border-strong: rgba(var(--palette-ink-rgb), 0.28);
        --panel-shadow: 0 22px 50px -34px rgba(var(--palette-ink-rgb), 0.6);
        --panel-glow: inset 0 0 0 1px rgba(var(--palette-warm-white-rgb), 0.18);
        --panel-sheen: linear-gradient(
            125deg,
            rgba(var(--palette-surface-rgb), 0.12),
            transparent 36%
          );
        --subtle-rule: rgba(var(--palette-ink-rgb), 0.08);
        --panel-headline: rgba(var(--palette-ink-rgb), 0.95);
        --panel-card: linear-gradient(
          150deg,
          var(--palette-surface-card) 0%,
          var(--palette-surface-muted) 52%,
          var(--palette-surface-highlight) 100%
        );

        /* The scrim sits between the water and the text. Heavy where the
           column is, light at the edges — see the note on .scrim. */
        --scrim-core: rgba(var(--palette-background-rgb), 0.58);
        --scrim-edge: rgba(var(--palette-background-rgb), 0.20);
      }

      :root[data-theme='dark'] {
        --ink: #eceff4;
        --charcoal: rgba(236, 239, 244, 0.82);
        --divider: #464d5a;
        --accent-text: var(--palette-primary);

        --palette-primary: #86f9c9;
        --palette-secondary: #5a7bf6;
        --palette-tertiary: #965ef3;
        --palette-on-background: #eceff4;
        --palette-on-surface: #eceff4;
        --palette-on-surface-variant: rgba(236, 239, 244, 0.74);
        --palette-background: #090a0d;
        --palette-surface: #111318;
        --palette-surface-container: #181b22;
        --palette-surface-muted: #1d2129;
        --palette-surface-container-highest: #3f475a;
        --surface: var(--palette-surface);
        --surface-card: var(--palette-surface-container);
        --surface-muted: var(--palette-surface-muted);
        --surface-glass: rgba(var(--palette-dark-surface-elevated-rgb), 0.68);

        --success: var(--palette-success);
        --error: var(--palette-error);
        --note-ok: var(--palette-success);
        --note-error: var(--palette-error-soft);
        --palette-primary-rgb: 134 249 201;
        --palette-secondary-rgb: 90 123 246;
        --palette-tertiary-rgb: 150 94 243;
        --palette-background-rgb: 9 10 13;
        --palette-surface-rgb: 17 19 24;
        --palette-surface-container-rgb: 24 27 34;
        --palette-surface-muted-rgb: 29 33 41;
        --palette-surface-container-highest-rgb: 63 71 90;

        --shadow: 0 12px 34px -16px rgba(var(--palette-dark-surface-deep-rgb), 0.75);

        --scene-deep: var(--palette-background);
        --scene-shallow: var(--palette-surface);
        --scene-glint: var(--palette-surface-muted);
        --scene-depth-scale: 1.05;

        --radius-card: clamp(1.05rem, 2vw, 1.35rem);
        --surface-panel: linear-gradient(180deg, var(--palette-surface) 0%, var(--palette-surface-container) 100%);
        --panel-border: rgba(var(--palette-warm-white-rgb), 0.12);
        --panel-border-strong: rgba(var(--palette-warm-white-rgb), 0.25);
        --panel-shadow: 0 24px 50px -32px rgba(var(--palette-dark-surface-deep-rgb), 0.8);
        --panel-glow: inset 0 0 0 1px rgba(var(--palette-warm-white-rgb), 0.16);
        --panel-sheen: linear-gradient(
            125deg,
            rgba(var(--palette-warm-white-rgb), 0.06),
            transparent 36%
          );
        --subtle-rule: rgba(var(--palette-warm-white-rgb), 0.12);
        --panel-headline: rgba(var(--palette-sage-mist-rgb), 0.95);
        --panel-card: linear-gradient(150deg, rgba(var(--palette-surface-rgb), 0.95) 0%, rgba(var(--palette-surface-container-rgb), 0.92) 60%, rgba(var(--palette-surface-muted-rgb), 0.9) 100%);

        --grad-a: var(--card-1);
        --grad-b: var(--card-2);

        --scrim-core: rgba(var(--palette-dark-surface-rgb), 0.72);
        --scrim-edge: rgba(var(--palette-dark-surface-rgb), 0.34);
      }

      * {
        box-sizing: border-box;
      }

      /* Android and iOS paint a grey flash over the whole tapped element.
         On a full-bleed canvas that reads as the entire page blinking. */
      a,
      button,
      canvas {
        -webkit-tap-highlight-color: transparent;
      }

      html {
        -webkit-text-size-adjust: 100%;
      }

      body {
        margin: 0;
        min-height: 100svh;
        font: 16px/1.54 var(--font-body);
        color: var(--ink);
        background: var(--palette-background);
        overflow-x: hidden;
      }

      /* ---------- the water, behind everything ---------- */

      #deck {
        position: fixed;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }

      /* Readability is not negotiable over a moving shader, and contrast
         against animation can't be measured. So the scrim is dense enough
         under the column that the effective background is ~= --surface and
         the verified text ratios still hold, and thin at the edges where
         there is nothing to read — the water stays clearly visible there. */
      .scrim {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(
          ellipse 46rem 34rem at 50% 48%,
          var(--scrim-core) 0%,
          var(--scrim-core) 38%,
          var(--scrim-edge) 100%
        );
      }

      body.no-water .scrim {
        background: none;
      }

      body.no-water #deck {
        display: none;
      }

      .sr-only,
      .honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      /* ---------- shell ---------- */

      .app {
        position: relative;
        z-index: 2;
        min-height: 100svh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: clamp(0.9rem, 2.4vh, 1.6rem);
        padding: clamp(1rem, 2.4vh, 1.5rem) clamp(1.15rem, 4vw, 3rem)
          clamp(1.1rem, 2.4vh, 1.6rem);
      }

      /* One shared measure, so the header, both columns and the footer all
         hang off the same two edges. */
      .bar,
      main,
      .app > footer {
        width: min(68rem, 100%);
        margin: 0 auto;
      }

      .bar {
        color: var(--panel-headline);
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
      }

      .bar img {
        width: 30px;
        height: 30px;
      }

      .theme {
        margin-left: auto;
        padding: 0.3rem 0.75rem;
        font: inherit;
        font-size: 0.73rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--charcoal);
        background: var(--surface-glass);
        border: 1px solid var(--divider);
        border-radius: 999px;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      }

      .theme:hover {
        color: var(--ink);
        transform: translateY(-1px);
        border-color: var(--panel-border-strong);
      }

      main {
        align-self: center;
        min-height: 0;
        display: grid;
        gap: clamp(1.6rem, 4vh, 2.6rem);
      }

      /* Both columns are grids on one shared step, so their rows land on the
         same rhythm instead of each block carrying its own ad-hoc margin. */
      .pitch,
      .signup,
      .signup-box {
        display: grid;
        position: relative;
        gap: var(--rhythm);
        align-content: start;
        /* Grid items default to a content-based automatic minimum size.
           Without this, the widest thing in .signup (the email row, the
           4-up signal readout) can force the column .pitch and .signup
           share to grow past the viewport — dragging the headline off the
           edge of the screen with it on narrow phones. */
        min-width: 0;
      }

      .pitch > *,
      .signup > *,
      .signup-box > * {
        margin: 0;
      }

      /* The headline is the one place that wants more than the shared step.
         Beats specificity of the reset above, so it survives. */
      .pitch h1 {
        margin-bottom: clamp(0.4rem, 1.6vh, 1.1rem);
      }

      .kicker {
        justify-self: start;
      }

      .kicker,
      .meter-label,
      .meter-state,
      .meter-top span {
        letter-spacing: 0.045em;
      }

      /* Desktop mode splits content into two clear sections while preserving
         horizontal centering and generous rhythm. */
      @media (min-width: 62rem) {
        main {
          grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.78fr);
          gap: clamp(2.2rem, 4.6vw, 5.2rem);
          align-items: stretch;
          grid-template-rows: 1fr;
          align-content: stretch;
        }

        .signup {
          padding-block: clamp(0.85rem, 2.2vh, 1.35rem);
          align-content: center;
          align-self: center;
        }

        .pitch {
          align-self: center;
          align-content: center;
        }

        .signup-hint {
          align-self: center;
          text-align: left;
          margin: 0;
        }

        .signup-box {
          padding-right: 1.1rem;
        }

        main > .pitch,
        main > .signup {
          min-height: clamp(380px, 54vh, 580px);
        }
      }

      main > .pitch,
      main > .signup {
        position: relative;
        --card-tilt-x: 0deg;
        --card-tilt-y: 0deg;
        --card-tilt-z: 0deg;
        padding: clamp(1.15rem, 2.5vw, 1.9rem);
        border-radius: var(--radius-card);
        background: var(--surface-panel);
        border: 1px solid var(--panel-border);
        box-shadow: var(--panel-shadow), inset 0 0 0 1px var(--subtle-rule);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        isolation: isolate;
        display: grid;
        align-content: stretch;
      }

      .tilt-card {
        transform: perspective(760px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x))
          rotateZ(var(--card-tilt-z));
        transform-style: preserve-3d;
        will-change: transform;
        transition: transform 0.14s ease;
      }

      main > .pitch {
        overflow: hidden;
      }

      main > .pitch::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: var(--panel-sheen),
          radial-gradient(circle at 14% 16%, rgba(var(--palette-warm-white-rgb), 0.2), transparent 48%);
        opacity: 0.6;
      }

      main > .pitch::before {
        content: "";
        position: absolute;
        left: 1.2rem;
        right: 1.2rem;
        top: 0.95rem;
        height: 1px;
        background: linear-gradient(
          to right,
          transparent,
          var(--subtle-rule),
          transparent
        );
        opacity: 0.7;
      }

      main > .signup::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: inherit;
        pointer-events: none;
        border: 1px solid var(--subtle-rule);
      }

      main > .signup::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: var(--panel-glow);
      }

      .signup-box {
        padding: clamp(0.88rem, 1.8vh, 1.4rem);
        border-radius: var(--radius-card);
      }

      /* ---------- pitch ---------- */

      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.28rem 0.7rem;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--panel-border);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.065em;
        text-transform: uppercase;
        color: var(--charcoal);
      }

      .kicker i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--success);
        animation: blink 2.4s ease-in-out infinite;
      }

      @keyframes blink {
        50% {
          opacity: 0.35;
        }
      }

      h1 {
        margin: 0;
        font-size: clamp(2rem, 3vh + 1.7vw, 3.3rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        font-family: var(--font-display);
        font-weight: 780;
        text-wrap: balance;
      }

      h1 em {
        font-style: normal;
        color: var(--accent-text);
        font-weight: 780;
      }

      @supports (background-clip: text) or (-webkit-background-clip: text) {
        h1 em {
          background-image: none;
          color: var(--accent-text);
        }
      }

      .props {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: clamp(0.6rem, 1.7vh, 1.05rem);
        font-size: clamp(0.9rem, 0.6vh + 0.5vw, 1.02rem);
        color: var(--charcoal);
      }

      .props li {
        display: flex;
        gap: 0.6rem;
        align-items: baseline;
      }

      .props li::before {
        content: "";
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-radius: 50%;
        transform: translateY(-1px);
        background: var(--card-1);
      }

      .props li:nth-child(2)::before {
        background: var(--card-2);
      }

      .props li:nth-child(3)::before {
        background: var(--card-3);
      }

      .props b {
        color: var(--ink);
        font-weight: 650;
      }

      .tail {
        font-style: normal;
      }

      /* Narrow screens get the claim without the elaboration. */
      @media (max-width: 47.99rem) {
        .tail {
          display: none;
        }

        .signup {
          position: relative;
          padding-bottom: clamp(9rem, 24vh, 11.5rem);
          row-gap: clamp(0.6rem, 2vh, 1rem);
        }

        .signup > .meter,
        .meter {
          position: sticky;
          bottom: 0.9rem;
          z-index: 2;
          width: calc(100% - 1.1rem);
          max-width: min(100% - 1.1rem, 36rem);
          margin-left: auto;
          margin-right: auto;
          margin-top: 0.35rem;
          border-radius: 16px;
          box-shadow: var(--panel-shadow), 0 2px 16px -12px rgba(var(--palette-ink-rgb), 0.55);
          background: color-mix(
            in srgb,
            var(--surface-card) 75%,
            var(--surface-glass)
          );
          backdrop-filter: blur(18px) saturate(1.2);
          -webkit-backdrop-filter: blur(18px) saturate(1.2);
        }

        .meter:hover {
          transform: none;
          border-color: var(--panel-border);
        }

        .sigs {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0.35rem 0.9rem;
        }

        .meter-say {
          min-height: 1.08em;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      /* ---------- signup ---------- */

      .honest {
        margin: 0.7rem 0 0;
        font-size: 0.85rem;
        color: var(--charcoal);
      }

      .honest b {
        color: var(--ink);
        font-weight: 700;
      }

      /* Grid, not flex: a fixed flex-basis on the input plus the button's
         content width would overflow rather than wrap on narrow phones
         (flex-wrap checks the *hypothetical*, pre-shrink size). Grid's
         minmax(0, 1fr) always yields to the button's auto column instead. */
      .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
      }

      /* Below this, an email input squeezed next to a full-width button
         reads as cramped rather than compact, so the two stack instead. */
      @media (max-width: 26rem) {
        .row {
          grid-template-columns: 1fr;
        }
      }

      .input {
        min-width: 0;
        padding: 0.78rem 1.05rem;
        font: inherit;
        color: var(--ink);
        background: var(--surface-card);
        border: 1px solid var(--divider);
        border-radius: 999px;
      }

      .input::placeholder {
        color: var(--charcoal);
        opacity: 0.85;
      }

      .input:focus-visible,
      .btn:focus-visible,
      .theme:focus-visible,
      .tiltBtn:focus-visible {
        outline: 3px solid var(--accent-text);
        outline-offset: 2px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.78rem 1.4rem;
        font: inherit;
        font-weight: 700;
        color: var(--palette-on-primary);
        background: var(--palette-primary);
        border: 0;
        border-radius: var(--radius-chip);
        cursor: pointer;
        transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
        box-shadow: 0 8px 16px -10px rgba(var(--palette-primary-rgb), 0.45);
      }

      .btn::after {
        content: "→";
        transition: transform 0.2s ease;
      }

      .btn:hover:not(:disabled)::after {
        transform: translateX(3px);
      }

      .btn:disabled::after {
        content: none;
      }

      .btn:hover:not(:disabled) {
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -14px rgba(var(--palette-primary-rgb), 0.58);
      }

      .btn:active:not(:disabled) {
        transform: scale(0.97);
      }

      .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .note {
        margin: 0.4rem 0 0;
        font-size: 0.8rem;
        color: var(--charcoal);
        min-height: 1.4em;
      }

      .note b {
        color: var(--accent-text);
        font-variant-numeric: tabular-nums;
      }

      .note.ok {
        color: var(--note-ok);
        font-weight: 700;
      }

      .note.error {
        color: var(--note-error);
        font-weight: 700;
      }

      .tiers {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 1.1rem;
        font-size: 0.78rem;
        color: var(--charcoal);
      }

      .tiers li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
      }

      .tiers li::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--card-1);
      }

      .tiers li:nth-child(2)::before {
        background: var(--card-2);
      }

      .tiers li:nth-child(3)::before {
        background: var(--card-3);
      }

      .tiers b {
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }

      /* ---------- live surface readout ---------- */

      .meter {
        margin: 0;
        padding: 0.75rem 0.95rem 0.85rem;
        border-radius: 14px;
        background: var(--surface-glass);
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        border: 1px solid var(--divider);
      }

      .tier-note {
        margin: 0;
        font-size: 0.76rem;
        color: var(--charcoal);
      }

      .signup-hint {
        position: relative;
        color: var(--charcoal);
        padding-left: 1.1rem;
      }

      .signup-hint::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.32rem;
        height: calc(100% - 0.32rem);
        width: 1px;
        background: linear-gradient(
          to bottom,
          transparent,
          var(--accent-text) 18%,
          var(--accent-text) 82%,
          transparent
        );
      }

      .signup-hint b {
        color: var(--ink);
      }

      .signup-hint .tail {
        display: inline;
      }

      .meter-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .meter-label {
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--charcoal);
      }

      .meter-state {
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--accent-text);
      }

      .calm {
        margin: 0.45rem 0 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }

      .calm-track {
        flex: 1;
        height: 6px;
        border-radius: 4px;
        background: var(--divider);
        overflow: hidden;
      }

      .calm-track i {
        display: block;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--card-2), var(--card-1));
        transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
      }

      .calm b {
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--accent-text);
        font-variant-numeric: tabular-nums;
        min-width: 2.9em;
        text-align: right;
      }

      .sigs {
        margin: 0.55rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        /* minmax(0, 1fr), not 1fr: same automatic-minimum-size trap as
           .pitch/.signup above, one level deeper. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.3rem 0.7rem;
      }

      .sigs span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sigs li {
        display: grid;
        gap: 0.22rem;
      }

      .sigs span {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--charcoal);
      }

      .sigs div {
        height: 4px;
        border-radius: 2px;
        background: var(--divider);
        overflow: hidden;
      }

      .sigs i {
        display: block;
        height: 100%;
        width: calc(var(--v, 0) * 1%);
        border-radius: inherit;
        background: var(--accent-text);
        transition: width 0.3s ease;
      }

      .sigs li:nth-child(2) i {
        background: var(--coral);
      }

      .sigs li:nth-child(3) i {
        background: var(--orange);
      }

      .sigs li:nth-child(4) i {
        background: var(--card-2);
      }

      .meter-say {
        margin: 0.55rem 0 0;
        font-size: 0.76rem;
        color: var(--charcoal);
        min-height: 1.35em;
      }

      .meter-say b {
        color: var(--ink);
        font-weight: 650;
      }

      .app > footer {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.35rem 1.4rem;
        padding-top: clamp(0.7rem, 1.6vh, 1.05rem);
        /* Hairline rather than a full divider — it closes the page without
           drawing a hard line across the water. */
        border-top: 1px solid var(--divider);
        font-size: 0.73rem;
        color: var(--charcoal);
      }

      footer p {
        margin: 0;
      }

      .foot-left {
        display: flex;
        align-items: baseline;
        gap: 0.55rem;
      }

      .foot-mark {
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ink);
      }

      .foot-sep {
        opacity: 0.4;
      }

      /* Sits right of the rule on wide screens, tucks under on narrow ones. */
      #visits {
        margin-left: auto;
      }

      #visits:empty {
        display: none;
      }

      footer b {
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }

      .tiltBtn {
        position: fixed;
        left: 50%;
        bottom: 0.9rem;
        z-index: 3;
        transform: translateX(-50%);
        display: none;
        padding: 0.5rem 1rem;
        font: inherit;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--ink);
        background: var(--surface-card);
        border: 1px solid var(--divider);
        border-radius: 999px;
        box-shadow: var(--shadow);
        cursor: pointer;
        white-space: nowrap;
      }

      .tiltBtn.show {
        display: block;
      }

      .tiltBtn::before {
        content: "◧ ";
        opacity: 0.6;
      }

      /* Desktop: one screen, no scroll. */
      @media (min-width: 48rem) and (min-height: 40rem) {
        body {
          overflow: hidden;
        }

        .app {
          height: 100svh;
        }
      }

      /* ---------- motion ---------- */
      /* One entrance keyframe, staggered by an inline --d per element, so the
         page assembles itself rather than appearing all at once. `both` holds
         the start frame during the delay — without it everything flashes at
         full opacity for a frame before its turn. */

      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
      }

      .reveal {
        animation: rise 0.75s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
        animation-delay: var(--d, 0ms);
      }

      .reveal-delay-60 {
        --d: 60ms;
      }

      .reveal-delay-140 {
        --d: 140ms;
      }

      .reveal-delay-340 {
        --d: 340ms;
      }

      .reveal-delay-460 {
        --d: 460ms;
      }

      .reveal-delay-500 {
        --d: 500ms;
      }

      .reveal-delay-580 {
        --d: 580ms;
      }

      .reveal-delay-680 {
        --d: 680ms;
      }

      .props li {
        animation: rise 0.7s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
      }

      .props li:nth-child(1) {
        animation-delay: 220ms;
      }
      .props li:nth-child(2) {
        animation-delay: 280ms;
      }
      .props li:nth-child(3) {
        animation-delay: 340ms;
      }

      .sigs li {
        animation: rise 0.6s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
      }
      .sigs li:nth-child(1) {
        animation-delay: 640ms;
      }
      .sigs li:nth-child(2) {
        animation-delay: 690ms;
      }
      .sigs li:nth-child(3) {
        animation-delay: 740ms;
      }
      .sigs li:nth-child(4) {
        animation-delay: 790ms;
      }

      /* Hover states. Everything moves a little; nothing moves a lot. */
      .props li,
      .tiers li {
        transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1),
          color 0.25s ease;
      }

      .props li:hover,
      .tiers li:hover {
        transform: translateX(4px);
        color: var(--ink);
      }

      .props li::before,
      .tiers li::before,
      .kicker i {
        transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
      }

      .props li:hover::before,
      .tiers li:hover::before {
        transform: scale(1.5);
      }

      .meter {
        transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1),
          border-color 0.3s ease;
      }

      .meter:hover {
        transform: translateY(-2px);
        border-color: var(--accent-text);
      }

      .input {
        transition: border-color 0.25s ease, background 0.25s ease;
      }

      .input:hover,
      .input:focus {
        border-color: var(--accent-text);
      }

      .kicker {
        transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
      }

      .kicker:hover {
        transform: translateY(-1px);
      }

      .bar img {
        transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.5, 1);
      }

      .bar:hover img {
        transform: rotate(-8deg) scale(1.08);
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          transition: none !important;
          animation: none !important;
        }

        /* Belt and braces: if animations are suppressed mid-delay, make
           sure nothing is left holding the hidden start frame. */
        .reveal,
        .props li,
        .sigs li {
          opacity: 1;
          transform: none;
        }
      }