.nav-link{display:flex;width:100%;align-items:center;gap:.75rem;border-radius:1rem;padding:.75rem 1rem;text-align:left;color:#cbd5e1;transition:.15s;text-decoration:none}.nav-link:hover{background:rgba(255,255,255,.1);color:#fff}.nav-link.active{background:#fff;color:#020617}.mobile-nav{display:flex;align-items:center;flex-shrink:0;min-height:2.75rem;border-radius:1rem;background:rgba(255,255,255,.08);padding:.5rem 1rem;font-size:.875rem;color:#cbd5e1;text-decoration:none}.mobile-nav.active{background:#fff;color:#020617}.glass-card{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);box-shadow:0 18px 50px rgba(0,0,0,.25);border-radius:1.5rem}.pill{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);border-radius:999px;padding:.25rem .75rem;font-size:.75rem;color:#cbd5e1}.btn{border-radius:1rem;background:rgba(255,255,255,.1);padding:.55rem 1rem;font-size:.875rem;color:#e2e8f0;transition:.15s}.btn:hover{background:rgba(255,255,255,.16)}.btn-light{border-radius:1rem;background:#2563eb;padding:.55rem 1rem;font-size:.875rem;font-weight:700;color:#fff}.btn-light:hover{background:#3b82f6}.input{border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.72);border-radius:1rem;padding:.55rem .8rem;color:white}.input:focus{outline:none;border-color:rgba(255,255,255,.35)}

.trip-card-selector{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);box-shadow:0 18px 50px rgba(0,0,0,.25);border-radius:1.5rem;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}.trip-card-selector:hover{border-color:rgba(255,255,255,.22)}.trip-card-selector.active{border-color:rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.25)}
.btn-pill{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);border-radius:999px;padding:.35rem .8rem;font-size:.75rem;color:#cbd5e1;cursor:pointer;transition:.15s}
.btn-pill:hover{background:rgba(255,255,255,.12)}
.btn-pill.is-active{background:#fff;color:#020617;border-color:#fff}
.hidden{display:none}
details summary::-webkit-details-marker{display:none}
details summary::marker{content:''}
details[open] > summary{border-bottom:1px solid rgba(255,255,255,.05)}

/* --- Brand accent + polish (warm gold) --- */
:root{--accent:#e6b450;--accent-strong:#f2c66b;--accent-ink:#1b1305}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.text-accent{color:var(--accent)}
h1,h2,h3{letter-spacing:-.01em}
/* Stale/warning treatment — warm rose, distinct from the gold brand accent */
.badge-warn{border-radius:.75rem;border:1px solid rgba(245,130,100,.32);background:rgba(245,130,100,.14);color:#fca99c}
.text-warn{color:#fca99c}
.row-stale{border-color:rgba(245,130,100,.32);background:rgba(245,130,100,.06)}

/* --- Marketing landing (/join) --- */
.landing{max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem}
.landing-top{display:flex;align-items:center;justify-content:space-between}
.gate-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);border-radius:999px;padding:.5rem 1rem;font-size:.75rem;color:#cbd5e1;margin-top:1.5rem}
.landing-hero{display:grid;gap:2.5rem;align-items:center;margin-top:2rem}
.landing-h1{font-size:2.25rem;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0}
.landing-sub{margin-top:1.25rem;max-width:36rem;color:#cbd5e1;font-size:1.05rem;line-height:1.6}
.landing-cta{margin-top:1.75rem;display:flex;flex-direction:column;gap:.75rem}
.btn-lg{padding:.8rem 1.5rem;font-size:.95rem}
.adv-row{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:.75rem;padding:.5rem .75rem;font-size:.75rem;margin-top:.5rem}
.landing-features{display:grid;gap:1rem;margin-top:1rem}
.landing-foot{margin-top:3.5rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;font-size:.75rem;color:#64748b}
@media(min-width:560px){.landing-cta{flex-direction:row}}
@media(min-width:680px){.landing-features{grid-template-columns:1fr 1fr}}
@media(min-width:820px){.landing{padding:2.5rem 1.5rem}.landing-hero{grid-template-columns:1.05fr .95fr;margin-top:3rem}.landing-h1{font-size:3rem}.landing-features{grid-template-columns:1fr 1fr 1fr}}


/* ══════════════════════════════════════════════════════════════════════
   Public shell (top bar + footer) for indexable pages. The app shell
   (sidebar) stays in base.html for login-gated pages.
   ══════════════════════════════════════════════════════════════════════ */
.pub-top{position:relative;z-index:20;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);backdrop-filter:blur(12px)}
.pub-top-inner{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem;padding:0 1rem}
.pub-logo img{height:2.25rem;width:auto;border-radius:.5rem;display:block}
.pub-nav{display:none;align-items:center;gap:1.75rem;font-size:.875rem}
.pub-nav a{color:#cbd5e1;text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent;transition:.15s}
.pub-nav a:hover{color:#fff}
.pub-nav a.active{color:#fff;font-weight:600;border-bottom-color:var(--accent)}
.pub-actions{display:flex;align-items:center;gap:.6rem}
.pub-signin{display:none;font-size:.875rem;color:#cbd5e1;text-decoration:none}
.pub-signin:hover{color:#fff}
.pub-cta{padding:.55rem .9rem;font-size:.8rem;white-space:nowrap}
.pub-main{position:relative;max-width:80rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.pub-main.pub-read{max-width:66rem}
.pub-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;font-size:.8125rem;color:#475569}
.pub-crumbs a{color:#94a3b8;text-decoration:none}
.pub-crumbs a:hover{color:#fff}
.pub-crumbs span{color:#cbd5e1}
.pub-read-grid{display:grid;gap:2rem;align-items:start}
.pub-rail{display:flex;flex-direction:column;gap:1rem}
.pub-rail-card{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1.5rem;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}
.pub-rail-card a{text-decoration:none}
.pub-rail-cta{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.12)}
.pub-foot{position:relative;border-top:1px solid rgba(255,255,255,.1);margin-top:2rem}
.pub-foot-inner{max-width:80rem;margin:0 auto;padding:1.75rem 1rem 2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;font-size:.8125rem}
.pub-foot-col{display:flex;flex-direction:column;gap:.5rem}
.pub-foot-col a{color:#cbd5e1;text-decoration:none}
.pub-foot-col a:hover{color:#fff}
.pub-foot-label{margin:0 0 .25rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.pub-foot-brand{grid-column:1 / -1;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.pub-foot-brand img{height:2rem;width:auto;border-radius:.5rem}
.pub-foot-brand p{margin:0;font-size:.75rem;line-height:1.5;color:#64748b}
/* Landing sections that live inside the public shell */
.land-hero{display:grid;gap:2.5rem;align-items:center;padding:2rem 0 1rem}
.land-strip{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:2.5rem 0 .9rem}
.land-strip p{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.land-strip a{font-size:.8125rem;color:#93c5fd;text-decoration:none}
.land-strip a:hover{color:#fff}
.land-live{border:1px solid rgba(230,180,80,.25);background:rgba(230,180,80,.08);border-radius:1.5rem;padding:1.35rem;display:flex;flex-direction:column;gap:.8rem}
.land-live-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.8125rem;color:#cbd5e1}
.land-split{display:grid;gap:1rem;align-items:start}
.land-card-head{padding:1.1rem 1.25rem;background:linear-gradient(135deg,rgba(30,58,138,.6),rgba(15,23,42,.4))}
/* App shell sidebar groups */
.side-label{margin:.25rem .75rem .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.side-learn a{display:flex;align-items:center;justify-content:space-between;padding:.45rem 1rem;border-radius:.75rem;font-size:.875rem;color:#94a3b8;text-decoration:none}
.side-learn a:hover{color:#fff;background:rgba(255,255,255,.06)}
@media(min-width:640px){.pub-signin{display:inline}.pub-foot-inner{grid-template-columns:repeat(4,1fr)}.pub-foot-brand{grid-column:1 / -1}.land-split{grid-template-columns:5fr 7fr}}
@media(min-width:900px){.pub-nav{display:flex}.pub-burger{display:none}.nav-sheet,.nav-scrim{display:none !important}.land-hero{grid-template-columns:1.05fr .95fr;padding:3.5rem 0 1.5rem}.pub-read-grid{grid-template-columns:minmax(0,1fr) 18rem}.pub-foot-inner{grid-template-columns:repeat(5,1fr)}.pub-foot-brand{grid-column:auto}}

/* ══════════════════════════════════════════════════════════════════════
   Landing tweaks: the advisor card and feature tiles are links now
   ══════════════════════════════════════════════════════════════════════ */
.land-adv,.land-feature{display:block;color:inherit;text-decoration:none;transition:border-color .15s}
.land-adv:hover,.land-feature:hover{border-color:rgba(255,255,255,.22)}

/* ══════════════════════════════════════════════════════════════════════
   How it works (/how-it-works/): live HTML mocks of the three tools
   ══════════════════════════════════════════════════════════════════════ */
.hiw-hero{display:grid;gap:2rem;align-items:center;padding:1.5rem 0 1rem}
.hiw-jump{display:flex;flex-direction:column;gap:.6rem}
.hiw-jump a{display:flex;align-items:center;gap:.9rem;border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1.25rem;padding:.9rem 1.1rem;color:inherit;text-decoration:none;transition:border-color .15s}
.hiw-jump a:hover{border-color:rgba(255,255,255,.25)}
.hiw-jump a>span:first-child{font-size:1.35rem}
.hiw-jump strong{display:block;font-size:.95rem;color:#f1f5f9}
.hiw-jump small{display:block;font-size:.75rem;color:#94a3b8}
.hiw-section{display:grid;gap:1.75rem;align-items:start;padding:2.75rem 0 1rem;border-top:1px solid rgba(255,255,255,.08);margin-top:2rem;scroll-margin-top:1rem}
.hiw-kicker{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.hiw-h2{margin:.5rem 0 1rem;font-size:1.65rem;line-height:1.2;font-weight:700;color:#f1f5f9}
.hiw-copy p{margin:0 0 .9rem;color:#cbd5e1;font-size:.95rem;line-height:1.65}
.hiw-copy p.hiw-kicker{margin:0}
.hiw-copy strong{color:#f1f5f9}
.hiw-list{margin:0 0 1.25rem;padding-left:1.1rem;color:#94a3b8;font-size:.875rem;line-height:1.6}
.hiw-list li{margin:.25rem 0}
.hiw-cta{display:inline-block;padding:.7rem 1.25rem;text-decoration:none}
.hiw-mock{display:flex;flex-direction:column;gap:.75rem;font-size:.875rem}
.hiw-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.hiw-triple{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;text-align:center;margin-bottom:.9rem}
.hiw-alert{border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.1);border-radius:1.5rem;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}
.hiw-alert p{margin:0}
.hiw-alert-row{display:flex;flex-direction:column;border:1px solid rgba(245,158,11,.2);background:rgba(2,6,23,.4);border-radius:1rem;padding:.6rem .8rem}
.hiw-alert-row strong{color:#f1f5f9;font-size:.85rem}
.hiw-alert-row span{font-size:.75rem;color:rgba(253,230,138,.8)}
.hiw-credit{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:1rem;padding:.65rem .8rem}
.hiw-credit.is-used{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.1)}
.hiw-credit.is-urgent{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05)}
.hiw-credit p{margin:0}
.bar-w-40{width:40%}
.hiw-balance{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:1rem;padding:.7rem .9rem}
.hiw-balance p{margin:0}
.hiw-balance-num{text-align:right;font-size:.8rem}
.hiw-balance-num p:first-child{font-weight:700;font-size:.95rem;color:#f1f5f9}
.hiw-total{border-radius:1.5rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg,#059669,#0f766e 55%,#0f172a)}
.hiw-total p{margin:0}
.demo-who{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.demo-q{align-self:flex-end;max-width:92%;border:1px solid rgba(37,99,235,.35);background:rgba(37,99,235,.14);border-radius:1.25rem 1.25rem .35rem 1.25rem;padding:.8rem 1rem;color:#e2e8f0}
.demo-q p{margin:0}
.demo-a{padding:1.1rem 1.25rem;color:#cbd5e1;line-height:1.55}
.demo-a h4{margin:.9rem 0 .35rem;font-size:.95rem;font-weight:700;color:#f1f5f9}
.demo-a p{margin:0 0 .5rem}
.demo-a ul,.demo-a ol{margin:0 0 .5rem;padding-left:1.15rem}
.demo-a li{margin:.3rem 0}
.demo-a strong{color:#f1f5f9}
.demo-note{margin:.25rem 0 0;font-size:.75rem;line-height:1.5;color:#64748b}
.demo-note a{color:#93c5fd;text-decoration:none}
.demo-note a:hover{color:#fff}
.hiw-steps{margin-top:2rem}
.hiw-steps-grid{display:grid;gap:1rem}
.hiw-step-n{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:999px;background:#2563eb;color:#fff;font-weight:700;font-size:.8rem;margin:0 0 .75rem}
.hiw-final{margin-top:1.5rem;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
@media(min-width:640px){.hiw-stats{grid-template-columns:repeat(4,1fr)}.hiw-steps-grid{grid-template-columns:repeat(3,1fr)}.hiw-final{flex-direction:row;align-items:center;justify-content:space-between}}
@media(min-width:900px){.hiw-hero{grid-template-columns:1.1fr .9fr;padding:3rem 0 1.5rem}.hiw-section{grid-template-columns:5fr 7fr;gap:2.5rem}.hiw-flip .hiw-copy{order:2}.hiw-flip .hiw-mock{order:1}.hiw-h2{font-size:1.9rem}}

/* ══════════════════════════════════════════════════════════════════════
   Member home (/home/)
   ══════════════════════════════════════════════════════════════════════ */
.home-setup{margin-bottom:1.25rem;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start;border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.1)}
.home-grid{display:grid;gap:1.25rem;align-items:start}
.home-credit{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;text-align:left;border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.06);border-radius:1rem;padding:.7rem .9rem;color:inherit;cursor:pointer;transition:background .15s}
.home-credit:hover{background:rgba(245,158,11,.14)}
.home-credit>span{display:flex;flex-direction:column;gap:.1rem}
.home-credit strong{font-weight:500;color:#f1f5f9}
.home-credit-right{text-align:right;flex-shrink:0}
.home-fee{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.08);border-radius:1rem;padding:.6rem .9rem;font-size:.875rem}
.home-bonus{border:1px solid rgba(230,180,80,.25);background:rgba(230,180,80,.07);border-radius:1rem;padding:.7rem .9rem}
.home-bonus.is-soon{border-color:rgba(245,130,100,.32)}
.home-bonus p{margin:0}
.home-empty{margin:0;font-size:.875rem;color:#94a3b8;line-height:1.55}
.home-empty a{color:#93c5fd;text-decoration:none}
.home-empty a:hover{color:#fff}
.home-deals{display:grid;gap:.25rem}
.home-deal{padding:.65rem 0;border-top:1px solid rgba(255,255,255,.06)}
.home-deal:first-child{border-top:0;padding-top:0}
.home-deal p{margin:0}
.home-deal p+p{margin-top:.2rem}
@media(min-width:640px){.home-setup{flex-direction:row;align-items:center;justify-content:space-between}.home-deals{grid-template-columns:1fr 1fr;column-gap:1.5rem}.home-deal:nth-child(2){border-top:0;padding-top:0}}
@media(min-width:1024px){.home-grid{grid-template-columns:1fr 1fr}}
.hiw-list,.demo-a ul{list-style:disc}
.demo-a ol{list-style:decimal}

/* ══════════════════════════════════════════════════════════════════════
   Trust pages (/methodology/, /disclosure/): long-form prose, narrow column
   ══════════════════════════════════════════════════════════════════════ */
.trust{max-width:44rem}
.trust-eyebrow{margin:0 0 .4rem;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.trust h2{margin:2.25rem 0 .75rem;font-size:1.3rem;font-weight:700;color:#f1f5f9}
.trust p{margin:0 0 1rem;color:#cbd5e1;font-size:1rem;line-height:1.7}
.trust strong{color:#f1f5f9;font-weight:600}
.trust a{color:#93c5fd;text-decoration:none}
.trust a:hover{color:#fff;text-decoration:underline}
.trust ul{margin:0 0 1rem;padding-left:1.25rem;color:#cbd5e1;font-size:1rem;line-height:1.7;list-style:disc}
.trust li{margin-bottom:.6rem}
.trust-answer{border-left:3px solid var(--accent);background:rgba(230,180,80,.07);border-radius:0 1rem 1rem 0;padding:1.1rem 1.35rem;margin:0 0 1.5rem}
.trust-answer p{margin:0;color:#e2e8f0;font-size:1.05rem;line-height:1.65}
.trust-formula{border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.6);border-radius:1rem;padding:1.1rem 1.25rem;margin:0 0 1.25rem;overflow-x:auto}
.trust-formula p{margin:0;color:#f1f5f9;font-size:.95rem;white-space:nowrap}
.trust-table{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1rem;overflow:hidden;margin:0 0 1.25rem}
.trust-table table{width:100%;border-collapse:collapse;font-size:.95rem}
.trust-table th,.trust-table td{padding:.7rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.trust-table tr:last-child th,.trust-table tr:last-child td{border-bottom:0}
.trust-table th{font-weight:500;color:#94a3b8}
.trust-table td{text-align:right;font-weight:700;color:#f1f5f9}
.trust-faq details{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.6);border-radius:1rem;padding:.9rem 1.15rem;margin-bottom:.6rem}
.trust-faq summary{cursor:pointer;font-weight:600;color:#f1f5f9;font-size:.98rem;list-style:none}
.trust-faq summary::-webkit-details-marker{display:none}
.trust-faq details[open] > summary{border-bottom:0;margin-bottom:.5rem}
.trust-faq p{margin:0;font-size:.95rem}
.trust-foot{margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.25rem;font-size:.9rem;color:#94a3b8}
.trust-foot p{margin:0;font-size:.9rem;color:#94a3b8}
/* About page extras, on top of the shared .trust prose styles */
.about-grid{display:grid;gap:.9rem;margin:0 0 .5rem}
.about-grid h3{margin:.5rem 0 .35rem;font-size:1rem;font-weight:700;color:#f1f5f9}
.about-grid p{margin:0;font-size:.9rem;line-height:1.6;color:#94a3b8}
.about-icon{font-size:1.5rem;margin:0!important;line-height:1}
.about-rules{display:grid;gap:1rem;margin:0 0 .5rem}
.about-rules > div{border-left:2px solid rgba(230,180,80,.4);padding-left:1rem}
.about-rule{margin:0 0 .3rem!important;font-weight:700;color:#f1f5f9;font-size:1rem}
.about-rules p:last-child{margin:0;font-size:.95rem}
.about-links{display:flex;gap:.6rem;flex-wrap:wrap;margin:.25rem 0 0}
.about-links a{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;text-decoration:none}
.about-links a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.about-stack{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;text-align:center}
.about-stack > div{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:1rem;padding:.85rem .5rem}
.about-stack p{margin:0;font-size:.75rem;color:#64748b}
.about-stack-name{font-size:.9rem!important;font-weight:600;color:#e2e8f0!important;margin-bottom:.15rem!important}
@media(min-width:640px){.about-grid{grid-template-columns:1fr 1fr}.about-stack{grid-template-columns:repeat(4,1fr)}}

/* ══════════════════════════════════════════════════════════════════════
   Sign-up bonuses (/signup-bonuses/)
   ══════════════════════════════════════════════════════════════════════ */
.sub-note{border-left:3px solid rgba(245,130,100,.5);background:rgba(245,130,100,.07);border-radius:0 1rem 1rem 0;padding:.9rem 1.15rem;margin:0 0 1.75rem}
.sub-note p{margin:0;font-size:.9rem;line-height:1.6;color:#cbd5e1}
.sub-note strong{color:#f1f5f9}
.sub-issuer{display:flex;align-items:baseline;gap:.6rem;margin:2rem 0 .9rem;font-size:1.15rem;font-weight:700;color:#f1f5f9;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.5rem}
.sub-issuer .num{font-size:.8rem;font-weight:500;color:#64748b}
.sub-grid{display:grid;gap:.9rem}
.sub-card{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1.25rem;padding:1.1rem 1.25rem}
.sub-card.is-elevated{border-color:rgba(230,180,80,.35);background:rgba(230,180,80,.06)}
.sub-card.is-held{opacity:.72}
.sub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.sub-head h3{margin:0;font-size:1rem;font-weight:700;color:#f1f5f9;line-height:1.3}
.sub-fee{margin:.2rem 0 0;font-size:.75rem;color:#64748b}
.sub-tags{display:flex;flex-direction:column;gap:.3rem;align-items:flex-end;flex-shrink:0}
.sub-tag{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.sub-tag.is-hot{background:rgba(230,180,80,.18);color:var(--accent-strong)}
.sub-tag.is-held-tag{background:rgba(255,255,255,.08);color:#94a3b8}
.sub-bonus{margin:.75rem 0 0;font-size:1.05rem;font-weight:600;color:#e2e8f0;line-height:1.4}
.sub-terms{display:flex;flex-wrap:wrap;gap:1.25rem;margin:.75rem 0 0}
.sub-terms div{display:flex;flex-direction:column}
.sub-terms dt{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.sub-terms dd{margin:.1rem 0 0;font-size:.9rem;font-weight:600;color:#e2e8f0}
.sub-expiry{margin:.7rem 0 0;font-size:.8rem;color:#94a3b8}
.sub-expiry.is-soon{color:#fca99c;font-weight:600}
.sub-held-note{margin:.7rem 0 0;font-size:.8rem;color:#94a3b8;border-top:1px solid rgba(255,255,255,.07);padding-top:.6rem}
.sub-notes{margin:.7rem 0 0;font-size:.82rem;line-height:1.55;color:#94a3b8}
.sub-faq{margin-bottom:1rem}
.sub-foot{margin-top:2rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.25rem;font-size:.875rem;color:#94a3b8}
.sub-foot p{margin:0}
.sub-foot a{color:#93c5fd;text-decoration:none}
.sub-foot a:hover{color:#fff}
.sub-cta{display:inline-block;padding:.55rem 1.1rem;text-decoration:none}
.sub-foot a.sub-cta{color:#fff}
@media(min-width:900px){.sub-grid{grid-template-columns:1fr 1fr}}

/* ══════════════════════════════════════════════════════════════════════
   What's in my wallet (/whats-in-my-wallet/)
   ══════════════════════════════════════════════════════════════════════ */
.wal-card{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1.5rem;padding:1.35rem 1.5rem;margin:0 0 1.25rem;scroll-margin-top:1rem}
.wal-card.is-former{opacity:.8;border-style:dashed}
.wal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.wal-issuer{margin:0!important;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.wal-name{margin:.15rem 0 0!important;font-size:1.25rem!important;font-weight:700;color:#f1f5f9}
.wal-verdict{flex-shrink:0;font-size:.75rem;font-weight:600;border-radius:999px;padding:.3rem .75rem;background:rgba(255,255,255,.07);color:#cbd5e1;white-space:nowrap}
.wal-verdict.is-good{background:rgba(16,185,129,.15);color:#5eead4}
.wal-verdict.is-former-tag{background:rgba(255,255,255,.06);color:#94a3b8}
.wal-headline{margin:0 0 1rem!important;font-size:1.02rem;color:#e2e8f0;font-style:italic}
.wal-money{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0 0 1rem}
.wal-money > div{background:rgba(255,255,255,.04);border-radius:.9rem;padding:.6rem .75rem}
.wal-label{margin:0!important;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.wal-fig{margin:.15rem 0 0!important;font-size:1.05rem;font-weight:700;color:#f1f5f9}
.wal-fig.wal-good{color:#5eead4}
.wal-credits{border:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.4);border-radius:.9rem;padding:.65rem .9rem;margin:0 0 1rem}
.wal-credits summary{cursor:pointer;font-size:.85rem;color:#94a3b8;list-style:none}
.wal-credits summary::-webkit-details-marker{display:none}
.wal-credits ul{margin:.6rem 0 0;padding:0;list-style:none}
.wal-credits li{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:#cbd5e1;padding:.25rem 0;border-top:1px solid rgba(255,255,255,.05)}
.wal-credits li:first-child{border-top:0}
.wal-credits li .num{color:#94a3b8;flex-shrink:0}
.wal-trips{margin:1rem 0 0!important;font-size:.85rem;color:#64748b}
.wal-section{margin:2.5rem 0 .75rem!important}
@media(max-width:520px){.wal-money{grid-template-columns:1fr}}
.wal-verdict.is-leaving{background:rgba(245,130,100,.15);color:#fca99c}
/* Trip report byline + quotable one-line scorecard */
.trip-byline{margin:-0.75rem 0 .75rem;font-size:.8125rem;color:#64748b}
.trip-scorecard{margin:0 0 1.5rem;font-size:1.02rem;line-height:1.6;color:#cbd5e1;border-left:3px solid var(--accent);padding-left:1rem}

/* ── Calculators ──────────────────────────────────────────────────────────
   New styling lives here rather than in Tailwind utilities: tailwind.css is a
   prebuilt, purged artifact with no build step, so a class that is not already
   compiled into it silently does nothing. */
.calc-form{display:grid;gap:1rem;margin:0 0 1.25rem}
.calc-row{display:grid;gap:.35rem}
.calc-row label{font-size:.8125rem;font-weight:600;color:#cbd5e1}
.calc-row .hint{font-size:.75rem;color:#94a3b8}
.calc-form .input{width:100%;font-variant-numeric:tabular-nums}
@media (min-width:640px){.calc-form{grid-template-columns:1fr 1fr}.calc-form .calc-wide{grid-column:1/-1}}

.calc-out{border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1.5rem;padding:1.25rem 1.35rem;margin:0 0 1.5rem}
.calc-out-label{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}
.calc-out-value{margin:.25rem 0 0;font-size:2.25rem;font-weight:700;line-height:1.1;color:#f1f5f9;font-variant-numeric:tabular-nums}
.calc-out-note{margin:.5rem 0 0;font-size:.875rem;color:#cbd5e1}
.calc-out-note.is-good{color:#6ee7b7}
.calc-out-note.is-ok{color:#fcd34d}
.calc-out-note.is-bad{color:#fca99c}
.calc-working{margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8125rem;color:#94a3b8;font-variant-numeric:tabular-nums}

.calc-lines{display:grid;gap:.4rem;margin:.9rem 0 0}
.calc-line{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;color:#cbd5e1;font-variant-numeric:tabular-nums}
.calc-line span:last-child{color:#f1f5f9;font-weight:600}
.calc-line.is-total{border-top:1px solid rgba(255,255,255,.12);padding-top:.5rem;margin-top:.2rem}

.calc-table,.dtable{width:100%;border-collapse:collapse;font-size:.875rem}
.calc-table th,.dtable th{text-align:left;padding:.5rem .6rem;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}
.calc-table td,.dtable td{padding:.4rem .6rem;border-bottom:1px solid rgba(255,255,255,.06);color:#cbd5e1}
.calc-table td.is-num,.dtable td.is-num{text-align:right;font-variant-numeric:tabular-nums}
.calc-table .input{width:100%;max-width:9rem;padding:.35rem .55rem;font-size:.875rem}
.calc-scroll{overflow-x:auto;margin:0 0 1.25rem}

.calc-foot{border:1px solid rgba(255,255,255,.1);background:rgba(37,99,235,.08);border-radius:1.5rem;padding:1.25rem 1.35rem;margin:2rem 0 0}
.calc-foot p{margin:0 0 .85rem}
.calc-foot p:last-child{margin-bottom:0}
.inline-block{display:inline-block}

.calc-grid{display:grid;gap:.75rem;margin:0 0 1rem}
@media (min-width:640px){.calc-grid{grid-template-columns:1fr 1fr}}
.calc-card{display:block;padding:1rem 1.1rem;text-decoration:none}
.calc-card:hover{border-color:rgba(255,255,255,.22)}
.calc-card-emoji{margin:0;font-size:1.35rem}
.calc-card-title{margin:.3rem 0 0;font-weight:600;color:#f1f5f9}
.calc-card-blurb{margin:.3rem 0 0;font-size:.8125rem;color:#94a3b8;line-height:1.5}

/* Program hub pages reuse the table styling above; these are the extras. */
.dtable td.is-ratio{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;color:#e2e8f0;white-space:nowrap}
.dtable td.is-note{color:#94a3b8;font-size:.8125rem;line-height:1.45}
.dtable .is-alliance{color:#93c5fd;white-space:nowrap}
.dtable tr.is-tracked td,.dtable tr.is-tracked th{background:rgba(37,99,235,.10)}
.prog-stat{display:flex;flex-wrap:wrap;gap:1.5rem;border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.72);border-radius:1.5rem;padding:1.1rem 1.35rem;margin:0 0 1.5rem}
.prog-stat div{min-width:7rem}
.prog-stat dt{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}
.prog-stat dd{margin:.2rem 0 0;font-size:1.35rem;font-weight:700;color:#f1f5f9;font-variant-numeric:tabular-nums}
.prog-only{border-left:3px solid var(--accent);background:rgba(230,180,80,.07);border-radius:0 1rem 1rem 0;padding:.9rem 1.2rem;margin:0 0 1.5rem;font-size:.9375rem;color:#cbd5e1}
.prog-only strong{color:#f1f5f9}

/* ── Article photography ──────────────────────────────────────────────────
   Photos are served at 800 and 1600 wide (see manage.py import_photo) and
   picked by the browser via srcset, so a phone never downloads the large one.
   width/height are set on the element to reserve the space before the image
   arrives, which stops the text below it jumping. */
.photo{margin:0 0 1.5rem}
.photo img{display:block;width:100%;height:auto;border-radius:1.5rem;border:1px solid rgba(255,255,255,.1)}
.photo figcaption{margin:.6rem .25rem 0;font-size:.8125rem;line-height:1.5;color:#94a3b8}
.photo-hero{margin:0 0 1.75rem}

/* ── Inline links in body copy ────────────────────────────────────────────
   Colour alone was carrying the whole signal, and it was not enough — a
   reader got several articles in before realising the arrows meant links.
   WCAG asks for a non-colour cue for the same reason.

   Scoped to <main> on the public shell and to text elements only, so
   block-level card anchors (.calc-card, the prev/next tiles, landing
   features) and the breadcrumb trail stay clean. Underline sits low and thin
   so a paragraph carrying several links still reads as prose. */
.pub-main p a, .pub-main li a, .pub-main td a, .pub-main th a,
.pub-main figcaption a, .pub-main dd a, .pub-main blockquote a{
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:.07em;
  text-decoration-color:rgba(147,197,253,.5);
  transition:text-decoration-color .15s, color .15s;
}
.pub-main p a:hover, .pub-main li a:hover, .pub-main td a:hover, .pub-main th a:hover,
.pub-main figcaption a:hover, .pub-main dd a:hover, .pub-main blockquote a:hover{
  text-decoration-color:currentColor;
}
/* Buttons are links too, and an underlined button looks broken. */
.pub-main a.btn, .pub-main a.btn-light, .pub-main a.hiw-cta,
.pub-main a.pill, .pub-main a.calc-card{ text-decoration:none; }

/* ══════════════════════════════════════════════════════════════════════
   Mobile nav sheet — ONE pattern shared by the public top bar and the
   app shell. Both shells open the same full-screen sheet from a burger,
   so a reader crossing between them never meets a second nav paradigm.

   Fixed (not absolute) + body scroll lock: the old public menu was
   position:absolute with nothing locking the page, so a flick scrolled
   the page out from under the open menu and carried the menu with it.
   ══════════════════════════════════════════════════════════════════════ */
.nav-scrim{position:fixed;inset:0;z-index:40;background:rgba(2,6,23,.7)}
.nav-sheet{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:#0f172a;overflow-y:auto;overscroll-behavior:contain;
  padding:0 1rem calc(1.75rem + env(safe-area-inset-bottom,0px))}
.nav-sheet-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:4rem;background:#0f172a;
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid rgba(255,255,255,.08);margin:0 -1rem;padding-left:1rem;padding-right:1rem}
.nav-sheet-top img{height:2rem;width:auto;border-radius:.5rem;display:block}
.nav-sheet-label{margin:1.1rem .75rem .25rem;font-size:.6875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.nav-sheet a{display:flex;align-items:center;gap:.65rem;min-height:3rem;padding:0 .75rem;
  border-radius:.875rem;font-size:1.0625rem;color:#f1f5f9;text-decoration:none}
.nav-sheet a:hover{background:rgba(255,255,255,.08)}
.nav-sheet a.active{background:#fff;color:#020617;font-weight:600}
.nav-sheet a.nav-sheet-cta{justify-content:center;margin-top:1rem;background:#2563eb;
  font-weight:700;font-size:.95rem}
.nav-sheet a.nav-sheet-out{color:#94a3b8;font-size:.95rem;min-height:2.75rem}
.nav-sheet a.nav-sheet-out svg{color:#64748b;margin-left:auto}
.nav-sheet-foot{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}
.nav-sheet-foot .nav-sheet-user{margin:0 .75rem .5rem;font-size:.8125rem;color:#94a3b8}
.nav-sheet-foot button{background:none;border:0;padding:.65rem .75rem;font-size:.95rem;
  color:#94a3b8;cursor:pointer;min-height:2.75rem;text-align:left}
.nav-sheet-foot button:hover{color:#fff}

/* Burger / close button. 44px, the minimum comfortable touch target. */
.nav-burger{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:.875rem;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);
  color:#e2e8f0;cursor:pointer}
.nav-burger:hover{background:rgba(255,255,255,.14)}
/* Above phone width the sheet becomes a right-hand panel, which also makes
   the scrim a real click-to-close target instead of dead space behind a
   full-bleed sheet. Below 560px it stays full-screen. */
@media(min-width:560px){
  .nav-sheet{left:auto;width:22rem;border-left:1px solid rgba(255,255,255,.1);
    box-shadow:-30px 0 60px rgba(0,0,0,.45)}
}

/* ══════════════════════════════════════════════════════════════════════
   App shell responsive chrome.

   The breakpoint lives here, not in Tailwind's `md:` (768px), because the
   public shell swaps its top bar at 900px. When the two disagreed, widths
   between 768 and 900 showed the app sidebar and the public burger at the
   same time — one product wearing both navs at once.
   ══════════════════════════════════════════════════════════════════════ */
.app-sidebar{display:none}
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.75rem}
.app-topbar img{height:2.25rem;width:auto;border-radius:.5rem;display:block}
.app-quicknav{display:flex;gap:.5rem;overflow-x:auto;margin-bottom:1rem;
  scrollbar-width:none;-ms-overflow-style:none}
.app-quicknav::-webkit-scrollbar{display:none}
@media(min-width:900px){
  .app-sidebar{display:block}
  .app-topbar,.app-quicknav{display:none}
}

/* Body lock while a nav sheet is open. position:fixed keeps the page from
   scrolling; the JS stores/restores scrollY so it does not jump to the top. */
body.nav-sheet-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* Setup page notices — e.g. "added Chase Ultimate Rewards to your Points Vault"
   after adding a card that earns into it. Informational, not a warning, so it
   uses the blue action colour rather than the warm-rose warn treatment. */
.setup-notes{margin:0 0 1.25rem;border:1px solid rgba(37,99,235,.35);
  background:rgba(37,99,235,.10);border-radius:1rem;padding:.85rem 1rem}
.setup-notes p{margin:0;font-size:.875rem;color:#dbeafe}
.setup-notes p + p{margin-top:.35rem}