/* ==========================================================================
   Resources section (/resources and /resources/<slug>), Quiet Waves 2.0.
   Loaded after site.css and nav.css by the pages tools/build-resources.cjs
   writes. Uses site.css tokens only: one typeface, ink on paper, teal on the
   small marks, hairline rules.
   ========================================================================== */

/* ── hero ─────────────────────────────────────────────────────────────── */
.r-hero{padding:72px 0 40px}
.r-hero h1{font-size:clamp(38px,4.6vw,60px);margin-bottom:24px}
.r-hero .lead{max-width:38em}
.r-lead{color:var(--ink)}
/* The article title lines up with the text column below it (TOC 230 + gap 64). */
.r-hero-in{margin-left:294px;max-width:760px}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.r-dot{width:4px;height:4px;border-radius:50%;background:var(--line);display:inline-block}
.r-cat{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--teal-ink)}
.r-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* ── article layout: contents on the left, prose on the right ─────────── */
.r-body-sec{padding-top:24px}
.r-layout{display:grid;grid-template-columns:230px minmax(0,760px);gap:64px;align-items:start}
.r-toc{position:sticky;top:96px;font-size:15px}
.r-toc-h{font-weight:600;color:var(--ink);margin-bottom:12px}
.r-toc ol{list-style:none;border-left:1px solid var(--line)}
.r-toc li a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.4}
.r-toc li a:hover{color:var(--ink);border-left-color:var(--teal)}

/* ── prose ────────────────────────────────────────────────────────────── */
.r-prose{font-size:18.5px;line-height:1.72;color:var(--ink-2)}
.r-sec{padding-top:56px;scroll-margin-top:90px}
.r-sec:first-of-type{padding-top:48px}
.r-prose h2{font-size:clamp(28px,2.8vw,36px);margin-bottom:20px;color:var(--ink)}
.r-prose p{margin-bottom:20px}
.r-prose b,.r-prose strong{color:var(--ink);font-weight:600}
.r-prose a{color:var(--ink);text-underline-offset:3px}
.r-prose ul,.r-prose ol{margin:0 0 24px;padding-left:24px}
.r-prose li{margin-bottom:10px;padding-left:4px}
.r-prose li::marker{color:var(--teal-ink);font-weight:600}

.r-keys{border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px;background:var(--soft)}
.r-keys-h{font-weight:600;color:var(--ink);margin-bottom:12px}
.r-keys ul{margin:0;padding-left:22px}
.r-keys li{margin-bottom:8px;color:var(--ink)}
.r-keys li:last-child{margin-bottom:0}

.r-note{border-left:3px solid var(--teal);padding:4px 0 4px 20px;margin:4px 0 24px;color:var(--ink);font-weight:500}
.r-formula{border:1px solid var(--line);border-radius:12px;padding:16px 20px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;overflow-x:auto}

.r-table{overflow-x:auto;margin:4px 0 28px;border:1px solid var(--line);border-radius:14px}
.r-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.r-table th,.r-table td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.r-table thead th{background:var(--soft);color:var(--ink);font-weight:600;font-size:15px}
.r-table tbody th{color:var(--ink);font-weight:600}
.r-table tbody tr:last-child>*{border-bottom:0}

.r-prose .faq{margin-top:8px}

/* ── cards (hub and "more resources") ─────────────────────────────────── */
.r-group{padding:48px 0}
.r-group+.r-group{padding-top:0}
.r-group-h{font-size:clamp(24px,2.4vw,30px);margin-bottom:24px}
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.r-card{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.r-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.r-card h3{font-size:22px;line-height:1.25}
.r-card p{font-size:16px;color:var(--ink-2);line-height:1.55;flex:1}
.r-card-foot{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .r-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .r-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .r-hero-in{margin-left:0}
  .r-toc{position:static;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
}
@media (max-width:600px){
  .r-hero{padding:48px 0 24px}
  .r-grid{grid-template-columns:1fr}
  .r-keys{padding:22px 20px}
  .r-prose{font-size:17.5px}
  .r-table th,.r-table td{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.r-card{transition:none}.r-card:hover{transform:none}}

/* ==========================================================================
   Comparison pages (/resources/solmex-vs-*), rendered by compareMain() in
   tools/build-resources.cjs. Fact-based comparisons: a navy hero with a
   "which suits you" card, module-by-module facts, a scored table, where the
   competitor is strong, the origin band, field cards, the price meter beside
   the worked example, and switch steps.
   Status marks differ in SHAPE as well as colour, so the table reads in mono.
   ========================================================================== */

/* ── hero ─────────────────────────────────────────────────────────────── */
.vs-hero{background:radial-gradient(1200px 520px at 85% -10%,rgba(1,170,149,.28),transparent 60%),linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:64px 0 88px;overflow:hidden}
.vs-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.vs-hero .crumb,.vs-hero .crumb a{color:rgba(255,255,255,.62)}
.vs-hero .crumb a:hover{color:#fff}
.vs-hero h1{color:#fff;font-size:clamp(40px,5vw,66px);margin-bottom:22px}
.vs-hero .lead{color:rgba(255,255,255,.84);max-width:32em;font-size:clamp(18px,1.4vw,20px)}
.vs-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.vs-hero .r-meta{color:rgba(255,255,255,.6)}
.vs-hero .r-cat{color:#7FE3D4}
.vs-hero .r-dot{background:rgba(255,255,255,.3)}

/* The origin claim, above the title: the first thing a reader is told. */
.vs-kicker{color:var(--gold);font-size:17px}
.vs-kicker::before{background:var(--gold)}

.vs-meter{margin:0;background:#fff;color:var(--ink);border-radius:24px;padding:30px 30px 26px;box-shadow:0 30px 60px -24px rgba(0,8,40,.55)}
.vs-meter figcaption{font-size:15px;font-weight:600;color:var(--ink-3);margin-bottom:22px}
.vs-bar+.vs-bar{margin-top:18px}
.vs-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:16px;font-weight:600}
.vs-bar-top b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vs-track{height:14px;border-radius:999px;background:var(--soft);overflow:hidden}
.vs-track i{display:block;height:100%;border-radius:inherit;transform-origin:left;animation:vs-grow 1s cubic-bezier(.2,.7,.2,1) .2s both}
.vs-bar-solmex .vs-track i{background:linear-gradient(90deg,var(--teal),#2BC9B3)}
.vs-bar-them .vs-track i{background:#B9C0D0}
.vs-bar-them .vs-bar-top{color:var(--ink-2)}
.vs-save{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:clamp(28px,2.8vw,36px);font-weight:700;letter-spacing:-.025em;color:var(--teal-ink);line-height:1.1}
.vs-save-sub{margin-top:8px;font-size:15px;color:var(--ink-2)}
.vs-save-sub a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
@keyframes vs-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── verdict ──────────────────────────────────────────────────────────── */
.vs-verdict{padding:64px 0 16px}
.vs-verdict-h{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink);max-width:28em;margin-bottom:32px}
.vs-why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vs-why-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;font-size:17px;line-height:1.6;color:var(--ink-2)}
.vs-why-card b{display:block;color:var(--ink);font-size:20px;line-height:1.3;margin-bottom:8px;letter-spacing:-.01em}
.vs-num{display:inline-block;font-size:14px;font-weight:700;color:var(--teal-ink);letter-spacing:.08em;margin-bottom:14px}

/* ── scored table ─────────────────────────────────────────────────────── */
.vs-table-sec{padding-top:72px;padding-bottom:72px}
.vs-table-sec .sec-head{margin-bottom:28px}
.vs-table{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.vs-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;table-layout:fixed}
.vs-table th,.vs-table td{text-align:left;vertical-align:top;padding:18px 22px;border-bottom:1px solid var(--line)}
.vs-table tbody tr:last-child>*{border-bottom:0}
.vs-table thead th{font-size:18px;font-weight:700;color:var(--ink);padding-top:22px;padding-bottom:18px;background:#fff;vertical-align:bottom}
.vs-table thead th:first-child{width:26%}
.vs-table tbody th{font-weight:600;color:var(--ink);font-size:16px}
.vs-table .vs-col-solmex{background:rgba(1,170,149,.06);box-shadow:inset 1.5px 0 0 rgba(1,170,149,.35),inset -1.5px 0 0 rgba(1,170,149,.35)}
.vs-table thead .vs-col-solmex{background:rgba(1,170,149,.1)}
.vs-th-badge{display:block;width:max-content;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--gold);border-radius:999px;padding:4px 10px;margin-bottom:8px}
.vs-col-them{color:var(--ink-2)}
.vs-col-solmex{color:var(--ink)}
.vs-cell{display:block;margin-top:6px}
.vs-cell b{font-weight:600;color:var(--ink)}

.vs-mark{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.01em}
.vs-mark svg{width:20px;height:20px;flex:none}
.vs-yes{color:var(--teal-ink)}
.vs-partial{color:var(--amber)}
.vs-costlier{color:#B4501A}
.vs-quote{color:var(--blue)}
.vs-none{color:var(--ink-3)}
.vs-col-solmex .vs-mark>span{display:none}
/* Solmex's mark is solid, so the column reads as the answer at a glance. */
.vs-col-solmex .vs-mark svg{width:22px;height:22px;fill:var(--teal);stroke:#fff;stroke-width:2.2}
.vs-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.vs-legend .vs-mark{font-weight:600;font-size:14px}
.vs-source{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:52em}
.vs-source a{color:var(--ink-2);text-underline-offset:3px}

/* ── origin band ──────────────────────────────────────────────────────── */
.vs-origin{background:var(--ink);color:#fff;padding:96px 0;position:relative;overflow:hidden}
.vs-origin::before{content:"";position:absolute;right:-10%;bottom:-60%;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(254,190,32,.16),transparent 65%)}
.vs-origin-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.vs-origin h2{color:#fff;font-size:clamp(34px,4vw,52px)}
.vs-eyebrow-gold{color:var(--gold)}
.vs-eyebrow-gold::before{background:var(--gold)}
.vs-origin-p{font-size:clamp(18px,1.5vw,20px);line-height:1.7;color:rgba(255,255,255,.82)}
.vs-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.vs-chips li{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:15px;font-weight:600;color:#fff}
.vs-chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* ── field cards ──────────────────────────────────────────────────────── */
.vs-field .sec-head{margin-bottom:40px}
.vs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vs-card{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.vs-card:hover{border-color:rgba(1,170,149,.5);transform:translateY(-2px);box-shadow:var(--shadow)}
.vs-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(1,170,149,.1);color:var(--teal-ink)}
.vs-ico svg{width:26px;height:26px}
.vs-problem{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.vs-answer{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.vs-answer b{color:var(--teal-ink);font-weight:700}

/* ── which one suits you (hero card) ──────────────────────────────────── */
.vs-choose{background:#fff;color:var(--ink);border-radius:24px;padding:30px;box-shadow:0 30px 60px -24px rgba(0,8,40,.55)}
.vs-choose-h{font-size:15px;font-weight:600;color:var(--ink-3);margin-bottom:18px}
.vs-choose-g+.vs-choose-g{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.vs-choose-gh{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px}
.vs-choose-g ul{list-style:none;display:grid;gap:8px}
.vs-choose-g li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.vs-choose-g li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:#B9C0D0}
.vs-choose-solmex li::before{background:var(--teal)}

/* ── module by module ─────────────────────────────────────────────────── */
.vs-mods .sec-head{margin-bottom:36px}
.vs-mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vs-mod{display:flex;flex-direction:column;gap:16px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.vs-mod-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vs-mod-top h3{font-size:21px;margin:0;flex:1 1 auto}
.vs-mod-plan{font-size:13px;font-weight:700;color:var(--teal-ink);background:rgba(1,170,149,.1);border-radius:999px;padding:4px 11px;white-space:nowrap}
.vs-mod-solmex{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.vs-mod-solmex b{color:var(--teal-ink);font-weight:700}
.vs-mod-them{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.vs-mod-them-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:600;color:var(--ink);margin-bottom:6px}

/* ── where the competitor is strong ───────────────────────────────────── */
.vs-strong .sec-head{margin-bottom:32px}
.vs-strong-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vs-strong-card{padding:26px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.vs-strong-card h3{font-size:19px;margin-bottom:10px}
.vs-strong-card p{font-size:16px;line-height:1.6;color:var(--ink-2)}

/* ── worked example ───────────────────────────────────────────────────── */
.vs-cost{padding:88px 0}
.vs-cost-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.vs-cost h2{font-size:clamp(28px,3vw,40px);margin-bottom:18px}
.vs-cost-p{font-size:18px;line-height:1.72;color:var(--ink-2)}
.vs-cost .vs-meter{box-shadow:var(--shadow);border:1px solid var(--line)}

/* ── switch steps ─────────────────────────────────────────────────────── */
.vs-steps .sec-head{margin-bottom:36px}
.vs-step-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vs-step-list li{padding:28px;border-radius:var(--radius);background:var(--soft)}
.vs-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:18px;margin-bottom:18px}
.vs-step-list h3{font-size:21px;margin-bottom:10px}
.vs-step-list p{font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* ── faq ──────────────────────────────────────────────────────────────── */
.vs-faq{padding-top:24px}
.vs-faq h2{font-size:clamp(28px,3vw,40px);margin-bottom:20px}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .vs-hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .vs-meter{max-width:560px}
  .vs-cards{grid-template-columns:repeat(2,1fr)}
  .vs-origin-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .vs-choose{max-width:560px}
  .vs-strong-grid{grid-template-columns:repeat(2,1fr)}
  .vs-cost-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){
  .vs-why,.vs-step-list,.vs-mod-grid,.vs-strong-grid{grid-template-columns:1fr}
  /* The table becomes one card per row: the feature, then each product
     under its own name. Three columns do not fit a phone. */
  .vs-table table,.vs-table tbody,.vs-table tr,.vs-table th,.vs-table td{display:block;width:auto}
  .vs-table thead{display:none}
  .vs-table tbody tr{border-bottom:1px solid var(--line);padding:4px 0 10px}
  .vs-table tbody tr:last-child{border-bottom:0}
  .vs-table th,.vs-table td{border-bottom:0;padding:10px 18px}
  .vs-table tbody th{padding-top:16px;font-size:17px}
  .vs-table td::before{content:attr(data-name);display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  .vs-table .vs-col-solmex{margin:0 12px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(1,170,149,.3)}
}
@media (max-width:600px){
  .vs-hero{padding:44px 0 56px}
  .vs-meter{padding:24px 20px 20px;border-radius:20px}
  .vs-cards{grid-template-columns:1fr}
  .vs-card,.vs-why-card,.vs-step-list li,.vs-mod,.vs-strong-card{padding:22px}
  .vs-choose{padding:24px 20px;border-radius:20px}
  .vs-origin{padding:64px 0}
  .vs-verdict{padding-top:48px}
  .vs-hero .ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.vs-track i{animation:none}.vs-card{transition:none}.vs-card:hover{transform:none}}

/* ==========================================================================
   Long-form article extras: photographs, inline SVG charts, a stat row, the
   savings calculator and the inline demo form. Rendered by block() and
   demoSection() in tools/build-resources.cjs. Charts use the five brand
   colours and print every value as text beside its mark.
   ========================================================================== */

/* ── figures ──────────────────────────────────────────────────────────── */
.r-fig{margin:8px 0 32px}
.r-fig img{width:100%;height:auto;border-radius:16px;background:var(--soft)}
.r-fig figcaption,.r-chart figcaption{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-3)}
.r-credit{display:block;margin-top:2px;font-size:13px}
.r-credit a{color:var(--ink-3)}

.r-chart{margin:8px 0 32px;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;background:#fff}
.r-chart svg{width:100%;height:auto;overflow:visible}
.r-chart svg text{font-family:var(--sans)}
.r-chart svg text:not([fill]){fill:var(--ink-2)}
.r-chart .c-h{font-size:15px;font-weight:600}
.r-chart .c-h:not([fill]){fill:var(--ink)}
.r-chart .c-v{font-weight:700}
.r-chart .c-v:not([fill]){fill:var(--ink)}
.r-chart .c-axis{stroke:var(--line);stroke-width:1}
.r-chart .c-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}

/* ── stat row ─────────────────────────────────────────────────────────── */
.r-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 32px}
.r-stat{border:1px solid var(--line);border-radius:16px;padding:20px 20px 16px;display:flex;flex-direction:column;gap:6px;background:#fff}
.r-stat b{font-size:clamp(28px,3vw,36px);line-height:1.05;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.r-stat:nth-child(2) b{color:var(--teal-ink)}
.r-stat:nth-child(3) b{color:var(--red)}
.r-stat span{font-size:15px;line-height:1.45;color:var(--ink-2)}
.r-stat-src{margin-top:auto;padding-top:6px;font-size:13px;color:var(--ink-3)!important}

/* ── savings calculator ───────────────────────────────────────────────── */
.r-calc{margin:8px 0 32px;border-radius:20px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:28px}
.r-calc h3{color:#fff;font-size:22px;margin-bottom:6px}
.r-calc>p{color:rgba(255,255,255,.75);font-size:16px;margin-bottom:20px}
.r-calc-in{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
.r-calc label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.r-calc input{width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:10px 12px;font-size:17px;font-variant-numeric:tabular-nums}
.r-calc input:focus{outline:2px solid var(--gold);outline-offset:1px}
.r-calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.r-calc-out div{background:#fff;border-radius:14px;padding:16px;color:var(--ink)}
.r-calc-out span{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:6px}
.r-calc-out b{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--teal-ink)}
.r-calc-out div:last-child b{color:var(--navy)}
.r-calc-note{margin-top:16px;font-size:14px!important;color:rgba(255,255,255,.7)!important}
.r-calc-note a{color:#fff}

/* ── inline demo form ─────────────────────────────────────────────────── */
.r-demo{background:var(--soft);border-top:1px solid var(--line)}
.r-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.r-demo h2{font-size:clamp(30px,3.2vw,42px);margin-bottom:16px}
.r-demo-list{margin-top:20px;padding-left:22px;color:var(--ink-2)}
.r-demo-list li{margin-bottom:10px}
.r-demo-list li::marker{color:var(--teal-ink)}
.r-demo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.r-demo-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.r-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.r-f label{font-size:14px;font-weight:600;color:var(--ink)}
.r-f input,.r-f select,.r-f textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.r-f textarea{resize:vertical}
.r-f input:focus,.r-f select:focus,.r-f textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
.r-f.bad input,.r-f.bad select,.r-f.bad textarea{border-color:var(--red)}
.r-err{font-size:13px;color:var(--red);min-height:0}
.r-demo .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.r-cf{margin:4px 0 12px}
.r-demo-btn{width:100%;justify-content:center;border:0;cursor:pointer}
.r-demo-btn:disabled{opacity:.7;cursor:wait}
.r-demo-foot{margin-top:12px;font-size:14px;color:var(--ink-3);text-align:center}
.r-demo-status{margin-top:8px;font-size:14px;color:var(--red);text-align:center}
.r-demo-done h3{font-size:24px;margin-bottom:8px;color:var(--teal-ink)}
.r-demo-done:focus{outline:none}

@media (max-width:900px){
  .r-demo-grid{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:600px){
  .r-stats{grid-template-columns:1fr}
  .r-calc{padding:22px 18px}
  .r-calc-in,.r-calc-out{grid-template-columns:1fr}
  .r-demo-row{grid-template-columns:1fr;gap:0}
  .r-demo-card{padding:22px 18px}
  .r-chart{padding:16px 12px 14px}
  .r-chart-in{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .r-chart-in svg{min-width:600px}
}
/* A download box (the checklist series): the article's list as a file. */
.r-dl{margin:8px 0 32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);padding:24px 28px}
.r-dl-h{font-weight:700;color:var(--ink);margin-bottom:4px}
.r-dl-p{color:var(--ink-2);margin-bottom:16px}
@media (max-width:560px){.r-dl{padding:20px}}
.r-dl-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.r-dl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.r-dl-foot{font-size:13px;color:var(--ink-3);margin:12px 0 0}
.r-dl-status{margin-top:8px;font-size:14px;color:var(--red)}
.r-dl-done:focus{outline:none}
.r-dl-done .r-dl-h{color:var(--teal-ink)}
@media (max-width:760px){.r-dl-row{grid-template-columns:1fr}.r-dl #rlSubmit{width:100%;justify-content:center}}