/* Magasaka — shared styles for policy/pricing pages.
   Rebuilt on the Ramp design system (Refero, 5 Oct 2026): warm bone canvas, white paper
   cards, 1px hairlines instead of shadows, Inter at weight 400 only — hierarchy comes from
   size and tracking — and a single chromatic accent (#e4f222) that appears ONLY on action
   surfaces, so every highlighted element reads as money moving. */
:root{
  --ink:#0c0a08; --obsidian:#1a1919; --paper:#ffffff; --bone:#f4f2f0;
  --ash:#6d6c6b; --hairline:#e5e7eb; --smoke:#d3d3d3; --hl:#e4f222;
  /* legacy aliases kept so existing markup keeps working */
  --bg:#f4f2f0; --bg-2:#f4f2f0; --ink-2:#6d6c6b; --green:#0c0a08; --green-2:#1a1919;
  --accent:#0c0a08; --muted:#6d6c6b; --line:#e5e7eb; --line-strong:#e5e7eb;
  --paper-2:#f4f2f0; --gold:#e4f222; --dark:#1a1919; --dark-2:#1a1919;
  --head:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:var(--head); --sans:var(--body); --mono:var(--head);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;
  --r-sm:6px;--r-md:10px;--r-lg:12px;--r-card:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
b,strong{font-weight:400}
body{background:var(--bone);color:var(--ink);font-family:var(--body);font-weight:400;font-size:1rem;
     line-height:1.5;font-feature-settings:"ss01" on;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp-7)}
/* nav */
nav{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--hairline);z-index:50}
.nav-in{display:flex;align-items:center;gap:var(--sp-7);height:62px}
.logo{font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo span{color:var(--ink)}
.nav-links{display:flex;gap:var(--sp-6);align-items:center;margin-left:auto;font-size:.875rem}
.nav-links a{color:var(--ash);text-decoration:none;transition:color .3s ease-out}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
/* buttons — the only place the accent appears */
.btn{display:inline-block;background:var(--hl);color:var(--ink);text-decoration:none;
     padding:var(--sp-3) var(--sp-6);border-radius:var(--r-sm);border:1px solid var(--hl);
     font-size:.875rem;transition:background-color .3s ease-out,border-color .3s ease-out}
.btn:hover{background:#d6e51f;border-color:#d6e51f}
.btn.gold{background:var(--hl);border-color:var(--hl);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--bone)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
main{padding:var(--sp-9) 0 var(--sp-10)}
/* type — one weight, hierarchy from size + tracking */
.eyebrow{font-size:10px;line-height:2.2;letter-spacing:.018em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--sp-3)}
h1{font-size:clamp(2.25rem,4.6vw,3rem);line-height:1.05;letter-spacing:-.02em;font-weight:400;margin-bottom:var(--sp-4)}
.doc-meta{font-size:.875rem;color:var(--ash);margin-bottom:var(--sp-2)}
.lead{color:var(--ash);max-width:60ch;font-size:1.125rem;margin-bottom:var(--sp-2)}
.note{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
      padding:var(--sp-5);margin:var(--sp-6) 0;font-size:.9375rem;color:var(--ash)}
.note strong{color:var(--ink);font-weight:400;border-bottom:1px solid var(--hl)}
.doc{max-width:70ch}
.doc h2{font-size:1.75rem;line-height:1.14;font-weight:400;letter-spacing:-.02em;margin:var(--sp-9) 0 var(--sp-3)}
.doc h3{font-size:1.0625rem;line-height:1.3;font-weight:400;color:var(--ink);margin:var(--sp-6) 0 var(--sp-2)}
.doc p{margin-bottom:var(--sp-3);color:var(--ash)}
.doc strong{color:var(--ink);font-weight:400}
.doc ul{margin:0 0 var(--sp-4) var(--sp-5)}
.doc li{font-size:.9375rem;margin-bottom:var(--sp-2);color:var(--ash)}
.doc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)}
.doc a:hover{border-bottom-color:var(--ink)}
hr{border:0;border-top:1px solid var(--hairline);margin:var(--sp-9) 0}
h2.sec{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.05;font-weight:400;letter-spacing:-.02em;margin-bottom:var(--sp-3)}
/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin:var(--sp-7) 0 var(--sp-3)}
.plan{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
      padding:var(--sp-5);display:flex;flex-direction:column}
.plan.mid{border-color:var(--ink)}
.plan .tier{font-size:10px;line-height:2.2;letter-spacing:.018em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--sp-2)}
.plan .price{font-size:2.5rem;line-height:1.05;letter-spacing:-.02em;margin-bottom:var(--sp-1)}
.plan .price small{font-size:.9rem;color:var(--ash)}
.plan .fee{font-size:.875rem;color:var(--ash);margin-bottom:var(--sp-4)}
.plan ul{list-style:none;margin:0;font-size:.9375rem}
.plan li{padding:var(--sp-2) 0;border-top:1px solid var(--hairline);color:var(--ash)}
.plan li:first-child{border-top:0}
.tag{display:inline-block;background:var(--hl);color:var(--ink);border-radius:var(--r-sm);
     font-size:10px;letter-spacing:.018em;text-transform:uppercase;padding:2px var(--sp-3);margin-left:var(--sp-2)}
/* tables */
table{width:100%;border-collapse:collapse;margin:var(--sp-6) 0;font-size:.9375rem}
th,td{border:1px solid var(--hairline);padding:var(--sp-3) var(--sp-4);text-align:left;vertical-align:top}
th{background:var(--bone);font-size:10px;letter-spacing:.018em;text-transform:uppercase;color:var(--ash);font-weight:400}
td{color:var(--ash)}td strong{color:var(--ink);font-weight:400}
td.num{font-variant-numeric:tabular-nums}
/* footer */
footer{border-top:1px solid var(--hairline);background:var(--paper);padding:var(--sp-6) 0;font-size:.875rem;color:var(--ash)}
.foot-in{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
footer a{color:var(--ash);text-decoration:none;border-bottom:1px solid var(--hairline)}
footer a:hover{color:var(--ink)}
@media (max-width:820px){
  .wrap{padding:0 var(--sp-5)}
  .plans{grid-template-columns:1fr}
  .nav-links{gap:var(--sp-4);font-size:.86rem}
  main{padding:var(--sp-7) 0 var(--sp-8)}
}