/* Review Right, v5: the quality pass. Phone first.
   Structure unchanged from v4 (Review Harvest's order). This pass is about
   material: every object has a surface, an edge that catches light, and a
   shadow sized to how far it floats. Flat things stay flat. Motion acts out
   what the words say, and nothing moves without a reason. */

/* ---------------------------------------------------------------- tokens */
:root {
  --sc-canvas: #0B0C0E; --sc-surface: #131417; --sc-ink: #F4F4F2; --sc-ink-soft: #B1B6BB;
  --sc-accent: #FFB224; --sc-accent-ink: #1A1204;
  --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 16px;
  --sc-gutter: clamp(1.25rem, 5vw, 4rem); --sc-maxw: 74rem;
  --sc-section: clamp(4.75rem, 11vw, 9rem);
  --s2: #1A1C20; --s3: #24272C; --mute: #979CA2;
  --paper: #F4F4F2; --paper-ink: #0B0C0E; --paper-soft: #4A4F55; --paper-rule: #DADBD7; --amber-deep: #8F5A00;
  --bar: 3.75rem;

  --t-h1: clamp(2.2rem, 1.45rem + 4vw, 4.6rem);
  --t-h2: clamp(1.95rem, 1.45rem + 2.2vw, 3.2rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --t-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  --t-small: 0.9375rem;

  /* material. Shadows are tinted to the ground and stacked: contact, key,
     ambient. Three heights, no more. */
  --sh: 228 22% 2%;
  --ring: inset 0 0 0 1px rgb(255 255 255 / 0.065);
  --lip: inset 0 1px 0 rgb(255 255 255 / 0.085);
  --e1: 0 1px 1px hsl(var(--sh) / 0.35), 0 2px 6px -2px hsl(var(--sh) / 0.4);
  --e2: 0 1px 1px hsl(var(--sh) / 0.3), 0 4px 10px -4px hsl(var(--sh) / 0.45), 0 18px 36px -14px hsl(var(--sh) / 0.6);
  --e3: 0 1px 1px hsl(var(--sh) / 0.3), 0 8px 16px -6px hsl(var(--sh) / 0.45), 0 30px 60px -20px hsl(var(--sh) / 0.7), 0 70px 120px -40px hsl(var(--sh) / 0.55);
  --surf: linear-gradient(180deg, #1c1e22 0%, #16171a 55%, #141518 100%);
  --glass: rgb(26 28 32 / 0.72);

  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.54, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + var(--sc-3)); }
body { font-size: 1.0625rem; font-weight: 420; line-height: 1.6; letter-spacing: 0.006em; font-kerning: normal; }
@media (min-width: 900px) { body { font-size: 1.09rem; } }
[hidden] { display: none !important; }
p, h1, h2, h3, ol, ul, figure, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
svg { flex: none; }
.sc-grain { z-index: 90; opacity: 0.05; }
.skip { position: absolute; left: var(--sc-3); top: -4rem; z-index: 200; padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm); background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--sc-3); }
.wrap { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.narrow { max-width: 46rem; }

/* ------------------------------------------------------------------- type */
.h1, .h2 { font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -0.026em; }
.h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; }
.h3 { font-size: var(--t-h3); font-weight: 580; line-height: 1.22; letter-spacing: -0.01em; }
.lede { font-size: var(--t-lede); line-height: 1.52; color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-ink-soft)); max-width: 44ch; text-wrap: pretty; }
.h2 + .lede, .h1 + .lede { margin-top: var(--sc-5); }
.fine { font-size: 0.875rem; line-height: 1.55; color: var(--mute); }
.tag { display: inline-flex; align-items: center; margin-left: var(--sc-2); padding: 0.1rem 0.45rem; border-radius: 4px; background: rgb(255 178 36 / 0.12); color: var(--sc-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; vertical-align: 0.2em; }

/* the highlight: an amber block that wipes in behind the words */
.h1 mark { white-space: nowrap; color: var(--sc-accent-ink); padding: 0 0.14em 0.04em; margin: 0 -0.02em; border-radius: var(--sc-r-sm); background: linear-gradient(180deg, #FFC24A, #FFB224 60%, #F5A716) no-repeat 0 0 / 100% 100%; box-shadow: 0 12px 30px -14px rgb(255 178 36 / 0.55); }
.js .h1 mark { background-size: 0% 100%; color: var(--sc-ink); box-shadow: none; transition: background-size 900ms var(--out) 150ms, color 300ms var(--out) 520ms, box-shadow 600ms var(--out) 700ms; }
.js .is-ready .h1 mark { background-size: 100% 100%; color: var(--sc-accent-ink); box-shadow: 0 12px 30px -14px rgb(255 178 36 / 0.55); }

/* ---------------------------------------------------------------- buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-3); min-height: 3rem; padding: 0 var(--sc-5); border: 0; border-radius: var(--sc-r-sm); font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 160ms var(--out), box-shadow 220ms var(--out), background-color 160ms var(--out); }
.btn svg { width: 1rem; height: 1rem; transition: transform 240ms var(--out); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--primary { background: linear-gradient(180deg, #FFC44F 0%, #FFB224 55%, #F7A81A 100%); color: var(--sc-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(120 70 0 / 0.25), 0 1px 1px hsl(var(--sh) / 0.4), 0 8px 20px -8px rgb(255 178 36 / 0.55); }
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.45) 50%, transparent 65%); transform: translateX(-120%); }
.btn--ghost { background: linear-gradient(180deg, #202226, #191a1e); color: var(--sc-ink); box-shadow: var(--ring), var(--lip), var(--e1); }
.btn--lg { min-height: 3.5rem; padding: 0 var(--sc-6); font-size: 1.0625rem; }
.btn--sm { min-height: 2.5rem; padding: 0 var(--sc-4); font-size: 0.9375rem; }
.btn--wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(120 70 0 / 0.25), 0 2px 2px hsl(var(--sh) / 0.4), 0 14px 30px -10px rgb(255 178 36 / 0.65); }
  .btn--primary:hover::after { transform: translateX(120%); transition: transform 700ms var(--out); }
  .btn--primary:hover svg { transform: translateX(3px); }
  .btn--ghost:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), var(--lip), var(--e2); }
}
.link { border: 0; background: none; padding: var(--sc-2) 0; color: var(--sc-ink-soft); font: inherit; font-size: var(--t-small); cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; }

/* -------------------------------------------------------------------- bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar); transition: background-color 400ms var(--out), box-shadow 400ms var(--out); }
.bar.is-solid { background: rgb(11 12 14 / 0.78); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 30px -20px hsl(var(--sh) / 0.9); }
.bar__in { height: 100%; display: flex; align-items: center; gap: var(--sc-6); }
.brand { display: inline-flex; align-items: center; gap: var(--sc-3); color: var(--sc-ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand svg { width: 1.5rem; height: 1.5rem; }
.bar__nav { display: none; gap: var(--sc-6); margin-left: auto; }
.bar__nav a { position: relative; text-decoration: none; font-size: 0.9375rem; color: var(--sc-ink-soft); transition: color 160ms var(--out); }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 1px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--out); }
.bar__nav a:hover { color: var(--sc-ink); }
.bar__nav a:hover::after { transform: scaleX(1); }
.bar .btn { margin-left: auto; }
@media (min-width: 900px) { :root { --bar: 4.25rem; } .bar__nav { display: flex; } .bar .btn { margin-left: 0; } }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; padding: calc(var(--bar) + var(--sc-7)) 0 var(--sc-8); overflow: hidden; }
.hero__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40rem 30rem at 78% 42%, rgb(255 178 36 / 0.1), transparent 70%), radial-gradient(50rem 30rem at 10% -10%, rgb(255 255 255 / 0.035), transparent 70%); }
.hero__grid { position: relative; display: grid; gap: var(--sc-8); }
.hero__cta { display: grid; gap: var(--sc-3); margin-top: var(--sc-6); }
.rules { display: flex; gap: var(--sc-3); align-items: flex-start; margin-top: var(--sc-5); font-size: var(--t-small); color: var(--sc-ink-soft); text-wrap: pretty; }
.rules svg { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--sc-accent); }
.js [data-hero] .hero__copy > *:not(.h1), .js [data-hero] .vsl, .js [data-hero] .terms { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--out), transform 800ms var(--out); }
.js [data-hero].is-ready .hero__copy > * { opacity: 1; transform: none; }
.js [data-hero].is-ready .hero__lede { transition-delay: 160ms; }
.js [data-hero].is-ready .hero__cta { transition-delay: 260ms; }
.js [data-hero].is-ready .rules { transition-delay: 360ms; }
.js [data-hero].is-ready .vsl { opacity: 1; transform: none; transition-delay: 300ms; transition-duration: 1100ms; }
.js [data-hero].is-ready .terms { opacity: 1; transform: none; transition-delay: 560ms; }

.vsl { position: relative; margin: var(--sc-4) var(--sc-4) var(--sc-5) 0; perspective: 1200px; }
.vsl__sq { position: absolute; right: calc(var(--sc-4) * -1); top: calc(var(--sc-6) * -1); width: 34%; aspect-ratio: 1; border-radius: var(--sc-r-md); background: linear-gradient(145deg, #FFC857, #FFB224 45%, #E99A0C); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 40px 90px -30px rgb(255 178 36 / 0.5); will-change: transform; }
.vsl__tilt { position: relative; }
.vsl__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-surface); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), var(--e3); }
.vsl__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) brightness(0.9); transform: scale(1.04); transition: transform 1600ms var(--out); }
.vsl:hover .vsl__frame img { transform: scale(1.07); }
.vsl__frame .vsl__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsl__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgb(11 12 14 / 0.62)); }
.sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 50% at var(--gx, 30%) var(--gy, 0%), rgb(255 255 255 / 0.14), transparent 60%); mix-blend-mode: soft-light; }
.vsl__play { position: absolute; left: var(--sc-4); bottom: var(--sc-4); z-index: 2; display: flex; align-items: center; gap: var(--sc-3); border: 0; background: none; color: var(--sc-ink); font: inherit; text-align: left; cursor: pointer; }
.vsl__disc { position: relative; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #FFC44F, #F7A81A); color: var(--sc-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 10px 26px -8px rgb(255 178 36 / 0.7); transition: transform 300ms var(--spring); }
.vsl__disc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(255 178 36 / 0.55); animation: ring 2.6s var(--out) infinite; }
@keyframes ring { 0% { transform: scale(0.9); opacity: 0.9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.vsl__disc svg { width: 1.35rem; height: 1.35rem; margin-left: 3px; fill: currentColor; }
.vsl__play:hover .vsl__disc { transform: scale(1.08); }
.vsl__label b { display: block; font-size: 1.0625rem; font-weight: 600; text-shadow: 0 1px 12px rgb(0 0 0 / 0.5); }
.vsl__label span { font-size: 0.875rem; color: var(--sc-ink-soft); }
.vsl__note { position: absolute; left: var(--sc-3); right: var(--sc-3); top: var(--sc-3); z-index: 3; padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm); background: rgb(11 12 14 / 0.9); box-shadow: var(--ring), var(--e2); font-size: var(--t-small); }

/* the chips: what Review Right is doing while you watch. Glass, floating, one at a time. */
.chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: var(--sc-3); max-width: 17rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: 12px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), var(--lip), var(--e3); font-size: 0.8125rem; line-height: 1.3; opacity: 0; transform: translateY(10px) scale(0.94); transition: opacity 420ms var(--out), transform 620ms var(--spring); pointer-events: none; }
.chip.on { opacity: 1; transform: none; }
.chip b { display: block; font-weight: 600; font-size: 0.875rem; }
.chip small { display: flex; align-items: center; gap: 1px; color: var(--sc-ink-soft); font-size: 0.8125rem; }
.chip__stars svg { width: 0.75rem; height: 0.75rem; color: var(--sc-accent); }
.chip__stars em { margin-left: 0.4rem; font-style: normal; color: var(--mute); }
.chip__ic, .chip__av { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 9px; }
.chip__ic svg { width: 1rem; height: 1rem; }
.chip__ic--send { background: rgb(255 255 255 / 0.08); color: var(--sc-ink); box-shadow: var(--ring); }
.chip__ic--ok { background: linear-gradient(180deg, #FFC44F, #F7A81A); color: var(--sc-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45); }
.chip__av { border-radius: 50%; background: linear-gradient(160deg, #6d5bd0, #4a3aa8); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
.chip--sent { left: calc(var(--sc-3) * -1); top: 10%; }
.chip--review { right: calc(var(--sc-5) * -1); top: 42%; }
.chip--reply { left: 10%; bottom: calc(var(--sc-6) * -1); }
.chip.on > span:last-child { animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--sc-hairline); }
.terms li { display: flex; gap: var(--sc-3); align-items: flex-start; padding: var(--sc-4) var(--sc-3); }
.terms li + li { border-left: 1px solid var(--sc-hairline); }
.terms svg { display: none; width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.terms b { display: block; font-size: 1.0625rem; font-weight: 600; }
.terms span { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--sc-ink-soft); }
@media (max-width: 480px) { .vsl { margin-bottom: var(--sc-5); } .chip { max-width: 14.5rem; font-size: 0.75rem; } .chip b { font-size: 0.8125rem; } .chip--review { right: calc(var(--sc-3) * -1); top: 30%; } .chip--sent { top: -1.4rem; left: -0.5rem; } .chip--reply { left: auto; right: -0.25rem; bottom: -2.9rem; } }
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--bar) + var(--sc-9)); }
  .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); align-items: center; column-gap: var(--sc-9); row-gap: var(--sc-9); }
  .hero__cta { display: flex; }
  .terms { grid-column: 1 / -1; }
  .terms li { padding: var(--sc-5) var(--sc-6); gap: var(--sc-4); }
  .terms svg { display: block; }
  .terms span { font-size: var(--t-small); }
  .chip--review { right: calc(var(--sc-8) * -1); }
}

/* -------------------------------------------------------- section reveals */
.js [data-rise] { opacity: 0; transform: translateY(0.5em); filter: blur(6px); transition: opacity 800ms var(--out), transform 800ms var(--out), filter 800ms var(--out); }
.js [data-rise].is-in { opacity: 1; transform: none; filter: none; }
.js .lede[data-rise] { transition-delay: 90ms; }
.js [data-in] { opacity: 0; translate: 0 18px; transition: opacity 800ms var(--out), translate 800ms var(--out); }
.js [data-in].is-in { opacity: 1; translate: 0 0; }
.js .pain__grid [data-in]:nth-child(2), .js .bento [data-in]:nth-child(2), .js .plans [data-in]:nth-child(2) { transition-delay: 80ms; }
.js .pain__grid [data-in]:nth-child(3), .js .bento [data-in]:nth-child(3), .js .plans [data-in]:nth-child(3) { transition-delay: 160ms; }

/* ------------------------------------------------ surfaces that hold things */
/* One recipe for every card: a gradient body, a hairline brighter at the top
   (light from above), the lip, and a shadow for its height. */
.pcard, .fcard, .plan, .tl, .q, .pack { position: relative; }
.pcard::before, .fcard::before, .plan::before, .tl::before, .q::before, .pack::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05) 35%, rgb(255 255 255 / 0.025));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* light that follows the pointer across a card */
.spot::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms var(--out); background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.06), transparent 45%); }
@media (hover: hover) and (pointer: fine) { .spot:hover::after { opacity: 1; } }
[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--out); }

/* -------------------------------------------------------------------- gap */
.gap { padding: var(--sc-section) 0 var(--sc-7); text-align: center; }
.gap .lede { margin-inline: auto; }

/* ------------------------------------------------------------------- pain */
.pain { padding-bottom: var(--sc-section); }
.pain__grid { display: grid; gap: var(--sc-4); }
.pcard { display: grid; grid-template-rows: auto 1fr; min-height: 30rem; overflow: hidden; border-radius: var(--sc-r-lg); background: var(--surf); box-shadow: var(--lip), var(--e2); }
.pcard__text { position: relative; z-index: 3; padding: var(--sc-6) var(--sc-6) 0; }
.pcard__h { font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.016em; }
.pcard__text p { margin-top: var(--sc-3); color: var(--sc-ink-soft); max-width: 36ch; }
.pcard__vis { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: var(--sc-6) var(--sc-5) 0; }
.pcard--time { background: linear-gradient(180deg, #1a1b1f, #121316); }
.pcard--seen { background: radial-gradient(120% 90% at 50% 115%, #4a1c16 0%, #2a1413 50%, #1b1112 100%); }
.pcard--seen::before { background: linear-gradient(180deg, rgb(255 150 120 / 0.22), rgb(255 120 90 / 0.06) 40%, rgb(255 120 90 / 0.03)); }
@media (min-width: 900px) { .gap { padding-bottom: var(--sc-7); } .pain__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pcard { min-height: 0; } .pcard__vis { padding-top: var(--sc-5); } }

/* the Google profile, white as Google draws it, cut by the card like a screenshot */
.gbp { position: relative; width: min(100%, 22rem); margin-bottom: -1.5rem; padding: var(--sc-5) var(--sc-5) var(--sc-7); border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #ffffff, #f7f7f5); color: #202124; box-shadow: 0 -1px 0 rgb(255 255 255 / 0.9), 0 2px 4px rgb(0 0 0 / 0.2), 0 30px 60px -18px rgb(0 0 0 / 0.75); transform-origin: 50% 100%; }
.js .pcard .gbp { translate: 0 2rem; transition: translate 900ms var(--out), transform 600ms var(--out); }
.js .pcard.is-in .gbp { translate: 0 0; }
.gbp__name { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.gbp__stars { display: flex; gap: 2px; margin-top: 0.3rem; color: #c4c7c5; }
.gbp__stars svg { width: 1rem; height: 1rem; }
.gbp__meta { margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.45; color: #5f6368; }
.gbp__none { position: relative; color: #d93025; font-weight: 500; }
.gbp__none::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: #d93025; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--out) 700ms; }
.pcard.is-in .gbp__none::after, .no-js .gbp__none::after { transform: scaleX(1); }
.gbp__acts { display: flex; justify-content: space-between; margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: 1px solid #e8eaed; }
.gbp__acts span { display: grid; justify-items: center; gap: var(--sc-1); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #1a73e8; }
.gbp__acts svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: #1a73e8; stroke-width: 1.8; stroke-linejoin: round; }

/* the lock screen at 21:14 */
.lock { position: relative; width: min(100%, 21rem); margin-bottom: -2rem; padding: 2.6rem var(--sc-3) var(--sc-8); border-radius: 2.4rem 2.4rem 0 0; background: radial-gradient(120% 70% at 50% 0%, #4a3525 0%, #221a15 55%, #151315 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 0 0 7px #08080a, inset 0 0 0 8px rgb(255 255 255 / 0.06), 0 30px 70px -18px rgb(0 0 0 / 0.85); text-align: center; transform-origin: 50% 100%; }
.lock__island { position: absolute; left: 50%; top: 0.9rem; width: 5.2rem; height: 1.4rem; translate: -50% 0; border-radius: 1rem; background: #050506; }
.lock__time { font-size: 3.3rem; font-weight: 300; font-stretch: 88%; line-height: 1; letter-spacing: -0.02em; color: rgb(255 255 255 / 0.94); text-shadow: 0 2px 20px rgb(0 0 0 / 0.4); }
.lock__date { margin-top: var(--sc-1); font-size: 0.8125rem; color: rgb(255 255 255 / 0.72); }
.lock__stack { display: grid; gap: var(--sc-2); margin-top: var(--sc-5); text-align: left; }
.lock__stack li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; grid-template-areas: "i b e" "i s s"; column-gap: var(--sc-3); padding: 0.7rem 0.75rem; border-radius: 1rem; background: rgb(255 255 255 / 0.12); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12), 0 8px 20px -10px rgb(0 0 0 / 0.7); }
.js .lock__stack li { opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 360ms var(--out), transform 620ms var(--spring); }
.js .lock__stack li.on { opacity: 1; transform: none; }
.lock__stack > li > b { grid-area: b; font-size: 0.8125rem; font-weight: 600; color: #fff; }
.lock__stack span { grid-area: s; font-size: 0.875rem; line-height: 1.35; color: rgb(255 255 255 / 0.86); }
.lock__stack em { grid-area: e; font-style: normal; font-size: 0.75rem; color: rgb(255 255 255 / 0.6); }
.lock__stack em b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lock__stack .is-snoozed em { color: var(--sc-accent); }
.app { grid-area: i; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; align-self: center; border-radius: 0.5rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 2px 4px rgb(0 0 0 / 0.3); }
.app svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app--phone { background: linear-gradient(180deg, #5fde7f, #2fb654); } .app--mail { background: linear-gradient(180deg, #4ea0ff, #1a6fe6); } .app--books { background: linear-gradient(180deg, #8f80f0, #5a49cc); } .app--rem { background: linear-gradient(180deg, #ffb64d, #f28c00); }

/* the local pack */
.pack { width: 100%; border-radius: 14px; background: linear-gradient(180deg, #1a1b1f, #141518); box-shadow: var(--lip), var(--e3); }
.pack__q { position: relative; display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); font-size: var(--t-small); }
.pack__q svg { width: 1rem; height: 1rem; fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.5; stroke-linecap: round; }
.pack__tag { margin-left: auto; font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.03em; color: var(--mute); }
.pack ol { position: relative; }
.pack li { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--sc-3); height: 3.75rem; padding: 0 var(--sc-4); border-top: 1px solid var(--sc-hairline); transition: background-color 300ms var(--out); }
.pack li:first-child { border-top: 0; }
.pack__n { font-size: 0.875rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.pack__name { font-weight: 600; font-size: 0.975rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack__r { display: flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; color: var(--sc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pack__r > svg { width: 0.8rem; height: 0.8rem; color: var(--sc-accent); }
.pack .is-you { background: linear-gradient(90deg, rgb(255 178 36 / 0.13), transparent 85%); }
.pack .is-you .pack__n, .pack .is-you .pack__name { color: var(--sc-accent); }
.pack--seen { width: min(100%, 24rem); margin-bottom: var(--sc-6); }
.pack--seen ol { overflow: hidden; border-radius: 0 0 14px 14px; }
.pack--seen .is-you { opacity: 0.5; }
.pack__top.on { background: rgb(255 255 255 / 0.08); }
/* her thumb: glides in, presses the first result, lifts away */
.finger { position: absolute; z-index: 5; left: 38%; top: 118%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.2) 60%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55), 0 10px 24px -6px rgb(0 0 0 / 0.6); opacity: 0; transition: top 1000ms var(--out), opacity 400ms var(--out); pointer-events: none; }
.finger.on { top: calc(3.3rem + 1.875rem); opacity: 1; animation: press 3.6s var(--out) forwards; }
@keyframes press { 0%, 26% { transform: scale(1); } 30% { transform: scale(0.82); } 38%, 100% { transform: scale(1); } }
.finger__ring { position: absolute; inset: -0.6rem; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.5); opacity: 0; }
.finger.on .finger__ring { animation: ripple 3.6s var(--out) forwards; }
@keyframes ripple { 0%, 28% { opacity: 0; transform: scale(0.6); } 32% { opacity: 1; } 55%, 100% { opacity: 0; transform: scale(1.8); } }

/* -------------------------------------------------------------------- fix */
.fix { padding-block: var(--sc-section); border-top: 1px solid var(--sc-hairline); }
.fix__grid { display: grid; gap: var(--sc-8); }
.benefits { display: grid; margin-top: var(--sc-7); }
.benefits li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--sc-4); padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); }
.benefits li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.benefits__ic { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, rgb(255 178 36 / 0.16), rgb(255 178 36 / 0.06)); box-shadow: inset 0 0 0 1px rgb(255 178 36 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.08); }
.benefits svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.js .benefits svg { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1400ms var(--out) 250ms; }
.js .benefits li.is-in svg { stroke-dashoffset: 0; }
.benefits h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.006em; }
.benefits p { margin-top: var(--sc-1); color: var(--sc-ink-soft); font-size: 1rem; }

.climb { position: relative; align-self: center; display: grid; gap: var(--sc-4); --k: 0; }
.climb__glow { position: absolute; left: 10%; right: 10%; top: 15%; height: 55%; pointer-events: none; border-radius: 50%; background: rgb(255 178 36 / 0.35); filter: blur(60px); opacity: calc(0.12 + var(--k) * 0.5); }
.climb__rows { height: 11.25rem; }
.climb__rows li { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(180deg, #1a1b1f, #16171a); transition: transform 800ms var(--out), box-shadow 400ms var(--out); will-change: transform; }
.climb__rows li:last-child { border-radius: 0 0 14px 14px; }
.climb__rows li.is-you { z-index: 2; background: linear-gradient(90deg, #2c2211, #1a1712 85%); }
.climb__rows li.is-passing { box-shadow: 0 0 0 1px rgb(255 178 36 / 0.5), 0 14px 34px -10px rgb(255 178 36 / 0.5); }
.stars5 { position: relative; display: inline-block; width: 4.4rem; height: 0.8rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 12'%3E%3Cg fill='%23454a51'%3E%3Cpath id='s' d='M6 .7 7.6 4l3.6.4-2.7 2.5.8 3.6L6 8.7 2.7 10.5l.8-3.6L.8 4.4 4.4 4z'/%3E%3Cuse href='%23s' x='14.5'/%3E%3Cuse href='%23s' x='29'/%3E%3Cuse href='%23s' x='43.5'/%3E%3Cuse href='%23s' x='58'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.stars5 i { position: absolute; inset: 0 auto 0 0; width: 92%; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 12'%3E%3Cg fill='%23FFB224'%3E%3Cpath id='s' d='M6 .7 7.6 4l3.6.4-2.7 2.5.8 3.6L6 8.7 2.7 10.5l.8-3.6L.8 4.4 4.4 4z'/%3E%3Cuse href='%23s' x='14.5'/%3E%3Cuse href='%23s' x='29'/%3E%3Cuse href='%23s' x='43.5'/%3E%3Cuse href='%23s' x='58'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 4.4rem 100% no-repeat; }
.climb__meter { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--sc-4); font-size: var(--t-small); color: var(--sc-ink-soft); }
.climb__meter b { min-width: 2.5ch; font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; font-size: 2rem; letter-spacing: -0.02em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.climb__bar { position: relative; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.08); }
.climb__bar i { position: relative; display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #b87610, #FFB224); }
.climb__bar i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 12px 2px rgb(255 178 36 / 0.8); }
.plus { position: absolute; left: 7.4rem; top: -0.2rem; width: 0; height: 0; pointer-events: none; }
.plus span { position: absolute; left: 0; top: 0; font-size: 0.8125rem; font-weight: 700; color: var(--sc-accent); white-space: nowrap; animation: plus 900ms var(--out) forwards; }
@keyframes plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
@media (min-width: 900px) { .fix__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9); align-items: start; } .climb { position: sticky; top: calc(var(--bar) + var(--sc-8)); } }

/* --------------------------------------------------- today, day 3, day 7 */
.days { padding-block: var(--sc-section); border-top: 1px solid var(--sc-hairline); }
.days__grid { display: grid; gap: var(--sc-7); }
.tl { display: grid; gap: var(--sc-7); padding: var(--sc-6) var(--sc-5) var(--sc-6) calc(var(--sc-5) + 2rem); border-radius: var(--sc-r-lg); background: var(--surf); box-shadow: var(--lip), var(--e2); --fill: 0; }
.tl::after { content: ""; position: absolute; left: calc(var(--sc-5) + 0.62rem); top: calc(var(--sc-6) + 0.7rem); bottom: calc(var(--sc-6) + 1.5rem); width: 2px; border-radius: 1px; background: linear-gradient(180deg, #FFB224, #FFB224) no-repeat 0 0 / 100% calc(var(--fill) * 100%), rgb(255 255 255 / 0.09); }
.tl li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); }
.tl li > * { min-width: 0; }
.tl li::before { content: ""; position: absolute; left: -2rem; top: 0.3rem; margin-left: 0.2rem; width: 0.85rem; height: 0.85rem; border-radius: 4px; background: var(--sc-canvas); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.2); z-index: 3; transition: background-color 300ms var(--out), box-shadow 400ms var(--out), transform 500ms var(--spring); }
.tl li.is-lit::before { background: var(--sc-accent); box-shadow: inset 0 0 0 2px var(--sc-accent), 0 0 0 4px rgb(255 178 36 / 0.15), 0 0 16px rgb(255 178 36 / 0.55); transform: scale(1.1); }
.tl__when { font-size: 1rem; color: var(--mute); }
.tl__h { margin-top: 0.2rem; font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); letter-spacing: -0.012em; color: var(--sc-ink); transition: color 400ms var(--out); }
.tl li.is-lit .tl__h { color: var(--sc-accent); }
.tl__text p:last-child { margin-top: var(--sc-2); color: var(--sc-ink-soft); max-width: 46ch; }
.tl__vis { justify-self: start; max-width: 100%; display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-3) var(--sc-4); border-radius: 12px; background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.025)); box-shadow: var(--ring), var(--lip), var(--e1); font-size: 0.875rem; }
.js .tl__vis { opacity: 0.3; transform: translateY(6px); transition: opacity 500ms var(--out), transform 600ms var(--spring); }
.js .tl li.is-lit .tl__vis { opacity: 1; transform: none; }
.tl__vis small { color: var(--mute); font-size: 0.8125rem; }
.tl__vis--connect .g { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: #fff; color: #1a73e8; font-weight: 700; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3); }
.tl__vis--connect b { display: block; font-weight: 600; }
.tl__vis .sw { position: relative; margin-left: auto; width: 2.4rem; height: 1.4rem; border-radius: 5px; background: rgb(255 255 255 / 0.1); transition: background-color 400ms var(--out) 300ms; }
.tl__vis .sw i { position: absolute; left: 3px; top: 3px; width: 1rem; height: 1rem; border-radius: 3px; background: var(--sc-ink-soft); transition: transform 500ms var(--spring) 300ms, background-color 400ms 300ms; }
.tl li.is-lit .sw, .no-js .sw { background: var(--sc-accent); }
.tl li.is-lit .sw i, .no-js .sw i { transform: translateX(1rem); background: var(--sc-accent-ink); }
.tl__vis--sent { justify-content: space-between; }
.tl__vis--sent .mini { min-width: 0; padding: 0.45rem 0.7rem; border-radius: 0.8rem 0.8rem 0.8rem 0.2rem; background: var(--s3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl__vis--sent small { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.tl__vis--sent svg { width: 0.9rem; height: 0.9rem; color: var(--sc-accent); }
.tl__vis--next { display: grid; gap: 0.35rem; }
.tl__vis--next p b { font-family: var(--sc-font-display); font-stretch: 96%; font-size: 1.25rem; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.tl__bar { height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.tl__bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #b87610, #FFB224); transition: width 1400ms var(--out) 300ms; }
.tl li.is-lit .tl__bar i, .no-js .tl__bar i { width: 62%; }
@media (min-width: 900px) {
  .days__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-9); align-items: start; }
  .days .h2 { position: sticky; top: calc(var(--bar) + var(--sc-8)); }
  .tl { padding: var(--sc-8) var(--sc-7) var(--sc-8) calc(var(--sc-7) + 2rem); }
  .tl::after { left: calc(var(--sc-7) + 0.62rem); top: calc(var(--sc-8) + 0.7rem); bottom: calc(var(--sc-8) + 1.5rem); }
  .tl__vis { max-width: 26rem; }
}

/* ---------------------------------------------------------- paper section */
.day { background: var(--paper); color: var(--paper-ink); --sc-hairline: var(--paper-rule); }
.day .lede { color: var(--paper-soft); }
.day :focus-visible { outline-color: var(--paper-ink); }
.steps { position: relative; padding-block: var(--sc-section); background: linear-gradient(180deg, #F6F6F4, #EDEDEA); }
.steps__grid { display: grid; gap: var(--sc-7); }
.steps__list { position: relative; display: grid; }
.steps__list li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--sc-5); padding: var(--sc-6) 0; border-top: 1px solid var(--paper-rule); }
.steps__list li:last-child { border-bottom: 1px solid var(--paper-rule); }
.steps__n { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #ffffff, #f3f3f0); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 1px rgb(20 20 20 / 0.06), 0 8px 18px -8px rgb(20 20 20 / 0.22); color: var(--amber-deep); }
.steps__n svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.steps__list p { margin-top: var(--sc-2); color: var(--paper-soft); max-width: 48ch; }
@media (min-width: 900px) { .steps__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-9); } }

/* --------------------------------------------------------------- features */
.feats { padding-block: var(--sc-section); }
.feats__head { text-align: center; }
.feats__head .lede { margin-inline: auto; }
.bento { display: grid; gap: var(--sc-4); margin-top: var(--sc-8); }
.fcard { display: flex; flex-direction: column; gap: var(--sc-3); padding: var(--sc-6); border-radius: var(--sc-r-lg); background: var(--surf); box-shadow: var(--lip), var(--e2); overflow: hidden; }
.fcard > * { position: relative; z-index: 3; }
.fcard > p { color: var(--sc-ink-soft); max-width: 42ch; }
.fcard > :last-child { margin-top: auto; }
.fcard > .h3 + p + * { margin-top: var(--sc-5); }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fcard--req, .fcard--reply { grid-column: span 3; }
  .fcard--follow, .fcard--react, .fcard--rank { grid-column: span 2; }
}
/* inner screens share one inset material */
.thread, .rev { padding: var(--sc-4); border-radius: 12px; background: linear-gradient(180deg, #0e0f11, #111215); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 2px 8px rgb(0 0 0 / 0.35); }

/* the message thread */
.thread { position: relative; display: grid; align-content: start; gap: var(--sc-2); min-height: 18rem; }
.thread__from { display: flex; align-items: center; gap: var(--sc-2); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); font-size: 0.875rem; }
.thread__av { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: #F4F4F2; color: #0B0C0E; }
.thread__av svg { width: 0.95rem; height: 0.95rem; }
.thread__from small { margin-left: auto; color: var(--mute); }
.typing { display: flex; gap: 4px; width: max-content; padding: 0.7rem 0.9rem; border-radius: 1rem 1rem 1rem 0.25rem; background: var(--s3); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-ink-soft); animation: dot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.bub { max-width: 90%; padding: var(--sc-3) var(--sc-4); font-size: 0.9375rem; line-height: 1.45; box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.7); }
.bub--in { border-radius: 1rem 1rem 1rem 0.25rem; background: linear-gradient(180deg, #2a2d33, #24272c); }
.bub--in mark { background: rgb(255 178 36 / 0.18); color: var(--sc-accent); padding: 0 0.15em; border-radius: 3px; }
.bub--out { justify-self: end; width: max-content; border-radius: 1rem 1rem 0.25rem 1rem; background: linear-gradient(180deg, #FFC44F, #F7A81A); color: var(--sc-accent-ink); font-weight: 520; }
.thread__meta { font-size: 0.75rem; color: var(--mute); }
.toast { justify-self: center; margin-top: var(--sc-2); display: flex; align-items: center; gap: var(--sc-2); padding: 0.55rem 0.9rem; border-radius: 10px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), var(--e3); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.toast__st { display: inline-flex; color: var(--sc-accent); }
.toast__st svg { width: 0.7rem; height: 0.7rem; }
/* sequence states: hidden until their moment */
.js [data-seq] .typing, .js [data-seq] .bub, .js [data-seq] .thread__meta, .js [data-seq] .toast { opacity: 0; transform: translateY(8px) scale(0.97); transform-origin: 0 100%; transition: opacity 320ms var(--out), transform 520ms var(--spring); }
.js [data-seq] .bub--out { transform-origin: 100% 100%; }
.js [data-seq] .on { opacity: 1; transform: none; }
.js [data-seq] .typing:not(.on) { position: absolute; }

/* the review and its reply */
.rev__who { display: flex; align-items: center; gap: var(--sc-3); }
.rev__av { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, #6d5bd0, #4a3aa8); color: #fff; font-weight: 600; font-size: 0.875rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
.rev__who b { font-weight: 600; white-space: nowrap; }
.rev__tag { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.03em; color: var(--mute); }
.rev__stars { display: inline-flex; gap: 1px; color: var(--sc-accent); }
.js .rev__stars { color: #3a3d43; }
.rev__stars svg { width: 0.9rem; height: 0.9rem; transition: color 200ms var(--out), transform 400ms var(--spring); }
.rev__stars svg.on { color: var(--sc-accent); transform: scale(1.15); }
.rev__t { margin-top: var(--sc-3); font-size: 0.9375rem; color: var(--sc-ink); }
.rev__draft { position: relative; margin-top: var(--sc-4); padding: var(--sc-3) var(--sc-4) var(--sc-4); border-radius: 10px; background: linear-gradient(180deg, #25282d, #202328); box-shadow: inset 0 0 0 1px rgb(255 178 36 / 0.18), 0 8px 20px -12px rgb(0 0 0 / 0.8); font-size: 0.9375rem; color: var(--sc-ink); }
.js .rev__draft { opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--out), transform 520ms var(--spring); }
.js .rev__draft.on { opacity: 1; transform: none; }
.rev__lab { display: flex; align-items: center; gap: var(--sc-2); font-size: 0.8125rem; font-weight: 600; color: var(--sc-accent); margin-bottom: var(--sc-1); }
.spark { width: 0.8rem; height: 0.8rem; background: var(--sc-accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rev__text { min-height: 2.9em; }
.rev__text .cur { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -0.12em; background: var(--sc-accent); animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rev__acts { display: flex; align-items: center; gap: var(--sc-4); margin-top: var(--sc-3); }
.rev__ok { position: relative; display: inline-grid; padding: 0.4rem 0.9rem; border-radius: var(--sc-r-sm); background: linear-gradient(180deg, #FFC44F, #F7A81A); color: var(--sc-accent-ink); font-size: 0.875rem; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 6px 14px -6px rgb(255 178 36 / 0.6); transition: transform 180ms var(--out), opacity 300ms var(--out); }
.rev__ok > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.3rem; transition: opacity 250ms var(--out), transform 350ms var(--spring); }
.rev__ok svg { width: 0.85rem; height: 0.85rem; }
.rev__ok-b { opacity: 0; transform: translateY(6px); }
.js .rev__ok { opacity: 0.35; }
.js .rev__ok.on { opacity: 1; }
.rev__ok.pressed { transform: scale(0.92); }
.rev__ok.done .rev__ok-a { opacity: 0; transform: translateY(-6px); }
.rev__ok.done .rev__ok-b { opacity: 1; transform: none; }
.rev__edit { font-size: 0.875rem; color: var(--mute); }

/* follow-ups: a line that stops where the customer clicked */
.fu { position: relative; display: grid; }
.fu li { position: relative; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); padding: 0.55rem 0 0.55rem 1.75rem; font-size: 0.9375rem; color: var(--sc-ink); transition: color 360ms var(--out); }
.js .fu li { color: var(--mute); }
.fu li::before { content: ""; position: absolute; left: 0; top: 0.9rem; width: 0.7rem; height: 0.7rem; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color 300ms var(--out), box-shadow 300ms var(--out), transform 500ms var(--spring); z-index: 1; }
.fu li::after { content: ""; position: absolute; left: calc(0.35rem - 1px); top: 1.75rem; bottom: -0.9rem; width: 2px; background: rgb(255 255 255 / 0.08); }
.fu li:last-child::after { display: none; }
.fu b { font-weight: 600; }
.js .fu li.on { color: var(--sc-ink); }
.fu li.on::before { background: var(--sc-ink-soft); box-shadow: none; transform: scale(1.1); }
.js .fu li.fu__hit.on { color: var(--sc-accent); }
.fu li.fu__hit.on::before { background: var(--sc-accent); box-shadow: 0 0 0 4px rgb(255 178 36 / 0.15), 0 0 14px rgb(255 178 36 / 0.6); }
.js .fu li.fu__skip.on { color: var(--mute); }
.fu li.fu__skip.on::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.15); }
.fu li.fu__skip span { position: relative; }
.fu li.fu__skip span::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--out) 200ms; }
.fu li.fu__skip.on span::after { transform: scaleX(1); }

/* reactivation */
.react { display: grid; }
.react li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "a b e" "a s e"; column-gap: var(--sc-3); padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline); }
.react__av { grid-area: a; align-self: center; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--s3); color: var(--sc-ink-soft); font-size: 0.8125rem; font-weight: 600; box-shadow: var(--ring); }
.react b { grid-area: b; font-weight: 600; font-size: 0.9375rem; }
.react li > span:not(.react__av) { grid-area: s; font-size: 0.875rem; color: var(--mute); }
.react em { grid-area: e; align-self: center; display: inline-grid; font-style: normal; font-size: 0.8125rem; font-weight: 600; }
.react em > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; padding: 0.22rem 0.55rem; border-radius: 5px; transition: opacity 260ms var(--out), transform 460ms var(--spring); }
.react__a { background: rgb(255 255 255 / 0.06); color: var(--sc-ink-soft); }
.react__b { background: rgb(255 178 36 / 0.14); color: var(--sc-accent); box-shadow: inset 0 0 0 1px rgb(255 178 36 / 0.25); opacity: 0; transform: scale(0.85); }
.react__b--wait { background: rgb(255 255 255 / 0.08); color: var(--sc-ink); box-shadow: var(--ring); }
.react__b svg { width: 0.8rem; height: 0.8rem; }
.react em.on .react__a { opacity: 0; transform: scale(0.85); }
.react em.on .react__b { opacity: 1; transform: none; }

/* the profile: jobs ticked off, completeness filling */
.prof { display: grid; gap: var(--sc-3); font-size: 0.9375rem; }
.prof__list { display: grid; gap: var(--sc-2); }
.prof__list li { display: flex; align-items: center; gap: var(--sc-2); color: var(--mute); transition: color 300ms var(--out); }
.prof__list svg { width: 1.1rem; height: 1.1rem; padding: 0.15rem; border-radius: 4px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.18); transition: color 200ms, background-color 300ms var(--out), box-shadow 300ms var(--out), transform 500ms var(--spring); }
.prof__list li.on { color: var(--sc-ink); }
.prof__list li.on svg { color: var(--sc-accent-ink); background: var(--sc-accent); box-shadow: none; transform: scale(1.08); }
.prof__row { display: flex; justify-content: space-between; margin-top: var(--sc-2); color: var(--sc-ink-soft); }
.prof__row b { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.prof__bar { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.prof__bar i { display: block; height: 100%; width: 70%; border-radius: 3px; background: linear-gradient(90deg, #b87610, #FFB224); transition: width 1500ms var(--out); }
.prof__bar i.on { width: 100%; }

/* ------------------------------------------------------------- every trade */
.every { position: relative; padding-block: var(--sc-section); overflow: hidden; border-top: 1px solid var(--sc-hairline); }
.every__words { position: absolute; inset: 62% 0 auto; translate: 0 -50%; display: grid; gap: var(--sc-2); pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.mq { display: flex; width: max-content; font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 640; font-size: clamp(3.6rem, 2rem + 8vw, 8.5rem); line-height: 1.02; letter-spacing: -0.03em; color: #202226; white-space: nowrap; animation: mq 70s linear infinite; }
.mq--rev { animation-direction: reverse; color: #1a1c20; }
@keyframes mq { to { transform: translateX(-50%); } }
.every__in { position: relative; display: grid; justify-items: center; text-align: center; }
.phone { position: relative; width: 17.5rem; margin-top: var(--sc-8); padding: 0.55rem; border-radius: 2.7rem; background: linear-gradient(150deg, #3a3d44 0%, #16171a 38%, #0c0d0f 70%, #2a2c31 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 0 0 2px rgb(0 0 0 / 0.6), 0 2px 2px hsl(var(--sh) / 0.5), 0 30px 60px -20px hsl(var(--sh) / 0.85), 0 80px 140px -40px hsl(var(--sh) / 0.9); }
.phone__btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a3d44, #1a1b1e); }
.phone__btn--a { left: -3px; top: 7rem; height: 3.2rem; }
.phone__btn--b { right: -3px; top: 8.5rem; height: 5rem; }
.phone__screen { position: relative; height: 32rem; overflow: hidden; border-radius: 2.2rem; background: #f6f6f4; color: #1d1e20; text-align: left; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5); }
.phone__screen::before { content: ""; position: absolute; left: 50%; top: 0.55rem; width: 5.5rem; height: 1.45rem; translate: -50% 0; border-radius: 1rem; background: #0b0c0e; z-index: 3; }
.phone__glare { position: absolute; inset: 0.55rem; border-radius: 2.2rem; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0) 32%), radial-gradient(60% 40% at var(--gx, 30%) var(--gy, 10%), rgb(255 255 255 / 0.1), transparent 70%); }
.phone__bar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 2.6rem 1rem 0.7rem; background: rgb(246 246 244 / 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 #e3e3df; font-size: 0.875rem; font-weight: 600; }
.phone__toggle { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: 0.8125rem; color: #55595e; }
.phone__toggle i { position: relative; width: 1.9rem; height: 1.1rem; border-radius: 4px; background: #1d1e20; }
.phone__toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 0.8rem; height: 0.8rem; border-radius: 3px; background: #FFB224; }
.phone__feed { display: grid; gap: 0.6rem; padding: 0.7rem; }
.pr { padding: 0.75rem; border-radius: 0.85rem; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.05), 0 4px 12px -6px rgb(0 0 0 / 0.14); font-size: 0.8125rem; line-height: 1.4; }
.pr.is-new { animation: arrive 1100ms var(--spring); }
@keyframes arrive { from { opacity: 0; transform: translateY(-16px) scale(0.96); box-shadow: 0 0 0 2px #FFB224; } 50% { box-shadow: 0 0 0 2px rgb(255 178 36 / 0.7); } }
.pr p:first-child { display: flex; justify-content: space-between; }
.pr p:first-child span { font-size: 0.75rem; color: #8a8e93; }
.pr__s { color: #e89a00; letter-spacing: 1px; margin: 0.15rem 0 0.2rem; }
.pr__r { margin-top: 0.45rem; padding: 0.5rem 0.6rem; border-radius: 0.55rem; background: #f2f2ef; color: #45494e; }
.pr__r b { display: block; font-size: 0.75rem; color: #1d1e20; }

/* ---------------------------------------------------------------- pricing */
.pricing { padding-block: var(--sc-section); border-top: 1px solid var(--sc-hairline); }
.pricing__head { display: grid; gap: var(--sc-5); }
.toggle { display: flex; align-items: center; gap: var(--sc-4); color: var(--sc-ink-soft); font-size: 1rem; }
.switch { position: relative; width: 3rem; height: 1.7rem; flex: none; border: 0; border-radius: 7px; background: linear-gradient(180deg, #1c1e22, #24272c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 2px 4px rgb(0 0 0 / 0.4); cursor: pointer; }
.switch i { position: absolute; left: 3px; top: 3px; width: 1.3rem; height: 1.3rem; border-radius: 5px; background: linear-gradient(180deg, #e7e9ec, #b9bdc2); box-shadow: 0 2px 4px rgb(0 0 0 / 0.4); transition: transform 360ms var(--spring); }
.switch[aria-checked="true"] { background: linear-gradient(180deg, #FFC44F, #F7A81A); }
.switch[aria-checked="true"] i { transform: translateX(1.3rem); background: linear-gradient(180deg, #2a1e08, #1A1204); }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); margin-top: var(--sc-8); }
.plan { display: flex; flex-direction: column; padding: var(--sc-7) var(--sc-6) var(--sc-6); border-radius: var(--sc-r-lg); background: var(--surf); box-shadow: var(--lip), var(--e1); transition: translate 800ms var(--out), opacity 800ms var(--out), transform 400ms var(--out), box-shadow 400ms var(--out); }
.plan > * { position: relative; z-index: 3; }
@media (hover: hover) and (pointer: fine) { .plan:hover { transform: translateY(-4px); box-shadow: var(--lip), var(--e3); } }
/* the lead plan: a line of light travelling slowly round its edge */
.plan--lead { background: linear-gradient(180deg, #221f19, #18171a 60%); box-shadow: var(--lip), var(--e3), 0 30px 80px -40px rgb(255 178 36 / 0.35); }
.plan--lead::before { padding: 1.5px; background: conic-gradient(from var(--ang, 0deg), rgb(255 178 36 / 0.25), rgb(255 178 36 / 0.95) 10%, rgb(255 178 36 / 0.25) 22%, rgb(255 178 36 / 0.25) 55%, rgb(255 214 130 / 0.8) 66%, rgb(255 178 36 / 0.25) 78%); animation: edge 8s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes edge { to { --ang: 360deg; } }
.plan__flag { position: absolute; top: -0.8rem; left: var(--sc-6); z-index: 4; padding: 0.15rem var(--sc-2); border-radius: 5px; background: linear-gradient(180deg, #FFC44F, #F7A81A); color: var(--sc-accent-ink); font-size: 0.875rem; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 4px 10px -4px rgb(255 178 36 / 0.6); }
.plan h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.plan__for { margin-top: var(--sc-1); color: var(--sc-ink-soft); font-size: var(--t-small); }
.plan__p { display: flex; align-items: baseline; gap: 2px; margin: var(--sc-6) 0 var(--sc-1); }
.plan__p span { font-size: 1.5rem; font-weight: 540; color: var(--sc-ink-soft); }
.plan__p b { font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 520; font-size: 3.75rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan--lead .plan__p b { background: linear-gradient(180deg, #fff, #d9dadc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan__p em { margin-left: var(--sc-2); font-style: normal; color: var(--mute); }
.plan__save { min-height: 1.4rem; font-size: 0.875rem; color: var(--sc-accent); }
.plan .btn { margin-top: var(--sc-6); }
.incl { margin-top: var(--sc-7); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-4); }
.incl h3 { font-size: 1.1875rem; font-weight: 600; }
.incl ul { display: grid; gap: var(--sc-3); }
.incl li { position: relative; padding-left: var(--sc-6); color: var(--sc-ink-soft); }
.incl li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.05rem; height: 1.05rem; border-radius: 4px; background: rgb(255 178 36 / 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6 5.4-6' fill='none' stroke='%23FFB224' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; box-shadow: inset 0 0 0 1px rgb(255 178 36 / 0.25); }
.guar { margin-top: var(--sc-9); text-align: center; }
.guar__big { font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -0.024em; text-wrap: balance; }
.guar p:last-child { max-width: 56ch; margin: var(--sc-4) auto 0; color: var(--sc-ink-soft); }
.never { margin-top: var(--sc-8); padding: var(--sc-5) 0; border-block: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--t-small); }
.never b { color: var(--sc-ink); }
@media (min-width: 900px) {
  .pricing__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--sc-4); }
  .plan--lead { margin-top: calc(var(--sc-3) * -1); margin-bottom: var(--sc-3); }
  .incl { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .incl ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-6); }
}

/* --------------------------------------------------------------- founding */
.found { position: relative; padding-block: var(--sc-section); border-top: 1px solid var(--sc-hairline); overflow: hidden; }
.found::before { content: ""; position: absolute; left: -10%; top: 0; width: 40rem; height: 30rem; pointer-events: none; background: radial-gradient(closest-side, rgb(255 178 36 / 0.06), transparent 70%); }
.found__in { position: relative; display: grid; gap: var(--sc-5); }
.found__said { width: 3.75rem; height: 3.75rem; }
.said-a { fill: #F4F4F2; } .said-b { fill: #FFB224; }
.js .found__said polygon { transform: translateY(14px); opacity: 0; transition: transform 700ms var(--spring), opacity 400ms var(--out); }
.js .found__said .said-b { transition-delay: 160ms; }
.found__in.is-in .found__said polygon { transform: none; opacity: 1; }
@media (min-width: 900px) { .found__in { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sc-7); } .found .lede { max-width: 58ch; } }

/* -------------------------------------------------------------------- faq */
.faq { padding-block: var(--sc-section); }
.faq__grid { display: grid; gap: var(--sc-6); }
.faq__list details { border-top: 1px solid var(--paper-rule); }
.faq__list details:last-child { border-bottom: 1px solid var(--paper-rule); }
.faq__list summary { position: relative; padding: var(--sc-5) var(--sc-8) var(--sc-5) 0; list-style: none; cursor: pointer; font-size: 1.125rem; font-weight: 600; line-height: 1.35; transition: color 160ms var(--out); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 1.75rem; height: 1.75rem; margin-top: -0.875rem; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%230B0C0E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.15); transition: transform 360ms var(--spring); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .faq__list summary:hover { color: var(--amber-deep); } }
.faq__a { overflow: hidden; }
.faq__a p { padding-bottom: var(--sc-5); max-width: 62ch; color: var(--paper-soft); }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-9); } }

/* ------------------------------------------------------------------ audit */
.audit { position: relative; padding-block: var(--sc-section); overflow: hidden; }
.audit::before { content: ""; position: absolute; right: -10%; top: 10%; width: 56rem; height: 44rem; pointer-events: none; background: radial-gradient(closest-side, rgb(255 178 36 / 0.09), transparent 70%); }
.audit__grid { position: relative; display: grid; gap: var(--sc-7); }
.next { display: grid; margin-top: var(--sc-6); counter-reset: n; }
.next li { counter-increment: n; position: relative; padding: var(--sc-4) 0 var(--sc-4) var(--sc-8); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.next li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.next li::before { content: counter(n); position: absolute; left: 0; top: 0.85rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 7px; background: rgb(255 178 36 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 178 36 / 0.25); font-size: 0.875rem; font-weight: 600; color: var(--sc-accent); }
.q { padding: var(--sc-6) var(--sc-5); border-radius: var(--sc-r-lg); background: var(--surf); box-shadow: var(--lip), var(--e3), 0 40px 100px -50px rgb(255 178 36 / 0.3); }
.q > * { position: relative; z-index: 3; }
.q__bar { height: 4px; margin-bottom: var(--sc-6); border-radius: 2px; background: rgb(255 255 255 / 0.08); }
.q__bar i { position: relative; display: block; width: 25%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #b87610, #FFB224); transition: width 600ms var(--out); }
.q__bar i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 12px 2px rgb(255 178 36 / 0.7); }
.q__step { display: none; border: 0; min-width: 0; }
.q__step.is-on { display: block; animation: stepIn 520ms var(--out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } }
.q legend { margin-bottom: var(--sc-5); font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.012em; }
.q__opts { display: grid; gap: var(--sc-3); }
.q__opts label { position: relative; cursor: pointer; }
.q__opts input { position: absolute; opacity: 0; pointer-events: none; }
.q__opts span { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding: var(--sc-3) var(--sc-8) var(--sc-3) var(--sc-4); border-radius: 10px; background: linear-gradient(180deg, #111215, #0d0e10); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 0 rgb(255 255 255 / 0.03); font-weight: 520; transition: box-shadow 200ms var(--out), background 200ms var(--out), transform 160ms var(--out); }
.q__opts span::after { content: ""; position: absolute; right: var(--sc-4); top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.22); transition: box-shadow 200ms var(--out), background 200ms var(--out); }
@media (hover: hover) and (pointer: fine) { .q__opts label:hover span { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24), 0 6px 16px -10px rgb(0 0 0 / 0.8); } }
.q__opts label:active span { transform: scale(0.985); }
.q__opts input:checked + span { background: linear-gradient(180deg, rgb(255 178 36 / 0.12), rgb(255 178 36 / 0.05)); box-shadow: inset 0 0 0 1.5px var(--sc-accent), 0 10px 26px -14px rgb(255 178 36 / 0.6); }
.q__opts input:checked + span::after { background: var(--sc-accent); box-shadow: inset 0 0 0 4px #2a1e08; }
.q__opts input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.q__plan { margin: calc(var(--sc-2) * -1) 0 var(--sc-5); color: var(--sc-ink-soft); }
.q__plan b { color: var(--sc-accent); font-weight: 600; }
.q__fields { display: grid; gap: var(--sc-4); margin-bottom: var(--sc-5); }
.field { display: grid; gap: var(--sc-2); align-content: start; }
.field span { font-size: var(--t-small); font-weight: 600; }
.field input { width: 100%; padding: 0.85rem var(--sc-4); border: 0; border-radius: 10px; background: linear-gradient(180deg, #0d0e10, #111215); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 2px 4px rgb(0 0 0 / 0.35); color: var(--sc-ink); font-size: 1rem; transition: box-shadow 200ms var(--out); }
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sc-accent), 0 0 0 4px rgb(255 178 36 / 0.14); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #E5806F; }
.field small { font-size: 0.875rem; color: var(--mute); }
.q .fine { margin-top: var(--sc-3); }
.q__nav { display: flex; justify-content: space-between; align-items: center; min-height: 1.5rem; margin-top: var(--sc-5); }
.q__count { margin-left: auto; font-size: var(--t-small); color: var(--mute); font-variant-numeric: tabular-nums; }
.q__done h3 { font-family: var(--sc-font-display); font-stretch: 96%; font-weight: 540; font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.012em; }
.q__done p { margin-top: var(--sc-3); color: var(--sc-ink-soft); }
.q__done iframe { width: 100%; min-height: 36rem; margin-top: var(--sc-4); border: 0; border-radius: var(--sc-r-sm); background: var(--sc-ink); }
@media (min-width: 600px) { .q__opts, .q__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q { padding: var(--sc-7); } }
@media (min-width: 900px) { .audit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-9); align-items: start; } }

/* ----------------------------------------------------------- footer, dock */
.foot { padding: var(--sc-8) 0 calc(var(--sc-10) + env(safe-area-inset-bottom)); border-top: 1px solid var(--sc-hairline); }
.foot__in { display: grid; gap: var(--sc-5); }
.foot p { max-width: 72ch; font-size: 0.875rem; color: var(--mute); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--sc-5); }
.foot__nav a { font-size: 0.875rem; color: var(--sc-ink-soft); text-decoration: none; }
.foot__nav a:hover { color: var(--sc-ink); }
.fine a { color: inherit; text-underline-offset: 0.2em; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 900px) { .foot { padding-bottom: var(--sc-8); } .foot__in { grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-5) var(--sc-9); } .foot__nav { grid-column: 2; } }

/* ------------------------------------------------------ privacy, not found */
.legal { max-width: 46rem; padding-top: calc(var(--bar) + var(--sc-8)); padding-bottom: var(--sc-9); }
.legal h2 { margin-top: var(--sc-7); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.006em; }
.legal p { margin-top: var(--sc-3); color: var(--sc-ink-soft); max-width: 62ch; }
.legal .lede { margin-top: var(--sc-4); color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-ink-soft)); }
.legal a { color: var(--sc-ink); text-underline-offset: 0.2em; }
.lost { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: var(--sc-6); padding-block: var(--sc-9); }
.lost .brand { margin-bottom: var(--sc-4); }
.lost .lede { margin-top: calc(var(--sc-3) * -1); }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--sc-3) var(--sc-4) calc(var(--sc-3) + env(safe-area-inset-bottom)); background: rgb(11 12 14 / 0.82); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 -1px 0 rgb(255 255 255 / 0.07), 0 -20px 40px -20px hsl(var(--sh) / 0.9); transform: translateY(110%); transition: transform 500ms var(--out); }
.dock.is-on { transform: none; }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .mq { animation: none !important; }
  .js [data-rise], .js [data-in], .js [data-hero] .hero__copy > *, .js [data-hero] .vsl, .js [data-hero] .terms { opacity: 1 !important; translate: none !important; transform: none !important; filter: none !important; }
  [data-tilt], .vsl__sq { transform: none !important; }
}
@media (max-width: 359px) { .plan .btn { font-size: 0.9375rem; padding-inline: var(--sc-4); gap: var(--sc-2); } }

/* QA pass: the add-on tag sits beside the heading and wraps cleanly under it */
.fcard--rank .h3 { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sc-2); row-gap: var(--sc-1); }
.fcard--rank .h3 .tag { margin: 0; }