/* CCNA Prep: the app's own palette (ios/CCNAPrep/Resources/Assets.xcassets).
   Warm paper and cobalt: cobalt = v2.0 and "do this", signal amber = v1.1 and "attention", one colour
   per domain, green only means correct. CLI exhibits are a dark terminal in both schemes.
   Type: Barlow (UI) + JetBrains Mono (CLI, numbers, labels), Google Fonts. */
:root{
  --paper:#F5F3EE;--card:#FFFFFF;--sunken:#ECE9E2;--rule:#DDD8CC;--rule-2:#C9C2B3;
  --ink:#14171C;--muted:#5E6470;
  --cobalt:#2456D3;--cobalt-deep:#1C46B0;--on-cobalt:#FFFFFF;
  --amber:#F2B34A;--amber-ink:#8F4E08;
  --ok:#15803D;--bad:#DC2626;
  --term:#10141B;--term-2:#171C25;--term-rule:#262D39;--term-text:#D7DEE8;--term-muted:#8A94A3;
  --term-kw:#7FB0FF;--term-lit:#F2B35E;--term-ok:#4ADE80;
  --d1:#2456D3;--d2:#0F8A6B;--d3:#8A4FD8;--d4:#C2410C;--d5:#0E7490;
  --r:18px;--r-s:12px;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1116;--card:#171B22;--sunken:#1F242D;--rule:#2A303B;--rule-2:#3A4250;
    --ink:#EEF0F3;--muted:#9AA1AD;
    --cobalt:#7196FF;--cobalt-deep:#7196FF;--on-cobalt:#0E1116;
    --amber-ink:#F0A44E;
    --ok:#4ADE80;--bad:#F87171;
    --term:#0A0D12;--term-2:#12161D;--term-rule:#232A35;
    --d1:#7196FF;--d2:#3CC7A0;--d3:#B48BFF;--d4:#FB8A5A;--d5:#4CC3DD;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--cobalt-deep);text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.v20{color:var(--cobalt-deep)}.v11{color:var(--amber-ink)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}

/* LED: the one ornament. A link light before every section label. */
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cobalt);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cobalt) 18%,transparent)}
.led.amber{background:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 25%,transparent)}
.led.ok{background:var(--term-ok);box-shadow:0 0 0 3px rgba(74,222,128,.18)}

/* header */
.bar{position:sticky;top:0;z-index:20;background:var(--paper);background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;white-space:nowrap;letter-spacing:-.005em}
.brand svg{flex:none;width:30px;height:30px}
.bar nav{display:flex;align-items:center;gap:20px;min-width:0}
.bar nav a{color:var(--muted);font-weight:500;font-size:16px;text-decoration:none;white-space:nowrap}
.bar nav a:hover{color:var(--ink)}
.bar .pill{font:500 12.5px/1 var(--mono);color:var(--ink);border:1px solid var(--rule-2);border-radius:999px;padding:7px 11px;display:inline-flex;align-items:center;gap:8px}
@media (max-width:899px){.bar nav .opt,.bar .pill{display:none}}

/* buttons */
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;
  font:600 17px/1.2 var(--sans);text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--cobalt);color:var(--on-cobalt)}
.btn-primary:hover{background:var(--cobalt-deep)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-soon{background:var(--card);color:var(--ink);border:1.5px dashed var(--rule-2);cursor:default}
.btn svg{flex:none}

/* hero */
.hero{position:relative;padding:44px 0 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 11%,transparent) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.hero .wrap{position:relative}
.hero-grid{display:grid;gap:36px;align-items:center}
.hero-grid>*{min-width:0}
@media (min-width:960px){.hero{padding:76px 0 84px}.hero-grid{grid-template-columns:1.12fr .88fr;gap:56px}}
.kicker{display:flex;align-items:flex-start;gap:10px;font:500 13px/1.5 var(--mono);color:var(--muted);margin:0 0 18px}
.kicker .led{margin-top:6px}
h1{font-size:clamp(38px,8.6vw,60px);line-height:1.04;letter-spacing:-.02em;font-weight:700;margin:0 0 20px}
h1 .hl{color:var(--cobalt-deep);white-space:nowrap}
h1,h2{text-wrap:balance}
.lede{font-size:clamp(18px,2.3vw,20px);color:var(--muted);margin:0 0 28px;max-width:33em}
.hero-note{margin:16px 0 0;font:500 13.5px/1.6 var(--mono);color:var(--muted)}

/* terminal (status panel + exhibit) */
.term{background:var(--term);color:var(--term-text);border-radius:var(--r);overflow:hidden;min-width:0;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 26px 60px -30px rgba(16,20,27,.6)}
@media (prefers-color-scheme:dark){.term{border:1px solid var(--rule);box-shadow:none}}
.term-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--term-rule);
  font:500 12px/1.4 var(--mono);color:var(--term-muted)}
.term-head span{display:inline-flex;align-items:center;gap:8px;min-width:0}
.term-head .swipe{color:var(--term-lit)}
@media (min-width:720px){.term-head .swipe{display:none}}
.term-body{padding:16px}
.term .prompt{margin:0 0 10px;font:500 13px/1.5 var(--mono);color:var(--term-text)}
.term .prompt b{color:var(--term-kw);font-weight:500}
.term table{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums}
.term th{text-align:left;font-weight:500;color:var(--term-muted);padding:4px 10px 6px 0;border-bottom:1px dashed var(--term-rule)}
.term td{padding:6px 10px 6px 0;vertical-align:top}
.term td:last-child,.term th:last-child{padding-right:0}
.term .st{display:inline-flex;align-items:center;gap:7px}
.term .st-on{color:var(--term-ok)}.term .st-next{color:var(--term-lit)}.term .st-off{color:var(--term-muted)}
.term .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--term-rule);font:400 13px/1.5 var(--mono)}
.term .kv dt{color:var(--term-muted)}
.term .kv dd{margin:0}
.term .kv .k{color:var(--term-kw)}.term .kv .l{color:var(--term-lit)}
.term .cd{color:var(--term-lit)}

/* sections */
section{padding:60px 0}
@media (min-width:960px){section{padding:92px 0}}
.alt{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.label{display:flex;align-items:center;gap:10px;font:500 13px/1.4 var(--mono);color:var(--muted);letter-spacing:.01em;margin:0 0 14px}
h2{font-size:clamp(30px,5vw,46px);line-height:1.06;letter-spacing:-.018em;font-weight:700;margin:0 0 14px}
h3{letter-spacing:-.005em}
.sub{color:var(--muted);font-size:18.5px;margin:0 0 36px;max-width:38em}
.head-row{display:grid;gap:0 48px;margin:0 0 36px}
.head-row h2{margin:0 0 12px}.head-row .sub{margin:0}
@media (min-width:960px){.head-row{grid-template-columns:1fr 1fr;align-items:end;margin-bottom:40px}.head-row h2{margin:0}}

/* changes: weights, new topics, verbs */
.wgrid{display:grid;gap:16px}
.wgrid>*{min-width:0}
@media (min-width:880px){.wgrid{grid-template-columns:1.2fr 1fr;gap:20px}}
.wcol{border:1px solid var(--rule);border-radius:var(--r);padding:20px;background:var(--paper)}
.wcol h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:18px;margin:0 0 4px}
.wcol .note{margin:0 0 14px;font-size:15px;color:var(--muted)}
.vtag{font:600 12px/1 var(--mono);border-radius:6px;padding:5px 7px;white-space:nowrap}
.vtag.v20{background:color-mix(in srgb,var(--cobalt) 14%,transparent)}
.vtag.v11{background:color-mix(in srgb,var(--amber) 26%,transparent)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.bars li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline}
.bars .n{font:600 12.5px/1 var(--mono);color:var(--muted);min-width:1.4em}
.bars .nm{font-weight:500;font-size:16px;line-height:1.3}
.bars .pc{font:600 15px/1 var(--mono)}
.bars .tr{grid-column:1/-1;height:10px;border-radius:5px;background:var(--sunken);overflow:hidden}
.bars .tr i{display:block;height:100%;border-radius:5px}
.wcol.old .bars .tr i{background:var(--amber)}
.wcol.old .bars .nm{color:var(--muted)}
.newgrid{display:grid;gap:12px;margin:36px 0 0}
@media (min-width:640px){.newgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.newgrid{grid-template-columns:repeat(3,1fr)}}
.topic{border:1px solid var(--rule);border-radius:var(--r-s);padding:16px 16px 15px;background:var(--paper);position:relative}
.topic .tn{font:600 12.5px/1 var(--mono);color:var(--cobalt-deep);background:color-mix(in srgb,var(--cobalt) 11%,transparent);border-radius:6px;padding:5px 7px;display:inline-block;margin:0 0 10px}
.topic h3{font-size:18px;line-height:1.25;margin:0 0 4px}
.topic p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.verbs{margin:14px 0 0;border:1px solid var(--rule);border-radius:var(--r-s);padding:16px;background:var(--paper)}
.verbs p{margin:0 0 12px;font-size:16px}
.verbs p b{font-family:var(--mono);font-weight:600}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;background:var(--sunken)}
.stack i{display:block;height:100%}
.vkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none;font:500 13px/1.4 var(--mono);color:var(--muted)}
.vkey li{display:inline-flex;align-items:center;gap:7px}
.vkey s{display:inline-block;width:10px;height:10px;border-radius:3px;text-decoration:none}
.more{margin:22px 0 0;font-weight:600}

/* exhibit */
.xgrid{display:grid;gap:32px;align-items:start}
.xgrid>*{min-width:0}
@media (min-width:960px){.xgrid{grid-template-columns:.68fr 1.32fr;gap:48px;align-items:center}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li svg{flex:none;margin-top:4px;color:var(--cobalt-deep)}
.checks code{font:500 14.5px/1.4 var(--mono);background:var(--sunken);border-radius:5px;padding:1px 5px;white-space:nowrap}
.cli{margin:0;padding:14px 16px;background:var(--term-2);border-bottom:1px solid var(--term-rule);
  font:400 12.5px/1.65 var(--mono);white-space:pre;overflow-x:auto;color:var(--term-text);tab-size:8}
@media (min-width:720px){.cli{font-size:13px}}
.cli .p{color:var(--term-kw)}.cli .h{color:var(--term-lit)}.cli .m{color:var(--term-muted)}
.qbox{padding:16px}
.qbox .qtags{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;margin:0 0 10px;font:500 12px/1.4 var(--mono);color:var(--term-muted)}
.qbox .obj{color:var(--term-kw);background:rgba(127,176,255,.12);padding:3px 8px;border-radius:6px}
.qbox .stem{margin:0 0 12px;font-size:16.5px;line-height:1.45}
.opts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.opts li{display:flex;gap:10px;align-items:baseline;border:1px solid var(--term-rule);border-radius:10px;padding:8px 12px;font:400 14px/1.4 var(--mono);color:var(--term-text)}
.opts li b{color:var(--term-muted);font-weight:500}
details.reveal{border-top:1px dashed var(--term-rule);padding-top:12px}
details.reveal summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--sans);
  color:var(--term-kw);min-height:44px;padding:0 4px 0 0}
details.reveal summary::-webkit-details-marker{display:none}
details.reveal summary::before{content:"\25B8";font-family:var(--mono);transition:transform .15s}
details.reveal[open] summary::before{transform:rotate(90deg)}
.reveal .ans{margin:4px 0 8px;display:flex;gap:8px;align-items:flex-start;color:var(--term-ok);font:600 14.5px/1.45 var(--mono)}
.reveal .ans svg{flex:none;margin-top:2px}
.reveal p.why{margin:0;color:var(--term-muted);font-size:15px;line-height:1.55}
.reveal p.why b{color:var(--term-text);font-weight:600}

/* subnet sprint */
.sprint{background:linear-gradient(180deg,color-mix(in srgb,var(--cobalt) 9%,var(--paper)) 0%,var(--paper) 100%);border-top:1px solid var(--rule)}
.sgrid{display:grid;gap:32px;align-items:center}
.sgrid>*{min-width:0}
@media (min-width:960px){.sgrid{grid-template-columns:1fr 1fr;gap:56px}}
.free{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--mono);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-radius:999px;padding:7px 11px;margin:0 0 16px}
.scard{background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:20px;box-shadow:0 22px 50px -34px rgba(20,23,28,.45);max-width:520px;width:100%;justify-self:center}
@media (prefers-color-scheme:dark){.scard{box-shadow:none}}
.scard .top{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}
.scard .chip{font:600 12.5px/1 var(--mono);color:var(--cobalt-deep);background:color-mix(in srgb,var(--cobalt) 12%,transparent);border-radius:999px;padding:6px 10px}
.scard .count{font:500 13px/1 var(--mono);color:var(--muted)}
.scard .ip{font:600 clamp(24px,7vw,32px)/1.15 var(--mono);letter-spacing:-.02em;margin:0 0 8px;white-space:nowrap}
.scard .ip span{color:var(--cobalt-deep)}
.scard .ask{font-weight:600;font-size:18px;margin:0 0 12px}
.scard .field{background:var(--sunken);border-radius:12px;padding:14px 16px;font:400 18px/1.2 var(--mono);color:var(--muted);margin:0 0 12px}
details.check summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:12px;
  background:var(--cobalt);color:var(--on-cobalt);font:600 17px/1.2 var(--sans)}
details.check summary::-webkit-details-marker{display:none}
details.check[open] summary{background:transparent;color:var(--muted);border:1.5px solid var(--rule);min-height:44px;font-size:15px}
details.check[open] summary .closed,details.check:not([open]) summary .opened{display:none}
.verdict{margin:14px 0 0}
.verdict .ans{display:flex;align-items:center;gap:8px;font:600 17px/1.3 var(--mono);color:var(--ok);margin:0 0 10px}
.working{margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--cobalt);background:var(--paper);border-radius:0 10px 10px 0}
.working p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.5}
.working p+p{margin-top:4px}
.working .mono{color:var(--ink)}
.six{width:100%;border-collapse:collapse;font-size:15px}
.six th,.six td{padding:7px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400}
.six th{color:var(--muted)}
.six td{font-family:var(--mono);text-align:right;white-space:nowrap}
.six tr:last-child th,.six tr:last-child td{border-bottom:0}

/* question types */
.legend{list-style:none;margin:0 0 28px;padding:16px;display:grid;gap:10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper)}
@media (min-width:760px){.legend{grid-template-columns:repeat(5,1fr);padding:18px 20px;gap:16px}}
.legend li{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;align-items:baseline}
.legend .c{grid-row:span 2;font:600 13px/1 var(--mono);display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--sunken);color:var(--ink)}
.legend .c.dd{background:color-mix(in srgb,var(--amber) 30%,transparent)}
.legend b{font-size:16px;line-height:1.25}
.legend span{font-size:14.5px;color:var(--muted);line-height:1.35}
.samples{display:grid;gap:14px}
.samples>*{min-width:0}
@media (min-width:880px){.samples{grid-template-columns:repeat(3,1fr)}}
.sample{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.alt .sample{background:var(--paper)}
.sample .kind{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 6px}
.sample h3{font-size:19px;margin:0}
.sample .s-obj{font:500 12px/1.4 var(--mono);color:var(--muted);margin:0 0 10px}
.sample .s-q{margin:0 0 14px;font-size:16px;line-height:1.45}
.solved{font:600 11.5px/1 var(--mono);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-radius:6px;padding:5px 7px;white-space:nowrap}
.seq{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:s}
.seq li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;background:var(--sunken);border-radius:10px;padding:8px 10px;font-size:15px;line-height:1.35}
.seq li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font:600 12px/1 var(--mono);background:var(--cobalt);color:var(--on-cobalt)}
.pairs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pairs li{display:grid;grid-template-columns:1fr;gap:3px;background:var(--sunken);border-radius:10px;padding:8px 10px;font-size:14.5px;line-height:1.35}
.pairs li b{font-weight:600}
.pairs li span{color:var(--muted)}
.pairs li span::before{content:"\2192\00a0";font-family:var(--mono);color:var(--cobalt-deep)}
.cats{display:grid;gap:8px}
.cats div{background:var(--sunken);border-radius:10px;padding:9px 10px}
.cats b{display:block;font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px}
.cats span{display:inline-block;background:var(--card);border:1px solid var(--rule);border-radius:7px;padding:3px 8px;margin:0 4px 4px 0;font-size:14px;line-height:1.35}
.alt .cats span{background:var(--paper)}
.credit{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--rule);font:500 13px/1.5 var(--mono);color:var(--muted);margin-top:auto}
.sample .credit{margin-top:16px}
.promise{display:flex;gap:14px;align-items:flex-start;margin:28px 0 0;padding:18px 20px;border-radius:var(--r);border:1px solid var(--rule);background:var(--paper)}
.alt .promise{background:var(--paper)}
.promise svg{flex:none;color:var(--cobalt-deep);margin-top:2px}
.promise p{margin:0;color:var(--muted)}
.promise b{color:var(--ink)}

/* mock */
.mockp{border:1px solid var(--rule);border-radius:24px;background:var(--card);padding:20px;display:grid;gap:22px}
@media (min-width:720px){.mockp{padding:28px}}
.mock-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font:500 13px/1.4 var(--mono);color:var(--muted)}
.score{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px}
.score b{font:600 clamp(52px,12vw,76px)/1 var(--mono);letter-spacing:-.04em}
.score span{color:var(--muted);font-size:16px}
.score .above{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--mono);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-radius:7px;padding:6px 8px}
.ruler{position:relative;height:14px;border-radius:7px;background:var(--sunken);margin:6px 0 0}
.ruler i{position:absolute;inset:0 auto 0 0;border-radius:7px;background:var(--cobalt)}
.ruler u{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--ink);opacity:.7}
.ruler-l{position:relative;height:36px;font:500 12.5px/1.35 var(--mono);color:var(--muted);margin-top:6px}
.ruler-l span{position:absolute;top:0}
.ruler-l .lo{left:0}.ruler-l .hi{right:0}
.ruler-l .pm{transform:translateX(-50%);text-align:center;color:var(--ink)}
.mdoms{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--rule);display:grid;gap:12px}
@media (min-width:880px){.mdoms{grid-template-columns:repeat(5,1fr);gap:18px}}
.mdoms li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:baseline;font-size:15px;line-height:1.3}
.mdoms .v{font:600 14px/1 var(--mono)}
.mdoms .tr{grid-column:1/-1;height:8px;border-radius:4px;background:var(--sunken);overflow:hidden}
.mdoms .tr i{display:block;height:100%;border-radius:4px}
.mdoms li.weak .v{color:var(--amber-ink)}
.weaknote{margin:0;font-size:15px;color:var(--muted)}
.facts{display:grid;gap:12px;margin:24px 0 0}
@media (min-width:720px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:16px 0 0;border-top:2px solid var(--ink)}
.fact b{display:block;font:600 22px/1.2 var(--mono);letter-spacing:-.01em;margin:0 0 4px}
.fact span{color:var(--muted);font-size:15.5px}

/* toolkit */
.kit{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
@media (min-width:880px){.kit{grid-template-columns:1fr 1fr;column-gap:48px}}
.kit li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.kit .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--cobalt-deep);background:color-mix(in srgb,var(--cobalt) 11%,transparent)}
.kit .ic.amber{color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 22%,transparent)}
.kit h3{font-size:18.5px;line-height:1.3;margin:0 0 4px}
.kit p{margin:0;color:var(--muted);font-size:16px}
.meter{margin:10px 0 0;max-width:340px}
.meter .tr{position:relative;height:9px;border-radius:5px;background:var(--sunken)}
.meter .tr i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--amber)}
.meter .tr u{position:absolute;top:-4px;bottom:-4px;left:60%;width:2px;border-radius:2px;background:var(--ink);opacity:.6}
.meter p{margin:6px 0 0;font:500 12.5px/1.5 var(--mono);color:var(--muted)}

/* price */
.pricep{display:grid;border:1px solid var(--rule);border-radius:24px;overflow:hidden;background:var(--paper)}
@media (min-width:880px){.pricep{grid-template-columns:1fr 1fr}}
.tier{padding:24px}
@media (min-width:720px){.tier{padding:30px}}
.tier.pass{background:var(--term);color:var(--term-text)}
.tier .t{font:600 13px/1.4 var(--mono);color:var(--muted);margin:0;letter-spacing:.02em}
.tier.pass .t{color:var(--term-kw)}
.tier h3{font-size:26px;margin:6px 0 4px;letter-spacing:-.01em}
.tier .amount{font:700 52px/1.05 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:6px 0 4px}
.tier .s{margin:0 0 18px;color:var(--muted);font-size:15.5px}
.tier.pass .s{color:var(--term-muted)}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tier li{display:flex;gap:10px;align-items:flex-start}
.tier li svg{flex:none;margin-top:4px;color:var(--cobalt-deep)}
.tier.pass li svg{color:var(--term-ok)}
.vows{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:720px){.vows{grid-template-columns:repeat(3,1fr)}}
.vows li{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-s);background:var(--card);font-size:16px}
.vows svg{flex:none;margin-top:3px;color:var(--ok)}

/* faq */
.faq-grid{display:grid;gap:8px 48px}
@media (min-width:960px){.faq-grid{grid-template-columns:.7fr 1.3fr}}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:18px;line-height:1.35;padding:18px 34px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:15px;font:400 24px/1.2 var(--mono);color:var(--cobalt-deep)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px;color:var(--muted)}

/* download */
.dl{background:var(--term);color:var(--term-text)}
@media (prefers-color-scheme:dark){.dl{border-top:1px solid var(--rule)}}
.dl-grid{display:grid;gap:28px;align-items:center}
@media (min-width:880px){.dl-grid{grid-template-columns:1fr auto;gap:56px}}
.dl h2{color:#fff}
.dl .sub{color:var(--term-muted)}
.dl .label{color:var(--term-muted)}
.dl .btn-soon{background:transparent;color:var(--term-text);border-color:var(--term-rule)}
.dl .btn-line{color:var(--term-text);border-color:var(--term-rule)}
.dl .btn-line:hover{border-color:var(--term-text)}
.dl .mark{width:132px;height:132px;display:block}
@media (max-width:879px){.dl .mark{width:76px;height:76px;order:-1}}
.dl .sub{margin-bottom:28px}

/* article (guide, legal) */
.doc{padding:38px 0 72px}
.doc .wrap{max-width:780px}
.crumbs{font-size:15px;color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted)}
.doc h1{font-size:clamp(32px,6.4vw,48px);line-height:1.08}
.doc h2{font-size:clamp(24px,4.2vw,30px);line-height:1.15;margin:46px 0 12px}
.doc h3{font-size:20px;margin:28px 0 8px}
.doc .meta{color:var(--muted);font:500 13.5px/1.5 var(--mono);margin:-4px 0 28px}
.doc ul,.doc ol{padding-left:1.25em}
.doc li{margin:6px 0}
.doc .small{font-size:15px;color:var(--muted)}
.tbl{overflow-x:auto;margin:16px 0 8px;border:1px solid var(--rule);border-radius:16px;background:var(--card)}
.tbl table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--rule);font-size:16px;vertical-align:top}
@media (min-width:720px){.tbl th,.tbl td{padding:12px 16px}}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font-size:14px;color:var(--muted);font-weight:600;background:var(--sunken)}
.tbl td.n{font-family:var(--mono);white-space:nowrap;text-align:right}
.tbl th.n{text-align:right}
.box{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--cobalt);border-radius:12px;padding:16px 18px;margin:22px 0}
.box p{margin:0}
.box p+p{margin-top:6px}
.cta{margin:48px 0 0;background:var(--term);color:var(--term-text);border-radius:22px;padding:26px}
@media (prefers-color-scheme:dark){.cta{border:1px solid var(--rule)}}
.cta h2{margin:0 0 8px;color:#fff;font-size:26px}
.cta p{color:var(--term-muted);margin:0 0 18px}
.cta .btn-soon{background:transparent;color:var(--term-text);border-color:var(--term-rule)}
.cta .btn-line{color:var(--term-text);border-color:var(--term-rule)}
.doc .faq{margin-top:8px}

/* footer */
footer{border-top:1px solid var(--rule);padding:32px 0 44px;font-size:15px;color:var(--muted)}
footer .wrap{display:grid;gap:12px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer .tm{max-width:56em;margin:0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}details.reveal summary::before{transition:none}}