/* =====================================================================
   PERSONA PAGES  (/for/founders/, /for/designers/, /for/marketers/)
   One shared stylesheet so the three pages stay one design. Built from the
   homepage, deal and pricing language: dot-matrix background with the orange
   dawn glow, gradient-sweep headline word, the real app window mock, the
   deal page bento, and the persona-wall portraits with their pixel faces.
   Per-page accent tweaks: set --p-tint on <body> (defaults to Granular orange).
   Copy rule for every page using this: no em dashes (brain: Marketing Voice).
   ===================================================================== */

/* ---- page background: identical recipe to /deal/ ---- */
body{background-color:var(--bg);
  background-image:
    radial-gradient(circle at center,rgba(255,255,255,.045) 1px,transparent 1.5px),
    radial-gradient(75% 52% at 50% -8%,rgba(255,92,0,.24),rgba(255,92,0,.07) 40%,transparent 66%),
    radial-gradient(46% 40% at 24% -2%,rgba(255,140,64,.13),transparent 62%),
    radial-gradient(46% 42% at 76% -4%,rgba(226,74,0,.12),transparent 62%);
  background-size:13px 13px,100% 900px,100% 760px,100% 800px;
  background-position:0 0,50% 0,50% 0,50% 0;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,scroll,scroll,scroll}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}

/* ---- reveal on scroll (only when JS is running, so no-JS never hides content) ---- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,0,1),transform .7s cubic-bezier(.2,.7,0,1)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---- shared type ---- */
.p-flag{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 "Inter Tight",Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
/* No keyframe pulses anywhere (standing founder rule, brain: Website design rules). */
.grad{font-style:normal;color:transparent;-webkit-text-fill-color:transparent;padding:0 .06em .14em 0;margin-right:-.06em;background:linear-gradient(100deg,#e64f00 0%,#ff5800 16%,#ffc9a1 30%,#ffdcbd 36%,#ff8a3d 46%,#ff5800 60%,#ff6a12 74%,#ffc59d 84%,#e64f00 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:pSweep 6.5s linear infinite}
@keyframes pSweep{0%{background-position:0% 50%}100%{background-position:162.5% 50%}}
@media(prefers-reduced-motion:reduce){.grad{animation:none;background-position:32% 50%}}
.p-head{text-align:center;max-width:680px;margin:0 auto 34px}
.p-head .p-flag{margin-bottom:14px}
.p-head h2{font:700 clamp(28px,4.2vw,44px)/1.06 "Inter Tight",Inter,sans-serif;letter-spacing:-.035em;color:var(--ink)}
.p-head p{margin:14px auto 0;max-width:560px;font-size:16.5px;line-height:1.6;color:var(--muted)}
.p-sec{margin-top:128px}
@media(max-width:700px){.p-sec{margin-top:88px}}

/* =========================== LIGHT TOP FOLD ===========================
   Same recipe as the homepage hero (.theme-light in index.html): the light Rad
   tokens, warm paper gradient and a soft orange dawn. The light band runs from the
   top of the page down to 40% into the app window, so the (dark) window straddles
   light and dark, and the page continues dark below. The header goes light while it
   sits over the band (persona.js toggles .theme-light on it). */
.theme-light{
  --rad-bg:#fafafa;--rad-surface:#ffffff;--rad-edge:#e8e8e9;--rad-edge-strong:#d9d9db;
  --rad-ink:#1b1c1e;--rad-ink-muted:#5d5e61;--rad-ink-faint:#8a8b8e;
  --rad-accent:#ff5800;--rad-accent-ink:#c84400;--recess:#f0efec;
  --bg:var(--rad-bg);--surface:var(--rad-surface);--line:var(--rad-edge);--line-2:var(--rad-edge-strong);
  --ink:var(--rad-ink);--muted:var(--rad-ink-muted);--dim:var(--rad-ink-faint);
  --accent:var(--rad-accent);--accent-ink:var(--rad-accent-ink);
  color:var(--ink);
}
.theme-light .btn-secondary{--btn-fg:#191a1a;--btn-layer-fill:linear-gradient(#f1f2f0,#fefffe);--btn-layer-border:linear-gradient(180deg,#fefffe 0%,#dee0dc 100%);--btn-fill:linear-gradient(180deg,#f1f2f0 0%,#fefffe 100%);--btn-layer-shadow:0 .120725px .603627px rgba(0,0,0,.03),0 1px 5px rgba(0,0,0,.2)}
.nav{transition:background .35s ease,border-color .35s ease,color .35s ease}
.nav.theme-light{background:color-mix(in srgb,#fbfaf8 80%,transparent);border-bottom-color:transparent}
.nav.theme-light .brand-ic{box-shadow:none}

.p-hero.theme-light{background:none}
.p-hero.theme-light > :not(.p-stage){position:relative;z-index:1}
/* the band itself: hangs off the stage so its bottom edge tracks the app window */
.p-hero.theme-light .p-stage::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);
  top:-3000px;bottom:60%;
  background:
    radial-gradient(circle at center,rgba(20,20,22,.065) 1px,transparent 1.5px),
    linear-gradient(180deg,#fcfbfa 0%,#f6f5f2 70%,#f1f0ec 100%);
  background-size:13px 13px,100% 100%;
  border-bottom:1px solid #e3e2dd}
/* the orange dawn, anchored behind the headline (the band's own coordinates track the
   app window, not the page top) */
.p-hero.theme-light h1::before{content:"";position:absolute;z-index:-1;left:50%;top:-190px;width:900px;height:480px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,110,20,.13),rgba(255,110,20,.04) 55%,transparent 80%)}
/* cast on paper: softer, warmer shadows and a light rim instead of the dark halo */
.p-hero.theme-light .p-float .ph{border-color:rgba(20,20,22,.08);box-shadow:0 22px 44px -20px rgba(40,30,20,.35),0 0 0 5px rgba(255,255,255,.7)}
.p-hero.theme-light .p-say{background:#fff;border-color:#e6e5e0;color:#1b1c1e;box-shadow:0 16px 34px -16px rgba(40,30,20,.35)}
.p-hero.theme-light .p-say::before{background:#fff;border-color:#e6e5e0}
.p-hero.theme-light .p-role span{background:#fff;border-color:#e3e2dd;color:#5d5e61;box-shadow:0 4px 12px -6px rgba(40,30,20,.3)}
.p-hero.theme-light .p-avs img{border-color:#f6f5f2}
.p-hero.theme-light .p-mock{filter:drop-shadow(0 30px 50px rgba(40,30,20,.28))}
/* Phone: no floating cast, so end the band a little lower on the window */
@media(max-width:899px){.p-hero.theme-light .p-stage::before{bottom:45%}}

/* =========================== HERO =========================== */
.p-hero{position:relative;text-align:center;padding:86px 0 0}
.p-hero h1{font:700 clamp(40px,6.6vw,80px)/1.0 "Inter Tight",Inter,sans-serif;letter-spacing:-.045em;max-width:15ch;margin:0 auto}
.p-hero .lede{font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:var(--muted);max-width:640px;margin:22px auto 0}
.p-hero .lede strong{color:var(--ink);font-weight:600}
.p-hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.p-reassure{margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.p-reassure b{color:var(--muted);font-weight:500}

/* Mobile face strip (desktop shows the floating cast instead) */
.p-avrow{display:none;align-items:center;justify-content:center;gap:12px;margin:26px auto 0}
.p-avs{display:flex}
.p-avs img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 18%;border:2px solid var(--bg);margin-left:-11px;background:#222}
.p-avs img:first-child{margin-left:0}
.p-avrow span{font-size:13.5px;color:var(--muted);text-align:left;max-width:200px;line-height:1.35}

/* ---- the stage: app window with the cast floating around it ---- */
/* The stage breaks out of .wrap's 1064px column so the app window reads at near full size. */
.p-stage{position:relative;width:min(1240px,calc(100vw - 32px));margin:64px 0 0 50%;transform:translateX(-50%);padding:0 118px}
/* The mock page draws its own window frame and shadow; this box only sizes it and adds
   the orange under-glow (a filter, so it follows the window rather than the box). */
.p-mock{position:relative;width:100%;aspect-ratio:1080/560;overflow:visible;filter:drop-shadow(0 30px 60px rgba(255,88,0,.16))}
.p-mock iframe{position:absolute;top:0;left:0;width:1080px;height:560px;border:0;background:transparent;transform-origin:top left}

.p-cast{position:absolute;inset:0;pointer-events:none}
.p-float{position:absolute;width:124px;pointer-events:auto;z-index:2;
  animation:pBob 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.p-float .ph{position:relative;display:block;width:100%;aspect-ratio:358/480;border-radius:20px;overflow:hidden;
  transform:rotate(var(--r,0deg));border:1px solid rgba(255,255,255,.14);background:#1b1c1f;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.85),0 0 0 6px rgba(21,22,24,.55);transition:transform .35s cubic-bezier(.2,.7,0,1)}
.p-float:hover .ph{transform:rotate(0deg) scale(1.04)}
.p-float .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.p-face{position:absolute;width:34px;height:34px;background-size:cover;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.p-float .p-face{right:-12px;top:-12px;transform:rotate(calc(var(--r,0deg) * -1))}
.p-role{display:flex;justify-content:center;margin-top:12px}
.p-role span{padding:5px 11px;border-radius:99px;border:1px solid var(--line-2);background:rgba(21,22,24,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:500 11.5px/1 "Sometype Mono",ui-monospace,monospace;letter-spacing:.01em;color:var(--muted);white-space:nowrap}
.p-say{position:absolute;z-index:3;width:max-content;max-width:210px;padding:10px 13px;border-radius:14px;
  background:linear-gradient(180deg,#26272b,#1d1e21);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);font-size:13px;line-height:1.4;color:var(--ink);text-align:left}
.p-say::before{content:"";position:absolute;top:14px;width:10px;height:10px;background:#232428;border:1px solid rgba(255,255,255,.12);transform:rotate(45deg)}
.p-float.l .p-say{left:calc(100% + 16px);top:18px;border-top-left-radius:5px}
.p-float.l .p-say::before{left:-6px;border-right:0;border-top:0}
.p-float.r .p-say{right:calc(100% + 16px);top:18px;border-top-right-radius:5px}
.p-float.r .p-say::before{right:-6px;border-left:0;border-bottom:0}
@keyframes pBob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(prefers-reduced-motion:reduce){.p-float{animation:none}}

/* Six seats. Two large faces on each side of the window, staggered high and low, plus
   two smaller ones peeking over the bottom-left and top-right edges, so the cast
   surrounds the product instead of standing in two columns. */
.p-float.s1{left:0;top:-7%}
.p-float.s2{left:34px;top:55%}
.p-float.s3{left:17%;top:90%;width:92px}
.p-float.s4{right:0;top:3%}
.p-float.s5{right:30px;top:58%}
.p-float.s6{right:17%;top:-20%;width:92px}
.p-float.s3 .p-say{top:26px}
.p-float.s3 .ph,.p-float.s6 .ph{border-radius:16px}
.p-float.s3 .p-face,.p-float.s6 .p-face{width:28px;height:28px;right:-10px;top:-10px}

/* Tablet: cast shrinks and hugs the window edges, fewer speech bubbles */
@media(max-width:1179px){
  .p-stage{padding:0 78px}
  .p-float{width:92px}
  .p-float.s3,.p-float.s6{width:70px}
  .p-float .ph{border-radius:14px}
  .p-float.s2{left:14px}.p-float.s5{right:14px}
  .p-say{max-width:170px;font-size:12px}
  .p-float.s3 .p-say,.p-float.s6 .p-say{display:none}
  .p-float.s3 .p-role,.p-float.s6 .p-role{display:none}
  .p-role span{font-size:10.5px;padding:4px 8px}
}
/* Phone and small tablet: the cast becomes an avatar strip under the buttons */
@media(max-width:899px){
  .p-stage{padding:0;margin:44px 0 0;width:auto;transform:none}
  .p-cast{display:none}
  .p-avrow{display:flex}
  .p-mock{border-radius:12px}
}

/* =========================== PAINS =========================== */
.p-pains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:0 auto}
.p-pain{position:relative;padding:24px 22px 22px;border-radius:18px;background:var(--panel,#17181b);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -14px rgba(0,0,0,.6)}
.p-pain .n{font:500 12px/1 "Sometype Mono",ui-monospace,monospace;color:var(--dim);letter-spacing:.08em}
.p-pain h3{margin:14px 0 0;font:600 18px/1.3 "Inter Tight",Inter,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.p-pain p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.p-pain .fix{display:flex;gap:8px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);font-size:14px;line-height:1.5;color:var(--ink)}
.p-pain .fix::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:5px;background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
@media(max-width:860px){.p-pains{grid-template-columns:1fr;max-width:560px}}

/* =========================== HOW (boss + team) =========================== */
.p-how{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;max-width:1060px;margin:0 auto}
.p-how .p-head{text-align:left;margin:0}
.p-how .p-head p{margin-left:0}
.p-steps{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:18px;counter-reset:st}
.p-steps li{position:relative;padding-left:46px;counter-increment:st}
.p-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font:600 13px/1 "Sometype Mono",ui-monospace,monospace;color:var(--accent-ink);background:rgba(255,88,0,.1);border:1px solid rgba(255,88,0,.3)}
.p-steps b{display:block;font:600 16px/1.3 "Inter Tight",Inter,sans-serif;color:var(--ink)}
.p-steps span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--muted)}

.p-org{position:relative;padding:26px;border-radius:22px;background:#0e0f12;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:0 40px 90px -50px rgba(0,0,0,.85),0 26px 80px -34px rgba(255,90,12,.26);overflow:hidden}
.p-org::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 90% 110%,rgba(255,120,24,.30),transparent 62%)}
.p-org > *{position:relative;z-index:1}
.p-you{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#1a1b1e;border:1px solid var(--line-2)}
.p-you img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 18%}
.p-you .t{font-size:14px;line-height:1.4;color:var(--ink)}
.p-you .t small{display:block;font:500 11px/1.2 "Sometype Mono",ui-monospace,monospace;color:var(--dim);margin-bottom:3px;letter-spacing:.04em}
.p-wire{width:2px;height:22px;margin:0 0 0 32px;background:linear-gradient(var(--line-2),rgba(255,88,0,.6))}
.p-boss{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,#2a1d15,#1c1714);border:1px solid rgba(255,122,51,.45)}
.p-boss svg{flex:0 0 auto;color:var(--accent)}
.p-boss b{font:600 15px/1.2 "Inter Tight",Inter,sans-serif;color:var(--ink)}
.p-boss em{margin-left:auto;font:500 11px/1 "Sometype Mono",ui-monospace,monospace;font-style:normal;color:var(--accent-ink)}
.p-workers{margin:0 0 0 32px;padding:12px 0 0 22px;border-left:2px solid rgba(255,88,0,.35);display:flex;flex-direction:column;gap:9px}
.p-worker{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#17181b;border:1px solid var(--line)}
.p-worker::before{content:"";position:absolute;left:-23px;top:50%;width:20px;height:2px;background:rgba(255,88,0,.35)}
.p-worker .sd{width:8px;height:8px;border-radius:50%;background:#4ade80;flex:0 0 auto}
.p-worker .sd.run{background:var(--accent);box-shadow:0 0 0 3px rgba(255,88,0,.2)}
.p-worker b{font:600 13.5px/1.2 "Inter Tight",Inter,sans-serif;color:var(--ink);white-space:nowrap}
.p-worker span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.p-worker i{margin-left:auto;flex:0 0 auto;font:500 10.5px/1 "Sometype Mono",ui-monospace,monospace;font-style:normal;color:var(--dim)}
@media(max-width:900px){.p-how{grid-template-columns:1fr;gap:36px;max-width:620px}.p-how .p-head{text-align:center}.p-how .p-head p{margin-left:auto}}
@media(max-width:480px){.p-org{padding:18px}.p-worker span{display:none}}

/* =========================== SHIP (jobs + prompts) =========================== */
.p-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1060px;margin:0 auto}
.p-job{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;background:var(--panel,#17181b);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -14px rgba(0,0,0,.6);transition:border-color .2s,transform .2s}
.p-job:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));transform:translateY(-2px)}
.p-job .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--accent-ink);
  background:linear-gradient(158deg,rgba(255,122,51,.18),rgba(255,122,51,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,122,51,.25)}
.p-job .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p-job h3{margin:4px 0 0;font:600 17px/1.25 "Inter Tight",Inter,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.p-job p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.p-prompt{margin-top:auto;padding:11px 13px;border-radius:11px;background:#0e0f11;border:1px solid var(--line);
  font:400 12.5px/1.5 "Sometype Mono",ui-monospace,monospace;color:#d6d7da}
.p-prompt::before{content:"you  ";color:var(--accent-ink)}
@media(max-width:960px){.p-jobs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.p-jobs{grid-template-columns:1fr}}

/* =========================== THE CAST WALL =========================== */
.p-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1060px;margin:0 auto}
.p-person{position:relative;border-radius:18px;overflow:hidden;background:#1b1c1f;border:1px solid var(--line);aspect-ratio:3/4;
  box-shadow:0 20px 44px -26px rgba(0,0,0,.9)}
.p-person img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .6s cubic-bezier(.2,.7,0,1)}
.p-person:hover img{transform:scale(1.04)}
.p-person::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(10,10,12,.55) 62%,rgba(10,10,12,.96) 100%)}
.p-person .p-face{left:12px;top:12px;width:30px;height:30px;z-index:2}
.p-person .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 15px}
.p-person .cap b{display:block;font:600 15px/1.2 "Inter Tight",Inter,sans-serif;color:#fff}
.p-person .cap span{display:block;margin-top:6px;font:400 12px/1.45 "Sometype Mono",ui-monospace,monospace;color:#d4d5d8}
.p-person .cap span::before{content:"\201C"}.p-person .cap span::after{content:"\201D"}
.p-person.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.p-person.big .cap b{font-size:20px}
.p-person.big .cap span{font-size:13.5px}
@media(max-width:900px){.p-wall{grid-template-columns:repeat(3,1fr)}.p-person.big{grid-column:span 3;grid-row:auto;aspect-ratio:16/10}}
@media(max-width:560px){.p-wall{grid-template-columns:repeat(2,1fr);gap:10px}.p-person.big{grid-column:span 2}.p-person .cap span{display:none}.p-person.big .cap span{display:block}}

/* =========================== THE CAST TICKER ===========================
   Lighter alternative to .p-wall: two slim rows of small cards drifting in opposite
   directions. persona.js duplicates each track once so the loop is seamless (the
   copy is aria-hidden). Pauses on hover/focus; static and wrapped with reduced motion. */
.p-ticker{position:relative;display:flex;flex-direction:column;gap:12px;
  /* full-bleed without transform, so the reveal animation (which sets transform) can't move it */
  width:min(1400px,calc(100vw - 16px));margin-left:calc((100% - min(1400px,calc(100vw - 16px))) / 2);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.p-tick-track{display:flex;gap:12px;width:max-content;animation:pTick var(--dur,70s) linear infinite}
.p-tick-track.rev{animation-direction:reverse}
.p-ticker:hover .p-tick-track,.p-ticker:focus-within .p-tick-track{animation-play-state:paused}
@keyframes pTick{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
.p-tick{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:12px;width:292px;padding:10px 14px 10px 10px;border-radius:16px;
  background:var(--panel,#17181b);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px -16px rgba(0,0,0,.7);
  transition:border-color .2s}
.p-tick:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.p-tick .av{position:relative;flex:0 0 auto;width:52px;height:52px}
.p-tick .av img{display:block;width:100%;height:100%;border-radius:13px;object-fit:cover;object-position:center 18%;background:#222}
.p-tick .av .p-face{width:24px;height:24px;right:-8px;bottom:-7px;z-index:1}
.p-tick .tx{min-width:0}
.p-tick b{display:block;font:600 14px/1.25 "Inter Tight",Inter,sans-serif;color:var(--ink)}
/* scoped to the text column: a bare `.p-tick span` also hit the avatar wrapper and
   clipped the pixel-face badge that overlaps the photo's corner */
.p-tick .tx > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;
  font:400 12px/1.45 "Sometype Mono",ui-monospace,monospace;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
  .p-ticker{-webkit-mask-image:none;mask-image:none;width:auto;margin-left:0}
  .p-tick-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .p-tick-track [aria-hidden="true"]{display:none}
}
@media(max-width:560px){.p-tick{width:252px}.p-tick .av{width:46px;height:46px}}

/* =========================== BENTO (from /deal/) =========================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,1fr);gap:14px;max-width:1000px;margin:0 auto}
.b{position:relative;display:flex;flex-direction:column;gap:11px;padding:20px;border-radius:16px;background:var(--panel,#17181b);border:1px solid var(--line);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -14px rgba(0,0,0,.6)}
.b .ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(158deg,rgba(255,255,255,.1),rgba(255,255,255,.02));color:var(--muted);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),0 8px 18px -8px rgba(0,0,0,.75),0 2px 4px -2px rgba(0,0,0,.5)}
.b .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.b h3{font:600 16px/1.25 "Inter Tight",Inter,sans-serif;letter-spacing:-.01em;color:var(--ink);margin:2px 0 0}
.b p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.b.wide{grid-column:span 2}.b.tall{grid-row:span 2}
.b .logos{display:flex;align-items:center;margin-top:auto;padding-top:6px}
.b .logos span{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;border:1px solid rgba(0,0,0,.08);box-shadow:0 3px 10px rgba(0,0,0,.4);margin-left:-11px}
.b .logos span:first-child{margin-left:0}
.b .logos img{width:26px;height:26px;display:block}
.b .logos .more{color:#8a8b8e}.b .logos .more svg{width:22px;height:22px}
.b .soon-mono{margin-top:16px;font-family:"Sometype Mono",ui-monospace,monospace;font-size:12px;line-height:1.75;letter-spacing:.02em;color:var(--dim)}
.b .soon-mono b{color:var(--muted);font-weight:500}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}.b.tall{grid-row:span 1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.b.wide{grid-column:auto}}

/* =========================== BUILT BY (founder note / testimonial) =========================== */
.p-note{position:relative;overflow:hidden;display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center;max-width:900px;margin:0 auto;padding:30px;
  background:#0e0f12;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:24px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.85),0 26px 80px -34px rgba(255,90,12,.30)}
.p-note::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(72% 62% at 90% 120%,rgba(255,120,24,.36),rgba(255,88,0,.1) 44%,transparent 66%)}
.p-note > *{position:relative;z-index:1}
.p-note .shot{border-radius:16px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line-2);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.p-note .shot img{display:block;width:100%;height:100%;object-fit:cover}
.p-note .eb{font:600 12px/1 "Inter Tight",Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.p-note blockquote{margin:14px 0 0;font:700 clamp(21px,2.4vw,27px)/1.25 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;color:#fff}
.p-note .body{margin-top:14px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.p-note .body p{margin:0 0 10px}.p-note .body strong{color:var(--ink);font-weight:600}
.p-note .sig{margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.p-note .sig .nm{font:700 32px/1 "Caveat","Inter Tight",cursive;color:var(--ink)}
.p-note .sig .rl{font-size:13px;color:var(--dim)}
.p-note .more{display:inline-block;margin-top:14px;color:var(--accent-ink);font:600 14px/1 "Inter Tight",Inter,sans-serif;text-decoration:none}
.p-note .more:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.p-note{grid-template-columns:1fr;padding:22px;gap:22px}.p-note .shot{aspect-ratio:16/11}}

/* =========================== PRICE STRIP =========================== */
.p-price{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px;margin:0 auto}
.p-plan{padding:24px;border-radius:18px;background:var(--panel,#17181b);border:1px solid var(--line)}
.p-plan.pro{border-color:rgba(255,122,51,.55);background:linear-gradient(180deg,rgba(255,88,0,.08),rgba(255,88,0,0) 60%),var(--panel,#17181b)}
.p-plan .t{font:600 13px/1 "Sometype Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.p-plan.pro .t{color:var(--accent-ink)}
.p-plan .amt{margin-top:12px;font:700 34px/1 "Inter Tight",Inter,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.p-plan .amt small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.p-plan ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.p-plan li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.p-plan li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:rgba(255,88,0,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.3 2.2L11.5 5.8' fill='none' stroke='%23ff7a33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.p-plan .btn{margin-top:20px;width:100%}
.p-price-note{text-align:center;margin:18px auto 0;max-width:640px;font-size:14px;line-height:1.6;color:var(--muted)}
.p-price-note a{color:var(--accent-ink)}
@media(max-width:700px){.p-price{grid-template-columns:1fr;max-width:480px}}

/* =========================== FAQ =========================== */
.faq{max-width:760px;margin:0 auto;border-top:0;padding-top:0}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.faq-note{text-align:center;margin:20px auto 0;font-size:14px;color:var(--muted)}
.faq-note a{color:var(--accent-ink)}

/* =========================== FINAL CTA =========================== */
.p-final{position:relative;text-align:center;margin:150px auto 0;padding:0}
.p-final::before{content:"";position:absolute;left:50%;top:-40px;width:720px;height:320px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,92,0,.18),rgba(255,92,0,.05) 55%,transparent 75%)}
.p-ring{position:relative;width:min(640px,100%);height:190px;margin:0 auto 22px}
.p-ring img,.p-ring .me{position:absolute;left:50%;top:50%;border-radius:50%;object-fit:cover;object-position:center 18%;
  border:3px solid var(--bg);box-shadow:0 14px 30px -12px rgba(0,0,0,.9);background:#222;
  transform:translate(-50%,-50%) translate(var(--x),var(--y));width:var(--s,58px);height:var(--s,58px);
  animation:pBob 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.p-ring .me{width:92px;height:92px;border-radius:26px;object-fit:contain;background:transparent;border:0;box-shadow:0 20px 50px -10px rgba(255,88,0,.5);z-index:2;animation:none}
.p-final h2{position:relative;font:700 clamp(32px,5vw,58px)/1.02 "Inter Tight",Inter,sans-serif;letter-spacing:-.04em;max-width:22ch;margin:0 auto;color:var(--ink);text-wrap:balance}
.p-final p{margin:16px auto 0;max-width:520px;font-size:17px;line-height:1.6;color:var(--muted)}
.p-final .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta-mock{position:relative;width:100%;max-width:1080px;margin:52px auto 0;overflow:hidden;border-radius:16px 16px 0 0;aspect-ratio:1080 / 560;
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 96%);mask-image:linear-gradient(to bottom,#000 52%,transparent 96%)}
.cta-mock iframe{position:absolute;top:0;left:0;width:1080px;height:560px;border:0;background:transparent;transform-origin:top left}
.site-footer{position:relative;z-index:5;margin-top:-72px}
@media(max-width:640px){.p-ring{height:150px;transform:scale(.62);margin-bottom:0}}
@media(max-width:520px){.cta-mock{border-radius:12px 12px 0 0}.site-footer{margin-top:-40px}}