/* ===========================================================================
   Polson homepage — "the page resolves".

   The concept: the site opens AS a feed (noisy, blurred, drifting, endless)
   and clarifies as you scroll. Type sharpens, the noise decelerates and dies,
   the palette lifts out of murk. Scrolling is normally the mindless act; here
   you scroll your way into focus. Every effect below serves that arc — if it
   does not, it is not here.
   =========================================================================== */

:root{
  --measure:  680px;   /* shared text column for the narrative sections */
  --ink:      #eef3fb;
  --dim:      #93a3bb;
  --faint:    #66748c;
  --murk:     #070a11;   /* act 1: the noise */
  --clear:    #0b1220;   /* act 3+: resolved */
  --line:     rgba(255,255,255,.10);
  --teal:     #3fd4b6;
  --blue:     #4b8fe0;
  --hot:      #ff7a8a;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.home{background:var(--murk);color:var(--ink);font-family:var(--sans);
  transition:background 1.2s ease}
.home .wrap{max-width:1180px;margin:0 auto;padding:0 26px}

.dsp{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:.94}
.eyebrow-x{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);font-weight:600}

/* --- kinetic type --------------------------------------------------------- */
[data-split] .w{display:inline-block;white-space:nowrap}
/* Each character is masked so it can rise into place. The mask is overflow:
   hidden, and with the display face set at line-height .94 the box is SHORTER
   than the glyph — so descenders (g, y, p, j) were being sliced off. Pad the
   mask downward to clear them and pull the same amount back off the margin so
   the line box is unchanged. The character then has to travel past that extra
   padding to start off-screen, hence 100% + the padding rather than 105%. */
[data-split] .c{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.26em;margin-bottom:-.26em}
[data-split] .c > i{display:inline-block;font-style:inherit;
  transform:translateY(calc(100% + .3em));
  transition:transform .85s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--ci,0) * 26ms)}
[data-split].is-in .c > i,
.no-js [data-split] .c > i{transform:none}
@media (prefers-reduced-motion: reduce){ [data-split] .c > i{transform:none !important;transition:none !important} }

/* ===== ACT 1 — the noise =================================================== */
.act-noise{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;isolation:isolate}
.noisefield{position:absolute;inset:-8%;z-index:0;pointer-events:none}
.nf{position:absolute;width:clamp(150px,17vw,235px);border:1px solid var(--line);border-radius:14px;
  padding:13px;background:rgba(255,255,255,.035);filter:blur(2.4px);opacity:.42;
  animation:drift linear infinite}
.nf .r{height:7px;border-radius:4px;background:rgba(255,255,255,.20);margin-top:7px}
.nf .r:first-child{margin-top:0}
.nf .r.s{width:42%}.nf .r.m{width:72%}.nf .r.l{width:94%}
.nf .av{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);margin-bottom:9px}
@keyframes drift{
  from{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  to  {transform:translate3d(0,-152vh,0) rotate(var(--rot,0deg))}
}
/* The noise loses energy as the reader descends. */
.act-noise[data-fade="1"] .noisefield{opacity:0;transition:opacity 1.4s ease}
@media (prefers-reduced-motion: reduce){ .nf{animation:none} }

.spot{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38% 34% at var(--mx,50%) var(--my,35%),rgba(63,212,182,.18),transparent 70%),
             radial-gradient(52% 46% at 50% 42%,rgba(75,143,224,.16),transparent 72%)}

.act-noise .inner{position:relative;z-index:2;padding:0 26px;max-width:1000px}
.act-noise h1{font-size:clamp(58px,13vw,168px);margin:0}
.act-noise h1.em{color:transparent;background:linear-gradient(100deg,var(--teal),var(--blue));
  -webkit-background-clip:text;background-clip:text}
.act-noise h1.em .c > i{color:inherit}
.act-noise .sub{margin:30px auto 0;max-width:540px;color:var(--dim);font-size:clamp(15.5px,2vw,18px)}
.cue-x{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--dim);
  background:rgba(7,10,17,.55);backdrop-filter:blur(6px)}
.cue-x b{color:var(--ink)}

.hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;color:var(--faint);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:8px}
.hint i{width:1px;height:38px;background:linear-gradient(var(--teal),transparent);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.2;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .hint i{animation:none} }

/* ===== ACT 2 — the cost (sticky, scroll-scrubbed) ========================== */
.act-cost{position:relative;height:280vh;background:var(--murk)}
.act-cost .pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden}
.bignum{font-family:var(--display);font-size:clamp(90px,26vw,320px);line-height:.86;
  color:transparent;background:linear-gradient(180deg,var(--hot),#b0405a);
  -webkit-background-clip:text;background-clip:text;
  transform:scale(calc(.86 + var(--s,0) * .14))}
.bignum-l{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.cost-copy{margin-top:26px;max-width:560px;color:var(--dim);font-size:clamp(16px,2.1vw,19px);padding:0 26px}
.cost-copy b{color:var(--ink)}
/* A bar that fills as the number climbs. */
.costbar{width:min(560px,84vw);height:2px;background:var(--line);margin-top:30px;overflow:hidden}
.costbar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),#b0405a);
  transform:scaleX(var(--s,0));transform-origin:0 50%}

/* ===== ACT 3 — the turn ==================================================== */
.act-turn{position:relative;background:linear-gradient(180deg,var(--murk),var(--clear));
  padding:clamp(90px,16vh,170px) 0;text-align:center;overflow:hidden}
.act-turn h2{font-size:clamp(32px,5.4vw,64px);max-width:var(--measure);margin:18px auto 0}
.act-turn p{max-width:var(--measure);margin:26px auto 0;color:var(--dim);font-size:clamp(15.5px,2vw,18px)}
.rule{width:1px;height:clamp(60px,10vh,110px);margin:0 auto;
  background:linear-gradient(transparent,var(--teal),transparent)}

/* ===== ACT 4 — proof ======================================================= */
.act-proof{background:var(--clear);padding:clamp(70px,12vh,130px) 0}
.act-proof .head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-proof h2{font-size:clamp(30px,5.2vw,60px);margin-top:16px}
.act-proof .head p{color:var(--dim);margin-top:18px;font-size:16.5px}

/* ===== ACT 5 — the games, as a horizontal run ============================== */
.act-games{position:relative;height:420vh;background:var(--clear)}
.act-games .pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden}
.games-head{padding:0 26px;max-width:1180px;margin:0 auto 30px;width:100%;text-align:center}
.games-head h2{font-size:clamp(30px,5vw,58px);margin-top:14px}
.run{display:flex;gap:20px;padding:0 26px;will-change:transform;
  transform:translate3d(calc(var(--s,0) * -1 * (var(--run-w,2200px) - 88vw)),0,0)}
.gcard{flex:0 0 clamp(250px,30vw,330px);border:1px solid var(--line);border-radius:20px;padding:26px;text-align:left;
  background:linear-gradient(165deg,rgba(63,212,182,.07),rgba(255,255,255,.028));min-height:290px;
  display:flex;flex-direction:column}
.gcard .n{font-family:var(--display);font-size:34px;color:var(--teal);opacity:.5;line-height:1}
.gcard h3{font-family:var(--display);font-size:29px;margin-top:14px}
.gcard .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:9px}
.gcard p{color:var(--dim);font-size:14.5px;margin-top:14px}
.runbar{max-width:1180px;margin:28px auto 0;padding:0 26px;width:100%}
.runbar i{display:block;height:2px;background:var(--teal);transform:scaleX(var(--s,0));transform-origin:0 50%}

/* ===== ACT 6 — stillness =================================================== */
.act-still{background:var(--clear);padding:clamp(90px,16vh,180px) 0;text-align:center}
.act-still h2{font-size:clamp(34px,6.5vw,80px);max-width:16ch;margin:16px auto 0}
.act-still p{max-width:520px;margin:24px auto 0;color:var(--dim);font-size:16.5px}
.pill-x{display:inline-flex;align-items:center;gap:9px;margin-top:34px;padding:12px 22px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim);font-size:14.5px;font-weight:600}
.pill-x .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 11px var(--teal)}

@media(max-width:760px){
  .act-cost{height:220vh}
  .act-games{height:360vh}
}

/* --- The design ethic. Facts about decisions, so it is styled plainly. ----- */
.act-rules{background:linear-gradient(180deg,var(--clear),#0c1424);padding:clamp(70px,12vh,130px) 0;text-align:center}
.act-rules h2{font-size:clamp(30px,5vw,58px);max-width:var(--measure);margin:14px auto 0}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:860px){.rules{grid-template-columns:1fr;gap:18px}}
.rule-c{border-top:1px solid var(--line);padding-top:22px;text-align:left}
.rule-c .rn{font-family:var(--display);font-size:56px;line-height:1;color:var(--teal)}
.rule-c h3{font-size:17px;font-weight:600;margin-top:12px}
.rule-c p{color:var(--dim);font-size:14.5px;margin-top:10px}
.sig{margin-top:22px !important;color:var(--faint);font-size:14px;font-style:italic}

/* --- The story. Set narrow and left-aligned so it reads as writing, not ad
       copy — the whole point is that a person is talking. -------------------- */
.story{max-width:var(--measure);margin:30px auto 0;text-align:center}
.story p{margin-top:18px;color:var(--dim);font-size:clamp(15.5px,2vw,17.5px);line-height:1.68}
.story p b{color:var(--ink);font-weight:500}
.games-sub{color:var(--dim);font-size:15.5px;margin:14px auto 0;max-width:var(--measure)}

/* The cost act states its assumption in plain sentences, with the figures
   climbing inside them, so the reader watches their own arithmetic happen. */
.cost-line{color:var(--dim);font-size:clamp(15px,2vw,18px);margin-top:6px}
.cost-line b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.bignum span{font-variant-numeric:tabular-nums}

/* This act is left-aligned, unlike the centred one the .story class was built
   for, so the prose has to drop the auto margins or it sits indented from its
   own heading. The closing note also needs air above it, under the cards. */
.act-rules .story{margin:22px auto 0}
.act-rules .story.closing{margin-top:44px}

/* --- The anagram headline ------------------------------------------------- */
/* These are the app's own wordmark letters, not type. Each slice was cut at the
   same vertical crop so they share a baseline; --ar carries each letter's true
   aspect ratio so widths stay honest at every size. */
.anagram{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;
  --lh:clamp(42px,10vw,124px);margin:0;
  /* Each letter was cropped flush, which threw away the spacing built into the
     wordmark. Measured across the original, the gaps average .231 of letter
     height — so putting it back is restoring the real kerning, not loosening it. */
  gap:calc(var(--lh) * .23)}
.anagram .ltr img{display:block;height:var(--lh);width:calc(var(--lh) * var(--ar,1));
  transform:rotate(var(--spin,0deg))}
.anagram .ltr{display:inline-block;will-change:transform}
.anagram .sp{display:inline-block;width:calc(var(--lh) * .5)}
/* No transition on the letters: position is driven frame by frame from the
   scroll offset, so a transition would fight the scrub and lag behind it. */

/* --- Don't scroll / Think ------------------------------------------------- */
/* The positive leads and carries the weight; the thing it displaces trails
   behind it, quieter. Two columns meeting at the dash keeps the pairs aligned
   however long each half is. */
/* --- The three propositions -----------------------------------------------
   Cards rather than lines, because each is a separate claim and as a block
   they were read as one. They arrive one at a time under the scroll, after the
   name has landed, so each gets a beat of its own. */
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px auto 0;
  max-width:860px;text-align:left}
@media(max-width:760px){ .props{grid-template-columns:1fr;gap:10px;max-width:420px} }
.prop{border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.prop.in{opacity:1;transform:none}
.prop b{display:block;font-weight:700;letter-spacing:-.025em;color:var(--ink);
  font-size:clamp(19px,2.4vw,25px);line-height:1.15}
.prop span{display:block;margin-top:8px;color:var(--faint);font-size:14px}
.prop span:before{content:"— "}
@media (prefers-reduced-motion: reduce){
  .prop{opacity:1 !important;transform:none !important;transition:none !important}
}

/* --- Hero pinning ---------------------------------------------------------
   The anagram is driven by scroll, so the headline has to stay on screen for
   the whole of that scroll — otherwise it resolves somewhere below the fold
   and nobody sees the letters land. The scene is tall; the screen inside it
   sticks. Height is the animation's runway, not empty space. */
.hero-scene{position:relative;height:280vh}
.hero-scene > .act-noise{position:sticky;top:0;height:100svh;min-height:0}
/* The cue to scroll has done its job once you have. */
.hint{transition:opacity .5s ease}
.hint[data-done="1"]{opacity:0}
@media(max-width:760px){ .hero-scene{height:240vh} }

/* ===== Pricing — the actual pitch =========================================
   Three tiers, read left to right as the commitment grows: free forever, one
   payment, then optional top-ups. The middle one is the offer, so it carries
   the accent. No comparison to anyone else's pricing — the numbers do it. */
.act-price{background:var(--clear);padding:clamp(80px,14vh,150px) 0;text-align:center}
.act-price h2{font-size:clamp(30px,5.2vw,60px);max-width:var(--measure);margin:14px auto 0}
.act-price .lead{max-width:var(--measure);margin:20px auto 0;color:var(--dim);font-size:17px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:52px auto 0;
  max-width:1000px;text-align:left}
@media(max-width:860px){ .tiers{grid-template-columns:1fr;max-width:460px} }
.tier{border:1px solid var(--line);border-radius:20px;padding:28px 26px;
  background:rgba(255,255,255,.028);display:flex;flex-direction:column;text-align:left}
.tier.feature{border-color:rgba(63,212,182,.45);background:linear-gradient(165deg,rgba(63,212,182,.10),rgba(255,255,255,.03))}
.tier .amt{font-size:clamp(34px,4.6vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1}
.tier.feature .amt{color:var(--teal)}
.tier .per{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:9px}
.tier h3{font-size:17px;font-weight:600;margin-top:18px}
.tier p{color:var(--dim);font-size:14.5px;margin-top:9px}
.tier ul{list-style:none;margin-top:14px;padding:0}
.tier li{color:var(--dim);font-size:14px;margin-top:8px;padding-left:18px;position:relative}
.tier li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--faint)}
.tier.feature li:before{background:var(--teal)}
.price-foot{margin-top:34px;color:var(--faint);font-size:14.5px;max-width:640px;
  margin-left:auto;margin-right:auto}
.price-foot b{color:var(--text)}
.price-note{margin:14px auto 0;max-width:560px;color:var(--faint);font-size:13px}
.games-sub b{color:var(--ink);font-weight:600}
/* The premium activities are a different kind of thing from the engines, so
   the card says so rather than pretending to be an eighth engine. */
.gcard.alt{background:linear-gradient(165deg,rgba(63,212,182,.12),rgba(255,255,255,.03));
  border-color:rgba(63,212,182,.4)}
.gcard.alt .n{color:var(--teal);opacity:.85}

/* --- The pitch, sized like a pitch ----------------------------------------
   These were 13px chips, which is no way to state the three facts that
   actually sell the app. Numbers at display size, label underneath, and the
   price carries the accent because it is the one that closes. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:44px auto 0;
  max-width:840px;align-items:end}
.stats .stat{text-align:center;padding:0 8px;position:relative}
.stats .stat + .stat:before{content:"";position:absolute;left:0;top:14%;bottom:14%;
  width:1px;background:var(--line)}
.stats b{display:block;font-size:clamp(42px,8vw,84px);font-weight:800;letter-spacing:-.045em;
  line-height:.92;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.stats span{display:block;margin-top:12px;color:var(--text);font-size:clamp(12.5px,1.6vw,15px);
  font-weight:500;line-height:1.3}
@media(max-width:560px){
  .stats{gap:4px}
  .stats .stat{padding:0 4px}
  .stats span{font-size:11.5px}
}

/* ===== The offer — its own section, not a footnote =========================
   Four figures that count up as they arrive, the tiers beneath them, and a
   slot for real product shots. Screenshot slots hold their aspect ratio while
   empty so nothing jumps when the images land. */
.act-offer{position:relative;background:linear-gradient(180deg,var(--clear),#0e1626);
  padding:clamp(80px,14vh,150px) 0;overflow:hidden}
.act-offer:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 0%,rgba(63,212,182,.10),transparent 70%)}
.act-offer .wrap{position:relative}
.offer-head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-offer h2{font-size:clamp(30px,5.2vw,60px);margin-top:14px;letter-spacing:-.04em;max-width:var(--measure);margin-left:auto;margin-right:auto}
.offer-head .lead{color:var(--dim);font-size:17.5px;margin-top:20px}

.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:56px auto 0;max-width:960px}
@media(max-width:820px){ .figures{grid-template-columns:repeat(2,1fr);gap:26px 10px} }
.fig{text-align:center;position:relative;padding:0 10px}
.fig + .fig:before{content:"";position:absolute;left:0;top:10%;bottom:22%;width:1px;background:var(--line)}
@media(max-width:820px){ .fig:nth-child(odd):before{display:none} }
.fig b{display:block;font-size:clamp(38px,6.5vw,72px);font-weight:800;letter-spacing:-.045em;
  line-height:.95;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:11px;color:var(--text);font-size:14.5px;font-weight:500}
.fig em{display:block;margin-top:5px;color:var(--faint);font-size:13px;font-style:normal}

/* Product shots. Empty slots keep their shape so the layout never jumps. */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:60px auto 0;max-width:900px}
@media(max-width:760px){ .shots{grid-template-columns:repeat(3,1fr);gap:10px} }
/* An iPhone, drawn in CSS rather than shipped as artwork — stays sharp at any
   size, costs nothing to download, and cannot go out of date with the hardware.
   The screenshots are 1179x2556 full-screen captures, so the Dynamic Island
   sits over the gap the capture already leaves in the status bar. */
.shot{aspect-ratio:9/19.5;position:relative;
  border-radius:clamp(24px,3.4vw,42px);
  padding:clamp(5px,.72vw,9px);
  background:linear-gradient(155deg,#4a4f57 0%,#23262c 18%,#101216 52%,#2c3037 88%,#0b0c0f 100%);
  box-shadow:0 34px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4),
             inset 0 0 0 1px rgba(255,255,255,.10)}
/* display:block matters: .screen is a <span>, and an inline box ignores both
   overflow:hidden and border-radius — which is exactly how square screenshot
   corners were showing through the rounded frame. */
.shot .screen{display:block;position:relative;width:100%;height:100%;overflow:hidden;
  background:#000;border-radius:clamp(19px,2.7vw,34px);
  /* Own stacking context, so the clip is honoured even under transforms. */
  isolation:isolate}
.shot img,.shot video{width:100%;height:100%;object-fit:cover;display:block;
  object-position:top center;
  /* Rounded in its own right, so the corners survive even if a browser fails to
     clip the container. */
  border-radius:inherit}
/* Drawn over the screenshot: defines the screen edge crisply and hides any
   sub-pixel bleed where the image meets the bezel. */
.shot .screen:after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none;z-index:3}
/* The physical cut-out, measured against the SCREEN rather than the body so the
   bezel padding does not offset it. Proportions from the 393x852pt display:
   the island is ~125x37pt, sitting ~11pt down. */
.shot .screen .island{position:absolute;left:50%;top:1.3%;transform:translateX(-50%);
  width:31.8%;height:4.3%;border-radius:999px;background:#000;z-index:2}
/* Side buttons, just enough to read as hardware at a glance. */
.shot:before,.shot:after{content:"";position:absolute;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3a3f47,#1a1d22);z-index:1}
.shot:before{left:-2px;top:22%;height:9%;box-shadow:0 6.5% 0 0 #2a2e34}
.shot:after{right:-2px;top:26%;height:13%}
@media(max-width:760px){ .shot:before,.shot:after{display:none} }

.shots-cap{text-align:center;color:var(--faint);font-size:13px;margin-top:18px}

/* ===== What it knows =======================================================
   The screenshots are the argument here: the app really does build a detailed
   picture of how someone thinks. Which makes the promise about that data the
   thing that has to be exactly right — see the copy, which says synced and
   backed up, not "never leaves your phone", because it does. */
.act-data{background:linear-gradient(180deg,#0e1626,var(--clear));padding:clamp(80px,14vh,150px) 0}
.act-data .head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-data h2{font-size:clamp(30px,5.2vw,60px);margin-top:14px;letter-spacing:-.04em;max-width:var(--measure);margin-left:auto;margin-right:auto}
.act-data .head .lead{color:var(--dim);font-size:17.5px;margin-top:20px}
.data-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:52px auto 0;max-width:900px}
@media(max-width:760px){ .data-shots{gap:10px} }
.data-shots figure{margin:0}
.data-shots .shot{margin:0}
.data-shots figcaption{margin-top:12px;color:var(--faint);font-size:12.5px;text-align:center;line-height:1.4}

.promise{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:60px auto 0;max-width:900px;
  border-top:1px solid var(--line)}
@media(max-width:760px){ .promise{grid-template-columns:1fr} }
.promise div{padding:22px 0;border-bottom:1px solid var(--line);text-align:left}
.promise div:nth-child(odd){padding-right:30px}
.promise div:nth-child(even){padding-left:30px;border-left:1px solid var(--line)}
@media(max-width:760px){ .promise div{padding:20px 0 !important;border-left:none !important} }
.promise h3{font-size:16.5px;font-weight:600}
.promise p{color:var(--dim);font-size:14.5px;margin-top:8px}
.data-note{max-width:700px;margin:34px auto 0;color:var(--faint);font-size:14px;text-align:center;
  font-style:italic}
.tier li b{color:var(--text);font-weight:600}

/* --- Hero call to action --------------------------------------------------
   Polson is not on the App Store yet, so there is nothing to download and
   pretending otherwise would waste the click. The honest above-the-fold action
   is simply the status: the app is coming, and there is nothing to click yet. */
.cta{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta .status{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
  font-size:14.5px;font-weight:600}
.cta .status .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 11px var(--teal)}

/* --- The callout ----------------------------------------------------------
   Four short sentences, escalating to the one that is structural rather than
   promised. Stated flatly and left alone: no boast about why, because the
   reader draws that conclusion better than we could write it. */
.callout{max-width:820px;margin:56px auto 0;padding:34px 32px;border-radius:22px;
  border:1px solid rgba(56,197,172,.28);
  background:linear-gradient(160deg,rgba(56,197,172,.10),rgba(255,255,255,.025))}
.callout p{font-size:clamp(19px,2.6vw,27px);font-weight:600;letter-spacing:-.02em;
  line-height:1.42;color:var(--text)}
.callout p b{color:var(--teal);font-weight:600}
.callout .sub{margin-top:14px;font-size:14.5px;font-weight:400;color:var(--muted);
  letter-spacing:0;line-height:1.6}