/* Surf marketing site, round 6. Owner: gui. One token set; every page uses it.
   Motion lives in css/motion.css (owner: motion). */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --bg: #ffffff;
  --ink: #1a1a1a;
  --ink-2: #3d3d3d;
  --muted: #6b6b6b;
  --line: #ebebeb;
  --line-2: #dedede;
  --wash: #f5f5f3;          /* active nav pill, quiet surfaces */
  --cream: #faf6ee;         /* Fieldnotes background */
  --night: #17181b;         /* featured dark card */
  --surf-blue: #2c63f0;     /* Surf's glow, used sparingly */
  --eye: #8fc3ff;
  /* pastels (card tints) */
  --mint: #eaf5e5;
  --peach: #fcede2;
  --lilac: #efeaf9;
  --sky: #e8f1fb;
  --butter: #fbf3d5;
  --rose: #fcebf0;
  --sand: #f3f1ec;
  /* confetti */
  --c-green: #5ee06a;
  --c-orange: #ff8a3d;
  --c-yellow: #ffd23f;
  --c-pink: #ff9ec4;
  --c-blue: #6aa8ff;
  /* type */
  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);     /* h1 40 -> 64 */
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3rem);            /* 32 -> 48 */
  --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);    /* 18 -> 21 */
  --fs-lede: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);    /* 17 -> 19 */
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --lh-display: 1.06;
  --lh-head: 1.15;
  --lh-body: 1.6;
  --track-display: -0.035em;
  --track-h2: -0.03em;
  --track-h3: -0.015em;
  --track-eyebrow: 0.08em;
  --measure: 62ch;
  /* space: 8px base */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1200px;
  --max-narrow: 760px;
  --section-s: clamp(4rem, 3rem + 4vw, 6rem);
  --section-m: clamp(4rem, 3rem + 4vw, 6.5rem);
  --section-l: clamp(6rem, 4rem + 8vw, 11rem);
  --header-h: 72px;
  /* shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow-1: 0 1px 2px rgba(26,26,26,.05), 0 6px 18px -8px rgba(26,26,26,.12);
  --shadow-2: 0 2px 4px rgba(26,26,26,.04), 0 24px 48px -20px rgba(26,26,26,.22);
  --ease: cubic-bezier(.2,.65,.3,1);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--surf-blue);
  --tie-red: #d9433d; --tie-dark: #a52a2a;
  --m-ease:cubic-bezier(.2,.7,.2,1);--m-spring:cubic-bezier(.34,1.56,.64,1);--m-green:#5ee06a;
  --surface-1: #cfe1ff;
  --surface-2: #fff;
  --surface-3: #000;
  --surface-4: rgba(255,255,255,.92);
  --surface-5: #efefed;
  --surface-6: rgba(0,0,0,.2);
  --surface-7: rgba(120,180,255,.7);
  --surface-8: #eaf2ff;
  --surface-9: #f4f8ff;
  --surface-10: #eef7ea;
  --surface-11: rgba(44,99,240,.18);
  --surface-12: rgba(94,224,106,.2);
  --surface-13: #cfe6c6;
  --surface-14: #a3a3a3;
  --surface-15: rgba(94,224,106,.25);
  --surface-16: #f6cdb2;
  --surface-17: #c8e5bb;
  --surface-18: #d9cdf3;
  --surface-19: #bfdaf4;
  --surface-20: #f4e08f;
  --surface-21: #f3c4d4;
  --surface-22: #fbfbfa;
  --surface-23: #dfe8fd;
  --surface-24: rgba(26,26,26,.35);
  --surface-25: #c9c9c9;
  --surface-26: #c4352b;
  --surface-27: #e8f0ff;
  --surface-28: rgba(44,99,240,.45);
  --surface-29: rgba(143,195,255,.8);
  --surface-30: #fcfcfb;
  --surface-31: rgba(250,246,238,.92);
  --surface-32: #ece6d9;
  --surface-33: #23252b;
  --surface-34: #c6c6c6;
  --surface-35: #a8a8a8;
  --surface-36: #555;
  --surface-37: #ddd5c4;
  --surface-38: #e6dfcf;
  --surface-39: #efe2a8;
  --surface-40: rgba(0,0,0,.07);
  --surface-41: rgba(0,0,0,.03);
  --surface-42: #7cc4ff;
  --surface-43: #4aa8ff;
  --surface-44: rgba(74,168,255,.7);
  --surface-45: #eef4ea;
  --surface-46: #f6f6f3;
  --surface-47: #ececec;
  --surface-48: rgba(0,0,0,.04);
  --surface-49: #dfe9d8;
  --surface-50: #4cbf5c;
  --surface-51: rgba(255,255,255,.45);
  --surface-52: #eef1ea;
  --surface-53: #f8faf6;
  --surface-54: #ccc;
  --surface-55: #333;
  --surface-56: rgba(0,0,0,.08);
  --surface-57: #9a9a9a;
  --surface-58: rgba(94,224,106,.95);
  --surface-59: rgba(255,255,255,.9);
  --surface-60: #f1f1ee;
  --surface-61: #888;
  --surface-62: rgba(30,60,120,.18);

}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--track-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--track-h3); }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
[hidden] { display: none !important; }
::selection { background: var(--surface-1); }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--s2); top: -60px; z-index: 100; background: var(--ink); color: var(--surface-2); padding: .6rem 1rem; border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-small); }
.skip:focus { top: var(--s2); }
.noscript { text-align: center; padding: var(--s3); color: var(--muted); }

/* ---------- 3. Layout primitives ---------- */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: calc(var(--max-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section-m); }
.center { text-align: center; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--s6); }
.section-head .eyebrow { margin-bottom: var(--s2); }
.section-sub { color: var(--muted); font-size: var(--fs-lede); line-height: 1.5; margin-top: var(--s2); max-width: 56ch; margin-inline: auto; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.micro { font-size: var(--fs-micro); color: var(--muted); line-height: 1.5; }

/* ---------- 4. Buttons & links ---------- */
.button { --bh: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--bh); padding: 0 1.5rem; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: var(--surface-2); font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: transform .18s var(--ease), background-color .2s, color .2s; }
.button:hover { background: var(--surface-3); }
.button:active { transform: scale(.97); }
.button:focus-visible { border-radius: var(--r-pill); }
.button.small { --bh: 40px; padding: 0 1.125rem; font-size: .9375rem; }
.button.outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.button.outline:hover { border-color: var(--ink); background: var(--wash); }
.button.light { background: var(--surface-2); color: var(--ink); border-color: var(--surface-2); }
.text-link { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .25rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: var(--line-2); transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: var(--ink); }

/* ---------- 5. Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-4); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.04em; text-decoration: none; color: var(--ink); justify-self: start; }
.brand-dot { color: var(--surf-blue); }
.eyes { display: inline-flex; gap: .2em; align-items: center; }
.eyes i { display: block; width: .2em; height: .42em; border-radius: 50%; background: currentColor; transform-origin: 50% 60%; }
.wordmark .eyes { font-size: 1.5rem; }
#navigation { justify-self: center; }
.nav-links { display: flex; gap: .25rem; list-style: none; }
.nav-links a { display: block; padding: .5rem 1rem; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink-2); transition: background-color .2s, color .2s; }
.nav-links a:hover { color: var(--ink); background: var(--wash); }
.nav-links a[aria-current="page"] { background: var(--surface-5); color: var(--ink); }
.nav-mobile-actions { display: none; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.login { background: none; border: 0; padding: .5rem .875rem; font-size: .9375rem; font-weight: 500; border-radius: var(--r-pill); }
.login:hover { background: var(--wash); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r-pill); position: relative; }
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease), top .25s var(--ease); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .menu-toggle { display: block; }
  .header-actions .login { display: none; }
  #navigation { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: var(--s2) var(--gutter) var(--s4); display: none; box-shadow: 0 30px 40px -30px var(--surface-6); }
  #navigation.open { display: block; }
  .nav-links { flex-direction: column; gap: .25rem; }
  .nav-links a { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; padding: .75rem 1rem; }
  .nav-mobile-actions { display: flex; gap: .75rem; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
  .nav-mobile-actions .button { flex: 1; }
}
@media (max-width: 420px) { .header-actions .button.small { display: none; } }

/* ---------- 6. Shared decorative pieces ---------- */
.confetti { position: absolute; width: 12px; height: 12px; border-radius: 2px; display: block; pointer-events: none; }
.confetti.green { background: var(--c-green); }
.confetti.orange { background: var(--c-orange); }
.confetti.yellow { background: var(--c-yellow); }
.confetti.pink { background: var(--c-pink); }
.confetti.blue { background: var(--c-blue); }
.doodle, .icon, .fdoodle, .privacy-doodle, .task-icon { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* Surf avatar: master render + CSS eyes on the visor */
.surf-avatar { position: relative; display: inline-block; width: 120px; aspect-ratio: 400 / 381; }
.surf-avatar > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.surf-avatar .eyes { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); gap: 18%; width: 46%; justify-content: center; }
.surf-avatar .eyes i { width: 22%; aspect-ratio: 1 / .62; height: auto; background: none; border: solid var(--eye); border-width: max(2px, .055em) max(2px, .055em) 0; border-color: var(--eye); border-radius: 60% 60% 0 0 / 100% 100% 0 0; box-shadow: 0 -2px 8px -1px var(--surface-7); font-size: inherit; }
.surf-avatar { font-size: 40px; }

/* ---------- 7. Home: hero ---------- */
.hero { position: relative; min-height: min(880px, calc(100svh - var(--header-h))); display: grid; place-items: center; padding: var(--s7) var(--gutter) var(--s8); text-align: center; isolation: isolate; }
.hero-copy { position: relative; z-index: 2; max-width: 680px; display: grid; justify-items: center; gap: var(--s3); }
.hero-eyes { font-size: 2.4rem; color: var(--ink); margin-bottom: var(--s1); }
.hero h1 { max-width: 13ch; }
.hero .lede { margin-inline: auto; }
.hero-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s1); }
.float-card { position: absolute; z-index: 1; margin: 0; width: clamp(150px, 13vw, 196px); --dx: 0px; --dy: 0px; translate: var(--dx) var(--dy); }
.float-card .tile-media { aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-1); rotate: var(--tilt, 0deg); }
.float-card .tile-media img { width: 100%; height: 100%; object-fit: cover; }
.float-card figcaption { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: .9375rem; letter-spacing: -0.01em; color: var(--ink-2); margin-top: .65rem; text-align: left; padding-left: .25rem; }
.float-card .doodle { position: absolute; width: 64px; height: 64px; }
.float-card .confetti { width: 12px; height: 12px; }
.float-one { left: max(var(--gutter), 5vw); top: 9%; --tilt: -5deg; }
.float-one .tile-media img { object-position: 50% 30%; }
.float-one .doodle { right: -34px; top: -26px; rotate: 10deg; }
.float-one .confetti { left: -22px; bottom: 30%; }
.float-two { right: max(var(--gutter), 6vw); top: 7%; --tilt: 4deg; }
.float-two .tile-media { background: var(--mint); }
.float-two .tile-media img { object-fit: contain; scale: 1.15; }
.float-two .doodle { left: -40px; bottom: 34px; rotate: -8deg; }
.float-two .confetti { right: -18px; top: -14px; }
.float-three { left: max(var(--gutter), 12vw); bottom: 7%; --tilt: 3deg; width: clamp(130px, 11vw, 168px); }
.float-three .tile-media img { object-position: 50% 15%; }
.float-three .doodle { right: -44px; bottom: 40px; rotate: 6deg; width: 56px; height: 56px; }
.float-three .confetti { left: 20%; top: -24px; }
.float-four { right: max(var(--gutter), 13vw); bottom: 9%; --tilt: -4deg; width: clamp(130px, 11vw, 168px); }
.float-four .tile-media { background: var(--peach); }
.float-four .tile-media img { object-fit: contain; scale: 1.1; }
.float-four .doodle { left: -36px; top: -30px; width: 54px; height: 54px; }
.float-four .confetti { right: -20px; bottom: 28%; }
.scroll-note { position: absolute; z-index: 2; left: 50%; bottom: var(--s4); transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; text-decoration: none; color: var(--muted); white-space: nowrap; min-height: 44px; min-width: 44px; justify-content: center; padding: .25rem .75rem; }
.scroll-note svg { width: 12px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1099px) {
  .float-one { left: 2vw; top: 4%; } .float-two { right: 2vw; top: 4%; }
  .float-three { left: 3vw; bottom: 6%; } .float-four { right: 3vw; bottom: 6%; }
}
@media (max-width: 899px) {
  .hero { min-height: 0; display: flex; flex-direction: column; padding: var(--s6) var(--gutter) var(--s5); }
  .hero-copy { order: 0; }
  .float-card { position: relative; inset: auto; width: 100%; translate: none; }
  .hero-tiles-mobile { display: grid; }
  .hero { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); row-gap: var(--s4); justify-items: stretch; align-items: start; }
  .hero-copy { grid-column: 1 / -1; padding-bottom: var(--s4); }
  .float-three, .float-four { display: none; }
  .float-one { margin-top: var(--s2); }
  .float-two { margin-top: var(--s5); }
  .float-one .doodle { right: -10px; top: -30px; width: 52px; height: 52px; }
  .float-two .doodle { left: -14px; bottom: -6px; width: 52px; height: 52px; }
  .scroll-note { display: none; }
  .float-card .tile-media { max-width: 240px; }
  .float-two { justify-self: end; }
  .float-two .tile-media, .float-two figcaption { margin-left: auto; }
}

/* ---------- 8. Home: banner ---------- */
.banner-section { padding: var(--s6) 0 var(--section-s); }
.banner-wrap { position: relative; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.banner { --banner-scale: 1; position: relative; overflow: hidden; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--surface-8) 0%, var(--surface-9) 45%, var(--surface-10) 100%); min-height: clamp(480px, 46vw, 640px); padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; transform: scale(var(--banner-scale)); transform-origin: 50% 0; }
.banner-top, .banner-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-2); position: relative; z-index: 2; }
.banner-bottom a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.banner h2 { grid-column: 1; align-self: center; font-size: clamp(3rem, 1.6rem + 5.6vw, 6.25rem); line-height: .96; letter-spacing: -0.045em; position: relative; z-index: 2; }
.banner h2 .line { display: block; }
.banner-art { grid-column: 2; grid-row: 2; position: relative; display: grid; place-items: center; }
.banner-surf { width: min(78%, 380px); filter: drop-shadow(0 30px 40px var(--surface-11)); }
.banner-script { position: absolute; width: min(64%, 300px); left: -18%; bottom: 2%; rotate: -6deg; z-index: 2; }
.scene-card { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .6rem; background: var(--surface-2); padding: .7rem 1rem; border-radius: var(--r-sm); box-shadow: var(--shadow-2); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.scene-card .doodle { position: static; width: 28px; height: 28px; stroke-width: 3.2; }
.scene-one { right: 2%; bottom: 22%; rotate: -4deg; }
.scene-two { right: 8%; top: 4%; rotate: 5deg; }
.banner-wrap > .confetti { z-index: 4; }
.banner-wrap .c1 { right: 26%; top: -28px; } .banner-wrap .c2 { left: calc(var(--gutter) - 22px); top: 46%; }
.banner-wrap .c3 { right: calc(var(--gutter) - 18px); bottom: 18%; width: 10px; height: 10px; } .banner-wrap .c4 { left: 40%; bottom: -24px; width: 10px; height: 10px; }
@media (max-width: 899px) {
  .banner { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; min-height: 0; gap: var(--s3); }
  .banner h2 { grid-column: 1; grid-row: 2; padding-top: var(--s5); }
  .banner-art { grid-column: 1; grid-row: 3; min-height: 300px; }
  .banner-script { left: 0; bottom: -2%; width: 52%; }
  .banner-bottom { grid-row: 4; }
  .banner-top span:last-child { display: none; }
}

/* ---------- 9. Home: meet ---------- */
.meet { padding-top: var(--section-l); }
.meet-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.meet-intro { display: grid; justify-items: start; gap: var(--s2); }
.meet-intro .section-sub { margin: 0; }
.meet-mascot { position: relative; width: 150px; margin-bottom: var(--s1); }
.meet-mascot img { width: 100%; }
.meet-mascot .hand { position: absolute; right: -54px; top: 4px; width: 62px; height: 62px; transform-origin: 30% 90%; }
.working { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem; border: var(--border); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; margin-top: var(--s1); }
.working i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 4px var(--surface-12); }
.feed-card { background: var(--surface-2); border: var(--border); border-radius: var(--r-lg); padding: var(--s2) var(--s3) var(--s3); box-shadow: var(--shadow-1); }
.activity-feed { list-style: none; }
.activity-feed li { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: var(--border); }
.activity-feed li:last-child { border-bottom: 0; }
.feed-icon { width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center; }
.feed-icon .doodle { width: 28px; height: 28px; stroke-width: 3.4; }
.feed-icon.mint { background: var(--mint); } .feed-icon.peach { background: var(--peach); } .feed-icon.lilac { background: var(--lilac); } .feed-icon.sky { background: var(--sky); }
.feed-text { display: grid; gap: .1rem; min-width: 0; }
.feed-text b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.feed-text small { font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-feed time { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-card .micro { padding-top: var(--s2); border-top: var(--border); }
@media (max-width: 899px) {
  .meet-grid { grid-template-columns: 1fr; }
  .meet-intro { justify-items: center; text-align: center; }
  .feed-card { padding: var(--s1) var(--s2) var(--s2); }
  .activity-feed li { grid-template-columns: 40px 1fr; }
  .activity-feed time { grid-column: 2; margin-top: -.6rem; }
  .feed-icon { width: 40px; height: 40px; }
  .feed-icon .doodle { width: 24px; height: 24px; }
  .feed-text small { white-space: normal; }
}

/* ---------- 10. Home: trust ---------- */
.trust { padding-top: var(--section-m); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.trust-grid article { border-radius: var(--r-lg); padding: var(--s3) var(--s3) var(--s4); transition: background-color .5s var(--ease); }
.tone-rose { background: var(--rose); } .tone-sand { background: var(--sand); } .tone-sky { background: var(--sky); }
.tone-mint { background: var(--mint); } .tone-peach { background: var(--peach); } .tone-lilac { background: var(--lilac); } .tone-butter { background: var(--butter); }
.trust-art { position: relative; height: 200px; margin-bottom: var(--s4); display: grid; place-items: center; }
.trust-art img { height: 100%; width: auto; object-fit: contain; }
.trust-art .doodle { position: absolute; right: 12%; top: 6%; width: 56px; height: 56px; rotate: 8deg; }
.trust-grid h3 { margin-bottom: var(--s1); }
.trust-grid p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 899px) {
  .trust-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .trust-art { height: 170px; }
}

/* ---------- 11. Home: privacy ---------- */
.privacy-layout { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.privacy-intro { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s3); }
.privacy-intro h2 { max-width: 14ch; }
.privacy-art { position: relative; width: 220px; height: 190px; margin-top: var(--s3); }
.privacy-doodle { position: absolute; left: 0; top: 0; width: 120px; height: 120px; rotate: -8deg; }
.privacy-avatar { position: absolute; right: 0; bottom: 0; width: 120px; font-size: 40px; }
.privacy-items { display: grid; }
.privacy-items article { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: var(--border); }
.privacy-items article:first-child { padding-top: 0; }
.p-icon { width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--wash); display: grid; place-items: center; }
.p-icon .icon { width: 34px; height: 34px; stroke-width: 3.6; }
.privacy-items h3 { margin-bottom: var(--s1); }
.privacy-items p { color: var(--ink-2); }
.privacy-items .text-link { margin-top: var(--s4); justify-self: start; }
@media (max-width: 899px) {
  .privacy-layout { grid-template-columns: 1fr; }
  .privacy-intro { position: static; }
  .privacy-art { display: none; }
}

/* ---------- 12. Home: handles + demo ---------- */
.handles .section-head { margin-bottom: var(--s4); }
.tabs { display: flex; justify-content: center; gap: .25rem; flex-wrap: wrap; position: relative; max-width: max-content; margin: 0 auto; padding: .3rem; border-radius: var(--r-pill); background: var(--wash); }
.tabs [role="tab"] { position: relative; z-index: 1; border: 0; background: none; padding: .55rem 1.1rem; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: color .2s, background-color .2s; }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--surface-2); }
.panels { margin: var(--s3) auto var(--s6); }
.prompt-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.prompt-chips span { padding: .6rem 1.1rem; border: var(--border); border-radius: var(--r-pill); font-size: .9375rem; color: var(--ink-2); background: var(--surface-2); }
.demo { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.demo-copy { display: grid; gap: var(--s3); align-content: start; }
.demo-copy h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: var(--track-h2); }
.demo-copy > p { color: var(--ink-2); max-width: 40ch; }
.task-list { display: grid; gap: .5rem; }
.task-list button { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; align-items: center; text-align: left; padding: .9rem 1.1rem; border-radius: var(--r-sm); border: var(--border); background: var(--surface-2); font-size: .9375rem; font-weight: 500; transition: border-color .2s, background-color .2s, transform .18s var(--ease); }
.task-list button:hover { border-color: var(--line-2); }
.task-list button:active { transform: scale(.985); }
.task-list button[aria-pressed="true"] { background: var(--mint); border-color: var(--surface-13); }
.task-icon { width: 26px; height: 26px; stroke-width: 3.6; }
.demo-controls { display: flex; gap: var(--s3); }
.demo-controls .text-link { font-size: var(--fs-small); }
.phone-stage { position: relative; display: grid; place-items: center; padding: var(--s5) var(--s3); border-radius: var(--r-xl); background: var(--sand); min-height: 640px; }
.phone-stage > .confetti.green { left: -6px; top: 18%; } .phone-stage > .confetti.orange { right: 10%; bottom: -6px; }
.stage-loop { position: absolute; width: 120px; height: 60px; left: 6%; bottom: 8%; rotate: -10deg; }
.phone { position: relative; width: 300px; min-height: 560px; border-radius: 44px; border: 9px solid var(--ink); background: var(--surface-2); padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-2); overflow: hidden; }
.phone-status { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; font-weight: 600; padding: 0 6px; }
.phone-island { width: 84px; height: 24px; border-radius: var(--r-pill); background: var(--ink); }
.phone-batt { width: 22px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3px; position: relative; }
.phone-batt::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: var(--ink); border-radius: 1px; }
.phone-heading { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 6px 2px; }
.phone-heading img { width: 34px; height: auto; }
.phone-heading b { display: block; font-family: var(--font-display); font-size: 1rem; }
.phone-heading small { color: var(--muted); font-size: .75rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); }
.phone-request { align-self: flex-end; max-width: 88%; background: var(--ink); color: var(--surface-2); padding: .7rem .95rem; border-radius: 18px 18px 4px 18px; font-size: .875rem; line-height: 1.4; }
.steps { list-style: none; display: grid; gap: .55rem; padding: .25rem .25rem; }
.steps li { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--surface-14); transition: color .3s; }
.steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background-color .3s, border-color .3s; }
.steps li.current { color: var(--ink); font-weight: 600; }
.steps li.current::before { border-color: var(--c-green); box-shadow: 0 0 0 3px var(--surface-15); }
.steps li.complete { color: var(--ink-2); }
.steps li.complete::before { background: var(--c-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--c-green); }
.result-card { margin-top: auto; position: relative; background: var(--mint); border-radius: 20px; padding: 1rem 1.1rem 1.1rem; display: grid; gap: .35rem; }
.result-card .eyebrow { font-size: .6875rem; }
.result-card h4 { font-size: 1.125rem; }
.result-card p { font-size: .8125rem; color: var(--ink-2); }
.result-symbol { position: absolute; right: 1rem; top: .8rem; font-size: 1.1rem; }
.result-card .approval { margin-top: .5rem; border: 0; background: var(--ink); color: var(--surface-2); border-radius: var(--r-pill); padding: .7rem 1rem; font-weight: 600; font-size: .875rem; }
@media (max-width: 899px) {
  .demo { grid-template-columns: 1fr; }
  .phone-stage { min-height: 0; padding: var(--s4) var(--s2); }
  .tabs { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs [role="tab"] { flex: none; }
}
@media (max-width: 380px) { .phone { width: 100%; } }

/* ---------- 13. Home: skills fan ---------- */
.skills { padding-top: var(--section-m); }
.fan { position: relative; display: flex; justify-content: center; height: 330px; margin: 0 auto var(--s5); max-width: 980px; }
.fan article { position: relative; flex: none; width: 168px; height: 220px; margin: 0 -12px; padding: var(--s3) var(--s2) var(--s2); border-radius: var(--r-md); background: var(--surface-2); border: var(--border); box-shadow: var(--shadow-1); text-align: left; transform: translateY(var(--lift)) rotate(var(--angle)); transform-origin: 50% 120%; display: flex; flex-direction: column; transition: translate .3s var(--ease), box-shadow .3s; }
.fan article:hover { translate: 0 -14px; box-shadow: var(--shadow-2); z-index: 2; }
.fan .blob { position: relative; display: flex; gap: 7px; justify-content: center; align-items: center; width: 54px; height: 50px; border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%; margin-bottom: auto; }
.fan .tone-peach .blob { background: var(--surface-16); } .fan .tone-mint .blob { background: var(--surface-17); } .fan .tone-lilac .blob { background: var(--surface-18); }
.fan .tone-sky .blob { background: var(--surface-19); } .fan .tone-butter .blob { background: var(--surface-20); } .fan .tone-rose .blob { background: var(--surface-21); }
.fan article.tone-peach, .fan article.tone-mint, .fan article.tone-lilac, .fan article.tone-sky, .fan article.tone-butter, .fan article.tone-rose { background: var(--surface-2); }
.fan .blob i { width: 6px; height: 11px; border-radius: 50%; background: var(--ink); }
.fan small { font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.fan h3 { font-size: 1.0625rem; margin: .25rem 0 .2rem; }
.fan p { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
.skills .section-head { margin-bottom: 0; }
.skills .section-head .button { margin-top: var(--s4); }
@media (max-width: 899px) {
  .fan { height: auto; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: var(--s2); padding: var(--s2) var(--gutter) var(--s3); margin-inline: calc(-1 * var(--gutter)); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fan::-webkit-scrollbar { display: none; }
  .fan article { margin: 0; transform: none; scroll-snap-align: center; }
}

/* ---------- 14. Home: built different ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.feature-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.count { font-family: var(--font-display); font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.bar { position: relative; flex: 1; height: 1px; background: var(--line-2); }
.bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--progress, 1)); }
.feature-art { position: relative; height: 96px; margin-bottom: var(--s3); }
.fdoodle { width: 88px; height: 88px; stroke-width: 2.4; }
.feature-art .confetti { left: 110px; top: 14px; }
.feature-grid h3 { margin-bottom: var(--s1); }
.feature-grid p { color: var(--ink-2); font-size: .9375rem; max-width: 34ch; }
@media (max-width: 899px) { .feature-grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- 15. Home: apps ---------- */
.apps .section-head { margin-bottom: var(--s5); }
.apps h2 { max-width: 16ch; margin-inline: auto; }
.app-orbit { display: grid; gap: var(--s2); justify-items: center; margin-bottom: var(--s4); overflow-x: clip; }
.pill-row { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
.pill-row:nth-child(2) { padding-left: calc(var(--gutter) + 4rem); }
.pill-row span { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.3rem; border: var(--border); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; background: var(--surface-2); white-space: nowrap; }
.pill-row span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c-green); }
.pill-row:nth-child(2) span::before { background: var(--c-orange); }
.pill-row:nth-child(3) span::before { background: var(--c-blue); }

/* ---------- 16. Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s3) var(--s3); border: var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.plan.featured { background: var(--mint); border-color: var(--surface-13); }
.plan.teams { background: var(--surface-22); }
.plan-art { height: 96px; margin-bottom: var(--s2); display: flex; align-items: flex-end; }
.plan-avatar { width: 84px; font-size: 28px; }
.acc { position: absolute; pointer-events: none; }
.acc-headphones { width: 118%; left: -9%; top: 6%; max-width: none; }
.acc-cap { width: 86%; left: 4%; top: -34%; rotate: -10deg; max-width: none; }
.plan h3 { font-size: 1.125rem; }
.price { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; letter-spacing: -0.035em; line-height: 1.1; }
.price span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: .2rem; }
.price.coming { font-size: 2rem; }
.india-price, .plan-desc { color: var(--muted); font-size: var(--fs-small); }
.plan ul { list-style: none; display: grid; gap: .6rem; margin: var(--s2) 0 var(--s4); font-size: .9375rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; }
.plan li::before { content: ""; width: 14px; height: 8px; margin-top: .45em; border: solid var(--ink); border-width: 0 0 2px 2px; rotate: -45deg; translate: 2px -2px; }
.plan .button, .coming-pill { margin-top: auto; width: 100%; }
.plan-tag { position: absolute; top: var(--s3); right: var(--s3); font-size: var(--fs-micro); font-weight: 600; padding: .25rem .65rem; border-radius: var(--r-pill); background: var(--surface-2); }
.coming-pill { display: grid; place-items: center; min-height: 48px; border: 1px dashed var(--line-2); border-radius: var(--r-pill); color: var(--muted); font-weight: 500; }
@media (max-width: 899px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ---------- 17. FAQ / accordion (shared) ---------- */
.faq h2 { text-align: center; margin-bottom: var(--s5); }
.faq-list { border-top: var(--border); }
.faq-list details { border-bottom: var(--border); }
.faq-list summary { list-style: none; display: grid; grid-template-columns: 2.5rem 1fr 24px; gap: var(--s2); align-items: center; padding: 1.4rem 0; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-num { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.faq-q { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); letter-spacing: -0.015em; line-height: 1.35; }
.faq-icon { position: relative; width: 24px; height: 24px; border-radius: 50%; transition: transform .3s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 5px; right: 5px; top: 11px; height: 2px; border-radius: 2px; background: var(--ink); }
.faq-icon::after { transform: rotate(90deg); }
details[open] > summary .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 2.5rem 1.5rem calc(2.5rem + var(--s2)); color: var(--ink-2); }
.faq-a p + p { margin-top: var(--s2); }
.faq-list.plain summary { grid-template-columns: 1fr 24px; }
.faq-list.plain .faq-a { padding-left: 0; }
.faq-more { text-align: center; margin-top: var(--s4); color: var(--muted); }
@media (max-width: 599px) { .faq-a { padding: 0 0 1.25rem; } .faq-list summary { grid-template-columns: 2rem 1fr 24px; gap: .75rem; } }

/* ---------- 18. Closing CTA ---------- */
.closing { padding-block: var(--section-l); }
.closing-inner { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--s2); }
.closing-mascot { width: 128px; margin-bottom: var(--s2); }
.closing .button { margin-top: var(--s2); }
.closing .confetti.k1 { left: 18%; top: 30%; } .closing .confetti.k2 { right: 20%; top: 16%; }
.closing .confetti.k3 { left: 28%; bottom: 6%; width: 10px; height: 10px; } .closing .confetti.k4 { right: 26%; bottom: 18%; width: 10px; height: 10px; }

/* ---------- 19. Footer ---------- */
.site-footer { border-top: var(--border); padding: var(--s6) 0 0; overflow: hidden; }
.footer-grid { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 4fr 7fr; gap: var(--s5); }
.footer-brand { display: grid; gap: var(--s2); align-content: start; }
.footer-brand p { color: var(--muted); font-size: var(--fs-small); max-width: 32ch; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.footer-h { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.footer-nav ul { list-style: none; display: grid; gap: .5rem; }
.footer-nav a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.footer-nav a { min-width:44px; }
p.center { margin-inline:auto; }
.footer-base { max-width: calc(var(--max) + 2 * var(--gutter)); margin: var(--s6) auto 0; padding: var(--s3) var(--gutter); display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); border-top: var(--border); }
.footer-mark { font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 25vw, 22rem); letter-spacing: -0.06em; line-height: .72; text-align: center; color: var(--wash); margin-top: var(--s2); user-select: none; translate: 0 8%; }
.footer-mark .brand-dot { color: var(--surface-23); }
@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 499px) { .footer-nav { grid-template-columns: 1fr 1fr; } }

/* ---------- 20. Dialog ---------- */
dialog#access-dialog { border: 0; border-radius: var(--r-lg); padding: var(--s5) var(--s4) var(--s4); width: min(420px, calc(100% - 2 * var(--gutter))); text-align: center; box-shadow: var(--shadow-2); color: var(--ink); }
dialog#access-dialog::backdrop { background: var(--surface-24); }
#access-dialog .dialog-avatar { width: 88px; font-size: 28px; margin: 0 auto var(--s2); }
#access-dialog h2 { font-size: 1.625rem; margin-bottom: var(--s2); }
#access-dialog p { color: var(--ink-2); margin-bottom: var(--s3); }
.dialog-close { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.dialog-close:hover { background: var(--wash); }

/* ---------- 21. Inner-page hero (shared) ---------- */
.page-hero { position: relative; padding: var(--s7) 0 var(--s6); text-align: center; isolation: isolate; }
.page-hero h1 { max-width: 16ch; margin-inline: auto; }
.page-hero .lede { margin: var(--s3) auto 0; }
.page-hero .hero-actions { margin-top: var(--s4); }
.page-hero .eyebrow { margin-bottom: var(--s2); }
.page-hero .confetti { z-index: -1; }
.page-hero .doodle { position: absolute; z-index: -1; }
.hero-note { display: block; margin-top: var(--s2); }

/* split block: text + art */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split.reverse > :first-child { order: 2; }
.split h2 { margin-bottom: var(--s3); }
.split p + p { margin-top: var(--s2); }
.split p { color: var(--ink-2); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }

/* card trio (benefits / principles) */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.trio article { border-radius: var(--r-lg); padding: var(--s4) var(--s3); }
.trio .t-icon { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--surface-2); display: grid; place-items: center; margin-bottom: var(--s4); }
.trio .t-icon .doodle { width: 38px; height: 38px; stroke-width: 3.4; }
.trio h3 { margin-bottom: var(--s1); }
.trio p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 899px) { .trio { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* numbered steps */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); counter-reset: none; list-style: none; }
.steps-row li { border-top: 1px solid var(--ink); padding-top: var(--s3); }
.steps-row .n { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.steps-row h3 { margin-bottom: var(--s1); }
.steps-row p { color: var(--ink-2); font-size: .9375rem; }
.steps-row.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 899px) { .steps-row, .steps-row.five { grid-template-columns: 1fr; gap: var(--s4); } }

/* CTA band */
.cta-band { position: relative; border-radius: var(--r-xl); background: var(--ink); color: var(--surface-2); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; overflow: hidden; }
.cta-band h2 { color: var(--surface-2); max-width: 18ch; }
.cta-band p { color: var(--surface-25); margin-top: var(--s2); max-width: 46ch; }
.cta-band .confetti { opacity: .95; }
@media (max-width: 899px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- 22. Forms (shared) ---------- */
.form { display: grid; gap: var(--s3); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .hint { font-size: var(--fs-micro); color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: .75rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface-11); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--surface-26); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: .75rem; font-size: var(--fs-small); color: var(--ink-2); align-items: start; }
.check input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--ink); }
[data-form-status] { font-size: var(--fs-small); color: var(--ink-2); min-height: 1.5em; }
[data-form-status]:not(:empty) { padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--butter); }
.form-card { border: var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface-2); box-shadow: var(--shadow-1); }
.form-note { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 599px) { .form .row { grid-template-columns: 1fr; } }

/* ---------- 23. Business ---------- */
.business .page-hero { padding-bottom: var(--s7); }
.biz-hero-art { position: relative; max-width: 880px; margin: var(--s6) auto 0; height: 240px; }
.biz-tile { position: absolute; display: grid; gap: .4rem; justify-items: center; background: var(--surface-2); border: var(--border); border-radius: var(--r-md); padding: var(--s2) var(--s3); box-shadow: var(--shadow-1); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.biz-tile .doodle { width: 46px; height: 46px; stroke-width: 3.2; }
.biz-tile.a { left: 2%; top: 20%; rotate: -5deg; background: var(--peach); border-color: transparent; }
.biz-tile.b { left: 24%; top: 58%; rotate: 4deg; background: var(--sky); border-color: transparent; }
.biz-tile.c { right: 24%; top: 50%; rotate: -3deg; background: var(--mint); border-color: transparent; }
.biz-tile.d { right: 2%; top: 14%; rotate: 6deg; background: var(--butter); border-color: transparent; }
.biz-hero-art .surf-avatar { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 150px; font-size: 48px; }
@media (max-width: 699px) {
  .biz-hero-art { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .biz-tile { position: static; rotate: none !important; }
  .biz-hero-art .surf-avatar { position: static; translate: none; grid-column: 1 / -1; justify-self: center; order: -1; width: 120px; }
}
.chat-wrap { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.chat-copy h2 { margin-bottom: var(--s3); }
.chat-copy p { color: var(--ink-2); }
.chat { background: var(--sand); border-radius: var(--r-xl); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .75rem; }
.chat-head { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--muted); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; padding-bottom: .5rem; }
.msg { max-width: 82%; display: grid; gap: .25rem; }
.msg .who { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
.msg p { padding: .75rem 1rem; border-radius: 18px; font-size: .9375rem; line-height: 1.45; background: var(--surface-2); }
.msg.user { justify-self: end; text-align: right; }
.msg.user p { background: var(--ink); color: var(--surface-2); border-bottom-right-radius: 4px; text-align: left; }
.msg.surf p { background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg.biz { justify-self: end; text-align: right; }
.msg.biz p { background: var(--mint); border-bottom-right-radius: 4px; text-align: left; }
.msg.done p { background: var(--sky); }
@media (max-width: 899px) { .chat-wrap { grid-template-columns: 1fr; } }

/* ---------- 24. About ---------- */
.about-hero-art { position: relative; max-width: 1040px; margin: var(--s6) auto 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface-27); }
.about-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.about-hero-art .doodle { position: absolute; stroke: var(--surface-2); width: 90px; height: 90px; right: 8%; top: 12%; }
.name-block { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.name-dot { width: 120px; height: 120px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -18px var(--surface-28); display: grid; place-items: center; }
.name-dot span { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-2), 0 0 24px 4px var(--surface-29); }
.name-block h2 { margin-bottom: var(--s3); }
.name-block h2 em { font-style: italic; font-weight: 500; color: var(--muted); }
.name-block p { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.6; max-width: var(--measure); }
.name-block p + p { margin-top: var(--s3); }
@media (max-width: 699px) { .name-block { grid-template-columns: 1fr; } .name-dot { width: 88px; height: 88px; } }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: var(--s3); justify-content: center; }
.team-card { border: var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s3); display: grid; gap: var(--s2); align-content: start; }
.team-card .portrait { width: 96px; height: 96px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; overflow: hidden; }
.team-card .portrait .surf-avatar { width: 76px; font-size: 26px; }
.team-card .role { font-size: var(--fs-small); color: var(--muted); }
.team-card .placeholder { color: var(--muted); font-style: italic; }
.team-card.hiring { border-style: dashed; background: var(--surface-30); }
.team-card.hiring .portrait { background: var(--wash); }
.team-card.hiring .portrait svg { width: 44px; height: 44px; }
@media (max-width: 699px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- 25. Blog (Fieldnotes) ---------- */
body.fieldnotes { background: var(--cream); }
body.fieldnotes .site-header { background: var(--surface-31); }
body.fieldnotes .nav-links a[aria-current="page"] { background: var(--surface-32); }
body.fieldnotes #navigation { background: var(--cream); }
.fn-hero { padding: var(--s7) 0 var(--s5); }
.fn-label { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; margin-bottom: var(--s3); }
.fn-label .confetti { position: static; width: 10px; height: 10px; }
.fn-hero h1 { font-size: clamp(2.75rem, 1.4rem + 5.6vw, 6rem); line-height: 1; letter-spacing: -0.045em; max-width: 14ch; }
.fn-hero h1 em { font-style: italic; font-weight: 500; }
.fn-hero .lede { margin-top: var(--s3); }
.featured-post { display: grid; grid-template-columns: 6fr 5fr; border-radius: var(--r-xl); background: var(--night); color: var(--surface-2); overflow: hidden; text-decoration: none; transition: transform .3s var(--ease); }
.featured-post:hover { transform: translateY(-4px); }
.featured-post .fp-art { position: relative; min-height: 360px; background: var(--surface-33); display: grid; place-items: center; }
.featured-post .fp-art img { width: 58%; max-width: 280px; }
.featured-post .fp-art .doodle { position: absolute; stroke: var(--surface-2); width: 80px; height: 80px; right: 10%; top: 12%; }
.featured-post .fp-body { padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--s2); align-content: center; }
.featured-post h2 { color: var(--surface-2); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); }
.featured-post p { color: var(--surface-34); }
.featured-post .meta { color: var(--surface-35); }
.featured-post .text-link { color: var(--surface-2); text-decoration-color: var(--surface-36); }
.meta { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; font-size: var(--fs-small); color: var(--muted); }
.tag { display: inline-block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.draft-badge { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-eyebrow); padding: .2rem .55rem; border-radius: var(--r-pill); background: var(--c-yellow); color: var(--ink); }
@media (max-width: 899px) { .featured-post { grid-template-columns: 1fr; } .featured-post .fp-art { min-height: 260px; } }
.journal-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.filters { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: .4rem; }
.chips button { border: 1px solid var(--surface-37); background: transparent; padding: .5rem 1rem; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--surface-2); border-color: var(--ink); }
.search { position: relative; }
.search input { min-height: 44px; width: 240px; padding: .6rem 1rem .6rem 2.5rem; border-radius: var(--r-pill); border: 1px solid var(--surface-37); background: var(--surface-2); font-size: var(--fs-small); }
.search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface-11); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); list-style: none; }
.post-card a { display: grid; gap: var(--s2); text-decoration: none; height: 100%; }
.post-card .pc-art { aspect-ratio: 4 / 3; border-radius: var(--r-md); display: grid; place-items: center; position: relative; overflow: hidden; transition: transform .35s var(--ease); }
.post-card a:hover .pc-art { transform: translateY(-4px); }
.post-card .pc-art img { width: 46%; }
.post-card .pc-art .doodle { position: absolute; width: 60px; height: 60px; right: 10%; top: 10%; }
.post-card h3 { font-size: 1.25rem; }
.post-card p { color: var(--ink-2); font-size: .9375rem; }
.filter-status { font-size: var(--fs-small); color: var(--muted); }
.empty { text-align: center; padding: var(--s6) 0; }
.empty h3 { margin-bottom: var(--s1); }
.empty p { color: var(--muted); }
@media (max-width: 899px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .post-grid { grid-template-columns: 1fr; } .search, .search input { width: 100%; } .filters { width: 100%; } }

/* article */
.article { padding: var(--s6) 0 var(--section-s); }
.article-head { max-width: 760px; margin: 0 auto var(--s5); }
.back-link { display: inline-flex; gap: .4rem; font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--muted); margin-bottom: var(--s4); }
.back-link:hover { color: var(--ink); }
.article-head h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); margin: var(--s2) 0 var(--s3); }
.article-head .lede { max-width: none; }
.article-art { max-width: 960px; margin: 0 auto var(--s6); border-radius: var(--r-xl); aspect-ratio: 16 / 7; display: grid; place-items: center; position: relative; overflow: hidden; }
.article-art img { height: 78%; width: auto; }
.article-art .doodle { position: absolute; width: 90px; height: 90px; left: 12%; top: 18%; }
.prose { max-width: 680px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); margin: var(--s5) 0 var(--s2); }
.prose p + p { margin-top: var(--s3); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: var(--s3) 0; display: grid; gap: .6rem; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: var(--s4) 0; padding-left: var(--s3); border-left: 3px solid var(--c-green); font-family: var(--font-display); font-size: 1.375rem; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }
.draft-note { max-width: 680px; margin: 0 auto var(--s4); padding: var(--s2) var(--s3); background: var(--butter); border-radius: var(--r-sm); font-size: var(--fs-small); }
.more-notes { border-top: 1px solid var(--surface-38); padding-top: var(--s6); margin-top: var(--s7); }
.more-notes h2 { font-size: 1.75rem; margin-bottom: var(--s4); }

/* ---------- 26. Help ---------- */
.help-search { max-width: 560px; margin: var(--s4) auto 0; }
.help-search .search input { width: 100%; min-height: 56px; font-size: 1rem; border-color: var(--line-2); padding-left: 3rem; }
.help-search .search svg { left: 18px; width: 18px; height: 18px; }
.help-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.help-nav { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: .25rem; }
.help-nav a { text-decoration: none; padding: .55rem .9rem; border-radius: var(--r-pill); font-size: .9375rem; color: var(--ink-2); }
.help-nav a:hover { background: var(--wash); color: var(--ink); }
.help-group + .help-group { margin-top: var(--s6); }
.help-group h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-bottom: var(--s3); }
.help-cta { margin-top: var(--s7); }
@media (max-width: 899px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-nav { position: static; display: flex; flex-wrap: wrap; gap: .4rem; }
  .help-nav a { border: var(--border); font-size: var(--fs-small); }
}
.permission-explainer { background: var(--sky); border-radius: var(--r-lg); padding: var(--s4) var(--s3); margin-bottom: var(--s4); display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.permission-explainer .doodle { width: 52px; height: 52px; stroke-width: 3; }
.permission-explainer h3 { margin-bottom: var(--s1); }
.permission-explainer p { color: var(--ink-2); }
.permission-explainer ul { margin: var(--s2) 0 0; padding-left: 1.2rem; color: var(--ink-2); display: grid; gap: .35rem; }
@media (max-width: 599px) { .permission-explainer { grid-template-columns: 1fr; } }

/* ---------- 27. Legal ---------- */
.legal-banner { background: var(--butter); border-bottom: 1px solid var(--surface-39); }
.legal-banner p { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: .8rem var(--gutter); font-size: var(--fs-small); font-weight: 500; text-align: center; }
.legal-hero { padding: var(--s6) 0 var(--s5); border-bottom: var(--border); }
.legal-hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.legal-hero .meta { margin-top: var(--s2); }
.legal-hero .lede { margin-top: var(--s3); }
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; padding-block: var(--s6) var(--section-s); }
.toc { position: sticky; top: calc(var(--header-h) + var(--s4)); }
.toc .footer-h { margin-bottom: var(--s2); }
.toc ol { list-style: none; display: grid; gap: .15rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 1.75rem 1fr; padding: .4rem 0; font-size: var(--fs-small); text-decoration: none; color: var(--ink-2); line-height: 1.4; }
.toc a::before { content: counter(toc) "."; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); }
.legal-body { max-width: 720px; }
.legal-body section + section { margin-top: var(--s6); padding-top: var(--s5); border-top: var(--border); }
.legal-body h2 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); display: flex; gap: .75rem; margin-bottom: var(--s3); }
.legal-body h2 .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.legal-body h3 { font-size: 1.0625rem; margin: var(--s3) 0 var(--s1); }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body p + p { margin-top: var(--s2); }
.legal-body ul { padding-left: 1.2rem; margin: var(--s2) 0; display: grid; gap: .5rem; }
.legal-summary { background: var(--wash); border-radius: var(--r-md); padding: var(--s3); margin-bottom: var(--s5); }
.legal-summary h2 { font-size: 1.25rem; margin-bottom: var(--s2); }
.legal-summary ul { margin: 0; }
@media (max-width: 899px) {
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; border: var(--border); border-radius: var(--r-md); padding: var(--s3); }
}

/* ---------- 28. Support ---------- */
.support-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.support-options a, .support-options div.opt { display: grid; gap: var(--s1); align-content: start; text-decoration: none; padding: var(--s4) var(--s3); border-radius: var(--r-lg); border: var(--border); transition: border-color .2s, transform .25s var(--ease); }
.support-options a:hover { border-color: var(--ink); transform: translateY(-3px); }
.support-options .doodle { width: 44px; height: 44px; stroke-width: 3.2; margin-bottom: var(--s3); }
.support-options h2 { font-size: 1.25rem; }
.support-options p { color: var(--ink-2); font-size: .9375rem; }
.support-form-wrap { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.support-form-wrap h2 { margin-bottom: var(--s3); }
.support-form-wrap .intro p { color: var(--ink-2); }
.support-form-wrap .intro p + p { margin-top: var(--s2); }
.support-form-wrap .surf-avatar { width: 110px; font-size: 36px; margin-top: var(--s4); }
@media (max-width: 899px) { .support-options, .support-form-wrap { grid-template-columns: 1fr; } }

/* ---------- 29. Fellows ---------- */
.fellows-hero-art { position: relative; height: 200px; max-width: 720px; margin: var(--s5) auto 0; }
.fellows-hero-art .surf-avatar { position: absolute; width: 130px; font-size: 42px; }
.fellows-hero-art .f1 { left: 12%; top: 26%; rotate: -8deg; }
.fellows-hero-art .f2 { left: 50%; top: 0; translate: -50% 0; width: 160px; font-size: 52px; }
.fellows-hero-art .f3 { right: 12%; top: 30%; rotate: 8deg; }
.fellows-hero-art .acc-cap { width: 86%; left: 4%; top: -32%; }
.fellows-hero-art .acc-eyeglass { width: 34%; left: 54%; top: 26%; max-width: none; }
.fellows-hero-art .acc-headphones { width: 118%; left: -9%; top: 6%; }
@media (max-width: 599px) {
  .fellows-hero-art { height: 150px; }
  .fellows-hero-art .surf-avatar { width: 92px; font-size: 30px; }
  .fellows-hero-art .f2 { width: 116px; font-size: 38px; }
  .fellows-hero-art .f1 { left: 2%; } .fellows-hero-art .f3 { right: 2%; }
}
.perk-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); list-style: none; }
.perk-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s2); padding: var(--s3) 0; border-top: var(--border); }
.perk-list .n { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: var(--fs-small); padding-top: .2rem; font-variant-numeric: tabular-nums; }
.perk-list h3 { font-size: 1.0625rem; margin-bottom: .25rem; }
.perk-list p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 799px) { .perk-list { grid-template-columns: 1fr; } }
.trait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); list-style: none; }
.trait-grid li { border-radius: var(--r-md); padding: var(--s3); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.35; display: grid; gap: var(--s2); }
.trait-grid li .confetti { position: static; }
@media (max-width: 899px) { .trait-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 499px) { .trait-grid { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.two-col h2 { margin-bottom: var(--s3); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.bullets { list-style: none; display: grid; gap: var(--s2); }
.bullets li { display: grid; grid-template-columns: 14px 1fr; gap: var(--s2); color: var(--ink-2); }
.bullets li::before { content: ""; width: 8px; height: 8px; margin-top: .55em; border-radius: 2px; background: var(--c-green); }
@media (max-width: 799px) { .two-col { grid-template-columns: 1fr; } }

/* section heading left-aligned variant */
.head-left { margin-bottom: var(--s5); max-width: 640px; }
.head-left .section-sub { margin-inline: 0; }

/* ---------- 30. QA / print / reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Round 6 integration */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
strong,b { font-weight:600; }
.native-pin-track { position:relative; }
.native-pin { position:sticky; top:100px; }
.about-hero-art,.article-art { width:100%; }
.biz-tile .doodle { position:static; z-index:auto; }
@media(max-width:699px) { .biz-hero-art .surf-avatar { position:relative; left:auto; top:auto; } }
.scene-avatar { display:block; position:relative; width:100%; aspect-ratio:400/381; }
.scene-avatar > img { width:100%; height:100%; object-fit:contain; max-width:100%; padding:0; }
.float-card .tile-media { display:grid; place-items:center; padding:12%; }
.float-card .tile-media img { padding:0; }
.trust-art .scene-avatar { width:190px; max-width:65%; }
.trust-art .scene-avatar img { max-width:100%; }
.featured-post .fp-art .scene-avatar { width:58%; max-width:280px; }
.featured-post .fp-art .scene-avatar img { width:100%; }
.post-card .pc-art .scene-avatar { width:46%; }
.post-card .pc-art .scene-avatar img { width:100%; }
.about-hero-art .scene-avatar { width:30%; min-width:200px; }
.about-hero-art .scene-avatar img { width:100%; height:100%; }
.article-art .scene-avatar { width:30%; min-width:160px; max-width:280px; }
.article-art .scene-avatar img { width:100%; height:100%; max-width:100%; max-height:none; }
.float-card .tile-media .scene-avatar > img { padding:0; }
.banner-art .scene-avatar { width:min(78%,380px); }
p { max-width:var(--measure); }
.section-sub,.lede { max-width:var(--measure); }
.button:active { transform:scale(.96); }
.wordmark,.login,.button.small,.text-link,.footer-nav a,.footer-base a,.back-link,.help-nav a,.toc a,.chips button,.dialog-close { min-height:44px; }
.wordmark,.footer-nav a,.footer-base a,.help-nav a,.toc a,.back-link { display:inline-flex; align-items:center; }
.menu-toggle,.dialog-close { min-width:44px; }
.site-header { background:var(--bg); backdrop-filter:none; }
.nav-links a { min-height:44px; }
body.fieldnotes .site-header,body.fieldnotes #navigation { background:var(--bg); }
body.fieldnotes .nav-links a[aria-current="page"] { background:var(--wash); }
.site-footer { background:var(--bg); }
.hero { min-height:800px; }
.hero-copy { max-width:610px; }
.hero-copy .lede { max-width:45ch; }
.hero h1 { font-size:clamp(2.6rem,4.5vw,3.6rem); max-width:15ch; line-height:1.1; }
.float-card .tile-media img { object-fit:contain; scale:1; padding:12%; }
.float-card .tile-media { aspect-ratio:4/4.6; }
.banner { background:var(--sky); }
.banner-art { min-width:0; }
.banner-surf { object-fit:contain; }
.banner-bottom { flex-wrap:wrap; }
.surf-avatar { overflow:visible; }
.pupils { position:absolute; left:33%; top:43%; width:35%; height:12%; display:flex; justify-content:space-between; pointer-events:none; }
.pupils i { display:block; width:24%; height:100%; border-radius:45%; background:var(--eye); box-shadow:0 0 6px var(--eye); }
.surf-avatar { margin-bottom:20px; }
.m-companion .pupils { top:25px; height:7px; }
.about-hero-art { background:var(--sky); display:grid; place-items:center; min-height:280px; }
.about-hero-art img { width:55%; height:85%; object-fit:contain; }
.about-hero-art .doodle { stroke:var(--ink); }
.article-art img { max-height:300px; max-width:55%; object-fit:contain; }
.article-art { min-height:240px; }
.trust-art img { max-width:65%; }
.trust-grid .m-stepper-card.is-active { background:var(--mint); }
.trust-grid .m-stepper-card::before { display:none; }
.meet-mascot > .surf-avatar { width:100%; }
.phone { max-width:100%; }
.phone-stage { min-width:0; }
.m-scene { min-height:105px; padding:12px; border:var(--border); border-radius:var(--r-sm); font-size:var(--fs-small); }
.m-scene p { font-size:var(--fs-micro); margin-top:6px; }
.m-scene button { min-height:44px; margin-top:8px; }
.story-progress { height:3px; background:var(--line); overflow:hidden; }
.story-progress i { display:block; height:100%; background:var(--c-green); transform-origin:left; transition:transform .5s var(--ease); }
.result-card { min-height:120px; }
.m-marquee-row { width:100%; max-width:760px; }
.m-marquee-track { gap:var(--s2); padding-right:var(--s2); }
.fn-hero .lede { max-width:56ch; }
.fieldnotes .closing-inner p { margin-inline:auto; }
.legal-crosslink { margin-top:var(--s5); }
.form-card button { justify-self:start; }
.form-status { max-width:100%; }
.feature-grid p { max-width:var(--measure); }
.prose { line-height:1.6; max-width:62ch; }
.prose a { display:inline-flex; align-items:center; min-height:44px; }
.toc a { display:grid; }
.m-paused .pupils i { animation-play-state:paused!important; }
html.m-on .pupils i { animation:m-blink 5.2s infinite; }
html.m-on .pupils i:nth-child(2) { animation-delay:.04s; }
html:not(.js) .menu-toggle,html:not(.js) [data-access],html:not(.js) .demo-controls { display:none; }
html:not(.js) form[data-demo-form] button { display:none; }
html:not(.js) .form-note { background:var(--butter); padding:var(--s2); border-radius:var(--r-sm); }
html.m-static .m-clip>img { opacity:1; scale:1; }
html.m-static .m-clip::after { display:none; }
html.m-static .m-word { opacity:1!important; transform:none!important; }
html.m-static .fan article { transform:translateY(var(--lift)) rotate(var(--angle))!important; }
html.m-static .apps h2 { filter:none!important; }
html.m-static .banner { transform:none!important; }
@media(min-width:900px) { .hero-copy { margin-top:-40px; } }
@media(max-width:1099px) and (min-width:900px) { .float-card { width:130px; } .float-three,.float-four { bottom:3%; } }
@media(max-width:899px) {
 .hero { min-height:0; }
 .hero-copy { max-width:100%; }
 .hero-copy .lede { max-width:45ch; }
 .float-card { max-width:240px; margin-inline:auto; }
 .float-two { margin-left:auto; margin-right:auto; }
 .banner-art { min-height:280px; }
 .banner-surf { max-height:250px; width:auto; max-width:75%; }
 .scene-card { font-size:.8rem; padding:.6rem; }
 .scene-one { bottom:5%; }
 .scene-two { top:0; right:0; }
 .tabs { flex-wrap:wrap; overflow:visible; justify-content:center; border-radius:var(--r-md); }
 .tabs [role="tab"] { min-height:44px; }
 .fan { margin-inline:0; padding-inline:0; }
 html.m-static .fan article { transform:none!important; }
 html:not(.js) #navigation { display:block; position:static; padding:0 0 var(--s2); box-shadow:none; grid-column:1/-1; grid-row:2; }
 html:not(.js) .nav-inner { height:auto; padding-top:var(--s2); }
 html:not(.js) .nav-links { flex-direction:row; flex-wrap:wrap; }
 html:not(.js) .nav-links a { font-size:1rem; padding:.5rem; }
 html:not(.js) .nav-mobile-actions { display:none; }
 .permission-explainer { display:block; }
}
@media(max-width:599px) {
 .hero .hero-actions { flex-direction:column; gap:var(--s1); }
 .hero h1 { font-size:2.65rem; }
 .banner h2 { font-size:3.2rem; }
 .banner-top,.banner-bottom { font-size:.65rem; }
 .hero .float-card figcaption { font-size:.8rem; }
 .post-grid { gap:var(--s5); }
 .form-card { padding:var(--s3); }
 .phone-stage { padding:var(--s3) var(--s1); }
 .closing .confetti.k1 { left:2%; } .closing .confetti.k2 { right:2%; }
}

/* Round 7 — product-led layouts, within the approved Surf visual system. */
.hero-prop{position:absolute;width:44%;height:auto;top:4%;left:32%;pointer-events:none}.float-card{position:absolute}.intro-spread{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.route-line{display:flex;align-items:center;gap:1rem;border-block:1px solid var(--line-2);padding:2rem 0;font-family:var(--font-display);font-size:1.25rem}.route-line i{font-style:normal;color:var(--muted)}
.feature-beat{padding-block:5rem 2rem;border-top:1px solid var(--line);overflow:clip}.feature-beat:nth-of-type(even){background:var(--wash)}.feature-heading{text-align:center;max-width:680px;margin:0 auto 2.5rem}.feature-heading h2{font-size:clamp(2.3rem,4vw,3.7rem);margin:.8rem 0 1.1rem}.feature-heading p{max-width:54ch;margin-inline:auto;color:var(--muted)}.feature-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,420px) minmax(0,1fr);gap:2rem;align-items:center;max-width:1100px;margin:auto}.feature-phone{margin:0;position:relative;text-align:center}.feature-phone img{width:100%;height:490px;object-fit:contain}.feature-phone figcaption{font-size:11px;color:var(--muted);margin:.75rem 0 1.5rem}.feature-context{padding:2rem;background:var(--peach);border-radius:22px;rotate:-3deg;box-shadow:0 12px 25px #00000006}.feature-context p{font-family:var(--font-display);font-size:1.35rem;line-height:1.35;margin:1rem 0}.feature-note{padding:1.8rem 0 1.8rem 2rem;border-left:1px solid var(--line-2)}.feature-note h3{margin:.8rem 0}.feature-note p{font-size:.9rem;color:var(--muted)}.feature-index{font-family:var(--font-display);font-size:3.4rem;line-height:1;color:#c5c5bd}.request-dot{display:block;width:12px;height:12px;background:var(--c-green);rotate:15deg;margin-top:1.5rem}.feature-beat:nth-of-type(3n) .feature-context{background:var(--mint);rotate:3deg}.feature-beat:nth-of-type(3n + 1) .feature-context{background:var(--sky)}
.hands-on{background:var(--wash)}.hands-on-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5rem;max-width:1000px}.hands-on h2{font-size:clamp(2.6rem,5vw,4.2rem);margin:1rem 0 1.5rem}.example-requests{display:grid;gap:.4rem;margin:1.8rem 0}.example-requests button{display:block;min-height:48px;padding:.7rem 0;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;cursor:pointer}.editable-phone{width:320px;max-width:100%;min-height:590px;border:8px solid var(--ink);border-radius:44px;padding:20px;background:white;box-shadow:0 20px 45px #00000012;position:relative;margin:auto}.demo-status{display:flex;justify-content:space-between;font-size:11px;font-weight:600;margin-bottom:30px}.phone-brand{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1}.phone-brand>span{color:var(--c-green)}.phone-brand small{display:block;font-family:var(--font-body);font-size:12px;color:var(--muted);font-weight:400;margin:10px 0 32px}.editable-phone label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}.editable-phone textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:122px;max-height:190px;border:1px solid var(--line-2);border-radius:15px;background:var(--wash);padding:14px;font:inherit;font-size:14px;line-height:1.5}.editable-phone .button{width:100%;font-size:13px;margin:14px 0}.phone-response{background:var(--mint);border-radius:15px;padding:16px;font-size:13px;min-height:110px;overflow-wrap:anywhere}.phone-response p{margin:.5rem 0 0}.phone-response .eyebrow{font-size:10px}.phone-home{display:block;width:90px;height:4px;background:var(--ink);border-radius:8px;margin:25px auto 0}
.customizer-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.custom-preview{background:var(--wash);border-radius:28px;min-height:440px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem}.surf-custom-body{width:300px;max-width:100%;position:relative;isolation:isolate}.surf-custom-body>img:first-child{width:100%;height:auto}.body-tint{position:absolute;inset:0;background:var(--body-color);mix-blend-mode:multiply;mask:url('../assets/surf7/master-straight-400.webp') center/contain no-repeat;pointer-events:none}.custom-eyes{position:absolute;left:34%;top:44%;display:flex;gap:40px}.custom-eyes i{width:20px;height:29px;background:#dbf2ff;border-radius:50%;box-shadow:0 0 12px #2478ff}.surf-custom-body [data-prop-preview]{position:absolute;width:65%;height:auto;left:17%;top:-19%;z-index:2}.surf-custom-body [data-prop-kind="eyes"]{width:64%;left:20%;top:30%}.surf-custom-body [data-prop-kind="headphones"]{width:108%;left:-4%;top:-4%}.surf-custom-body [data-prop-kind="tie"]{width:30%;left:37%;top:68%}.custom-controls h3{margin:1.7rem 0 1rem}.colour-options{display:flex;flex-wrap:wrap;gap:8px}.colour-options button{display:grid;justify-items:center;gap:7px;background:none;border:1px solid transparent;border-radius:12px;padding:8px;min-width:54px;font:inherit;font-size:11px;cursor:pointer}.colour-options i{width:30px;height:30px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0002}.colour-options button[aria-pressed=true],.prop-options button[aria-pressed=true],.expression-options button[aria-pressed=true]{border-color:var(--ink);background:var(--wash)}.prop-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.prop-options button{background:white;border:1px solid var(--line-2);border-radius:14px;min-height:90px;padding:10px;font:inherit;font-size:12px;cursor:pointer}.prop-options img{height:45px;width:100%;object-fit:contain;margin-bottom:5px}.custom-controls>.micro{margin-top:1rem}.expression-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center}.expression-preview{text-align:center;margin:0}.expression-preview img{width:min(100%,360px);margin:auto}.expression-preview figcaption{font-family:var(--font-display);font-size:1.6rem;margin-top:1rem}.expression-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.expression-options button{background:white;border:1px solid var(--line);border-radius:14px;padding:6px;font:inherit;font-size:11px;cursor:pointer;min-height:90px}.expression-options img{width:100%;height:65px;object-fit:contain}.later-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.later-grid article{padding:2rem 0;border-top:1px solid var(--line-2)}.later-grid h3{font-size:1.8rem;margin:1rem 0}.later-grid p{color:var(--muted)}.plan-art:empty{display:none}.closing-inner{padding-top:4rem}.banner-art{min-height:200px}.banner .scene-one{bottom:35%;left:5%}.banner .scene-two{top:35%;right:5%}
/* Secondary pages: editorial openings and tangible task diagrams. */
.page-product{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4rem;margin-top:3rem}.page-product img{width:100%;height:360px;object-fit:contain}.page-product-copy{max-width:540px}.page-product-copy h2{font-size:2.3rem;margin-bottom:1rem}.page-product-copy p{color:var(--muted)}.process-rail{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line-2);margin:3rem 0 0}.process-rail article{padding:2rem;border-right:1px solid var(--line-2)}.process-rail article:last-child{border-right:0}.process-rail .step-number{font-size:2.5rem;color:#b6b6ad;font-family:var(--font-display)}.process-rail h3{margin:.8rem 0}.process-rail p{font-size:.9rem;color:var(--muted)}.editorial-band{background:var(--wash);border-radius:24px;padding:3rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.editorial-band h2{font-size:clamp(2rem,3vw,3rem)}.editorial-band p{color:var(--muted)}.legal-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 3rem}.legal-summary article{background:var(--wash);border-radius:16px;padding:1.5rem}.legal-summary h2{font-size:1.2rem;margin-bottom:.7rem}.legal-summary p{font-size:.9rem}.article-diagram{display:block;width:100%;height:auto;margin:2.5rem 0;border-radius:18px;background:var(--wash)}.article-body{max-width:720px;margin:auto}.article-body h2{font-size:1.8rem;margin:2.6rem 0 1rem}.article-body p{margin:1rem 0;line-height:1.85}.article-body blockquote{font-family:var(--font-display);font-size:1.8rem;line-height:1.3;border-left:3px solid var(--c-green);padding:1rem 0 1rem 1.8rem;margin:2.5rem 0}.article-head{max-width:900px;margin:0 auto;text-align:center;padding:5rem 1.5rem 2rem}.article-head h1{margin:1rem 0 1.5rem}.article-head .lede{margin:auto}.article-meta{font-size:.8rem;color:var(--muted)}.article-wrap{padding:1rem var(--gutter) 6rem}.draft-label{display:inline-block;border:1px solid var(--line-2);border-radius:30px;padding:.4rem .8rem;font-size:12px;margin-bottom:1rem}.journal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 2rem}.journal-card{border-top:1px solid var(--line-2);padding-top:1.5rem}.journal-card h3{font-size:1.7rem;margin:.8rem 0}.journal-card p{color:var(--muted)}.journal-card a{text-decoration:none}.journal-art{height:210px;border-radius:20px;background:var(--wash);overflow:hidden;margin-bottom:1.4rem}.journal-art svg{width:100%;height:100%;margin:0}.journal-card .text-link{margin-top:1rem}.fn-hero .featured-post:empty{display:none}
@media(max-width:899px){.feature-stage{grid-template-columns:minmax(0,1fr) minmax(200px,320px);gap:1.5rem}.feature-note{grid-column:1/-1;border-left:0;border-top:1px solid var(--line-2);padding:1.5rem 0;display:grid;grid-template-columns:70px 1fr;gap:0 1rem}.feature-note p{grid-column:2}.feature-index{grid-row:1/3}.feature-phone img{height:430px}.hands-on-layout{gap:2rem}.customizer-layout{gap:2rem}.custom-preview{padding:1rem;min-height:360px}.custom-eyes{gap:30px}.expression-layout{gap:1.5rem}.page-product{gap:2rem}.process-rail article{padding:1.3rem}.intro-spread{gap:2rem}.prop-options{grid-template-columns:repeat(3,1fr)}}
@media(max-width:599px){.intro-spread,.hands-on-layout,.customizer-layout,.expression-layout,.page-product,.editorial-band{grid-template-columns:1fr;gap:2rem}.route-line{font-size:.9rem;gap:.7rem}.feature-beat{padding-block:3.5rem 1rem}.feature-heading{text-align:left;margin-bottom:1.5rem}.feature-heading h2{font-size:2.5rem}.feature-stage{display:flex;flex-direction:column;gap:1rem}.feature-context{rotate:0!important;padding:1.2rem;width:100%;box-sizing:border-box;border-radius:16px}.feature-context p{font-size:1.1rem;margin:.5rem 0}.request-dot{display:none}.feature-phone{width:100%;max-width:360px}.feature-phone img{height:390px}.feature-note{width:100%;box-sizing:border-box}.feature-phone figcaption{margin:.2rem 0 .6rem}.editable-phone{width:310px}.hands-on h2{font-size:3rem}.custom-preview{min-height:370px}.custom-controls h3:first-child{margin-top:0}.prop-options{grid-template-columns:repeat(4,1fr)}.expression-preview img{max-width:230px}.expression-options{gap:5px}.expression-options button{font-size:10px}.expression-options img{height:58px}.later-grid,.process-rail,.legal-summary,.journal-grid{grid-template-columns:1fr}.later-grid{gap:0}.process-rail article{border-right:0;border-bottom:1px solid var(--line-2)}.process-rail article:last-child{border-bottom:0}.editorial-band{padding:1.5rem}.page-product img{height:300px}.article-head{padding-top:3rem}.article-body blockquote{font-size:1.5rem}.article-body h2{font-size:1.6rem}.journal-art{height:190px}.hero-prop{top:2%}.banner .scene-one{left:0}.banner .scene-two{right:0}}
/* Integrated original illustration assets. */
.feature-scene{width:100%;height:140px;object-fit:contain;margin-bottom:1rem}.later-art{display:block;width:100%;height:160px;object-fit:contain;object-position:left center;margin-top:1rem}.page-product .page-header-art{height:300px}.feature-phone[data-ui-concept] .m-approval-card,.feature-phone[data-ui-concept] .m-connector-cloud,.feature-phone[data-ui-concept] .m-feature-ink{display:none}.article-body h2{line-height:1.25}.feature-phone[data-ui-concept]>img{height:490px}.feature-index{font-size:2.4rem}.feature-note{padding-top:0}.feature-note h3{margin-top:.6rem}
@media(max-width:899px){.feature-note .feature-scene{grid-column:1/-1;grid-row:1;height:110px;margin:0}.feature-note .feature-index{grid-column:1;grid-row:2/4}.feature-note h3{grid-column:2;grid-row:2}.feature-note p{grid-column:2;grid-row:3}}
@media(max-width:599px){.feature-phone[data-ui-concept]>img{height:420px}.page-product .page-header-art{height:210px}.feature-note .feature-scene{display:none}.feature-note .feature-index{grid-row:1/3}.feature-note h3{grid-row:1}.feature-note p{grid-row:2}.later-art{height:140px}}

/* Waitlist (nav pill + dialog form) */
.waitlist-pill { white-space: nowrap; }
.header-actions .waitlist-pill { padding-inline: 1.1rem; }
#access-dialog .eyebrow { display: block; margin-bottom: var(--s1); }
.waitlist-form { display: grid; gap: var(--s2); text-align: left; }
.waitlist-form .optional { color: var(--muted); font-weight: 400; }
.waitlist-form .button { width: 100%; justify-content: center; }
#access-dialog .waitlist-status { margin: 0; min-height: 1.25em; font-size: var(--fs-small); }
#access-dialog .waitlist-status.is-error { color: var(--surface-26); }
.waitlist-done-title { font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 600; color: var(--ink) !important; margin-bottom: var(--s1) !important; }
@media (max-width: 1100px) and (min-width: 900px) { .header-actions .waitlist-pill { font-size: .8125rem; padding-inline: .9rem; } }
.waitlist-done:focus { outline: none; }