:root{
  --paper:#fbfaf7;
  --ink:#14140f;
  --ink-soft:#4a4a42;
  --line:#e4e1d6;
  --gold:#b08d3e;
  --gold-text:#84692e; /* darker variant for text on light backgrounds — passes WCAG AA (~5:1); the original --gold is kept for borders/icons/dark-background use, where it already passes */
  --gold-soft:#eadfc0;
  --green:#3f7a53;
  --red:#b23b3b;
  --amber:#a3720f;
  --panel:#111110;
  --surface:#ffffff;
  --header-bg:rgba(251,250,247,0.92);
  --radius:2px;
}
html[data-theme="dark"]{
  --paper:#0c0c0a;
  --ink:#f1efe6;
  --header-bg:rgba(12,12,10,0.92);
  --ink-soft:#a6a396;
  --line:#2b2b26;
  --gold-soft:#3c331f;
  --panel:#1a1a16;
  --surface:#151512;
  /* --gold-text was defined once in :root as a darkened variant specifically
     for readability on a light background, but was never given a dark-mode
     counterpart — it stayed that same dark brown even once the background
     itself went dark, hurting contrast. --gold already reads fine on dark
     backgrounds (per its own comment in :root), so dark mode can just reuse
     it here instead of needing a third, separate color value. */
  --gold-text:var(--gold);
}
*{box-sizing:border-box;margin:0;padding:0;overflow-wrap:break-word;}
html,body{max-width:100%;overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden; /* safety net — if anything on any page is ever even slightly
    wider than the viewport, this clips it instead of letting the whole page
    become horizontally scrollable and shift, which is what was cutting off
    the left edge of every page in the screenshots */
  background-image:
    radial-gradient(circle, rgba(176,141,62,0.14) 1px, transparent 1px);
  background-size:26px 26px;
  transition:background-color .25s ease, color .25s ease;
}
a{color:inherit;text-decoration:none;}
.serif{font-family:'Cormorant Garamond',serif;}
.mono{font-family:'Space Mono',monospace;}
/* Browsers give inputs/selects/textareas their own default black text
   colour regardless of the page's own color styling — several of the rules
   below set a theme-aware background (var(--surface)/var(--paper), which
   correctly goes dark) without ever setting color to match, so the text
   stayed black even against a dark background. Rather than patch each of
   those individually and risk missing one, this one global rule covers
   every form element on the page, including any that never got their own
   dedicated style rule at all. Also sets a theme-aware background here for
   the same reason — several elements (a search bar, dropdowns like the
   withdrawal bank-list select) had color set correctly elsewhere but never
   got a background rule of their own at all, so they fell back to the
   browser's plain white default — light text on white, unreadable in dark
   mode, the same underlying problem as the color-only issue above. */
input, select, textarea{color:var(--ink); background:var(--surface);}

/* ===== APP FRAME ===== */
#app{max-width:1600px;margin:0 auto;min-height:100vh;background:transparent;position:relative;z-index:1;box-shadow:0 0 60px rgba(0,0,0,0.05);}
#siteWaveLayer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
#siteWaveLayer svg{position:absolute;top:0;left:0;width:100%;height:200%;animation:site-wave-fall linear infinite;animation-duration:40s;opacity:0.08;}
/* The same 0.08 opacity that reads as a tasteful hint of gold against the
   light paper background all but disappears against dark mode's near-black
   one — same stroke, same alpha, but so much less contrast against the
   surface behind it that it was effectively invisible. Dark mode gets a
   real opacity boost plus a soft glow around each line so the wave actually
   registers as a background motif rather than needing to be looked for. */
html[data-theme="dark"] #siteWaveLayer svg{
  opacity:0.22;
  filter:drop-shadow(0 0 5px rgba(176,141,62,0.35));
}
@keyframes site-wave-fall{
  from{ transform:translateY(-50%); }
  to{ transform:translateY(0%); } /* exactly one repeated copy's height, so the loop is seamless, and moving toward 0 reads as the pattern travelling downward */
}
@media (prefers-reduced-motion: reduce){
  #siteWaveLayer svg{ animation:none; }
}

/* ===== NAV ===== */
header.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(6px);z-index:50;
}
.nav-left{display:flex;align-items:center;gap:28px;}
.user-icon-wrap{position:relative;}
.notif-badge{position:absolute;top:-3px;right:-3px;background:#d64545;color:#fff;font-size:9.5px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px var(--paper);}
.notif-badge.show{display:flex;}
.notif-item{padding:12px 14px;border-bottom:1px solid var(--line);}
.notif-item:last-child{border-bottom:none;}
.notif-item .notif-text{font-size:12.5px;line-height:1.5;}
.notif-item .notif-date{font-size:10.5px;color:var(--ink-soft);margin-top:3px;}
.notif-expand{text-align:center;color:var(--gold);font-weight:600;font-size:12px;cursor:pointer;letter-spacing:.02em;}
.notif-expand:hover{background:var(--paper);}
.user-icon{width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;}
.hamburger-btn{display:none;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;align-items:center;justify-content:center;cursor:pointer;}
.hamburger-btn svg{width:19px;height:19px;}
.mobile-nav{display:none;flex-direction:column;border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;max-height:0;transition:.25s ease;}
.mobile-nav.show{max-height:320px;}
.mobile-nav a{padding:16px 24px;font-size:14px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink);}
.mobile-nav a:last-child{border-bottom:none;}
.user-icon:hover{background:var(--ink);color:var(--paper);}
.user-icon svg{width:18px;height:18px;}
.user-dropdown{
  position:absolute;top:48px;left:0;background:var(--panel);color:#fff;min-width:190px;
  border-radius:var(--radius);padding:8px 0;display:none;box-shadow:0 20px 40px rgba(0,0,0,0.25);z-index:60;
}
.user-dropdown.show{display:block;}
.user-dropdown a{display:block;padding:11px 20px;font-size:13px;letter-spacing:.03em;border-bottom:1px solid rgba(255,255,255,0.08);}
.user-dropdown a:last-child{border-bottom:none;}
.user-dropdown a:hover{background:rgba(255,255,255,0.06);color:var(--gold);}
.user-dropdown .phone{padding:12px 20px 4px;font-size:11px;color:#999;letter-spacing:.05em;}
#notificationDropdown{max-height:340px;overflow-y:auto;}

nav.main-links{display:flex;gap:34px;}
nav.main-links a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);position:relative;padding-bottom:4px;cursor:pointer;}
nav.main-links a:hover, nav.main-links a.active{color:var(--ink);}
nav.main-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);}

.nav-right{display:flex;align-items:center;gap:26px;}
.fx-pill{font-size:11px;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--line);padding:6px 12px;border-radius:20px;transition:.15s;}
.fx-pill:hover{border-color:var(--gold);color:var(--ink);}
.wordmark{display:flex;align-items:center;gap:10px;cursor:pointer;}
.wordmark .mark{width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f8f6f0;flex:0 0 auto;overflow:hidden;}
.wordmark .mark img{width:19px;height:19px;object-fit:contain;}
.wordmark .name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;letter-spacing:.03em;}
.wordmark-text{display:flex;flex-direction:column;line-height:1.2;}
.wordmark-sub{font-family:'Inter',sans-serif;font-size:9.5px;color:var(--ink-soft);letter-spacing:.02em;margin-top:1px;white-space:nowrap;}
@media(max-width:700px){ .wordmark-sub{display:none;} }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;background:var(--ink);color:var(--paper);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;
  border-radius:var(--radius);transition:transform .15s ease, box-shadow .15s ease, background-color .2s;font-family:'Inter',sans-serif;font-weight:600;
}
.btn:hover{background:var(--gold);transform:translateY(-1px);box-shadow:0 6px 16px rgba(176,141,62,0.28);}
.btn:active{transform:translateY(0);box-shadow:none;}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.outline:hover{background:var(--ink);color:var(--paper);box-shadow:0 6px 16px rgba(20,20,15,0.18);}
.btn.outline.payment-method-selected{background:var(--gold);color:var(--paper);border-color:var(--gold);}
.btn.block{width:100%;}
.btn.sm{padding:9px 16px;font-size:11px;}
.ripple-btn{position:relative;}
.ripple-btn::before, .ripple-btn::after{
  content:'';
  position:absolute; inset:0;
  border-radius:4px;
  border:2px solid var(--gold);
  opacity:0.8;
  pointer-events:none;
  animation:ripple-wave 2.2s ease-out infinite;
}
.ripple-btn::after{ animation-delay:1.1s; }
@keyframes ripple-wave{
  0%{ transform:scale(1); opacity:0.7; }
  100%{ transform:scale(1.6); opacity:0; }
}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

/* ===== VIEW SYSTEM ===== */
.view{display:none;animation:fadein .5s cubic-bezier(.16,1,.3,1);}
.view.active{display:block;}
@keyframes fadein{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.subview{display:none;}
.subview.active{display:block;}

.back-row{padding:20px 40px 0;display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;}
.back-row:hover{color:var(--ink);}

/* ===== HOME ===== */
.hero{padding:70px 40px 90px;text-align:center;}
.hero .eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-text);margin-bottom:22px;}
.hero-mark{width:96px;height:96px;margin:0 auto 30px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f8f6f0;overflow:hidden;}
.hero-mark img{width:60px;height:60px;object-fit:contain;}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:600;line-height:1.05;margin-bottom:20px;}
.hero h1 em{font-style:italic;color:var(--gold-text);}
.hero-panel{
  margin-top:46px;background:var(--panel);color:#f2f0e8;border-radius:var(--radius);
  padding:56px 60px;max-width:820px;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;
}
.hero-panel::before{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(90deg, rgba(176,141,62,0.06) 0 1px, transparent 1px 46px);}
.hero-panel p{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.6;position:relative;font-style:italic;}
.hero-cta{margin-top:34px;display:flex;gap:16px;justify-content:center;}
.our-story{max-width:640px;margin:50px auto 0;text-align:center;}
.our-story p{font-size:14.5px;line-height:1.8;color:var(--ink-soft);margin-bottom:16px;text-align:left;}
.our-story p:last-child{margin-bottom:0;}
.impact{color:var(--gold-text);font-weight:700;}
/* The hero panel is always dark (var(--panel) never flips), so its buttons need
   fixed contrast colors rather than the theme-flipping .btn/.btn.outline
   defaults — otherwise the outline button's text goes dark-on-dark in default
   (light) mode, since it assumes it's sitting on the normal light page background. */
.hero-cta .btn{background:#f2f0e8;color:#14140f;}
.hero-cta .btn:hover{background:var(--gold);color:#14140f;}
.hero-cta .btn.outline{background:transparent;color:#f2f0e8;border:1px solid #f2f0e8;}
.hero-cta .btn.outline:hover{background:#f2f0e8;color:#14140f;}
.ticker{margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap;position:relative;}
.ticker-status{position:absolute;top:-27px;right:0;display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(63,122,83,0.5);animation:pulse 1.8s infinite;}
.live-dot.stale{background:#b08d3e;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,122,83,0.5);}70%{box-shadow:0 0 0 6px rgba(63,122,83,0);}100%{box-shadow:0 0 0 0 rgba(63,122,83,0);}}
.ticker-track{display:inline-block;animation:ticker 22s linear infinite;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.02em;}
.ticker-track span{margin-right:48px;color:var(--ink-soft);}
.ticker-track span.up{color:var(--green);}
.ticker-track span.down{color:var(--red);}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.section-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:12px;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin:70px 40px;border:1px solid var(--line);}
.stat{background:var(--paper);padding:34px 28px;text-align:center;min-width:0;}
.stat .num{font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--ink);}
.stat .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;}

footer.site-footer{border-top:1px solid var(--line);padding:34px 40px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-soft);}

/* ===== PRODUCT PAGE ===== */
.product-layout{display:grid;grid-template-columns:1fr 280px;gap:40px;padding:36px 40px 70px;}
.page-title{font-family:'Cormorant Garamond',serif;font-size:38px;margin-bottom:6px;}
.page-sub{color:var(--ink-soft);font-size:14px;margin-bottom:30px;}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
#reviewsGrid{grid-template-columns:repeat(3,1fr);}
@media(min-width:1300px){ .product-grid{grid-template-columns:repeat(3,1fr);} }
.product-card{border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:.25s;position:relative;}
.card-enter{animation:cardEnter .45s cubic-bezier(.16,1,.3,1) backwards;}
.reveal-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0);}
@keyframes cardEnter{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.product-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 16px 30px rgba(20,20,15,0.06);}
.card-thumb{height:140px;background:linear-gradient(135deg,#1b1b17,#3a3428);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.community-card{border:1px solid var(--line);background:var(--surface);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;}
.community-card .comm-media{height:130px;background:linear-gradient(135deg,#1b1b17,#3a3428);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.community-card .comm-media img{width:100%;height:100%;object-fit:cover;}
.community-card .comm-media iframe{width:100%;height:100%;border:none;}
.community-card .comm-media .comm-fallback{color:var(--gold-soft);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.community-card .comm-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.community-card h3{font-size:15px;}
.community-card .comm-visit{align-self:flex-start;margin-top:auto;font-size:12px;color:var(--gold-text);text-decoration:underline;cursor:pointer;font-family:'Space Mono',monospace;}
.community-empty{text-align:center;padding:50px 20px;color:var(--ink-soft);font-size:14px;}
.card-thumb .chart{position:absolute;inset:0;opacity:.5;}
.card-thumb .tag{position:relative;color:var(--gold-soft);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(234,223,192,0.4);padding:4px 10px;border-radius:20px;}
.card-badge{position:absolute;top:10px;left:10px;background:var(--gold);color:#1b1b17;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;font-weight:600;z-index:2;}
.wishlist-heart{position:absolute;top:104px;right:8px;z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink-soft);cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.wishlist-heart:hover{transform:scale(1.1);color:var(--red);}
.wishlist-heart.active{color:var(--red);}
.btn.outline.wishlist-active{border-color:var(--red);color:var(--red);}
.btn.outline.wishlist-active:hover{background:var(--red);color:#fff;}
.label-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px;}
.label-badge{display:inline-flex;align-items:center;color:#fff;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:20px;font-weight:600;}
.card-body{padding:16px 18px 18px;}
.card-body h3{font-family:'Cormorant Garamond',serif;font-size:20px;margin-bottom:4px;}
.card-body .pairs{font-size:11px;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:12px;font-family:'Space Mono',monospace;}
.card-rating{font-size:11.5px;margin:2px 0 8px;display:flex;align-items:center;gap:6px;}
.card-rating span{color:var(--ink-soft);}
.card-rating-empty{color:var(--ink-soft);font-style:italic;}
.card-rating .card-buyers{margin-left:auto;font-weight:600;color:var(--ink);background:rgba(176,141,62,.14);border-radius:999px;padding:1px 8px;white-space:nowrap;}
.detail-proof{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;color:var(--ink-soft);margin:2px 0 14px;}
.detail-proof strong{color:var(--ink);}
.detail-proof .proof-stars{color:var(--gold);letter-spacing:1px;}
.detail-proof .proof-muted{font-style:italic;}
.detail-proof .proof-dot{opacity:.5;}
.checkout-steps{display:flex;align-items:center;justify-content:center;max-width:420px;margin:0 auto 30px;}
.checkout-step{display:flex;flex-direction:column;align-items:center;gap:6px;}
.checkout-step-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--line);color:var(--ink-soft);background:var(--paper);transition:.3s;}
.checkout-step.active .checkout-step-dot{border-color:var(--gold);background:var(--gold);color:#1b1b17;}
.checkout-step.done .checkout-step-dot{border-color:var(--green);background:var(--green);color:#fff;}
.checkout-step-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.checkout-step.active .checkout-step-label{color:var(--ink);font-weight:600;}
.checkout-step-line{flex:1;height:2px;background:var(--line);margin:0 8px 20px;transition:.3s;}
.checkout-step-line.done{background:var(--green);}
.field-error{color:var(--red);font-size:11.5px;margin-top:4px;min-height:14px;}
.field input.field-invalid, .phone-field input.field-invalid{border-color:var(--red);}
.ticker-skeleton{display:inline-block;width:90px;height:14px;margin-right:24px;border-radius:3px;background:linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.18) 37%, rgba(255,255,255,0.08) 63%);background-size:400% 100%;animation:tickerShimmer 1.4s ease infinite;}
@keyframes tickerShimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.card-foot{display:flex;align-items:center;justify-content:space-between;}
.card-price{font-family:'Cormorant Garamond',serif;font-size:22px;}
.card-price span{font-size:11px;color:var(--ink-soft);font-family:'Inter',sans-serif;}

.filters{border:1px solid var(--line);background:var(--surface);padding:26px;align-self:start;position:sticky;top:96px;}
.filters .search{width:100%;border:1px solid var(--line);padding:11px 12px;font-size:13px;margin-bottom:24px;background:var(--paper);}
.filter-group{margin-bottom:24px;}
.filter-group h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.filter-chip{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;cursor:pointer;color:var(--ink-soft);}
.filter-chip input{accent-color:var(--gold);}
.filter-chip.active-type{color:var(--ink);font-weight:600;}
.range{width:100%;accent-color:var(--gold);}
.range-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);margin-top:4px;font-family:'Space Mono',monospace;}

/* ===== INVESTOR ACCOUNT ===== */
.detail-layout{padding:10px 40px 70px;display:grid;grid-template-columns:420px 1fr;gap:50px;max-width:1100px;margin:0 auto;}
.detail-media{background:linear-gradient(135deg,#1b1b17,#3a3428);height:340px;display:flex;align-items:center;justify-content:center;color:var(--gold-soft);font-family:'Space Mono',monospace;letter-spacing:.08em;font-size:12px;position:relative;overflow:hidden;}
.detail-info h2{font-family:'Cormorant Garamond',serif;font-size:32px;margin-bottom:2px;}
.detail-info .kicker{color:var(--gold-text);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;}
.acct-box{border:1px solid var(--line);background:var(--surface);padding:18px 20px;margin-bottom:26px;font-family:'Space Mono',monospace;font-size:12.5px;line-height:2;}
.ach-card{border:1px solid var(--line);background:var(--surface);padding:18px 20px;margin-bottom:14px;display:flex;gap:16px;align-items:flex-start;transition:.15s;}
.ach-card.unlocked{border-color:var(--gold);background:rgba(156,122,46,0.06);}
.ach-card .ach-icon{font-size:28px;line-height:1;flex:0 0 auto;filter:grayscale(1);opacity:.4;}
.ach-card.unlocked .ach-icon{filter:none;opacity:1;}
.ach-card .ach-body{flex:1;min-width:0;}
.ach-card h3{font-size:15px;margin-bottom:3px;}
.ach-card p{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;}
.ach-progress-track{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:5px;}
.ach-progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .4s ease;}
.ach-progress-label{font-size:11px;color:var(--ink-soft);font-family:'Space Mono',monospace;}
.ach-badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:3px 9px;border-radius:10px;display:inline-block;}
.ach-badge.locked{background:var(--line);color:var(--ink-soft);}
.ach-badge.done{background:var(--gold);color:#1b1b17;}
.welcome-preview{margin-top:28px;padding:20px 22px;background:var(--gold-soft);border-radius:6px;}
.welcome-preview-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-text);font-weight:700;margin-bottom:10px;}
.welcome-preview-item{font-size:13px;color:var(--ink);line-height:1.9;}
.just-verified-banner{background:var(--panel);color:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13.5px;animation:slideDown .4s ease;}
.just-verified-banner .jvb-close{cursor:pointer;color:#b8b6a8;font-size:13px;flex-shrink:0;}
@keyframes slideDown{ from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
.home-greeting{text-align:center;font-size:12.5px;color:var(--ink-soft);padding:14px 20px 0;}
.announcement-banner{max-width:640px;margin:16px auto 0;background:var(--gold-soft);border:1px solid var(--gold);border-radius:8px;padding:18px 44px 18px 20px;position:relative;}
.ann-close{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--ink-soft);font-size:13px;}
.ann-title{font-weight:700;font-size:14px;margin-bottom:6px;}
.ann-body{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:10px;}
.ann-poll-opts{display:flex;flex-direction:column;gap:8px;}
.ann-poll-opt{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-size:13px;cursor:pointer;transition:.15s;}
.ann-poll-opt:hover{border-color:var(--gold);}
.ann-note{font-size:12.5px;color:var(--green);font-weight:600;}
.ann-feedback-input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-family:'Inter',sans-serif;margin-bottom:8px;resize:vertical;}
.acct-box .lbl{color:var(--ink-soft);}
.acct-box .none{font-style:italic;color:var(--ink-soft);font-family:'Inter',sans-serif;}
.spec-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;}
.spec-row .k{color:var(--ink-soft);}
.spec-row .v{font-weight:600;text-align:right;}
.price-tag{font-family:'Cormorant Garamond',serif;font-size:34px;margin:20px 0 4px;}
.price-tag small{font-size:14px;color:var(--ink-soft);font-family:'Inter',sans-serif;}
.buy-note{font-size:11px;color:var(--ink-soft);margin-top:10px;}
.desc-panel{grid-column:1/-1;background:var(--panel);color:#eee;padding:34px 38px;margin-top:10px;}
.blog-post-body p{margin-bottom:20px;}
.blog-post-body p:last-child{margin-bottom:0;}
.blog-post-body h2{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--ink);margin:34px 0 14px;}
.blog-post-body h3{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink);margin:28px 0 12px;}
.blog-post-body ul,.blog-post-body ol{padding-left:22px;margin-bottom:20px;}
.blog-post-body li{margin-bottom:8px;}
.blog-post-body a{color:var(--gold-text);text-decoration:underline;}
.blog-post-body img{max-width:100%;border-radius:4px;margin:20px 0;}
.desc-panel h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.desc-panel ul{padding-left:18px;line-height:1.9;font-size:14px;color:#d8d5c9;}

/* ===== PLAN SELECT ===== */


/* ===== PAYMENT ===== */
.pay-layout{padding:10px 40px 80px;display:grid;grid-template-columns:260px 1fr;gap:50px;max-width:900px;margin:0 auto;}
.fx-card{background:linear-gradient(135deg,#4d7a5b,#3f7a53);color:#fff;border-radius:4px;padding:30px 24px;text-align:center;height:fit-content;}
.fx-card .lbl2{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:10px;}
.fx-card .rate{font-family:'Cormorant Garamond',serif;font-size:26px;margin-bottom:16px;}
.voucher-input{width:100%;border:1px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.08);color:#fff;padding:10px 12px;font-size:12px;margin-bottom:10px;}
.voucher-input::placeholder{color:rgba(255,255,255,0.7);}
.pay-title{font-family:'Cormorant Garamond',serif;font-size:30px;text-align:center;margin-bottom:26px;}
.pay-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px dotted var(--line);font-size:14px;}
.pay-row.total{font-weight:700;font-size:17px;border-bottom:none;padding-top:18px;}
.pay-row .neg{color:var(--red);}
.pay-methods{display:flex;flex-direction:column;gap:10px;margin-top:26px;}
.due-note{background:var(--gold-soft);border:1px solid var(--gold);padding:12px 16px;font-size:12px;margin-bottom:18px;}

/* ===== THANK YOU ===== */
.thanks{padding:60px 40px 30px;text-align:center;max-width:560px;margin:0 auto;}
.check{width:78px;height:78px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 26px;box-shadow:0 0 0 10px rgba(63,122,83,0.12);}
.check svg{width:36px;height:36px;stroke:#fff;}
.thanks h2{font-family:'Cormorant Garamond',serif;font-size:34px;margin-bottom:18px;}
.thanks p{color:var(--ink-soft);font-size:14px;line-height:1.9;margin-bottom:6px;}
.thanks .email{color:var(--gold-text);font-weight:600;}
.review-box{max-width:560px;margin:50px auto 70px;padding:36px 40px 40px;border:1px solid var(--line);background:var(--surface);text-align:center;}
.review-box h4{font-family:'Cormorant Garamond',serif;font-size:22px;margin-bottom:18px;}
.stars{font-size:34px;letter-spacing:8px;margin-bottom:22px;cursor:pointer;color:var(--line);}
.stars span.on{color:var(--gold-text);}
.review-box textarea{width:100%;border:1px solid var(--line);padding:12px;font-family:'Inter',sans-serif;font-size:13px;min-height:80px;margin-bottom:18px;background:var(--paper);}
.admin-upload{border:1px dashed var(--line);padding:18px;text-align:center;font-size:12.5px;color:var(--ink-soft);cursor:pointer;background:var(--paper);transition:.15s;}
.admin-upload:hover{border-color:var(--gold);}

/* ===== CONTACT ===== */
.contact-wrap{padding:10px 40px 80px;text-align:center;max-width:520px;margin:0 auto;}
.contact-wrap h1{font-family:'Cormorant Garamond',serif;font-size:46px;margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.contact-wrap .lead{color:var(--ink-soft);font-size:14px;margin-bottom:26px;}
.contact-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:var(--ink);color:var(--paper);margin-bottom:14px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.2s;}
.contact-section-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:26px 0 12px;text-align:left;font-family:'Space Mono',monospace;}
.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.social-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:transparent;border:1px solid var(--line);color:var(--ink-soft);font-size:12px;letter-spacing:.03em;cursor:pointer;transition:.2s;border-radius:20px;}
.social-btn:hover{border-color:var(--gold);color:var(--ink);}
.contact-btn:hover{background:var(--gold);}
.btn-icon{font-size:20px;display:inline-flex;align-items:center;line-height:1;}
.social-btn .btn-icon{font-size:18px;}
.contact-meta{font-size:12px;color:var(--ink-soft);margin-top:22px;line-height:1.9;font-style:italic;}

/* ===== AUTH ===== */
.auth-wrap{padding:20px 40px 90px;max-width:400px;margin:0 auto;text-align:center;}
.auth-wrap h1{font-family:'Cormorant Garamond',serif;font-size:36px;margin-bottom:30px;}
.field{margin-bottom:18px;text-align:left;}
.field label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;}
.field input{width:100%;border:1px solid var(--line);padding:12px 14px;font-size:14px;background:var(--surface);}
.field input:focus{outline:none;border-color:var(--gold);}
/* Keyboard focus indicator — form inputs already had one (above); this covers
   everything else (buttons, links, nav) which previously fell back to the
   browser default only. :focus-visible so it only shows for keyboard
   navigation, not every mouse click. */
a:focus-visible, button:focus-visible, .btn:focus-visible, [onclick]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:2px;
}
.field-hint{font-size:11.5px;margin-top:20px;color:var(--ink-soft);}
.field-hint a{color:var(--gold-text);font-weight:600;}
.phone-field{display:flex;gap:8px;}
.phone-field .code{width:60px;border:1px solid var(--line);padding:12px 8px;text-align:center;background:var(--surface);}
.check-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--ink-soft);text-align:left;margin:20px 0 26px;line-height:1.5;}
.check-row a{color:var(--gold-text);text-decoration:underline;}

/* ===== VOUCHER PAGE ===== */
.voucher-wrap{padding:10px 40px 90px;max-width:640px;margin:0 auto;}

/* ===== POLICY PAGES ===== */
.policy-wrap{padding:10px 40px 100px;max-width:720px;margin:0 auto;}
.policy-header{text-align:center;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:34px;}
.policy-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px;}
.policy-header h1{font-family:'Cormorant Garamond',serif;font-size:40px;margin-bottom:8px;}
.policy-updated{font-size:12px;color:var(--ink-soft);font-style:italic;}
.policy-body{font-size:14.5px;line-height:1.85;color:var(--ink-soft);}
.policy-body h3{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin:32px 0 12px;padding-top:6px;border-top:1px solid var(--line);}
.policy-body h3:first-child{border-top:none;margin-top:0;}
.policy-body h4{font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink);margin:20px 0 8px;}
.policy-body p{margin-bottom:14px;}
.policy-body ul{margin:0 0 14px;padding-left:22px;}
.policy-body ol{margin:0 0 14px;padding-left:22px;}
.policy-body li{margin-bottom:8px;}
.policy-body li p{margin-bottom:0;}
.policy-body strong{color:var(--ink);}
.policy-callout{background:var(--gold-soft);border-left:3px solid var(--gold);padding:16px 20px;margin:0 0 28px;border-radius:2px;}
.policy-callout p{font-size:13px;font-style:italic;color:#7a6127;margin-bottom:0;}
.policy-link{color:var(--gold-text);font-weight:600;text-decoration:underline;cursor:pointer;}
.voucher-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.voucher-head h2{font-family:'Cormorant Garamond',serif;font-size:30px;}
.voucher-head a{font-size:12px;text-decoration:underline;color:var(--ink-soft);}
.redeem-bar{display:flex;gap:10px;background:var(--gold-soft);padding:16px;margin-bottom:40px;}
.redeem-bar input{flex:1;border:1px solid var(--line);padding:11px 14px;background:var(--surface);font-size:13px;}
.voucher-empty{text-align:center;padding:50px 20px;color:var(--ink-soft);font-size:14px;}
.voucher-empty svg{width:52px;height:52px;color:var(--gold-text);margin-bottom:16px;}
.voucher-empty a{color:var(--gold-text);font-weight:600;text-decoration:underline;}
.voucher-card{border-radius:6px;padding:20px 24px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden;}
.voucher-card.cash{background:linear-gradient(120deg,#3f7a53,#5a9b71);}
.voucher-card.pct{background:linear-gradient(120deg,#b23b3b,#d1584f);}
.voucher-card .vtitle{font-weight:700;font-size:15px;margin-bottom:4px;}
.voucher-card .vcode{font-family:'Space Mono',monospace;font-size:12px;opacity:.9;}
.voucher-card .vexp{position:absolute;bottom:12px;right:18px;font-size:10px;opacity:.85;}
.cart-cycle-select{margin-top:6px;border:1px solid var(--line);padding:5px 8px;font-size:11.5px;background:var(--paper);color:var(--ink-soft);}

/* ===== HOME VIDEO SECTION ===== */
.video-section-wrap{padding:10px 40px 70px;max-width:1000px;margin:0 auto;}
.video-block{display:grid;grid-template-columns:360px 1fr;gap:34px;align-items:center;padding:30px 0;border-top:1px solid var(--line);}
.video-block:first-child{border-top:none;}
.video-frame{background:#111;border-radius:4px;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gold-soft);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.video-frame iframe,.video-frame video{width:100%;height:100%;border:0;display:block;}
.video-info h3{font-family:'Cormorant Garamond',serif;font-size:24px;margin-bottom:8px;}
.video-info p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;}
@media(max-width:700px){ .video-block{grid-template-columns:1fr;} }

/* ===== REVIEWS & PAST DEALS ===== */
.reviews-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.deals-counter{background:linear-gradient(135deg,#1b3a6b,#2d5aa8);color:#fff;padding:18px 26px;border-radius:4px;text-align:center;min-width:180px;}
.deals-counter .lbl2{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:6px;}
.deals-counter .num{font-family:'Cormorant Garamond',serif;font-size:38px;line-height:1;}
.deals-counter .asof{font-size:10px;opacity:.75;margin-top:6px;}
.past-deal-card{border:1px solid var(--line);background:var(--surface);}
.past-deal-photo{height:130px;background:linear-gradient(135deg,#2a4a7a,#3f6bb0);display:flex;align-items:center;justify-content:center;color:#dbe6ff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.past-deal-info{padding:14px 16px;font-size:12.5px;color:var(--ink-soft);}
.past-deal-info strong{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px;}

/* ===== AP PORTAL ===== */
.ap-wrap{padding:10px 40px 80px;max-width:1300px;margin:0 auto;}
.partner-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;margin-bottom:10px;}
.partner-role-card{border:1px solid var(--line);background:var(--surface);padding:22px 22px 24px;}
.partner-role-kicker{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px;font-weight:700;}
.partner-role-card h3{font-family:'Cormorant Garamond',serif;font-size:19px;margin-bottom:8px;}
.partner-role-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:12px;}
.partner-role-card ul{padding-left:16px;font-size:12px;color:var(--ink-soft);line-height:1.9;}
.partner-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:26px;}
.partner-tabs a{padding:11px 16px;font-size:12.5px;letter-spacing:.02em;cursor:pointer;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;}
.partner-tabs a:hover{color:var(--ink);}
.partner-tabs a.active{color:var(--ink);border-bottom-color:var(--gold);font-weight:600;}
.partner-tab{display:none;}
.partner-tab.active{display:block;}
@media(max-width:700px){ .partner-role-grid{grid-template-columns:1fr;} }
.ap-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:24px 0 30px;}
.ap-stat{background:var(--surface);padding:22px 20px;text-align:center;}
.ap-stat .num{font-family:'Cormorant Garamond',serif;font-size:32px;}
.ap-stat .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;}
.ap-link-box{background:var(--panel);color:#eee;padding:22px 26px;border-radius:4px;}
.ap-link-box .btn.outline{background:transparent;color:#f2f0e8;border:1px solid #f2f0e8;}
.ap-link-box .btn.outline:hover{background:#f2f0e8;color:#14140f;}
.ap-link-box .lbl2{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.ap-link-value{font-size:13px;word-break:break-all;}
.tier-badge-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.tier-badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--ink-soft);}
.tier-badge.tier-e{background:#8a8778;}
.tier-badge.tier-d{background:#6d8a6f;}
.tier-badge.tier-c{background:#3f7a53;}
.tier-badge.tier-b{background:#2d6b8f;}
.tier-badge.tier-a{background:#b08d3e;}
.tier-badge.tier-s{background:#8a2f2f;}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.chart-card{border:1px solid var(--line);background:var(--surface);padding:18px 20px;}
.chart-card-title{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
@media(max-width:700px){ .chart-grid{grid-template-columns:1fr;} }
.chart-canvas-wrap{position:relative;height:200px;}
.perf-panel{background:var(--panel);border-radius:6px;padding:26px 28px;margin-top:26px;}
.perf-panel-title{font-family:'Cormorant Garamond',serif;font-size:20px;color:#f2f0e8;margin-bottom:16px;}
.perf-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;}
.perf-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.perf-opt{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#d8d5c9;font-size:11px;line-height:1.4;padding:12px 8px;border-radius:4px;cursor:pointer;text-align:center;transition:.15s;}
.perf-opt:hover{background:rgba(255,255,255,0.12);}
.perf-opt.active{background:var(--gold);color:#1b1b17;border-color:var(--gold);font-weight:600;}
.perf-graph{background:#0c0c0a;border-radius:4px;padding:20px;display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:stretch;}
.perf-summary{background:rgba(255,255,255,0.04);border-radius:4px;padding:18px 20px;overflow-y:auto;max-height:280px;}
.perf-summary-title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600;}
.perf-summary-row{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;color:#e8e6da;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.perf-summary-row:last-child{border-bottom:none;}
.perf-summary-row .k{color:#d8d5c9;}
.perf-summary-row .v{font-family:'Space Mono',monospace;font-weight:600;text-align:right;font-size:14.5px;}
.perf-summary-empty{font-size:13.5px;color:#9a978c;font-style:italic;}
@media(max-width:700px){ .perf-graph{grid-template-columns:1fr;} .perf-summary{max-height:none;} }
@media(max-width:700px){ .perf-layout{grid-template-columns:1fr;} .perf-options{grid-template-columns:repeat(3,1fr);} }
.tier-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px;}
.tier-table th,.tier-table td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line);}
.tier-table th{color:var(--ink-soft);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.04em;}

/* ===== MY PROFILE ===== */
.profile-shell{display:grid;grid-template-columns:220px 1fr;gap:0;max-width:1200px;margin:0 auto;border:1px solid var(--line);background:var(--surface);}
.profile-side{background:var(--panel);color:#e8e6da;padding:26px 22px;}
.profile-identity{font-size:12.5px;font-weight:600;letter-spacing:.02em;padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.12);word-break:break-word;}
.profile-nav{display:flex;flex-direction:column;gap:4px;}
.profile-nav a{padding:10px 12px;font-size:13px;cursor:pointer;border-radius:3px;color:#b8b6a8;}
.profile-nav a:hover{background:rgba(255,255,255,0.05);color:#fff;}
.profile-nav a.active{background:var(--gold);color:#1b1b17;font-weight:600;}
.profile-main{padding:32px 34px;}
.profile-tab{display:none;}
.profile-tab.active{display:block;}
.referral-current{background:var(--paper);border:1px solid var(--line);padding:16px 18px;margin-bottom:22px;max-width:420px;}
.referral-current .lbl2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;}
.referral-value{font-family:'Space Mono',monospace;font-size:15px;font-weight:600;}
@media(max-width:700px){
  .profile-shell{grid-template-columns:1fr;}
  .profile-side{padding:18px 20px;}
  .profile-nav{flex-direction:row;flex-wrap:wrap;}
}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,15,12,0.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--surface);max-width:420px;width:100%;padding:36px 34px;position:relative;border-radius:4px;}
.modal-close{position:absolute;top:16px;right:18px;cursor:pointer;font-size:16px;color:var(--ink-soft);}
.modal-box h4{font-family:'Cormorant Garamond',serif;font-size:22px;text-align:center;margin-bottom:18px;}
.modal-box ol{padding-left:18px;font-size:13.5px;line-height:1.9;color:var(--ink-soft);}
.modal-box .foot{text-align:center;margin-top:22px;font-size:12.5px;}
.modal-box .foot a{color:var(--gold-text);font-weight:600;text-decoration:underline;}
.lightbox-box{position:relative;max-width:min(90vw,720px);max-height:88vh;}
.lightbox-box img{max-width:100%;max-height:88vh;display:block;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,0.4);}
.lightbox-box .modal-close{top:-30px;right:0;font-size:20px;}
.order-detail-product{border:1px solid var(--line);padding:14px 16px;border-radius:4px;margin-bottom:10px;background:var(--paper);}
.receipt-actions{max-width:640px;margin:0 auto 20px;text-align:right;display:flex;justify-content:flex-end;gap:10px;}
.receipt-doc{max-width:640px;margin:0 auto 60px;background:var(--surface);border:1px solid var(--line);padding:48px 50px;font-family:'Inter',sans-serif;}
.receipt-doc .r-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:22px;margin-bottom:26px;}
.receipt-doc .r-brand{display:flex;align-items:center;gap:12px;}
.receipt-doc .r-brand img{width:40px;height:40px;object-fit:contain;}
.receipt-doc .r-brand-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;}
.receipt-doc .r-brand-meta{font-size:10.5px;color:var(--ink-soft);margin-top:2px;line-height:1.5;}
.receipt-doc .r-meta-right{text-align:right;font-size:12px;}
.receipt-doc .r-meta-right .r-no{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;}
.receipt-doc .r-meta-right div{margin-top:3px;color:var(--ink-soft);}
.receipt-doc .r-bill-to{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:6px;}
.receipt-doc .r-customer{font-size:13.5px;margin-bottom:28px;}
.receipt-doc table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.receipt-doc th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:8px;}
.receipt-doc td{padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;}
.receipt-doc .r-totals{margin-left:auto;max-width:280px;}
.receipt-doc .r-totals .row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;color:var(--ink-soft);}
.receipt-doc .r-totals .row.grand{color:var(--ink);font-weight:700;font-size:15px;border-top:1px solid var(--ink);padding-top:10px;margin-top:6px;}
.receipt-doc .r-footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-soft);text-align:center;line-height:1.7;}
@media print{
  .no-print, .theme-widget, header.site-nav, .toast, .user-dropdown, .mobile-nav{ display:none !important; }
  body, #app{ background:#fff; box-shadow:none; }
  .view{ display:none !important; }
  #view-receipt.active{ display:block !important; }
  .receipt-doc{ border:none; max-width:100%; padding:0; margin:0; }
}
.verified-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--green);background:#eaf3ec;padding:3px 9px;border-radius:12px;margin-bottom:10px;letter-spacing:.02em;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{padding:18px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;font-size:14.5px;}
.faq-question .chevron{transition:.2s;color:var(--gold-text);font-size:13px;}
.faq-item.open .faq-question .chevron{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:.25s ease;font-size:13.5px;color:var(--ink-soft);line-height:1.7;}
.faq-item.open .faq-answer{max-height:400px;padding-bottom:18px;}
.expandable-photo{cursor:zoom-in;}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:14px 26px;border-radius:30px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:200;letter-spacing:.02em;}

.theme-widget{position:fixed;bottom:26px;right:26px;display:flex;align-items:center;gap:8px;background:var(--panel);color:#e8e6da;padding:11px 18px;border-radius:30px;font-size:12px;letter-spacing:.02em;cursor:pointer;z-index:150;box-shadow:0 8px 24px rgba(0,0,0,0.18);transition:.2s;}
.theme-widget:hover{background:#1c1c18;}
.theme-widget #themeIcon{font-size:14px;}
@media(max-width:700px){ .theme-widget{right:auto;left:26px;} }
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== PROTO BANNER ===== */

@media(max-width:860px){
  .product-layout,.detail-layout,.pay-layout{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);margin:50px 18px;}
  .stat{padding:24px 14px;}
  #reviewsGrid{grid-template-columns:1fr;}
  nav.main-links{display:none;}
  .hamburger-btn{display:flex;}
  .mobile-nav{display:flex;}
  header.site-nav{padding:14px 16px;}
  .nav-left{gap:12px;}
  .nav-right{gap:14px;}
  .fx-pill{font-size:11px;padding:6px 10px;}
  .hero h1{font-size:40px;}
  .hero-panel{padding:34px 24px;}

  /* Every major page container was using the same fixed 40px desktop side
     padding — fine with a wide viewport to spare, but on a narrow phone that
     alone eats a huge share of the usable width before any content even
     starts. This is the single biggest reason pages felt cramped. */
  .back-row,.hero,.product-layout,.detail-layout,.pay-layout,.thanks,
  .review-box,.contact-wrap,.auth-wrap,.voucher-wrap,.policy-wrap,
  .video-section-wrap,.ap-wrap{
    padding-left:18px;
    padding-right:18px;
  }
  footer.site-footer{padding:24px 18px;flex-direction:column;gap:10px;text-align:center;}

  /* My Profile's sidebar+content layout was a fixed two-column grid that
     never collapsed at all on mobile — the dark sidebar and the content were
     forced side by side into a viewport with no room for either. */
  .profile-shell{grid-template-columns:1fr;}
  .profile-side{padding:18px 16px;}
  .profile-nav{flex-direction:row;flex-wrap:wrap;gap:8px;}
  .profile-nav a{flex:1;text-align:center;padding:9px 10px;font-size:12px;}

  /* Partner Portal's stat grid already collapses via the shared .stats-row
     rule above; its bank-withdrawal form was already single-column with its
     own max-width, so neither needed a separate rule here. */

  /* Modals were using a fixed desktop width regardless of viewport. */
  .modal-box{max-width:92vw;padding:26px 20px;}
  .order-detail-product{padding:12px 14px;}

  /* Checkout step indicator's fixed max-width left it looking squeezed and
     off-centre on a narrow screen. */
  .checkout-steps{max-width:100%;padding:0 10px;}
  .checkout-step-label{font-size:9.5px;}

  /* Receipt/voucher/order row lists reuse the same admin-style row pattern,
     which assumes far more horizontal room than a phone actually has. */
  .admin-row{flex-direction:column;align-items:flex-start;gap:6px;}
  .admin-row .col.tight{width:100%;}

  /* The wordmark subtitle already hides at 700px — also tighten the mark
     itself so the header's right side doesn't fight the cart icon for room. */
  .wordmark .mark{width:32px;height:32px;}
}
@media(max-width:480px){
  .back-row,.hero,.product-layout,.detail-layout,.pay-layout,.thanks,
  .review-box,.contact-wrap,.auth-wrap,.voucher-wrap,.policy-wrap,
  .video-section-wrap,.ap-wrap{
    padding-left:14px;
    padding-right:14px;
  }
  .hero h1{font-size:32px;}
  .btn{padding:13px 20px;font-size:11.5px;}
  .card-foot{flex-direction:column;align-items:stretch;gap:10px;}
  .card-foot .btn{width:100%;}
  .checkout-step-label{display:none;} /* dots alone read fine at this width; labels were wrapping awkwardly */
  .fx-pill{display:none;} /* the exchange-rate page itself is one tap away; the header doesn't need to carry it at this width */
  .theme-widget{padding:11px;border-radius:50%;}
  .theme-widget #themeLabel{display:none;} /* icon-only on mobile — the full pill was landing on top of content depending on scroll position */
}

/* =====================================================================
   UI POLISH LAYER — refinements on top of the existing design. Brand,
   colours and layouts are unchanged; this only tightens details.
   ===================================================================== */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
::selection{background:var(--gold-soft);color:var(--ink);}
h1,h2,h3,.page-title{text-wrap:balance;}
p,li{text-wrap:pretty;}
.mono,.price-tag,.pay-row,.voucher-card .vcode{font-variant-numeric:tabular-nums;}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--gold);}

/* Header — labels like "Customer Reviews" / "Contact Us" were wrapping onto
   two lines on common laptop widths (≈1280px). Keep them on one line,
   tighten spacing, and hand over to the hamburger menu before it gets cramped. */
nav.main-links a,.fx-pill{white-space:nowrap;}
nav.main-links a{transition:color .2s ease;}
nav.main-links a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1);}
nav.main-links a:hover::after,nav.main-links a.active::after{transform:scaleX(1);}
@media(max-width:1440px){
  nav.main-links{gap:22px;}
  nav.main-links a{font-size:12px;letter-spacing:.05em;}
  .nav-left{gap:22px;}
  .nav-right{gap:16px;}
}
@media(max-width:1240px){
  nav.main-links{display:none;}
  .hamburger-btn{display:flex;}
  .mobile-nav{display:flex;}
}

/* Product cards — smoother lift, image zoom, consistent corners */
.product-card{border-radius:4px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .25s ease;}
.product-card:hover{box-shadow:0 18px 38px rgba(20,20,15,0.09);}
.product-card .card-thumb img{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.product-card:hover .card-thumb img{transform:scale(1.05);}
.wishlist-heart:active{transform:scale(.92);}

/* Inputs — one consistent, soft focus state everywhere */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{transition:border-color .2s ease,box-shadow .2s ease;}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,62,0.16);}

/* Modals — entrance motion, depth, and never taller than the screen */
.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.modal-overlay.show{animation:polishOverlayIn .2s ease;}
.modal-overlay.show .modal-box{animation:polishModalIn .34s cubic-bezier(.16,1,.3,1);}
.modal-box{box-shadow:0 24px 60px rgba(0,0,0,0.22);border:1px solid var(--line);max-height:calc(100vh - 40px);overflow-y:auto;}
.modal-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;top:12px;right:12px;transition:background-color .2s,color .2s;}
.modal-close:hover{background:var(--gold-soft);color:var(--ink);}
.lightbox-box .modal-close:hover{background:rgba(255,255,255,0.15);color:#fff;}
@keyframes polishOverlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes polishModalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}

/* Toast — lift it off the page */
.toast{box-shadow:0 12px 30px rgba(0,0,0,0.2);}

/* Profile sidebar — the "Enable Notifications" button and its hint used
   dark-ink colours on the always-dark sidebar, so they were near invisible. */
.profile-side .btn.outline{color:#e8e6da;border-color:rgba(255,255,255,0.3);}
.profile-side .btn.outline:hover{background:var(--gold);border-color:var(--gold);color:#1b1b17;}
#notificationToggleWrap{border-top-color:rgba(255,255,255,0.12) !important;}
#notificationToggleWrap > div{color:#9d9b8e !important;}
.profile-nav a{transition:background-color .2s,color .2s;}

/* Dark mode — card tag text and wishlist heart were almost invisible */
html[data-theme="dark"] .card-thumb .tag,
html[data-theme="dark"] .community-card .comm-media .comm-fallback{color:#eadfc0;}
html[data-theme="dark"] .wishlist-heart{background:rgba(21,21,18,0.92);color:#d6d3c7;box-shadow:0 2px 10px rgba(0,0,0,0.45);}
html[data-theme="dark"] .wishlist-heart.active,html[data-theme="dark"] .wishlist-heart:hover{color:#e0625a;}
html[data-theme="dark"] .product-card:hover{box-shadow:0 18px 40px rgba(0,0,0,0.5);}
html[data-theme="dark"] .modal-box{box-shadow:0 24px 70px rgba(0,0,0,0.6);}
html[data-theme="dark"] ::selection{background:var(--gold);color:#0c0c0a;}

/* EA running time — trust signal set by admin per EA */
.ea-running{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--green);font-weight:600;margin:2px 0 10px;letter-spacing:.01em;}
.ea-running .live-dot{flex:0 0 auto;}
.ea-running-panel{display:flex;align-items:center;gap:12px;border:1px solid rgba(63,122,83,0.35);background:rgba(63,122,83,0.07);padding:12px 16px;margin:4px 0 16px;border-radius:4px;}
.ea-running-panel .live-dot{flex:0 0 auto;width:9px;height:9px;}
.ea-running-main{font-weight:700;font-size:14.5px;color:var(--green);font-variant-numeric:tabular-nums;}
.ea-running-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;}
html[data-theme="dark"] .ea-running,html[data-theme="dark"] .ea-running-main{color:#6fbf8a;}
html[data-theme="dark"] .ea-running-panel{border-color:rgba(111,191,138,0.35);background:rgba(111,191,138,0.08);}

/* Announcement photo */
.ann-photo{display:block;width:100%;max-height:320px;object-fit:cover;border-radius:6px;margin:4px 0 12px;cursor:zoom-in;border:1px solid var(--line);}
@media(max-width:480px){ .ann-photo{max-height:220px;} }
.ann-body{white-space:pre-line;}
.acct-note{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;}