/* Control-panel layout on a soft UI surface. One grey; depth from stacked faint
   shadows plus a white top highlight (raised) or inset shadows (pressed). Type and
   the primary button stay solid black. Left-aligned throughout: the page reads like
   an instrument, not a centred landing page. */

@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  --surface:#f5f5f5;
  --ink:#000;
  --muted:#4d4d4d;
  --faint:#8c8c8c;
  --soft:
    0 .7px .7px -.67px rgba(0,0,0,.08), 0 1.8px 1.8px -1.33px rgba(0,0,0,.08),
    0 3.6px 3.6px -2px rgba(0,0,0,.07), 0 6.9px 6.9px -2.67px rgba(0,0,0,.07),
    0 13.6px 13.6px -3.33px rgba(0,0,0,.05), 0 30px 30px -4px rgba(0,0,0,.02),
    inset 0 3px 1px 0 #fff;
  --soft-sm:
    0 .7px .7px -.67px rgba(0,0,0,.1), 0 1.8px 1.8px -1.33px rgba(0,0,0,.09),
    0 3.6px 3.6px -2px rgba(0,0,0,.08), 0 10px 14px -4px rgba(0,0,0,.08),
    inset 0 2px 1px 0 #fff;
  --press:inset 0 2px 5px rgba(0,0,0,.09), inset 0 -2px 1px #fff;
  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--surface); color:var(--ink); font-family:var(--font); font-size:1rem; line-height:1.5}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
h1,h2,h3{text-wrap:balance}
a:focus-visible{outline:2px solid var(--ink); outline-offset:4px}

.frame{max-width:80rem; margin-inline:auto; padding-inline:1.25rem}
@media (min-width:640px){.frame{padding-inline:2.5rem}}

/* Buttons and pills */
.btn{display:inline-flex; align-items:center; justify-content:center; font-weight:500; font-size:.95rem;
  text-decoration:none; border-radius:12px; padding:.85rem 1.4rem; transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6rem 1.1rem; font-size:.9rem}
/* Buttons as small physical tiles: lit from the top left, a bright top edge, a darker lower
   edge and a layered shadow. They lift a touch on hover and press in when clicked. */
.btn{position:relative; isolation:isolate; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit}
.btn-ink{color:#fff; background:linear-gradient(160deg,#3d3d3d 0%,#141414 48%,#000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.6),
    0 1px 2px rgba(0,0,0,.3), 0 8px 18px -8px rgba(0,0,0,.55), 0 18px 30px -20px rgba(0,0,0,.45)}
.btn-ink::after{background:radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.2), rgba(255,255,255,0) 55%)}
.btn-soft{background:linear-gradient(160deg,#ffffff 0%,#f4f4f4 48%,#e6e6e6 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05),
    0 1px 2px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.18), 0 18px 28px -18px rgba(0,0,0,.22)}
.btn-soft::after{background:radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%)}
.btn-ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.6),
    0 2px 3px rgba(0,0,0,.3), 0 12px 22px -8px rgba(0,0,0,.55), 0 24px 36px -20px rgba(0,0,0,.45)}
.btn-soft:hover{box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05),
    0 2px 3px rgba(0,0,0,.08), 0 10px 18px -6px rgba(0,0,0,.2), 0 24px 34px -18px rgba(0,0,0,.24)}
.btn:active{transform:translateY(1px)}
.btn-ink:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.3)}
.btn-soft:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.1), inset 0 -1px 0 #fff, 0 0 0 1px rgba(0,0,0,.05)}
.pill{display:inline-block; font-size:.85rem; font-weight:500; padding:.5rem 1rem; border-radius:999px; box-shadow:var(--soft-sm)}
.chip{font-weight:500; text-decoration:none; padding:.75rem 1.3rem; border-radius:999px; box-shadow:var(--soft-sm)}

/* Nav */
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding-block:1.25rem}
.wordmark{font-weight:700; font-size:1.15rem; text-decoration:none; letter-spacing:-.02em}
.wordmark span{color:var(--faint)}

/* Hero */
.hero{display:grid; gap:3.5rem; align-items:center; padding-block:4rem 6rem}
@media (min-width:1000px){.hero{grid-template-columns:1fr; gap:4rem; min-height:calc(100svh - 5rem); padding-block:2rem 5rem}}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem}
.hero h1{font-weight:500; font-size:clamp(2.5rem,4.8vw,4.25rem); line-height:1.05; letter-spacing:-.025em}
.hero h1 span{display:block}
.hero-sub{font-size:1.1rem; line-height:1.6; color:var(--muted); max-width:32rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem}

/* Console */
.console{border-radius:28px; padding:1rem; box-shadow:var(--soft); display:flex; flex-direction:column; gap:1rem; width:100%; max-width:30rem; justify-self:center}
.screen{border-radius:20px; box-shadow:var(--press); padding:1.25rem; display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center}
.readout{font-size:.78rem; font-weight:500; color:var(--faint)}
.gauge{display:flex; flex-direction:column; align-items:center; gap:.6rem}
.dial{position:relative; width:7.5rem; height:7.5rem; border-radius:50%; box-shadow:var(--soft)}
.tick{position:absolute; left:50%; top:50%; width:.35rem; height:.35rem; margin:-.175rem; border-radius:50%; background:var(--faint);
  transform:rotate(var(--a)) translateY(-2.9rem)}
.t1{--a:-120deg} .t2{--a:-60deg} .t3{--a:0deg} .t4{--a:60deg} .t5{--a:120deg}
/* needle points up at 0deg; -120deg = low end, +120deg = high end */
.needle{position:absolute; left:50%; bottom:50%; width:.4rem; height:2.5rem; margin-left:-.2rem; border-radius:999px; background:var(--ink);
  transform-origin:50% 100%; transform:rotate(80deg)}
.dial::after{content:""; position:absolute; left:50%; top:50%; width:1.1rem; height:1.1rem; margin:-.55rem; border-radius:50%; background:var(--surface); box-shadow:var(--soft-sm)}
.traces{display:flex; flex-direction:column; gap:.55rem}
.trace{height:.85rem; border-radius:999px; box-shadow:var(--soft-sm); width:100%}
.trace.short{width:62%} .trace.mid{width:80%}
.trace.fail{width:90%; background:var(--ink); box-shadow:0 6px 12px -6px rgba(0,0,0,.5)}

.switches{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.switches li{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 1rem; border-radius:16px; box-shadow:var(--soft-sm); font-weight:500; font-size:.92rem}
.sw{position:relative; flex-shrink:0; width:2.6rem; height:1.5rem; border-radius:999px; box-shadow:var(--press)}
.sw::after{content:""; position:absolute; top:.2rem; left:.2rem; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--surface); box-shadow:var(--soft-sm)}
.sw.on{background:var(--ink)} .sw.on::after{transform:translateX(1.1rem)}

/* The one orchestrated moment: fallbacks switch on, the failing trace clears, the dial swings up */
@media (prefers-reduced-motion:no-preference){
  .needle{transform:rotate(-70deg); animation:swing 1.2s cubic-bezier(.3,1.35,.5,1) 1.9s forwards}
  .sw.flip{animation:swbg .3s ease 1.5s forwards}
  .sw.flip::after{animation:knob .3s ease 1.5s forwards}
  .trace.fail{animation:clear .5s ease 1.8s forwards}
}
@media (prefers-reduced-motion:reduce){
  .sw.flip{background:var(--ink)} .sw.flip::after{transform:translateX(1.1rem)}
  .trace.fail{background:transparent; box-shadow:var(--soft-sm)}
}
@keyframes swing{from{transform:rotate(-70deg)} to{transform:rotate(80deg)}}
@keyframes swbg{to{background:var(--ink)}}
@keyframes knob{to{transform:translateX(1.1rem)}}
@keyframes clear{to{background:transparent; box-shadow:var(--soft-sm)}}

/* Hero visual (drawn by field.js): dot waves behind, dithered dashboard in front */
.hero{position:relative; isolation:isolate}
.waves{position:absolute; z-index:-1; top:0; bottom:0; overflow:hidden; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%)}
.waves canvas{width:100%; height:100%; display:block}
/* Depth behind the waves, monochrome only: a white bloom behind the headline and
   the call card, and a slightly deeper floor where the waves roll, so the hero
   reads as a lit room with a horizon rather than a flat sheet. */
.hero::before{content:""; position:absolute; z-index:-2; top:-6rem; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); pointer-events:none;
  background:
    radial-gradient(ellipse 45% 55% at 28% 42%, rgba(255,255,255,1), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 30% 45% at 76% 48%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    /* horizon: a darker band where the waves meet the distance */
    radial-gradient(ellipse 90% 6% at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,0) 100%),
    /* floor shading under the near waves */
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.06) 80%, rgba(0,0,0,0) 100%),
    /* vignette: the edges fall off so the centre reads as lit */
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.15) 100%),
    /* sky to floor: a touch darker overhead, brightest at the horizon, deeper on the floor */
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.1) 100%)}
/* The call card */
.call{position:relative; width:100%; max-width:26rem; justify-self:center; border-radius:28px; padding:1.25rem 1.5rem 1.75rem;
  background:var(--surface); box-shadow:var(--soft), 0 40px 60px -30px rgba(0,0,0,.18); display:flex; flex-direction:column; align-items:center; gap:1rem}
/* the card hovers above the waves: a soft shadow cast on the floor below it */
.call::after{content:""; position:absolute; z-index:-1; left:12%; right:12%; bottom:-3.2rem; height:1.6rem;
  border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.16), rgba(0,0,0,0) 70%);
  filter:blur(6px); pointer-events:none}
.call-head{align-self:stretch; display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:500; color:var(--muted)}
.call-time{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--faint)}
.rec{width:.5rem; height:.5rem; border-radius:50%; background:var(--ink)}
@media (prefers-reduced-motion:no-preference){.call.live .rec{animation:blinkrec 1.6s ease-in-out infinite}}
@keyframes blinkrec{50%{opacity:.25}}
.orb{position:relative; width:min(15rem,70%); aspect-ratio:1; border-radius:50%; box-shadow:var(--press); padding:.6rem;
  transform:scale(var(--amp,1)); transition:transform .4s ease}
.orb-shader{position:absolute; inset:.6rem; border-radius:50%; overflow:hidden}
.who{font-weight:500}
/* Voice controls under the sphere */
.voice{display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding-top:.5rem}
.play{display:grid; place-items:center; width:2.75rem; height:2.75rem; border:0; border-radius:50%; cursor:pointer;
  background:var(--ink); color:#fff; box-shadow:0 10px 20px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .15s ease}
.play:hover{transform:scale(1.04)}
.play:active{transform:scale(.97)}
.play:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.play svg{width:1.05rem; height:1.05rem; fill:currentColor}
.play .i-stop{display:none}
.call.live .play .i-play{display:none}
.call.live .play .i-stop{display:block}
.play-label{font-size:.9rem; font-weight:500; color:var(--muted)}
.call .rec{opacity:.25}
.call.live .rec{opacity:1}
html,body{overflow-x:clip}

/* Sections */
.note{padding-block:4rem}
.track-section,.scope{padding-block:6.25rem}
.statement{font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:500; line-height:1.35; letter-spacing:-.015em; max-width:34ch}
.founder{display:flex; align-items:center; gap:.6rem; color:var(--muted); margin-top:2.25rem}
.founder-line{color:var(--ink)}
.avatar{flex-shrink:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.65rem; font-weight:700; box-shadow:var(--soft-sm)}
@media (min-width:1000px){.note{display:grid; grid-template-columns:1fr auto; align-items:end; gap:3rem} .founder{margin-top:0}}

.section-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.75rem 2rem; margin-bottom:3.5rem}
.section-head h2,.scope h2{font-weight:500; font-size:clamp(2rem,4vw,3.25rem); line-height:1.1; letter-spacing:-.015em}
.section-head p{color:var(--muted)}

/* The 10-day rail */
.rail{position:relative; height:4.75rem; display:none}
@media (min-width:860px){.rail{display:block}}
.groove{position:absolute; left:0; right:0; top:.85rem; height:1rem; border-radius:999px; box-shadow:var(--press)}
.fill{position:absolute; left:.25rem; right:.25rem; top:.25rem; bottom:.25rem; background:var(--ink); border-radius:999px}
.rail-px{position:absolute; left:0; right:0; top:0; width:100%; height:2.6rem}
.days{position:absolute; left:0; right:0; top:3.25rem; display:flex; justify-content:space-between; font-size:.8rem; color:var(--faint); padding-inline:.9rem}
.stop{position:absolute; top:0; width:2.6rem; height:2.6rem; margin-left:-1.3rem; border-radius:50%; background:var(--surface); box-shadow:var(--soft)}
.stop::after{content:""; position:absolute; inset:.9rem; border-radius:50%; background:var(--ink)}
.s1{left:1.3rem} .s2{left:calc(1.3rem + (100% - 2.6rem) * 4 / 9)} .s3{left:calc(100% - 1.3rem)}

.stops{display:grid; gap:1.5rem; margin-top:1.25rem}
@media (min-width:860px){.stops{grid-template-columns:4fr 4fr 3fr; gap:1.5rem}}
.stops li{padding:1.75rem; border-radius:22px; box-shadow:var(--soft); transition:transform .25s ease, opacity .25s ease}
.stops:has(.is-active) li{opacity:.55}
.stops li.is-active{opacity:1; transform:translateY(-4px)}
.rail{cursor:ew-resize}
.when{font-size:.85rem; font-weight:500; color:var(--faint)}
.stops h3{font-weight:500; font-size:1.35rem; letter-spacing:-.01em; margin:.4rem 0 .6rem}
.stops li p:last-child{color:var(--muted); line-height:1.6}
.promise{margin-top:2.5rem; color:var(--muted); line-height:1.7; font-size:.95rem}

/* Scope bank */
.scope{display:grid; gap:2.5rem}
@media (min-width:1000px){.scope{grid-template-columns:1.5fr 1fr; align-items:stretch; column-gap:4rem; padding-block:8rem}}
/* Scope as a live trace: one request, one line per layer, filling in as it passes */
.scope-lede{color:var(--muted); font-size:1.05rem; line-height:1.6; max-width:24rem; margin-top:1.25rem}
.trace-card{margin:0; border-radius:28px; padding:1.75rem 2rem 2rem; background:var(--surface); box-shadow:var(--soft);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.9rem; min-width:0}
.trace-head{display:flex; align-items:center; gap:.6rem; color:var(--faint); padding-bottom:1.25rem; margin-bottom:.75rem;
  border-bottom:1px dashed color-mix(in srgb,#000 12%,transparent)}
.trace-clock{margin-left:auto; font-variant-numeric:tabular-nums}
.tlist{display:flex; flex-direction:column}
.tr{display:grid; grid-template-columns:22px 9.5rem 1fr auto; align-items:center; gap:.9rem; padding:.95rem 0;
  border-bottom:1px solid color-mix(in srgb,#000 5%,transparent); transition:opacity .35s ease}
.tr:last-child{border-bottom:0}
.tr .px{width:22px; height:22px}
.tn{font-family:var(--font); font-weight:500; font-size:.98rem}
.td{color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tt{color:var(--faint); font-variant-numeric:tabular-nums}
.tr.warn .td,.tr.warn .tt{color:var(--ink); text-decoration:line-through; text-decoration-color:color-mix(in srgb,#000 35%,transparent)}
.trace-card.is-playing .tr{opacity:.18} .trace-card.is-playing .tr.on{opacity:1}
.trace-card.is-playing .tr:not(.on) .td{visibility:hidden}
.trace-bar{display:flex; gap:3px; margin-top:1.5rem; height:10px}
.trace-bar i{flex:1; background:color-mix(in srgb,#000 8%,transparent)}
.trace-bar i.f{background:var(--ink)}
@media (max-width:640px){.tr{grid-template-columns:22px 1fr auto} .td{grid-column:2 / -1; grid-row:2; white-space:normal}}
.scope-out{color:var(--muted); grid-column:1/-1}
@media (min-width:1000px){.scope-out{grid-column:2}}

/* Facts */
.facts{display:grid; gap:1.25rem; padding-block:1rem 4rem}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts p{border-radius:20px; box-shadow:var(--press); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.25rem}
.facts strong{font-weight:500; font-size:2.2rem; letter-spacing:-.015em; line-height:1.1}
.facts span{color:var(--muted)}
.facts p.facts-promise{grid-column:1 / -1; box-shadow:none; padding:.25rem 0 0; color:var(--muted); line-height:1.7}

.built{padding-block:2rem 3rem}

/* Contact: an inset panel with a chrome code bracket */
.contact{padding-block:1rem 5rem}
.contact-panel{border-radius:32px; padding:3rem 1.75rem; box-shadow:var(--press); display:grid; gap:2rem; align-items:center}
@media (min-width:900px){.contact-panel{grid-template-columns:1fr auto; padding:4rem 4.5rem; gap:3rem}}
.contact-copy{display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem}
.contact-copy h2{font-weight:500; font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; letter-spacing:-.025em}
.contact-copy p{color:var(--muted); font-size:1.1rem}
.contact-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem}
.contact-mark{width:min(100%,24rem); height:auto; justify-self:center}
.glyph-xl{fill:none; stroke:url(#metal); stroke-width:30; stroke-linecap:round; stroke-linejoin:round; filter:url(#metal-drop)}
/* Who builds it: one panel, the founder on the left, what we have shipped on the right */
.built-panel{display:grid; gap:2rem; padding:1.75rem; border-radius:28px; box-shadow:var(--soft)}
@media (min-width:860px){.built-panel{grid-template-columns:1fr 1fr; gap:0; padding:2.25rem 2.5rem; align-items:center}
  .shipped{padding-left:2.5rem; border-left:1px solid color-mix(in srgb,#000 8%,transparent)}}
.founder{display:flex; align-items:center; gap:1.25rem}
.founder .portrait{width:5.75rem; height:5.75rem}
.founder-name{font-weight:500; font-size:1.55rem; letter-spacing:-.015em; line-height:1.15}
.founder-role{color:var(--muted); margin-top:.2rem}
.founder-links{list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.founder-links a{display:inline-block; text-decoration:none; font-size:.85rem; font-weight:500; color:var(--ink);
  padding:.45rem .85rem; border-radius:10px; box-shadow:var(--soft-sm); transition:transform .15s ease}
.founder-links a:hover{transform:translateY(-1px)}
.eyebrow{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:.9rem}
.shipped-list{list-style:none; margin:0; padding:0; display:grid; gap:.65rem}
.ship-card{display:grid; grid-template-columns:1fr auto; column-gap:1rem; padding:.95rem 1.2rem; border-radius:16px;
  box-shadow:var(--press); text-decoration:none; color:var(--ink); transition:box-shadow .2s ease, background .2s ease}
.ship-card:hover{background:#fff; box-shadow:var(--soft-sm)}
.ship-name{font-weight:500}
.ship-desc{grid-column:1; color:var(--muted); font-size:.9rem}
.ship-arrow{grid-column:2; grid-row:1 / 3; align-self:center; color:var(--faint); transition:transform .2s ease}
.ship-card:hover .ship-arrow{transform:translate(2px,-2px); color:var(--ink)}
/* Recommendations from imranai.design/resume: their exact words, trimmed with "…" and never
   reworded (2026-10-26). Swap in new client-facing lines when they send them. */
.quotes{list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:1rem}
@media (min-width:860px){.quotes{grid-template-columns:1fr 1fr}}
.quote{padding:1.5rem 1.75rem; border-radius:24px; box-shadow:var(--soft); display:flex; flex-direction:column; justify-content:space-between; gap:1.1rem}
.quote blockquote{margin:0; line-height:1.6}
.quote blockquote::before{content:"\201C"} .quote blockquote::after{content:"\201D"}
.quote-by{font-weight:500; font-size:.95rem}
.quote-by span{display:block; color:var(--muted); font-weight:400; font-size:.85rem; margin-top:.15rem}

.footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; padding-block:2.5rem; font-size:.9rem; color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* Right of the console: the layer it is on, explained. Eight pixel nodes track the
   request; the current step's sentence shows large, the rest stay listed quietly. */
.explain{display:flex; flex-direction:column; min-width:0; gap:2rem}
@media (min-width:1000px){.explain{justify-content:space-between; padding-block:1.75rem 2rem}}
.explain h2{line-height:1}
.xpath{display:flex; align-items:center; gap:0}
.xpath i{width:14px; height:14px; flex-shrink:0; box-shadow:var(--press); background:var(--surface)}
.xpath i + i{margin-left:calc((100% - 8 * 14px) / 7)}
.xpath i.done{background:color-mix(in srgb,#000 30%,var(--surface)); box-shadow:none}
.xpath i.now{background:var(--ink); box-shadow:none; transform:scale(1.25)}
.xpath i.warn.done{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 4px)}
.xcount{font-family:ui-monospace,"SF Mono",Menlo,monospace; color:var(--faint); font-size:.85rem; margin-top:.9rem;
  font-variant-numeric:tabular-nums}
.xsteps{display:flex; flex-direction:column; gap:.9rem; margin-top:1rem}
.xsteps li{display:flex; flex-direction:column; gap:.25rem}
.xn{font-weight:500} .xd{color:var(--muted); line-height:1.55}
/* with JS: only the current step shows, large */
.explain.is-playing .xsteps{display:grid; margin-top:0; min-height:9.5rem; align-content:start}
.explain.is-playing .xsteps li{grid-area:1 / 1; align-self:start; opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease}
.explain.is-playing .xsteps li.now{opacity:1; transform:none; transition:opacity .4s ease .15s, transform .4s ease .15s}
.explain.is-playing .xn{font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.01em; line-height:1.15}
.explain.is-playing .xd{font-size:1.1rem; max-width:26rem}
.explain:not(.is-playing) .xcount{display:none}

/* Data sources and data handling, before the offer row */
.sources,.handling{padding-block:5rem}
.sources h2,.handling h2{font-weight:500; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; letter-spacing:-.015em; margin:0 0 2.5rem}
.marquee{display:grid; gap:1rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{list-style:none; margin:0; padding:.5rem 0; display:flex; gap:1rem; width:max-content}
.marquee-row li{flex:none; width:5.5rem; height:5.5rem; display:flex; align-items:center; justify-content:center; border-radius:18px; box-shadow:var(--soft-sm); position:relative}
.px-logo{width:2.4rem; height:2.4rem; display:block}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.src-svg{display:none}
@media (prefers-reduced-motion:no-preference){
  .marquee-row.is-moving{animation:marquee var(--marquee-time,90s) linear infinite}
  .marquee-row.is-moving[data-dir="right"]{animation-direction:reverse}
  .marquee:hover .marquee-row{animation-play-state:paused}
}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none; mask-image:none} .marquee-row{flex-wrap:wrap; width:auto}}
.handling-cards{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
@media (min-width:860px){.handling-cards{grid-template-columns:repeat(4,1fr)}}
.handling-cards li{border-radius:20px; padding:2rem 1.75rem;
  /* lighter than --soft-sm: on cards this wide its 10px drop read as a dark band (Imran, 2026-10-26) */
  box-shadow:0 .7px .7px -.67px rgba(0,0,0,.06), 0 1.8px 1.8px -1.33px rgba(0,0,0,.05), 0 6px 10px -6px rgba(0,0,0,.05), inset 0 2px 1px 0 #fff; display:flex; flex-direction:column; gap:.4rem}
.handling-cards .px-logo{width:2.75rem; height:2.75rem; margin-bottom:.75rem}
.handling-cards .tile-icon{width:5.8rem; height:auto; overflow:visible; margin:-.6rem 0 .3rem -.7rem}
.handling-cards strong{font-weight:500; font-size:1.15rem}
.handling-cards span{color:var(--muted)}
.badge-band{margin-top:4rem; padding:3.5rem 1.5rem; border-radius:28px; box-shadow:var(--press); display:flex; flex-direction:column; align-items:center; gap:2rem}
.badge-band > p{margin:0; color:var(--muted); font-weight:500}
.badges{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:2rem}
.badges li{width:10rem; height:10rem; border-radius:50%; box-shadow:var(--soft-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; text-align:center; padding:1rem; position:relative}
.badges li::before{content:""; position:absolute; inset:.45rem; border-radius:50%; border:1.5px dotted var(--faint)}
.badges span{font-family:"Geeza Pro","Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif; font-size:1.05rem; font-weight:600; line-height:1.3; white-space:nowrap}
.badges small{font-size:.72rem; color:var(--muted); line-height:1.2}
.founder-card{display:flex; align-items:center; gap:1.25rem; width:100%; margin-bottom:1.5rem}
.portrait{width:5.5rem; height:5.5rem; border-radius:50%; box-shadow:var(--soft); background:#fff; display:grid; place-items:center; font-weight:500; font-size:1.4rem; overflow:hidden; flex:none}
.portrait img{width:100%; height:100%; object-fit:cover}
.founder-card p{margin:0; display:flex; flex-direction:column}
.founder-card strong{font-weight:500; font-size:1.3rem}
.founder-card span{color:var(--muted)}
.badge-band[hidden]{display:none}
.founder-meta{display:flex; flex-direction:column; gap:.5rem}
.founder-card .founder-links{flex-direction:row; gap:1rem}
.founder-links a{color:var(--ink); font-weight:500; font-size:.92rem; text-underline-offset:3px}

/* Live call: email step, captions and the end panel inside the Aiyaz card */
.call-note{font-size:.85rem; color:var(--muted); text-align:center}
.call-email{display:grid; gap:.5rem; width:100%}
.call-email[hidden], .call-end[hidden]{display:none}
.call-email label{font-size:.85rem; font-weight:500}
.call-email input{font:inherit; font-size:1rem; padding:.6rem .8rem; border-radius:12px; border:1px solid var(--faint); background:#fff; color:var(--ink)}
.call-email input:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.call-privacy{font-size:.78rem; line-height:1.4; color:var(--muted)}
.call-status{min-height:1.2em; font-size:.85rem; color:var(--muted); text-align:center}
.captions{list-style:none; margin:0; padding:0; width:100%; max-height:9rem; overflow-y:auto; display:grid; gap:.35rem; font-size:.85rem; line-height:1.4}
.captions:empty{display:none}
.captions .you{color:var(--muted)}
.captions .aiyaz{color:var(--ink)}
.call-end{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center}
.play:disabled{opacity:.4; cursor:default; transform:none}

/* The /aiyaz page: a wide call card on top, the brief board below */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.aiyaz [hidden]{display:none !important}
.aiyaz{display:grid; gap:1.5rem; padding-block:1.5rem 4rem}
.ai-title{font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.15}
.ai-call{display:flex; align-items:center; gap:1.25rem; padding:1.25rem; border-radius:28px; background:var(--surface); box-shadow:var(--soft)}
.ai-call .orb{width:5.5rem; flex:none}
.ai-call-body{display:grid; gap:.75rem; min-width:0; flex:1}
.ai-live{display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:500}
.ai-live .call-time{margin-left:0}
@media (prefers-reduced-motion:no-preference){.aiyaz[data-state="live"] .ai-live .rec{animation:blinkrec 1.6s ease-in-out infinite}}
.ai-copy{font-size:1.05rem}
.ai-copy:empty{display:none}
.ai-caption{font-size:.95rem; color:var(--muted); min-height:1.4em}
.ai-actions{display:flex; flex-wrap:wrap; gap:.5rem}
.ai-alt{font-size:.85rem; color:var(--muted)}
.ai-alt a{color:var(--ink)}
.ai-board{display:grid; gap:1rem}
.ai-board-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem}
.ai-research{font-size:.85rem; color:var(--muted)}
.ai-board-empty, .ai-wait{font-size:.9rem; color:var(--muted)}
.ai-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:0; padding:0; list-style:none}
@media (min-width:960px){.ai-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ai-card{display:grid; align-content:start; gap:.4rem; padding:.85rem; border-radius:16px; background:var(--surface); box-shadow:var(--soft-sm); font-size:.9rem; overflow-wrap:anywhere}
.ai-card h3{margin:0; font-size:.8rem; font-weight:500; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:.4rem}
.ai-card-icon{width:1.15rem; height:1.15rem; flex:none; color:var(--ink)}
.ai-card p{margin:0}
.ai-card.is-empty, .ai-card.is-to_confirm{box-shadow:none; border:1.5px dashed var(--faint)}
.ai-card.is-empty .ai-card-value{color:var(--muted); font-style:italic}
.ai-card.is-new{outline:2px solid var(--ink); outline-offset:2px}
.ai-tag{display:inline-block; margin-left:.25rem; padding:.05rem .45rem; border-radius:999px; font-size:.72rem; font-weight:500; background:#fef3c7; color:#92400e}
/* Confirmed reads as settled: white card, solid outline, inverted pill. To confirm stays dashed and amber. */
.ai-card.is-confirmed{background:#fff; border:1.5px solid var(--ink); box-shadow:var(--soft-sm)}
.ai-card.is-confirmed .ai-tag{background:var(--ink); color:#fff}
.ai-card.is-confirmed .ai-tag::before{content:"\2713\00a0"}
.ai-card textarea{font:inherit; width:100%; padding:.5rem; border-radius:10px; border:1px solid var(--faint); background:#fff; color:var(--ink)}
.ai-card-tools{display:flex; flex-wrap:wrap; gap:.25rem}
.ai-card-btn{font:inherit; font-size:.8rem; padding:.35rem .5rem; min-height:2rem; border:0; border-radius:8px; background:transparent; text-decoration:underline; text-underline-offset:3px; cursor:pointer; color:var(--ink)}
.ai-card-btn:focus-visible, .ai-card textarea:focus-visible, .ai-talk:focus-visible, .ai-pin:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.ai-source{font-size:.8rem; color:var(--muted)}
.ai-saved{font-size:.9rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.ai-link{overflow-wrap:anywhere; min-width:0}
.ai-pin{position:fixed; top:.75rem; right:.75rem; z-index:20}
@media (max-width:639px){.ai-call{flex-direction:column; align-items:stretch} .ai-call .orb{width:4rem; align-self:center}}
.aiyaz .call-status{font-size:1rem; color:var(--ink); text-align:left}
/* Wide screens: a tall call card on the left that stays in view, the brief stacked on the right. */
@media (min-width:1000px){
  .aiyaz{grid-template-columns:minmax(20rem,26rem) minmax(0,1fr); column-gap:2.5rem; align-items:start}
  .ai-title{grid-column:1 / -1}
  .ai-call{position:sticky; top:1.5rem; flex-direction:column; justify-content:center; text-align:center; gap:2rem; min-height:min(38rem,calc(100svh - 3rem)); padding:2.5rem 2rem}
  .ai-call .orb{width:min(12rem,60%)}
  .ai-call-body{flex:none; width:100%; justify-items:center; gap:1rem}
  .ai-copy{font-size:1.3rem; line-height:1.4}
  .ai-actions{justify-content:center}
  .aiyaz .call-status{text-align:center}
  .ai-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Engagement journey: stacked by default, pinned and scroll-driven once journey.js runs */
.journey{padding-block:4rem}
.journey-stage{display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem 1.25rem}
.journey-stage h3{font-weight:500; font-size:clamp(2.6rem,5vw,4rem); letter-spacing:-.025em; line-height:1}
.journey-stage p{margin-top:.9rem; font-size:1.1rem; color:var(--muted)}
.journey-stage svg{width:min(100%,80rem); height:auto; margin-top:1rem}
.journey-nav{display:none}
.scope-canvas{display:block; width:min(100%,80rem); aspect-ratio:1280 / 520; margin-top:1rem}

.journey.is-pinned{height:400vh; padding:0}
.journey.is-pinned .journey-pin{position:sticky; top:0; height:100svh; overflow:hidden}
.journey.is-pinned .journey-stage{position:absolute; inset:0 0 5rem; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s}
.journey.is-pinned .journey-stage.is-active{opacity:1; visibility:visible; transition:opacity .45s ease .2s}
.journey.is-pinned .journey-nav{display:flex; position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); gap:4px; padding:5px;
  border-radius:14px; box-shadow:var(--press); background:var(--surface)}
.journey-nav button{font:inherit; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.78rem; letter-spacing:.06em;
  color:var(--faint); background:transparent; border:0; border-radius:10px; padding:.7rem 1.1rem; cursor:pointer; white-space:nowrap}
.journey-nav button[aria-current]{color:var(--ink); background:var(--surface); box-shadow:var(--soft-sm)}
.journey-nav button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (max-width:560px){.journey-nav button{padding:.6rem .55rem; font-size:.68rem}}

/* Build, measure and hand over are one strip: their drawings sit side by side, each end node
   on top of the next start node, and journey.js pans the strip left as the page scrolls.
   Their headings swap by stage; their drawings stay visible and are moved by the pan. */
.journey.is-pinned .journey-stage.is-strip{opacity:1; visibility:visible; transition:none; pointer-events:none}
/* Scope recedes as the strip takes over: it shrinks back while it fades */
.journey.is-pinned .journey-stage[data-stage="0"]{transform:scale(.88); transition:opacity .5s ease, transform .8s cubic-bezier(.6,0,.2,1), visibility 0s linear .8s}
.journey.is-pinned .journey-stage[data-stage="0"].is-active{transform:none; transition:opacity .45s ease .1s, transform .8s cubic-bezier(.2,0,.2,1)}
.journey.is-pinned .journey-stage.is-strip h3,.journey.is-pinned .journey-stage.is-strip p{opacity:0; transition:opacity .2s ease}
.journey.is-pinned .journey-stage.is-strip.is-active h3,.journey.is-pinned .journey-stage.is-strip.is-active p{opacity:1; transition:opacity .45s ease .2s}
.journey.is-pinned .journey-stage.is-strip svg{opacity:0; transition:opacity .4s ease; will-change:transform}
.journey.is-pinned.in-strip .journey-stage.is-strip svg{opacity:1}
/* labels on a shared node belong to whichever stage is current, so they never double up */
.journey.is-pinned .journey-stage.is-strip .j-node-label{opacity:0; transition:opacity .3s ease}
.j-node-label{paint-order:stroke; stroke:var(--surface); stroke-width:7px; stroke-linejoin:round}
.journey.is-pinned .journey-stage.is-strip.is-active .j-node-label{opacity:1; transition-delay:.2s}

/* Drawing in: a stage draws when the scroll reaches it and stays drawn once passed */
@media (prefers-reduced-motion:no-preference){
  .journey.is-pinned .journey-stage path{stroke-dasharray:1; stroke-dashoffset:1;
    transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) calc(var(--i,0) * 22ms)}
  /* hand over flows outward, so its lines draw from their far end back toward the team */
  .journey.is-pinned .journey-stage[data-stage="3"] path{stroke-dashoffset:-1}
  .journey.is-pinned .journey-stage.is-seen path{stroke-dashoffset:0}
  .journey.is-pinned .journey-stage circle,.journey.is-pinned .journey-stage rect{opacity:0;
    transition:opacity .5s ease calc(var(--i,0) * 12ms)}
  .journey.is-pinned .journey-stage.is-seen circle,.journey.is-pinned .journey-stage.is-seen rect{opacity:1}
  /* Measure runs in three beats: lines reach the tests, the tests fill, then lines leave for ready to ship */
  .journey.is-pinned .journey-stage[data-stage="2"] .j-in path{transition-duration:1.1s; transition-delay:calc(.2s + var(--i) * 30ms)}
  .journey.is-pinned .journey-stage[data-stage="2"] .j-checks rect{transition-duration:.2s; transition-delay:calc(1.3s + var(--i) * 18ms)}
  .journey.is-pinned .journey-stage[data-stage="2"] .j-out path{transition-duration:1.1s; transition-delay:calc(2.3s + var(--i) * 30ms)}
  .journey.is-pinned .journey-stage[data-stage="2"] .j-fails,
  .journey.is-pinned .journey-stage[data-stage="2"] rect.j-end{opacity:0; transition:opacity .4s ease}
  .journey.is-pinned .journey-stage[data-stage="2"].is-seen .j-fails{opacity:1; transition-delay:2.2s}
  .journey.is-pinned .journey-stage[data-stage="2"].is-seen rect.j-end{opacity:1; transition-delay:3.4s}
  .journey.is-pinned .journey-stage[data-stage="2"].is-active text.j-end{transition-delay:3.4s}
  /* the shared start nodes are already on screen, carried in by the pan */
  .journey.is-pinned .journey-stage.is-seen .j-start rect{opacity:1; transition:none}
  .journey.is-pinned .journey-stage[data-stage="3"] path{transition-delay:calc(.2s + var(--i) * 22ms)}

  /* Scope to build: the four plan groups slide in from Scope's columns and become Build's inputs */
  .journey.is-pinned .j-bundle{transform-box:fill-box; transform-origin:0 0;
    transform:translate(var(--dx),var(--dy)) scale(1,2.125); transition:transform 1.1s cubic-bezier(.6,0,.2,1) .25s}
  .journey.is-pinned .journey-stage.is-seen .j-bundle{transform:none}
  .journey.is-pinned .journey-stage[data-stage="1"] circle{opacity:1; transition:none}
  .journey.is-pinned .journey-stage[data-stage="1"] .j-lines path{transition-delay:calc(1.3s + var(--i) * 6ms)}
  .journey.is-pinned .journey-stage[data-stage="1"] .j-blabels{opacity:0; transition:opacity .4s ease}
  .journey.is-pinned .journey-stage[data-stage="1"].is-seen .j-blabels{opacity:1; transition-delay:1.2s}
  /* Flow: short pulses travel along finished lines (toward the node; outward on hand over) */
  .journey.is-pinned .journey-stage .j-flow{opacity:0; transition:opacity .6s ease}
  .journey.is-pinned .journey-stage .j-flow.is-on{opacity:.7}
  .journey.is-pinned .journey-stage .j-flow path{stroke-dasharray:.22 .78; stroke-dashoffset:1; transition:none;
    animation:j-flow 9s linear infinite; animation-delay:var(--d,0s)}
  .journey.is-pinned .journey-stage .j-flow-rev path{animation-name:j-flow-rev}
  .journey.is-pinned .journey-stage h3,.journey.is-pinned .journey-stage p{transform:translateY(10px); transition:transform .6s ease, opacity .2s ease}
  .journey.is-pinned .journey-stage.is-active h3,.journey.is-pinned .journey-stage.is-active p{transform:none}
}

@keyframes j-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes j-flow-rev{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
/* "What we saw": proof from our own test of their product, under the cards on a lead's page */
.ai-proof{margin-top:1.5rem; display:grid; gap:.75rem}
.ai-proof h3{margin:0; font-size:1rem; font-weight:500}
.ai-proof-note{margin:0; color:var(--muted); font-size:.9rem}
.ai-proof-shots{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
@media (min-width:760px){.ai-proof-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ai-proof-shots li{display:grid; gap:.4rem; padding:.6rem; border-radius:16px; background:var(--surface); box-shadow:var(--soft-sm)}
.ai-proof-shots img{display:block; width:100%; height:auto; border-radius:10px}
.ai-proof-shots p{margin:0; font-size:.85rem; color:var(--muted)}
.ai-proof-file{justify-self:start}