:root { --ink:#17233d; --muted:#697286; --brand:#3d50d9; --brand-dark:#2e3db2; --line:#e6e9ef; --bg:#fafbfdfc; --header:76px; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:14px/1.65 "Segoe UI",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
img,svg { max-width:100%; }
:focus-visible { outline:3px solid #6584ee; outline-offset:4px; }
.wrap,.header-shell { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.035em; line-height:1.2; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:-80px; left:12px; padding:10px 18px; background:var(--ink); color:white; z-index:99; }
.skip:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:30; background:#ffffffef; backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.header-shell { min-height:var(--header); display:flex; justify-content:space-between; align-items:center; gap:24px; position:relative; }
.logo { display:inline-flex; gap:9px; align-items:center; white-space:nowrap; font-size:17px; font-weight:750; letter-spacing:-.045em; }
.logo-mark { display:grid; place-items:center; width:34px; height:36px; border-radius:11px 11px 11px 3px; color:white; background:var(--brand); font-size:18px; }
.nav-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; border:1px solid var(--line); background:white; border-radius:10px; cursor:pointer; }
.nav-toggle span:not(.sr-only) { height:2px; width:17px; background:var(--ink); }
.nav-panel { display:none; position:absolute; inset:100% 0 auto; background:white; padding:12px; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 15px 24px #19233d15; max-height:calc(100dvh - 90px); overflow:auto; }
.nav-panel.is-open { display:block; }
.nav-links,.nav-actions { display:grid; gap:3px; }
.nav-links a,.nav-actions a { padding:10px 9px; font-size:12px; font-weight:600; border-radius:8px; min-height:44px; }
.nav-links a:hover,.nav-links a[aria-current] { color:var(--brand); background:#f2f4fb; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; border:1px solid transparent; border-radius:9px; padding:10px 19px; font-size:13px; font-weight:650; cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:var(--brand); box-shadow:0 5px 10px #3d50d914; }
.btn-primary:hover { background:var(--brand-dark); box-shadow:0 8px 16px #3d50d928; }
.btn-ghost { background:white; border-color:#dce1eb; color:var(--ink); }
.btn-light { background:#fff; color:#28367f; }
.btn-block { width:100%; }
button:disabled { color:#697286; background:#edf0f6; box-shadow:none; cursor:not-allowed; }
button:disabled:hover { transform:none; }
.text-link { display:inline-flex; gap:12px; align-items:center; color:var(--brand); font-size:12px; font-weight:650; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:.13em; color:#7b8394; margin-bottom:13px; }
.hero { background:radial-gradient(ellipse at 20% 50%,#f5f7ff 0,transparent 60%),#fafbfe; padding:44px 0 40px; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:68px; }
.hero-copy { padding:15px 0; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:9px; color:#596785; }
.ghana-flag { display:grid; place-items:center; width:22px; height:16px; font-size:10px; line-height:1; color:#182033; background:linear-gradient(#db3b3b 33%,#f7ce4c 33% 66%,#3e9366 66%); border-radius:3px; }
.hero h1 { font-size:clamp(32px,4.1vw,50px); line-height:1.13; letter-spacing:-.055em; margin:21px 0; font-weight:750; }
.hero h1 > span { color:var(--brand); display:inline-block; position:relative; }
.hero h1 > span::after { content:""; position:absolute; bottom:-7px; left:0; right:-8px; height:9px; border-top:3px solid #b9c5fb; border-radius:50%; transform:rotate(-3deg); }
.lede { font-size:14px; max-width:420px; color:var(--muted); line-height:1.85; margin:25px 0; }
.hero-actions,.split-actions { display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.trust { display:flex; flex-wrap:wrap; gap:8px 15px; padding:0; list-style:none; font-size:10px; color:#626f86; margin:23px 0; }
.trust li { display:flex; gap:5px; align-items:center; }
.trust li span { color:var(--brand); }
.hero-networks { display:flex; align-items:center; gap:16px; border-top:1px solid #e5e9f2; padding-top:20px; max-width:415px; }
.hero-networks > span { font-size:8px; letter-spacing:.08em; color:#8390a5; max-width:90px; }
.hero-networks b { font-size:14px; letter-spacing:-.03em; }
.mini-mtn { color:#886915; }.mini-telecel { color:#c0344f; }.mini-at { color:#285dbe; }
.purchase-stage { position:relative; isolation:isolate; background:linear-gradient(145deg,#223684,#4457c4); border-radius:24px; padding:21px 25px 12px; overflow:hidden; }
.purchase-stage::before,.purchase-stage::after { content:""; position:absolute; z-index:-1; width:350px; height:350px; border:1px solid #ffffff17; border-radius:50%; right:-155px; top:-165px; }
.purchase-stage::after { width:420px; height:420px; right:-190px; top:-200px; }
.stage-caption,.stage-bottom { display:flex; align-items:center; justify-content:space-between; color:#d4dcff; font-size:8px; letter-spacing:.13em; }
.stage-caption { justify-content:flex-start; gap:9px; margin-bottom:17px; }
.signal-bars { display:inline-flex; gap:3px; align-items:flex-end; height:18px; }
.signal-bars i { width:4px; background:currentColor; height:5px; border-radius:2px; }
.signal-bars i:nth-child(2) { height:9px; }.signal-bars i:nth-child(3) { height:13px; }.signal-bars i:nth-child(4) { height:18px; }
.stage-bottom { padding-top:8px; }.stage-bottom > span:last-child { font-size:24px; }
.buy-card { padding:23px; background:white; border:1px solid #e3e7ef; border-radius:16px; box-shadow:0 12px 25px #1a234514; }
.purchase-stage .buy-card { border:0; box-shadow:0 12px 25px #14245144; }
.purchase-heading { display:flex; align-items:center; justify-content:space-between; }
.purchase-heading .eyebrow { font-size:8px; margin-bottom:4px; }
.purchase-heading h2 { font-size:21px; margin:0; }
.purchase-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:var(--brand); background:#f0f3ff; font-size:22px; }
.purchase-intro { font-size:11px; color:#7a8394; margin:7px 0 18px; }
.network-picks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; margin:0 0 17px; border:0; }
.network-picks legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.network-picks label { position:relative; display:flex; align-items:center; justify-content:center; min-height:46px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#fff; }
.network-picks input { position:absolute; width:1px; height:1px; opacity:0; padding:0; margin:0; }
.network-picks label:has(input:checked) { background:#f1f3ff; border-color:#6675df; box-shadow:0 0 0 1px #6675df; }
.network-picks label:has(input:focus-visible) { outline:3px solid #8798f5; outline-offset:3px; }
.net-mark { font-size:12px; font-weight:750; }
.net-mark.mtn { color:#886719; }.net-mark.telecel { color:#c0364c; }.net-mark.at { color:#2c5bc3; }
.field,.page form.card label { display:block; font-size:11px; font-weight:600; color:#58637a; margin:0 0 13px; }
.field input,.field select,.page input:not([type="radio"]),.page select { display:block; width:100%; min-width:0; height:44px; padding:0 12px; margin-top:5px; font-size:16px; color:var(--ink); background:#fafbfd; border:1px solid #e4e8f0; border-radius:8px; }
input::placeholder { color:#919aac; font-size:12px; }
.bundle-hint,.purchase-footnote { color:#7c8596; font-size:10px; line-height:1.5; }
.bundle-hint { min-height:30px; margin:0 0 12px; }
.purchase-footnote { text-align:center; margin:10px 0 0; }
.form-error { display:none; color:#b32627; font-size:12px; }.form-error.is-visible { display:block; }
.network-strip { border-block:1px solid var(--line); scroll-margin-top:var(--header); background:#fff; }
.status-layout { display:flex; align-items:center; gap:25px; padding-block:17px; }
.status-label { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.status-label h2 { font-size:11px; margin:0; letter-spacing:0; }
.status-symbol { color:#657193; font-size:24px; }
.status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:1; gap:16px; }
.status-card { display:flex; gap:10px; align-items:center; justify-content:center; border-left:1px solid var(--line); }
.pill { font-size:9px; color:#737e92; white-space:nowrap; }
.dot { width:5px; height:5px; border-radius:50%; background:#a8b1c1; display:inline-block; margin-right:4px; }
.section { padding:35px 0; scroll-margin-top:var(--header); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.section-head .eyebrow { margin-bottom:8px; }
.section-head h2 { font-size:25px; margin:0; font-weight:700; }
.section-head > p { color:#7a8496; font-size:12px; margin:0; }
.network-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.network-card { position:relative; isolation:isolate; overflow:hidden; min-height:242px; padding:22px; border:1px solid #00000006; border-radius:15px; transition:transform .2s,box-shadow .2s; color:var(--network-ink); background:var(--network-bg); display:flex; flex-direction:column; justify-content:space-between; }
.network-card:hover { transform:translateY(-4px); box-shadow:0 15px 25px #18233d14; }
.network-mtn { --network-bg:#ffdb53; --network-ink:#3d341b; --art:#c79b15; }
.network-telecel { --network-bg:#fcedef; --network-ink:#a6223e; --art:#d97c8b; }
.network-at { --network-bg:#e9f0ff; --network-ink:#254daf; --art:#7b9ce5; }
.network-card-top { display:flex; align-items:center; justify-content:space-between; }
.network-emblem { font-size:22px; font-weight:800; letter-spacing:-.065em; }
.network-mtn .network-emblem { border:2px solid currentColor; border-radius:50%; padding:0 10px; font-size:18px; font-style:italic; }
.round-arrow { display:grid; place-items:center; width:31px; height:31px; border:1px solid #00000013; border-radius:50%; font-size:20px; }
.network-art { position:absolute; z-index:-1; right:-6px; top:60px; display:flex; gap:9px; align-items:end; transform:rotate(-17deg); opacity:.27; }
.network-art span { width:22px; height:32px; background:var(--art); border-radius:9px; }
.network-art span:nth-child(2) { height:58px; }.network-art span:nth-child(3) { height:88px; }.network-art span:nth-child(4) { height:120px; }
.network-card h3 { font-size:16px; margin:20px 0 4px; }
.network-card p { font-size:11px; margin:0 0 17px; }
.network-link { display:flex; justify-content:space-between; border-top:1px solid #00000013; padding-top:11px; font-size:11px; font-weight:650; }
.popular-section { background:#fafbfe; border-block:1px solid #f0f2f6; }
.empty { display:flex; align-items:center; gap:17px; padding:22px; border:1px dashed #cfd7e7; border-radius:12px; background:#fff; }
.empty h3 { font-size:15px; margin:0 0 5px; }.empty p { font-size:12px; color:var(--muted); margin:0; }
.empty > .text-link { margin-left:auto; white-space:nowrap; }
.empty-icon { display:grid; place-items:center; width:45px; height:45px; background:#edf1fb; color:#8594bf; border-radius:12px; flex-shrink:0; }
.bundle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bundle-card { padding:22px; border:1px solid var(--line); border-radius:14px; background:white; }
.bundle-card h3 { font-size:25px; margin:13px 0 6px; }.price { font-weight:750; }
.delivery-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; background:#f0f3fa; border-radius:16px; padding:25px; }
.delivery-copy { display:flex; align-items:center; gap:16px; }
.delivery-copy .eyebrow { margin-bottom:6px; }.delivery-copy h2 { font-size:23px; margin:0 0 8px; }.delivery-copy p:last-child { font-size:11px; color:var(--muted); margin:0; }
.delivery-icon { flex-shrink:0; width:49px; height:49px; color:#7382b9; }.delivery-icon svg { stroke:currentColor; stroke-width:1.7; }
.track-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; }.track-form .field { margin:0; }
.delivery-controls > .text-link { font-size:10px; margin-top:7px; font-weight:500; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.step { border-top:1px solid #dce2ef; padding-top:17px; }
.step-number { display:inline-block; font-size:27px; color:#acb7d0; font-weight:300; margin-bottom:16px; letter-spacing:-.05em; }
.step h3 { font-size:15px; margin-bottom:8px; }.step p { font-size:12px; color:var(--muted); max-width:260px; margin:0; }
.reseller-panel { display:grid; grid-template-columns:1.2fr .8fr; gap:65px; align-items:center; padding:40px; background:radial-gradient(ellipse at 100% 0,#4759a2,transparent 65%),#17294f; border-radius:20px; overflow:hidden; color:white; }
.reseller-copy .eyebrow { color:#a8bbe6; }.reseller-copy h2 { font-size:30px; line-height:1.2; margin-bottom:17px; }.reseller-copy h2 span { color:#c3d1ff; }
.reseller-copy > p:not(.eyebrow) { font-size:12px; color:#bdc9e0; max-width:390px; }
.reseller-more { font-size:12px; margin-left:8px; color:#d5def0; }
.store-illustration { background:white; color:var(--ink); border-radius:12px; transform:rotate(-5deg); box-shadow:0 15px 30px #0b183040; position:relative; margin:8px 12px 18px; }
.store-browser { display:flex; gap:4px; align-items:center; padding:12px; background:#f1f3f9; border-radius:12px 12px 0 0; }
.store-browser > span { width:5px; height:5px; border-radius:50%; background:#c5cde0; }.store-browser small { font-size:7px; margin-left:12px; color:#7f8ba2; letter-spacing:.12em; }
.store-awning { height:25px; margin:0 15px; background:repeating-linear-gradient(90deg,#677ee0 0 22px,#e5eafa 22px 44px); border-radius:0 0 7px 7px; }
.store-content { text-align:center; padding:16px 21px 23px; }.store-avatar { display:grid; place-items:center; width:33px; height:33px; margin:0 auto 7px; border-radius:50%; color:#5b6ace; background:#f0f2fd; font-size:26px; }.store-content strong { display:block; font-size:14px; }.store-content p { font-size:9px; color:#8993a8; }
.store-networks { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:15px; }.store-networks b { padding:9px 3px; font-size:9px; background:#edf2ff; border-radius:5px; color:#3f62ad; }.store-networks b:first-child { background:#fff2b4; color:#8a6b20; }.store-networks b:nth-child(2) { background:#fce7ec; color:#b44159; }
.store-button { padding:8px; border-radius:5px; background:#3e53c8; color:#fff; font-size:10px; }
.store-caption { position:absolute; bottom:-14px; right:-17px; background:#dae6ff; color:#354f87; padding:7px 14px; font-size:10px; border-radius:6px; transform:rotate(8deg); }
.benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; }.benefit > span { font-size:28px; color:#5e70b5; }.benefit h3 { font-size:13px; margin:11px 0 7px; }.benefit p { font-size:11px; color:var(--muted); margin:0; }
.site-footer { margin-top:20px; padding:35px 0 20px; background:#f8f9fc; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:25px; }.site-footer h2 { font-size:12px; margin-bottom:12px; }.site-footer .footer-grid > :first-child h2 { font-size:18px; }.site-footer p { font-size:11px; color:#8590a3; max-width:230px; }.site-footer a { display:block; font-size:11px; color:#727e92; min-height:30px; }.site-footer a:hover { color:var(--brand); }.legal { border-top:1px solid var(--line); margin-top:24px; padding-top:17px; font-size:10px; color:#8993a5; }
.page { width:min(560px,calc(100% - 40px)); margin:35px auto 50px; min-height:45vh; }.page h1 { font-size:26px; }.page .muted,.muted { color:var(--muted); }.page .buy-card { margin-top:22px; }.page form.card { display:grid; gap:10px; }.card { padding:23px; border:1px solid var(--line); border-radius:13px; margin-top:20px; }.card h2 { font-size:18px; }.card p { font-size:13px; }.page .network-picks label { margin:0; }
.mobile-cta { display:none; }
.shop-hero { padding:28px 0 8px; }.shop-hero h1 { font-size:28px; margin-bottom:6px; }.shop-hero p { max-width:460px; color:var(--muted); }
.shop-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }.shop-filters a { min-height:36px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.shop-filters a[aria-current] { background:#f1f3ff; border-color:#6675df; }
.shop-grid { display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 28px; }
.shop-card { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; }
a.shop-card:hover,a.shop-card:focus-visible { border-color:#6675df; transform:translateY(-2px); }
.seller-main { padding:24px 0 40px; }.seller-main h1 { font-size:26px; }
@media (min-width:640px) { .shop-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) { .shop-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.btn.is-loading { opacity:.7; pointer-events:none; }.btn.is-loading::after { content:""; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:1180px) {
    .header-shell { gap:25px; }.nav-toggle { display:none; }.nav-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; position:static; padding:0; box-shadow:none; border:0; flex:1; background:none; overflow:visible; }.nav-links,.nav-actions { display:flex; align-items:center; gap:3px; }.nav-links a,.nav-actions a { white-space:nowrap; font-size:11px; }.nav-actions .btn { padding:9px 14px; }
}
@media(max-width:1000px) {
    .hero-grid { gap:30px; }.purchase-stage { padding:18px 17px 9px; }.status-layout { flex-direction:column; gap:8px; align-items:stretch; }.status-label { justify-content:center; }.status-card:first-child { border:0; }.reseller-panel { gap:30px; padding:30px; }.delivery-panel { grid-template-columns:1fr; gap:20px; }
}
@media(max-width:719px) {
    :root { --header:64px; }.wrap,.header-shell { width:calc(100% - 36px); }.hero { padding:23px 0 25px; }.hero-grid { grid-template-columns:1fr; gap:25px; }.hero-copy { padding:0; }.hero h1 { font-size:36px; margin:16px 0; }.hero .lede { font-size:13px; margin:22px 0; max-width:360px; }.hero-networks { display:none; }.trust { margin-bottom:0; font-size:9px; gap:10px; }.purchase-stage { padding:17px 16px 8px; border-radius:17px; }.buy-card { padding:20px; }.stage-caption { font-size:7px; }.stage-bottom { font-size:7px; }.status-layout { padding-block:14px; }.status-grid { gap:6px; }.status-card { flex-direction:column; gap:2px; }.pill { font-size:8px; }.section { padding:25px 0; }.section-head { gap:12px; margin-bottom:17px; }.section-head h2 { font-size:22px; }.section-head > p { display:none; }.section-head .eyebrow { font-size:8px; }.section-head > .text-link { font-size:10px; max-width:100px; }.network-grid { grid-template-columns:1fr; gap:12px; }.network-card { min-height:174px; padding:19px; }.network-card h3 { margin-top:16px; }.network-card p { margin-bottom:9px; }.network-art { right:40px; top:24px; }.network-card-bottom { display:flex; justify-content:space-between; align-items:end; gap:10px; }.network-link { border:0; font-size:10px; gap:10px; padding-bottom:9px; }.network-card h3 { font-size:15px; }.empty { flex-wrap:wrap; padding:20px; gap:12px; }.empty > div { flex:1; }.empty > .text-link { margin-left:57px; }.empty h3 { font-size:14px; }.empty p { font-size:11px; }.delivery-panel { padding:20px; }.delivery-copy { gap:10px; }.delivery-copy h2 { font-size:20px; }.delivery-icon { width:36px; }.track-form { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; gap:19px; }.step { position:relative; padding:17px 0 0 49px; }.step-number { position:absolute; top:14px; left:0; }.step h3 { font-size:15px; }.step p { max-width:none; }.reseller-panel { grid-template-columns:1fr; gap:30px; padding:25px; }.reseller-copy h2 { font-size:27px; }.store-illustration { max-width:270px; width:85%; margin:0 auto 15px; }.benefits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }.footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.footer-grid > :first-child { grid-column:1/-1; }.bundle-grid { grid-template-columns:1fr; }.mobile-cta { display:flex; position:fixed; bottom:max(10px,env(safe-area-inset-bottom)); left:12px; right:12px; width:auto; z-index:20; box-shadow:0 6px 20px #26399038; }.has-mobile-cta { padding-bottom:65px; }
}
@media(max-width:359px) { .wrap,.header-shell { width:calc(100% - 28px); }.hero h1 { font-size:31px; }.hero-actions .btn { padding-inline:13px; }.network-card-bottom { display:block; }.network-link { padding:0; justify-content:space-between; }.buy-card { padding:16px; }.stage-caption { letter-spacing:.06em; }.trust { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; } }
/* Shared secondary-page states. */
.availability-note { margin:20px 0 0; padding:15px 17px; border:1px solid #dbe3f4; border-left:3px solid #7184d2; background:#f4f6fc; border-radius:9px; color:#39496c; }
.buy-card .availability-note { margin:4px 0 12px; }
.availability-note strong { display:block; font-size:13px; }
.availability-note p { margin:5px 0 0; font-size:12px; line-height:1.7; }
.page > .muted { line-height:1.8; }
.page > .muted a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.page > form + .muted { margin-top:20px; }
.page > .btn { margin-top:18px; }
.page input:disabled { color:#8c96a9; background:#f2f4f8; cursor:not-allowed; }
#storefronts { scroll-margin-top:calc(var(--header) + 20px); }
/* Customer account forms. */
.auth-page { padding-top:42px; padding-bottom:48px; }
.auth-page h1 { font-size:28px; margin:10px 0; overflow-wrap:anywhere; }
.auth-form { box-shadow:0 12px 40px rgba(34,45,95,.05); }
.auth-form input { min-width:0; }
.auth-error,.auth-success { padding:14px 16px; margin:0 0 20px; border-radius:10px; font-size:13px; line-height:1.6; }
.auth-error { color:#9b283c; background:#fff1f3; border:1px solid #f3cbd3; }
.auth-error ul { margin:6px 0 0; padding-left:18px; }
.auth-success { color:#17543e; background:#effaf4; border:1px solid #bfdfcd; margin-top:20px; }
.page form.auth-form label.remember-row { display:flex; align-items:center; gap:10px; font-weight:400; }
.page .auth-form input[type="checkbox"] { width:18px; height:18px; min-height:18px; padding:0; margin:0; accent-color:var(--brand); flex-shrink:0; }
.auth-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.auth-form-row label { margin-bottom:0; }
@media(max-width:520px) { .auth-form-row { grid-template-columns:1fr; } }
.auth-legal,.auth-switch { text-align:center; font-size:13px; line-height:1.7; }
.auth-legal { margin:16px 0 0; color:#596579; }
.auth-legal a { color:var(--brand); text-decoration:underline; }
.nav-logout { margin:0; }
.nav-logout button { background:none; border:0; color:inherit; font:inherit; padding:10px; cursor:pointer; }
.account-card dd { margin:4px 0 18px; overflow-wrap:anywhere; }
.account-card dt { color:#596579; font-size:12px; }
.account-actions { display:flex; flex-wrap:wrap; gap:10px; }
@media(max-width:430px) { .auth-page { padding-top:28px; }.auth-page h1 { font-size:25px; } }
.auth-shell { display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; width:min(1040px,calc(100% - 40px)); min-height:calc(100dvh - 170px); margin:36px auto 56px; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 20px 50px #17233d12; background:var(--surface,#fff); }
.auth-shell .page.auth-page { width:auto; min-height:auto; margin:0; padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.auth-shell .card.auth-form { box-shadow:none; border:0; padding:0; margin-top:20px; }
.auth-visual { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:52px 44px; color:#fff; background:radial-gradient(ellipse at 100% 0,#4759a2,transparent 65%),#17294f; }
.auth-visual::before,.auth-visual::after { content:""; position:absolute; z-index:-1; border:1px solid #ffffff17; border-radius:50%; }
.auth-visual::before { width:380px; height:380px; right:-160px; top:-170px; }
.auth-visual::after { width:460px; height:460px; right:-210px; top:-220px; }
.auth-visual-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:15px 15px 15px 4px; font-size:24px; font-weight:750; background:linear-gradient(145deg,#3d50d9,#7c3aed); }
.auth-visual h2 { font-size:28px; line-height:1.28; margin:0; max-width:380px; letter-spacing:-.03em; }
.auth-visual > p { font-size:13px; color:#bdc9e0; max-width:340px; margin:0; line-height:1.75; }
.auth-visual-list { list-style:none; display:grid; gap:13px; padding:0; margin:6px 0 0; }
.auth-visual-list li { display:flex; align-items:center; gap:12px; font-size:13px; color:#d4dcff; }
.auth-visual-list li span { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:9px; background:#ffffff17; font-size:14px; }
.auth-options { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 2px; }
.auth-options .remember-row { margin:0; }
.auth-options > a { font-size:12px; font-weight:650; color:var(--brand); white-space:nowrap; }
.auth-options > a:hover { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:900px) {
    .auth-shell { grid-template-columns:1fr; width:min(560px,calc(100% - 40px)); min-height:0; border:0; box-shadow:none; border-radius:0; margin:24px auto 40px; background:none; }
    .auth-visual { display:none; }
    .auth-shell .page.auth-page { padding:0; }
}
#account-profile,#account-orders { scroll-margin-top:calc(var(--header) + 12px); }
.public-header { background:#fff; border-bottom:1px solid rgba(23,35,61,.08); box-shadow:none; backdrop-filter:saturate(1.2) blur(14px); }
.public-header.is-scrolled { border-bottom-color:transparent; box-shadow:0 1px 0 rgba(23,35,61,.06), 0 8px 20px rgba(23,35,61,.05); }
.public-header .header-shell { width:min(1440px,calc(100% - 48px)); min-height:76px; gap:20px; flex-wrap:nowrap; }
.public-header .logo { gap:10px; font-size:19px; font-weight:700; letter-spacing:-.03em; min-width:0; }
.public-header .logo-mark { width:40px; height:40px; border-radius:12px; font-size:18px; background:linear-gradient(145deg,#3d50d9,#7c3aed); }
.public-header .logo-word { overflow:hidden; text-overflow:ellipsis; }
.public-header .header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.public-header .nav-buy { height:43px; min-height:43px; gap:8px; padding:0 22px; border-radius:11px; font-size:14px; font-weight:650; background:linear-gradient(100deg,#3b5bdb,#6d4ad8); box-shadow:none; }
.public-header .nav-buy:hover { background:linear-gradient(100deg,#4668ee,#7b59e4); box-shadow:0 6px 16px rgba(61,80,217,.22); transform:translateY(-1px); }
.public-header .nav-buy-bar { height:40px; min-height:40px; padding:0 14px; }
.public-header .nav-links a,.public-header .nav-login { background:none; }
.public-header a.nav-buy { color:#fff; background:linear-gradient(100deg,#3b5bdb,#6d4ad8); }
.public-header a.nav-buy:hover { color:#fff; background:linear-gradient(100deg,#4668ee,#7b59e4); }
.public-header a.nav-register { background:#fff; }
.public-header .nav-links { gap:4px; }
.public-header .nav-links a { position:relative; min-height:44px; padding:10px 4px; border-radius:0; font-size:15px; font-weight:600; color:var(--ink); }
.public-header .nav-links a::after { content:""; position:absolute; left:4px; bottom:8px; width:0; height:2px; border-radius:99px; background:linear-gradient(90deg,#7c3aed,#3b5bdb); transition:width .18s ease; }
.public-header .nav-links a:hover,.public-header .nav-links a[aria-current] { color:#3d4ec8; background:none; }
.public-header .nav-links a:hover::after,.public-header .nav-links a[aria-current]::after { width:28px; }
.public-header .nav-actions { gap:8px; margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.public-header .nav-actions .nav-buy { display:none; }
.public-header .nav-login { min-height:44px; padding:10px 4px; font-size:15px; font-weight:600; }
.public-header .nav-login:hover { color:#3d4ec8; background:none; }
.public-header .nav-register { min-height:44px; justify-content:center; padding:0 16px; border-radius:11px; border:1px solid rgba(23,35,61,.16); background:#fff; color:var(--ink); font-size:14px; font-weight:600; }
.public-header .nav-register:hover { background:#f6f7fb; color:#3d4ec8; transform:none; }
.public-header .nav-account { position:relative; }
.public-header .account-trigger { display:none; }
.public-header .account-drawer-label { margin:2px 4px 6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7b8394; }
.public-header .account-dropdown { display:grid; }
.public-header .account-dropdown a,.public-header .account-dropdown button { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 4px; border:0; border-radius:8px; background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; }
.public-header .account-dropdown a:hover,.public-header .account-dropdown button:hover { color:#3d4ec8; background:#f5f7fb; }
.public-header .account-dropdown form { margin:0; }
.public-header .menu-sep { height:1px; margin:6px 0; background:var(--line); }
@media (min-width:1100px) {
    .public-header .header-tools { display:none; }
    .public-header .nav-panel,.public-header .nav-panel.is-open { display:flex; align-items:center; position:static; flex:1; gap:28px; padding:0; border:0; border-radius:0; box-shadow:none; background:none; overflow:visible; max-height:none; }
    .public-header .nav-links,.public-header .nav-actions { display:flex; align-items:center; }
    .public-header .nav-links { gap:30px; }
    .public-header .nav-links a { min-height:0; padding:8px 0; font-size:14.5px; font-weight:600; white-space:nowrap; }
    .public-header .nav-links a::after { left:0; right:0; bottom:-7px; width:0; }
    .public-header .nav-links a:hover::after,.public-header .nav-links a[aria-current]::after { width:100%; }
    .public-header .nav-actions { margin:0 0 0 auto; padding:0; border:0; gap:12px; }
    .public-header .nav-actions .nav-buy { display:inline-flex; }
    .public-header .nav-login { min-height:0; padding:8px 2px; font-size:14.5px; white-space:nowrap; }
    .public-header .nav-register { height:42px; min-height:42px; }
    .public-header .account-trigger { display:inline-flex; align-items:center; gap:8px; height:42px; max-width:210px; padding:4px 12px 4px 4px; border:1px solid rgba(23,35,61,.14); border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
    .public-header .account-trigger:hover,.public-header .nav-account.is-open .account-trigger { background:#f6f7fb; border-color:rgba(61,80,217,.28); }
    .public-header .account-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef1fb; color:#3d50d9; font-size:13px; font-weight:700; flex-shrink:0; }
    .public-header .account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .public-header .account-chevron { flex-shrink:0; color:#697286; transition:transform .18s ease; }
    .public-header .nav-account.is-open .account-chevron { transform:rotate(180deg); }
    .public-header .account-drawer-label { display:none; }
    .public-header .account-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:5; min-width:220px; padding:6px; background:#fff; border:1px solid rgba(23,35,61,.08); border-radius:12px; box-shadow:0 12px 32px rgba(23,35,61,.1); }
    .public-header .nav-account.is-open .account-dropdown { display:grid; }
    .public-header .account-dropdown a,.public-header .account-dropdown button { min-height:40px; padding:8px 12px; font-size:14px; }
}
@media (max-width:420px) {
    .public-header .header-shell { width:calc(100% - 28px); }
    .public-header .logo { font-size:16px; gap:8px; }
    .public-header .logo-mark { width:34px; height:34px; }
    .public-header .nav-buy-arrow { display:none; }
    .public-header .nav-buy-bar { padding:0 12px; }
}