/* ScoreStory guides: the hub (guides.njk) and every guide and calculator
   (layouts/guide.njk). Loads after style.css and only overrides here. */

/* style.css gives body `overflow-x:hidden`, which together with html's
   `overflow-y:scroll` turns body into a scroll container of its own, so
   nothing inside it can be sticky against the viewport: not the header,
   not the table of contents here. `clip` cuts off horizontal overflow the
   same way without creating a scroll container. Browsers that do not know
   `clip` drop this line and keep `hidden`. */
body{overflow-x:clip}

/* ---------- Hero ---------- */
.guide-hero{padding:40px 0 48px;background:radial-gradient(90% 70% at 100% 0%,rgba(19,163,125,.10),transparent 60%),var(--white);border-bottom:1px solid var(--line)}
.guide-hero-inner{max-width:900px}
.guide-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:.86rem;color:var(--muted);margin-bottom:28px}
.guide-crumbs li{display:inline-flex;align-items:center;min-width:0}
.guide-crumbs li+li::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);margin:0 12px 0 8px;opacity:.6;flex:none}
.guide-crumbs a{color:var(--green-deep);font-weight:500;padding:10px 0}
.guide-crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.guide-crumbs [aria-current]{color:var(--muted)}
.guide-title{font-size:clamp(2.1rem,4.4vw,3.3rem);color:var(--navy);margin-top:18px;max-width:22ch}
.guide-lead{font-size:1.2rem;line-height:1.6;color:var(--ink);margin-top:20px;max-width:62ch}
.guide-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:22px;font-size:.88rem;color:var(--muted)}

/* ---------- Article column, with the table of contents beside it ---------- */
.guide-layout{padding-top:48px;padding-bottom:24px}
.guide-layout.has-toc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.guide-layout:not(.has-toc) .guide-body{max-width:760px}
.guide-body{max-width:720px;min-width:0;font-size:1.08rem;line-height:1.75;color:var(--ink)}
.guide-toc{position:sticky;top:100px;font-size:.92rem}
.guide-toc summary{list-style:none;cursor:pointer;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);padding:6px 0 12px}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc ol{list-style:none;border-left:2px solid var(--line);display:flex;flex-direction:column}
.guide-toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);line-height:1.4}
.guide-toc a:hover{color:var(--navy);border-left-color:var(--green)}

.guide-body > :first-child{margin-top:0}
.guide-body p{margin-bottom:1.2em}
.guide-body h2{font-size:clamp(1.6rem,2.6vw,2rem);color:var(--navy);margin:2em 0 .6em;scroll-margin-top:96px}
.guide-body h3{font-size:1.28rem;color:var(--navy);margin:1.6em 0 .5em;scroll-margin-top:96px}
.guide-body ul,.guide-body ol{margin:0 0 1.3em 1.3em}
.guide-body li{margin-bottom:.45em;padding-left:.2em}
.guide-body li::marker{color:var(--green-deep)}
.guide-body a{color:var(--green-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.guide-body a:hover{color:var(--green-deeper);text-decoration-thickness:2px}
.guide-body strong{color:var(--navy)}
.guide-body code{font-size:.9em;background:#F2F4F8;border-radius:6px;padding:.1em .35em}
.guide-body blockquote{margin:1.6em 0;padding:20px 24px;border-left:4px solid var(--green);border-radius:0 14px 14px 0;background:var(--green-tint)}
.guide-body blockquote p{margin:0;font-family:'Fraunces',serif;font-weight:500;font-size:1.25rem;line-height:1.45;color:var(--navy)}

/* Tables: example data, comparisons. A wide one scrolls inside its own
   box rather than widening the page. */
.guide-body table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5;margin:1.4em 0 1.6em}
.guide-body th,.guide-body td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.guide-body thead th{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:2px solid var(--line)}
.guide-body td.num,.guide-body th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.guide-body tbody tr:last-child td{border-bottom:0}
.guide-body tfoot td{font-weight:700;color:var(--navy);border-top:2px solid var(--line);border-bottom:0}
.g-table{overflow-x:auto;margin:1.4em 0 1.6em;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch}
.g-table table{margin:0;min-width:560px}
.g-table.is-narrow table{min-width:0}

/* Callouts. `.g-callout` is a neutral aside, `.is-tip` a recommendation,
   `.is-warn` a pitfall. Markdown inside them works when it is separated
   from the opening and closing tags by blank lines. */
.g-callout{margin:1.6em 0;padding:20px 22px 4px;border-radius:14px;background:#F5F7FB;border:1px solid var(--line)}
.g-callout.is-tip{background:var(--green-tint);border-color:var(--line-green)}
.g-callout.is-warn{background:#FFF6E5;border-color:#F3D9A4}
.g-callout p{margin-bottom:1em}
.g-callout ul{margin-bottom:1em}

/* The key formula, set apart. */
.g-formula{margin:1.6em 0;padding:22px 24px;border-radius:16px;background:var(--navy);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.4;text-align:center}
.g-formula small{display:block;margin-top:8px;font-family:'Inter',sans-serif;font-weight:400;font-size:.9rem;color:rgba(255,255,255,.78)}

/* A worked-out split of responses as a stacked bar. */
.g-split{margin:1.4em 0 1.8em}
.g-split-bar{display:flex;height:40px;border-radius:10px;overflow:hidden;font-size:.86rem;font-weight:600;color:#fff}
.g-split-bar span{display:flex;align-items:center;justify-content:center;min-width:0;white-space:nowrap;overflow:hidden}
.g-split-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:.88rem;color:var(--muted);list-style:none}
.guide-body .g-split-legend{margin-left:0}
.g-split-legend li{display:flex;align-items:center;gap:8px;margin:0;padding:0}
.g-split-legend li::before{content:"";width:12px;height:12px;border-radius:3px;background:currentColor;flex:none}
.g-split-legend li span{color:var(--ink)}

/* Group colours, shared by scales, splits and the calculator. Text on
   them stays at 4.5:1 or better. */
.is-neg{--tone:#B83A26;--tone-ink:#fff}
.is-mid{--tone:#F0B964;--tone-ink:var(--amber-ink)}
.is-pos{--tone:var(--green-deep);--tone-ink:#fff}
.is-off{--tone:#DDE1EA;--tone-ink:var(--ink)}
.g-split-bar .is-neg,.g-split-bar .is-mid,.g-split-bar .is-pos,.g-split-bar .is-off{background:var(--tone);color:var(--tone-ink)}
.g-split-legend .is-neg,.g-split-legend .is-mid,.g-split-legend .is-pos,.g-split-legend .is-off{color:var(--tone)}

/* ---------- Score scale (_includes/guides/scale.njk) ---------- */
.g-scale{margin:1.8em 0 2em;padding:22px 22px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.g-scale-ends{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted);margin-bottom:8px}
.guide-body .g-scale-cells,.guide-body .g-scale-groups{margin:0;list-style:none}
.g-scale-cells{display:grid;grid-template-columns:repeat(var(--cells),minmax(0,1fr));gap:5px}
.guide-body .g-scale-cells li{margin:0;padding:0;aspect-ratio:1;max-height:56px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;background:var(--tone);color:var(--tone-ink)}
.g-scale-groups{display:grid;grid-template-columns:repeat(var(--cells),minmax(0,1fr));gap:5px;margin-top:10px}
.guide-body .g-scale-groups li{margin:0;padding:8px 0 0;border-top:3px solid var(--tone);font-size:.86rem;line-height:1.3;text-align:center;min-width:0}
.g-scale-groups strong{display:block;color:var(--ink)}
.g-scale-groups span{color:var(--muted);font-size:.8rem}
.g-scale figcaption{margin-top:14px;font-size:.88rem;color:var(--muted);text-align:center}

/* A row header in a comparison table. */
.guide-body tbody th{font-size:.82rem;font-weight:700;color:var(--navy);white-space:nowrap}

/* "Choose by your question": numbered cards. */
.guide-body .g-choose{list-style:none;margin:1.4em 0 1.8em;display:grid;gap:12px;counter-reset:choose}
.guide-body .g-choose li{counter-increment:choose;position:relative;margin:0;padding:18px 20px 18px 62px;border:1px solid var(--line);border-radius:14px;background:#fff}
.g-choose li::before{content:counter(choose);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--green-tint);color:var(--green-deeper);font:600 .95rem/30px 'Fraunces',serif;text-align:center}
.g-choose strong{display:block;line-height:1.45}
.g-choose span{display:block;color:var(--muted);font-size:.98rem;margin-top:4px}

/* A customer journey with a score per step. */
.guide-body .g-journey{list-style:none;margin:1.6em 0 2em;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.guide-body .g-journey li{margin:0;padding:16px 16px 18px;border-radius:14px;background:#F5F7FB;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;position:relative}
.g-journey li:not(:last-child)::after{content:"";position:absolute;top:26px;right:-9px;width:6px;height:6px;border-right:2px solid var(--green);border-top:2px solid var(--green);transform:rotate(45deg);z-index:1}
.g-journey-when{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);line-height:1.35}
.g-journey strong{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--green-deep);line-height:1.2}
.g-journey li > span:last-child{font-size:.9rem;line-height:1.45;color:var(--ink)}

/* An example conversation, as chat bubbles in the house style. */
.g-chat{margin:1.6em 0 2em;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.guide-body .g-chat p{margin:0}
.g-chat-score{align-self:flex-end;font-size:.86rem;color:var(--muted)}
.g-chat-score strong{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:6px;border-radius:8px;background:var(--amber);color:var(--amber-ink);font-family:'Fraunces',serif}
.g-msg{max-width:86%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5}
.g-msg span{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:2px}
.g-msg.is-ai{align-self:flex-start;background:var(--blue-tint);color:var(--ink);border-bottom-left-radius:4px}
.g-msg.is-person{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}

/* ---------- Question sets ---------- */
.g-qset{position:relative;margin:1.4em 0 1.8em;padding:20px 22px 18px;border:1px solid var(--line);border-radius:16px;background:#FAFBFD}
.guide-body .g-qset ol,.guide-body .g-qset ul{margin:0 0 0 1.3em}
.g-qset li{margin-bottom:.55em}
.g-qset-title{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:10px}
.guide-body .g-qset .g-qset-title{margin-bottom:10px}
.g-copy{margin-top:12px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--green-deep);background:#fff;color:var(--green-deep);font:600 .9rem 'Inter',sans-serif;cursor:pointer}
.g-copy:hover{background:var(--green-tint)}
.g-copy:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}

/* ---------- FAQ and sources ---------- */
.guide-faq{margin-top:3em}
.guide-faq details{border-bottom:1px solid var(--line)}
.guide-faq details:first-of-type{border-top:1px solid var(--line)}
.guide-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;min-height:44px;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.45}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-faq summary::after{content:"+";flex:none;font-size:1.4rem;font-weight:400;color:var(--green-deep);transition:transform .2s}
.guide-faq details[open] summary::after{transform:rotate(45deg)}
.guide-faq summary:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.guide-faq details p{color:var(--muted);font-size:1rem;padding-bottom:6px}
.guide-sources{margin-top:3em;padding-top:4px}
.guide-sources h2{font-size:1.35rem}
.guide-sources ol{font-size:.92rem;line-height:1.55;color:var(--muted)}
.guide-sources li{margin-bottom:.6em}
.guide-sources a{overflow-wrap:anywhere}

/* ---------- Closing call to action ---------- */
.guide-cta{padding:48px 0 72px}
.guide-cta-box{text-align:center;background:linear-gradient(155deg,var(--navy) 0%,var(--green) 100%);border-radius:28px;padding:52px 32px;color:#fff;box-shadow:var(--shadow-lg)}
.guide-cta-box h2{font-size:clamp(1.8rem,3.2vw,2.4rem);max-width:22ch;margin:0 auto}
.guide-cta-box p{color:rgba(255,255,255,.88);font-size:1.04rem;margin:14px auto 28px;max-width:54ch}
.guide-cta-btns{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center;align-items:center}
.guide-cta-btn{min-height:44px}
.guide-cta-link{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}

/* ---------- Cards: related guides, and the hub ---------- */
.guide-related{padding:0 0 96px}
.guide-related h2{font-size:clamp(1.6rem,2.6vw,2rem);color:var(--navy);margin-bottom:24px}
.guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.guide-card{display:flex;flex-direction:column;gap:8px;padding:24px 24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease}
.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.guide-card:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px}
.guide-card-kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--green-deep)}
.guide-card-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--navy)}
.guide-card-text{font-size:.94rem;line-height:1.55;color:var(--muted)}
.guide-card-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--green-deep)}
.guide-card-more svg{transition:transform .2s ease}
.guide-card:hover .guide-card-more svg{transform:translateX(3px)}
.guide-all{margin-top:24px}
.guide-all a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}

.gh-hero{padding:64px 0 56px;background:radial-gradient(90% 70% at 100% 0%,rgba(19,163,125,.10),transparent 60%),var(--white)}
.gh-hero-head{max-width:900px}
.gh-title{font-size:clamp(2.3rem,4.6vw,3.6rem);color:var(--navy);margin-top:18px}
.gh-lede{font-size:1.15rem;color:var(--muted);margin-top:20px;max-width:58ch}
.gh-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none}
.gh-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:.9rem;color:var(--navy)}
.gh-jump a:hover{border-color:var(--green);color:var(--green-deep)}
.gh-group{padding:56px 0;border-top:1px solid var(--line)}
.gh-group:last-of-type{padding-bottom:96px}
.gh-group-head{max-width:720px;margin-bottom:28px}
.gh-group-head h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--navy);margin-top:12px;scroll-margin-top:96px}
.gh-group-head p{color:var(--muted);margin-top:10px}
.gh-group.is-calcs .guide-card{background:linear-gradient(160deg,#fff 0%,#F2FBF7 100%);border-color:var(--line-green)}

/* ---------- Calculator (_includes/guides/calculator.njk) ---------- */
.g-calc-noscript{padding:18px 20px;border-radius:14px;background:#FFF6E5;border:1px solid #F3D9A4;margin-bottom:2em}
.g-calc{margin:0 0 2.6em;padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-lg);font-size:1rem;line-height:1.5}
.g-calc[hidden]{display:none}
.g-calc fieldset{border:0;min-width:0}
.g-calc legend{font-weight:600;color:var(--navy);margin-bottom:10px;padding:0}
.g-calc-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:#EEF1F6}
.g-calc-seg label{position:relative;display:block;cursor:pointer}
.g-calc-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.g-calc-seg span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 12px;border-radius:10px;font-weight:600;font-size:.94rem;color:var(--muted);transition:background .2s,color .2s}
.g-calc-seg input:checked + span{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(13,32,73,.14)}
.g-calc-seg input:focus-visible + span{outline:2px solid var(--green-deep);outline-offset:2px}
.g-calc-panel{margin-top:22px}
.g-calc-panel[hidden]{display:none}
.g-calc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g-calc-fields-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-calc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.g-calc-field label,.g-calc-panel > label{font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.35}
.g-calc-field label span{font-weight:500;color:var(--muted)}
.g-calc-field.is-neg,.g-calc-field.is-mid,.g-calc-field.is-pos,.g-calc-field.is-off{padding-top:10px;border-top:4px solid var(--tone)}
.g-calc .g-calc-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:4px;border-radius:7px;background:var(--tone);color:var(--tone-ink);font-family:'Fraunces',serif;font-weight:600}
.g-calc input[type=number],.g-calc textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:500 16px/1.4 'Inter',sans-serif;font-variant-numeric:tabular-nums}
.g-calc textarea{display:block;margin-top:8px;resize:vertical}
.g-calc input:focus,.g-calc textarea:focus{outline:none;border-color:var(--green-deep);box-shadow:0 0 0 3px rgba(11,129,95,.18)}
.g-calc-hint{font-size:.86rem;color:var(--muted);margin-top:6px}
.g-calc-headcount{margin-top:20px;max-width:340px}
.g-calc-result{margin-top:26px;padding:24px;border-radius:16px;background:var(--navy);color:#fff}
.g-calc-result-label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mint-accent)}
.g-calc-score{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(3rem,8vw,4.4rem);line-height:1.05;margin:6px 0 14px;font-variant-numeric:tabular-nums}
.g-calc-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.14);margin-bottom:16px}
.g-calc-bar span{display:block;height:100%;width:0;transition:width .3s ease;background:var(--tone)}
.g-calc-bar .is-s1{background:#B83A26}
.g-calc-bar .is-s2{background:#D9785F}
.g-calc-bar .is-s3{background:#C9CFDB}
.g-calc-bar .is-s4{background:#3FBF94}
.g-calc-bar .is-s5{background:#13A37D}
.g-calc-line{color:rgba(255,255,255,.9);font-size:.97rem;margin-top:6px}
.g-calc-line:empty{display:none}
.g-calc-note{color:var(--amber)}
.g-calc-reset{margin-top:16px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:600 .9rem 'Inter',sans-serif;cursor:pointer}
.g-calc-reset:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.g-calc-reset:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Responsive ---------- */
@media(max-width:979px){
  .guide-layout.has-toc{grid-template-columns:minmax(0,1fr);gap:8px}
  .guide-toc{position:static;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#FAFBFD}
  .guide-toc summary{padding:4px 0;display:flex;justify-content:space-between;align-items:center;min-height:36px}
  .guide-toc summary::after{content:"+";font-size:1.3rem;font-weight:400;letter-spacing:0}
  .guide-toc details[open] summary::after{content:"\2212"}
  .guide-toc details[open] ol{margin-top:6px}
  .guide-layout.has-toc .guide-body{margin-top:28px}
  .guide-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .guide-body .g-journey{grid-template-columns:minmax(0,1fr)}
  .g-journey li:not(:last-child)::after{top:auto;bottom:-9px;right:auto;left:26px;transform:rotate(135deg)}
  .g-calc-fields-5{grid-template-columns:minmax(0,1fr)}
  .g-calc-fields-5 .g-calc-field{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:12px}
}
@media(max-width:560px){
  .guide-hero{padding:24px 0 36px}
  .guide-crumbs ol{margin-bottom:18px}
  .guide-lead{font-size:1.08rem}
  .guide-layout{padding-top:32px}
  .guide-body{font-size:1.02rem}
  .guide-cards{grid-template-columns:minmax(0,1fr)}
  .g-scale{padding:14px 8px 12px;margin-left:-4px;margin-right:-4px}
  .g-scale-ends{padding:0 4px}
  .g-scale-cells,.g-scale-groups{gap:3px}
  .guide-body .g-scale-cells li{font-size:.9rem;border-radius:6px}
  .guide-body .g-scale-groups li{font-size:.68rem;letter-spacing:-.01em}
  .g-scale-groups span{font-size:.66rem}
  .guide-body th,.guide-body td{padding:10px 10px}
  .guide-body thead th{letter-spacing:.04em}
  .g-calc{padding:20px 16px;border-radius:18px}
  .g-calc-fields{grid-template-columns:minmax(0,1fr)}
  .g-calc-fields .g-calc-field{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:12px}
  .g-calc-result{padding:20px 18px}
  .guide-cta-box{padding:40px 20px}
  .gh-hero{padding:44px 0 40px}
  .gh-group{padding:44px 0}
}