/* Girard, Afternoon. One island world sits behind every page; short cards float over it and the islands stay in view. */
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --white:#FFFFFF;--dark:#0F2A1C;
  --ink:#13201A;--sub:#4F5A54;--faint:#737B76;--line:rgba(19,32,26,.11);--line2:rgba(19,32,26,.17);
  --green:#1E5B3C;--green-dk:#174A31;--mint:#DDEDE2;--amber:#8A5A10;--amberbg:#FBF1DE;--red:#A33A2E;
  --sec:#4F5FC4;--pro:#2B8573;--fin:#A56A14;--leg:#8E5577;--prc:#A5563E;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --nav:64px;--gut:clamp(16px,4vw,56px);
  --sky:#D9E9F0;--sunc:#F2A24A;
  color-scheme:light
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:#E3ECEC;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
figure{margin:0}
ul,ol{margin:0;padding:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* the world */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(#D9E9F0,#EEF1EA 65%,#F5F0E4)}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.skysheet{display:none}
.tag{position:absolute;left:0;top:0;z-index:2;visibility:hidden;will-change:transform;background:#fff;border:1px solid rgba(19,32,26,.1);border-radius:8px;padding:6px 10px 7px;box-shadow:0 8px 20px -14px rgba(19,32,26,.55);white-space:nowrap}
.tag .n{display:block;font:600 12.5px/1.25 var(--sans);color:var(--c)}
.tag .s{display:block;font:400 11px/1.3 var(--mono);color:var(--faint);margin-top:1px}
.tag.wait .s{color:var(--amber)}
.tag.ok .s{color:var(--green)}
.tag.focus{border-color:var(--c);box-shadow:0 10px 24px -12px rgba(19,32,26,.6)}

/* navigation: opaque, the colour of the sky above it, with menus and the afternoon clock */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav);background:var(--sky);border-bottom:1px solid rgba(19,32,26,.08)}
.nav-in{height:100%;padding-inline:var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none;justify-self:start}
.brand img{width:22px;height:auto}
.menu{display:flex;align-items:center;gap:6px;font-size:15px}
.menu>a,.ddb{appearance:none;border:0;background:none;font:500 15px/1 var(--sans);color:var(--sub);text-decoration:none;padding:10px 12px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.menu>a:hover,.ddb:hover,.ddb[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.55)}
.menu>a[aria-current="page"]{color:var(--ink)}
.ddb svg{width:10px;height:10px;transition:transform .2s}
.ddb[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:relative}
.ddp{display:none;position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);width:max-content;min-width:300px;background:#fff;border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 30px 60px -30px rgba(19,32,26,.45)}
.ddp.open{display:grid;gap:2px}
.ddp::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} /* bridges the gap under the button so the menu stays open on the way down */
.ddp.two{grid-template-columns:repeat(2,minmax(0,250px))}
.ddp a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none}
.ddp a:hover,.ddp a:focus-visible{background:#F3F5F1}
.ddp b{display:block;font:600 14.5px/1.3 var(--sans);color:var(--c,var(--ink))}
.ddp span{display:block;font-size:13px;line-height:1.4;color:var(--sub);margin-top:2px}
.navr{justify-self:end;display:flex;align-items:center;gap:22px}
.clock{display:flex;align-items:center;gap:8px;white-space:nowrap}
.sunic{fill:var(--sunc);stroke:var(--sunc);flex:none}
.clock b{font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;min-width:64px}
.navcta{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:6px;background:var(--green);color:#fff;font:600 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap}
.navcta:hover{background:var(--green-dk)}
.mbtn{display:none;appearance:none;border:1px solid var(--line2);background:rgba(255,255,255,.6);border-radius:6px;height:38px;width:42px;cursor:pointer;align-items:center;justify-content:center}
.mbtn svg{width:18px;height:18px}
.mnav{display:none;position:fixed;left:0;right:0;top:var(--nav);bottom:0;z-index:49;overflow:auto;background:#FBFAF6;padding:12px var(--gut) 40px}
.mnav.open{display:block}
.mnav h3{font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:20px 0 6px}
.mnav a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:500;text-decoration:none}

/* scenes: each one a moment; cards float to one side or the bottom so the islands stay in view */
main{position:relative;z-index:2}
.scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:calc(var(--nav) + 10vh) var(--gut) 10vh}
.scene[data-side="right"]{justify-content:flex-end}
.scene[data-side="wide"]{justify-content:center;align-items:flex-end;padding-top:calc(var(--nav) + 44vh)}
.scene[data-side="bottom"]{justify-content:center;align-items:flex-end;padding-bottom:8vh}
.scene.low{align-items:flex-end;padding-bottom:12vh}
.scene.hero{min-height:100vh}
.panel{position:relative;width:min(560px,100%);background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.95);border-radius:18px;padding:30px 30px 32px;box-shadow:0 34px 70px -40px rgba(52,40,20,.5),0 2px 8px -3px rgba(52,40,20,.1)}
.panel.sm{width:min(440px,100%);padding:26px 26px 28px}
.panel.wide2{width:min(860px,100%)}
.panel.full{width:min(1180px,100%)}
.free{position:relative;width:min(560px,48vw)}

.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.lanek{color:var(--lane)}
h1{font-size:clamp(40px,4.5vw,66px);line-height:1.02;letter-spacing:-.04em;margin-bottom:20px}
.free h2.display{font-size:clamp(36px,3.9vw,58px);line-height:1.04;letter-spacing:-.038em;margin-bottom:18px}
.lead{font-size:clamp(17.5px,1.3vw,19.5px);line-height:1.55;color:var(--sub);max-width:46ch}
.panel h2{font-size:clamp(27px,2.4vw,36px);line-height:1.08;letter-spacing:-.032em;margin-bottom:12px}
.panel.sm h2{font-size:clamp(25px,2.1vw,31px)}
.panel h3.t{font-size:clamp(22px,1.9vw,27px);line-height:1.15;letter-spacing:-.026em;margin-bottom:10px}
.body{color:var(--sub);font-size:16.5px;line-height:1.6;margin-bottom:12px;max-width:62ch}
.body:last-child{margin-bottom:0}
.body.strong{color:var(--ink);font-size:clamp(19px,1.6vw,22px);line-height:1.35;font-weight:600;letter-spacing:-.02em}
.panel>.ui,.panel>.twoview,.panel>.feat,.panel>.flow,.panel>.tablewrap{margin-top:18px}
.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:6px;background:var(--green);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;transition:background .2s}
.btn:hover{background:var(--green-dk)}
.more{font-weight:500;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;color:var(--ink)}
.more:hover{color:var(--green)}
.go{display:inline-block;margin-top:16px;font-weight:600;font-size:15px;color:var(--green);text-decoration:none}
.go:hover{text-decoration:underline;text-underline-offset:4px}

/* product screens */
.ui{background:var(--white);border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:0 18px 36px -28px rgba(15,42,28,.45);font-size:14px;line-height:1.45}
.ui-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FBFBF8;font-weight:600;font-size:13px}
.ui-bar span{min-width:0;overflow-wrap:anywhere}
.ui figcaption{padding:9px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);background:#FBFBF8}
.chip{display:inline-flex;align-items:center;font:500 11.5px/1.2 var(--sans);font-style:normal;padding:4px 8px;border-radius:5px;background:#F0F0EB;color:var(--sub);white-space:nowrap}
.chip.ok{background:var(--mint);color:var(--green)}
.chip.wait{background:var(--amberbg);color:var(--amber)}
.pad{padding:14px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.big{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.small{font-size:12.5px;color:var(--sub)}
.asklist{list-style:none;margin:0;padding:0}
.asklist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.asklist li:last-child{border-bottom:0}
.asklist li>b:first-child{grid-column:1/3}
.asklist b{font-weight:500;min-width:0}
.lane{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c);width:88px}
.mail{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.mail-meta{font-size:12.5px;color:var(--faint)}
.files{display:flex;flex-wrap:wrap;gap:8px}
.files span{padding:7px 10px;border:1px solid var(--line2);border-radius:6px;font:500 12.5px/1.3 var(--sans);background:#FBFBF8}
.files.big{padding:14px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.files.big span{display:flex;flex-direction:column;gap:2px;padding:10px 12px}
.files em{font-style:normal;font-weight:400;font-size:12px;color:var(--faint)}
.propose{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:var(--mint)}
.propose p{font-size:13.5px}
.fakebtn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:5px;border:1px solid var(--line2);background:#fff;font:600 12.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.fakebtn.solid,.propose .fakebtn{background:var(--green);border-color:var(--green);color:#fff}
.claims{list-style:none;margin:0;padding:0}
.claims li{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.claims li:last-child{border-bottom:0}
.claims .src{font:400 11.5px/1.4 var(--mono);color:var(--green)}
.claims .nosrc{background:#FFF9EE}
.claims .nosrc .src{color:var(--amber)}
.thread{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.msg{padding:10px 12px;border-radius:8px;background:#F4F4EF}
.msg.gi{background:var(--mint)}
.msg.me{background:#fff;border:1px solid var(--line2)}
.who{display:block;font:500 11px/1.3 var(--mono);color:var(--faint);margin-bottom:3px}
.twoview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.meter{position:relative;width:100%;height:8px;border-radius:4px;background:#ECECE6;margin:10px 0 4px}
.meter i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--green)}
.meter i.over{background:#E0B25F}
.meter b{position:absolute;top:-5px;width:2px;height:18px;background:var(--ink)}
.row1{padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.row1 span{grid-column:1;font-size:12.5px;color:var(--sub)}
.row1 .chip{grid-column:2;grid-row:1/3}
.sheet{overflow-x:auto}
.sheet table{width:100%;border-collapse:collapse;font-size:13px;min-width:500px}
.sheet th,.sheet td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.sheet thead th{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);background:#FBFBF8}
.sheet tbody tr:last-child td{border-bottom:0}
.qs td:first-child{color:var(--faint);font-family:var(--mono);font-size:12px}
.alert{margin:0;padding:11px 14px;border-top:1px solid var(--line);background:#FFF3F0;color:var(--red);font-size:13px}
.track{list-style:none;margin:0;padding:0}
.track li{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.track li:last-child{border-bottom:0}
.track b{font-weight:500}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.steps4 i{font:500 11px/1.2 var(--sans);font-style:normal;text-align:center;padding:5px 2px;border-radius:4px;background:#F0F0EB;color:var(--faint)}
.steps4 i.on{background:var(--mint);color:var(--green)}
.calc{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line);width:100%}
.calc span{font-size:12px;color:var(--faint)}
.calc b{font-weight:600;font-size:15px}
.decide{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.doc p{font:400 14px/1.6 var(--sans);color:var(--ink)}
.doc del{color:var(--red);text-decoration-thickness:1.5px}
.doc ins{color:var(--green);text-decoration:underline;text-decoration-thickness:1.5px}
.owned{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:8px;background:#F7F2F5;width:100%}
.owned b{font-weight:600;font-size:13.5px}
.owned .chip{grid-column:1/3;justify-self:start;white-space:normal}

/* lane lists */


/* five lanes in a row along the bottom of the screen */
.row5{width:min(1240px,100%)}
.row5 .rh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}
.row5 .rh .kicker{margin:0 0 6px}
.row5 .rh h2{font-size:clamp(26px,2.4vw,36px);line-height:1.08;letter-spacing:-.032em;max-width:22ch}
.row5 .rh.card{background:rgba(255,255,255,.93);border-radius:16px;padding:18px 22px;box-shadow:0 30px 60px -40px rgba(52,40,20,.5)}
.row5 ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lcard{display:flex;flex-direction:column;height:100%;padding:18px 18px 16px;background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.95);border-radius:14px;text-decoration:none;box-shadow:0 26px 50px -34px rgba(52,40,20,.55);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.lcard:hover{transform:translateY(-3px);box-shadow:0 30px 56px -30px rgba(52,40,20,.6)}
.lcard b{font:600 17px/1.2 var(--sans);color:var(--c);letter-spacing:-.01em}
.lcard span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--sub);flex:1}
.lcard i{font-style:normal;margin-top:14px;font-weight:600;font-size:13.5px;color:var(--ink)}

/* small product moments inside the short cards */
.mini{margin-top:16px;border:1px solid var(--line2);border-radius:12px;background:#fff;overflow:hidden;font-size:13.5px;line-height:1.45}
.mini .r{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.mini .r:last-child{border-bottom:0}
.mini .r b{font-weight:500}
.mini .files{padding:12px}
.mini .thread{padding:10px}

/* feature tiles */
.feat{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.feat li{padding:16px 16px 17px;background:#fff;border:1px solid var(--line2);border-radius:12px}
.feat b{display:block;font:600 15.5px/1.3 var(--sans);letter-spacing:-.01em}
.feat p{margin-top:5px;font-size:14px;line-height:1.5;color:var(--sub)}
.feat.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* other lanes, at the foot of a lane page */
.others{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line2);font-size:15px}
.others span{color:var(--faint)}
.others a{font-weight:600;text-decoration:none;color:var(--c)}
.others a:hover{text-decoration:underline;text-underline-offset:4px}

/* sign-off path */
.flow{list-style:none;display:grid;gap:10px}
.flow li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:#fff}
.flow li b{font-size:15px}
.flow li span{color:var(--sub);font-size:14px;line-height:1.4}
.flow li:not(:last-child)::after{content:"";position:absolute;left:26px;bottom:-11px;width:1.5px;height:10px;background:var(--green)}
.flow li:last-child{border-color:var(--green);background:var(--mint)}

/* three views of one deal */
.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.views figcaption{font-size:13px;color:var(--sub);line-height:1.5}
.views figcaption b{color:var(--ink)}
.toggles{list-style:none}
.toggles li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.toggles li:last-child{border-bottom:0}
.toggles em{font:500 11.5px/1 var(--sans);font-style:normal;color:var(--faint);width:24px}
.sw{position:relative;width:34px;height:20px;border-radius:10px;background:#DCDCD5}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}

/* setup, connections, who */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:tl;margin-top:18px}
.timeline li{counter-increment:tl;padding:18px;border-radius:12px;background:#fff;border:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.timeline li::before{content:counter(tl);font:500 20px/1 var(--mono);color:var(--green)}
.timeline b{font-size:16px;line-height:1.3}
.timeline span{font-size:14px;line-height:1.5;color:var(--sub)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{padding:7px 12px;border-radius:6px;border:1px solid var(--line2);font-weight:500;font-size:14.5px;background:#fff}

/* comparison */
.tablewrap{overflow-x:auto;border:1px solid var(--line2);border-radius:12px;background:#fff}
.matrix{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:640px}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.matrix thead th{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:#FBFBF8}
.matrix tbody th{font-weight:600;width:24%}
.matrix tbody td{color:var(--sub)}
.matrix tbody td:last-child{color:var(--ink)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}

/* questions */
.faqgroup+.faqgroup{margin-top:26px}
.faqgroup h3{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.faq{border-bottom:1px solid var(--line2)}
details{border-top:1px solid var(--line2)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 0;font-weight:600;font-size:16.5px;line-height:1.35}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--green);flex:none;transition:transform .2s}
details[open]>summary::after{transform:rotate(45deg)}
details>p{padding:0 0 16px;color:var(--sub);font-size:15.5px;max-width:68ch}
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:10px}
.gloss div{padding:9px 0;border-top:1px solid var(--line)}
.gloss dt{font-weight:600;font-size:14.5px}
.gloss dd{margin:2px 0 0;color:var(--sub);font-size:14px}

/* contact and legal */
.contact{list-style:none;margin-top:18px;border-top:1px solid var(--line2)}
.contact li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact li>span{font:500 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.contact a{font-weight:600;color:var(--green)}
.legal-doc h2{font-size:19px;letter-spacing:-.015em;margin:26px 0 8px}
.legal-doc p{color:var(--sub);font-size:15.5px;line-height:1.65;margin-bottom:10px}
.legal-doc .meta{font:400 13px/1.5 var(--mono);color:var(--faint);margin-bottom:6px}
.legal-doc .toc{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 4px;font-size:14px}
.legal-doc .toc a{color:var(--sub)}

/* footer: solid ground */
.foot{position:relative;z-index:2;background:var(--dark);color:rgba(236,244,238,.72)}
.foot-in{padding:52px var(--gut) 44px;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px}
.foot .brand{color:#fff}
.foot .brand img{filter:brightness(0) invert(1)}
.foot-brand p{margin-top:10px;font-size:14.5px;line-height:1.55;max-width:34ch}
.foot-brand .fcta{display:inline-flex;margin-top:16px;height:40px;padding:0 16px;align-items:center;border-radius:6px;background:#fff;color:var(--green);font-weight:600;font-size:14.5px;text-decoration:none}
.foot h3{font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(236,244,238,.5);margin-bottom:10px}
.foot ul{list-style:none;display:grid;gap:8px;font-size:14.5px}
.foot ul a{text-decoration:none}
.foot ul a:hover{color:#fff}
.legal{grid-column:1/-1;font-size:13px;color:rgba(236,244,238,.5);padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}

@media (max-width:1240px){
  .row5 ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel.wide2{width:min(700px,100%)}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1100px){
  .menu{display:none}.nav-in{grid-template-columns:1fr auto}
  .mbtn{display:inline-flex}
}
/* stacked: under 980px the islands take the top of the screen and each card rises from below */
@media (max-width:980px) and (orientation:portrait),(max-width:700px){
  :root{--nav:58px}
  .scene,.scene[data-side="right"],.scene[data-side="wide"],.scene[data-side="bottom"],.scene.low{justify-content:center;align-items:flex-end;padding:calc(var(--nav) + 48vh) 12px 7vh}
  .panel,.panel.sm,.panel.wide2,.panel.full{width:min(640px,100%);padding:22px 20px 24px;border-radius:16px}
  .free{width:min(640px,100%);background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.95);border-radius:16px;padding:22px 20px 24px;box-shadow:0 30px 60px -38px rgba(52,40,20,.5)}
  .scene.hero{padding-top:calc(var(--nav) + 42vh)}
  .row5{width:min(640px,100%)}
  .row5 .rh{background:rgba(255,255,255,.93);border-radius:14px;padding:16px 18px}
  .row5 ul{grid-template-columns:1fr 1fr}
  .views{grid-template-columns:1fr}
  .gloss{grid-template-columns:1fr}
  .tag{padding:5px 8px 6px}.tag .n{font-size:11.5px}.tag .s{font-size:10px}
}
@media (max-width:600px){
  body{font-size:16px}
  h1{font-size:36px}
  .free h2.display{font-size:32px}
  .panel h2,.row5 .rh h2{font-size:26px}
  .navr{gap:12px}
  .clock b{font-size:14px;min-width:58px}
  .navcta{padding:0 12px;font-size:14px}
  .feat,.feat.two,.timeline,.twoview,.files.big{grid-template-columns:1fr}
  .row5 ul{grid-template-columns:1fr}
  .flow li{grid-template-columns:1fr;gap:2px}
  .asklist li{grid-template-columns:minmax(0,1fr) auto}
  .asklist .lane{grid-column:1/-1;width:auto}
  .asklist li>b:first-child{grid-column:1}
  .mini .r{grid-template-columns:minmax(0,1fr) auto}
  .mini .r .lane{grid-column:1/-1;width:auto}
  .contact li{grid-template-columns:1fr;gap:2px}
  .foot-in{grid-template-columns:1fr 1fr}
}
/* small phones keep the clock: the story still runs 9 AM to 1 PM, just without the sun icon */
@media (max-width:420px){.clock .sunic{display:none}.clock b{font-size:13.5px;min-width:56px}.navr{gap:10px}.navcta{padding:0 11px;font-size:13.5px}}
@media (max-width:350px){.clock{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}summary::after,.lcard{transition:none}}

/* Runs: words a little left, a little right, never boxed; the islands take whatever space is left. */
/* Alternating: runs of words sit a little left, a little right; between them, a breath where the islands have the whole middle. */
.runs{position:relative}
.runs .scene{position:relative;min-height:0;display:block;padding:0;margin-top:14vh;width:min(600px,44vw);margin-left:var(--gut);margin-right:auto}
.runs .scene[data-side="right"]{margin-left:auto;margin-right:var(--gut)}
.runs .scene.cont{margin-top:9vh}
.runs .scene.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-top:0;padding:calc(var(--nav) + 4vh) 0 6vh}
.runs .scene.gap{height:58vh;margin-top:0;width:auto}
.runs .scene.w{width:min(880px,60vw)}
.runs .shot-wrap{margin-top:26px}
.runs .views{margin-top:24px}
.runs .faq{margin-top:18px}
.runs .gloss{margin-top:18px}
.runs .legal-doc h2{font-size:19px;margin:26px 0 8px}
.runs .contact{margin-top:22px}
.runs .scene.end{margin-bottom:24vh}
/* a faint wash behind each run of words, with no edge */
.runs .scene[data-ob]::before{content:"";position:absolute;inset:-10vh -7vw;z-index:-1;pointer-events:none;background:radial-gradient(farthest-side,rgba(246,246,241,.5),rgba(246,246,241,.28) 60%,rgba(246,246,241,0))}
.runs .scene[data-ob]{isolation:isolate}

.label{display:flex;gap:14px;align-items:baseline;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.label b{font-weight:500;color:var(--green)}
.lanek b{color:var(--lane)}
.runs h1{font-size:clamp(40px,4.2vw,64px);line-height:1.02;letter-spacing:-.04em;margin-bottom:22px}
.runs h2{font-size:clamp(32px,3vw,46px);line-height:1.06;letter-spacing:-.034em;margin-bottom:6px}
.runs .t{font-size:18px;line-height:1.62;color:var(--sub);margin-top:16px;max-width:54ch}
.runs .t strong{color:var(--ink);font-weight:600}
.runs .t + .t{margin-top:14px}
.runs .lead{font-size:clamp(18px,1.35vw,20px);max-width:48ch}
.rows{list-style:none;margin-top:26px;border-top:1px solid var(--line2)}
.rows li{padding:14px 0;border-bottom:1px solid var(--line2);font-size:16.5px;line-height:1.5;color:var(--sub)}
.rows li b{color:var(--ink);font-weight:600}
.lanerow{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:18px;align-items:baseline;text-decoration:none}
.lanerow b{color:var(--c)!important;font-size:17px}
.lanerow i{font-style:normal;font-weight:600;color:var(--ink);font-size:14px;white-space:nowrap}
.lanerow:hover i{color:var(--green)}
.inline{margin-top:18px;font-size:17px;line-height:1.6;color:var(--sub)}
.runs .shot{margin-top:26px;box-shadow:0 40px 80px -40px rgba(40,34,20,.45)}
.runs .go{margin-top:22px}
.others{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line2);font-size:15px}
.others span{color:var(--faint)}
.others a{font-weight:600;text-decoration:none;color:var(--c)}

/* phones and upright tablets: the world stays the whole screen behind the page, as on a laptop. Each run of words
   sits on a sheet of the same sky (drawn by the script, soft at both ends), so the words can use the whole screen and
   the islands show wherever the page is open. The first screen leaves the top part to the islands. */
@media (max-width:980px) and (orientation:portrait),(max-width:700px){
  :root{--stage:max(290px,calc((100vh - var(--nav)) * .36))}
  @supports (height:100svh){:root{--stage:max(290px,calc((100svh - var(--nav)) * .36))}}
  .world canvas{bottom:auto;height:100vh;height:100lvh}
  .skysheet{display:block;position:fixed;left:0;top:0;width:100%;height:0;z-index:1;overflow:hidden;pointer-events:none;will-change:transform;
    -webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  .skysheet i{position:absolute;left:0;top:0;width:100%;height:100vh;height:100lvh;will-change:transform;background:var(--skygrad,linear-gradient(#D9E9F0,#EEF1EA 65%,#F5F0E4))}
  .runs{padding:calc(var(--nav) + var(--stage) + 64px) 18px 0}
  .runs .scene,.runs .scene[data-side="right"],.runs .scene.w{width:auto;margin:64px 0 0}
  .runs .scene.cont{margin-top:18px}
  .runs .scene.hero{min-height:0;display:block;padding:0;margin-top:0}
  .runs .scene.gap{height:30vh;margin:0}
  .runs .scene.end{margin-bottom:80px}
  .runs .scene[data-ob]::before{display:none}
  .lanerow{grid-template-columns:1fr auto}
  .lanerow span{grid-column:1/-1;order:3}
}