/* The only remaining literals are mask stops, where #000 means full opacity
   rather than a colour. Every design value lives in tokens.css. */
/* global preamble */
.page { position: relative; }
.page .sec, .page .hero { scroll-margin-top: calc(var(--nav-h) + var(--sp-24)); }
html, body { overflow-x: clip; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); }
.sec:not(.inview) .pulse,
.sec:not(.inview) .tlpz path { animation-play-state: paused !important; }

/* media defaults: nothing overflows its column */
.page img, .page svg, .page canvas { max-width: 100%; }
.page img { height: auto; }

html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;font-variant-numeric:tabular-nums lining-nums}
.page a{color:var(--accent)}
.page a:hover{color:var(--accent-hover)}
.page *{box-sizing:border-box}
.page h1,.page h2,.page h3,.page p,.page ul{margin:0}
.page ul{padding:0;list-style:none}
.page .serif{font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto}
.page .mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.02em}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.page .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.page .night{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-1) 0px,var(--sky-2) 500px,var(--sky-3) 1200px,var(--sky-7) 2200px,var(--sky-6) 3400px,var(--bg) 4200px);animation:fadein 1.2s ease-out both}
.page .stars{position:absolute;left:0;top:0;width:100%;height:1400px;opacity:0;animation:fadein 2.6s ease-out .6s forwards}
@keyframes nebA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,18px) scale(1.08)}}
.page .neb{position:absolute;pointer-events:none;will-change:transform}
.page .n1{left:-160px;top:-220px;width:760px;height:640px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 10%,transparent) 0%,color-mix(in srgb,var(--blueprint) 62%,transparent) 20%,color-mix(in srgb,var(--blueprint) 30%,transparent) 40%,color-mix(in srgb,var(--blueprint) 9%,transparent) 56%,transparent 68%);animation:nebA 44s ease-in-out infinite,fadein 2.4s ease-out .3s both}
.page .n4{left:-260px;top:1300px;width:700px;height:600px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 44%,transparent) 0%,color-mix(in srgb,var(--blueprint) 20%,transparent) 34%,transparent 66%);animation:nebA 70s ease-in-out infinite reverse}
.page .n5{right:-300px;top:2600px;width:700px;height:600px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 30%,transparent) 0%,transparent 64%);animation:nebA 84s ease-in-out infinite}
.page .vig{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);position:absolute;left:0;right:0;top:64px;height:816px;background:radial-gradient(ellipse 90% 70% at 50% 24%,transparent 40%,var(--vignette) 100%);pointer-events:none}
.page .grain{position:absolute;inset:0;pointer-events:none;background-size:var(--grain-tile) var(--grain-tile);background-repeat:repeat}
.page .skyfade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0px,transparent 900px,color-mix(in srgb,var(--bg) 45%,transparent) 2200px,color-mix(in srgb,var(--bg) 85%,transparent) 3600px,var(--bg) 4300px)}
/* header */
.page .nav{position:fixed;left:0;right:0;top:0;height:var(--nav-h);padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule-nav);z-index:20;background:var(--nav-veil-phone);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page .mbtn{width:44px;height:var(--field-h);margin-right:-11px;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.page .mbtn span{display:block;width:18px;height:1px;background:var(--text-secondary);transition:transform .35s var(--ease),opacity .35s}
.page.menu-open .mbtn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.page.menu-open .mbtn span:nth-child(2){opacity:0}
.page.menu-open .mbtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.page .menu{position:fixed;left:0;right:0;top:64px;z-index:19;display:none;flex-direction:column;gap:4px;padding:16px 24px 24px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.page.menu-open .menu{display:flex}
.page .menu a.l{display:block;padding:12px 0;font-size:var(--fs-menu);line-height:var(--lh-menu);color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.page .btn{display:flex;align-items:center;justify-content:center;height:var(--control-h);padding:0 20px;border-radius:var(--r-edge);font-family:var(--font-sans);font-size:var(--fs-btn);font-weight:500;letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.page .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--bloom)}
/* hero */
.page .hero{position:relative;min-height:min(88vh,880px);overflow:hidden;z-index:2}
@keyframes halogrow{0%,4.7%{opacity:0}24.4%,33.7%{opacity:.2}53.5%,61.6%{opacity:.38}76.7%,83.7%{opacity:.55}98.8%,100%{opacity:.72}}
@keyframes halobreathe{0%{opacity:.72;transform:scale(.97)}21%{opacity:.86;transform:scale(1.03)}44%{opacity:.7;transform:scale(.98)}66%{opacity:.9;transform:scale(1.05)}83%{opacity:.76;transform:scale(1)}100%{opacity:.72;transform:scale(.97)}}
.page .halo{position:absolute;left:-15px;top:-12px;width:420px;height:420px;border-radius:var(--r-round);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent) 0%,color-mix(in srgb,var(--accent) 14%,transparent) 14%,color-mix(in srgb,var(--blueprint) 70%,transparent) 32%,color-mix(in srgb,var(--blueprint) 30%,transparent) 48%,transparent 62%);opacity:0;animation:halogrow 4.3s linear .5s forwards,halobreathe 8.4s ease-in-out 6.4s infinite;pointer-events:none}
.page .pool{position:absolute;left:35px;top:270px;width:320px;height:110px;border-radius:var(--r-round);background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 12%,transparent) 0%,color-mix(in srgb,var(--accent) 6%,transparent) 30%,transparent 62%);opacity:0;pointer-events:none}
.page.awake .pool{animation:fadein 2s ease-out .1s both}
@keyframes flashout{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.page .haloflash{position:absolute;left:-15px;top:-12px;width:420px;height:420px;border-radius:var(--r-round);background:radial-gradient(circle,color-mix(in srgb,var(--on-blueprint) 40%,transparent) 0%,color-mix(in srgb,var(--on-blueprint) 28%,transparent) 12%,color-mix(in srgb,var(--accent) 25%,transparent) 30%,color-mix(in srgb,var(--accent) 8%,transparent) 48%,transparent 62%);opacity:0;pointer-events:none}
.page .haloflash.go{animation:flashout 1.4s ease-out forwards}
.page .flare{position:absolute;left:195px;top:198px;width:520px;height:2px;margin:-1px 0 0 -260px;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--accent-hover) 60%,transparent) 30%,var(--on-blueprint) 50%,color-mix(in srgb,var(--accent-hover) 60%,transparent) 70%,transparent 100%);filter:blur(1.2px);mix-blend-mode:screen;opacity:0;pointer-events:none}
.page .flare.go{animation:flashout 1.6s var(--ease) forwards}
.page .stackwrap{width:var(--hero-mark);height:var(--hero-mark);will-change:transform}
@keyframes sway{0%{transform:perspective(900px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(900px) rotateX(2.2deg) rotateY(-3.2deg)}100%{transform:perspective(900px) rotateX(-1.6deg) rotateY(2.6deg)}}
.page.done .stackwrap{animation:sway 11s ease-in-out infinite alternate}
@keyframes layerin{from{opacity:0}to{opacity:1}}
@keyframes growA{from{transform:translate(0,0)}to{transform:translate(3.61px,5.16px)}}
@keyframes growB{from{transform:translate(0,0)}to{transform:translate(1.89px,2.75px)}}
.page .l2{animation:layerin 1.4s var(--ease) 4.85s backwards,growA 1.6s cubic-bezier(.2,.7,.2,1.25) 4.85s both}
.page .l4{animation:layerin 1.2s var(--ease) 5.1s backwards,growB 1.6s cubic-bezier(.2,.7,.2,1.25) 5.1s both}
.page .l7{animation:layerin 1.4s var(--ease) 4.85s backwards}
.page .core{animation:layerin 1.6s var(--ease) 5s backwards}
@keyframes cut{0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.6,0,.9,.4)}24%{stroke-dashoffset:.9;animation-timing-function:cubic-bezier(.25,0,.55,1)}74%{stroke-dashoffset:.2;animation-timing-function:cubic-bezier(.15,.45,.3,1)}100%{stroke-dashoffset:0}}
@keyframes cuthead{0%{stroke-dashoffset:.13;animation-timing-function:cubic-bezier(.6,0,.9,.4)}24%{stroke-dashoffset:.03;animation-timing-function:cubic-bezier(.25,0,.55,1)}74%{stroke-dashoffset:-.67;animation-timing-function:cubic-bezier(.15,.45,.3,1)}100%{stroke-dashoffset:-.87}}
@keyframes headland{from{stroke-dashoffset:.16}to{stroke-dashoffset:.13}}
@keyframes cool{to{opacity:0}}
@keyframes ignite{from{stroke:var(--star)}to{stroke:var(--on-blueprint)}}
.page .carve line,.page .hot line,.page .carveglow line{stroke-dasharray:1;stroke-dashoffset:1}
.page .carve .s1,.page .hot .s1,.page .carveglow .s1{animation:cut .85s .7s forwards}
.page .carve .s2,.page .hot .s2,.page .carveglow .s2{animation:cut .85s 1.95s forwards}
.page .carve .b1,.page .hot .b1,.page .carveglow .b1{animation:cut .65s 3.15s forwards}
.page .carve .b2,.page .hot .b2,.page .carveglow .b2{animation:cut .65s 4.1s forwards}
.page .hot .s1{animation:cut .85s .7s forwards,cool .35s ease-out 1.55s forwards}
.page .hot .s2{animation:cut .85s 1.95s forwards,cool .35s ease-out 2.8s forwards}
.page .hot .b1{animation:cut .65s 3.15s forwards,cool .35s ease-out 3.8s forwards}
.page .hot .b2{animation:cut .65s 4.1s forwards,cool .35s ease-out 4.75s forwards}
.page .carve{animation:ignite 1.2s ease-out 4.8s forwards}
@keyframes glowsettle{from{opacity:1}to{opacity:.6}}
@keyframes glowbreathe{0%{opacity:.6}19%{opacity:.74}37%{opacity:.58}58%{opacity:.8}77%{opacity:.62}100%{opacity:.6}}
.page .carveglow{animation:glowsettle 1.6s ease-out 4.8s forwards,glowbreathe 8.4s ease-in-out 6.4s infinite}
@keyframes headcool{to{opacity:0}}
.page .head line,.page .headglow line{stroke-dasharray:.16 2;stroke-dashoffset:.16}
.page .head .s1,.page .headglow .s1{animation:headland .2s ease-out .5s backwards,cuthead .85s .7s forwards,headcool .3s ease-out 1.55s forwards}
.page .head .s2,.page .headglow .s2{animation:headland .2s ease-out 1.75s backwards,cuthead .85s 1.95s forwards,headcool .3s ease-out 2.8s forwards}
.page .head .b1,.page .headglow .b1{animation:headland .15s ease-out 3s backwards,cuthead .65s 3.15s forwards,headcool .3s ease-out 3.8s forwards}
.page .head .b2,.page .headglow .b2{animation:headland .15s ease-out 3.95s backwards,cuthead .65s 4.1s forwards,headcool .3s ease-out 4.75s forwards}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.page .in{animation:rise 1s var(--ease) both}
.page .h0{animation-delay:.2s}
.page .d1{animation-delay:4.9s}
.page .d2{animation-delay:5.1s}
.page .d3{animation-delay:5.35s}
.page .d4{animation-delay:5.55s}
.page .d5{animation-delay:5.75s}
.page .d6{animation-delay:6.1s}
.page .routes a{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-route);line-height:var(--lh-route)}
.page .routes a::before{content:"";width:14px;height:1px;background:var(--accent);flex:none}
.page .routes .lane{font-family:var(--font-mono);font-size:var(--fs-lab);font-weight:500;letter-spacing:.02em;color:var(--text-secondary)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.page .cue{display:block;width:44px;height:var(--control-h);color:var(--text-secondary)}
.page .cue svg{display:block;width:44px;height:var(--control-h);animation:bob 2.6s ease-in-out infinite}
/* sections */
.page .sec{position:relative;z-index:1;padding:0 24px}
.page .lab{font-family:var(--font-mono);font-size:var(--fs-lab);line-height:var(--lh-lab);font-weight:500;letter-spacing:.02em;color:var(--text-secondary)}
.page .h2{font-family:var(--font-serif);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:500;letter-spacing:-.01em;font-optical-sizing:auto}
.page .h3{font-family:var(--font-sans);font-size:var(--fs-title);line-height:var(--lh-title);font-weight:600}
.page .sm{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.page .sec2{color:var(--text-secondary)}
.page .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.page .rv.on{opacity:1;transform:none}
.page .t1{transition-delay:.1s}
.page .t2{transition-delay:.22s}
.page .t3{transition-delay:.34s}
.page .t4{transition-delay:.46s}
.page .t5{transition-delay:.58s}
.page .hl{height:1px;background:var(--rule-soft);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.page .on .hl{transform:none}
.page .mes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.page .me{padding:20px 0;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--rule-track)}
.page .num{display:inline-flex;align-items:flex-end;font-family:var(--font-mono);font-size:var(--fs-num);line-height:var(--lh-num);font-weight:500;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.page .digit{display:inline-block;height:var(--field-h);overflow:hidden;vertical-align:top}
.page .reel{display:block;transition:transform 2.1s var(--ease)}
.page .reel .r{display:block;height:var(--field-h);line-height:var(--field-h)}
.page .on .d0 .reel{transform:translateY(-440px)}
.page .on .d1 .reel{transform:translateY(-484px)}
.page .on .d2 .reel{transform:translateY(-528px)}
.page .on .d3 .reel{transform:translateY(-572px)}
.page .on .d4 .reel{transform:translateY(-616px)}
.page .on .d5 .reel{transform:translateY(-660px)}
.page .on .d6 .reel{transform:translateY(-704px)}
.page .on .d7 .reel{transform:translateY(-748px)}
.page .on .d8 .reel{transform:translateY(-792px)}
.page .on .d9 .reel{transform:translateY(-836px)}
.page .k2 .reel{transition-delay:.14s}
.page .k3 .reel{transition-delay:.28s}
.page .pre,.page .suf{display:inline-block;line-height:var(--field-h)}
.page .suf{font-size:var(--fs-suf);color:var(--text-secondary);margin-left:2px}
.page .pre{font-size:var(--fs-h3);color:var(--text-secondary);margin-right:2px}
@keyframes numglow{0%{text-shadow:0 0 0 transparent}45%{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 70%,transparent)}100%{text-shadow:0 0 0 transparent}}
.page .on .num{animation:numglow 1.6s ease-out 1.9s both}
.page .opanes{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.page .opane{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 22px;border:1px solid var(--line);border-radius:var(--r-edge);background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 94%,transparent) 0%,color-mix(in srgb,var(--surface) 70%,transparent) 55%,color-mix(in srgb,var(--blueprint) 26%,transparent) 100%);box-shadow:var(--shadow-pane);overflow:hidden}
.page .ohead{display:flex;align-items:center;gap:12px}
.page .ohead .idx{font-family:var(--font-mono);font-size:var(--fs-lab);line-height:var(--lh-lab);font-weight:500;letter-spacing:.02em;color:var(--accent)}
.page .opane .tt{font-family:var(--font-serif);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;letter-spacing:-.01em}
.page .opane .when{font-family:var(--font-serif);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:400;color:var(--text)}
.page .blk{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.page .blk p{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text)}
.page .blk.sh p{color:var(--text-secondary)}
.page .price{padding-top:16px;margin-top:6px;border-top:1px solid var(--rule-faint);display:flex;flex-direction:column;gap:4px}
.page .amt{font-family:var(--font-mono);font-size:var(--fs-amt);line-height:var(--lh-amt);font-weight:500;letter-spacing:-.015em;color:var(--text)}
.page .per{font-family:var(--font-mono);font-size:var(--fs-lab);line-height:var(--lh-lab);font-weight:500;letter-spacing:.02em;color:var(--text-secondary)}
.page .alt{font-size:var(--fs-alt);line-height:var(--lh-alt);color:var(--text-secondary);margin-top:4px}
.page .opane.on .amt{animation:numglow 1.6s ease-out .9s both}
.page .pf{font-size:var(--fs-lab);line-height:18px;color:var(--text-secondary)}
.page .olink{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;margin-top:2px}
.page .olink::after{content:"";width:22px;height:1px;background:currentColor}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.page .steps{position:relative;display:flex;flex-direction:column;gap:28px;padding-left:28px}
.page .tl{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--rule-track)}
.page .tlfill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 2s var(--ease) .2s}
.page .on .tlfill{transform:none}
.page .step{position:relative;display:flex;flex-direction:column;gap:8px}
.page .nd{position:absolute;left:-28px;top:4px;width:var(--node);height:var(--node);border:1px solid var(--line-strong);background:var(--bg);transition:background .5s,border-color .5s,box-shadow .5s}
.page .on .nd{background:var(--accent);border-color:var(--accent);box-shadow:var(--glow-node)}
.page .on .st1 .nd{transition-delay:.4s}
.page .on .st2 .nd{transition-delay:.9s}
.page .on .st3 .nd{transition-delay:1.4s}
.page .on .st4 .nd{transition-delay:1.9s}
.page .pic{display:block;width:100%;height:auto;overflow:visible;margin:4px 0 6px}
.page .pic text.k{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.02em;fill:var(--text-secondary)}
.page .pic .ln{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.page .pic .wave{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.page .pic .sig{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.page .pic .box{fill:color-mix(in srgb,var(--surface) 85%,transparent);stroke:var(--line-strong);stroke-width:1;opacity:0}
.page .pic .wire{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.page .pic .sheet{fill:var(--surface);stroke:var(--line-strong);stroke-width:1;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.page .on .sheet{opacity:1;transform:none}
.page .on .sh1{transition-delay:2s}
.page .on .sh2{transition-delay:2.15s}
.page .on .sh3{transition-delay:2.3s}
.page .pic .chk{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.page .pic .pulse{opacity:0;stroke-dasharray:8 92;stroke-dashoffset:100;stroke:var(--accent);stroke-width:1.5;fill:none}
.page .on .st1 .a1{animation:draw 1s var(--ease) .5s forwards}
.page .on .st1 .wave{animation:draw 1.4s var(--ease) .9s forwards}
.page .on .st1 .a2{animation:draw .6s var(--ease) 1.3s forwards}
.page .on .st2 .a1{animation:draw 1s var(--ease) 1s forwards}
.page .on .st2 .a2{animation:draw .5s var(--ease) 1.35s forwards}
.page .on .st2 .a3{animation:draw .5s var(--ease) 1.5s forwards}
.page .on .st2 .a4{animation:draw .5s var(--ease) 1.65s forwards}
.page .on .st2 .a5{animation:draw .5s var(--ease) 1.8s forwards}
.page .on .st2 .sig{animation:draw 1s var(--ease) 2s forwards}
.page .on .st3 .b1{animation:fadein .5s var(--ease) 1.5s forwards}
.page .on .st3 .b2{animation:fadein .5s var(--ease) 1.65s forwards}
.page .on .st3 .b3{animation:fadein .5s var(--ease) 1.75s forwards}
.page .on .st3 .b4{animation:fadein .5s var(--ease) 1.9s forwards}
.page .on .st3 .w1{animation:draw .6s var(--ease) 1.8s forwards}
.page .on .st3 .w2{animation:draw .6s var(--ease) 1.85s forwards}
.page .on .st3 .w3{animation:draw .6s var(--ease) 2.05s forwards}
.page .on .st3 .w4{animation:draw .6s var(--ease) 2.1s forwards}
.page .on .st3 .pulse{animation:flow 2.4s linear 2.7s infinite,fadein .5s ease 2.7s forwards}
.page .on .st3 .p2{animation-delay:3.3s,3.3s}
.page .on .st4 .chk{animation:draw .7s var(--ease) 2.7s forwards}
@media (prefers-reduced-motion:reduce){
  .page *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .page .rv{opacity:1;transform:none}
}
.page .stackwrap{position:relative;transform-style:flat;perspective:none;will-change:auto}
.page .stackwrap .grp,.page .stackwrap .lyr{position:absolute;left:0;top:0;width:100%;height:100%}
.page .stackwrap .lyr{will-change:transform}
.page .stackwrap .lyr svg{display:block;width:100%;height:100%;overflow:visible}
.page .stackwrap .carvecv,.page .stackwrap .runefx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block}
.page .stackwrap .fxon svg{display:none}
.page .stackwrap.carving .carve,.page .stackwrap.carving .carve2,.page .stackwrap.carving .carveglow{opacity:.001!important}
.page .stackwrap .carve line,.page .stackwrap .carve2 line,.page .stackwrap .carveglow line{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
.page .stackwrap .carve{animation:caroff 0s linear 6.05s forwards!important}
.page .stackwrap .carve2{opacity:0;animation:igniteo 1.2s ease-out 4.8s forwards}
@keyframes igniteo{from{opacity:0}to{opacity:1}}
@keyframes caroff{to{opacity:0}}
.page .stackwrap{animation:none!important}
.page.done .stackwrap .lyr{animation:sway 11s ease-in-out infinite alternate}
.page.done .stackwrap .carveglow{animation:glowbreathe 8.4s ease-in-out infinite,sway 11s ease-in-out infinite alternate}
.page.done .stackwrap .carve2{opacity:1}
.page.done .stackwrap .l2{animation:swayA 11s ease-in-out infinite alternate}
.page.done .stackwrap .l4{animation:swayB 11s ease-in-out infinite alternate}
@keyframes swayA{0%{transform:perspective(900px) rotateX(0deg) rotateY(0deg) translate(3.61px,5.16px)}50%{transform:perspective(900px) rotateX(2.2deg) rotateY(-3.2deg) translate(3.61px,5.16px)}100%{transform:perspective(900px) rotateX(-1.6deg) rotateY(2.6deg) translate(3.61px,5.16px)}}
@keyframes swayB{0%{transform:perspective(900px) rotateX(0deg) rotateY(0deg) translate(1.89px,2.75px)}50%{transform:perspective(900px) rotateX(2.2deg) rotateY(-3.2deg) translate(1.89px,2.75px)}100%{transform:perspective(900px) rotateX(-1.6deg) rotateY(2.6deg) translate(1.89px,2.75px)}}
.page .n5{right:-300px;top:-200px;width:700px;height:600px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 34%,transparent) 0%,transparent 64%);animation:nebA 84s ease-in-out infinite}
.page .n6{left:-300px;top:900px;width:700px;height:600px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 16%,transparent) 0%,transparent 64%);animation:nebA 92s ease-in-out infinite reverse}
.page .nav{position:fixed;left:0;right:0;top:0;height:var(--nav-h);padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule-nav);z-index:20;background:var(--nav-veil-phone);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page .sec{position:relative;z-index:1;padding:0 24px}
.page .link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.page .entry{display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.page .entry .n{font-family:var(--font-mono);font-size:var(--fs-lab);line-height:var(--lh-lab);font-weight:500;letter-spacing:.02em;color:var(--accent)}
.page .reg{font-family:var(--font-serif);font-size:var(--fs-lead);line-height:28px;font-weight:400;font-optical-sizing:auto}
.page .kv{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-secondary)}
.page .kv .v{color:var(--text)}
.page .dgbox{max-width:600px;position:relative;aspect-ratio:600/520;border:1px solid var(--line);border-radius:var(--r-edge);background:color-mix(in srgb,var(--surface) 60%,transparent);overflow:hidden}
.page .pgrid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-ink-strong) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-ink-strong) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%)}
.page .dg{position:absolute;inset:12px;width:auto;height:auto;overflow:visible}
.page .dg text{font-family:var(--font-sans);font-size:var(--fs-btn);font-weight:500;fill:var(--text)}
.page .dg text.k{font-family:var(--font-mono);font-size:var(--fs-lab);font-weight:500;letter-spacing:.02em;fill:var(--text-secondary)}
.page .dg .wire{stroke-dasharray:1;stroke-dashoffset:1}
.page .dg .box{opacity:0}
.page .dg .pulse{opacity:0;stroke-dasharray:8 92;stroke-dashoffset:100}
.page .dgbox.on .wire{animation:draw 1.1s var(--ease) forwards}
.page .dgbox.on .w1{animation-delay:.5s}
.page .dgbox.on .w2{animation-delay:.65s}
.page .dgbox.on .w3{animation-delay:.8s}
.page .dgbox.on .w4{animation-delay:1.5s}
.page .dgbox.on .w5{animation-delay:1.65s}
.page .dgbox.on .w6{animation-delay:1.8s}
.page .dgbox.on .box{animation:fadein .9s var(--ease) forwards}
.page .dgbox.on .x1{animation-delay:.1s}
.page .dgbox.on .x2{animation-delay:1.1s}
.page .dgbox.on .x3{animation-delay:1.25s}
.page .dgbox.on .x4{animation-delay:1.4s}
.page .dgbox.on .x5{animation-delay:2.2s}
.page .dgbox.on .x6{animation-delay:2.35s}
.page .dgbox.on .pulse{animation:flow 2.6s linear 2.6s infinite,fadein .6s ease 2.6s forwards}
.page .dgbox.on .p2{animation-delay:3s}
.page .dgbox.on .p3{animation-delay:3.4s}
.page .dgbox.on .p4{animation-delay:3.2s}
.page .dgbox.on .p5{animation-delay:3.7s}
.page .dgbox.on .p6{animation-delay:4.1s}
.page .pic .band{fill:color-mix(in srgb,var(--accent) 28%,transparent);transform:scaleX(0);transform-origin:1px 0;transition:transform .9s var(--ease) 1.1s}
.page .on .band{transform:none}
.page .cell{fill:none;stroke:var(--line-strong);stroke-width:1;opacity:0}
.page .fillc{fill:color-mix(in srgb,var(--accent) 28%,transparent);stroke:var(--accent)}
.page .pic .fee{fill:var(--accent);opacity:0}
.page .on .st1 .a2{animation:draw .6s var(--ease) .9s forwards}
.page .on .st1 .a3{animation:draw .6s var(--ease) 1.2s forwards}
.page .on .st1 .a4{animation:draw .6s var(--ease) 1.35s forwards}
.page .on .st2 .a6{animation:draw .5s var(--ease) 1.95s forwards}
.page .on .st2 .a7{animation:draw .5s var(--ease) 2.15s forwards}
.page .on .st2 .fee{animation:fadein .5s var(--ease) 2.3s forwards}
.page .on .st3 .cell{animation:fadein .5s var(--ease) forwards}
.page .on .st3 .c1{animation-delay:1.5s}
.page .on .st3 .c2{animation-delay:1.6s}
.page .on .st3 .c3{animation-delay:1.7s}
.page .on .st3 .c4{animation-delay:1.8s}
.page .on .st3 .c5{animation-delay:1.9s}
.page .on .st3 .a1{animation:draw .9s var(--ease) 2s forwards}
.page .on .st3 .pulse{animation:flow 2.4s linear 2.8s infinite,fadein .5s ease 2.8s forwards}
.page .por{position:relative;width:280px;aspect-ratio:4/5;pointer-events:none;margin-bottom:var(--sp-24)}
.page .por img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transform:translateY(14px);transition:opacity 1.4s var(--ease) .25s,transform 1.4s var(--ease) .25s}
.page .on .por img{opacity:1;transform:none}
.page .pgl{position:absolute;left:50%;top:22%;width:420px;height:420px;margin-left:-210px;border-radius:var(--r-round);background:radial-gradient(circle,color-mix(in srgb,var(--blueprint) 62%,transparent) 0%,color-mix(in srgb,var(--blueprint) 28%,transparent) 36%,color-mix(in srgb,var(--blueprint) 8%,transparent) 56%,transparent 70%);opacity:0;transition:opacity 1.8s var(--ease) .1s}
.page .on .pgl{opacity:1}
.page .pgrid2{position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-ink) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-ink) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,#000 10%,transparent 70%);opacity:0;transition:opacity 1.8s var(--ease) .3s}
.page .on .pgrid2{opacity:.7}
.page .rail{position:relative;display:flex;flex-direction:column;gap:12px;padding-left:28px}
.page .rl{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--rule-track)}
.page .rlfill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 2.4s var(--ease) .2s}
.page .on .rlfill{transform:none}
.page .rn{position:relative;display:flex;flex-direction:column;gap:4px}
.page .on .r1 .nd{transition-delay:0.30s}
.page .on .r2 .nd{transition-delay:0.57s}
.page .on .r3 .nd{transition-delay:0.84s}
.page .on .r4 .nd{transition-delay:1.11s}
.page .on .r5 .nd{transition-delay:1.38s}
.page .on .r6 .nd{transition-delay:1.65s}
.page .on .r7 .nd{transition-delay:1.92s}
.page .on .r8 .nd{transition-delay:2.19s}
.page .on .r9 .nd{transition-delay:2.46s}
.page .on .r10 .nd{transition-delay:2.73s}
.page .r8 .nd{width:var(--node-lg);height:var(--node-lg);left:-30px;top:2px}
.page .tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 8px;border:1px solid var(--accent);border-radius:var(--r-edge);font-family:var(--font-mono);font-size:var(--fs-lab);font-weight:500;letter-spacing:.02em;color:var(--accent);align-self:flex-start}
.page .fld{display:flex;flex-direction:column;gap:6px}
.page .fld label{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500}
.page .fld input,.page .fld textarea{width:100%;height:var(--field-h);padding:0 12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-edge);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--tag-h);outline:none}
.page .fld textarea{height:120px;padding:10px 12px;resize:vertical}
.page .fld input:focus,.page .fld textarea:focus{border-color:var(--accent);box-shadow:var(--ring-focus)}
.page .hint{font-size:var(--fs-lab);line-height:var(--lh-lab);color:var(--text-secondary)}
.page .cal{border:1px dashed var(--line-strong);border-radius:var(--r-edge);background:color-mix(in srgb,var(--surface) 60%,transparent);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:20px}
.page .calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.page .calgrid span{display:block;height:36px;border:1px solid var(--line);border-radius:var(--r-edge);background:color-mix(in srgb,var(--bg) 40%,transparent)}
.page .foot{border-top:1px solid var(--rule-nav)}
.page .social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.page .social a{display:flex;flex-direction:column;gap:3px;padding:12px 0 12px;border-top:1px solid var(--rule-soft);text-decoration:none;color:var(--text)}
.page .social .sl{font-size:var(--fs-body);line-height:var(--tag-h);font-weight:600}
.page .social .sh{font-family:var(--font-mono);font-size:var(--fs-micro);line-height:var(--lh-micro-tight);font-weight:500;letter-spacing:.02em;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page .flinks a,.page .plinks a{font-size:var(--fs-btn);line-height:var(--tag-h);font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 60%,transparent);padding-bottom:2px}
.page .plinks a{color:var(--accent)}
.page .fmark{position:absolute;right:-30px;top:24px;width:var(--mark-lg);height:var(--mark-lg);opacity:.05;pointer-events:none}
.page .fmark{right:9px;top:350px;width:var(--mark-sm);height:var(--mark-sm)}
/* =====================================================================
   Desktop layer. One DOM, re-laid out. No canvas, no zoom, no fixed
   section heights: every section is sized by its content.
   ===================================================================== */
@media (min-width: 1000px) {

  /* ---- shell ---- */
  .page .sec { padding-inline: var(--gutter); max-width: var(--container); margin-inline: auto; }
  .page .sec + .sec { margin-top: var(--section-gap); }

  /* ---- header: the disclosure menu becomes the bar ---- */
  .page .nav { height: var(--nav-h); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
  .page .mbtn { display: none; }
  .page .menu {
    position: fixed; left: auto; right: 0; top: 0; bottom: auto;
    width: auto; height: var(--nav-h);
    display: flex; flex-direction: row; align-items: center; gap: var(--sp-32);
    padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    background: none; border: 0; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; z-index: 21;
  }
  .page .menu a.l {
    display: inline-block; padding: 0; border: 0;
    font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--weight-medium);
    color: var(--text-secondary); position: relative; transition: color var(--dur-link);
  }
  .page .menu a.l::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-control) var(--ease);
  }
  .page .menu a.l:hover { color: var(--text); }
  .page .menu a.l:hover::after { transform: scaleX(1); }
  .page .menu .btn { height: 40px; padding: 0 var(--sp-20); width: auto; }

  /* ---- hero: text left, mark right ---- */
  .page .hero {
    position: relative; min-height: min(86vh, 820px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; column-gap: var(--sp-64);
    max-width: var(--container); margin-inline: auto;
    padding: calc(var(--nav-h) + var(--sp-56)) var(--gutter) var(--sp-80);
  }
  .page .hero .col { grid-column: 1; max-width: 620px; }
  .page .hero .fly { grid-column: 2; grid-row: 1; position: relative; justify-self: center; width: var(--hero-mark); height: var(--hero-mark); }
  .page .hero .stackwrap { width: var(--hero-mark); height: var(--hero-mark); }
  .page .hero .halo,
  .page .hero .haloflash { width: min(560px, 100%); height: auto; aspect-ratio: 1 / 1; left: auto; right: 4%; }
  .page .hero .pool { left: 50%; }
  .page .hero .col > .in.d6,
  .page .hero > .in.d6 { grid-column: 1 / -1; justify-self: center; }
  .page h1.serif { font-size: var(--fs-display); line-height: var(--lh-display); }
  .page .routes a { font-size: var(--fs-route); line-height: var(--lh-route); padding: 11px 0; gap: var(--sp-14); }
  .page .routes a::before { width: 18px; }
  .page .routes a:hover { padding-left: var(--sp-6); }
  .page .routes a:hover::before { width: 34px; }

  /* ---- measures: five across, hairline between ---- */
  .page .mes { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-20); row-gap: 0; }
  .page .me { position: relative; padding: var(--sp-40) var(--sp-20) var(--sp-36) 0; gap: var(--sp-10); border-bottom: 0; }
  .page .me + .me { padding-left: var(--sp-24); }
  .page .me + .me::before {
    content: ""; position: absolute; left: 0; top: var(--sp-32); bottom: var(--sp-28);
    width: 1px; background: var(--rule-track);
  }
  .page .me .sm { max-width: 22ch; }

  /* ---- offers: the three lanes side by side ---- */
  .page .opanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); margin-top: var(--sp-40); }
  .page .opane { padding: var(--sp-32) var(--sp-28) var(--sp-28); gap: var(--sp-14); height: 100%; }
  .page .opane .tt { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .page .opane .when { font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .page .price { margin-top: auto; }

  /* ---- how it runs: four across on one track ---- */
  .page .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-24); padding-left: 0; gap: 0; margin-top: var(--sp-40); }
  .page .steps .tl { left: 0; right: 0; top: 146px; width: auto; height: 1px; bottom: auto; }
  .page .steps .tlfill { width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
  .page .rvsec.inview .steps .tlfill,
  .page .steps.on .tlfill { transform: scaleX(1); }
  .page .step { padding-left: 0; display: flex; flex-direction: column; gap: var(--sp-10); }
  .page .step .nd { top: 142px; left: 0; }
  .page .step .pic { order: -1; width: 100%; height: 130px; }
  .page .step .lab { margin-top: var(--sp-32); }

  /* ---- systems: entries scroll, the diagram holds ---- */
  .page .entry {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: var(--sp-64); align-items: start;
    padding: var(--sp-8) 0 var(--sp-64); gap: var(--sp-14);
  }
  .page .entry > h3, .page .entry > .reg, .page .entry > .kv { grid-column: 1; max-width: var(--measure); }
  .page .entry > .dgbox { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: calc(var(--nav-h) + var(--sp-40)); margin-top: 0; }
  .page .entry .reg { font-size: var(--fs-body); line-height: var(--lh-body); }

  /* ---- background: portrait right, timeline as a time axis ---- */
  .page #background { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: var(--sp-64); align-items: start; }
  .page #background > .rv.t1 { grid-column: 1; grid-row: 1; max-width: var(--measure); }
  .page #background > .por {
    grid-column: 2; grid-row: 1; position: relative; right: auto; top: auto;
    width: 420px; aspect-ratio: 420 / 435; justify-self: end; margin-bottom: 0;
  }
  .page #background > .tline { grid-column: 1 / -1; grid-row: 2; margin-top: var(--sp-56); }

  /* ---- contact: form left, links right ---- */
  .page #contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: var(--sp-64); align-items: start; }
  .page #contact > .rv:first-child { grid-column: 1 / -1; }
  .page #contact > form { grid-column: 1; max-width: 600px; }
  .page #contact > .plinks { grid-column: 2; grid-row: 2; }

  /* ---- footer ---- */
  .page .foot .social { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-24); }
  .page .foot .social a { padding: var(--sp-16) 0 var(--sp-14); gap: var(--sp-4); }
}

@media (min-width: 1000px) {
  .page .stars { height: 2200px; }
  .page .vig { height: 900px; }
  .page .n1 { width: 1200px; height: 1000px; left: -300px; top: -260px; }
  .page .n4 { width: 1100px; height: 900px; left: -420px; top: 2400px; }
  .page .n5 { width: 1200px; height: 950px; right: -420px; left: auto; top: 4200px; }
  .page .n6 { width: 1100px; height: 800px; left: -200px; top: 6000px; }
}

@media (min-width: 1000px) {
  .page #contact form .btn { align-self: flex-start; width: auto; padding-inline: var(--sp-32); }
  .page #background > .rv.t1 { padding-right: var(--sp-32); }
}

/* hero type, formerly inline on the elements */
.page .hero .mono.d1 { font-size: var(--fs-lab); line-height: var(--lh-lab); color: var(--text-secondary); }
.page .hero h1.serif { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.page .hero p.serif { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--weight-regular); color: var(--text-secondary); }

@media (min-width: 1000px) {
  .page .hero p.serif { font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .page .hero { min-height: calc(100vh - 0px); align-content: center; }
  .page .hero .col { max-width: 660px; }
  .page .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* hero: the text column and the scroll cue now flow */
.page .hero {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-24);
  padding: calc(var(--nav-h) + var(--sp-32)) var(--gutter) var(--sp-56);
  min-height: min(92vh, 880px);
}
.page .hero .col { position: relative; z-index: 4; width: 100%; }
.page .hero .fly { position: relative; align-self: center; order: -1; }
.page .hero > .in.d6 { position: relative; align-self: center; }

@media (min-width: 1000px) {
  .page .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center; column-gap: var(--sp-64);
  }
  .page .hero .col { grid-column: 1; grid-row: 1; max-width: 660px; width: auto; }
  .page .hero .fly { grid-column: 2; grid-row: 1; order: 0; justify-self: center; }
  .page .hero > .in.d6 { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

@media (min-width: 1000px) {
  .page .hero .in.d5 .btn { width: auto; align-self: flex-start; padding-inline: var(--sp-24); }
  .page .hero .in.d5 { display: flex; }
}

/* =====================================================================
   Timeline. Desktop markup, ported from the canvas: year ruler, ticks,
   connectors, chapters above and below. Each chapter carries its true
   position on the 2011 to 2026 axis as --x. Stacks on phone.
   ===================================================================== */
.page .tline { position: relative; padding-left: var(--sp-20); }
.page .tline .tl0 { position: absolute; left: 4px; top: var(--sp-6); bottom: var(--sp-6); right: auto; width: 1px; height: auto; background: var(--rule-track); }
.page .tline .tlf { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--accent); box-shadow: var(--glow-node-sm); transform: scaleY(0); transform-origin: top; transition: transform 2s var(--ease) .2s; }
.page .sec.on .tline .tlf { transform: none; }
.page .tline .ticks, .page .tline .sweep, .page .tline > svg { display: none; }
.page .tline .ch {
  position: relative; left: auto; top: auto; bottom: auto; width: auto;
  text-align: left; display: flex; flex-direction: column; gap: var(--sp-5);
  padding-bottom: var(--sp-20); opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.page .sec.on .tline .ch { opacity: 1; transform: none; }
.page .tline .ch .cn { display: none; }
.page .tline .ch .nd2 {
  position: absolute; left: -20px !important; top: 6px; bottom: auto;
  width: var(--node); height: var(--node); border: 1px solid var(--line-strong); background: var(--bg);
  transition: background .5s, border-color .5s, box-shadow .5s;
}
.page .sec.on .tline .ch .nd2 { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow-node); }
.page .tline .ch.big .nd2 { width: var(--node-lg); height: var(--node-lg); }
.page .tline .yr { font-family: var(--font-mono); font-size: var(--fs-lab); line-height: var(--lh-lab); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); color: var(--accent); }
.page .tline .ct { font-size: var(--fs-btn); line-height: var(--lh-sm); font-weight: var(--weight-semi); color: var(--text); }
.page .tline .cs { font-size: var(--fs-alt); line-height: var(--lh-alt); color: var(--text-secondary); }

@media (min-width: 1000px) {
  .page .tline { height: 340px; padding-left: 0; }
  .page .tline .tl0 { left: 0; right: 0; top: 180px; bottom: auto; width: auto; height: 1px; }
  .page .tline .tlf { width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fill) var(--ease) .3s; }
  .page .sec.on .tline .tlf { transform: none; }

  .page .tline .ticks { display: block; position: absolute; left: 0; right: 0; top: 180px; height: 30px; clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-fill) var(--ease) .3s; }
  .page .sec.on .tline .ticks { clip-path: inset(0 0 0 0); }
  .page .tline .ticks svg { display: block; width: 100%; height: 30px; overflow: visible; }
  .page .tline .ticks line { stroke: color-mix(in srgb, var(--text) 24%, transparent); stroke-width: 1; }
  .page .tline .ticks text { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); fill: var(--text-secondary); }

  .page .tline .sweep { display: block; position: absolute; left: 0; right: 0; top: 180px; height: 1px; overflow: hidden; pointer-events: none; }
  .page .tline .sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 80%, transparent) 50%, transparent 100%); transform: translateX(-100%); }
  .page .sec.on .tline .sweep::after { animation: sweep 2.2s var(--ease) .2s forwards; }
  .page .tline > svg.tlpz { display: block; position: absolute; left: 0; top: 179px; width: 100%; height: 3px; overflow: visible; }

  .page .tline .ch { position: absolute; left: var(--x); width: 16.4%; min-width: 196px; padding-bottom: 0; }
  .page .tline .ch.up { bottom: 192px; top: auto; transform: translateY(14px); }
  .page .tline .ch.dn { top: 220px; bottom: auto; transform: translateY(-14px); text-align: right; }
  .page .sec.on .tline .ch { transform: none; }
  .page .tline .ch .cn { display: block; position: absolute; width: 1px; height: 28px; background: var(--accent); opacity: .55; transform: scaleY(0); transition: transform .7s var(--ease); }
  .page .tline .ch.up .cn { bottom: -30px; top: auto; transform-origin: bottom; }
  .page .tline .ch.dn .cn { top: -30px; bottom: auto; transform-origin: top; }
  .page .sec.on .tline .ch .cn { transform: none; }
  .page .tline .ch .nd2 { left: auto !important; }
  .page .tline .ch.up .nd2 { bottom: -37px; top: auto; }
  .page .tline .ch.dn .nd2 { top: -44px; bottom: auto; }
  .page .tline .ch.big .nd2 { margin-left: -2px; }
  .page .tline .ch.up.big .nd2 { bottom: -39px; }
  .page .tline .ch.dn.big .nd2 { top: -46px; }
  /* the original stagger, chapter by chapter */
  .page .sec.on .c1,  .page .sec.on .c1 .cn,  .page .sec.on .c1 .nd2  { transition-delay: .30s; }
  .page .sec.on .c2,  .page .sec.on .c2 .cn,  .page .sec.on .c2 .nd2  { transition-delay: .80s; }
  .page .sec.on .c3,  .page .sec.on .c3 .cn,  .page .sec.on .c3 .nd2  { transition-delay: .96s; }
  .page .sec.on .c4,  .page .sec.on .c4 .cn,  .page .sec.on .c4 .nd2  { transition-delay: 1.29s; }
  .page .sec.on .c5,  .page .sec.on .c5 .cn,  .page .sec.on .c5 .nd2  { transition-delay: 1.46s; }
  .page .sec.on .c6,  .page .sec.on .c6 .cn,  .page .sec.on .c6 .nd2  { transition-delay: 1.79s; }
  .page .sec.on .c7,  .page .sec.on .c7 .cn,  .page .sec.on .c7 .nd2  { transition-delay: 1.95s; }
  .page .sec.on .c8,  .page .sec.on .c8 .cn,  .page .sec.on .c8 .nd2  { transition-delay: 2.45s; }
  .page .sec.on .c9,  .page .sec.on .c9 .cn,  .page .sec.on .c9 .nd2  { transition-delay: 2.61s; }
  .page .sec.on .c10, .page .sec.on .c10 .cn, .page .sec.on .c10 .nd2 { transition-delay: 2.86s; }
}

/* =====================================================================
   Contact: the panel that holds the place a calendar will go.
   ===================================================================== */
.page .cvis {
  position: relative; min-height: 340px; border: var(--bw) solid var(--line); border-radius: var(--r-edge);
  overflow: hidden; box-shadow: var(--shadow-deep);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 94%, transparent) 0%, color-mix(in srgb, var(--surface) 70%, transparent) 55%, color-mix(in srgb, var(--blueprint) 26%, transparent) 100%);
}
.page .cgrid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--grid-ink) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: var(--grid-pitch) var(--grid-pitch); background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 15%, transparent 72%);
  opacity: 0; transition: opacity 1.6s var(--ease) .3s;
}
.page .sec.on .cgrid { opacity: .7; }
.page .cglow {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: var(--r-round); opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--blueprint) 62%, transparent) 30%, color-mix(in srgb, var(--blueprint) 22%, transparent) 50%, transparent 68%);
}
.page .sec.on .cglow { animation: halogrow 2.4s linear .2s forwards, halobreathe 8.4s ease-in-out 2.6s infinite; }
.page .cvis img {
  position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px;
  filter: drop-shadow(0 0 14px rgba(141,180,220,.55)) drop-shadow(0 0 42px rgba(141,180,220,.25));
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.4s var(--ease) .5s, transform 1.4s var(--ease) .5s;
}
.page .sec.on .cvis img { opacity: 1; transform: none; }

@media (min-width: 1000px) {
  .page .cvis { min-height: 440px; }

  .page .cvis img { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .page #contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page #contact > form { grid-column: 1; grid-row: 2; max-width: none; }
  .page #contact > .cvis { grid-column: 2; grid-row: 2; }
  .page #contact > .plinks { grid-column: 1; grid-row: 3; margin-top: var(--sp-32); }
}

/* =====================================================================
   Footer, desktop structure.
   ===================================================================== */
.page .foot { position: relative; border-top: var(--bw) solid var(--rule-nav); padding-top: var(--sp-40); padding-bottom: var(--sp-40); }
.page .foot .social { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--sp-32); }
.page .foot .social a { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-16) 0 var(--sp-14); border-top: var(--bw) solid var(--rule-soft); text-decoration: none; color: var(--text); position: relative; transition: color var(--dur-link); }
.page .foot .social a::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.page .foot .social a:hover { color: var(--accent-hover); }
.page .foot .social a:hover::before { transform: none; }
.page .foot .social .sl { font-size: var(--fs-menu); line-height: var(--lh-route); font-weight: var(--weight-semi); }
.page .foot .social .sh { font-family: var(--font-mono); font-size: var(--fs-lab); line-height: var(--lh-lab); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); color: var(--text-secondary); }
.page .foot .fmark { display: none; }

@media (min-width: 1000px) {
  .page .foot { padding-top: var(--sp-48); padding-bottom: var(--sp-56); }
  .page .foot .social { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-24); }
}

/* the first screen owns the viewport; the numbers begin below it */
.page .hero { min-height: 100svh; }

/* =====================================================================
   Hero light rig, ported from the canvas. Canvas coordinates were in a
   1440x900 frame; they are percentages here so the rig tracks the rune
   at any width. Phone keeps its simpler halo and pool.
   ===================================================================== */
.page .hero .shafts,
.page .hero .px { display: none; }

.page .stackwrap .grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.page .stackwrap .lyr.dp { will-change: transform; }
.page .stackwrap .solid { opacity: 0; }
.page .l1 { animation: layerin 1.4s var(--ease) 4.85s backwards; }
.page .l3 { animation: layerin 1.3s var(--ease) 5.1s backwards; }
.page .l5 { animation: layerin 1.2s var(--ease) 5.3s backwards; }
.page .spec { animation: sweepx 9s cubic-bezier(.4, 0, .5, 1) 6.6s infinite; }

@media (min-width: 1000px) {
  .page .hero .shafts,
  .page .hero .px { display: block; }

  .page .hero .shafts {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    transform-origin: var(--rune-x, 73%) 50%; will-change: transform, opacity;
  }
  .page .hero .shaft {
    position: absolute; left: var(--rune-x, 73%); top: -13%; width: 29%; height: 127%;
    transform: translateX(-50%); opacity: 0;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
      color-mix(in srgb, var(--accent) 7%, transparent) 25%,
      color-mix(in srgb, var(--accent) 3%, transparent) 50%, transparent 70%);
  }
  .page .hero .shaft.s2 {
    width: 10.4%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      color-mix(in srgb, var(--on-blueprint) 16%, transparent) 0%,
      color-mix(in srgb, var(--accent) 8%, transparent) 28%,
      color-mix(in srgb, var(--accent) 3%, transparent) 52%, transparent 70%);
  }
  .page.awake .hero .shaft,
  .page .hero .shaft { animation: fadein 1.8s ease-out both, shaftbreathe 8s ease-in-out 1.8s infinite; }
  .page .hero .shaft.s2 { animation: fadein 1.8s ease-out .3s both, shaftbreathe 6s ease-in-out 2.1s infinite; }

  .page .hero .px { position: absolute; inset: 0; pointer-events: none; will-change: transform; z-index: 0; }
  .page .hero .fog { position: absolute; pointer-events: none; opacity: 0; will-change: transform; }
  .page .hero .f1 {
    left: calc(var(--rune-x, 73%) - 29%); top: 22%; width: 52.8%; height: 47%;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 35%, transparent 70%);
    animation: fogA 34s ease-in-out infinite alternate, fadein 2.6s ease-out .2s both;
  }
  .page .hero .f2 {
    left: calc(var(--rune-x, 73%) - 20%); top: 52%; width: 43%; height: 38%;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--on-blueprint) 7%, transparent) 0%, color-mix(in srgb, var(--on-blueprint) 3%, transparent) 40%, transparent 70%);
    animation: fogB 41s ease-in-out infinite alternate, fadein 2.6s ease-out .6s both;
  }
  .page .hero .f3 {
    left: calc(var(--rune-x, 73%) - 34%); top: 37%; width: 38.9%; height: 62%;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--blueprint) 45%, transparent) 0%, color-mix(in srgb, var(--blueprint) 18%, transparent) 40%, transparent 70%);
    animation: fogC 47s ease-in-out infinite alternate, fadein 2.6s ease-out .4s both;
  }
  /* the rune sits above its own weather */
  .page .hero .col, .page .hero .fly { position: relative; z-index: 4; }

  /* the two nebulae the phone sky never had */
  .page .n2 { right: -25%; left: auto; top: -120px; width: 90%; height: 1100px;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--blueprint) 46%, transparent) 22%, color-mix(in srgb, var(--blueprint) 28%, transparent) 40%, color-mix(in srgb, var(--blueprint) 9%, transparent) 56%, transparent 68%);
    animation: nebB 52s ease-in-out infinite, fadein 2.4s ease-out .5s both; }
  .page .n3 { left: 14%; top: 500px; width: 83%; height: 800px;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--text) 5%, transparent) 0%, color-mix(in srgb, var(--text) 2.5%, transparent) 30%, transparent 62%);
    animation: nebA 61s ease-in-out infinite reverse, fadein 2.4s ease-out .8s both; }
}

/* keyframes the light rig needs, from the canvas */
@keyframes fogA{0%{transform:translate(0,0)}100%{transform:translate(28px,-18px)}}
@keyframes fogB{0%{transform:translate(0,0)}100%{transform:translate(-24px,16px)}}
@keyframes fogC{0%{transform:translate(0,0)}100%{transform:translate(14px,24px)}}
@keyframes nebB{0%,100%{transform:translate(0,0) scale(1.08)}50%{transform:translate(-70px,50px) scale(1)}}
@keyframes shaftbreathe{0%,100%{opacity:.55;transform:translateX(-50%) scaleY(.96)}50%{opacity:.95;transform:translateX(-50%) scaleY(1.04)}}
@keyframes sweepx{0%{transform:translateX(0)}16%{transform:translateX(2900px)}100%{transform:translateX(2900px)}}

/* the rune's exit: it flies into the header and becomes the mark */
.page .hero .dark {
  position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 0;
  background: linear-gradient(180deg, #07080c 0%, #07080c 70%, transparent 100%);
  opacity: 0; pointer-events: none; will-change: opacity; z-index: 3;
}
.page .nav .lk-full { pointer-events: none; }
@media (max-width: 999.98px) {
  .page .hero .dark { display: none; }
  .page .nav .lk-word { clip-path: none !important; }
  .page .nav .lk-full { display: none; }
}

/* footer marks: sized here, never inline */
.page .foot .flk { height: 20px; width: auto; display: block; }
.page .foot .fshort { height: 14px; width: auto; display: block; }

/* the tick ruler that heads the numbers, and the light that runs along it */
.page #measures .hl { position: relative; }
.page #measures .ruler { position: relative; height: 10px; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease) .25s; }
.page #measures .ruler svg { display: block; width: 100%; height: 10px; }
.page .sec.on #measures .ruler,
.page #measures.on .ruler { clip-path: inset(0 0 0 0); }
.page #measures .sweep { position: absolute; left: 0; right: 0; top: 0; height: 1px; overflow: hidden; pointer-events: none; }
.page #measures .sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 80%, transparent) 50%, transparent 100%); transform: translateX(-100%); }
.page #measures.on .sweep::after { animation: sweep 2.2s var(--ease) .2s forwards; }
.page #measures .mes { margin-top: var(--sp-4); }

/* footer: the practice line and the domain row need air between them */
.page .foot .rv.t3 { margin-top: var(--sp-32) !important; padding-bottom: var(--sp-24); }
.page .foot > div:last-child { margin-top: var(--sp-24) !important; padding-top: var(--sp-16); }

/* the pulse that runs the length of the timeline rule: the piece that
   makes the ruler read as live rather than drawn */
.page .tline .tlpz path {
  opacity: 0; stroke-dasharray: 5 95; stroke-dashoffset: 100;
  stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round;
}
.page .sec.on .tline .tlpz path {
  animation: flow 4s linear 3.4s infinite, fadein .5s ease 3.4s forwards;
}
@media (max-width: 999.98px) { .page .tline .tlpz { display: none; } }

@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* The footer mark is a watermark, not a graphic. It sits in the clear band
   beside the lockup so it never crosses a divider rule, which is what made
   it read as a smudge. */
.page .foot { overflow: hidden; }
.page .foot .fmark {
  display: block; position: absolute; right: var(--gutter); top: var(--sp-40);
  width: 40px; height: 40px; opacity: .07; pointer-events: none; z-index: 0;
}
.page .foot > * { position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .page .foot .fmark { width: 48px; height: 48px; top: var(--sp-48); }
}

/* =====================================================================
   The rune's light stack at desktop scale. The canvas drew the rune at
   620px with an 820px halo and a 760x220 pool beneath it; the phone
   values those rules inherited were roughly half that, which is why the
   first screen read smaller and flatter than it should. Everything here
   is tied to --hero-mark and centred on the rune column (73.5%, the same
   axis the shafts use), so it tracks the rune at any width.
   ===================================================================== */
@media (min-width: 1000px) {
  .page .hero .halo,
  .page .hero .haloflash {
    left: var(--rune-x, 73.5%); right: auto; top: 50%;
    width: calc(var(--hero-mark) * 1.32);
    height: calc(var(--hero-mark) * 1.32);
    aspect-ratio: auto;
    margin: 0; transform: translate(-50%, -50%);
  }
  .page .hero .pool {
    left: var(--rune-x, 73.5%); top: auto; bottom: 6%;
    width: calc(var(--hero-mark) * 1.23);
    height: calc(var(--hero-mark) * 0.355);
    margin-left: 0; transform: translateX(-50%);
  }
  .page .hero .flare {
    left: var(--rune-x, 73.5%); width: calc(var(--hero-mark) * 2.1); height: 3px;
    margin-left: 0; transform: translateX(-50%);
  }
}

/* =====================================================================
   Full bleed. The first screen and the footer rule run edge to edge while
   their content stays on the centred container, the way the canvas did it.
   Without this, every atmosphere layer inside the hero stops at the
   container's edge and draws a visible seam on screens wider than 1440.
   ===================================================================== */
.page .hero,
.page .foot {
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

/* =====================================================================
   Header. The phone bar is always veiled and blurred; the desktop bar is
   transparent until the page scrolls. The disclosure menu keeps its own
   veil and blur on phone, and must drop both on desktop, where it is just
   the links sitting in the bar. Leaving its backdrop-filter on painted a
   blurred rectangle over the right half of the header and hid the rule.
   ===================================================================== */
@media (min-width: 1000px) {
  .page .nav {
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease);
  }
  .page.scrolled .nav,
  .scrolled .page .nav {
    background: var(--nav-veil);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-color: var(--rule-nav-scrolled);
  }
  .page .menu {
    background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
  }
}

/* =====================================================================
   Sky at desktop. The night gradient and the nebulae are the canvas's,
   not the phone's: a longer ramp over a taller page and wider clouds.
   A phone-root override had been flattening .night to a flat fill.
   ===================================================================== */
@media (min-width: 1000px) {
  .page .night { background: linear-gradient(180deg,#0b0d14 0px,#110f12 500px,#0a0b12 1300px,#0f0e12 2600px,#141210 4200px,#17140f 5200px); }
  .page .n1 { background: radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 82%,transparent) 0%,color-mix(in srgb,var(--blueprint) 58%,transparent) 18%,color-mix(in srgb,var(--blueprint) 30%,transparent) 38%,color-mix(in srgb,var(--blueprint) 10%,transparent) 54%,transparent 68%); }
  .page .n4 { background: radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 48%,transparent) 0%,color-mix(in srgb,var(--blueprint) 24%,transparent) 32%,color-mix(in srgb,var(--blueprint) 8%,transparent) 52%,transparent 68%); }
  .page .n5 { background: radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 40%,transparent) 0%,color-mix(in srgb,var(--blueprint) 18%,transparent) 34%,transparent 66%); }
  .page .n6 { background: radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--blueprint) 22%,transparent) 0%,transparent 62%); }
}

@media (min-width: 1000px) {
  /* the vignette the canvas used, centred on the rune axis rather than the page */
  .page .vig { background: radial-gradient(ellipse 70% 78% at 62% 50%,transparent 40%,color-mix(in srgb,#000 50%,transparent) 100%); }
  /* the two clouds the phone rules drifted the other way */
  .page .n4 { animation: nebB 70s ease-in-out infinite; }
  .page .n6 { animation: nebB 92s ease-in-out infinite; }
}

/* The Background text block carried an inline margin-top of -40px: a phone
   tightening for when the portrait sits directly above it. On desktop the
   portrait is a side column, so the negative margin only pulled the section's
   eyebrow up out of its own box and under the fixed header on an anchor jump.
   Phone keeps the tightening; desktop does not. */
@media (max-width: 999.98px) {
  .page #background > .bgtext { margin-top: -40px; }
}

/* =====================================================================
   Booking. The blueprint panel holds its design until someone asks to
   book: the link works with no JavaScript at all, and only on click does
   Calendly's script load and take the panel over. Nothing third-party is
   requested, and no cookie is set, for a visitor who never books.
   ===================================================================== */
.page .cvis .cbook {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-16);
  padding: 0 var(--sp-24) var(--sp-32);
}
.page .cvis .chint {
  margin: 0; max-width: 30ch; text-align: center;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary);
}
.page .cvis .btn.bookbtn { width: auto; padding-inline: var(--sp-24); flex: none; }

/* once Calendly is in, the panel is a frame around it */
.page .cvis.booking { background: var(--surface); }
.page .cvis.booking .cgrid,
.page .cvis.booking .cglow,
.page .cvis.booking img,
.page .cvis.booking .cbook { display: none; }
/* Calendly sizes itself; forcing the iframe to fill a fixed frame left a
   white band below its content. The panel grows to whatever the widget needs. */
/* Calendly injects its iframe as a direct child of the parent element, with
   no .calendly-inline-widget wrapper, so the frame is what must be sized.
   The panel sets the height; the iframe fills it. */
.page .cvis.booking { min-height: 0; height: 680px; border-color: var(--line); overflow: hidden; }
.page .cvis.booking > iframe {
  position: absolute; inset: 0; display: block;
  width: 100% !important; height: 100% !important; min-width: 0 !important; border: 0;
}
.page .cvis.booking .calendly-spinner { position: absolute; inset: 0; }
@media (min-width: 1000px) {
  .page .cvis.booking { height: 740px; }
}
.page .cvis.loading .btn.bookbtn { opacity: .6; pointer-events: none; }

@media (min-width: 1000px) {
  .page .cvis .cbook { padding-bottom: var(--sp-40); }
}

/* the mark rides higher now that the panel's lower band carries the ask */
.page .cvis img { top: 36%; }
.page .cvis .cglow { top: 36%; }

/* =====================================================================
   Contact, balanced. The calendar cannot go below about 700 without
   clipping its own month, so the form grows to meet it instead: the two
   columns stretch to the same height and the textarea takes up the slack.
   The panel reserves that height from the start, so nothing reflows when
   the widget arrives.
   ===================================================================== */
@media (min-width: 1000px) {
  .page #contact { align-items: start; }

  /* the form grows toward the calendar without the textarea becoming absurd:
     "one or two sentences are enough" should not be a half-screen box */
  .page #contact > form { gap: var(--sp-20); margin-top: var(--sp-32); }
  .page #contact > form textarea { height: 260px; }
  .page #contact > form .btn { align-self: flex-start; }

  /* the panel reserves the widget's height from the start, so the column
     does not jump when the calendar arrives */
  .page .cvis { min-height: 700px; margin-top: var(--sp-32); }
  .page .cvis.booking { height: 700px; }
}
}