/* JMH design tokens. Source of truth for Phase 4 to 6. */
:root{
--navy:#0f2a47;--navy-deep:#0a1e33;--navy-2:#16375c;
--gold:#c9a14a;--gold-ink:#7f6222;--gold-soft:#e6d3a3;
--cream:#f6f1e7;--paper:#ede6d8;--white:#fff;
--ink:#1b2431;--muted:#4e5563;--rule:rgba(15,42,71,.16);--rule-strong:rgba(15,42,71,.32);
--ok:#2f6b4f;--ok-soft:#dfece4;--err:#9a3b2e;--err-soft:#f3e1dc;
--on-navy:#f6f1e7;--on-navy-muted:#b9b4a8;--rule-on-navy:rgba(246,241,231,.16);
--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--sans:"Source Sans 3","Source Sans Pro",Helvetica,Arial,sans-serif;
--mono:"Source Code Pro",Menlo,Consolas,monospace;
--fs-display:64px;--fs-h1:56px;--fs-h2:44px;--fs-h3:28px;--fs-h4:20px;--fs-body:17px;--fs-small:15px;--fs-caption:13px;--fs-label:12px;--fs-price:40px;
--lh-tight:1.04;--lh-head:1.1;--lh-body:1.6;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
--r-card:8px;--r-btn:6px;--r-chip:4px;--r-tile:8px;--r-round:999px;
--sh1:0 1px 2px rgba(15,42,71,.06),0 4px 12px rgba(15,42,71,.06);--sh2:0 8px 24px rgba(15,42,71,.10);--sh3:0 34px 80px rgba(15,42,71,.28);
--ease:cubic-bezier(.2,.7,.2,1);--t-fast:150ms;--t-base:250ms;--t-hero:900ms;
--content:1248px;--gutter:24px;
}
@media (max-width:1023px){:root{--fs-display:56px;--fs-h1:48px;--fs-h2:38px;--fs-h3:26px}}
@media (max-width:767px){:root{--fs-display:40px;--fs-h1:38px;--fs-h2:32px;--fs-h3:24px;--fs-body:16px;--gutter:16px}}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0ms;--t-base:0ms;--t-hero:0ms}}
/* base */
.jmh,.jmh *{box-sizing:border-box}
.jmh{font:400 var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
.jmh h1,.jmh h2,.jmh h3,.jmh h4,.jmh p,.jmh ul,.jmh ol{margin:0}
.jmh ul{padding:0;list-style:none}
.jmh a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;transition:color var(--t-fast) var(--ease)}
.jmh a:hover{color:var(--gold-ink)}
.jmh :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.jmh .display{font:500 var(--fs-display)/var(--lh-tight) var(--serif);letter-spacing:-.012em;text-wrap:balance}
.jmh .h1{font:500 var(--fs-h1)/var(--lh-tight) var(--serif);letter-spacing:-.01em;text-wrap:balance}
.jmh .h2{font:500 var(--fs-h2)/var(--lh-head) var(--serif);letter-spacing:-.008em;text-wrap:balance}
.jmh .h3{font:600 var(--fs-h3)/1.15 var(--serif)}
.jmh .h4{font:600 var(--fs-h4)/1.3 var(--sans)}
.jmh .small{font-size:var(--fs-small);line-height:1.55}
.jmh .caption{font-size:var(--fs-caption);line-height:1.5;color:var(--muted)}
.jmh .label{font:500 var(--fs-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.jmh .price{font:600 var(--fs-price)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.jmh .price i{font:400 14px/1 var(--mono);font-style:normal;color:var(--muted);margin-left:4px}
.jmh em{font-style:italic;color:var(--gold-ink)}
.jmh .eyebrow{display:flex;align-items:center;gap:12px;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.jmh .eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy .label,.on-navy .eyebrow,.on-navy em{color:var(--gold)}
.on-navy .caption,.on-navy .muted{color:var(--on-navy-muted)}
.on-navy a{color:var(--on-navy)}.on-navy a:hover{color:var(--gold)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-btn);font:600 15.5px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn.primary{background:var(--navy);color:var(--cream)}.btn.primary:hover,.btn.primary.hover{background:var(--navy-2)}
.btn.gold{background:var(--gold);color:var(--navy)}.btn.gold:hover,.btn.gold.hover{background:#d4ad5a;color:#000}
.jmh a.btn{text-decoration:none}
.btn.secondary{border-color:var(--navy);color:var(--navy);background:transparent}.btn.secondary:hover,.btn.secondary.hover{background:rgba(15,42,71,.06)}
.on-navy .btn.secondary{border-color:var(--cream);color:var(--cream)}.on-navy .btn.secondary:hover,.on-navy .btn.secondary.hover{background:rgba(246,241,231,.1)}
.btn.text{padding:0;min-height:0;color:var(--gold-ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}.btn.text:hover,.btn.text.hover{color:var(--navy)}
.btn.focus{outline:2px solid var(--gold);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.btn.lg{min-height:56px;padding:0 28px;font-size:17px}
.btn svg{width:16px;height:16px}
/* nav */
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s7);border-bottom:1px solid var(--rule);background:var(--cream)}
.nav .brand{display:flex;align-items:center;gap:12px;font:500 17px/1.1 var(--serif);letter-spacing:.02em;color:var(--navy);text-decoration:none}
.nav .brand img{width:40px;height:40px}
.nav .brand small{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-top:4px;color:var(--gold-ink)}
.nav .links{display:flex;gap:30px}
.nav .links a{font:500 15px/1 var(--sans);text-decoration:none;color:var(--ink);padding:8px 0;border-bottom:2px solid transparent;transition:border-color var(--t-fast) var(--ease)}
.nav .links a:hover,.nav .links a.hover{border-color:var(--gold)}
.nav .links a.current{border-color:var(--navy)}
.nav .right{display:flex;gap:22px;align-items:center;font:500 15px/1 var(--sans)}
.nav .right a{text-decoration:none;color:var(--ink)}
.nav.mobile{height:64px;padding:0 var(--s4)}
.nav.mobile .brand img{width:32px;height:32px}.nav.mobile .brand{font-size:15px}
.burger{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--navy);box-shadow:0 -7px 0 var(--navy),0 7px 0 var(--navy)}
.sheet{background:var(--cream);padding:var(--s5) var(--s4) var(--s6);display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--rule)}
.sheet a{font:500 20px/1 var(--serif);color:var(--navy);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--rule);min-height:52px;display:flex;align-items:center;justify-content:space-between}
.sheet a small{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.sheet a.login{font:600 15px/1 var(--sans);color:var(--navy);background:var(--paper);border-radius:var(--r-btn);padding:12px 16px;margin:6px 0 0;border-bottom:0;min-height:44px}
.sheet a.login::after{content:"\2192";color:var(--gold-ink);font-size:16px}
.sheet .btn{margin-top:var(--s4)}
.sheet a.btn{display:flex;justify-content:center;border-bottom:0;width:100%}
/* cards */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s6)}
.card.tint{background:var(--paper);border-color:transparent}
.card.lift{box-shadow:var(--sh1)}
.svc{display:flex;flex-direction:column;gap:var(--s4)}
.svc .ico{width:56px;height:56px;border-radius:var(--r-tile);background:var(--paper);display:grid;place-items:center}
.svc .ico svg{width:32px;height:32px}
.svc h3{font:600 22px/1.2 var(--serif);color:var(--navy)}
.svc p{color:var(--muted);font-size:var(--fs-small);line-height:1.55}
.plan{display:flex;flex-direction:column;gap:var(--s4);position:relative}
.plan.featured{border-color:var(--gold);box-shadow:var(--sh2)}
.plan .tag{position:absolute;top:-12px;left:var(--s6);background:var(--gold);color:var(--navy);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-chip)}
.plan h3{font:500 30px/1 var(--serif);color:var(--navy)}
.plan .from{color:var(--muted);font-size:var(--fs-small)}
.plan ul{display:flex;flex-direction:column;gap:10px;padding-top:var(--s4);border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.5}
.plan ul li{display:flex;gap:10px;align-items:flex-start}
.plan ul li i{width:18px;height:18px;border-radius:50%;background:var(--gold);flex:none;display:grid;place-items:center;margin-top:2px}
.plan ul li i svg{width:10px;height:10px}
.on-navy .plan{background:var(--navy-deep);border-color:var(--rule-on-navy);color:var(--on-navy)}
.on-navy .plan h3{color:var(--on-navy)}.on-navy .plan .from{color:var(--on-navy-muted)}.on-navy .plan ul{border-color:var(--rule-on-navy)}
.on-navy .plan.featured{border-color:var(--gold)}
.fact{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.fact div{padding:var(--s5) 0;border-top:1px solid var(--rule)}
.fact b{display:block;font:500 40px/1 var(--serif);color:var(--navy);margin-bottom:8px}
.fact span{font-size:var(--fs-small);color:var(--muted)}
/* strip */
.strip{display:flex;gap:44px;flex-wrap:wrap;padding:20px var(--s7);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.strip b{color:var(--ink);font-weight:500}
/* table */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.tbl th{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:var(--paper)}
.tbl th.feat{color:var(--navy)}
.tbl td.feat{background:rgba(201,161,74,.08)}
.tbl tbody tr:nth-child(even) td.feat{background:rgba(201,161,74,.13)}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl td{color:var(--muted)}
.tbl tbody tr:nth-child(even) td{background:rgba(237,230,216,.4)}
.tbl tr:last-child td{border-bottom:0}
.tbl td .p{font:600 22px/1 var(--sans);color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tbl td .p i{font:400 12px/1 var(--mono);font-style:normal;color:var(--muted)}
.tbl .yes{display:inline-grid;width:18px;height:18px;border-radius:50%;background:var(--gold);place-items:center}
.tbl .yes svg{width:10px;height:10px}
.tbl .no{display:inline-block;width:14px;height:1px;background:var(--rule-strong);vertical-align:middle}
.tcard{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.tcard header{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px;background:var(--paper)}
.tcard header b{font:500 22px/1 var(--serif);color:var(--navy)}
.tcard header span{font:600 18px/1 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums}
.tcard dl{margin:0;padding:6px 18px 12px}
.tcard dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px}
.tcard dl div:last-child{border:0}
.tcard dt{color:var(--muted)}.tcard dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
/* ledger */
.ledger{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s5) var(--s6);font-variant-numeric:tabular-nums}
.ledger .hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--rule-strong);margin-bottom:6px}
.ledger .hd b{font:500 24px/1 var(--serif);color:var(--navy)}
.ledger .hd span{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.ledger .row{display:grid;grid-template-columns:1fr 120px;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-small)}
.ledger .row span:last-child{text-align:right;font:500 14px/1.5 var(--mono);color:var(--ink)}
.ledger .row.indent span:first-child{color:var(--muted);padding-left:16px}
.ledger .row.tot{border-bottom:2px solid var(--navy);font-weight:600}
.ledger .row.tot span:last-child{color:var(--navy);font-weight:600}
.ledger .row.neg span:last-child{color:var(--err)}
.ledger .lfoot{display:flex;justify-content:space-between;margin-top:14px;font:500 10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* accordion */
.acc{border-top:1px solid var(--rule-strong)}
.acc .q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:64px;padding:18px 0;border:0;border-bottom:1px solid var(--rule-strong);background:transparent;font:600 19px/1.3 var(--serif);color:var(--navy);text-align:left;cursor:pointer;transition:color var(--t-fast) var(--ease)}
.acc .q:hover{color:var(--gold-ink)}
.acc .q .pl{width:24px;height:24px;flex:none;position:relative}
.acc .q .pl::before,.acc .q .pl::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;background:var(--navy);transform:translate(-50%,-50%);transition:transform var(--t-base) var(--ease)}
.acc .q .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc .open .q{border-bottom-color:transparent}
.acc .open .q .pl::after{transform:translate(-50%,-50%) rotate(0)}
.acc .a{padding:0 0 22px;color:var(--muted);font-size:var(--fs-small);line-height:1.6;max-width:62ch;border-bottom:1px solid var(--rule)}
/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:600 14px/1 var(--sans);color:var(--ink)}
.field label small{font:400 13px/1 var(--sans);color:var(--muted);margin-left:6px}
.field .in{min-height:48px;padding:12px 14px;border:1px solid var(--rule-strong);border-radius:var(--r-btn);background:var(--white);font:400 16px/1.3 var(--sans);color:var(--ink);display:flex;align-items:center;justify-content:space-between;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field .in.ph{color:var(--muted)}
.field .in.ta{min-height:120px;align-items:flex-start}
.field .in.focus,.field .in:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(201,161,74,.35)}
.field.error .in{border-color:var(--err);background:#fff}
.field.error label{color:var(--err)}
.field .msg{font-size:13px;line-height:1.4;color:var(--muted);display:flex;gap:6px;align-items:center}
.field.error .msg{color:var(--err)}
.field.ok .in{border-color:var(--ok)}
.field.ok .msg{color:var(--ok)}
.field .msg svg{width:14px;height:14px;flex:none}
.field .in svg.chev{width:14px;height:14px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);line-height:1.5;color:var(--ink)}
.check .bx{width:22px;height:22px;border:1px solid var(--rule-strong);border-radius:4px;background:var(--white);flex:none;display:grid;place-items:center;margin-top:1px}
.check .bx.on{background:var(--navy);border-color:var(--navy)}
.check .bx svg{width:12px;height:12px}
.banner{padding:16px 18px;border-radius:var(--r-btn);font-size:var(--fs-small);line-height:1.5;display:flex;gap:12px;align-items:flex-start}
.banner.ok{background:var(--ok-soft);color:#1f4a37}
.banner.err{background:var(--err-soft);color:#7a2c22}
.banner b{font-weight:600}
/* callouts */
.callout{border-radius:var(--r-card);padding:var(--s5) var(--s6);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.callout .label{margin-top:4px}
.callout.note{background:var(--paper)}
.callout.sample{background:var(--white);border:1px dashed var(--rule-strong)}
.callout.dark{background:var(--navy);color:var(--on-navy)}
.callout.dark .label{color:var(--gold)}
.callout p{font-size:var(--fs-small);line-height:1.6}
.callout.dark p{color:#d9d3c6}
.slot{background:repeating-linear-gradient(135deg,#e7dfcf 0 8px,#efe8da 8px 16px);border:1px solid var(--rule);border-radius:var(--r-card);display:grid;place-items:center;text-align:center;font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:var(--s5)}
/* plate, names */
.plate{position:relative;background:var(--navy);color:var(--cream);border-radius:var(--r-card);padding:34px 32px 30px;text-align:center;box-shadow:var(--sh3)}
.plate::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,161,74,.55);border-radius:5px;pointer-events:none}
.plate img{width:48px;height:48px;display:block;margin:0 auto 12px}
.plate .firm{font:500 13px/1.2 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.plate .nm{font:500 28px/1.05 var(--serif)}
.plate .cr{font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c8c3b6;margin-top:6px}
.plate hr{border:0;height:1px;background:rgba(201,161,74,.4);width:48px;margin:18px auto}
.names{font-size:var(--fs-small);color:var(--muted)}
.names b{color:var(--ink);font-weight:500}
/* footer */
footer.foot{background:var(--navy-deep);color:var(--on-navy);padding:var(--s8) var(--s7) var(--s6)}
.foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--rule-on-navy)}
.foot .brand{display:flex;align-items:center;gap:12px;font:500 17px/1.1 var(--serif);color:var(--on-navy)}
.foot .brand img{width:40px;height:40px}
.foot .brand small{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-top:4px;color:var(--gold)}
.foot p{font-size:var(--fs-small);line-height:1.6;color:var(--on-navy-muted);margin-top:var(--s4);max-width:36ch}
.foot h4{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4)}
.foot ul{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-small)}
.foot ul a{color:var(--on-navy);text-decoration:none}.foot ul a:hover{color:var(--gold)}
.foot .bot{display:flex;justify-content:space-between;gap:var(--s5);padding-top:var(--s5);font-size:13px;color:var(--on-navy-muted);flex-wrap:wrap}
.foot .bot a{color:var(--on-navy-muted)}
/* article */
.article{max-width:68ch;font-size:var(--fs-body);line-height:1.7}
.article h2{font:500 var(--fs-h2)/1.1 var(--serif);margin:var(--s7) 0 var(--s4);color:var(--navy)}
.article h3{font:600 var(--fs-h3)/1.2 var(--serif);margin:var(--s6) 0 var(--s3);color:var(--navy)}
.article p{margin:0 0 var(--s4)}
.article ul,.article ol{margin:0 0 var(--s4);padding-left:22px;list-style:disc}
.article ol{list-style:decimal}
.article li{margin-bottom:6px}
.article blockquote{margin:var(--s5) 0;padding:var(--s4) var(--s5);border-left:2px solid var(--gold);background:var(--paper);border-radius:0 var(--r-btn) var(--r-btn) 0;font:500 22px/1.35 var(--serif);color:var(--navy)}
.article .meta{display:flex;gap:16px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--s4)}
.article code{font:400 .92em var(--mono);background:var(--paper);padding:2px 6px;border-radius:3px}
