/* =====================================================================
   Arkon marketing site — shared design system
   70% near-black / 20% off-white / 10% orange + teal accents (never a
   large field of either accent). Hanken Grotesk + JetBrains Mono.
   ===================================================================== */

:root{
  --bg-0:#0A0C0E;        /* page canvas, dominant */
  --bg-1:#13161B;        /* lifted panel / card surface */
  --bg-2:#1B1F25;        /* hairlines, chips, inputs */
  --line:rgba(244,241,236,.12);
  --line-strong:rgba(244,241,236,.22);
  --ink:#F4F1EC;         /* primary text */
  --ink-dim:#A6ACB3;     /* secondary / slate text */
  --orange:#C9773D; --orange-soft:#E0954F;   /* strict accent */
  --teal:#17FCA9;                             /* sparing tertiary accent (live/sync states) */
  --danger:#E0654F;
  --radius:8px;
  --maxw:1180px;
  --shadow:0 8px 28px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',sans-serif;background:var(--bg-0);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative}
main,footer{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}
::selection{background:var(--orange);color:#0A0C0E}

h1,h2,h3,.display{font-family:'Hanken Grotesk',sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.25rem;font-weight:700}
p{color:var(--ink-dim)}
.mono{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{color:var(--orange);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--orange);display:inline-block}
.lead{font-size:1.16rem;color:var(--ink-dim);max-width:62ch}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:88px 0}
@media(max-width:720px){section{padding:60px 0}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.98rem;padding:.85rem 1.6rem;border-radius:var(--radius);border:2px solid transparent;transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn-primary{background:var(--orange);color:#0A0C0E}
.btn-primary:hover{background:var(--orange-soft)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--bg-1);border-color:var(--ink-dim)}
.btn:active{transform:translateY(1px)}
.btn-block{width:100%}

/* ---------- Beta tag ---------- */
.beta-tag{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-strong);border-radius:4px;padding:.35rem .7rem;color:var(--ink-dim);background:var(--bg-1)}
.beta-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,12,14,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.wordmark{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.06em;display:inline-flex;align-items:center;gap:.45rem;color:var(--ink)}
.wordmark::after{content:"";width:8px;height:8px;background:var(--orange)}
.nav-links{display:flex;align-items:center;list-style:none;gap:2.5rem}
/* Desktop: comfortable, even breathing room between links — not stretched
   edge-to-edge (too spread out), not bunched tight against the CTA either. */
@media(min-width:900px){
  .nav-links{margin-left:2.5rem}
}
.nav-links a:not(.btn){font-weight:500;font-size:.95rem;position:relative;padding:.3rem 0;color:var(--ink-dim)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--orange);transition:width .2s}
.nav-links a:not(.btn):hover,.nav-links a.active{color:var(--ink)}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:100%}
.nav-links .btn{padding:.6rem 1.2rem;font-size:.9rem;margin-left:.5rem}
/* Every button riding the nav bar reads as a translucent tint, never a
   solid opaque fill — the CTA and the mobile burger alike. */
.nav-links .btn.btn-primary{background:rgba(201,119,61,.16);color:var(--orange-soft);border-color:rgba(201,119,61,.5)}
.nav-links .btn.btn-primary:hover{background:rgba(201,119,61,.28)}
.nav-burger{display:none;background:rgba(201,119,61,.12);border:1.5px solid rgba(201,119,61,.4);border-radius:6px;width:44px;height:44px;position:relative}
.nav-burger:hover{background:rgba(201,119,61,.22)}
.nav-burger span{position:absolute;left:10px;right:10px;height:2.5px;background:var(--orange-soft);transition:.25s;border-radius:2px}
.nav-burger span:nth-child(1){top:14px}.nav-burger span:nth-child(2){top:21px}.nav-burger span:nth-child(3){top:28px}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:900px){
  .nav-burger{display:block}
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--bg-0);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 0 1rem}
  .nav-links.open{display:flex}
  .nav-links li{padding:0 24px}
  .nav-links a:not(.btn){display:block;padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:.9rem;width:100%}
}

/* ---------- Scan-line motif (hero + reused near "live" states) ---------- */
.scan-band{position:relative;height:26px;overflow:hidden;background:var(--bg-0);border-bottom:1px solid var(--line)}
.scan-band::after{content:"";position:absolute;top:50%;left:-20%;width:20%;height:1.5px;background:linear-gradient(90deg,transparent,var(--orange) 45%,var(--orange-soft) 50%,var(--orange) 55%,transparent);opacity:.55;animation:scan-sweep 5.5s linear infinite}
@keyframes scan-sweep{from{left:-20%}to{left:120%}}
/* Same line, same timing, riding the bottom edge of the nav bar so it reads
   as one continuous sweep with the hero's scan-band right beneath it. */
.nav-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Soft glow riding with the line, same animation/timing so it travels in
   lockstep — illuminates the nav bar locally as the line passes through it. */
/* Full height of the bar, narrow width (same width as the line), very
   faint — a linear left-right gradient rather than a radial "blob" so it
   reads as an even vertical band, not a glow that fades top/bottom. */
.nav-scan::before{content:"";position:absolute;top:0;bottom:0;left:-15%;width:15%;background:linear-gradient(90deg,transparent,rgba(224,149,79,.12) 50%,transparent);filter:blur(3px);animation:scan-sweep 5.5s linear infinite}
.nav-scan::after{content:"";position:absolute;bottom:0;left:-20%;width:20%;height:2px;background:linear-gradient(90deg,transparent,var(--orange) 45%,var(--orange-soft) 50%,var(--orange) 55%,transparent);opacity:.6;animation:scan-sweep 5.5s linear infinite}
.scan-band--sm{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;opacity:0;transition:opacity .3s}
.scan-band--sm.is-on{opacity:1}
.scan-band--sm::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(224,149,79,.32) 45%,rgba(224,149,79,.5) 50%,rgba(224,149,79,.32) 55%,transparent);animation:scan-sweep 2.6s linear infinite}

/* ---------- Section banding (whole site is dark-first; .alt = subtle lift) ---------- */
/* No backdrop-filter here on purpose: filtering a semi-transparent panel over
   a continuously-animating layer forces a live re-blur every frame, which is
   the single most expensive thing you can do with CSS — that combo was the
   main cause of the lag. Plain flat color instead. */
.alt{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- Ambient backdrop: scan-driven gradient + subtle grid, full page ----------
   Injected once by arkon.js as the first child of <body>, position:fixed so it
   stays behind every section as you scroll — not scoped to one section.
   The orange glow is ALWAYS present — it never fully disappears, it just
   travels top-to-bottom with the scan line and loops. One element, transform-
   only animation (no blur re-render per frame, no backdrop-filter anywhere
   on the page) — kept deliberately cheap so it stays smooth. */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.backdrop::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(rgba(244,241,236,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,236,.022) 1px,transparent 1px);background-size:44px 44px}
.scan-sweep{position:absolute;left:-10%;right:-10%;height:85vh;top:-85vh;filter:blur(90px);will-change:transform;transform:translateZ(0);
  background:linear-gradient(to bottom,transparent 0%,rgba(201,119,61,.06) 25%,rgba(224,149,79,.2) 50%,rgba(201,119,61,.06) 75%,transparent 100%);
  animation:scan-sweep-y 10s linear infinite}
.scan-sweep::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--orange-soft),transparent);opacity:.35}
@keyframes scan-sweep-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(100vh + 85vh),0)}}
@media (prefers-reduced-motion:reduce){.scan-sweep{animation:none;top:0;height:100vh}}

/* ---------- Placeholder frames (signature — genuinely missing assets) ---------- */
.ph{position:relative;border:1.5px solid var(--line-strong);border-radius:var(--radius);background:repeating-linear-gradient(-45deg,var(--bg-1) 0 12px,var(--bg-0) 12px 24px);display:flex;align-items:center;justify-content:center;min-height:200px;overflow:hidden}
.ph::before,.ph::after{content:"";position:absolute;width:16px;height:16px;border:2.5px solid var(--orange)}
.ph::before{top:8px;left:8px;border-right:0;border-bottom:0}
.ph::after{bottom:8px;right:8px;border-left:0;border-top:0}
.ph-label{background:var(--bg-2);color:var(--ink);border-radius:3px;padding:.45rem .85rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;max-width:85%}

/* Asset slots: a real <img> with a graceful placeholder fallback if the
   file 404s (e.g. an asset that's expected but not yet saved to disk). */
.asset-slot{position:relative}
.asset-slot > img{width:100%;height:100%;object-fit:cover;display:block}
.asset-slot .ph-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:1rem;z-index:1}
.asset-slot.broken > img{display:none}
.asset-slot.broken .ph-fallback{display:flex}

/* ---------- Cards ---------- */
.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem}
.card h3{margin-bottom:.55rem}
.card p{color:var(--ink-dim);font-size:.97rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card-accent{border-top:3px solid var(--orange)}
.icon-tile{width:44px;height:44px;border-radius:5px;background:var(--bg-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--orange)}
.icon-tile svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.chips span{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:.4rem .75rem;color:var(--ink-dim)}

/* ---------- Hero ---------- */
.hero{overflow:hidden}
.hero-body{padding:56px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.4rem}}
.hero h1{margin:1.1rem 0 1.2rem}
.hero .subhead{font-weight:600;color:var(--ink);margin-bottom:.6rem;font-size:1.12rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
@media(max-width:640px){.hero-ctas .btn{width:100%}}
.hero-visual{position:relative}
.hero-mobile{position:absolute;bottom:-26px;left:-26px;width:130px;box-shadow:var(--shadow);z-index:3}
.hero-mobile .device-frame{--dfw:130px}
@media(max-width:900px){.hero-mobile{left:0}}
.callout{position:absolute;background:var(--bg-1);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:4px;box-shadow:var(--shadow);padding:.55rem .8rem;font-size:.78rem;font-weight:500;display:flex;align-items:center;gap:.5rem;white-space:nowrap;z-index:4}
.callout .mono{font-size:.6rem;color:var(--ink-dim);letter-spacing:.08em}
.co-1{top:-14px;right:8%}
.co-2{top:38%;right:-14px}
.co-3{bottom:10%;right:18%}
@media(max-width:640px){.co-2{right:0}.co-1{right:0}}
.check{width:16px;height:16px;border-radius:50%;background:var(--orange);color:#0A0C0E;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0}

/* ---------- Scatter (problem section) ---------- */
.scatter{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.8rem 0}
.scatter span{border:1px dashed var(--line-strong);border-radius:4px;padding:.4rem .85rem;font-size:.85rem;color:var(--ink-dim);background:var(--bg-1);display:inline-block;transform:rotate(var(--r,0deg))}
.scatter span:nth-child(odd){--r:-1.2deg}
.scatter span:nth-child(3n){--r:1.4deg}

/* ---------- Flow line (Upload -> Process -> Review -> Organize) ---------- */
.flow-line{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;margin:1.6rem 0 0}
.flow-line .pill{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:.5rem 1.1rem;font-weight:700;font-size:.92rem}
.flow-line .arr{color:var(--orange);font-weight:700}

/* ---------- Feature row (text + device-frame visual, alternating) ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.feature-row + .feature-row{margin-top:3.4rem}
@media(max-width:820px){.feature-row{grid-template-columns:1fr}}
.feature-row.reverse .feature-visual{order:-1}
@media(max-width:820px){.feature-row.reverse .feature-visual{order:0}}

/* ---------- Scan reveal (Home's 3 phone+text pairs, Product's hero phone) ----------
   One-time, on-scroll-into-view moment — not a loop, not the horizontal
   scan-line used elsewhere (nav-scan, hero scan-band, scan-band--sm).
   Sequence: zoom in on the phone, zoom back out, zoom in again, a bright
   snap/wave sweeps across it, then it settles. Four white L-bracket corners
   frame it the whole time, sitting OUTSIDE the phone's own border — .device-
   frame itself is overflow:hidden for its rounded bezel, which would chop
   the brackets off, so .scan-target is a non-clipping wrapper sized exactly
   to the phone (shrink-wrapped) that they're positioned against instead.
   .scan-target carries its own .rv so this is fully self-contained — reveals
   (and animates) based on its own scroll position, independent of whatever
   it's paired with. On Home, the paired text is a separate .text-reveal
   element next to it, timed to land right as the snap finishes; the Product
   hero phone has no paired text, just the phone-side sequence on its own.
   Both trigger *only* off the real scroll-position check (arkon.js) — no
   blanket fallback timer for either. */
.scan-target{position:relative;display:block;width:fit-content;margin:0 auto}
.scan-target .device-frame{transition:transform .5s cubic-bezier(.22,.9,.32,1)}
.scan-target.in .device-frame{animation:scan-focus-pulse 1.4s cubic-bezier(.45,0,.2,1)}
@keyframes scan-focus-pulse{
  0%{transform:scale(1)}
  18%{transform:scale(1.04)}
  38%{transform:scale(1)}
  62%,74%{transform:scale(1.055)}
  100%{transform:scale(1)}
}
.corner-scan{position:absolute;inset:-14px;pointer-events:none;opacity:0;z-index:5}
.scan-target.in .corner-scan{animation:scan-brackets 1.4s linear}
@keyframes scan-brackets{0%{opacity:0}8%{opacity:1}82%{opacity:1}94%{opacity:0}100%{opacity:0}}
.corner-scan span{position:absolute;width:22px;height:22px;border:2px solid var(--ink)}
.corner-scan span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.corner-scan span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.corner-scan span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.corner-scan span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
/* The "snap" — a bright wave sweeping across the phone right at the second,
   bigger zoom-in, before it eases back out. */
.scan-wave{position:absolute;inset:6px;pointer-events:none;overflow:hidden;border-radius:22px;z-index:4}
.scan-wave::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-60%;width:55%;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(244,241,236,.9) 45%,#fff 50%,rgba(244,241,236,.9) 55%,transparent)}
.scan-target.in .scan-wave::after{animation:scan-wave-sweep 1.4s linear}
@keyframes scan-wave-sweep{
  0%,58%{opacity:0;transform:translateX(0)}
  64%{opacity:1}
  78%{opacity:1;transform:translateX(230%)}
  86%,100%{opacity:0;transform:translateX(230%)}
}
/* Paired text on Home's 3 feature-rows only — waits for its phone's scan to
   read as finished before it lands. */
.text-reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.text-reveal.in{opacity:1;transform:none;transition-delay:.95s}
.feature-row.scan-reveal > div:first-child{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.feature-row.scan-reveal.in > div:first-child{opacity:1;transform:none;transition-delay:.95s}

/* ---------- Capability strip (Home = 5-item lean, Product = 16-item full) ----------
   A revolving-door wheel, in real 3D — `perspective` on the strip plus a live
   rotateY/translateZ/scale per item (see arkon.js updateWheel) is what makes
   the center item face the viewer flat while items further out swing away in
   depth, not just shrink or dip in 2D. Hovering off-center continuously pulls
   the wheel that direction (js); click either side still nudges one step, and
   drag still works too. Side padding lets the first/last item reach center. */
.cap-strip{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.4rem calc(50% - 58px) 1.2rem;scrollbar-width:none;margin-bottom:1rem;cursor:grab;touch-action:pan-x;perspective:1000px}
.cap-strip::-webkit-scrollbar{display:none}
.cap-strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.cap-strip.is-pulling{scroll-snap-type:none}
.cap-item{scroll-snap-align:center;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:92px;padding:.9rem .7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-1);color:var(--ink-dim);text-align:center;user-select:none;will-change:transform}
.cap-item .icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.cap-item .icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s ease}
.cap-item:hover .icon svg{transform:rotate(360deg)}
.cap-item .cap-label{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.cap-item[aria-pressed="true"]{border-color:var(--orange);color:var(--ink);background:var(--bg-2)}
.cap-item[aria-pressed="true"] .icon{color:var(--orange)}
.cap-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
@media(max-width:820px){.cap-stage{grid-template-columns:1fr}}
.cap-visual-wrap{position:relative;min-height:340px}
@media(max-width:820px){.cap-visual-wrap{min-height:280px}}
.cap-visual{position:absolute;inset:0;opacity:0;transform:translateX(12px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;display:flex;align-items:center;justify-content:center}
.cap-visual.is-active{position:relative;opacity:1;transform:none;pointer-events:auto}
.cap-caption-wrap{min-height:2.4em}
.cap-caption{font-size:1.02rem;color:var(--ink-dim);max-width:52ch}
.cap-caption strong{color:var(--ink)}

/* ---------- Device frame (mobile screenshots) ---------- */
.device-frame{--dfw:230px;width:var(--dfw);max-width:100%;aspect-ratio:9/19.5;border-radius:30px;border:8px solid var(--bg-2);background:var(--bg-1);box-shadow:var(--shadow),0 0 44px rgba(201,119,61,.14);overflow:hidden;position:relative;margin:0 auto;padding:9px;transform:var(--tilt,none);cursor:grab}
.device-frame.is-tilting{transition:none!important;cursor:grabbing;will-change:transform}
.device-frame img{-webkit-user-drag:none;user-drag:none}
.device-frame::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36%;height:5px;border-radius:3px;background:var(--bg-2);z-index:2}
@media(min-width:900px){.device-frame{--dfw:270px}}
@media(max-width:640px){.device-frame{border-width:4px;border-radius:18px;padding:6px}.device-frame::after{display:none}}
.device-frame .ph{border:0;border-radius:0;min-height:0}
/* Some sources aren't phone screenshots at all — a wide dashboard card, for
   instance. Forcing those into the 9:19.5 phone frame above would badly
   letterbox them. This is the plain-card equivalent: own aspect ratio, no
   notch, no phone bezel. */
.card-frame{width:min(360px,100%);aspect-ratio:var(--card-aspect,1.28);border-radius:16px;border:1px solid var(--line);background:var(--bg-1);box-shadow:var(--shadow);overflow:hidden;position:relative;margin:0 auto}
.card-frame > img{width:100%;height:100%;object-fit:contain;filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
@media(min-width:900px){.card-frame{width:min(420px,100%)}}
/* Real app screenshots keep whitespace (contain, not crop — the frame's own
   padding+background above stays dark since the filter below applies only
   to the image's own pixels, not the padding it sits inside) and get a CSS
   pseudo-dark-mode filter so light-UI captures read dark against the site. */
.device-frame > img{object-fit:contain;filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
/* Screens that show real documents (forms, receipts) stay in their natural
   light coloring — inverting an actual paper document reads wrong. */
.device-frame > img.no-invert{filter:none}

/* Some source screenshots already have a dark accent card baked in (navy,
   near-black, etc). The blanket invert above flips that card *light* — the
   "opaque light-blue-white box" problem. A tint layered on top of that
   wrongly-inverted result still reads as a light box with a color cast, not
   a dark one — it doesn't remove the white fill, it just masks over it.

   Real fix: a second, un-filtered copy of the same image, clipped down to
   exactly the card's own rectangle, laid on top of the (otherwise inverted)
   first copy — so that region shows its own true, already-dark original
   coloring instead of the inverted one. The translucent tint then sits on
   top of THAT correctly-dark base, not over the light mistake. */
.device-frame .card-original{position:absolute;inset:0;object-fit:contain;filter:none;z-index:1}
/* Tint box overshoots the card-original clip above by a SMALL margin only
   (~0.5pp) — just enough to swallow the clip-path's anti-aliased edge.
   Overshooting further (tried ~1.5-2pp first) reaches into the card's own
   drop-shadow gradient in the source screenshot, which inverts to a
   mid-tone ring — tinting that ring made it read as a visible light border
   around the card, the opposite of what this is supposed to fix. */
.device-frame .card-tint{position:absolute;pointer-events:none;border-radius:14px;z-index:2}
/* Rebuilt from the original (non-inverted) source screenshots, measured
   fresh via pixel sampling. Dark blue / red / white per spec.
   Cash-on-hand's first pass used a coarse scan that a bright graph-line
   pixel threw off by over 1pp at the bottom edge — re-measured with a
   dedicated per-pixel boundary scan (3 x-samples, transition-point
   detection) instead of a coarse dark/light threshold sweep.

   Deeper bug found after that still wasn't enough: clip-path percentages
   on an absolutely-positioned (inset:0) image resolve against that image's
   own rendered box — which sizes to the parent's PADDING box (270x585),
   not its full border box. The device-frame's 8px border was being
   silently folded into the letterbox math, throwing the frame aspect
   ratio off by ~3.4% — enough to misplace the clip boundary by over 1
   full point and reveal a sliver of true source (page background, not
   card) at the top. Recomputed using the padding-box aspect (254x569)
   for all three cards, not just this one. */
.tint-cash-on-hand .card-original{clip-path:inset(14.1% 3.98% 59.37% 4.06% round 14px)}
.tint-cash-on-hand .card-tint{left:4.3%;right:4.4%;top:14.4%;height:25.9%;background:rgba(12,20,42,.72)}
.tint-expenses .card-original{clip-path:inset(28.06% 6.15% 59.81% 6.24% round 14px)}
.tint-expenses .card-tint{left:6.5%;right:6.6%;top:28.3%;height:11.6%;background:rgba(224,101,79,.42)}
.tint-invoices .card-original{clip-path:inset(28.06% 4.1% 60.35% 4.19% round 14px)}
.tint-invoices .card-tint{left:4.5%;right:4.6%;top:28.3%;height:11.1%;background:rgba(244,241,236,.3)}

/* ---------- Cash Runway ghost-phone toggle (calendar <-> balance breakdown) ---------- */
.runway-toggle{position:relative;width:var(--dfw,230px);aspect-ratio:9/19.5;margin:0 auto}
@media(min-width:900px){.runway-toggle{--dfw:270px}}
.runway-phone{position:absolute;top:0;left:0;margin:0;padding:9px;border:0;font:inherit;color:inherit;cursor:pointer;
  transition:transform .5s cubic-bezier(.22,.9,.32,1),opacity .5s ease,filter .5s ease}
/* Same visibility as the .frame-stack ghost card elsewhere on the site —
   opacity only, no brightness/blur filter, so the ghost phone stays clearly
   readable (not a near-invisible smudge) against the dark backdrop. */
.runway-front{transform:translate(0,0) scale(1) rotate(0deg) var(--tilt,none);opacity:1;z-index:2}
.runway-back{transform:translate(18px,16px) scale(.94) rotate(5deg) var(--tilt,none);opacity:.6;z-index:1}
.runway-toggle[data-runway-state="back"] .runway-front{transform:translate(18px,16px) scale(.94) rotate(-5deg) var(--tilt,none);opacity:.6;z-index:1}
.runway-toggle[data-runway-state="back"] .runway-back{transform:translate(0,0) scale(1) rotate(0deg) var(--tilt,none);opacity:1;z-index:2}

/* ---------- Frame stack (slider-card look behind the active capability visual) ---------- */
.frame-stack{position:relative;display:inline-flex}
.frame-stack::before{content:"";position:absolute;inset:0;border-radius:30px;border:8px solid var(--bg-2);background:var(--bg-1);transform:translate(18px,16px) rotate(5deg);opacity:.5;box-shadow:var(--shadow);z-index:0}
.frame-stack .device-frame{position:relative;z-index:1}
@media(max-width:640px){.frame-stack::before{transform:translate(11px,10px) rotate(4deg);border-width:4px;border-radius:18px}}

/* ---------- Founders ---------- */
.founders{display:flex;flex-direction:column;gap:1.4rem}
.founder{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;display:grid;grid-template-columns:230px 1fr;gap:1.8rem;align-items:start}
@media(max-width:720px){.founder{grid-template-columns:1fr}}
.founder .headshot-wrap{width:100%;max-width:260px}
@media(max-width:720px){.founder .headshot-wrap{max-width:220px;margin:0 auto}}
.founder .headshot{width:100%;aspect-ratio:1/1;border-radius:var(--radius);object-fit:cover;border:1px solid var(--line);filter:grayscale(.15) contrast(1.05)}
.founder h3{font-size:1.4rem}
.founder .role-line{color:var(--orange);font-weight:700;font-size:.9rem;margin:.3rem 0 .15rem}
.founder .school{font-size:.83rem;color:var(--ink-dim);margin-bottom:.9rem}
.founder .preview{color:var(--ink-dim);font-size:.98rem}
.founder .readmore{background:none;border:0;color:var(--orange);font-weight:700;font-size:.9rem;padding:.8rem 0 0;display:inline-flex;align-items:center;gap:.4rem;transition:opacity .2s}
.founder .readmore:hover{opacity:.72}
.founder .bio{max-height:0;overflow:hidden;transition:max-height .35s ease}
.founder .bio-inner{padding-top:1rem;color:var(--ink-dim);font-size:.95rem;border-top:1px solid var(--line);margin-top:1rem}

/* ---------- About hero photo grid (asymmetric, not a plain grid) ---------- */
.about-hero-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:170px 170px;gap:1rem;margin-top:2.8rem}
.about-hero-grid .t1{grid-row:1/3}
.about-hero-grid .t4{grid-column:2/4}
.about-hero-grid .tile{border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--line)}
@media(max-width:820px){
  .about-hero-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,150px)}
  .about-hero-grid .t1{grid-row:auto;grid-column:1/3}
  .about-hero-grid .t4{grid-column:1/3}
}

/* ---------- Forms ---------- */
.form-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;max-width:720px;margin:0 auto}
@media(max-width:640px){.form-card{padding:1.4rem}}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:640px){.f-row{grid-template-columns:1fr}}
.f-group{margin-bottom:1.15rem}
label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.4rem;color:var(--ink)}
label .req{color:var(--orange)}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font-family:inherit;font-size:.97rem;padding:.75rem .9rem;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--bg-0);color:var(--ink);transition:border-color .15s;min-height:48px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A6ACB3' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
.f-group.error input,.f-group.error select,.f-group.error textarea,fieldset.error{border-color:var(--danger)}
.err-msg{display:none;color:var(--danger);font-size:.82rem;margin-top:.35rem;font-weight:500}
.f-group.error .err-msg,fieldset.error + .err-msg,fieldset.error .err-msg{display:block}
fieldset{border:1.5px solid var(--line-strong);border-radius:5px;padding:.9rem 1rem;margin-bottom:0}
legend{font-weight:700;font-size:.88rem;padding:0 .4rem;color:var(--ink)}
.radio-row{display:flex;gap:1.6rem;flex-wrap:wrap}
.radio-row label,.consent label{display:flex;align-items:center;gap:.55rem;font-weight:500;margin:0;font-size:.95rem;color:var(--ink)}
input[type=radio],input[type=checkbox]{width:19px;height:19px;accent-color:var(--orange)}
.consent{margin:1.2rem 0}
.form-note{font-size:.85rem;color:var(--ink-dim);margin-top:1rem}
.form-success{display:none;text-align:center;padding:2.5rem 1rem}
.form-success .check-big{width:60px;height:60px;border-radius:50%;background:var(--orange);color:#0A0C0E;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1.2rem}
.spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(10,12,14,.35);border-top-color:#0A0C0E;border-radius:50%;animation:spin .7s linear infinite}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn-txt{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Footer ---------- */
footer{background:var(--bg-1);color:var(--ink-dim);padding:3.5rem 0 2rem;font-size:.92rem;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr}}
footer .wordmark{color:var(--ink)}
footer .foot-note{margin-top:1rem;font-size:.85rem;max-width:38ch}
footer nav ul{list-style:none}
footer nav li{margin-bottom:.55rem}
footer a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:var(--ink-dim)}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

.section-head{max-width:720px;margin-bottom:2.6rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{margin-top:1rem}
.statement{background:var(--bg-1);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius);padding:1.3rem 1.6rem;color:var(--ink-dim);max-width:760px;margin:2.2rem auto 0;font-size:.98rem}
.statement strong{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}