/* Groach AI — shared site styles.
   Layout: dark emerald "corridor" world for heroes and product moments, alternating with paper bands for
   reading. Light-weight Geist at very large sizes, mono labels, hairlines instead of boxes. One saffron dot per view. */
:root{
  --void:#050F0B;
  --deep:#08291F;
  --panel:#0C1E18;
  --panel-2:#10261E;
  --on:#F4F7F5;
  --muted:#9DB3AA;
  --dim:#6E8A7F;
  --line:rgba(244,247,245,.10);
  --line-2:rgba(244,247,245,.18);
  --saffron:#F29B1D;
  --saffron-text:#F5B04A;
  --mint:#7FD1AE;
  --coral:#FF9C8A;
  --paper:#F6F6F3;
  --white:#FFFFFF;
  --p-ink:#0F2A20;
  --p-muted:#5F6B66;
  --p-line:#DFE3DF;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--on);font-family:var(--sans);font-size:17px;line-height:28px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
html{overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--saffron);color:var(--void)}
:focus-visible{outline:2px solid var(--on);outline-offset:3px;border-radius:6px}
.paper :focus-visible{outline-color:var(--p-ink)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--on);color:var(--void);padding:10px 14px;border-radius:8px}

/* grain: a static noise layer that takes the flatness off large dark fields */
.grain{display:none!important;position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- frame ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:920px}
section{position:relative}
.band{padding-block:clamp(88px,11vw,160px)}
.band.tight{padding-block:clamp(64px,8vw,112px)}
.paper{background:var(--paper);color:var(--p-ink)}
.white{background:var(--white);color:var(--p-ink)}
.deep{background:var(--deep)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.paper .eyebrow,.white .eyebrow{color:var(--p-muted)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--saffron);flex:none}
.display{font-weight:300;font-size:clamp(48px,8.4vw,128px);line-height:.94;letter-spacing:-.055em;margin:0;text-wrap:balance}
.h1{font-weight:300;font-size:clamp(44px,6.6vw,96px);line-height:.98;letter-spacing:-.05em;margin:0;text-wrap:balance}
.h2{font-weight:300;font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.04em;margin:0;text-wrap:balance}
.h3{font-weight:500;font-size:22px;line-height:30px;letter-spacing:-.015em;margin:0}
.h2 em,.h1 em,.display em{font-style:normal;color:var(--muted)}
.paper .h2 em,.white .h2 em,.paper .h1 em{color:var(--p-muted)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);max-width:58ch;margin:0;font-weight:300;letter-spacing:-.005em}
.paper .lede,.white .lede{color:var(--p-muted)}
.body{color:var(--muted);margin:0}
.paper .body,.white .body{color:var(--p-muted)}
p{margin:0}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 15px/1 var(--sans);letter-spacing:-.005em;padding:15px 22px;border-radius:999px;border:1px solid var(--on);background:var(--on);color:var(--void);text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn .d{width:7px;height:7px;border-radius:50%;background:var(--saffron);flex:none}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--on);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--on)}
.btn.sm{padding:11px 16px;font-size:14px}
.paper .btn,.white .btn{background:var(--p-ink);border-color:var(--p-ink);color:var(--white)}
.paper .btn.ghost,.white .btn.ghost{background:transparent;color:var(--p-ink);border-color:var(--p-line)}
.paper .btn.ghost:hover,.white .btn.ghost:hover{border-color:var(--p-ink)}
.link{color:var(--on);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--on)}
.paper .link,.white .link{color:var(--p-ink);border-color:var(--p-line)}
.paper .link:hover,.white .link:hover{border-color:var(--p-ink)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(5,15,11,.78);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:76px}
.nav .brand img{height:26px;width:auto}
.nav .links{display:flex;gap:4px;list-style:none;margin:0 auto 0 24px;padding:0}
.nav .links a{display:block;text-decoration:none;font-size:14.5px;color:var(--muted);padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav .links a:hover{color:var(--on)}
.nav .links a[aria-current="page"]{color:var(--on);background:rgba(244,247,245,.07)}
.nav .acts{display:flex;align-items:center;gap:10px;margin-left:auto}
.signin{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14.5px;color:var(--on);padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);transition:border-color .2s,background .2s}
.signin:hover{border-color:var(--on)}
.signin svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer;place-items:center}
.burger span{display:block;width:16px;height:1.5px;background:var(--on);position:relative;transition:transform .3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--on);transition:transform .3s var(--ease),top .3s}
.burger span::before{top:-5px}.burger span::after{top:5px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{top:0;transform:rotate(45deg)}
.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:39;background:var(--void);padding:calc(96px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:6px;transform:translateY(-100%);transition:transform .5s var(--ease);visibility:hidden}
.menu-open .drawer{transform:none;visibility:visible}
.drawer a.big{font-size:40px;line-height:1.2;font-weight:300;letter-spacing:-.04em;text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.drawer .row{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
@media (max-width:980px){.nav .links{display:none}.burger{display:grid}.nav .acts .btn{display:none}}
@media (max-width:420px){.signin span{display:none}.signin{padding:10px 12px}}

/* ---------- page hero (subpages) ---------- */
.phero{position:relative;overflow:hidden;padding-block:calc(170px + env(safe-area-inset-top,0px)) clamp(72px,9vw,120px);border-bottom:1px solid var(--line)}
.phero canvas{position:absolute;inset:0;width:100%;height:100%}
.phero .wrap{position:relative;display:flex;flex-direction:column;gap:28px}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(5,15,11,0),var(--void));pointer-events:none}
.crumbs{font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crumbs a{text-decoration:none;color:var(--muted)}

/* ---------- section head ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.shead > div{display:flex;flex-direction:column;gap:22px}
@media (max-width:860px){.shead{grid-template-columns:1fr}}

/* ---------- reveal (transform only: content is readable at rest) ---------- */
[data-reveal]{transform:translateY(22px);transition:transform 1s var(--ease)}
[data-reveal].in{transform:none}

/* ---------- generic grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.cell{min-width:0}

/* hairline matrix: cells separated by 1px lines */
.matrix{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.matrix > *{background:var(--void);padding:clamp(24px,2.6vw,36px);min-width:0;display:flex;flex-direction:column;gap:14px}
.paper .matrix,.white .matrix{background:var(--p-line);border-color:var(--p-line)}
.paper .matrix > *{background:var(--paper)}
.white .matrix > *{background:var(--white)}
.matrix.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.matrix.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.matrix.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.matrix.c3,.matrix.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.matrix.c3,.matrix.c2,.matrix.c4{grid-template-columns:1fr}}
.matrix .k{font:500 12px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.paper .matrix .k,.white .matrix .k{color:var(--p-muted)}
.matrix .ic{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center}
.paper .matrix .ic,.white .matrix .ic{border-color:var(--p-line)}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* rows list (spec-sheet style) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.rows li b{font-weight:500}
.rows li span{color:var(--muted)}
.paper .rows,.paper .rows li,.white .rows,.white .rows li{border-color:var(--p-line)}
.paper .rows li span,.white .rows li span{color:var(--p-muted)}
@media (max-width:640px){.rows li{grid-template-columns:1fr;gap:6px}}

/* tiers */
.chip{display:inline-flex;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.04em;padding:6px 9px;border-radius:999px;white-space:nowrap}
.t-est{background:var(--on);color:var(--void)}
.t-strong{background:rgba(127,209,174,.12);color:var(--mint);border:1px solid rgba(127,209,174,.42)}
.t-weak{background:rgba(245,176,74,.1);color:var(--saffron-text);border:1px solid rgba(245,176,74,.42)}
.t-unk{color:var(--muted);border:1px dashed var(--muted)}
.t-gap{color:var(--coral);border:1px solid rgba(255,156,138,.45)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-band canvas{position:absolute;inset:0;width:100%;height:100%}
.cta-band .wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:32px;padding-block:clamp(96px,12vw,180px)}
.cta-band .row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld label{font:500 11.5px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{font:400 16px/24px var(--sans);color:var(--on);background:rgba(244,247,245,.03);border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px 14px;width:100%;transition:border-color .2s,background .2s}
.fld textarea{resize:vertical;min-height:120px}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(244,247,245,.3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--on);background:rgba(244,247,245,.05)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
.fld select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239DB3AA' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.fld select option{background:var(--panel);color:var(--on)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:22px;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--on)}
.form-err{font:400 13px/18px var(--mono);color:var(--coral);min-height:18px}
.form-ok{grid-column:1/-1;display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r-md);border:1px solid rgba(127,209,174,.35);background:rgba(127,209,174,.05)}
.form-ok .tick{width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--void);display:grid;place-items:center;flex:none;font-weight:600}
.form-ok b{display:block;font-weight:500;margin-bottom:4px}
.form-ok p{color:var(--muted);font-size:15px;line-height:24px}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.015em;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.faq summary .pm::before{content:"+";font:300 18px/1 var(--sans)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 26px;max-width:70ch}
.paper .faq,.paper .faq details{border-color:var(--p-line)}
.paper .faq summary .pm{border-color:var(--p-line)}
.paper .faq details p{color:var(--p-muted)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--void);padding-block:clamp(72px,8vw,112px) calc(40px + env(safe-area-inset-bottom,0px))}
.foot .top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,.6fr));gap:40px}
.foot .brandcol{display:flex;flex-direction:column;gap:22px}
.foot .brandcol img{height:28px;width:auto;align-self:flex-start}
.foot .tagline{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:300;max-width:16ch}
.foot h5{margin:0 0 18px;font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{text-decoration:none;color:var(--muted);font-size:15px;transition:color .2s}
.foot ul a:hover{color:var(--on)}
.foot .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:72px;padding-top:24px;border-top:1px solid var(--line);font:400 13px/20px var(--mono);color:var(--dim)}
@media (max-width:980px){.foot .top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .brandcol{grid-column:1/-1}}

/* ---------- reduced motion ---------- */
/* Reduced motion: keep user-driven transitions (scrolling, taps, hovers),
   stop only the ambient loops that move on their own. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .ch *,.float,.pulse,.orbit,.orbit .cr,.v-gap,.flow,.fl,.ln.flow,.intro .hint i,.gp.on{animation:none!important}
}

/* =====================================================================
   Vector characters (generated by site.js → GroachChar)
   ===================================================================== */
.ch{display:block;width:100%;height:auto;overflow:visible}
.ch .shd{fill:rgba(0,0,0,.35)}
.on-light .ch .shd,.paper .ch .shd,.white .ch .shd{fill:rgba(15,42,32,.12)}
.ch .leg-l,.ch .leg-r,.ch .arm-l,.ch .arm-r,.ch .body,.ch .upper,.ch .head{transform-box:view-box}
.ch .leg-l{transform-origin:53px 148px}
.ch .leg-r{transform-origin:67px 148px}
.ch .arm-l{transform-origin:37px 84px}
.ch .arm-r{transform-origin:83px 84px}
.ch .head{transform-origin:60px 60px}
.ch .upper{transform-origin:60px 150px}
.ch.hold .arm-r{transform:rotate(26deg)}
.ch.walk .leg-l{animation:chLeg .9s ease-in-out infinite alternate}
.ch.walk .leg-r{animation:chLeg .9s ease-in-out infinite alternate-reverse}
.ch.walk .arm-l{animation:chArm .9s ease-in-out infinite alternate-reverse}
.ch.walk .arm-r{animation:chArm .9s ease-in-out infinite alternate}
.ch.walk .body{animation:chBob .45s ease-in-out infinite alternate}
.ch.idle .upper{animation:chBreathe 4.2s ease-in-out infinite}
.ch.idle .head{animation:chHead 7s ease-in-out infinite}
.ch.waving .arm-r{animation:chWave 1.1s ease-in-out infinite alternate}
@keyframes chLeg{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}
@keyframes chArm{from{transform:rotate(14deg)}to{transform:rotate(-14deg)}}
@keyframes chBob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes chBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes chHead{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-5deg)}90%{transform:rotate(3deg)}}
@keyframes chWave{from{transform:rotate(-150deg)}to{transform:rotate(-125deg)}}

/* speech bubble */
.bubble{position:absolute;left:50%;bottom:calc(100% - 8px);transform:translate(-50%,8px) scale(.96);opacity:0;pointer-events:none;width:max-content;max-width:220px;padding:12px 14px;border-radius:16px;background:var(--p-ink);color:var(--white);font-size:14px;line-height:20px;letter-spacing:-.005em;box-shadow:0 20px 40px -16px rgba(15,42,32,.45);transition:opacity .3s var(--ease),transform .4s var(--ease);text-align:left;z-index:3}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--p-ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bubble.dark{background:var(--on);color:var(--void)}
.bubble.dark::after{background:var(--on)}

/* =====================================================================
   Apple-style building blocks
   ===================================================================== */
.center{text-align:center;margin-left:auto;margin-right:auto}
.mega{font-weight:600;font-size:clamp(44px,8vw,112px);line-height:1;letter-spacing:-.05em;margin:0;text-wrap:balance}
.mega.light{font-weight:300}
.sub{font-size:clamp(19px,1.8vw,24px);line-height:1.4;font-weight:400;color:var(--muted);letter-spacing:-.015em;margin:0;text-wrap:balance}
.paper .sub,.white .sub{color:var(--p-muted)}
.grad-text{background:linear-gradient(100deg,#F4F7F5 10%,#F5B04A 55%,#F4F7F5 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.paper .grad-text,.white .grad-text{background:linear-gradient(100deg,#0F2A20 10%,#A85F00 55%,#0F2A20 90%);-webkit-background-clip:text;background-clip:text}
.stack-c{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(180deg,#0E211A,#09170F);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:8px;min-height:340px;min-width:0;isolation:isolate}
.tile.w2{grid-column:span 2}.tile.w3{grid-column:span 3}.tile.w4{grid-column:span 4}
.tile .tk{font:500 11.5px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tile h3{font-weight:600;font-size:clamp(24px,2.2vw,32px);line-height:1.08;letter-spacing:-.035em;margin:0;max-width:16ch}
.tile p{color:var(--muted);font-size:16px;line-height:24px;max-width:34ch}
.tile .vis{position:absolute;inset:auto 0 0 0;height:62%;display:flex;align-items:flex-end;justify-content:center;z-index:-1;pointer-events:none}
.tile .vis svg{width:100%;height:100%}
.tile.light{background:var(--paper);color:var(--p-ink);border-color:var(--p-line)}
.tile.light p{color:var(--p-muted)}
.tile.light .tk{color:var(--p-muted)}
.tile.saff{background:radial-gradient(120% 90% at 50% 110%,rgba(242,155,29,.35),rgba(242,155,29,0) 60%),linear-gradient(180deg,#0E211A,#09170F)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.tile.w2,.tile.w3,.tile.w4{grid-column:span 1}.tile.wide-m{grid-column:span 2}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.tile.wide-m{grid-column:span 1}.tile{min-height:300px}}

/* big figures */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:center}
.figs .f b{display:block;font-weight:600;font-size:clamp(56px,7vw,96px);line-height:1;letter-spacing:-.05em}
.figs .f span{display:block;margin-top:10px;color:var(--muted);font-size:17px}
.paper .figs .f span,.white .figs .f span{color:var(--p-muted)}
@media (max-width:640px){.figs{grid-template-columns:1fr;gap:40px}}

/* character cast row */
.cast{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,2vw,28px);align-items:end}
.actor{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.actor .fig{width:100%;max-width:150px;transition:transform .5s var(--ease)}
.actor:hover .fig,.actor.on .fig,.actor:focus-visible .fig{transform:translateY(-8px)}
.actor:hover .bubble,.actor.on .bubble,.actor:focus-visible .bubble{opacity:1;transform:translate(-50%,0) scale(1)}
.actor .who{font:500 11.5px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted);transition:color .2s}
.actor.on .who,.actor:hover .who{color:var(--p-ink)}
.actor:focus-visible{outline:2px solid var(--p-ink);outline-offset:6px;border-radius:12px}
.cast-floor{height:1px;background:var(--p-line);margin-top:-1px}
@media (max-width:860px){.cast{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:120px;margin-top:-100px;scrollbar-width:none}.cast::-webkit-scrollbar{display:none}.actor{scroll-snap-align:center}}

/* icon chip grid */
.chips-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ichip{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:22px;border:1px solid var(--line);background:rgba(244,247,245,.02);min-width:0}
.ichip .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(244,247,245,.06)}
.ichip .ico svg{width:24px;height:24px;fill:none;stroke:var(--on);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ichip b{font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.paper .ichip,.white .ichip{border-color:var(--p-line);background:var(--white)}
.paper .ichip .ico,.white .ichip .ico{background:var(--paper)}
.paper .ichip .ico svg,.white .ichip .ico svg{stroke:var(--p-ink)}
@media (max-width:900px){.chips-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* closing door scene (shared) */
.closing{position:relative;overflow:hidden;background:radial-gradient(60% 60% at 50% 100%,rgba(242,155,29,.18),rgba(5,15,11,0) 70%),var(--void)}
.scene{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(20px,4vw,60px);height:clamp(300px,34vw,420px);margin-top:56px}
.odoor{position:relative;width:clamp(150px,16vw,210px);aspect-ratio:1/1.72}
.odoor .opening{position:absolute;inset:0;border-radius:999px 999px 6px 6px;background:radial-gradient(70% 60% at 50% 70%,#FFF3DC,#F5B04A 45%,#B86A0E 100%);box-shadow:0 0 60px rgba(242,155,29,.6),0 0 160px rgba(242,155,29,.3)}
.odoor .door{position:absolute;inset:0;border-radius:999px 999px 6px 6px;overflow:hidden;perspective:500px}
.odoor .door i{position:absolute;top:0;bottom:0;left:0;width:100%;background:linear-gradient(90deg,#06100C,#0E211A);transform-origin:0 50%;transform:rotateY(72deg);box-shadow:inset 0 0 0 1px rgba(244,247,245,.08)}
.odoor .light{position:absolute;top:100%;left:50%;width:420%;height:70%;transform:translateX(-50%);background:radial-gradient(34% 90% at 50% 0,rgba(255,226,170,.6),rgba(242,155,29,0) 75%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.scene .greet{width:clamp(90px,10vw,130px);position:relative}
.scene .greet .bubble{opacity:1;transform:translate(-50%,0);bottom:100%}
.scene .greet .ch .shd{fill:rgba(0,0,0,.5)}

/* visual page hero */
.vhero{position:relative;overflow:hidden;padding-block:calc(150px + env(safe-area-inset-top,0px)) clamp(48px,6vw,88px);background:radial-gradient(70% 60% at 50% 100%,rgba(30,90,69,.35),rgba(5,15,11,0) 70%),var(--void)}
.vhero .wrap{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.vhero .stage{position:relative;width:100%;margin-top:clamp(24px,4vw,48px);display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2.4vw,36px)}
.vhero .stage .fig{width:clamp(70px,9vw,128px);position:relative}
.vhero .stage .fig.big{width:clamp(96px,12vw,170px)}
.vhero .floorline{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);margin-top:-1px}

/* =====================================================================
   Professional pass
   ===================================================================== */
/* second lines read as quiet grey, not gradient: saffron stays a single dot */
.grad-text{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--muted)}
.paper .grad-text,.white .grad-text{background:none;color:var(--p-muted)}
.mega{letter-spacing:-.045em}

/* founder portraits */
.founders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.founder{display:flex;flex-direction:column;gap:14px;min-width:0}
.founder .ph{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--deep)}
.founder .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.02);transform:scale(1.01);transition:filter .6s var(--ease),transform .9s var(--ease)}
.founder:hover .ph img,.founder:focus-within .ph img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.04)}
.founder .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(5,15,11,0),rgba(5,15,11,.55));pointer-events:none}
.founder .ph .tag{position:absolute;left:16px;bottom:16px;z-index:1;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--white);background:rgba(5,15,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 10px;border-radius:999px}
.founder h3{font-weight:600;font-size:24px;letter-spacing:-.025em;margin:4px 0 0}
.founder .t{font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.white .founder .t,.paper .founder .t{color:var(--p-muted)}
.founder p{color:var(--muted);font-size:16px;line-height:25px}
.white .founder p,.paper .founder p{color:var(--p-muted)}
@media (max-width:900px){.founders{grid-template-columns:1fr}.founder .ph{aspect-ratio:4/4.2}}

/* small round avatars */
.avs{display:flex;align-items:center}
.avs img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--void);margin-left:-10px;filter:grayscale(1)}
.avs img:first-child{margin-left:0}

/* product window chrome */
.win{border-radius:22px;border:1px solid var(--line-2);background:linear-gradient(180deg,#0D1F18,#08150F);box-shadow:0 60px 120px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;text-align:left}
.win .bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font:500 11px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.win .bar .lt{display:flex;gap:6px}
.win .bar .lt i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.win .bar .sp{margin-left:auto}
.win .body{padding:20px}
.ex{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-text);border:1px solid rgba(245,176,74,.35);padding:6px 8px;border-radius:999px}

/* action rows (recommendations) */
.act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.act:first-child{border-top:0;padding-top:0}
.act .pr{font:600 11px/1 var(--mono);letter-spacing:.06em;padding:7px 8px;border-radius:8px;background:var(--on);color:var(--void)}
.act .pr.p2{background:rgba(244,247,245,.14);color:var(--on)}
.act .pr.p3{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.act b{display:block;font-weight:500;font-size:15px;line-height:21px}
.act small{display:block;font:400 12px/18px var(--mono);color:var(--muted);margin-top:2px}
.act .due{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap}

/* status pills */
.st{font:500 11px/1 var(--mono);letter-spacing:.04em;padding:6px 9px;border-radius:999px;white-space:nowrap}
.st.done{background:rgba(127,209,174,.14);color:var(--mint);border:1px solid rgba(127,209,174,.4)}
.st.track{background:rgba(244,247,245,.08);color:var(--on);border:1px solid var(--line-2)}
.st.risk{background:rgba(255,156,138,.08);color:var(--coral);border:1px solid rgba(255,156,138,.4)}

/* research rows */
.rs{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.rs:first-child{border-top:0;padding-top:0}
.rs .k{display:flex;justify-content:space-between;gap:10px;align-items:center;font:500 10.5px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rs p{font-size:15px;line-height:22px;color:var(--on)}
.rs .rsrc{font:400 11.5px/16px var(--mono);color:var(--muted)}