/* Sapphire presentation for the existing account/subscription website. */
:root { --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
body,body.dark { --bg:var(--bg-0); --bg2:var(--bg-1); --card:var(--glass); --ink2:var(--ink-soft); --violet:var(--blue); --violet2:var(--action); --violet-soft:var(--selection); --pink:var(--blue); --rose:var(--coral); --teal:var(--mint); --teal-soft:color-mix(in srgb,var(--mint) 9%,var(--panel)); --navy:var(--panel); --navy2:var(--bg-1); --grad:linear-gradient(135deg,var(--action),#4484ef); --shadow:var(--shadow-card); --shadow-sm:0 6px 18px #234a8110; font-family:var(--font); color:var(--ink); background:var(--bg-0); transition:none; }
h1,h2,h3,h4,button,input,select,.btn,.tab,.chip,.auth-tabs button,.auth-link,.member-pass strong,.member-tool>span,.privacy-signature { font-family:var(--font); }
h1,h2,h3 { letter-spacing:-.04em; } button,select,input { min-height:44px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--plum); outline-offset:4px; }
.wrap { width:var(--shell); max-width:none; padding:0; } .blob,.sticky { display:none!important; }
#nav { position:sticky; top:0; left:auto; right:auto; min-height:var(--arrival-header-height); background:transparent; border:0; box-shadow:none; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
body.dark #nav { background:transparent; } #nav::after { display:none; }
#nav .nav-in { width:var(--shell); max-width:none; min-height:var(--arrival-header-height); margin:auto; padding:20px 0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:18px; }
#nav .logo { margin:0; font-size:29px; font-weight:700; color:var(--ink); gap:14px; letter-spacing:-.035em; } #nav .logo rect { animation:none; }
#nav .nav-links { display:flex; margin:0; gap:28px; justify-content:center; } #nav .nav-links a { font-size:14px; font-weight:500; color:var(--muted); }
#nav .nav-links a::after { left:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:var(--blue); transform:none; opacity:0; }
#nav .nav-links a[aria-current="location"] { color:var(--ink); } #nav .nav-links a[aria-current="location"]::after { opacity:1; }
#nav .nav-cta { margin:0; justify-self:end; gap:8px; display:flex; align-items:center; }
#nav .icon-button,#nav .account-chip { width:44px; height:44px; min-width:44px; border-radius:50%; padding:0; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--ink-soft); }
#nav .account-chip { display:none; } #nav .account-chip.on { display:grid; } #nav .account-chip>span:last-child { display:none; }
#nav .account-chip>span:first-child { display:inline-flex; }
#nav .pro-badge { padding:8px 12px; border:1px solid var(--line-2); background:var(--glass); box-shadow:none; } #nav .pro-badge::after { display:none; }
#nav .pro-badge-copy strong { color:var(--blue); } #nav .pro-badge-copy small { font-size:9px; letter-spacing:0; } body.is-pro #nav .nav-links { visibility:hidden; }
.btn { border-radius:20px; padding:12px 20px; font-weight:600; font-size:14px; gap:10px; box-shadow:none; transform:none; }
.btn-primary { background:var(--action); color:#fff; border:1px solid #ffffff20; box-shadow:inset 0 1px 0 #ffffff20,0 8px 20px #075ee225; } .btn-primary:hover { background:var(--action-hover); transform:none; }
.btn-ghost,.btn-white { color:var(--ink); border:1px solid var(--line-2); background:var(--glass); box-shadow:inset 0 1px 0 #ffffff10; } .btn-ghost:hover { transform:none; background:var(--panel-2); } .btn-sm { font-size:13px; padding:10px 16px; }
.hero { padding:0 0 40px; } .hero-copy { min-height:calc(100svh - var(--arrival-header-height)); padding:clamp(40px,7svh,80px) 0; text-align:center; }
#heroTitle { font-size:clamp(58px,6.5vw,92px); font-weight:650; line-height:1.03; margin:0 0 24px; } #heroTitle span { background:none; color:var(--display-soft); -webkit-background-clip:initial; }
.hero-subtitle { color:var(--muted); font-size:19px; line-height:1.55; margin:0 0 26px; max-width:58ch; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:26px; } .hero-actions .btn { min-height:54px; padding:14px 24px; }
.microcopy { font-size:12px; line-height:1.65; color:var(--faint); margin-top:17px; } .microcopy .link-button { font-size:12px; color:var(--blue); }
.hero-help { text-decoration:none; font-size:15px; color:var(--blue); min-height:44px; display:inline-flex; align-items:center; gap:8px; }
.product-stage { margin-top:50px; } .preview-window,.focus-card { animation:none; } .portrait { flex:none; }
#how.export-guide { padding:72px 0 0; min-height:0; display:block; width:var(--shell); margin:auto; }
.site-drop-target { margin-top:18px; padding:14px 16px; border:1px dashed var(--line-2); border-radius:14px; color:var(--muted); font-size:12px; line-height:1.65; cursor:pointer; }
.site-drop-target .folder-pick { display:block; margin-top:6px; padding:0; color:var(--blue); font-family:inherit; min-height:44px; font-size:12px; } .site-drop-target.over { background:var(--selection); border-color:var(--blue); }
.guide-copy>.folder-pick { display:block; min-height:44px; color:var(--blue); font:500 12px var(--font); }
.guide-next small,.guide-previous small { font-size:12px; }
body.site-report-ready .hero,body.site-report-ready #how,body.site-report-ready #features,body.site-report-ready #predictions { display:none!important; } body:not(.site-report-ready):not(.is-pro) #app { display:none; }
#app { padding:20px 0 40px; } #app>.wrap>.eyebrow { display:none; } #liveWorkspaceHeading { font-size:clamp(34px,4.05vw,64px); font-weight:700; margin:10px 0; line-height:1.15; } #app>.wrap>.sub { font-size:15px; margin-top:8px; max-width:70ch; }
.app { padding:0; margin-top:30px; border:0; background:none; box-shadow:none; overflow:visible; } .app-top { background:var(--glass); border:1px solid var(--line); padding:10px 16px; border-radius:16px; }
.app-top .who span,.app-top .badge { color:var(--ink-soft); background:transparent; } .app-head { margin:22px 0; } .app-head h3 { font-size:24px; font-weight:600; }
.app-head .eyebrow { color:var(--muted); font-size:12px!important; letter-spacing:0; font-weight:500; }
.app-head h3,.app-head .eyebrow { display:none; }
.tabs { display:flex; width:fit-content; max-width:100%; margin:0 0 22px; padding:5px; border:1px solid var(--line); background:var(--chrome); border-radius:18px; gap:4px; }
.tab { font-size:13px; letter-spacing:0; padding:10px 14px; font-weight:500; border-radius:13px; color:var(--muted); } .tab.on { background:var(--selection); color:var(--ink); } .tab .ti { display:none; } .panel.on { animation:none; }
.stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:0; background:none; }
.stat { --stat-color:var(--blue); min-height:235px; padding:24px 28px; border:1px solid color-mix(in srgb,var(--stat-color) 28%,transparent); border-radius:26px; background:linear-gradient(145deg,#cde5ff0c,transparent 65%,color-mix(in srgb,var(--stat-color) 9%,transparent)),var(--glass); color:var(--ink); box-shadow:inset 0 1px 0 #ffffff10,0 14px 35px #02070c22; }
.stat.mc-purple { --stat-color:var(--plum); } .stat.mc-rose { --stat-color:var(--coral); } .stat.mc-teal { --stat-color:var(--mint); }
.stat::before { display:none; } .stat::after { background:color-mix(in srgb,var(--stat-color) 10%,transparent); width:220px; height:120px; right:-50px; bottom:-80px; } .stat:hover { transform:none; box-shadow:inset 0 1px 0 #ffffff10,0 14px 35px #02070c22; }
.stat .ic { width:44px; height:44px; margin:0 0 14px; border:1px solid color-mix(in srgb,var(--stat-color) 22%,transparent); border-radius:50%; background:color-mix(in srgb,var(--stat-color) 10%,transparent); color:var(--stat-color); }
.stat .ic { display:grid; place-items:center; } .stat .ic .ui-icon { width:22px; height:22px; }
.stat small { display:block; font-size:15px; color:var(--ink); font-weight:500; opacity:1; } .stat b { color:var(--stat-color); font-size:clamp(38px,4.5vw,70px); margin:10px 0 6px; font-weight:700; letter-spacing:-.035em; }
.stat i { color:var(--muted); font-size:13px; opacity:1; font-weight:400; } .stat .pct { color:var(--stat-color); background:transparent; padding:3px; font-size:12px; }
.navy-bar { margin-top:22px; background:var(--glass); border:1px solid var(--line); color:var(--ink); border-radius:20px; } .navy-bar>div { border-color:var(--line); } .navy-bar small { color:var(--muted); font-size:12px; } .navy-bar b { font-weight:600; }
.card,.chart-card,.fcard,.qa,.member-desk { background:var(--glass); border:1px solid var(--line-2); border-radius:26px; box-shadow:inset 0 1px 0 #ffffff10,0 16px 40px #02070d22; }
.card { padding:26px; } .card h4 { font-size:13px; letter-spacing:0; font-weight:600; color:var(--muted); } .card .bigline,.chart-head .big { color:var(--ink); }
.alist,.arow,.toolbar select,.fld input,.fld select { background:transparent; border-color:var(--line); color:var(--ink); } .arow { min-height:58px; padding:12px 16px; } .arow .nm span { color:var(--muted); }
.arow .hidebtn { width:44px; height:44px; background:var(--selection); color:var(--muted); } .toolbar select,.fld input,.fld select { min-height:44px; border-radius:13px; background:var(--glass); } .fld label { color:var(--ink-soft); }
.chip { min-height:44px; font-size:12px; color:var(--muted); background:var(--glass); border-color:var(--line); } .chip.on { color:var(--ink); background:var(--selection); border-color:var(--line-2); }
.empty { color:var(--muted); border-color:var(--line-2); font-weight:400; } .unlock-layer { background:linear-gradient(180deg,transparent,var(--bg-0)); } .unlock-card { color:var(--ink); background:var(--panel); border-color:var(--line-2); box-shadow:var(--shadow-card); } .unlock-card p { color:var(--muted); }
.setrow { padding:18px 0; border-color:var(--line); } .setrow .t small { color:var(--muted); line-height:1.65; } .site-appearance-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,180px); gap:20px; }
.site-appearance-row label { display:block; font-size:15px; font-weight:600; margin-bottom:5px; } .site-appearance-row select,.appearance-controls select { width:100%; font-size:14px; padding:10px 12px; }
.sw { width:48px; height:44px; } .sw u { inset:9px 0; border:1px solid var(--line-2); background:var(--selection); } .sw input:checked+u { background:var(--action); } .sw input:checked+u::before { transform:translateX(22px); } .sw input:focus-visible+u { outline:2px solid var(--plum); outline-offset:4px; }
.how h2,.feat h2,.pricing h2,.faq h2 { font-weight:700; } .eyebrow { color:var(--blue); letter-spacing:0; font-size:13px; } #features,#predictions { padding:64px 0; } #features>.wrap>.eyebrow,#faq .eyebrow,#pricing .eyebrow { display:none; }
.feat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .fcard { min-height:0; padding:28px; } .fcard h3 { color:var(--ink); } .fcard p { font-size:14px; color:var(--muted); } .fcard:hover { transform:none; translate:none; }
.fcard.feature-wide,.feature-private { background:var(--glass); } .feature-orbits { opacity:.35; } .privacy-signature { color:var(--blue); }
#predictions { background:var(--glass); color:var(--ink); border-block:1px solid var(--line); } #predictions::before { display:none; } #predictions .sub,#predictions .eyebrow,.dark-chart .lbl,.dark-stats small { color:var(--muted); } .dark-chart,.dstat { background:var(--glass); border-color:var(--line-2); animation:none; color:var(--ink); }
.dark-chart>div:last-child { color:var(--muted)!important; } .dark-chart>div:last-child span[style*="color"] { color:var(--blue)!important; } .dark-chart>div:last-child span[style*="#5eead4"] { color:var(--mint)!important; }
.pricing { padding:72px 0; } body.is-pro #pricing { padding-top:36px; } .pcard.pro { background:var(--glass); color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow-card); } .pcard .flag { display:none; }
.pcard.pro .amt span,.billing-note,.pcard.pro li { color:var(--muted); } .pcard.pro li .ck { color:var(--mint); background:var(--teal-soft); } .pcard .amt { color:var(--ink); } .pay-badges span { color:var(--ink-soft); background:var(--glass); border-color:var(--line); }
.pay-badges>span[style] { color:var(--plum)!important; }
.member-desk { padding:38px; background:var(--glass); } .member-desk::before { display:none; } .member-desk p { color:var(--muted); } .member-pass { background:var(--panel-2); border-color:var(--line-2); color:var(--ink); box-shadow:none; }
.member-pass::before,.member-pass::after { display:none; } .member-pass p,.member-pass footer { color:var(--muted); } .member-tools .member-tool { background:var(--glass); border-color:var(--line); } .member-tool>span { color:var(--blue); background:var(--selection); }
.qa { box-shadow:none; } .qa button { color:var(--ink); font-size:15px; } .qa .ans p { color:var(--muted); } .qa .pm { color:var(--blue); background:var(--selection); } .faq { padding:30px 0 64px; }
.band { background:var(--glass); color:var(--ink); box-shadow:var(--shadow-card); border-color:var(--line-2); } .band::before { display:none; } .band p { color:var(--muted); opacity:1; }
footer { display:block; margin:0; padding:40px 0 20px; background:transparent; } .foot { color:var(--muted); font-size:13px; } .foot .logo { color:var(--ink); } .foot .logo em { color:inherit; }
.appearance-controls { margin-top:28px; align-items:center; color:var(--muted); } .appearance-controls select { width:180px; } .appearance-controls button { min-height:44px; color:var(--ink-soft); font-size:12px; background:var(--glass); border-color:var(--line); }
.modal { background:#020713b8; backdrop-filter:blur(8px); } .modal.open,.mcard2 { animation:none; } .mcard2 { color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:26px; box-shadow:var(--shadow-card); }
.mclose { color:var(--muted); background:var(--panel-2); min-height:44px; } .auth-story { background:var(--panel-2); color:var(--ink); } .auth-story::after { display:none; }
.auth-story p,.auth-story .eyebrow,.auth-points div { color:var(--muted); } .auth-points span { color:var(--mint); background:var(--teal-soft); } .auth-main { background:var(--panel); } .auth-tabs { background:var(--bg-1); border-color:var(--line); }
#accountGate .auth-story>.eyebrow,#accountGate .auth-main>.eyebrow { display:none; }
.auth-tabs button { color:var(--muted); min-height:44px; } .auth-tabs button.on { color:#fff; background:var(--action); box-shadow:none; } .auth-fine,body.dark .auth-fine { color:var(--ink-soft); background:var(--panel-2); }
.verify-mark { background:var(--selection); color:var(--blue); animation:none; } .verify-panel h4,.auth-main h3 { font-family:var(--font); color:var(--ink); } .auth-status { border-color:var(--line); background:var(--panel-2); color:var(--ink-soft); }
.lockmark .line-icon,#upgrade .mcard2>div:first-of-type .line-icon { width:26px; height:26px; vertical-align:middle; }
.pro-share { border-color:var(--line); background:var(--panel-2); } .toast { background:var(--panel); color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow-card); } .reading { background:#020713b8; } .reading .ring { width:56px; height:56px; }
.toast { overflow-wrap:anywhere; }
body.light-mode .stat,body.light-mode .card,body.light-mode .chart-card,body.light-mode .fcard,body.light-mode .member-desk { box-shadow:inset 0 1px 0 #ffffff,0 12px 32px #234a8110; } body.light-mode .modal { background:#163b6b38; } body.light-mode .auth-story { background:#edf4ff; }
@media(max-width:1100px) { #nav .logo { font-size:25px; } #nav .nav-in { gap:12px; } #nav .nav-links { gap:22px; } #siteSignIn { display:none; } .stat { padding:22px; } .stat b { font-size:46px; } }
@media(max-width:850px) { .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid2,.grid3 { grid-template-columns:minmax(0,1fr); } .stat b { font-size:58px; } .feat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .feature-wide { grid-column:1/-1; } }
@media(max-width:700px) {
  #nav .nav-in { grid-template-columns:minmax(0,1fr) auto; padding:14px 0; gap:8px; } #nav .logo { font-size:24px; gap:10px; } #nav .logo>svg { width:29px; height:31px; }
  #nav .nav-links { grid-column:1/-1; grid-row:2; gap:28px; } #nav .nav-links a { font-size:13px; } #nav .nav-cta { gap:6px; } #nav .icon-button,#nav .account-chip { width:38px; min-width:38px; } #navCta { padding:10px 12px; font-size:12px; } #nav .pro-badge { display:none; }
  #heroTitle { font-size:clamp(52px,12vw,76px); } .hero-subtitle { font-size:16px; } .hero-subtitle br { display:none; } .hero-actions { gap:16px; flex-wrap:wrap; } .hero-actions .btn { min-height:50px; padding:12px 18px; } .hero-help { font-size:14px; } .microcopy .link-button { display:flex; width:fit-content; max-width:100%; align-items:center; justify-content:center; gap:4px; margin-inline:auto; } .hero-copy { padding:36px 0 48px; }
  #how.export-guide { padding-top:40px; } .site-drop-target { font-size:12px; } #liveWorkspaceHeading { font-size:35px; } #app>.wrap>.sub { font-size:14px; } .app-top { gap:8px; } .app-top .badge { margin-left:0; white-space:normal; overflow-wrap:anywhere; }
  .app-head { align-items:start; gap:12px; } .app-head .btns { width:100%; } .app-head .btns .btn { flex:1; padding:10px; font-size:12px; } .tabs { width:100%; justify-content:start; flex-wrap:wrap; } .tab { min-height:44px; font-size:12px; padding:8px 12px; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .stat { min-height:210px; padding:18px; border-radius:22px; } .stat b { font-size:42px; } .stat small { font-size:13px; } .stat i { font-size:12px; } .stat .pct { position:static; padding:0; }
  .navy-bar { grid-template-columns:repeat(2,minmax(0,1fr)); } .navy-bar>div { padding:16px; } .navy-bar small { font-size:11px; } .card,.chart-card { padding:22px; border-radius:22px; } .feat-grid { grid-template-columns:minmax(0,1fr); } .feature-wide { grid-column:auto; }
  .arow { padding:12px; gap:10px; } .arow time { width:auto; } .arow .nm { min-width:0; } .arow .nm b { overflow-wrap:anywhere; } .arow .pill { padding:5px 8px; } .site-appearance-row { grid-template-columns:minmax(0,1fr); gap:14px; } .site-appearance-row select,.appearance-controls select { font-size:16px; }
  .setrow { gap:16px; } .setrow .t { min-width:0; } .member-desk { padding:26px; border-radius:23px; } .member-desk h2 { font-size:34px; } .pcard { padding:26px; } .pricing { padding:56px 0; } .auth-main { padding:44px 22px 24px; } .mcard2 { padding:40px 24px 24px; } .auth-card { padding:0; } .qa>button { font-size:14px; padding:18px; } .foot { gap:18px; } .foot .r { margin:0; width:100%; }
}
@media(max-width:360px) { #nav .nav-in { grid-template-columns:minmax(0,1fr); justify-items:center; } #nav .nav-cta { justify-self:center; grid-row:2; } #nav .nav-links { grid-row:3; } .stat { padding:14px; } .stat b { font-size:36px; } .stat small { font-size:12px; } }
@media(prefers-reduced-transparency:reduce) { .card,.stat,.chart-card,.mcard2,.member-desk,.pcard.pro,#nav,body.dark #nav { background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; } }