/* Allotide Labs — shared site styles. Home-only rules (ribbon canvas, call stage) live inline in /index.html. */
/* Fonts, self-hosted (SIL Open Font License; see /assets/fonts/OFL-*.txt). Newsreader keeps its optical-size axis; weight is trimmed to the one instance used. */
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(/assets/fonts/newsreader-300-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(/assets/fonts/newsreader-300-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/newsreader-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/newsreader-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#0a0b0e;
  --ink:#ebe9e4;
  --ink-2:#b4b6bd;
  --mute:#7b7e88;
  --hair:#20222a;
  --accent:#f0b264;
  --accent-dim:#b9884d;
  --warm:#f2ece2;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(1.25rem,5vw,4.5rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
::selection{background:rgba(240,178,100,.28)}
.page{position:relative;z-index:1}

/* header: fixed, with a ground-colour band that blurs and fades content passing beneath */
.top{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:2.5rem;padding:1.15rem var(--pad);font-size:.9rem;letter-spacing:.02em}
.top::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-1.8rem;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,11,14,.96) 0%,rgba(10,11,14,.9) 55%,rgba(10,11,14,0) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%)}
.mark{text-decoration:none;font-weight:500;color:var(--ink);white-space:nowrap}
.mark span{color:var(--mute);font-weight:400;margin-left:.4em}
.links{display:flex;gap:1.9rem;list-style:none;margin:0 auto;padding:0;font-size:.85rem}
.links a{color:var(--mute);text-decoration:none;transition:color .35s var(--ease)}
.links a:hover{color:var(--ink)}
.links a[aria-current="page"]{color:var(--ink)}
.top .actions{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.top .book{color:var(--accent);text-decoration:none;font-weight:500;transition:color .35s var(--ease);white-space:nowrap}
.top .book:hover{color:var(--ink)}
.menubtn{display:none;appearance:none;background:none;border:0;padding:.3em 0;margin:0;color:var(--ink-2);font:inherit;font-size:.85rem;letter-spacing:.02em;cursor:pointer}
.menubtn:hover{color:var(--ink)}

/* type roles */
.eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 1.35rem}
.s{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;letter-spacing:-.012em;line-height:1.08;text-wrap:balance;margin:0}
.sub{color:var(--ink-2);max-width:44ch;margin:1.6rem 0 0;font-size:1.0625rem;line-height:1.55}
.intro{color:var(--ink-2);max-width:56ch;margin:1.7rem 0 0;font-size:1.125rem;line-height:1.55;text-wrap:pretty}
.intro.place{color:var(--mute);margin-top:.8rem}
.cue{position:relative;width:1px;height:2.6rem;margin:3rem 0 0 .6rem;background:var(--mute);opacity:.45;animation:cue 3.6s ease-in-out infinite}
.cue::after{content:"";position:absolute;left:-4px;bottom:1px;width:8px;height:8px;border-right:1px solid var(--mute);border-bottom:1px solid var(--mute);transform:rotate(45deg)}
@keyframes cue{0%,100%{opacity:.3}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.cue{animation:none}}

/* transcript typography: the home stage's captions and the demo page's static transcript */
.cap{margin:0}
.act{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.act b{font-weight:500;color:var(--ink-2)}
.line{display:block;font-size:1.25rem;line-height:1.35;color:var(--ink)}
.cap.caller .line,.cap.person .line{font-family:var(--serif);font-style:italic;font-weight:300;font-optical-sizing:auto;font-size:1.7rem;line-height:1.25}
.cap.agent .act b{color:var(--accent)}
.cap.person .act b{color:var(--warm)}
.line i{color:var(--mute);font-style:normal}
.cap.receipt .line{font-family:var(--serif);font-weight:300;font-size:1.4rem;color:var(--ink-2)}
.cap.receipt .it{white-space:nowrap}
.cap.receipt .line em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
.cap.receipt .line i{margin:0 .3em;color:var(--mute)}
.transcript{list-style:none;margin:0;padding:0;max-width:40rem;display:grid;gap:2.4rem}
.transcript>li{min-width:0}

/* section rhythm */
.screen{display:grid;place-items:center;padding:14vh var(--pad)}
.screen .inner{max-width:44rem}
.screen .s{font-size:clamp(2.1rem,5vw,3.9rem);max-width:20ch}
.that{min-height:70vh}
.claims{max-width:72rem;margin:0 auto;padding:4vh var(--pad) 16vh}
.claims .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 4rem;border-top:1px solid var(--hair);padding-top:3rem}
.claim .s{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.claim .sub{font-size:1rem;margin-top:1rem;max-width:32ch}
.la{min-height:60vh}
.la .s{font-size:clamp(2rem,4.4vw,3.2rem);max-width:18ch}
.la .rule,.commit .rule{width:3.5rem;height:1px;background:var(--accent-dim);margin:0 0 2.2rem}
.commit{min-height:50vh}
.commit .s{font-style:italic;font-size:clamp(2rem,4.6vw,3.6rem);max-width:24ch}

/* offers list (home) and descriptive rows (inner pages) */
.offers{max-width:66rem;margin:0 auto;padding:10vh var(--pad) 14vh}
.offers .s{font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch}
.rows{list-style:none;margin:4rem 0 0;padding:0;border-bottom:1px solid var(--hair)}
.row{display:grid;grid-template-columns:minmax(11rem,19rem) 1fr auto;gap:2.5rem;align-items:baseline;padding:1.75rem 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--ink-2);transition:color .35s var(--ease)}
.row .name{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;font-size:1.75rem;line-height:1.15;color:var(--ink);letter-spacing:-.01em;transition:color .35s var(--ease)}
.row .desc{max-width:48ch}
.row .kind{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
a.row:hover{color:var(--ink)}
a.row:hover .name{color:var(--accent)}
.after{margin:3rem 0 0;color:var(--mute)}
.after a{color:var(--accent);text-decoration:none;font-weight:500}
.after a:hover{color:var(--ink)}

/* the close */
.cta{min-height:82vh;display:grid;place-items:center;text-align:center;padding:10vh var(--pad)}
.cta .big{display:inline-block;margin:0;font-family:var(--serif);font-weight:300;font-optical-sizing:auto;font-size:clamp(3rem,9vw,7.5rem);line-height:1;letter-spacing:-.015em;color:var(--accent);border-bottom:1px solid var(--accent-dim);padding-bottom:.08em;text-wrap:balance}
/* the close as the action: the headline itself is the link (home) */
.cta .big.link{border:0;padding:0}
.cta .big.link a{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid var(--accent-dim);padding-bottom:.08em;cursor:pointer;transition:color .35s var(--ease),border-color .35s var(--ease)}
.cta .big.link a:hover{color:#f7c98a;border-bottom-color:var(--accent)}
.cta .big.link a:focus-visible{outline-offset:.12em}
.cta .big.link+.see{margin-top:2.6rem}
.cta .see{margin:1.5rem 0 0;font-size:.95rem}
.cta .see a{color:var(--mute);text-decoration:none;transition:color .35s var(--ease)}
.cta .see a:hover{color:var(--ink)}
.aboutline{margin:5.5rem auto 0;max-width:40rem;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.aboutline a{display:inline-block;margin-top:.5rem;color:var(--accent);text-decoration:none;font-weight:500;transition:color .35s var(--ease)}
.aboutline a:hover{color:var(--ink)}

/* inner pages: quiet ambient (a fixed CSS glow) plus the ribbon painted once, still */
body.inner::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 42% at 50% 28%,rgba(204,208,218,.075),transparent 70%),
             radial-gradient(ellipse 80% 30% at 50% 108%,rgba(241,180,98,.045),transparent 70%)}
canvas.still{position:absolute;top:0;left:0;width:100%;height:72vh;z-index:0;display:block;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
canvas.still.on{opacity:1}
.page-hero{position:relative;max-width:66rem;margin:0 auto;padding:clamp(8.5rem,22vh,13rem) var(--pad) clamp(2.5rem,7vh,4.5rem)}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.8rem);max-width:14ch}
.page-hero .intro{max-width:58ch}
.block{max-width:66rem;margin:0 auto;padding:clamp(3rem,8vh,5.5rem) var(--pad)}
.block h2.s{font-size:clamp(1.9rem,3.6vw,2.8rem);max-width:22ch}
.block .lede{color:var(--ink-2);max-width:60ch;font-size:1.0625rem;line-height:1.6;margin:1.2rem 0 0;text-wrap:pretty}
.block .lede+.lede{margin-top:1rem}
.block .lede a{color:var(--accent);text-decoration:none;font-weight:500}
.block .lede a:hover{color:var(--ink)}
.rows.two .row{grid-template-columns:minmax(11rem,19rem) 1fr}
.rows.two .row .desc{max-width:56ch}
.block .rows{margin-top:2.5rem}
.steps{list-style:none;counter-reset:step;margin:2.5rem 0 0;padding:0;max-width:46rem;display:grid;gap:2rem}
.steps li{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:baseline}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--serif);font-weight:300;font-size:1.5rem;color:var(--accent-dim);font-variant-numeric:tabular-nums}
.steps .name{display:block;font-family:var(--serif);font-weight:300;font-size:1.5rem;line-height:1.2;color:var(--ink);margin-bottom:.3rem}
.steps p{margin:0;color:var(--ink-2);max-width:52ch}
.stack{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;color:var(--ink-2);font-size:1rem}
.stack li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent-dim);margin:0 .7em 3px 0}
.banner{display:inline-block;margin:1.2rem 0 0;padding:.45em 1em;border:1px solid var(--accent-dim);border-radius:999px;color:var(--accent);font-size:.78rem;letter-spacing:.06em}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:3rem 4rem;margin-top:2.5rem;border-top:1px solid var(--hair);padding-top:2.5rem}
.two-up h3{font-family:var(--serif);font-weight:300;font-size:1.75rem;line-height:1.15;margin:0 0 .8rem;letter-spacing:-.01em}
.two-up p{margin:0;color:var(--ink-2);max-width:44ch}
.founder{display:grid;grid-template-columns:6.5rem 1fr;gap:2.5rem;align-items:start;margin-top:2.5rem;border-top:1px solid var(--hair);padding-top:2.5rem}
.photo-slot{width:6.5rem;height:6.5rem;border-radius:50%;border:1px solid var(--hair);background:radial-gradient(circle at 42% 36%,rgba(235,233,228,.07),transparent 62%)}
.founder .name{font-family:var(--serif);font-weight:300;font-size:1.75rem;line-height:1.15;margin:0 0 .6rem;letter-spacing:-.01em}
.founder p{margin:0;color:var(--ink-2);max-width:56ch}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 4rem;margin-top:2.5rem;border-top:1px solid var(--hair);padding-top:2.5rem}
.principles h3{font-family:var(--serif);font-weight:300;font-size:1.6rem;line-height:1.15;margin:0 0 .6rem;letter-spacing:-.01em}
.principles p{margin:0;color:var(--ink-2);max-width:36ch}
.prose{max-width:62ch}
.prose h2{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;font-size:1.7rem;line-height:1.15;letter-spacing:-.01em;margin:2.8rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1rem;color:var(--ink-2);line-height:1.65}
.prose a{color:var(--accent);text-decoration:none}
.prose a:hover{color:var(--ink)}
.dated{color:var(--mute);font-size:.85rem;letter-spacing:.04em;margin:0 0 2.5rem}
.contact-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.contact-rows li{display:grid;grid-template-columns:minmax(11rem,19rem) 1fr;gap:2.5rem;padding:1.75rem 0;border-top:1px solid var(--hair);align-items:baseline}
.contact-rows .name{font-family:var(--serif);font-weight:300;font-size:1.75rem;line-height:1.15;color:var(--ink);letter-spacing:-.01em}
.contact-rows p{margin:0;color:var(--ink-2);max-width:52ch}
.contact-rows p+p{margin-top:.5rem}
.contact-rows a{color:var(--accent);text-decoration:none;font-weight:500}
.contact-rows a:hover{color:var(--ink)}
body.inner .cta{min-height:0;padding:12vh var(--pad) 14vh}
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:14vh var(--pad)}
.lost .s{font-size:clamp(2.4rem,6vw,4.6rem)}
.lost p{color:var(--ink-2)}
.lost a{color:var(--accent);text-decoration:none;font-weight:500}

/* depth devices: the flow diagram (ribbon language), the trace, example transcripts, the week, the FAQ */
.flow{margin:2.6rem 0 0}
.flow svg{display:block;width:100%;height:auto;max-width:66rem}
.flow-labels{list-style:none;margin:.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:1rem;text-align:center}
.flow-labels li{font-size:.9rem;color:var(--mute);line-height:1.45}
.flow-labels b{display:block;font-weight:500;color:var(--ink-2);font-size:1rem;margin-bottom:.15rem}
.flow-labels li.accent b{color:var(--accent)}
.block .flow+.lede{margin-top:2.4rem}
.block .flow+.rows{margin-top:2.6rem}
.lines{list-style:none;margin:2.2rem 0 0;padding:0;max-width:52rem;border-bottom:1px solid var(--hair)}
.lines li{padding:1rem 0;border-top:1px solid var(--hair);color:var(--ink-2);font-size:1.0625rem;line-height:1.5}
.lines li b{color:var(--ink);font-weight:500}
.example+.example{margin-top:3.2rem;padding-top:2.8rem;border-top:1px solid var(--hair)}
.example .eyebrow{margin-bottom:1.6rem}
.example .eyebrow b{font-weight:500;color:var(--ink-2)}
.block .example:first-of-type{margin-top:2.6rem}
.transcript.compact{gap:1.45rem;max-width:44rem}
.transcript.compact .line{font-size:1.1rem;line-height:1.4}
.transcript.compact .cap.caller .line,.transcript.compact .cap.person .line{font-size:1.4rem}
.transcript.compact .cap.receipt .line{font-size:1.15rem}
.transcript.compact .act{margin-bottom:.4rem}
.trace{list-style:none;margin:2.4rem 0 0;padding:0;max-width:48rem;border-top:1px solid var(--hair)}
.trace li{display:grid;grid-template-columns:4.2rem 1fr;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.trace time{font-variant-numeric:tabular-nums;color:var(--mute);font-size:.85rem;letter-spacing:.06em}
.trace .act{margin-bottom:.3rem}
.trace .line{font-size:1.05rem;line-height:1.4}
.trace .cap.caller .line{font-size:1.3rem}
.trace .cap.action .act b{color:var(--ink-2)}
.trace .cap.action .line{color:var(--ink-2)}
.week{list-style:none;margin:2.4rem 0 0;padding:0;max-width:52rem;border-bottom:1px solid var(--hair)}
.week li{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:1.1rem 0;border-top:1px solid var(--hair);align-items:baseline}
.week .day{font-family:var(--serif);font-weight:300;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em}
.week p{margin:0;color:var(--ink-2);max-width:56ch}
.faq{margin:2.4rem 0 0;max-width:54rem;border-top:1px solid var(--hair)}
.faq dt{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;padding:1.7rem 0 .55rem;color:var(--ink)}
.faq dd{margin:0;padding:0 0 1.7rem;border-bottom:1px solid var(--hair);color:var(--ink-2);max-width:62ch;line-height:1.6}
.row .meta{display:block;margin-top:.8rem;font-size:.92rem;color:var(--mute);line-height:1.5}
.row .meta b{color:var(--ink-2);font-weight:500}
.two-up ul{list-style:none;margin:0;padding:0}
.two-up ul li{padding:.55rem 0;color:var(--ink-2);border-top:1px solid var(--hair)}
.two-up ul li:first-child{border-top:0;padding-top:0}

/* footer */
footer{border-top:1px solid var(--hair);padding:2.4rem var(--pad) 3rem;font-size:.8rem;color:var(--mute);display:grid;gap:2rem;position:relative;z-index:1;background:var(--bg)}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.f-links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.f-links a{color:var(--mute);text-decoration:none;transition:color .35s var(--ease)}
.f-links a:hover{color:var(--ink)}
.f-bot{display:flex;justify-content:space-between;gap:1rem 2.5rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--hair)}
.f-bot a{color:var(--mute);text-decoration:none}
.f-bot a:hover{color:var(--ink)}
.f-bot .f-note{color:var(--mute)}

@media (max-width:760px){
  .top{gap:1.25rem}
  .links{display:none}
  .menubtn{display:inline-block}
  .top.open .links{display:flex;flex-direction:column;gap:1.15rem;position:absolute;top:100%;left:0;right:0;margin:0;padding:.75rem var(--pad) 1.6rem;font-size:1.05rem;background:var(--bg);border-bottom:1px solid var(--hair)}
  .top.open .links a{color:var(--ink)}
  .claims .grid{grid-template-columns:1fr;gap:2.75rem}
  .row{grid-template-columns:1fr;gap:.55rem}
  .rows.two .row{grid-template-columns:1fr}
  .row .kind{order:-1}
  .two-up,.principles{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
  .contact-rows li{grid-template-columns:1fr;gap:.6rem}
  .steps li{grid-template-columns:2.4rem 1fr}
  .page-hero h1{font-size:clamp(2.3rem,11vw,3rem)}
  .intro{font-size:1rem;margin-top:1.3rem}
  .cue{margin-top:2.2rem;height:2.2rem}
  .line{font-size:1.1rem}
  .cap.caller .line,.cap.person .line{font-size:1.45rem}
  .cap.receipt .line{font-size:1.2rem}
  .flow svg{display:none}
  .flow-labels{grid-template-columns:1fr;text-align:left;gap:1.3rem;margin:.5rem 0 0 .35rem;padding-left:1.5rem;border-left:1px solid var(--hair)}
  .flow-labels li{position:relative}
  .flow-labels li::before{content:"";position:absolute;left:-1.5rem;top:.5rem;width:9px;height:9px;border-radius:50%;background:var(--ink-2);transform:translateX(-5px)}
  .flow-labels li.accent::before{background:var(--accent);box-shadow:0 0 10px rgba(240,178,100,.55)}
  .trace li{grid-template-columns:1fr;gap:.35rem}
  .week li{grid-template-columns:1fr;gap:.4rem}
  .faq dt{font-size:1.3rem}
  .f-top,.f-bot{flex-direction:column;align-items:flex-start}
  .f-links{gap:.9rem 1.4rem}
  html:not(.js) .links{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:0}
  html:not(.js) .menubtn{display:none}
}