/* ============================================================
   BITSWAN V2 — built from the designer's Figma export
   Spec source: Bitswan_homepage.pdf (2000pt artboard, 1:1)
   Content column: 1076px   Fog band: 1630px
   ============================================================ */
:root{
  --lime:#ABFF00; --lime-h:#9BE600;
  --ink:#020202; --white:#FFFFFF; --fog:#EFEFEF;
  --grey:#555555; --grey2:#888888; --grey3:#BBBBBB;
  --line:#E8E8E8; --panel:#4F4F4F; --card-dark:#1C1C1C;
  --maxw:1076px; --bandw:1630px;
  /* aliases so styles ported from V1 resolve against V2's palette */
  --acid:var(--lime); --paper:var(--fog); --hairline:var(--line); --ink-hair:#2A2A28; --warn:#FA8500;
  --sans:"Space Grotesk",-apple-system,system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--white);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:76px 76px}

/* ---------- primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:14px;color:var(--ink);margin-bottom:40px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.ink .eyebrow,.ink .eyebrow::before{color:var(--white)}
h1{font-weight:700;font-size:clamp(44px,5.6vw,80px);line-height:.90;letter-spacing:-.03em}
h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.025em}
h1,h2,h3{position:relative;z-index:0}
  .hl{position:relative;color:var(--ink);padding:0 .2em}
  .hl::before{content:"";position:absolute;left:0;right:0;top:.21em;bottom:.17em;background:var(--lime);z-index:-1;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lime{color:var(--lime)}
.lede{font-size:19px;line-height:1.58;color:var(--grey);max-width:56ch;margin-top:22px}
.ink .lede{color:var(--grey3)}
.body{font-size:16px;line-height:1.5;color:var(--grey);max-width:64ch;margin-top:22px}
.micro{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--lime);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:14px;padding:16px 34px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:background .16s,transform .12s}
.pill:hover{background:var(--lime-h);transform:translateY(-1px)}
.tlink{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s}
.tlink:hover{border-bottom-color:var(--ink)}
.ink .tlink{color:var(--white)}
.ink .tlink:hover{border-bottom-color:var(--white)}
section{position:relative}
.sec{padding:92px 0}
  #automations{padding-bottom:46px}
  #governance{padding-bottom:156px}
  #comparison{padding-top:68px;padding-bottom:76px}
  #proof{padding-bottom:77px}
  #faq{padding-top:52px;padding-bottom:104px}
.ink{background:var(--ink);color:var(--white)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ink a:focus-visible,.ink button:focus-visible{outline-color:var(--white)}

/* faint drafting grid */
.gridbg{background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:76px 76px}

/* chevron connector between sections */
.chev::after{content:"";position:absolute;left:50%;bottom:-22px;margin-left:-22px;width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-top:22px solid var(--ink);z-index:3}
.chev.light::after{border-top-color:var(--fog)}
  .chev.paper::after{border-top-color:var(--white)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid transparent}
.navrow{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:26px;width:auto;display:block}
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;flex:none}
.navtoggle i{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.nav.open .navtoggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .navtoggle i:nth-child(2){opacity:0}
.nav.open .navtoggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navtoggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.navlinks{display:flex;gap:34px;margin-left:auto;margin-right:34px}
.navlinks a{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.85;transition:opacity .15s}
.navlinks a:hover{opacity:1}
.nav .pill{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:13px 26px}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--white);padding:83px 0 60px}
.hero-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 394px;gap:63px;align-items:start}
.hero h1{margin-bottom:6px}
.hero .hl{display:inline-block;line-height:1;margin-top:10px}
  .hero .hl::before{top:.075em;bottom:-.15em}
.hero .lede{max-width:48ch;color:var(--grey3);margin-top:38px}
.cta-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:36px}
.truststrip{height:97px}
  .hero-foot{max-width:var(--maxw);margin:0 auto;padding:27px 24px 0}
.hero-foot span{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

/* console panel — overlaps the black band into the section below */
.console{background:var(--panel);color:var(--white);width:514px;padding:30px;margin-top:43px;margin-bottom:-179px;height:721px;position:relative;z-index:4;display:flex;flex-direction:column}
  .chead{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
  .csize{margin-top:46px}
  .csize-row{display:flex;justify-content:space-between;align-items:baseline}
  .csize-row .k{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
  .csize-row .v{font-weight:700;font-size:22px;color:var(--lime);letter-spacing:-.02em}
  .csize-row .v em{font-style:normal;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.16em;color:var(--white);margin-left:9px}
  .track{position:relative;height:14px;background:#000;border-radius:999px;margin:22px 0 12px;cursor:pointer;touch-action:none}
  .track .knob{position:absolute;top:50%;left:32%;width:16px;height:34px;margin:-17px 0 0 0;transform:translateX(-50%);background:var(--white);cursor:grab;touch-action:none}
  .track .knob:active{cursor:grabbing}
  .track .knob:focus-visible{outline:2px solid var(--white);outline-offset:3px}
  .scale{position:relative;height:13px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#CFCFCF}
  .scale span{position:absolute;top:0;transform:translateX(-50%)}
  .scale span:first-child{transform:none}
  .scale span:last-child{transform:translateX(-100%)}
  .crule{height:1px;background:rgba(255,255,255,.5)}
  .crule:first-of-type{margin-top:34px}
  .chans{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;padding:60px 0 22px}
  .chan{display:flex;flex-direction:column;align-items:center;gap:16px}
  .fader{position:relative;width:40px;height:238px;background:#000;border-radius:999px;cursor:pointer;touch-action:none}
  .fader .cap{position:absolute;left:50%;width:62px;height:7px;margin-left:-31px;background:var(--white);cursor:grab;touch-action:none}
  .fader .cap:active{cursor:grabbing}
  .fader .cap:focus-visible{outline:2px solid var(--white);outline-offset:3px}
  .fader .fdot{position:absolute;left:50%;bottom:16px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--white);transition:background .2s}
  .fader .fdot.on{background:var(--lime)}
  .chan .lbl{font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
  .creadout{margin-top:auto;padding-top:28px}
  .creadout .k{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
  .creadout .n{font-weight:700;font-size:64px;line-height:.9;letter-spacing:-.03em;color:var(--lime);margin:0}
  .crow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:12px}

  /* --- panel mode switch --- */
  .pseg{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;flex:none;background:transparent}
  .pseg button{font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#D6D6D6;background:transparent;border:none;padding:7px 15px;cursor:pointer;transition:background .18s,color .18s}
  .pseg button:hover{color:var(--white)}
  .pseg button.on{background:var(--lime);color:var(--ink)}
  .pseg button:focus-visible{outline:2px solid var(--white);outline-offset:2px}
  #ptitle{transition:opacity .2s ease}

  /* --- panes cross-fade --- */
  .panes{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);margin-top:0;overflow:hidden}
  .pane{grid-area:1/1;min-height:0;display:flex;flex-direction:column;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
  .pane.on{opacity:1;transform:none;pointer-events:auto}
  .pane[data-pane="console"]{overflow:visible}

  /* --- concierge, dressed for the grey panel --- */
  .clog{flex:1;min-height:0;overflow-y:auto;padding:26px 0 8px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55;scrollbar-width:thin;scrollbar-color:#7A7A7A transparent}
  .clog::-webkit-scrollbar{width:6px}
  .clog::-webkit-scrollbar-thumb{background:#7A7A7A}
  .clog::-webkit-scrollbar-track{background:transparent}
  .cmsg{max-width:94%}
  .cmsg.bot{color:#F2F2F2}
  .cmsg.user{align-self:flex-end;background:#000;color:var(--white);padding:7px 13px;border-radius:999px;font-size:13.5px}
  .cmsg .go{font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);text-decoration:none;border-bottom:1px solid transparent;cursor:pointer;display:inline-block;margin-top:6px}
  .cmsg .go:hover{border-bottom-color:var(--lime)}
  .cmsg.bot .w{display:inline-block;opacity:0;transform:translateY(2px);animation:wordin .18s ease forwards}
  @keyframes wordin{to{opacity:1;transform:none}}
  .cchips{display:flex;gap:7px;flex-wrap:wrap;padding:4px 0 10px}
  .cchips button{font-family:var(--mono);font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;background:#000;color:#D6D6D6;border:none;padding:7px 12px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
  .cchips button:hover{background:var(--lime);color:var(--ink)}
  .cstring{position:relative;height:16px;overflow:hidden;margin-bottom:8px}
  .cstring::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(255,255,255,.28)}
  .cstring i{position:absolute;inset:0;display:block;opacity:0;transform:scaleY(0);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2216%22 viewBox=%220 0 40 16%22%3E%3Cpath d=%22M0 8 Q5 1 10 8 T20 8 T30 8 T40 8%22 fill=%22none%22 stroke=%22%23ABFF00%22 stroke-width=%222%22/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:0 center;background-size:40px 16px}
  html.js .cstring.pluck i{animation:strum .26s linear infinite,decay 1s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes strum{from{background-position-x:0}to{background-position-x:-40px}}
  @keyframes decay{0%{opacity:1;transform:scaleY(1)}55%{opacity:1;transform:scaleY(.42)}100%{opacity:0;transform:scaleY(.06)}}
  .cin{display:flex;gap:10px;align-items:center;background:#000;border-radius:999px;padding:8px 8px 8px 18px;margin:0}
  .cin b{font-family:var(--mono);color:#8A8A8A}
  .cin input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--sans);font-size:14px;color:var(--white);outline:none}
  .cin input::placeholder{color:#7A7A7A}
  .askbtn{font-family:var(--sans);font-weight:600;font-size:14px;background:var(--lime);color:var(--ink);border:none;border-radius:999px;padding:12px 24px;cursor:pointer;transition:background .16s,transform .12s}
  .askbtn:hover{background:var(--lime-h);transform:translateY(-1px)}
  .askbtn:hover{background:var(--lime-h)}
  .askbtn:focus-visible{outline:2px solid var(--white);outline-offset:2px}
  .cnudge{text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin:0 0 7px;flex:none}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px;position:relative}
.stepnum{font-weight:700;font-size:56px;line-height:1;letter-spacing:-.03em;color:var(--lime)}
.steps > div:last-child
.step h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:26px 0 12px}
.step p{font-size:14.5px;line-height:1.65;color:var(--grey)}

/* ---------- fog band ---------- */
.band{width:min(var(--bandw),90%);margin:0 auto;background:var(--fog);border-top:12px solid var(--ink);position:relative}
  @media(max-width:1300px){.band{width:100%}}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}

/* automation cards */
  .cwrap{position:relative;margin-top:56px}
  .cviewport{overflow:hidden}
  .cards{display:flex;gap:16px;transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .card{flex:0 0 calc((100% - 32px)/3);display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:inset 0 0 0 var(--lime);transition:box-shadow .18s ease}
  .card:hover{box-shadow:inset 5px 0 0 var(--lime)}
  .card:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
  .cmore{margin-top:auto;padding-top:16px;font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
  .card:hover .cmore{color:var(--ink)}
  .carrow{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;background:var(--lime);color:var(--ink);border:none;cursor:pointer;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .16s,opacity .16s,transform .12s;font-family:var(--sans)}
  .carrow:hover:not(:disabled){background:var(--lime-h);transform:scale(1.06)}
  .carrow:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .carrow.prev{left:-72px}
  .carrow.next{right:-72px}
.card{background:var(--white);padding:20px 22px 24px;min-height:230px}
.tag{display:inline-block;background:var(--lime);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px}
.card h3{font-size:17.5px;font-weight:600;letter-spacing:-.01em;margin:18px 0 10px}
.card p{font-size:14px;line-height:1.65;color:var(--grey)}
.carousel{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:34px}
.arrows{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-118px)}
  @media(max-width:1400px){.arrows{position:static;transform:none;justify-content:center;gap:12px;margin-bottom:18px}.arrows button{margin:0}}
.arrows button{width:38px;height:38px;flex:none;order:0;background:transparent;border:1px solid var(--ink);cursor:pointer;font-size:14px;line-height:1;color:var(--ink);transition:background .15s,color .15s}
.arrows button:hover:not(:disabled){background:var(--ink);color:var(--white)}

/* ---------- governance ---------- */
.gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px}
.gcard{background:var(--card-dark);padding:0 22px 26px}
.plus{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:400;line-height:1;margin:-19px 0 22px}
.gcard h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;color:var(--white)}
.gcard p{font-size:14px;line-height:1.65;color:var(--grey3)}

/* ---------- comparison ---------- */
.cmpwrap{margin-top:52px;overflow-x:auto;background:var(--white)}
.cmp{width:100%;border-collapse:collapse;min-width:720px}
.cmp th{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:16px 18px;color:var(--grey);border-bottom:1px solid var(--line)}
.cmp th.win{background:var(--lime);color:var(--ink)}
.cmp td{padding:15px 18px;font-size:14.5px;color:var(--grey);border-bottom:1px solid var(--line);vertical-align:top}
.cmp td:first-child{font-size:15.5px;font-weight:600;color:var(--ink)}
.cmp td.win{background:rgba(171,255,0,.14);color:var(--ink);font-weight:600}
.cmp tr:last-child td{border-bottom:none}

/* ---------- proof ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:52px}
.stat{padding:26px 26px 28px}
.stat .k{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.stat .n{font-weight:700;font-size:64px;line-height:.9;letter-spacing:-.03em;margin-top:16px}
.s-fog{background:var(--fog)}
.s-lime{background:var(--lime)}
.s-ink{background:var(--ink)}.s-ink .k{color:var(--grey3)}.s-ink .n{color:var(--lime)}
.quote{margin-top:60px;border-left:5px solid var(--lime);padding-left:26px;max-width:78ch}
.quote blockquote{font-size:24px;line-height:1.45;letter-spacing:-.01em;font-weight:500}
.quote figcaption{margin-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.quote figcaption b{color:var(--ink);font-weight:700}
.logobar{display:grid;grid-template-columns:repeat(7,1fr);gap:26px 14px;margin-top:64px}
  .logobar span{font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .logobar i{white-space:normal}
  @media(max-width:1100px){.logobar{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:680px){.logobar{grid-template-columns:repeat(2,1fr)}}
.logobar span{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--ink)}
.logobar i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey2);margin-top:5px;font-weight:400}

/* ---------- faq ---------- */
.faq{margin-top:52px}
details{background:var(--white);margin-bottom:3px}
summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;font-weight:500;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:20px;height:20px;flex:none;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:14px 2px,2px 14px;background-position:center,center;background-repeat:no-repeat;transition:transform .3s cubic-bezier(.2,.7,.2,1),background-size .3s cubic-bezier(.2,.7,.2,1)}
details[open] summary::after{transform:rotate(180deg);background-size:14px 2px,2px 0}
.answer{padding:0 22px 22px;font-size:15px;line-height:1.6;color:var(--grey);max-width:78ch}

/* ---------- closing cta ---------- */
.cta{text-align:center;padding:90px 0 157px}
.cta .eyebrow{justify-content:center}
.cta h2{font-size:clamp(32px,4vw,52px);line-height:1.16}
.cta .lede{margin:26px auto 0;color:var(--grey3);max-width:46ch}
.cta .pill{margin-top:40px}
.cta .note{display:block;margin-top:24px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey2)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--white);padding:50px 0}
.frow{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.frow .fl{font-weight:700;font-size:18px;letter-spacing:-.02em}
.frow .fr{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey2)}

/* ---------- footer nav ---------- */
.fnav{max-width:var(--maxw);margin:0 auto 40px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.fcol{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.fh{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.fnav a{font-size:14.5px;line-height:1.3;color:var(--grey3);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.fnav a:hover{color:var(--white);border-bottom-color:var(--white)}
.fnav+.frow{border-top:1px solid var(--ink-hair);padding-top:26px}
  @media(max-width:880px){.fnav{grid-template-columns:repeat(2,1fr);gap:26px}}
  @media(max-width:520px){.fnav{grid-template-columns:1fr;gap:22px;margin-bottom:32px}}

/* ---------- related automations (case studies) ---------- */
.sec.related{padding-top:78px;padding-bottom:96px;background:var(--fog);border-top:1px solid var(--line)}
.sec.related .ucg{margin-top:34px}
.relnote{margin-top:30px;font-size:14.5px;line-height:1.7;max-width:760px}
.relnote a{color:var(--ink);font-weight:500}
  @media(max-width:760px){.sec.related{padding-bottom:56px}}

/* ---------- responsive ---------- */
@media(max-width:1400px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 430px;gap:48px}
  .console{width:430px}
  .carrow.prev{left:-24px}
  .carrow.next{right:-24px}
}
@media(max-width:1180px){
  .carrow{width:42px;height:42px;margin-top:-21px;font-size:22px}
  .carrow.prev{left:-8px}
  .carrow.next{right:-8px}
  .gcards{grid-template-columns:repeat(2,1fr)}
}
/* ---- the console keeps its place beside the copy, just smaller ---- */
@media(min-width:1000px) and (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 400px;gap:44px}
  .console{width:400px;height:640px;margin-bottom:-110px;padding:26px}
  .fader{height:205px}
  .chans{padding:44px 0 20px}
  .csize{margin-top:36px}
  .creadout .n{font-size:54px}
}
/* below this the panel no longer breaks past the band — it would just occupy
   black space, so it goes and the copy takes the full column */
@media(max-width:999px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .console{display:none}
  .hero{padding-bottom:76px}
  .hero .lede{max-width:60ch}
}
@media(max-width:880px){
  .navlinks{display:none}
  .steps{grid-template-columns:1fr;gap:34px}
  .carrow.prev{left:-6px}
  .carrow.next{right:-6px}
  .stats{grid-template-columns:1fr}
  .sec{padding:64px 0}
  .hero{padding:56px 0 64px}
}
@media(max-width:760px){
  .card{flex:0 0 100%}
}
@media(max-width:560px){
  .gcards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* ---------- scroll rail (right-edge ruler) ---------- */
#rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);height:62vh;width:26px;z-index:15;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;mix-blend-mode:difference;pointer-events:none}
#rail i{width:12px;height:1px;background:#fff;opacity:.5}
#rail i:nth-child(5n+2){width:22px;background:#fff;opacity:1}
#rail .pointer{position:absolute;right:0;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:14px solid #fff;transition:top .15s linear}
@media(max-width:1180px){#rail{display:none}}

  #proof{background:var(--white);background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:76px 76px}


/* ============ V1 CONTENT IN V2 CLOTHES — compatibility layer ============ */
.pg{display:none}
.pg.on{display:block}
.pg section{position:relative;padding:92px 0}
.pg section.ink{background:var(--ink);color:var(--white)}
.pg .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* page hero */
.subhero{padding:104px 0 60px;position:relative}
.subhero.ink{background:var(--ink);color:var(--white);padding:96px 0 84px}
.subhero.ink .lede{color:var(--grey3)}
.subhero.ink .grey{color:var(--grey3)}
.subhero.ink .pageno{color:var(--grey2)}
.subhero.ink .dialbox{margin-top:0}
.subhero.ink .dial-lbl{color:var(--white)}
.subhero h1{font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-.03em;max-width:20ch}
.subhero .lede{margin-top:26px;max-width:60ch}
.subhero .cta-row{margin-top:34px}

.ink .pg section > .wrap{position:relative;z-index:1}

/* eyebrow bits */
.crumb{white-space:nowrap}
.pageno{margin-left:auto;font-weight:400;color:var(--grey)}
.ink .pageno{color:var(--grey3)}

/* text */
.grey{font-size:17px;line-height:1.6;color:var(--grey);max-width:64ch;margin-top:20px}
.ink .grey{color:var(--grey3)}
.jabline{margin-top:26px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.mlink{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s}
.mlink:hover{border-bottom-color:var(--ink)}
.ink .mlink{color:var(--lime)}
.ink .mlink:hover{border-bottom-color:var(--lime)}
.attrib{margin-top:30px;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.attrib a{color:var(--ink)}
.ink .attrib{color:var(--grey3)}

/* grids + cards */
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.pg .card{background:var(--white);padding:24px;min-height:0;box-shadow:none}
.pg .card:hover{box-shadow:none}
.ink .card{background:var(--card-dark)}
.pg .card h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.ink .card h3{color:var(--white)}
.pg .card p{font-size:14.5px;line-height:1.65;color:var(--grey)}
.ink .card p{color:var(--grey3)}

/* use-case board */
.ucg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.uc{background:var(--white);padding:22px 24px 26px;text-decoration:none;color:inherit;display:flex;flex-direction:column;border-left:5px solid var(--lime);transition:transform .15s ease}
.uc:hover{transform:translateX(3px)}
.uc b{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.uc h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:12px 0 10px}
.uc p{font-size:14px;line-height:1.65;color:var(--grey);flex:1}
.uc .mlink{margin-top:16px;color:var(--grey);font-size:9.5px}
.uc:hover .mlink{color:var(--ink)}

/* team */
.tm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px}
.tm{background:var(--white);padding:0 0 16px}
.tm .ph{aspect-ratio:1;overflow:hidden;background:var(--fog)}
.tm .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
.tm h3{font-size:14px;font-weight:600;letter-spacing:-.01em;margin:14px 14px 3px}
.tm .role{display:block;margin:0 14px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey2)}

/* dial (bailey) */
.ink 
/* closing band on subpages */
section.ink.final{text-align:center;padding:100px 0 120px}
section.ink.final .eyebrow{justify-content:center}
section.ink.final h2{font-size:clamp(30px,3.6vw,46px)}
section.ink.final .grey,section.ink.final .lede{margin-left:auto;margin-right:auto;text-align:center}
section.ink.final .cta-row{justify-content:center;margin-top:36px}

@media(max-width:1180px){.tm-grid{grid-template-columns:repeat(4,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.grid2,.grid3,.ucg{grid-template-columns:1fr}
  .grid2{gap:36px}
  .dialbox{margin-top:8px}.tm-grid{grid-template-columns:repeat(3,1fr)}
  .subhero{padding:72px 0 44px}.pg section{padding:64px 0}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}.tm-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- ported from V1: ownership dial + Bailey ledger ---- */
.bunit{margin-top:44px;background:var(--ink)}
.bhead{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--paper);border-bottom:2px solid var(--ink);padding:10px 16px;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.bpow{display:flex;align-items:center;gap:8px;color:var(--grey)}
.bpow i{width:9px;height:9px;border-radius:50%;background:var(--acid);border:1px solid var(--ink)}
html.js .bpow i{animation:telepulse 2.8s ease-in-out infinite}
.bbody{display:grid;grid-template-columns:1fr 210px}
.blog{padding:16px;font-family:var(--mono);font-size:11.5px;line-height:2.05;height:220px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.blog p{margin:0;display:flex;gap:14px;white-space:nowrap;max-width:100%}
html.js .blog p{animation:login .35s ease}
.blog .t{color:var(--grey)}
.blog .e{color:var(--white);min-width:138px}
.blog .d{color:var(--grey);flex:1;overflow:hidden;text-overflow:ellipsis}
.blog .ok{color:var(--acid)}
.blog .no{color:#FA8500;font-weight:700}
.bside{border-left:1px solid var(--ink-hair);padding:18px 16px;display:flex;flex-direction:column;gap:16px}
.bside em{display:block;font-style:normal;font-family:var(--mono);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:3px}
.bside b{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--white);letter-spacing:.05em}
.bcap{margin-top:14px;font-size:14.5px;color:var(--grey);max-width:62ch}
.dialbox{display:flex;flex-direction:column;align-items:center;gap:18px}
.dial{width:min(320px,66vw);aspect-ratio:1;border-radius:50%;background:var(--white);border:1px solid var(--grey2);position:relative}
.dial .tick{position:absolute;top:12px;left:50%;margin-left:-3px;width:6px;height:36px;background:var(--ink)}
.dial-row{display:flex;justify-content:space-between;width:min(320px,66vw);font-weight:500;font-size:28px}
.dial-lbl{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.dialwrap{position:relative;padding:22px}
.dtick{position:absolute;top:50%;left:50%;width:2px;height:9px;background:var(--grey2);transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*(min(160px,33vw) + 14px)));transition:background .2s}
.dtick.maj{height:17px;background:var(--ink);transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*(min(160px,33vw) + 18px)))}
.dtick.on{background:var(--acid);outline:1px solid var(--ink)}
.dial{cursor:grab;touch-action:none}
.dbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);background:var(--white);font-family:var(--sans);font-weight:500;font-size:24px;line-height:1;cursor:pointer}
.dbtn:hover{background:var(--acid)}
.dial-read{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--grey);text-align:center;max-width:min(320px,66vw)}
.dial-read b{color:var(--ink);background:var(--acid);padding:1px 7px}
.ink .dial{background:var(--white)}
.ink .dtick.maj{background:var(--white)}
.ink .dial-read{color:var(--grey2)}
.ink .dbtn{border-color:var(--grey2)}
.ink .dial-lbl{color:var(--grey2)}
@keyframes login{from{opacity:0;transform:translateY(7px)}}
@keyframes telepulse{0%,100%{opacity:1}50%{opacity:.3}}
.answer{padding:0}
.ansinner{padding:0 22px 22px}
.dialbox{margin-top:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.bunit{margin-top:54px}
.bcap{margin-top:16px;font-size:14.5px;color:var(--grey);max-width:62ch}
.ink .bcap{color:var(--grey3)}

.subhero.ink .dial-read{color:var(--grey3)}

/* ---- ported from V1: Scriptorium typewriter ---- */
.scriptbox{margin:44px 0 6px;background:var(--fog);border:1px solid var(--line);border-left:5px solid var(--acid);padding:18px 20px;font-family:var(--mono);font-size:13.5px}
.sline{display:flex;align-items:baseline;gap:10px;color:var(--ink);min-height:1.7em;margin:0;flex-wrap:wrap}
.sline b{color:var(--grey)}
.scaret{display:none;width:9px;height:1.1em;background:var(--ink);transform:translateY(2px)}
html.js .scaret{display:inline-block;animation:caret 1s steps(1) infinite}
.sresp{margin:10px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--grey);opacity:0;transition:opacity .25s ease}
.scriptbox.done .sresp{opacity:1}
.sresp .ok{font-style:normal;color:var(--ink);background:var(--acid);padding:0 6px;margin-left:8px}
@keyframes caret{50%{opacity:0}}

/* Bailey governance list — no box, just the text on the ground */
.grid3.bare{gap:34px 30px;margin-top:40px}
.grid3.bare .card{background:none;padding:0}
.grid3.bare .card h3{font-size:17px;margin-bottom:8px}
.ink .grid3.bare .card{background:none}


/* the ledger carries its own colours wherever the unit is placed */
.ink .bhead{color:var(--ink)}
.bside em{color:var(--grey2)}
.ink .bunit .bpow{color:var(--grey)}

/* Under the hood — the capability list as the right-hand column */
.monolist{font-family:var(--mono);font-weight:700;font-size:clamp(14px,1.35vw,17px);letter-spacing:.14em;
  line-height:2.3;color:var(--acid);list-style:none;margin:0;padding:0}
.monolist li{position:relative;padding-left:22px}
.monolist li::before{content:"";position:absolute;left:0;top:1.02em;width:11px;height:2px;background:var(--acid)}
html.js #hood .monolist li{opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s}
html.js #hood.inview .monolist li{opacity:1;transform:none}
html.js #hood.inview .monolist li:nth-child(2){transition-delay:.12s}
html.js #hood.inview .monolist li:nth-child(3){transition-delay:.24s}
html.js #hood.inview .monolist li:nth-child(4){transition-delay:.36s}
@media(prefers-reduced-motion:reduce){html.js #hood .monolist li{opacity:1!important;transform:none!important}}
@media(max-width:880px){.monolist{margin-top:26px}}

/* ---- recovered from V1: styles the port had dropped ---- */
.pill-callout{display:inline-flex;align-items:center;gap:14px;background:var(--acid);color:var(--ink);font-size:17px;padding:17px 30px;border-radius:999px}
.pill-callout b{font-weight:700}
.pill-callout::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
.seg{display:flex;border-radius:999px;overflow:hidden;background:var(--white);border:1px solid var(--hairline);font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin:46px 0 42px}
.seg span{flex:1;padding:21px 24px;border-right:1px solid var(--hairline);white-space:nowrap}
.seg span:last-child{border-right:none;background:var(--acid);display:flex;justify-content:space-between;align-items:center;gap:14px}
.seg .wdot{width:10px;height:10px;border-radius:50%;background:var(--white);flex-shrink:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:48px 0 44px}
.tile{padding:32px 30px;min-height:190px}
.tile .lbl{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:20px}
.tile .num{font-weight:700;font-size:66px;line-height:.95;letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
.tile.w{background:var(--white)}
.tile.g{background:var(--acid)}
.tile.k{background:var(--ink);color:var(--white)}
.tile.k .num{color:var(--acid)}
.tile.k .lbl{color:var(--grey2)}
.tile.g .lbl{color:var(--ink)}
.paper-list{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;list-style:none;margin:30px 0}
.paper-list li{padding:16px 0;border-top:1px solid var(--hairline);display:flex;gap:16px;align-items:baseline}
.paper-list li:last-child{border-bottom:1px solid var(--hairline)}
.paper-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acid);border:1px solid var(--ink);flex-shrink:0;align-self:center}
.paper-list span{font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--grey)}


/* ============================================================
   MOBILE PASS — everything below is inside media queries only,
   so the desktop rendering is untouched.
   ============================================================ */
@media(max-width:640px){
  .wrap,.navrow,.hero-grid,.hero-foot,.frow{padding-left:20px;padding-right:20px}

  /* nav */
  .navrow{gap:12px}
  .nav .pill{font-size:11px;padding:11px 18px;letter-spacing:.08em}
  .logo img{height:22px}

  /* headlines: let them wrap instead of holding authored line breaks */
  .hero h1 br,.subhero h1 br,.cta h2 br{display:none}
  .subhero h1{font-size:34px;line-height:1.06;max-width:none}
  .hero h1{font-size:40px}
  .hero .lede,.subhero .lede,.lede{font-size:16.5px}
  h2{font-size:27px;line-height:1.14}
  .cta h2{font-size:28px}

  /* hero trust strip: fixed height cannot hold two wrapped lines */
  .truststrip{height:auto}
  .hero-foot{padding-top:20px;padding-bottom:22px}
  .hero-foot span{font-size:9.5px;letter-spacing:.14em;line-height:1.7}
  .cta-row{gap:16px}
  .cta-row .pill{width:100%;justify-content:center}

  /* sections */
  .sec,.pg section{padding:52px 0}
  .cta{padding:56px 0 64px}
  #automations,#governance,#comparison,#proof,#faq{padding-top:52px;padding-bottom:52px}
  .subhero{padding:56px 0 36px}
  .chev::after{border-left-width:16px;border-right-width:16px;border-top-width:16px;margin-left:-16px;bottom:-16px}

  /* carousel: arrows below the card, out of the way of the content */
  .cwrap{margin-top:34px}
  .carrow{position:static;transform:none;margin:0;width:46px;height:46px}
  .cwrap{display:grid;grid-template-areas:"v v" "p n";justify-content:center;gap:18px 12px}
  .cviewport{grid-area:v}
  .carrow.prev{grid-area:p;justify-self:end}
  .carrow.next{grid-area:n;justify-self:start}
  .card{min-height:0;padding:18px 20px 22px}

  /* comparison tables stack into labelled blocks */
  .cmpwrap{overflow:visible;background:transparent}
  .cmp{min-width:0;width:100%}
  .cmp thead{display:none}
  .cmp tbody,.cmp tr,.cmp td{display:block;width:auto}
  .cmp tr{background:var(--white);margin-bottom:12px;padding:14px 16px}
  .ink .cmp tr{background:rgba(255,255,255,.06)}
  .cmp td{border:none;padding:5px 0;font-size:14px}
  .cmp td:first-child{font-size:16px;font-weight:700;padding-bottom:8px}
  .cmp td[data-l]::before{content:attr(data-l) " · ";font-family:var(--mono);font-weight:700;
    font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2)}
  .cmp td.win{background:rgba(171,255,0,.16);box-shadow:none;margin-top:8px;padding:10px 12px}
  .ink .cmp td.win{background:rgba(171,255,0,.14)}

  /* the four-word pill will not fit across — stack it */
  .seg{flex-direction:column;border-radius:20px;margin:32px 0 30px;font-size:11px}
  .seg span{border-right:none;border-bottom:1px solid var(--hairline);padding:15px 18px;flex:none}
  .seg span:last-child{border-bottom:none}

  /* Bailey ledger */
  .bbody{grid-template-columns:1fr}
  .blog{height:190px;padding:12px;font-size:9.5px;line-height:1.9}
  .blog .e{min-width:92px}
  .bside{border-left:none;border-top:1px solid var(--ink-hair);flex-direction:row;flex-wrap:wrap;gap:12px 18px;padding:14px 12px}
  .bside>div{min-width:42%}

  /* dial */
  .dialbox{margin-top:34px}
  .dial-read{max-width:min(300px,80vw)}

  /* Shadow AI callout wraps instead of running off */
  .pill-callout{display:flex;font-size:15px;padding:14px 20px;border-radius:20px;line-height:1.5}
  .pill-callout::after{display:none}

  /* case-page furniture */
  .tiles{grid-template-columns:1fr}
  .tile{min-height:0;padding:24px 22px}
  .tile .num{font-size:48px}
  .paper-list{font-size:11.5px}
  .paper-list li{gap:12px;padding:14px 0}
  .paper-list span{font-size:14px}

  /* scriptorium */
  .scriptbox{font-size:12px;padding:15px 16px}
  .monolist{font-size:13px;line-height:2.1}

  /* proof + footer */
  .stat{padding:22px 22px 24px}
  .quote{padding-left:18px}
  .logobar{gap:20px 14px;margin-top:44px}
  .frow{flex-direction:column;align-items:flex-start;gap:10px}
  .frow .fr{text-align:left}

  /* faq */
  summary{padding:16px 18px;font-size:15.5px}
  .ansinner{padding:0 18px 18px;font-size:14.5px}
}

@media(max-width:400px){
  .hero h1{font-size:34px}
  .subhero h1{font-size:29px}
  h2{font-size:24px}
  .cta h2{font-size:25px}
  .nav .pill{font-size:10px;padding:10px 14px}
  .tm-grid{gap:10px}
  .tm h3{font-size:13px;margin:11px 11px 3px}
  .tm .role{margin:0 11px;font-size:8.5px}
  .blog{font-size:9px}
  .blog .e{min-width:80px}
}

/* ---- mobile pass 2: overflow, tap targets, legibility ---- */
@media(max-width:640px){
  /* the client row must be allowed to wrap inside a narrow column */
  .logobar span{white-space:normal;font-size:11.5px}
  .logobar i{font-size:9px;letter-spacing:.1em}

  /* tap targets: nothing interactive below ~42px */
  .nav .pill{min-height:42px}
  .mlink,.tlink{display:inline-block;padding:7px 0}
  .uc .mlink,.cmore{padding:0}
  summary{min-height:48px}

  /* ledger: let each entry use two lines instead of truncating hard */
  .blog{font-size:10px;line-height:1.85}
  .blog p{white-space:normal;flex-wrap:wrap;gap:8px}
  .blog .e{min-width:0}
  .blog .d{flex:1 1 100%;overflow:visible;text-overflow:clip;order:3}
  .blog .ok,.blog .no{order:2}

  .hero-foot span{font-size:10px}
}
@media(max-width:400px){
  .logobar span{font-size:11px}
  .hero-foot span{font-size:9.5px}
}

/* ---- mobile menu: the link list becomes a drawer ---- */
@media(max-width:880px){
  .navtoggle{display:flex}
  .navrow{justify-content:flex-start;gap:12px}
  .nav .pill{margin-left:auto}
  .navlinks{display:flex;flex-direction:column;gap:0;margin:0;position:absolute;top:100%;left:0;right:0;
    background:var(--white);border-top:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.10);
    max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.2,.7,.2,1)}
  .nav.open .navlinks{max-height:320px}
  .navlinks a{padding:17px 20px;border-bottom:1px solid var(--line);font-size:12.5px;opacity:1}
  .navlinks a:last-child{border-bottom:none}
}

/* ---- the dial keeps its place beside the text, just smaller ---- */
@media(min-width:780px) and (max-width:879px){
  .grid2.dialgrid{grid-template-columns:1.05fr .95fr}
  .dial,.dial-row{width:268px}
  .dial .tick{height:30px}
  .dtick{transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*(134px + 12px)))}
  .dtick.maj{transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*(134px + 16px)))}
  .dial-read{max-width:268px}
  .grid2.dialgrid{gap:40px}
}
@media(min-width:700px) and (max-width:779px){
  .grid2.dialgrid{grid-template-columns:1.05fr .95fr}
  .dial,.dial-row{width:232px}
  .dial .tick{height:26px}
  .dtick{transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*(116px + 11px)))}
  .dtick.maj{transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*(116px + 15px)))}
  .dial-read{max-width:232px}
  .grid2.dialgrid{gap:32px}
  .dialwrap{padding:18px}
  .dbtn{width:42px;height:42px;font-size:21px}
}
/* below this the dial would have to sit under the text it belongs beside —
   it goes instead, and the copy takes the full column */
@media(max-width:699px){
  .grid2.dialgrid{grid-template-columns:1fr;gap:0}
  .dialbox{display:none}
}