/* SEQ1 SESSIONS onboarding page (v5). Layout and the install tool only: every colour, size, radius and easing is a boldthin.gs token. */
.wm .bmk{width:auto;height:27px}
.wm{color:var(--fg)}
.tgl{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:var(--hit);min-height:var(--hit);color:rgba(var(--fg-rgb),.78)}
.tgl:hover{color:var(--fg)}
.tgl:focus-visible{outline:1px solid var(--fg);outline-offset:-4px;border-radius:6px}
.sbar-own .live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);margin-right:6px;vertical-align:1px}
.wmk{white-space:nowrap}
.wmk b{font-style:italic;font-weight:600;letter-spacing:0}
.wmk i{font-style:normal;font-weight:500;font-size:.53em;letter-spacing:.28em;color:var(--grey);margin-left:.34em;vertical-align:.08em}
.pg{opacity:0;animation:pgin .7s cubic-bezier(.25,.1,.25,1) .05s forwards}
@keyframes pgin{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.pg{animation:none;opacity:1}}

/* ── one screen: the way in on the left, the product at work on the right ── */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,3vw,56px);align-items:start;min-height:100svh;padding:calc(var(--top) + clamp(18px,3.4svh,40px)) var(--padx) clamp(32px,5svh,56px)}
.hcopy{min-width:0}
.hl{font-size:clamp(32px,3.9vw,58px);line-height:.96;margin:0 0 clamp(14px,2.4svh,22px)}
.hl .ln+.ln{padding-right:.1em}
.js .hero:not(.booted) .hl .mi{transform:translateY(118%)}
.lede{color:rgba(var(--fg-rgb),.78);font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.55;max-width:40em;text-wrap:pretty;margin-bottom:clamp(14px,2.4svh,22px)}
.hfig{min-width:0;padding-top:clamp(0px,9svh,96px)}

/* ── the install tool ── */
.tool{max-width:600px}
.step-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--grey);margin:0 0 8px;display:flex;gap:10px;align-items:center}
.step-k b{font-weight:400;color:var(--fg)}
.seg{display:inline-flex;max-width:100%;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px;background:rgba(var(--bg-rgb),.5)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 clamp(12px,1.6vw,20px);border-radius:999px;font-size:.9375rem;font-weight:500;color:rgba(var(--fg-rgb),.78);white-space:nowrap;transition:background .2s,color .2s}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.seg button:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.detect{font-family:var(--mono);font-size:.6875rem;color:var(--grey);margin:8px 2px 0}
.detect:empty{display:none}
.panel{margin-top:clamp(12px,2svh,18px)}
.panel[hidden]{display:none}
.routes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rt{display:grid;grid-template-columns:196px minmax(0,1fr);column-gap:18px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);min-height:0}
.bd .btn{white-space:nowrap}
.step-k.sk2{margin-top:clamp(14px,2.4svh,20px)}
.note.first{margin:0 0 6px}
.soonl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 18px}
.sn{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.sn .b{grid-row:1/3;display:inline-flex;line-height:0;opacity:.38}
.sn .b img{display:block;height:34px;width:auto}.sn .b img.pad{height:51px;margin:-8.5px -8px}
.sn p{margin:0;font-size:.75rem;line-height:1.35;color:var(--grey);grid-column:2}
.bd{display:flex;align-items:center;justify-content:flex-start}
.bd a,.bd span.b{display:inline-flex;align-items:center;text-decoration:none;color:inherit;border-radius:8px;line-height:0}
.bd img{display:block;height:40px;width:auto}
.bd img.pad{height:60px;margin:-10px -9px}
.bd a:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.bd a:hover img{opacity:.88}
.rt.off .bd img{opacity:.38}
.rt .meta{min-width:0}
.rt .meta p{margin:0;font-size:.8125rem;line-height:1.45;color:var(--grey);text-wrap:pretty}
.rt .meta p b{color:rgba(var(--fg-rgb),.9);font-weight:500}
.sum{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:5px;font-family:var(--mono);font-size:.6875rem;color:var(--grey)}
.sum code{font-family:var(--mono);color:rgba(var(--fg-rgb),.8);overflow-wrap:anywhere}
.cp{all:unset;cursor:pointer;box-sizing:border-box;font-family:var(--mono);font-size:.6875rem;color:var(--fg);border:1px solid var(--line2);border-radius:999px;padding:3px 10px;min-height:24px;display:inline-flex;align-items:center}
.cp:hover{border-color:var(--fg)}
.cp:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.btn.sm2{min-height:44px;padding:0 18px;font-size:.9375rem}
.note{margin:14px 0 0;font-size:.8125rem;color:var(--grey);line-height:1.5;max-width:40em}
.note a{color:rgba(var(--fg-rgb),.9);text-underline-offset:3px;text-decoration-color:var(--line2)}
.note a:hover{text-decoration-color:var(--fg)}
.signline{margin-top:clamp(12px,2svh,18px);padding-top:12px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--grey);line-height:1.5;max-width:40em}
.signline b{font-weight:500;color:rgba(var(--fg-rgb),.9)}
.signline a{color:rgba(var(--fg-rgb),.9);text-underline-offset:3px;text-decoration-color:var(--line2)}
.signline a:hover{text-decoration-color:var(--fg)}

/* ── how you sign in: one small section ── */
.blk{position:relative;border-top:1px solid var(--line);padding:clamp(56px,10svh,104px) var(--padx)}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,88px);row-gap:28px;align-items:center}
.sh2{font-weight:500;font-size:clamp(30px,4vw,60px);line-height:.98;letter-spacing:-.05em;margin:0 0 20px;text-wrap:balance}
.sh2 em{font-style:italic;font-weight:600;color:var(--sig);padding-right:.08em}
.steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.5;color:rgba(var(--fg-rgb),.85)}
.steps li span.ix{font-family:var(--mono);font-size:.75rem;color:var(--grey);padding-top:3px}
.steps li small{display:block;color:var(--grey);font-size:.8125rem;margin-top:2px}
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.ft .big path{stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease)}
.ft.in .big path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.ft .big path{stroke-dashoffset:0}}
.fm{grid-template-columns:1fr auto auto}
.mock{position:fixed;right:var(--padx);bottom:14px;z-index:40;font-family:var(--mono);font-size:.6875rem;color:var(--grey);background:rgba(var(--bg-rgb),.86);border:1px solid var(--line);border-radius:999px;padding:6px 12px;pointer-events:none}
body:has(.ft.in) .mock{opacity:0;transition:opacity .4s}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0;row-gap:28px}
  .tool{max-width:none}
  .two{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nl.sec,.nl.login{display:none}
  .rt{grid-template-columns:1fr;row-gap:8px}
  .soonl{grid-template-columns:1fr}
  .bd img{height:40px}
  .seg{display:flex;width:100%}.seg button{flex:1 1 0;padding:0 6px;font-size:.875rem}
  .fm{grid-template-columns:1fr auto}
  .mock{display:none}
  .ft .big path{stroke-width:2.2}
}

.rt .meta p.warn{margin-top:6px;font-size:.75rem}
/* the figures sit on a calm ground, as they do on boldthin.gs where the field has already receded */