/* CashPlan-only pieces on top of deck.css. Sizes in cqw so a slide scales as one picture. */

svg.sym, svg.lock, svg.kow { display: block; overflow: visible; }
.rg { fill: var(--ring, currentColor); }
.lf { fill: var(--leaf, var(--green)); }
.kw { fill: var(--word, currentColor); }
:root[data-theme="dark"] .pn:not(.white):not(.neon):not(.green) { --ring: var(--paper-w); }

.pn.green { background: var(--green); color: var(--ink); }
.pn.green .lab { color: #0c1a14b3; }
.pn.tint { background: var(--green-tint); color: var(--ink); }
.pn.tint .lab { color: #0c1a14b3; }
.pn.ink { --ring: var(--paper-w); }

/* Cover: green field, ink lockup, white leaf (the one place the leaf turns white) */
.cover { grid-template-columns: 1fr; padding: 0 7cqw; }
.cover .lock { width: 46cqw; --ring: var(--ink); --leaf: #fff; --word: var(--ink); }
.cover .meta { margin-top: 0; position: absolute; left: 7cqw; top: 6cqw; font-size: 1cqw; }
.cover .tag { position: absolute; right: 7cqw; top: 6cqw; font-size: 1cqw; font-weight: 600; text-align: right; line-height: 1.4; }

/* Statement mark */
.statement .sym { width: 3cqw; --ring: var(--paper-w); --leaf: var(--green); }
.statement .kick { color: var(--green); }

/* Opener: one giant symbol bleeding off the corner */
.opener .shape.sym { width: 58cqw; right: -6cqw; top: -10cqw; --ring: var(--mark); --leaf: var(--green); }
.opener .mini.sym { width: 3.2cqw; --ring: var(--fg); }

/* Rail logo (deck.js injects the symbol) */
.rail .sym { width: 2.6cqw; --ring: var(--paper-w); --leaf: var(--green); }
.bar .home .sym { width: 18px; --ring: var(--fg); }

/* Meaning callouts on the symbol slide */
.anat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqw; align-items: center; width: 88%; }
.anat > svg { width: 100%; }
.anat .mk3 circle { fill: var(--red); }
.anat .mk3 text { fill: #fff; font-size: 4.6px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.anat .calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.anat .calls li { font-size: 0.9cqw; line-height: 1.55; color: var(--sub); border-top: 1px solid var(--hair); padding-top: 0.8cqw; }
.anat .calls b { display: block; font-size: 1.15cqw; color: #0c1a14; margin-bottom: 0.2cqw; }

/* Construction drawing */
.cons { width: 86%; height: auto; }
.cons .g { fill: none; stroke: var(--red); stroke-width: 0.45; vector-effect: non-scaling-stroke; }
.cons .g.d { stroke-dasharray: 3 3; }
.cons .lb { fill: var(--red); font-size: 3.2px; font-family: inherit; }
.cons .rf { fill: var(--fg); }
.cons .lff { fill: var(--green); }
.cons .dot { fill: var(--red); }

/* Direction candidates */
.cand { display: grid; grid-template-rows: 1fr auto; place-items: stretch; padding: 2.6cqw 1.4cqw 1.2cqw; gap: 1cqw; }
.cand .art { display: grid; place-items: center; }
.cand .art svg { width: 46%; }
.cand h3 { margin: 0; font-size: 1.15cqw; font-weight: 700; letter-spacing: -0.02em; }
.cand p { margin: 0.3cqw 0 0; font-size: 0.74cqw; line-height: 1.5; color: var(--sub); }
.cand .small-row { display: flex; gap: 0.8cqw; align-items: center; margin-top: 0.6cqw; }
.cand .small-row svg { width: auto; }
.cand.pick { box-shadow: inset 0 0 0 2px var(--green-deep); }
.pickmark { position: absolute; right: 1cqw; top: 0.8cqw; font-size: 0.66cqw; font-weight: 700; color: var(--green-deep); background: var(--green-tint); padding: 0.2cqw 0.5cqw; border-radius: 0.3cqw; }
:root[data-theme="dark"] .pickmark { color: #0c1a14; background: var(--green); }

/* Swatches */
.sw.white { color: var(--ink); }
.sw .big { font-size: 2.4cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.ramp { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0.4cqw; width: 100%; padding: 2.6cqw 1.2cqw 1.2cqw; align-self: stretch; }
.ramp div { display: grid; grid-template-rows: 1fr auto auto; gap: 0.3cqw; font-size: 0.62cqw; font-variant-numeric: tabular-nums; color: var(--sub); }
.ramp i { display: block; border-radius: 0.4cqw; box-shadow: inset 0 0 0 1px #8888884d; min-height: 7cqw; }
.ramp b { color: var(--fg); font-weight: 600; }

/* Contrast pairs */
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6cqw; width: 100%; padding: 2.6cqw 1.2cqw 1.2cqw; align-self: stretch; }
.pairs div { border-radius: 0.5cqw; padding: 1cqw; display: grid; align-content: space-between; min-height: 7cqw; font-size: 1.05cqw; font-weight: 650; letter-spacing: -0.02em; position: relative; }
.pairs small { font-size: 0.62cqw; font-weight: 500; letter-spacing: 0; opacity: 0.8; font-variant-numeric: tabular-nums; }
.pairs .bad { outline: 2px solid var(--red); outline-offset: -2px; }
.pairs .bad small::after { content: " · 글자로 쓰지 않음"; }

/* Type specimen */
.spec-k { font-size: 7.4cqw; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.weights { display: grid; gap: 0.5cqw; padding: 2.6cqw 1.6cqw 1.4cqw; align-self: stretch; align-content: center; }
.weights div { display: grid; grid-template-columns: 6cqw 1fr; align-items: baseline; font-size: 1.7cqw; letter-spacing: -0.03em; border-top: 1px solid var(--hair); padding-top: 0.4cqw; }
.weights small { font-size: 0.66cqw; color: var(--sub); letter-spacing: 0; }
.nums { padding: 2.6cqw 1.6cqw 1.4cqw; align-self: stretch; display: grid; align-content: center; gap: 0.9cqw; font-variant-numeric: tabular-nums; }
.nums .row { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hair); padding-top: 0.6cqw; font-size: 1.1cqw; }
.nums .row b { font-size: 1.6cqw; font-weight: 700; letter-spacing: -0.02em; }
.nums .row s { text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--sub); }

/* Spacing scale and radius/shadow */
.scale { display: grid; gap: 0.45cqw; padding: 2.6cqw 1.6cqw 1.4cqw; align-self: stretch; align-content: center; font-size: 0.7cqw; color: var(--sub); font-variant-numeric: tabular-nums; }
.scale div { display: grid; grid-template-columns: 4cqw 1fr; align-items: center; gap: 0.6cqw; }
.scale i { display: block; height: 0.9cqw; background: var(--green); border-radius: 0.15cqw; }
.rads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; width: 100%; padding: 2.6cqw 1.6cqw 1.4cqw; align-items: end; }
.rads div { display: grid; gap: 0.5cqw; font-size: 0.66cqw; color: var(--sub); text-align: center; font-variant-numeric: tabular-nums; }
.rads i { display: block; aspect-ratio: 1; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.shadows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; width: 100%; padding: 3cqw 2.4cqw 2cqw; }
.shadows div { height: 8cqw; border-radius: 0.9cqw; background: #fff; display: grid; place-items: end start; padding: 0.8cqw; font-size: 0.7cqw; color: #5e6a65; }

/* Live components (rendered with the real tokens, scaled for the slide) */
.ui { --u: 0.062cqw; display: grid; gap: 1cqw; justify-items: start; padding: 2.8cqw 2cqw 1.6cqw; align-self: stretch; align-content: center; }
.ui .row { display: flex; gap: 0.8cqw; align-items: center; flex-wrap: wrap; }
.ui .cap { font-size: 0.66cqw; color: var(--sub); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5cqw; height: 3cqw; padding: 0 1.25cqw; border-radius: 0.75cqw; border: 1px solid transparent; font: 600 1cqw/1 inherit; font-family: inherit; letter-spacing: -0.01em; cursor: pointer; }
.btn.p { background: var(--green); color: var(--ink); }
.btn.d { background: var(--ink); color: #fff; }
:root[data-theme="dark"] .btn.d { background: var(--paper-w); color: var(--ink); }
.btn.s { background: var(--bg); color: var(--fg); border-color: #c3ccc8; }
:root[data-theme="dark"] .btn.s { border-color: #34423b; }
.btn.g { background: none; color: var(--green-deep); padding: 0 0.4cqw; }
:root[data-theme="dark"] .btn.g { color: #4be3a4; }
.btn.sm { height: 2.25cqw; padding: 0 0.9cqw; font-size: 0.86cqw; border-radius: 0.5cqw; }
.btn.off { background: #edf1ef; color: #687470; cursor: default; }
.btn.focus { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.btn.press { transform: scale(0.98); }
.fld { display: grid; gap: 0.35cqw; width: 18cqw; }
.fld label { font-size: 0.86cqw; font-weight: 600; }
.fld .in { height: 3cqw; border-radius: 0.75cqw; border: 1px solid #c3ccc8; background: var(--bg); display: flex; align-items: center; padding: 0 0.9cqw; font-size: 1cqw; color: var(--fg); }
:root[data-theme="dark"] .fld .in { border-color: #34423b; }
.fld .in.ph { color: var(--faint); }
.fld .in.fo { border-color: var(--green-deep); box-shadow: 0 0 0 0.19cqw #09cc7c59; }
.fld .in.er { border-color: #c4261b; }
.fld small { font-size: 0.74cqw; color: var(--sub); }
.fld small.er { color: #c4261b; }
:root[data-theme="dark"] .fld small.er { color: #f87171; }
.opt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6cqw; width: 100%; }
.opt div { border: 1px solid #dde3e0; border-radius: 1cqw; padding: 0.9cqw; display: grid; gap: 0.2cqw; font-size: 0.86cqw; background: var(--bg); }
:root[data-theme="dark"] .opt div { border-color: #24302a; }
.opt div b { font-size: 0.95cqw; }
.opt div span { color: var(--sub); font-size: 0.74cqw; }
.opt div em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.opt div.on { border: 2px solid var(--green-deep); background: var(--green-tint); color: var(--ink); }
.opt div.on span { color: #37413d; }
.card { background: var(--bg); border: 1px solid #dde3e0; border-radius: 1cqw; box-shadow: 0 1px 2px #0c1a140f, 0 1px 1px #0c1a140a; padding: 1.2cqw; display: grid; gap: 0.6cqw; width: 22cqw; }
:root[data-theme="dark"] .card { border-color: #24302a; }
.card .t { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1cqw; }
.card .meta { font-size: 0.74cqw; color: var(--sub); }
.card .bar2 { height: 0.5cqw; border-radius: 0.25cqw; background: #edf1ef; overflow: hidden; }
:root[data-theme="dark"] .card .bar2 { background: #24302a; }
.card .bar2 i { display: block; height: 100%; width: 61%; background: var(--green); border-radius: inherit; }
.card .nums2 { display: flex; justify-content: space-between; font-size: 0.86cqw; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; height: 1.5cqw; padding: 0 0.5cqw; border-radius: 0.38cqw; font-size: 0.74cqw; font-weight: 600; }
.badge.gr { background: var(--green-tint); color: var(--green-deep); }
.badge.gy { background: #f5f7f6; color: #5e6a65; }
.badge.wa { background: #fff4d6; color: #a15c00; }
.badge.da { background: #fdecea; color: #c4261b; }
.badge.in { background: #eaf1fe; color: #2563eb; }

/* Motion demos */
.demo { place-items: center; }
.demo .lock { width: 66%; --ring: var(--paper-w); --leaf: var(--green); --word: var(--paper-w); }
.demo small { position: absolute; left: 1cqw; bottom: 0.8cqw; font-size: 0.62cqw; color: var(--sub); }
.pn.ink.demo small { color: #ffffff99; }
.pt { display: grid; justify-items: center; gap: 0.6cqw; }
.pt .sym { width: 4cqw; --ring: var(--fg); }
.pt .v { font-size: 3.4cqw; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pt .plus { font-size: 1.1cqw; font-weight: 700; color: var(--green-deep); }
:root[data-theme="dark"] .pt .plus { color: #4be3a4; }
.prog { width: 70%; display: grid; gap: 0.6cqw; }
.prog .bar2 { height: 0.9cqw; border-radius: 0.45cqw; background: var(--hair); overflow: hidden; }
.prog .bar2 i { display: block; height: 100%; width: 61%; background: var(--green); border-radius: inherit; transform-origin: left; }
.prog .nums2 { display: flex; justify-content: space-between; font-size: 1cqw; font-variant-numeric: tabular-nums; }
.tl { width: 100%; padding: 3cqw 1.6cqw 1.6cqw; align-self: stretch; display: grid; align-content: center; gap: 0.6cqw; }
.tl .tr { display: grid; grid-template-columns: 9cqw 1fr; align-items: center; gap: 0.8cqw; font-size: 0.74cqw; color: var(--sub); }
.tl .tr div { position: relative; height: 1.4cqw; background: var(--hair); border-radius: 0.3cqw; }
.tl .tr i { position: absolute; top: 0; bottom: 0; border-radius: 0.3cqw; background: var(--fg); }
.tl .tr i.gr { background: var(--green); }
.tl .ticks { display: grid; grid-template-columns: 9cqw 1fr; gap: 0.8cqw; font-size: 0.62cqw; color: var(--faint); font-variant-numeric: tabular-nums; }
.tl .ticks div { display: flex; justify-content: space-between; }

/* Screens from the example pages */
.shot { padding: 2.6cqw 1.4cqw 1.2cqw; place-items: start center; overflow: hidden; }
.shot img { width: 100%; height: auto; display: block; border-radius: 0.4cqw; box-shadow: 0 0.3cqw 1.2cqw #0c1a1424; }
.shot.mob img { width: 70%; margin: 0 auto; }
.shot a.open { position: absolute; right: 1cqw; top: 0.8cqw; font-size: 0.68cqw; color: var(--fg); z-index: 2; }

/* Phone frame for the user-app slide */
.phone { width: 15cqw; aspect-ratio: 9 / 19.5; border-radius: 2.2cqw; background: #0c1a14; padding: 0.55cqw; box-shadow: 0 1.2cqw 3cqw #0c1a1440; }
.phone .scr { width: 100%; height: 100%; border-radius: 1.7cqw; overflow: hidden; background: #fff; color: #0c1a14; display: grid; grid-template-rows: auto auto 1fr; font-size: 0.7cqw; }
.phone .hd { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 1cqw 0.6cqw; }
.phone .hd svg { height: 1.2cqw; }
.phone .bal { margin: 0.4cqw 0.8cqw; background: #0c1a14; color: #fff; border-radius: 1cqw; padding: 1cqw; display: grid; gap: 0.3cqw; }
.phone .bal small { color: #a3b1aa; font-size: 0.6cqw; }
.phone .bal b { font-size: 1.6cqw; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phone .bal b i { font-style: normal; color: var(--gold, #ffc93c); }
.phone .list { padding: 0.4cqw 0.8cqw; display: grid; gap: 0.45cqw; align-content: start; }
.phone .it { display: grid; grid-template-columns: 2cqw 1fr auto; gap: 0.6cqw; align-items: center; border: 1px solid #dde3e0; border-radius: 0.8cqw; padding: 0.6cqw; }
.phone .it i { width: 2cqw; height: 2cqw; border-radius: 0.5cqw; background: #e8f8f0; display: grid; place-items: center; }
.phone .it span small { display: block; color: #5e6a65; font-size: 0.56cqw; }
.phone .it em { font-style: normal; font-weight: 700; color: #057a4b; font-variant-numeric: tabular-nums; }
.home-scr { width: 100%; height: 100%; border-radius: 1.7cqw; background: linear-gradient(180deg, #1c3a2c, #0c1a14); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw 0.6cqw; padding: 3cqw 1cqw; align-content: start; }
.home-scr div { display: grid; justify-items: center; gap: 0.3cqw; font-size: 0.5cqw; color: #fff; }
.home-scr i { width: 2.6cqw; aspect-ratio: 1; border-radius: 22.37%; background: #ffffff26; display: block; }
.home-scr img { width: 2.6cqw; display: block; }

/* Before / after */
.ba { display: grid; gap: 1cqw; justify-items: center; }
.ba img { display: block; }
.ba .cap2 { font-size: 0.74cqw; color: var(--sub); text-align: center; line-height: 1.5; }

/* Panels that are grids themselves: stretch their rows instead of centring them (deck.css centres .pn children) */
.pn.nums, .pn.scale, .pn.hier, .pn.weights, .pn.tl, .pn.rads, .pn.shadows, .pn.cand, .pn.ramp-wrap { place-items: stretch; }
.pn.ui { place-items: stretch; justify-items: start; }
.rads { align-items: end; }
.rads div { justify-items: center; }
.rads i { width: 62%; }
.shadows { align-items: center; }
.dl.two { grid-template-columns: 1fr 1fr; column-gap: 1cqw; }
.dl.two a { font-size: 0.72cqw; padding: 0.45cqw 0.3cqw; grid-template-columns: 2.2cqw 1fr auto; }
.dl.two a .th { width: 2.2cqw; height: 1.6cqw; }
.dl.two a .th img { max-width: 1.8cqw; max-height: 1.3cqw; }

@media (max-width: 820px) {
  .dl.two { grid-template-columns: 1fr; }
  .dl.two a { font-size: 12px; grid-template-columns: 36px 1fr auto; padding: 7px 4px; }
  .dl.two a .th { width: 36px; height: 26px; } .dl.two a .th img { max-width: 28px; max-height: 20px; }
  .anat { grid-template-columns: 1fr; width: 100%; padding: 30px 14px 14px; gap: 14px; }
  .anat > svg { width: 70%; margin: 0 auto; }
  .anat .calls li { font-size: 12.5px; } .anat .calls b { font-size: 14px; }
  .cover .lock { width: 76vw; }
  .cover .meta, .cover .tag { font-size: 12px; top: 20px; }
  .cover .meta { left: 24px; } .cover .tag { right: 24px; }
  .cand { padding: 30px 12px 12px; }
  .cand h3 { font-size: 15px; } .cand p { font-size: 12px; }
  .ramp { grid-template-columns: repeat(4, 1fr); padding: 30px 10px 10px; }
  .ramp div { font-size: 10px; } .ramp i { min-height: 40px; }
  .pairs { grid-template-columns: 1fr 1fr; padding: 30px 10px 10px; }
  .pairs div { font-size: 14px; min-height: 70px; padding: 10px; } .pairs small { font-size: 10px; }
  .spec-k { font-size: 56px; }
  .weights div, .nums .row { font-size: 16px; grid-template-columns: 70px 1fr; } .weights small { font-size: 10px; }
  .nums .row b { font-size: 18px; }
  .scale { font-size: 11px; } .scale div { grid-template-columns: 40px 1fr; } .scale i { height: 10px; }
  .rads, .shadows { padding: 30px 12px 12px; gap: 10px; } .rads div, .shadows div { font-size: 10px; }
  .ui { padding: 30px 12px 12px; gap: 10px; } .ui .cap { font-size: 11px; }
  .btn { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
  .btn.sm { height: 32px; font-size: 13px; border-radius: 8px; }
  .fld { width: 100%; } .fld label { font-size: 13px; } .fld .in { height: 42px; font-size: 14px; border-radius: 10px; } .fld small { font-size: 11px; }
  .opt { grid-template-columns: 1fr; } .opt div { font-size: 13px; padding: 10px; border-radius: 12px; } .opt div b { font-size: 14px; } .opt div span { font-size: 11px; }
  .card { width: 100%; padding: 14px; border-radius: 14px; } .card .t { font-size: 14px; } .card .meta, .card .nums2 { font-size: 12px; } .card .bar2 { height: 6px; }
  .badge { height: 22px; font-size: 11px; padding: 0 7px; border-radius: 6px; }
  .pt .sym { width: 40px; } .pt .v { font-size: 34px; } .pt .plus { font-size: 14px; }
  .prog .nums2 { font-size: 13px; } .prog .bar2 { height: 8px; }
  .tl { padding: 30px 10px 10px; } .tl .tr, .tl .ticks { grid-template-columns: 80px 1fr; font-size: 10px; } .tl .tr div { height: 14px; }
  .shot { padding: 30px 8px 8px; } .shot a.open { font-size: 11px; }
  .phone { width: 46%; border-radius: 22px; padding: 5px; } .phone .scr, .home-scr { border-radius: 18px; }
  .phone .scr { font-size: 9px; } .phone .bal b { font-size: 16px; } .phone .hd svg { height: 12px; }
  .home-scr i, .home-scr img { width: 28px; } .home-scr div { font-size: 7px; }
  .ba .cap2 { font-size: 12px; }
  .statement .sym { width: 30px; }
  .opener .shape.sym { width: 340px; right: -60px; top: -70px; }
  .opener .mini.sym { width: 32px; }
  .rail .sym { width: 26px; }
}
.bar button, .bar a { white-space: nowrap; }

/* White panels keep light-mode text tokens in dark mode (they show the light product) */
.pn.white { --fg: #0c1a14; --fg2: #2c3631; --sub: #5e6a65; --faint: #687470; --hair: #0c1a1414; --line: #0c1a1424; --bg: #fff; --ring: #0c1a14; color: #0c1a14; }
.bar { gap: 4px; }
@media (max-width: 820px) {
  .cover { min-height: 440px; align-content: center; padding: 96px 24px 96px; }
  .cover .tag { top: auto; right: auto; left: 24px; bottom: 52px; text-align: left; }
}

/* Round 1 (Fable review): classes instead of inline cqw so phones get readable sizes */
.sig-h { font-size: 3.4cqw; line-height: 1.12; }
.sig-lock { width: 12cqw; }
.retype { display: flex; align-items: center; gap: 0.8cqw; }
.retype svg { width: 3.4cqw; }
.retype span { font-family: serif; font-size: 2.2cqw; font-weight: 400; color: #0c1a14; }
.lead-h { font-size: 4.4cqw !important; line-height: 1.08 !important; letter-spacing: -0.045em !important; }
.lead-p { font-size: 1cqw !important; opacity: 0.85; }
.h-d { font-size: 3.2cqw; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.h-1 { font-size: 2.3cqw; font-weight: 800; letter-spacing: -0.03em; }
.h-2 { font-size: 1.6cqw; font-weight: 700; letter-spacing: -0.025em; }
.h-3 { font-size: 1.15cqw; font-weight: 700; }
.h-b { font-size: 0.92cqw; }
.h-s { font-size: 0.8cqw; color: var(--sub); }
.h-c { font-size: 0.7cqw; font-weight: 500; color: var(--sub); }
.scale i { width: calc(var(--n) * 0.25cqw); }
.tl .ticks { color: var(--sub); }
.rail li { color: #ffffff85; }
.tok { font-size: 0.86cqw !important; }
:root[data-theme="dark"] .pn.ink { box-shadow: inset 0 0 0 1px #ffffff24; }
@media (max-width: 820px) {
  .toc h2 .en { font-size: 12px; }
  .pickmark { font-size: 11px; padding: 2px 6px; right: 10px; top: 8px; }
  .lead-h { font-size: 34px !important; } .lead-p { font-size: 14px !important; }
  .sig-h { font-size: 30px; } .sig-lock { width: 120px; }
  .retype { gap: 8px; } .retype svg { width: 30px; } .retype span { font-size: 22px; }
  .h-d { font-size: 30px; } .h-1 { font-size: 24px; } .h-2 { font-size: 20px; } .h-3 { font-size: 17px; } .h-b { font-size: 15px; } .h-s { font-size: 13px; } .h-c { font-size: 12px; }
  .scale i { width: calc(var(--n) * 2.2px); }
  .demo small { font-size: 11px; left: 10px; bottom: 8px; right: 10px; }
  .phone .bal small, .phone .it span small { font-size: 8px; }
  .phone .bal { padding: 10px; border-radius: 12px; } .phone .it { padding: 6px; border-radius: 9px; gap: 6px; } .phone .it i { width: 22px; height: 22px; }
  .tok { font-size: 11px !important; }
  .cover .meta, .cover .tag, .cover .foot { font-size: 12px; }
}
.sig-pn { align-content: space-between; padding: 4cqw 2.4cqw 2.4cqw; }
.lead-pn { align-content: end; padding: 3cqw; }
@media (max-width: 820px) {
  .sig-pn { padding: 40px 16px 16px; gap: 18px; min-height: 240px; }
  .lead-pn { padding: 40px 16px 16px; }
  .content > .pn.demo { min-height: 210px; padding: 34px 10px 34px; }
  .pt .v { font-size: 28px; }
  .content.phones { grid-template-columns: 1fr !important; }
  .content.phones > .pn { padding: 40px 0 20px; }
  .content.phones .phone { width: 52%; }
}
@media (max-width: 820px) { .phone .it { grid-template-columns: 22px 1fr auto; } .phone .it i svg { width: 14px !important; } }