/* Stone Table proof of concept. Every value mirrors design-tokens.json; section numbers refer to
   STONE_TABLE_DESIGN_BLUEPRINT.md. Layout: a sticky stage (hero + one screen of tonal fade) holds the
   funnel still while the stage background tones from basalt to chalk; the light page follows. */
:root{
  --basalt:#0A0D12; --chalk:#EEF0F2; --ink:#10141A; --ink-soft:#5B6370; --rule:#CDD2D9;
  --on-dark:#EDF0F4; --on-dark-soft:#8C94A1; --signal:#3D6BFF; --signal-deep:#2C55E0; --friction-on-light:#B86E0E;
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif; --text:'Geist',ui-sans-serif,system-ui,sans-serif;
  --cine:cubic-bezier(.65,0,.35,1); --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--basalt)}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased}
.inner{max-width:1280px;margin:0 auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}

/* 3. Hero stage: 100svh of hero + 50svh of tonal fade. The canvas is sticky; the stage background is set by script. */
.stage{position:relative;height:150vh;height:150svh;background-color:var(--basalt)}
.funnel{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;pointer-events:none}
.copy{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;pointer-events:none}
.hero-text{position:absolute;left:max(var(--pad),env(safe-area-inset-left,0px));right:var(--pad);bottom:clamp(28px,9vh,96px)}
.hl{margin:0;
  font-family:var(--display);font-stretch:125%;font-weight:520;letter-spacing:-.025em;line-height:1.02;font-size:clamp(32px,4.8vw,76px);
  color:var(--on-dark);text-wrap:balance;opacity:0;transform:translateY(12px);animation:rise 900ms var(--out) 200ms forwards}
@keyframes rise{to{opacity:1;transform:none}}
.sub{margin:clamp(14px,1.6vw,22px) 0 0;font:400 clamp(19px,1.75vw,26px)/1.35 var(--text);letter-spacing:-.005em;color:var(--on-dark-soft);opacity:0;transform:translateY(12px);animation:rise 900ms var(--out) 450ms forwards}
@media(max-width:640px){.sub{font-size:18px;margin-top:12px}}

/* 6.1 Nav (N1): wordmark + one button. Colour follows the ground under it. */
.nav{position:absolute;z-index:30;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) 18px max(var(--pad),env(safe-area-inset-left,0px));
  color:var(--on-dark);opacity:1;transition:opacity 420ms ease}
.nav.away{opacity:0;pointer-events:none}
.nav.closing{color:var(--ink)}
.nav .pill{transition:border-color 600ms var(--cine)}
.nav.light{color:var(--ink)}
.wm{font:600 13px/1 var(--display);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none}

/* 6.2 Button (C2): outline pill; on hover it fills with signal-deep from the cursor's entry point */
.pill{position:relative;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;isolation:isolate;cursor:pointer;
  font:500 15px/1 var(--text);color:currentColor;background:transparent;border:1px solid currentColor;border-radius:999px;padding:14px 22px;text-decoration:none;
  transition:color 600ms var(--cine),border-color 600ms var(--cine)}
.pill::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--signal-deep);clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path 900ms var(--cine)}
.pill:hover,.pill:focus-visible{color:var(--on-dark);border-color:var(--signal-deep)}
.pill:hover::before,.pill:focus-visible::before{clip-path:circle(160% at var(--x,50%) var(--y,50%))}
.pill:active{transform:translateY(1px)}
.pill.big{font-size:17px;padding:20px 30px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* 5. Light page, D1 airy */
section.s{padding-block:clamp(120px,18vh,220px)}
.h2{margin:0;font-family:var(--display);font-stretch:125%;font-weight:520;letter-spacing:-.025em;line-height:1.02;font-size:clamp(34px,4.6vw,68px);text-wrap:balance}
/* 5.1 What we fix: rows */
.rows{margin-top:clamp(56px,8vh,96px)}
 .row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline;gap:clamp(24px,5vw,72px);padding-block:clamp(28px,4vh,40px);border-top:1px solid var(--rule)}
.row:last-child{border-bottom:1px solid var(--rule)}
.row h3{margin:0;font-family:var(--display);font-stretch:125%;font-weight:520;letter-spacing:-.02em;font-size:clamp(22px,2.3vw,34px);line-height:1.15}
.row p{margin:0;color:var(--ink-soft);max-width:52ch;line-height:1.6}
.applications-note,.close-note{margin:24px 0 0;color:var(--ink-soft);max-width:52ch}
.close-note{margin:0}
#stay .h2{max-width:20ch}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:16px}}
/* 5.2 Then we stay: the funnel's own language in three states */
 .steps{margin-top:clamp(56px,8vh,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);row-gap:30px}
.process-art{display:block;grid-column:1/-1;width:100%;height:200px;overflow:visible;pointer-events:none}
.process-art path{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-opacity:.75;vector-effect:non-scaling-stroke}
.process-art path.friction{stroke:var(--friction-on-light);stroke-opacity:.65}
.step{display:grid;gap:14px;align-content:start;min-width:0}
.step h3{margin:0;font-family:var(--display);font-stretch:125%;font-weight:520;letter-spacing:-.02em;font-size:clamp(22px,2.2vw,32px)}
.step p{margin:0;color:var(--ink-soft);max-width:28ch}
.step .step-start{margin-top:4px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink)}
@media(max-width:700px){
  .steps{grid-template-columns:64px minmax(0,1fr);column-gap:24px;row-gap:48px}
  .process-art{grid-column:1;grid-row:1/4;height:100%;align-self:stretch}
  .step{grid-column:2}
  .step:nth-of-type(1){grid-row:1}.step:nth-of-type(2){grid-row:2}.step:nth-of-type(3){grid-row:3}
}
/* 5.3 Close */
.close{display:grid;gap:clamp(28px,4vh,44px);justify-items:start}
.close .h2{font-size:clamp(36px,5.4vw,84px);max-width:15ch}
/* 6.3 Footer: complete wordmark with viewport and safe-area breathing room. */
footer.ft{position:relative;border-top:1px solid var(--rule);padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.ft-top{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;padding-block:28px 0;font-size:14px;color:var(--ink-soft)}
.ft-top a{color:var(--ink);text-decoration:none}
.ft-top>span:empty{display:none}
.ft-name{display:block;font-family:var(--display);font-stretch:125%;font-weight:800;letter-spacing:-.045em;line-height:1.08;white-space:nowrap;
  font-size:clamp(24px,7vw,132px);margin:clamp(24px,5vh,56px) 0 0;color:var(--ink);padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.hl,.sub{opacity:1;transform:none}.a{opacity:1;transform:none}.ar::after{transform:scaleX(1)}}

.skip-link{position:fixed;z-index:100;left:20px;top:-100px;padding:12px 20px;background:var(--chalk);color:var(--ink)}.skip-link:focus{top:12px}
@media(max-width:430px){.nav{gap:16px}.wm{font-size:12px}.nav .pill{font-size:14px;padding:11px 16px}}
@media(max-width:360px){.nav{gap:12px}.wm{font-size:11px}.nav .pill{font-size:13px;padding:10px 14px}}

/* A quiet decorative thread stays in the gutter and ends at the closing action. */
main{position:relative}
.continuity-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.continuity-thread path{fill:none;stroke:var(--signal);stroke-width:1;stroke-opacity:.38;vector-effect:non-scaling-stroke}

@media(max-width:700px){
  footer.ft{padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
  .ft-top{flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-top:28px;text-align:center}
  .ft-top>span:empty{display:none}
  .ft-name{text-align:center;margin-top:28px;padding-inline:max(var(--pad),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
}

/* Compact application rows keep the expanded examples easy to scan. */
.applications .row{padding-block:clamp(24px,3vh,32px)}
#fix .h2{max-width:22ch}

.keep-together{white-space:nowrap}

/* Rough inputs become structured work. Static pairs are the default; on desktop with motion allowed,
   script.js moves one card per lane across a hand-off line and the finished version is revealed exactly
   where the card crosses it. Only transform, opacity and clip-path change. */
.workflow{position:relative;margin:48px 0 64px}.workflow:focus-visible{outline:2px solid var(--signal);outline-offset:8px}
.work-lane{position:relative;container-type:inline-size;min-height:200px;padding:12px 0}
.work-lane:before{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid var(--rule)}
.work-shell{display:grid;grid-template-columns:240px 270px;justify-content:space-between;align-items:center;gap:28px;position:relative}
.work-input,.work-result{background:#F9FAFB;border:1px solid var(--rule);padding:18px 20px;border-radius:3px;color:var(--ink);font-size:14px;line-height:1.5;min-width:0}
.work-input{color:var(--ink-soft)}
.work-result{box-shadow:inset 3px 0 0 var(--signal)}
.workflow small{display:block;font-size:12px;font-weight:500;margin-bottom:10px;color:var(--ink-soft)}
.workflow p{margin:0}.workflow dl{margin:0}.workflow dl>div{display:flex;justify-content:space-between;gap:16px}.workflow dt,.workflow dd{margin:0}
.work-total{border-top:1px solid var(--rule);margin-top:6px;padding-top:6px;font-weight:600}
.workflow em{display:block;font-size:12px;font-style:normal;color:var(--ink-soft);margin-top:10px}.reminder-subject{font-weight:600;margin-bottom:8px!important}
.note-photos{display:flex;gap:4px;margin-bottom:8px}.note-photos i{width:28px;height:20px;background:linear-gradient(145deg,#D7DADD 50%,#B7BEC5 51%);border:1px solid #AAB2BB}.note-photos i:nth-child(2){transform:rotate(5deg)}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .flow-running .work-lane{height:204px;overflow:hidden}
 /* The hand-off line: one vertical hairline through every lane, with a node where each lane crosses it. */
 .flow-running:after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid var(--rule)}
 .flow-running .work-lane:after{content:"";position:absolute;z-index:0;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
   background:var(--chalk);border:1px solid var(--ink-soft);box-shadow:0 0 0 calc(var(--hit,0) * 5px) rgba(61,107,255,.14);border-color:color-mix(in srgb,var(--signal-deep) calc(var(--hit,0) * 100%),var(--ink-soft))}
 .flow-running .work-shell{display:grid;align-items:stretch;position:absolute;z-index:1;top:50%;left:0;width:270px;transform:translate(0,-50%);opacity:0;will-change:transform,opacity}
 .flow-running .work-input,.flow-running .work-result{grid-area:1/1}
 .flow-running .work-result{clip-path:inset(0 0 0 var(--wipe,100%))}
 /* The edge of the wipe: the hand-off line drawn across the card while it passes through. */
 .flow-running .work-shell:after{content:"";position:absolute;top:-1px;bottom:-1px;left:var(--wipe,100%);border-left:1px solid var(--signal);opacity:var(--edge,0)}
}
@media(max-width:700px){.workflow{margin:32px 0 40px}.work-lane{padding:20px 0;min-height:0}.work-shell{grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.work-input,.work-result{padding:12px 10px;font-size:12px}.workflow small{font-size:11px}.workflow dl>div{display:block;margin-top:5px}.workflow dd{font-weight:600}.workflow em{font-size:11px}.note-photos i{width:20px;height:16px}}
/* Bring solutions into view as the last hero lines leave. No background of its own: it rises over the
   stage while the stage ground tones to chalk, so there is never a hard edge between dark and light. */
#fix{position:relative;margin-top:-50vh;margin-top:-50svh;background:transparent;padding-top:clamp(24px,4vh,40px)}

/* Wordmark: the name under a stone table. Heavy top edge (the slab), thin legs, open bottom; AI in the table's blue. */
.brand{--c:var(--signal);display:inline-flex;align-items:center;white-space:nowrap;padding:.75em .75em .2em .82em;
  border:max(1px,.06em) solid var(--c);border-top-width:max(3px,.22em);border-bottom:0}
.brand .ai{margin-left:.45em;color:var(--c)}
.nav.closing .brand,.nav.light .brand,.ft .brand{--c:var(--signal-deep)}
.ft-name{font-size:clamp(17px,6.3vw,118px);text-align:center}
.ft-name .brand{font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ft-contact{display:inline-flex;flex-wrap:wrap;gap:6px 20px}
@media(max-width:700px){.ft-contact{justify-content:center}}