/* RoamRoster design system: passport bright, paper white, sunlit ochre, deep teal.
   Light surfaces only. Contrast is built from type scale, rules, borders and tints. */

:root{
  --bg:#FCFAF4;
  --surface:#FFFFFF;
  --ink:#1E2426;
  --primary:#1F6B6B;
  --accent:#E9B44C;
  --muted:#61686B;

  --primary-050:#F0F6F5;
  --primary-100:#DFEDEB;
  --primary-200:#C3DEDA;
  --primary-300:#9CC9C4;
  --accent-050:#FDF6E7;
  --accent-100:#FAEBCB;
  --accent-200:#F4D89C;
  --paper:#F7F3E8;
  --line:#E2DCCB;
  --line-strong:#CFC7B1;

  --ring:0 0 0 3px rgba(233,180,76,.55);
  --shadow-sm:0 1px 2px rgba(30,36,38,.06);
  --shadow-md:0 10px 26px rgba(30,36,38,.08);
  --shadow-lg:0 22px 50px rgba(30,36,38,.10);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  --f-display:"Kaisei Decol", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:"Overpass", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --t-xs:.78rem; --t-sm:.9rem; --t-base:1.0rem; --t-md:1.09rem;
  --t-lg:1.32rem; --t-xl:1.72rem; --t-2xl:2.25rem; --t-3xl:2.95rem; --t-4xl:3.7rem;

  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  font-weight:400;
  /* paper grain: faint ochre dots on the travel journal ground */
  background-image:
    radial-gradient(rgba(233,180,76,.16) 1px, transparent 1.2px),
    radial-gradient(rgba(31,107,107,.09) 1px, transparent 1.2px);
  background-size:22px 22px, 22px 22px;
  background-position:0 0, 11px 11px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.14;letter-spacing:-.01em;margin:0 0 var(--sp-4)}
h1{font-size:clamp(2.15rem,5.2vw,var(--t-4xl))}
h2{font-size:clamp(1.75rem,3.6vw,var(--t-3xl))}
h3{font-size:var(--t-lg)}
p{margin:0 0 var(--sp-4)}
ul{margin:0 0 var(--sp-4);padding-left:1.1rem}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--sp-4);top:-4rem;z-index:80;background:var(--accent);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:var(--r-pill);font-weight:700;transition:top .2s ease}
.skip:focus{top:var(--sp-4)}

/* ---------- stamp badge motif ---------- */
.stamp{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--primary);
  padding:.42rem .95rem;background:var(--primary-050);
  border:1.5px solid var(--primary-200);
  border-radius:var(--r-sm);
  -webkit-mask-image:radial-gradient(circle 3.2px at 3.2px 50%, transparent 98%, #000 100%),radial-gradient(circle 3.2px at calc(100% - 3.2px) 50%, transparent 98%, #000 100%),linear-gradient(#000,#000);
  mask-image:radial-gradient(circle 3.2px at 3.2px 50%, transparent 98%, #000 100%),radial-gradient(circle 3.2px at calc(100% - 3.2px) 50%, transparent 98%, #000 100%),linear-gradient(#000,#000);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transform:rotate(-1.1deg);
}
.stamp--ochre{color:#7A5410;background:var(--accent-050);border-color:var(--accent-200)}

/* ---------- dotted route line ---------- */
.route{
  position:relative;height:2px;margin:var(--sp-6) 0;
  background-image:linear-gradient(90deg, var(--primary-300) 0 10px, transparent 10px 20px);
  background-size:20px 2px;background-repeat:repeat-x;
  animation:route-draw 1.4s ease-out both;
}
@keyframes route-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.route::after{content:"";position:absolute;right:0;top:-4px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--accent-200)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-weight:700;font-size:var(--t-sm);letter-spacing:.02em;
  padding:.85rem 1.5rem;border-radius:var(--r-pill);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn--primary{background:var(--primary);color:var(--surface);box-shadow:0 4px 0 rgba(31,107,107,.28)}
.btn--primary:hover{color:var(--surface);transform:translateY(2px);box-shadow:0 2px 0 rgba(31,107,107,.28)}
.btn--ghost{background:var(--surface);color:var(--primary);border-color:var(--primary-200);box-shadow:var(--shadow-sm)}
.btn--ghost:hover{background:var(--primary-050);color:var(--primary)}
.btn--ochre{background:var(--accent);color:#3A2A06;box-shadow:0 4px 0 rgba(184,138,45,.4)}
.btn--ochre:hover{color:#3A2A06;transform:translateY(2px);box-shadow:0 2px 0 rgba(184,138,45,.4)}
.btn--sm{padding:.6rem 1.1rem;font-size:var(--t-xs)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .2s ease, background .2s ease}
.site-header.is-stuck{box-shadow:var(--shadow-md);background:var(--surface)}
.header-in{display:flex;align-items:center;gap:var(--sp-5);padding:.7rem 0}
.brandmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:1.22rem;letter-spacing:-.01em}
.brandmark svg{flex:0 0 auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.nav a{color:var(--ink);text-decoration:none;font-size:var(--t-sm);font-weight:600;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--accent);color:var(--primary)}
.header-cta{display:none}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
@media (max-width:899px){
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:var(--sp-4) 1.25rem;display:none}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:.2rem}
  .nav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line)}
}
@media (min-width:900px){
  .nav-toggle{display:none}
  .header-cta{display:inline-flex}
}

/* ---------- sections ---------- */
main section{padding:var(--sp-8) 0}
.section-head{max-width:60ch;margin-bottom:var(--sp-6)}
.section-head p{color:var(--muted);font-size:var(--t-md)}
.band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band--white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lede{font-size:var(--t-md);color:var(--muted);max-width:62ch}

/* ---------- hero ---------- */
.hero{padding-top:var(--sp-7)}
.hero-grid{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-8)}}
.hero h1 em{font-style:normal;color:var(--primary);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.16em;
  background:linear-gradient(90deg, var(--accent-200), var(--accent));border-radius:var(--r-pill)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-6)}
.trust{display:grid;gap:var(--sp-3);list-style:none;padding:0;margin:0;border-top:1px dashed var(--line-strong);padding-top:var(--sp-4)}
@media (min-width:640px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust li{font-size:var(--t-sm);font-weight:600;display:flex;gap:.55rem;align-items:flex-start;color:var(--ink)}
.trust li::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.35rem;border-radius:3px;
  background:var(--accent-100);border:1.5px solid var(--accent);transform:rotate(12deg)}
.photo-frame{position:relative;background:var(--surface);padding:12px;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.photo-frame img{border-radius:var(--r-md)}
.photo-frame::after{content:"";position:absolute;inset:6px;border:1.5px dashed var(--primary-200);border-radius:var(--r-md);pointer-events:none}
.photo-tag{position:absolute;right:-14px;bottom:22px;z-index:2;background:var(--accent);color:#3A2A06;
  font-weight:700;font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  padding:.5rem .9rem;border-radius:var(--r-sm);transform:rotate(-4deg);box-shadow:var(--shadow-sm)}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--sp-5)}
@media (min-width:680px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:680px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.5rem}
.card p{margin-bottom:0;color:var(--muted);font-size:var(--t-sm)}
.card--pain{border-left:4px solid var(--accent)}
.cost{display:inline-block;margin-top:var(--sp-4);font-family:var(--f-display);font-size:var(--t-lg);color:var(--primary)}

.icon-stamp{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--primary-050);border:1.5px dashed var(--primary-200);margin-bottom:var(--sp-4);color:var(--primary)}
.icon-stamp svg{width:26px;height:26px}
.feature:hover .icon-stamp{background:var(--accent-050);border-color:var(--accent-200);color:#7A5410}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:var(--sp-5)}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6) var(--sp-5) var(--sp-5)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-18px;left:var(--sp-5);
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#3A2A06;font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent-200)}
@media (min-width:900px){
  .step::after{content:"";position:absolute;top:0;right:-26px;width:26px;height:2px;
    background-image:linear-gradient(90deg,var(--primary-300) 0 6px,transparent 6px 12px);background-size:12px 2px}
  .step:last-child::after{display:none}
}
.split{display:grid;gap:var(--sp-7);align-items:center;margin-top:var(--sp-7)}
@media (min-width:960px){.split{grid-template-columns:.95fr 1.05fr}}

/* ---------- outcomes ---------- */
.outcome{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);border-top:5px solid var(--primary-200)}
.outcome .num{font-family:var(--f-display);font-size:var(--t-3xl);line-height:1;color:var(--primary);display:block;margin-bottom:.35rem}
.outcome p{color:var(--muted);font-size:var(--t-sm);margin-bottom:0}

/* ---------- testimonials ---------- */
.testimonial{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6) var(--sp-5) var(--sp-5);margin:0;position:relative;box-shadow:var(--shadow-sm)}
.testimonial::before{content:"";position:absolute;top:-14px;left:var(--sp-5);width:34px;height:34px;border-radius:50%;
  border:2px dashed var(--accent);background:var(--accent-050)}
.testimonial p{font-size:var(--t-md);line-height:1.6}
.testimonial figcaption{font-size:var(--t-sm);color:var(--muted);border-top:1px dashed var(--line-strong);padding-top:var(--sp-3)}
.testimonial figcaption strong{color:var(--ink);display:block;font-size:var(--t-base)}
.results{display:grid;gap:var(--sp-4);margin-top:var(--sp-6);padding:var(--sp-5);background:var(--primary-050);border:1.5px dashed var(--primary-200);border-radius:var(--r-md)}
@media (min-width:760px){.results{grid-template-columns:repeat(3,1fr);text-align:center}}
.results .num{display:block;font-family:var(--f-display);font-size:var(--t-2xl);color:var(--primary)}
.results span.lbl{font-size:var(--t-sm);color:var(--muted)}

/* ---------- pricing ---------- */
.tiers{display:grid;gap:var(--sp-5);align-items:start}
@media (min-width:940px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;height:100%}
.tier--best{border:2px solid var(--primary);box-shadow:var(--shadow-md);position:relative}
.tier--best::before{content:"Recommended";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  background:var(--accent);color:#3A2A06;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .9rem;border-radius:var(--r-sm)}
.tier h3{font-size:var(--t-xl);margin-bottom:.2rem}
.price{font-family:var(--f-display);font-size:var(--t-3xl);color:var(--ink);line-height:1}
.price small{font-family:var(--f-body);font-size:var(--t-sm);color:var(--muted);font-weight:600}
.tier ul{list-style:none;padding:0;margin:var(--sp-5) 0;display:grid;gap:.6rem}
.tier li{font-size:var(--t-sm);display:flex;gap:.55rem;align-items:flex-start}
.tier li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.5rem;border-radius:2px;background:var(--primary-200);transform:rotate(45deg)}
.tier .btn{margin-top:auto;width:100%}
.billing-note{margin-top:var(--sp-5);font-size:var(--t-sm);color:var(--muted);text-align:center}

/* ---------- FAQ ---------- */
.faq{max-width:840px}
.faq-item{border-bottom:1px dashed var(--line-strong)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  background:transparent;border:0;padding:1.15rem 0;text-align:left;cursor:pointer;
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:700;color:var(--ink)}
.faq-q .mark{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);border:1.5px solid var(--primary-200);
  background:var(--primary-050);color:var(--primary);display:grid;place-items:center;font-family:var(--f-body);font-size:1.2rem;line-height:1}
.faq-q[aria-expanded="true"] .mark{background:var(--accent-050);border-color:var(--accent-200);color:#7A5410}
.faq-a{padding:0 0 1.2rem;color:var(--muted);max-width:70ch}
.faq-a[hidden]{display:none}

/* ---------- contact ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-md)}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-weight:700;font-size:var(--t-sm);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:var(--t-base);color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:.7rem .85rem}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:var(--ring);outline:none}
.field [aria-invalid="true"]{border-color:#A3341F}
.err{display:block;color:#8C2C1B;font-size:var(--t-sm);font-weight:600;margin-top:.3rem}
.err:empty{display:none}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm)}
.consent input{width:auto;margin-top:.35rem}
@media (min-width:720px){.two-up{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}}
.form-aside{background:var(--accent-050);border:1.5px dashed var(--accent-200);border-radius:var(--r-md);padding:var(--sp-5)}
.form-aside ul{list-style:none;padding:0;display:grid;gap:.7rem;font-size:var(--t-sm)}
.form-aside li{padding-left:1.4rem;position:relative}
.form-aside li::before{content:"";position:absolute;left:0;top:.45rem;width:10px;height:10px;border:2px solid var(--primary);border-radius:50%}

/* ---------- author byline ---------- */
.byline{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--primary-200);border-radius:var(--r-md);padding:var(--sp-5);margin-top:var(--sp-7)}
.byline p{margin:0;font-size:var(--t-sm);color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:var(--paper);border-top:2px solid var(--line-strong);padding:var(--sp-8) 0 var(--sp-5);margin-top:var(--sp-8)}
.footer-grid{display:grid;gap:var(--sp-6)}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.site-footer h2{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.16em;font-family:var(--f-body);font-weight:700;color:var(--primary)}
.site-footer ul{list-style:none;padding:0;display:grid;gap:.55rem}
.site-footer a{color:var(--ink);text-decoration:none;font-size:var(--t-sm)}
.site-footer a:hover{color:var(--primary);text-decoration:underline}
.socials{display:flex;gap:.6rem;margin-top:var(--sp-4)}
.socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--surface);border:1.5px solid var(--line-strong);color:var(--primary)}
.socials a:hover{background:var(--primary-050)}
.socials svg{width:18px;height:18px}
.footer-base{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px dashed var(--line-strong);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;font-size:var(--t-sm);color:var(--muted)}

/* ---------- prose pages ---------- */
.prose{max-width:76ch}
.prose h2{font-size:var(--t-xl);margin-top:var(--sp-7)}
.prose h3{font-size:var(--t-lg);margin-top:var(--sp-5)}
.page-hero{background:var(--primary-050);border-bottom:1px solid var(--line);padding:var(--sp-7) 0 var(--sp-6)}
.map-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5)}
.map-group ul{list-style:none;padding:0;display:grid;gap:.8rem}
.map-group li span{display:block;color:var(--muted);font-size:var(--t-sm)}
.author-grid{display:grid;gap:var(--sp-6)}
@media (min-width:900px){.author-grid{grid-template-columns:300px 1fr}}
.portrait{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;box-shadow:var(--shadow-md)}
.portrait img{border-radius:var(--r-sm)}

/* ---------- reveal motion ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
.press{transition:transform .16s ease}
.press:hover{transform:rotate(-1.2deg) scale(.985)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .route{animation:none}
}

/* ================= The Roster: magazine ================= */
/* Light only, built from the same tokens as the rest of the site. */

.mag-crumb{border-bottom:1px solid var(--line);background:var(--paper);padding:.7rem 0}
.mag-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;font-size:var(--t-xs)}
.mag-crumb li{display:flex;gap:.45rem;align-items:center;color:var(--muted);max-width:100%}
.mag-crumb li+li::before{content:"";width:14px;height:2px;flex:0 0 auto;
  background-image:linear-gradient(90deg,var(--primary-300) 0 4px,transparent 4px 8px);background-size:8px 2px}
.mag-crumb a{color:var(--primary);text-decoration:none;font-weight:600}
.mag-crumb a:hover{text-decoration:underline}
.mag-crumb [aria-current]{font-weight:600;color:var(--ink)}

/* ---------- masthead of the index ---------- */
.mag-masthead{padding:var(--sp-7) 0 var(--sp-5)}
.mag-masthead h1{margin-top:var(--sp-4);max-width:16ch}
.mag-masthead .route{margin-bottom:0}
.mag-dek{font-family:var(--f-body);font-size:var(--t-md);line-height:1.6;color:var(--muted);max-width:62ch}
.mag-masthead-note{font-size:var(--t-sm);color:var(--muted);max-width:62ch;
  border-left:3px solid var(--accent-200);padding-left:var(--sp-4)}

/* ---------- index grid and cards ---------- */
.mag-index{padding-top:var(--sp-6)}
.mag-grid{display:grid;gap:var(--sp-5)}
@media (min-width:700px){.mag-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.mag-grid{grid-template-columns:repeat(3,1fr)}}
.mag-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.mag-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-200)}
.mag-card-media{display:block;background:var(--primary-050);border-bottom:1px solid var(--line)}
.mag-card-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mag-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:.4rem;flex:1 1 auto}
.mag-card-body h2{font-size:var(--t-lg);margin:.35rem 0 .2rem;line-height:1.2}
.mag-card-body h2 a{color:var(--ink);text-decoration:none}
.mag-card-body h2 a:hover{color:var(--primary);text-decoration:underline}
.mag-card-body p{color:var(--muted);font-size:var(--t-sm);margin:0}
.mag-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:auto;
  padding-top:var(--sp-4);border-top:1px dashed var(--line-strong);
  font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* lead card: the first report runs wide */
@media (min-width:700px){
  .mag-card.lead{grid-column:1 / -1;flex-direction:row;align-items:stretch}
  .mag-card.lead .mag-card-media{flex:0 0 46%;border-bottom:0;border-right:1px solid var(--line)}
  .mag-card.lead .mag-card-media img{height:100%;aspect-ratio:auto;min-height:260px}
  .mag-card.lead .mag-card-body{padding:var(--sp-6)}
  .mag-card.lead .mag-card-body h2{font-size:var(--t-xl)}
  .mag-card.lead .mag-card-body p{font-size:var(--t-base)}
}
@media (min-width:1040px){.mag-card.lead .mag-card-body h2{font-size:var(--t-2xl)}}

.mag-index-cta{padding-top:0}

/* ---------- article header ---------- */
.mag-article{padding:var(--sp-7) 0 var(--sp-8)}
.mag-head{max-width:44rem;margin:0 auto var(--sp-6)}
.mag-head h1{margin-top:var(--sp-4);font-size:clamp(1.95rem,4.4vw,var(--t-3xl));text-wrap:balance}
.mag-head .mag-dek{font-size:var(--t-md);color:var(--muted)}
.mag-byline{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;margin-top:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);background:var(--primary-050);
  border:1.5px dashed var(--primary-200);border-radius:var(--r-md)}
.mag-byline p{margin:0;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.mag-byline p:first-child{color:var(--ink);letter-spacing:.02em;text-transform:none;font-size:var(--t-sm)}
.mag-byline a{color:var(--primary)}

.mag-figure{margin:0 0 var(--sp-7);background:var(--surface);padding:10px;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.mag-figure img{border-radius:var(--r-md);width:100%;aspect-ratio:3/2;object-fit:cover}
.mag-figure figcaption{font-size:var(--t-xs);color:var(--muted);padding:var(--sp-3) var(--sp-2) var(--sp-1);
  border-top:1px dashed var(--line-strong);margin-top:10px}

/* ---------- article body typography ---------- */
.mag-body{max-width:38rem;margin:0 auto;font-size:var(--t-md);line-height:1.72}
.mag-body>*{max-width:68ch}
.mag-body p{margin:0 0 var(--sp-5)}
.mag-body h2{font-size:clamp(1.45rem,3vw,var(--t-xl));margin:var(--sp-7) 0 var(--sp-4);
  padding-top:var(--sp-4);border-top:2px solid var(--accent-200)}
.mag-body h3{font-size:var(--t-lg);margin:var(--sp-6) 0 var(--sp-3)}
.mag-body ul,.mag-body ol{margin:0 0 var(--sp-5);padding-left:1.3rem}
.mag-body li{margin-bottom:.55rem}
.mag-body li::marker{color:var(--primary)}
.mag-body a{color:var(--primary);text-decoration:underline}
.mag-body a:hover{color:var(--ink)}
.mag-body blockquote{margin:var(--sp-6) 0;padding:var(--sp-5);background:var(--accent-050);
  border:1.5px dashed var(--accent-200);border-radius:var(--r-md);font-size:var(--t-md);color:var(--ink)}
.mag-body blockquote p:last-child{margin-bottom:0}
.mag-body table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-5);font-size:var(--t-sm);display:block;overflow-x:auto}
.mag-body th,.mag-body td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
.mag-body thead th{background:var(--primary-050);font-family:var(--f-body);font-weight:700;color:var(--primary)}
.mag-body tbody tr:nth-child(even){background:var(--paper)}

.inline-read{margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:600;color:var(--muted);box-shadow:var(--shadow-sm)}
.inline-read a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ---------- call to action ---------- */
.mag-cta{max-width:44rem;margin:var(--sp-7) auto 0;padding:var(--sp-6) var(--sp-5);
  background:var(--accent-050);border:2px solid var(--accent-200);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.mag-cta h2{font-size:var(--t-xl);margin-bottom:var(--sp-3)}
.mag-cta p{color:var(--ink);font-size:var(--t-base)}
.mag-cta p:last-child{margin-bottom:0}

/* ---------- author box ---------- */
.mag-author{max-width:44rem;margin:var(--sp-7) auto 0;display:flex;flex-wrap:wrap;gap:var(--sp-5);
  padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);
  border-top:5px solid var(--primary-200);border-radius:var(--r-lg)}
.mag-author img{flex:0 0 auto;width:110px;height:110px;border-radius:var(--r-md);object-fit:cover;
  border:1px solid var(--line)}
.mag-author>div{flex:1 1 16rem;min-width:0}
.mag-author h2{font-size:var(--t-lg);margin-bottom:var(--sp-3)}
.mag-author p{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.mag-author p:last-child{margin-bottom:0}

/* ---------- Read also ---------- */
.mag-related{max-width:60rem;margin:var(--sp-8) auto 0;padding-top:var(--sp-6);border-top:2px solid var(--line-strong)}
.mag-related>h2{font-size:var(--t-xl);margin-bottom:var(--sp-5)}
.mag-related-grid{display:grid;gap:var(--sp-5)}
@media (min-width:760px){.mag-related-grid{grid-template-columns:repeat(3,1fr)}}
.mag-rel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease}
.mag-rel:hover{transform:rotate(-.6deg);box-shadow:var(--shadow-md)}
.mag-rel-media{display:block;background:var(--primary-050);border-bottom:1px solid var(--line)}
.mag-rel-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mag-rel h3{font-size:var(--t-base);line-height:1.3;margin:0;padding:var(--sp-4) var(--sp-4) .3rem}
.mag-rel h3 a{color:var(--ink);text-decoration:none}
.mag-rel h3 a:hover{color:var(--primary);text-decoration:underline}
.mag-rel p{font-size:var(--t-sm);color:var(--muted);margin:0;padding:0 var(--sp-4) var(--sp-4)}
.mag-rel .mag-meta{margin:0 var(--sp-4) var(--sp-4);padding-top:var(--sp-3)}

/* ---------- home page magazine teaser ---------- */
.mag-teaser-grid{display:grid;gap:var(--sp-5)}
@media (min-width:760px){.mag-teaser-grid{grid-template-columns:repeat(3,1fr)}}
.mag-more{margin-top:var(--sp-6)}

/* ---------- narrow screens ---------- */
@media (max-width:420px){
  .mag-article{padding-top:var(--sp-6)}
  .mag-body{font-size:var(--t-base)}
  .mag-cta,.mag-author{padding:var(--sp-5) var(--sp-4)}
  .mag-author img{width:84px;height:84px}
  .mag-byline{padding:var(--sp-4)}
  .mag-figure{padding:6px}
}


/* Network column: five sibling products, rotated so every site is linked the same
   number of times. Sits in the footer link grid and inherits its type and colour. */
.site-network ul { list-style: none; margin: 0; padding: 0; }
.site-network li + li { margin-top: 0.4rem; }
.site-network a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { border-bottom-color: currentColor; }

/* nx-expansion-v1 */
/* Expansion pages: comparisons, free tools, working documents.
   Namespaced so nothing here can reach the original page styles. */
:root{--nx-bg:#FCFAF4;--nx-surface:#FFFFFF;--nx-soft:#EFF1EC;--nx-ink:#1E2426;
    --nx-ink-soft:#5C6060;--nx-muted:#61686B;--nx-line:#DDDCD7;--nx-line-2:#C2C2BE;
    --nx-primary:#1F6B6B;--nx-btn:#1F6B6B;--nx-btn-ink:#FFFFFF;--nx-ghost:#1F6B6B;
    --nx-accent:#E9B44C;--nx-accent-ink:#101418;--nx-tint:#FBF3E2;
    --nx-display:'Kaisei Decol',Georgia,serif;--nx-body:'Overpass',system-ui,-apple-system,'Segoe UI',sans-serif}
.nx{background:var(--nx-bg);color:var(--nx-ink);font-family:var(--nx-body)}
.nx *,.nx *::before,.nx *::after{box-sizing:border-box}
.nx-wrap{width:min(1140px,92vw);margin:0 auto}
.nx-narrow{width:min(760px,92vw);margin:0 auto}
.nx h1,.nx h2,.nx h3{font-family:var(--nx-display);color:var(--nx-ink);line-height:1.16;
    letter-spacing:-.01em;margin:0 0 .5em}
.nx h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem)}
.nx h2{font-size:clamp(1.4rem,1.05rem + 1.3vw,2.05rem)}
.nx h3{font-size:clamp(1.08rem,.98rem + .5vw,1.35rem)}
.nx p{margin:0 0 1.05em;line-height:1.68;color:var(--nx-ink-soft)}
.nx a{color:var(--nx-ghost)}
.nx a:hover{color:var(--nx-ink)}
.nx :focus-visible{outline:3px solid var(--nx-btn);outline-offset:2px;border-radius:4px}

.nx-crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.83rem;
    color:var(--nx-muted);margin:0 0 1.4rem;padding:0;list-style:none}
.nx-crumb a{color:var(--nx-muted);text-decoration:none;border-bottom:1px solid var(--nx-line-2)}
.nx-crumb a:hover{color:var(--nx-ink)}
.nx-crumb span[aria-hidden]{opacity:.55}

.nx-hero{padding:clamp(2.2rem,1rem + 4vw,4rem) 0 clamp(1.6rem,1rem + 2vw,2.6rem);
    background:linear-gradient(180deg,var(--nx-soft),var(--nx-bg));border-bottom:1px solid var(--nx-line)}
.nx-eyebrow{font-family:var(--nx-body);font-size:.76rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--nx-muted);margin:0 0 .7rem}
.nx-lede{font-size:clamp(1.03rem,.97rem + .35vw,1.2rem);color:var(--nx-ink-soft);max-width:62ch;margin:0 0 1.2rem}
.nx-hero-body{max-width:74ch}
.nx-hero-body p{margin-bottom:.9em}

.nx-band{padding:clamp(2rem,1.2rem + 2.6vw,3.4rem) 0}
.nx-band-alt{background:var(--nx-soft);border-block:1px solid var(--nx-line)}
.nx-body{max-width:74ch}
.nx-body h2{margin-top:1.7em}
.nx-body h2:first-child{margin-top:0}

.nx-btn,a.nx-btn,button.nx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.82rem 1.35rem;border-radius:10px;border:2px solid var(--nx-btn);
    background:var(--nx-btn);color:var(--nx-btn-ink);font-family:var(--nx-body);font-weight:700;
    font-size:.97rem;line-height:1.1;text-decoration:none;cursor:pointer;
    transition:transform .15s ease,filter .15s ease}
.nx-btn:hover,a.nx-btn:hover,button.nx-btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:var(--nx-btn-ink)}
.nx-btn-ghost,a.nx-btn-ghost,button.nx-btn-ghost{background:transparent;color:var(--nx-ghost);border-color:var(--nx-line-2)}
.nx-btn-ghost:hover,a.nx-btn-ghost:hover,button.nx-btn-ghost:hover{color:var(--nx-ink);border-color:var(--nx-btn)}
.nx-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 0}

.nx-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.nx-card{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.35rem 1.35rem 1.5rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06);display:flex;flex-direction:column}
.nx-card h2,.nx-card h3{margin-bottom:.45em;font-size:clamp(1.08rem,1rem + .35vw,1.28rem)}
.nx-card h2 a,.nx-card h3 a{text-decoration:none;border-bottom:2px solid var(--nx-tint)}
.nx-card h2 a:hover,.nx-card h3 a:hover{border-bottom-color:var(--nx-btn)}
.nx-card p{font-size:.96rem}
.nx-card-go{margin-top:auto;padding-top:.4rem;font-weight:700}
.nx-kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;background:var(--nx-tint);color:var(--nx-ink);
    border-radius:999px;padding:.3rem .66rem;margin:0 0 .8rem}

.nx-verdict{background:var(--nx-surface);border:1px solid var(--nx-line);
    border-left:5px solid var(--nx-btn);border-radius:12px;padding:1.3rem 1.4rem;margin:0 0 1.8rem}
.nx-verdict p:last-child{margin-bottom:0}

.nx-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--nx-line);
    border-radius:12px;background:var(--nx-surface)}
.nx-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
.nx-table caption{text-align:left;padding:.9rem 1rem;color:var(--nx-muted);font-size:.84rem}
.nx-table th,.nx-table td{padding:.8rem 1rem;text-align:left;vertical-align:top;
    border-top:1px solid var(--nx-line);color:var(--nx-ink-soft)}
.nx-table thead th{background:var(--nx-soft);color:var(--nx-ink);font-family:var(--nx-body);
    font-weight:700;border-top:0;position:sticky;top:0}
.nx-table tbody th{font-weight:700;color:var(--nx-ink);width:26%}
.nx-table tbody tr:nth-child(even) td,.nx-table tbody tr:nth-child(even) th{background:var(--nx-soft)}

.nx-two{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.nx-list{list-style:none;margin:0;padding:0}
.nx-list li{position:relative;padding:0 0 .7rem 1.5rem;line-height:1.6;color:var(--nx-ink-soft)}
.nx-list li::before{content:"";position:absolute;left:0;top:.58em;width:.55rem;height:.55rem;
    border-radius:2px;background:var(--nx-btn)}
.nx-list-alt li::before{background:var(--nx-muted)}

.nx-faq{border:1px solid var(--nx-line);border-radius:12px;background:var(--nx-surface);overflow:hidden}
.nx-faq details{border-top:1px solid var(--nx-line)}
.nx-faq details:first-of-type{border-top:0}
.nx-faq summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--nx-display);font-weight:600;
    font-size:1.02rem;color:var(--nx-ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.nx-faq summary::-webkit-details-marker{display:none}
.nx-faq summary::after{content:"+";font-family:var(--nx-body);font-weight:700;color:var(--nx-muted)}
.nx-faq details[open] summary::after{content:"\2212"}
.nx-faq details[open] summary{color:var(--nx-ghost)}
.nx-faq .nx-answer{padding:0 1.2rem 1.1rem}
.nx-faq .nx-answer p:last-child{margin-bottom:0}

.nx-calc{display:grid;gap:1.3rem;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
@media (max-width:880px){.nx-calc{grid-template-columns:1fr}}
.nx-fields{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.3rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-field{margin:0 0 1.05rem}
.nx-field:last-child{margin-bottom:0}
.nx-field label{display:block;font-weight:700;font-size:.93rem;color:var(--nx-ink);margin:0 0 .35rem}
.nx-inputline{display:flex;align-items:stretch;border:1px solid var(--nx-line-2);border-radius:9px;
    background:var(--nx-bg);overflow:hidden}
.nx-inputline .nx-unit{display:flex;align-items:center;padding:0 .7rem;background:var(--nx-soft);
    color:var(--nx-muted);font-size:.86rem;font-weight:700;border-right:1px solid var(--nx-line-2)}
.nx-inputline .nx-unit-r{border-right:0;border-left:1px solid var(--nx-line-2)}
.nx-field input[type=number]{flex:1;min-width:0;border:0;background:transparent;
    padding:.62rem .7rem;font-family:var(--nx-body);font-size:1rem;color:var(--nx-ink)}
.nx-field input[type=number]:focus{outline:0}
.nx-inputline:focus-within{border-color:var(--nx-btn);box-shadow:0 0 0 3px var(--nx-tint)}
.nx-help{margin:.35rem 0 0;font-size:.83rem;color:var(--nx-muted);line-height:1.5}
.nx-results{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.3rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06);position:sticky;top:1rem}
@media (max-width:880px){.nx-results{position:static}}
.nx-out{padding:.9rem 0;border-top:1px dashed var(--nx-line-2)}
.nx-out:first-of-type{border-top:0;padding-top:0}
.nx-out-label{font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--nx-muted);margin:0 0 .2rem}
.nx-out-value{font-family:var(--nx-display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
    line-height:1.05;color:var(--nx-ink);margin:0}
.nx-out-note{margin:.3rem 0 0;font-size:.85rem;color:var(--nx-muted);line-height:1.5}
.nx-reset{margin-top:1rem}

.nx-doc{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.4rem 1.5rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-doc h2{font-size:1.2rem;margin:1.8rem 0 .7rem;padding-top:1.2rem;border-top:1px solid var(--nx-line)}
.nx-doc h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.nx-check{list-style:none;margin:0;padding:0}
.nx-check li{display:flex;gap:.75rem;padding:.6rem 0;border-top:1px dashed var(--nx-line)}
.nx-check li:first-child{border-top:0}
.nx-check input[type=checkbox]{margin:.32rem 0 0;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--nx-btn)}
.nx-check .nx-check-label{font-weight:700;color:var(--nx-ink);display:block;margin:0 0 .18rem}
.nx-check .nx-check-detail{margin:0;font-size:.93rem;color:var(--nx-ink-soft);line-height:1.58}
.nx-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0}

.nx-form{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;
    padding:1.4rem;box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-form .nx-field input[type=text],.nx-form .nx-field input[type=email]{width:100%;
    border:1px solid var(--nx-line-2);border-radius:9px;background:var(--nx-bg);
    padding:.66rem .75rem;font-family:var(--nx-body);font-size:1rem;color:var(--nx-ink)}
.nx-form .nx-field input:focus{outline:0;border-color:var(--nx-btn);box-shadow:0 0 0 3px var(--nx-tint)}
.nx-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--nx-ink-soft);line-height:1.55}
.nx-consent input{margin-top:.25rem;accent-color:var(--nx-btn)}
.nx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nx-cta{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:16px;
    padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);box-shadow:0 1px 2px rgba(16,20,24,.05), 0 8px 24px rgba(16,20,24,.06)}
.nx-cta h2{margin-bottom:.4em}
.nx-cta p{max-width:64ch}
.nx-note{font-size:.87rem;color:var(--nx-muted);line-height:1.6;max-width:74ch}

.nx-pillar{margin:1.6rem 0;padding:1.05rem 1.2rem;background:var(--nx-soft);
    border:1px solid var(--nx-line);border-left:4px solid var(--nx-btn);border-radius:10px;
    font-size:.98rem;line-height:1.6}
.nx-pillar b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--nx-muted);margin-bottom:.3rem}
.nx-cluster{margin:2rem 0;padding:1.3rem 1.4rem;background:var(--nx-soft);
    border:1px solid var(--nx-line);border-radius:12px}
.nx-cluster h2{font-size:1.15rem;margin-bottom:.4em}
.nx-cluster ol{margin:.6rem 0 0;padding-left:1.2rem}
.nx-cluster li{margin:0 0 .5rem;line-height:1.55}
.nx-startpanel{margin:2.4rem auto 0;padding:1.5rem;background:var(--nx-soft);
    border:1px solid var(--nx-line);border-radius:14px}

@media print{
  .nx-hero,.nx-toolbar,.nx-form,.nx-cta,.nx-actions{display:none !important}
  .nx-doc{border:0;box-shadow:none;padding:0}
  .nx-check input[type=checkbox]{appearance:auto}
}
@media (prefers-reduced-motion:reduce){
  .nx-btn{transition:none}
  .nx-btn:hover{transform:none}
}