:root{
  --ink:#0e1c2b;--body:#41556d;--mut:#6c7d92;
  --bg:#f7fafc;--card:#fff;
  --acc:#0f7a5c;--acc-d:#0a5a45;--acc-l:#e9f6f1;--acc-line:#bfe6d6;
  --line:#e4eaf1;--line-2:#d6dfe9;--neg:#b3261e;
  --warn-bg:#fff6e6;--warn-tx:#8a5a00;--warn-line:#f2d9a8;
  --maxw:1120px;--maxw-narrow:780px;
  --sh-sm:0 1px 2px rgba(16,32,56,.06);
  --sh-md:0 12px 30px -14px rgba(16,32,56,.20),0 3px 8px -4px rgba(16,32,56,.08);
  --sh-lg:0 44px 84px -34px rgba(16,32,56,.32),0 14px 34px -20px rgba(16,32,56,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--body);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;font-weight:800}
a{color:var(--acc-d)}
svg{display:block}
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--maxw-narrow)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}

/* ---------- motion ---------- */
@keyframes softIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes badgeIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:40;background:rgba(247,250,252,.82);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.top-inner{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.4px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.logo span{color:var(--acc)}
.logo .mark{width:27px;height:27px;border-radius:8px;background:linear-gradient(150deg,var(--acc),var(--acc-d));display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 5px 12px -4px rgba(15,122,92,.6)}
.logo .mark svg{width:16px;height:16px}
.top-right{display:flex;align-items:center;gap:14px}
.badge-private{display:inline-flex;align-items:center;gap:7px;background:var(--acc-l);color:var(--acc-d);font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--acc-line);white-space:nowrap;animation:badgeIn .5s ease both}
.badge-private svg{width:14px;height:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--acc);color:#fff;border:1px solid transparent;border-radius:12px;padding:14px 26px;font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;letter-spacing:.1px;box-shadow:0 10px 22px -10px rgba(15,122,92,.65);transition:background .26s ease,transform .26s ease,box-shadow .26s ease,border-color .26s ease,color .26s ease}
.btn:hover{background:var(--acc-d);transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(15,122,92,.75)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 6px 14px -8px rgba(15,122,92,.6)}
.btn.ghost{background:#fff;color:var(--acc-d);border-color:var(--line-2);box-shadow:var(--sh-sm)}
.btn.ghost:hover{background:#f3faf6;border-color:var(--acc-line);box-shadow:var(--sh-md)}
.btn.small{padding:10px 18px;font-size:14px;border-radius:10px;box-shadow:none}
.btn.small:hover{box-shadow:0 8px 18px -10px rgba(15,122,92,.6)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

/* ---------- hero ---------- */
.hero-sec{background:radial-gradient(120% 80% at 82% -12%,#e9f6f1 0%,rgba(233,246,241,0) 58%)}
.hero{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding:76px 0 88px}
.hero h1{font-size:clamp(34px,4.5vw,54px);letter-spacing:-1.6px;line-height:1.04}
.hero .sub{margin-top:20px;font-size:clamp(16.5px,1.5vw,19px);color:var(--body);max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.trust{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.trust-item{display:inline-flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--body)}
.trust-item svg{width:17px;height:17px;color:var(--acc);flex:none;margin-top:3px}
.trust-item b{color:var(--ink);font-weight:700}

/* ---------- hero mock preview ---------- */
.hero-visual{position:relative;min-width:0}
/* grid items default to min-width:auto, so nowrap preview content can push a
   column wider than the viewport — allow both columns to shrink. */
.hero>.hero-copy,.hero>.hero-visual{min-width:0}
.glow{position:absolute;inset:-10% -8% -14% -8%;background:radial-gradient(58% 52% at 72% 24%,rgba(15,122,92,.18),transparent 70%),radial-gradient(52% 52% at 16% 82%,rgba(15,122,92,.10),transparent 70%);filter:blur(8px);z-index:0}
.mock{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);overflow:hidden;max-width:100%}
.mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfdff,#f3f8fb)}
.dot{width:10px;height:10px;border-radius:50%;background:#dce4ee}
.mock-file{margin-left:10px;font-size:12.5px;font-weight:600;color:var(--mut);letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mock-tag{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-d);background:var(--acc-l);border:1px solid var(--acc-line);padding:3px 9px;border-radius:999px;animation:badgeIn .55s ease .12s both}
.mock-sheet{padding:12px 18px 0;overflow:hidden}
.mock-sheet .tab{display:inline-block;background:var(--acc-l);color:var(--acc-d);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:8px 8px 0 0}
table.mock-table{width:100%;border-collapse:collapse;font-size:13px;max-width:100%}
table.mock-table th{text-align:left;padding:9px 18px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);background:#f6f9fc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table.mock-table td{padding:11px 18px;border-bottom:1px solid #eef3f8;color:#3a4d64;white-space:nowrap;font-variant-numeric:tabular-nums}
table.mock-table tbody tr:last-child td{border-bottom:0}
table.mock-table .r{text-align:right;font-weight:600}
table.mock-table .pos{color:var(--acc-d)}
table.mock-table .neg{color:var(--neg)}
.mock-desc{color:var(--ink);font-weight:600}
.mock-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;background:#fbfdff;border-top:1px solid var(--line);font-size:12.5px;color:var(--acc-d);font-weight:700}
.mock-foot svg{width:15px;height:15px}
.mock-float{position:absolute;z-index:2;left:-16px;bottom:40px;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--sh-md);font-size:13px;font-weight:700;color:var(--ink)}
.mock-float svg{width:16px;height:16px;color:var(--acc)}

/* ---------- section rhythm ---------- */
.sec{padding:88px 0}
.sec.alt{background:linear-gradient(180deg,#fff,#fbfdff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:660px;margin:0 auto 44px;text-align:center}
.sec-head h2{font-size:clamp(26px,3.3vw,36px);letter-spacing:-.9px}
.sec-head p{margin-top:14px;font-size:17px;color:var(--body)}

/* ---------- converter ---------- */
.convert{padding:6px 0 92px}
.tool-head{text-align:center;margin-bottom:26px}
.tool-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.8px}
.tool-head p{margin-top:10px;color:var(--body);font-size:16px}
.convert-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--sh-lg)}
#drop{border:2px dashed var(--line-2);border-radius:16px;padding:52px 24px;text-align:center;cursor:pointer;transition:border-color .28s ease,background .28s ease,box-shadow .28s ease;background:#fbfdff}
#drop:hover,#drop.over{border-color:var(--acc);background:var(--acc-l)}
#drop .drop-ico{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--sh-sm)}
#drop .drop-ico svg{width:22px;height:22px;color:var(--acc)}
#drop .big{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px}
#drop .small{color:var(--mut);font-size:14px}
#drop .drop-priv{margin-top:10px;color:var(--acc-d);font-weight:600}
#file{display:none}
#progress{display:none;margin-top:20px}
.bar{height:8px;background:#e8eef6;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),#14a37a);border-radius:99px;transition:width .2s}
#status{font-size:14px;color:var(--mut);margin-top:9px}
#results{display:none}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 16px}
.chip{background:#eef2f8;border:1px solid #e3ebf4;border-radius:9px;padding:7px 13px;font-size:13.5px;font-weight:600;color:#33475f;animation:softIn .32s ease both}
.chip.ok{background:var(--acc-l);color:var(--acc-d);border-color:var(--acc-line)}
#balancechip{margin:0 0 16px;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;border:1px solid transparent;display:none}
#balancechip.ok{display:block;background:var(--acc-l);color:var(--acc-d);border-color:var(--acc-line);animation:softIn .34s ease both}
#balancechip.warn{display:block;background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-line);animation:softIn .34s ease both}
table.prev{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
table.prev th{text-align:left;padding:10px 12px;background:#f6f9fc;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);border-bottom:1px solid var(--line)}
table.prev td{padding:10px 12px;border-top:1px solid #eef3f8}
table.prev tbody tr:hover{background:#fafcfe}
table.prev td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#results > div[style*="overflow-x"]{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
.neg{color:var(--neg)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
.note{font-size:13px;color:var(--mut)}
#error{display:none;background:#fdecea;color:#8f1d16;border:1px solid #f5c6c0;border-radius:12px;padding:16px 18px;margin-top:16px;font-size:15px}

/* ---------- feature cards ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px;box-shadow:var(--sh-sm);transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s cubic-bezier(.22,.61,.36,1),border-color .32s ease}
@media(hover:hover){.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--acc-line)}}
.feat .ico{width:46px;height:46px;border-radius:13px;background:var(--acc-l);border:1px solid var(--acc-line);color:var(--acc-d);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.feat .ico svg{width:23px;height:23px}
.feat h3{font-size:17px;letter-spacing:-.2px;margin-bottom:9px}
.feat p{font-size:14.5px;color:var(--body)}

/* ---------- how-it-works steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:var(--sh-sm);transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s cubic-bezier(.22,.61,.36,1),border-color .32s ease}
@media(hover:hover){.step:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--acc-line)}}
.step .num{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--acc),var(--acc-d));color:#fff;font-weight:800;font-size:16px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 20px -10px rgba(15,122,92,.8)}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--body)}
@media(min-width:901px){
  .step:not(:last-child)::after{content:"";position:absolute;top:49px;right:-13px;width:22px;height:2px;background:var(--acc-line);border-radius:2px}
}

/* ---------- use cases ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reason{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--sh-sm);transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s cubic-bezier(.22,.61,.36,1),border-color .32s ease}
@media(hover:hover){.reason:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--acc-line)}}
.reason h3{font-size:16px;margin-bottom:9px}
.reason p{font-size:14.5px;color:var(--body)}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;max-width:840px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.faq details[open]{border-color:var(--acc-line);box-shadow:var(--sh-md)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;color:var(--ink);font-size:16px;padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .25s ease}
.faq summary:active{background:#f6f9fc}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,.61,.36,1),margin-top .3s ease;flex:none;margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq details > .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1)}
.faq details[open] > .faq-body{grid-template-rows:1fr}
.faq-body > p{padding:0 22px 20px;color:var(--body);font-size:15px;margin:0;overflow:hidden;min-height:0}
.faq details[open] .faq-body > p{animation:softIn .3s ease}
@starting-style{.faq details[open] > .faq-body{grid-template-rows:0fr}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:60px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-brand .logo{margin-bottom:14px}
.foot-brand p{font-size:14.5px;color:var(--body);max-width:360px}
.foot-privacy{margin-top:12px;color:var(--acc-d);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.foot-privacy svg{width:15px;height:15px}
.foot-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:14px;font-weight:800}
.foot-col a{display:block;font-size:14.5px;color:var(--body);text-decoration:none;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--acc-d)}
.foot-bottom{padding-top:26px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:var(--mut)}

/* ---------- anchor offset for sticky header ---------- */
#convert,#why,#how,#use-cases,#faq,#drop{scroll-margin-top:92px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:48px;padding:56px 0 68px}
  .hero-visual{max-width:540px;width:100%;margin:0 auto}
  .glow{inset:0}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .top-inner{padding:8px 18px}
  .top-right .btn.small{display:none}
  .badge-private{display:none}
  .logo{min-height:44px}
  .sec{padding:60px 0}
  .hero{padding:40px 0 52px}
  .convert{padding:2px 0 60px}
  .convert-card{padding:20px 16px;border-radius:20px}
  #drop{padding:36px 18px}
  #drop .big{font-size:16.5px}
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
  .feat-grid{grid-template-columns:1fr}
  .sec-head{margin-bottom:30px}
  .sec-head p{font-size:16px}
  .mock-sheet{padding:12px 10px 0}
  table.mock-table{font-size:12.5px}
  table.mock-table th{padding:8px 10px}
  table.mock-table td{padding:9px 10px}
  .glow{inset:0}
  .mock-float{left:8px;bottom:48px;font-size:12px;padding:8px 11px}
  table.prev th,table.prev td{padding:8px 9px}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .foot-col a{padding:10px 0}
  .foot-bottom{flex-direction:column;gap:6px}
  #convert,#why,#how,#use-cases,#faq,#drop{scroll-margin-top:96px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   ClearStatement — unified design system (shared across every page)

   Everything above this line is the statement-converter reference sheet,
   copied verbatim so the flagship page cannot drift. The blocks below extend
   the same tokens, type scale, buttons, cards and spacing so index.html,
   quote-calculator and the bank SEO pages read as one product.
   ========================================================================== */

/* ---------- unified primary nav ---------- */
.top-nav{display:flex;align-items:center;gap:2px;margin:0 4px}
.top-nav .nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:15px;font-weight:600;color:var(--body);text-decoration:none;border-radius:10px;transition:color .18s ease,background .18s ease}
.top-nav .nav-link:hover{color:var(--acc-d);background:var(--acc-l)}
.top-nav .nav-link[aria-current="page"]{color:var(--acc-d)}

/* ---------- single-column hero (sales + bank pages) ---------- */
.hero.hero-single{grid-template-columns:1fr;max-width:820px;margin:0 auto;text-align:center;padding:70px 0 72px}
.hero-single .hero-copy{max-width:680px;margin:0 auto}
.hero-single h1{font-size:clamp(30px,4.1vw,48px);letter-spacing:-1.3px}
.hero-single .sub{margin-left:auto;margin-right:auto}
.hero-single .cta-row{justify-content:center}

/* price block on the two sales pages */
.price{font-size:clamp(40px,6.5vw,58px);font-weight:800;color:var(--ink);letter-spacing:-1.6px;line-height:1;margin:30px 0 0}
.price small{display:block;font-size:15px;font-weight:600;color:var(--mut);letter-spacing:0;margin-top:10px}
.hero-single .note{margin-top:18px;font-size:14px;color:var(--mut)}

/* ---------- article (bank SEO pages) ---------- */
.article{font-size:17px}
.article h1{font-size:clamp(30px,4.2vw,46px);letter-spacing:-1.3px;margin:0 0 22px}
.article h2{font-size:clamp(23px,2.8vw,31px);letter-spacing:-.7px;margin:56px 0 14px}
.article h3{font-size:19px;letter-spacing:-.2px;margin:30px 0 8px}
.article p{margin:16px 0;color:var(--body)}
.article a{font-weight:600}
.article ol.steps{padding-left:1.35em;margin:20px 0}
.article ol.steps li{margin:16px 0;padding-left:4px}
.article table{width:100%;min-width:540px;border-collapse:collapse;margin:0;font-size:15px;line-height:1.5}
.article th,.article td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.article th{background:#f6f9fc;color:var(--ink);font-weight:700;font-size:13.5px}
.article tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;max-width:100%;margin:26px 0;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* ---------- policy / legal cards ---------- */
.panels{display:grid;gap:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--sh-sm)}
.panel h2{font-size:19px;letter-spacing:-.2px;margin:0 0 10px}
.panel p{font-size:15.5px;color:var(--body);margin:0}
.panel a{font-weight:600}

/* ---------- closing CTA band ---------- */
.cta{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid var(--line);border-radius:20px;padding:42px 28px;margin:60px 0 0;text-align:center;box-shadow:var(--sh-md)}
.cta p{font-size:17px;color:var(--body);margin:0 0 22px}
.cta p strong{display:block;color:var(--ink);font-weight:800;font-size:clamp(20px,2.6vw,25px);letter-spacing:-.4px;margin-bottom:8px}
.cta .btn{margin-top:0}

/* ---------- anchor offset for the sticky header ---------- */
:where([id]){scroll-margin-top:92px}

/* ---------- unified responsive behavior ---------- */
@media(max-width:860px){
  .badge-private{display:none}
}
@media(max-width:640px){
  .top-nav{display:none}
  .top-right .btn.small{display:none}
  .hero.hero-single{padding:44px 0 52px}
  .hero-single .price{margin-top:22px}
  .article{font-size:16.5px}
  .article h2{margin-top:42px}
  .panel{padding:22px 18px}
  .cta{padding:32px 20px}
  .foot-col a{padding:11px 0}
}

/* ---------- shared code styling + section footnote ---------- */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:#eef2f8;border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:var(--ink)}
.section-note{max-width:760px;margin:36px auto 0;text-align:center;color:var(--body);font-size:16px}