:root, html[data-theme="dark"]{
color-scheme:dark;
--bg:#0F1C14;--bg-2:#0A140E;--bg-soft:#16271C;--bg-card:#13241A;
--cream:#EFE9D8;--cream-2:#DEE2D6;--muted:#AABBAF;--faint:#8C9D91;
--gold:#CC9E47;--gold-2:#DBB45E;--gold-deep:#B0832C;
--green:#4E8C63;--green-2:#5FA176;
--paper:#F2ECDD;--paper-ink:#16201A;
--line:rgba(204,158,71,.24);--line-soft:rgba(239,233,216,.1);
--warm-bg:rgba(204,158,71,.18);--cold-bg:rgba(255,255,255,.06);
--red-line:rgba(192,57,43,.4);--red-txt:#D88C7E;
/* themeable chrome surfaces (were hardcoded dark rgba in places) */
--nav-bg:rgba(10,20,14,.92);--overlay:rgba(8,15,11,.5);--scrim:rgba(8,15,11,.92);
--shadow:rgba(0,0,0,.6);
/* LP-builder aliases — its CSS/JS reference these names; map to the theme so
they resolve per-theme instead of breaking (they were undefined). */
--border:var(--line);--white:var(--bg-card);--ink:var(--cream);--mid:var(--muted);
--bg2:var(--bg-2);--green-light:rgba(78,140,99,.14);--red:var(--red-txt);
}
/* ---- LIGHT THEME ---- warm paper surfaces, deeper green/gold ink ---- */
html[data-theme="light"]{
color-scheme:light;
--bg:#F5F1E6;--bg-2:#EFEADB;--bg-soft:#EBE5D4;--bg-card:#FCFAF4;
--cream:#1B2620;--cream-2:#3C4A40;--muted:#6A7A6E;--faint:#8A998C;
--gold:#A77C28;--gold-2:#8A6418;--gold-deep:#6E4F12;
--green:#3F7A54;--green-2:#2E6A45;
--paper:#FFFFFF;--paper-ink:#16201A;
--line:rgba(167,124,40,.30);--line-soft:rgba(27,38,32,.12);
--warm-bg:rgba(167,124,40,.14);--cold-bg:rgba(27,38,32,.05);
--red-line:rgba(192,57,43,.45);--red-txt:#B23A2A;
--nav-bg:rgba(255,255,255,.9);--overlay:rgba(27,38,32,.3);--scrim:rgba(27,38,32,.55);
--shadow:rgba(40,50,44,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);}
/* background lives on ; body stays transparent so the z-index:-1 grain
shows over the canvas but never on top of (and muddying) the text. */
body{background:transparent;color:var(--cream);font-family:'Figtree',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
/* Subtle film grain — kept very faint and BEHIND content so it can't muddy text. */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.02;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none;}
.mono{font-family:'Space Mono',monospace;}
.serif{font-family:'Fraunces',serif;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em;line-height:1.04;color:var(--cream);}
.ital{font-style:italic;color:var(--gold-2);}
.meta{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--bg-2);}
::-webkit-scrollbar-thumb{background:var(--bg-soft);border:2px solid var(--bg-2);border-radius: 0;}
/* corner marks */
.mark{position:relative;}
.mark>.cm{position:absolute;width:11px;height:11px;pointer-events:none;}
.cm.tl{top:-1px;left:-1px;border-top:1.5px solid var(--gold);border-left:1.5px solid var(--gold);}
.cm.tr{top:-1px;right:-1px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);}
.cm.bl{bottom:-1px;left:-1px;border-bottom:1.5px solid var(--gold);border-left:1.5px solid var(--gold);}
.cm.br{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--gold);border-right:1.5px solid var(--gold);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:13.5px;height:40px;padding:0 20px;line-height:1;box-sizing:border-box;border-radius: 0;cursor:pointer;transition:transform .16s ease,background .18s,color .18s,border-color .18s,opacity .18s;border:none;font-family:'Figtree';white-space:nowrap;}
.btn:hover:not(:disabled){transform:translateY(-1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
/* All primary buttons are gold in BOTH themes — green didn't suit the brand.
Dark theme: gold + near-black text. Light theme: gold + white text. */
.btn-gold,.btn-solid,.btn-green{background:var(--gold);color:#231905;}
.btn-gold:hover:not(:disabled),.btn-solid:hover:not(:disabled),.btn-green:hover:not(:disabled){background:var(--gold-2);}
html[data-theme="light"] .btn-gold,html[data-theme="light"] .btn-solid,html[data-theme="light"] .btn-green{color:#fff;}
.btn-ghost{border:1px solid var(--line);color:var(--cream);background:transparent;}
.btn-ghost:hover:not(:disabled){border-color:var(--gold);color:var(--gold-2);}
.btn-danger{border:1px solid var(--red-line);color:var(--red-txt);background:transparent;}
.btn-danger:hover:not(:disabled){border-color:rgba(192,57,43,.7);color:#E5A192;}
.btn svg{width:14px;height:14px;}
.btn-sm{height:32px;padding:0 13px;line-height:1;box-sizing:border-box;font-size:12px;}
/* === TOP NAV === */
nav{position:sticky;top:0;z-index:200;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 28px;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--cream);letter-spacing:-.02em;cursor:pointer;user-select:none;}
.nav-tabs{display:flex;gap:4px;align-items:center;background:var(--bg-2);border:1px solid var(--line);padding:3px;border-radius: 0;}
.nav-tab{font-size:13px;color:var(--muted);padding:7px 15px;border-radius: 0;cursor:pointer;transition:color .14s,background .18s;font-weight:500;}
.nav-tab:hover{color:var(--cream);}
.nav-tab.active{background:var(--bg-soft);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line);}
.nav-right{display:flex;align-items:center;gap:10px;}
/* help button — now opens help panel, NOT tour */
.help-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold-2);font-family:'Fraunces',serif;font-style:italic;font-size:15px;transition:border-color .18s,background .18s;flex:none;}
.theme-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold-2);transition:border-color .18s,background .18s,color .18s;flex:none;}
.theme-btn:hover{border-color:var(--gold);color:var(--gold);}
.bell-btn{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold-2);transition:border-color .18s,background .18s;flex:none;}
.bell-btn:hover{border-color:var(--gold);background:rgba(204,158,71,.08);}
.bell-btn svg{width:15px;height:15px;}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);color:#231905;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}
.theme-btn svg{width:15px;height:15px;}
/* show the icon for the theme you'll switch TO */
html[data-theme="dark"] .theme-btn .ico-moon{display:none;}
html[data-theme="light"] .theme-btn .ico-sun{display:none;}
/* platform logo: show the variant matching the active theme */
.brand-logo{display:block;}
html[data-theme="dark"] .brand-logo-light{display:none;}
html[data-theme="light"] .brand-logo-dark{display:none;}
.help-btn:hover{border-color:var(--gold);background:rgba(204,158,71,.08);}
.userchip{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius: 0;cursor:pointer;transition:border-color .18s;}
.userchip:hover{border-color:var(--line);}
.userchip .av{width:25px;height:25px;border-radius:50%;background:var(--gold);color:#231905;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:600;font-size:12px;}
.userchip span{font-size:13px;color:var(--cream-2);}
.userchip svg{width:12px;height:12px;color:var(--faint);}
/* trial banner */
.trial{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 28px;background:linear-gradient(90deg,rgba(204,158,71,.1),rgba(204,158,71,.03));border-bottom:1px solid var(--line);}
.trial .tx{font-size:13px;color:var(--cream-2);display:flex;align-items:center;gap:9px;}
.trial .tx i{width:6px;height:6px;border-radius:50%;background:var(--gold-2);animation:blink 2.4s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.trial .tx b{color:var(--gold-2);font-weight:600;}
/* domain-not-connected banner */
.domain-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 28px;background:linear-gradient(90deg,rgba(78,140,99,.14),rgba(78,140,99,.04));border-bottom:1px solid var(--line);}
.domain-banner .db-tx{font-size:13px;color:var(--cream-2);display:flex;align-items:center;gap:9px;line-height:1.4;}
.domain-banner .db-tx svg{color:var(--green-2);}
.domain-banner .db-tx b{color:var(--green-2);font-weight:600;}
.domain-banner .db-x{color:var(--faint);cursor:pointer;font-size:20px;line-height:1;padding:0 4px;transition:color .15s;}
.domain-banner .db-x:hover{color:var(--cream);}
@media(max-width:820px){.domain-banner{padding:9px 16px;flex-wrap:wrap;gap:10px;}.domain-banner .db-tx{font-size:12px;}}
/* dropdown menu */
.menu{position:absolute;top:52px;right:28px;background:var(--bg-card);border:1px solid var(--line);min-width:210px;z-index:300;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);display:none;}
.menu.open{display:block;}
.menu .mh{padding:14px 16px;border-bottom:1px solid var(--line-soft);}
.menu .mh b{font-family:'Fraunces';font-size:15px;color:var(--cream);display:block;}
.menu .mh span{font-size:11.5px;color:var(--muted);font-family:'Space Mono';}
.menu a{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;color:var(--cream-2);cursor:pointer;transition:background .14s,color .14s;}
.menu a:hover{background:var(--bg-soft);color:var(--gold-2);}
.menu a svg{width:14px;height:14px;color:var(--faint);}
.menu-sep{height:1px;background:var(--line-soft);margin:4px 0;}
/* === APP SHELL === */
.app{max-width:1280px;margin:0 auto;padding:32px 28px 90px;}
.view{display:none;animation:viewin .42s cubic-bezier(.16,.84,.32,1);}
.view.active{display:block;}
@keyframes viewin{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:20px;flex-wrap:wrap;}
.page-kicker{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.page-kicker .num{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--gold);}
.page-kicker .rule{width:34px;height:1px;background:var(--line);}
.page-head h1{font-size:clamp(30px,4vw,44px);font-weight:300;letter-spacing:-.03em;}
.page-head h1 b{font-weight:600;}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:7px;}
.breadcrumb{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.breadcrumb a{color:var(--gold);cursor:pointer;}
.breadcrumb a:hover{color:var(--gold-2);}
/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-bottom:28px;background:var(--bg-card);}
.stat{padding:20px 22px;border-right:1px solid var(--line-soft);position:relative;}
.stat:last-child{border-right:none;}
.stat .sl{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.stat .sv{font-family:'Fraunces',serif;font-size:38px;font-weight:400;line-height:1;margin-top:7px;letter-spacing:-.02em;}
.stat .sv.g{color:var(--gold-2);}
.stat .sd{font-size:11px;color:var(--muted);margin-top:6px;font-family:'Space Mono';letter-spacing:.03em;}
/* campaign cards */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.cmp-card{background:var(--bg-card);border:1px solid var(--line);padding:22px;cursor:pointer;transition:border-color .18s,transform .18s,background .18s;position:relative;}
.cmp-card:hover{border-color:var(--line);transform:translateY(-2px);background:var(--bg-soft);}
.cmp-card .ct{font-family:'Fraunces',serif;font-size:20px;font-weight:500;color:var(--cream);letter-spacing:-.01em;}
.cmp-meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--faint);text-transform:uppercase;}
.pill{font-size:9px;font-family:'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius: 0;}
.pill.active{background:rgba(78,140,99,.2);color:var(--green-2);}
.pill.warm{background:var(--warm-bg);color:var(--gold-2);}
.pill.cold{background:var(--cold-bg);color:var(--faint);}
.cmp-leads{font-size:13px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);}
.cmp-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.cmp-mini .m .ml{font-family:'Space Mono';font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.cmp-mini .m .mv{font-family:'Fraunces';font-size:20px;color:var(--cream);font-weight:500;margin-top:2px;}
.cmp-mini .m .mv.g{color:var(--gold-2);}
.cmp-new{border:1px dashed var(--line);background:transparent;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s,background .18s;min-height:180px;font-size:14px;}
.cmp-new:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(204,158,71,.04);}
.cmp-new svg{width:17px;height:17px;}
/* leads table */
.panel{background:var(--bg-2);border:1px solid var(--line);padding:24px;}
.panel-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-soft);}
.panel-top .pt{font-family:'Fraunces',serif;font-size:18px;color:var(--cream);}
.panel-top .live{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);display:flex;align-items:center;gap:6px;}
.panel-top .live i{width:6px;height:6px;border-radius:50%;background:var(--gold-2);animation:blink 2s infinite;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:13px 20px;border-bottom:1px solid var(--line-soft);font-weight:400;}
.tbl td{padding:14px 20px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--cream-2);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .16s;}
.tbl tbody tr:hover{background:var(--bg-soft);}
.tbl .co{color:var(--cream);font-weight:500;}
.tbl .em{font-family:'Space Mono';font-size:11px;color:var(--faint);}
.tbl .pc{font-family:'Space Mono',monospace;color:var(--gold-2);font-weight:700;}
.tbl .pc.dim{color:var(--faint);font-weight:400;}
.tbl .num{font-family:'Space Mono';color:var(--cream-2);}
.wbar{height:4px;background:rgba(255,255,255,.07);width:80px;overflow:hidden;border-radius: 0;margin-top:5px;}
.wbar b{display:block;height:100%;background:var(--green);}
.wbar.cold b{background:var(--faint);}
.urlcell{font-family:'Space Mono';font-size:10px;color:var(--gold);}
/* === NEW CAMPAIGN === */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-bottom:24px;}
.step{display:flex;align-items:center;gap:11px;padding:15px 20px;border-right:1px solid var(--line-soft);background:var(--bg-2);}
.step:last-child{border-right:none;}
.step .sno{width:25px;height:25px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Space Mono';font-size:11px;color:var(--gold);flex:none;}
.step.on{background:var(--bg-soft);}
.step.on .sno{background:var(--gold);color:#231905;border-color:var(--gold);}
.step .stt{font-family:'Fraunces';font-size:15px;color:var(--cream);}
.step .sds{font-size:10.5px;color:var(--muted);font-family:'Space Mono';letter-spacing:.03em;}
.fsec{background:var(--bg-2);border:1px solid var(--line);margin-bottom:16px;}
.fsec-head{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line-soft);}
.fsec-head .ic{width:28px;height:28px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none;}
.fsec-head .ic svg{width:14px;height:14px;}
.fsec-head .ft{font-family:'Fraunces';font-size:17px;color:var(--cream);}
.fsec-head .fd{font-size:11.5px;color:var(--muted);font-family:'Space Mono';letter-spacing:.03em;}
.fbody{padding:22px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px;}
.frow:last-child{margin-bottom:0;}
.field label{display:block;font-family:'Space Mono';font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);margin-bottom:7px;}
.field label .opt{color:var(--faint);text-transform:none;letter-spacing:0;}
.field label .req{color:var(--gold);}
/* Button-style labels inside a .field must NOT inherit the field-label styling
(it made 'Upload logo' / 'Replace' tiny, uppercase and top-aligned). */
.field label.btn{display:inline-flex;font-family:'Figtree',sans-serif;font-size:13.5px;letter-spacing:normal;text-transform:none;color:var(--cream);margin-bottom:0;}
.field label.btn-sm{font-size:12px;}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--cream);height:40px;padding:0 13px;box-sizing:border-box;line-height:38px;font-family:'Figtree';font-size:14px;border-radius: 0;transition:border-color .18s;}
.inp::placeholder{color:var(--faint);}
.inp:focus{outline:none;border-color:var(--gold);}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CC9E47' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer;}
.field .hint{font-family:'Space Mono';font-size:10px;color:var(--faint);margin-top:6px;letter-spacing:.02em;}
.field .hint.ok{color:var(--green-2);}
.field .hint.err{color:var(--red-txt);}
.drop{border:1px dashed var(--line);background:var(--bg);padding:36px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;}
.drop:hover{border-color:var(--gold);background:rgba(204,158,71,.04);}
.drop .di{color:var(--gold);margin-bottom:9px;}
.drop .di svg{width:24px;height:24px;}
.drop .dt{font-family:'Fraunces';font-size:15px;color:var(--cream);}
.drop .dr{font-family:'Space Mono';font-size:10px;color:var(--faint);margin-top:7px;letter-spacing:.04em;}
.vid-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-foot{display:flex;justify-content:flex-end;gap:11px;margin-top:22px;}
/* info callout */
.callout{border-left:3px solid var(--gold);background:rgba(204,158,71,.07);padding:14px 18px;font-size:13.5px;color:var(--cream-2);line-height:1.65;}
.callout b{color:var(--cream);}
.callout.green{border-color:var(--green-2);background:rgba(78,140,99,.07);}
.callout.green b{color:var(--green-2);}
/* step sub-section within a fsec */
.sub-sec{border:1px solid var(--line);margin-bottom:14px;overflow:hidden;}
.sub-sec-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:var(--bg);border-bottom:1px solid var(--line-soft);}
.sub-sec-head .sh{font-family:'Space Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.sub-sec-body{padding:18px;}
/* url preview chip */
.url-preview{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);padding:10px 14px;font-family:'Space Mono';font-size:12px;margin-top:8px;}
.url-preview .up-label{color:var(--faint);}
.url-preview .up-val{color:var(--gold-2);}
.url-preview .up-val em{font-style:normal;color:var(--green-2);}
.url-preview .up-copy{margin-left:auto;cursor:pointer;color:var(--muted);transition:color .15s;}
.url-preview .up-copy:hover{color:var(--gold);}
.url-preview .up-copy svg{width:13px;height:13px;}
/* domain status badges */
.dom-status{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono';font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius: 0;}
.dom-status.verified{background:rgba(78,140,99,.2);color:var(--green-2);}
.dom-status.pending{background:rgba(204,158,71,.15);color:var(--gold-2);}
.dom-status.error{background:rgba(192,57,43,.15);color:var(--red-txt);}
.dom-status i{width:6px;height:6px;border-radius:50%;flex:none;}
.dom-status.verified i{background:var(--green-2);}
.dom-status.pending i{background:var(--gold-2);animation:blink 2s infinite;}
.dom-status.error i{background:var(--red-txt);}
/* dns record table */
.dns-table{width:100%;border-collapse:collapse;font-family:'Space Mono';font-size:11px;}
.dns-table th{color:var(--faint);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left;font-weight:400;}
.dns-table td{padding:10px 12px;border-bottom:1px solid var(--line-soft);color:var(--cream-2);word-break:break-all;}
.dns-table tr:last-child td{border-bottom:none;}
.dns-table .type{color:var(--gold);font-weight:700;}
.dns-table .val{color:var(--green-2);}
.dns-table .verified td{background:rgba(78,140,99,.06);}
/* zapier flow */
.zap-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0;}
.zap-node{background:var(--bg);border:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--cream-2);}
.zap-node .zn-icon{width:28px;height:28px;border-radius: 0;display:flex;align-items:center;justify-content:center;flex:none;}
.zap-node .zn-label{font-family:'Space Mono';font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:2px;}
.zap-arrow{color:var(--gold);font-size:16px;flex:none;}
.zap-steps{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.zap-step{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:flex-start;}
.zap-step .zs-n{width:28px;height:28px;background:var(--gold);color:#231905;display:flex;align-items:center;justify-content:center;font-family:'Space Mono';font-size:12px;font-weight:700;flex:none;}
.zap-step .zs-body .zs-h{font-family:'Fraunces';font-size:15px;color:var(--cream);margin-bottom:3px;}
.zap-step .zs-body .zs-d{font-size:13px;color:var(--muted);line-height:1.55;}
.zap-step .zs-body .zs-d code{font-family:'Space Mono';font-size:11px;color:var(--gold-2);background:rgba(204,158,71,.1);padding:1px 6px;}
/* offboarding view */
.off-steps{display:flex;flex-direction:column;gap:0;}
.off-step{display:grid;grid-template-columns:52px 1fr;border:1px solid var(--line);border-bottom:none;}
.off-step:last-child{border-bottom:1px solid var(--line-soft);}
.off-step .os-n{display:flex;align-items:flex-start;justify-content:center;padding-top:22px;border-right:1px solid var(--line-soft);}
.off-step .os-n span{font-family:'Fraunces';font-style:italic;font-size:26px;color:var(--gold);line-height:1;}
.off-step .os-body{padding:20px 22px;}
.off-step .os-h{font-family:'Fraunces';font-size:17px;color:var(--cream);margin-bottom:6px;}
.off-step .os-d{font-size:13.5px;color:var(--muted);line-height:1.6;}
/* === LP BUILDER === */
.builder{display:grid;grid-template-columns:230px 1fr 246px;gap:0;border:1px solid var(--line);min-height:580px;background:var(--bg-2);}
.b-col{padding:17px;}
.b-col.left{border-right:1px solid var(--line-soft);}
.b-col.right{border-left:1px solid var(--line-soft);}
.b-label{font-family:'Space Mono';font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:13px;}
.blocks{display:flex;flex-direction:column;gap:6px;}
.block{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--bg-soft);border:1px solid var(--line);font-size:12px;color:var(--cream-2);cursor:grab;transition:border-color .18s,background .18s,transform .14s;}
.block:hover{border-color:var(--gold);background:var(--bg-card);transform:translateX(2px);}
.block .bg{color:var(--faint);font-family:'Space Mono';font-size:11px;}
.block svg{width:13px;height:13px;color:var(--gold);flex:none;}
.canvas-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-bottom:1px solid var(--line-soft);background:var(--bg);}
.seg{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius: 0;padding:3px;}
.seg button{background:transparent;border:none;color:var(--muted);font-family:'Figtree';font-size:12px;padding:5px 14px;border-radius: 0;cursor:pointer;font-weight:500;transition:color .14s,background .18s;}
.seg button.on{background:var(--bg-soft);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line);}
.canvas-wrap{padding:24px;display:flex;justify-content:center;background:repeating-linear-gradient(45deg,var(--bg-2) 0 10px,#0c1810 10px 20px);}
.canvas{width:100%;max-width:460px;background:var(--bg);border:1px solid var(--line);transition:max-width .32s ease;}
.canvas.mobile{max-width:230px;}
.cv-block{padding:13px 15px;border-bottom:1px solid var(--line-soft);position:relative;}
.cv-block:last-child{border-bottom:none;}
.cv-tag{position:absolute;top:5px;right:7px;font-family:'Space Mono';font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.cv-hero{padding:20px 15px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(78,140,99,.18),transparent 70%);}
.cv-greet{font-family:'Space Mono';font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:5px;}
.cv-h{font-family:'Fraunces';font-size:15px;color:var(--cream);line-height:1.18;}
.cv-video{margin:0 15px;aspect-ratio:16/10;background:#06120B;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.cv-video .vg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(78,140,99,.4),transparent 62%);}
.cv-play{width:38px;height:38px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;position:relative;}
.cv-play svg{width:13px;height:13px;margin-left:2px;}
.cv-cal{display:flex;gap:5px;margin:0 15px;}
.cv-slot{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:6px 4px;text-align:center;}
.cv-slot .d{font-size:7.5px;color:var(--muted);font-family:'Space Mono';}
.cv-slot .t{font-size:9.5px;color:var(--cream);font-weight:600;margin-top:1px;}
.cv-slot.sel{background:var(--gold);border-color:var(--gold);}
.cv-slot.sel .d,.cv-slot.sel .t{color:#231905;}
.cv-line{height:5px;background:rgba(255,255,255,.08);border-radius: 0;margin:4px 0;}
.cv-line.w7{width:72%;}.cv-line.w4{width:46%;}.cv-line.w9{width:90%;}
.setrow{margin-bottom:14px;}
.setrow label{display:block;font-family:'Space Mono';font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);margin-bottom:6px;}
.tpl-wrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);}
.tpl-actions{display:flex;flex-direction:column;gap:8px;margin-top:11px;}
.tpl-actions .btn{width:100%;}
/* === SETTINGS VIEW === */
.settings-grid{display:grid;grid-template-columns:240px 1fr;gap:0;border:1px solid var(--line);}
.settings-nav{border-right:1px solid var(--line-soft);padding:8px;}
.settings-nav .sn-item{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:13px;color:var(--muted);cursor:pointer;border-radius: 0;transition:background .15s,color .15s;}
.settings-nav .sn-item:hover{background:var(--bg-soft);color:var(--cream);}
.settings-nav .sn-item.active{background:var(--bg-soft);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line);}
.settings-nav .sn-item svg{width:14px;height:14px;color:var(--faint);}
.settings-nav .sn-item.active svg{color:var(--gold);}
.settings-nav .sn-sep{height:1px;background:var(--line-soft);margin:6px 0;}
.settings-panel{padding:28px;}
.settings-panel.hidden{display:none;}
.sp-h{font-family:'Fraunces';font-size:24px;font-weight:400;letter-spacing:-.02em;margin-bottom:6px;}
.sp-sub{font-size:13.5px;color:var(--muted);margin-bottom:26px;}
.sp-section{margin-bottom:28px;}
.sp-section h4{font-family:'Space Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);}
/* === HELP PANEL (slides in from right) === */
#help-panel{position:fixed;top:0;right:-560px;width:520px;max-width:100vw;height:100vh;background:var(--bg-card);border-left:1px solid var(--line);z-index:400;display:flex;flex-direction:column;transition:right .36s cubic-bezier(.16,.84,.32,1);box-shadow:-40px 0 80px -30px rgba(0,0,0,.6);}
#help-panel.open{right:0;}
#help-overlay{position:fixed;inset:0;z-index:399;background:var(--overlay);backdrop-filter:blur(3px);display:none;}
#help-overlay.open{display:block;}
.hp-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line-soft);flex:none;}
.hp-head h3{font-family:'Fraunces';font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--cream);}
.hp-close{width:30px;height:30px;border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius: 0;transition:border-color .15s,color .15s;}
.hp-close:hover{border-color:var(--gold);color:var(--gold);}
.hp-close svg{width:14px;height:14px;}
.hp-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-soft);flex:none;}
.hp-tab{flex:1;padding:11px 16px;font-family:'Space Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;text-align:center;transition:color .15s,border-color .15s;}
.hp-tab:hover{color:var(--cream);}
.hp-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.hp-body{flex:1;overflow-y:auto;padding:20px 24px;}
.hp-body::-webkit-scrollbar{width:6px;}
.hp-body::-webkit-scrollbar-thumb{background:var(--bg-soft);}
/* faq items */
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:14px 0;cursor:pointer;font-size:14px;color:var(--cream);font-weight:500;gap:12px;}
.faq-q svg{width:14px;height:14px;color:var(--gold);flex:none;transition:transform .22s;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{font-size:13.5px;color:var(--muted);line-height:1.65;padding:0 0 16px;display:none;}
.faq-a code{font-family:'Space Mono';font-size:11px;color:var(--gold-2);background:rgba(204,158,71,.1);padding:1px 5px;}
.faq-item.open .faq-a{display:block;}
.faq-section-label{font-family:'Space Mono';font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:20px 0 6px;display:block;}
/* contact card */
.contact-card{border:1px solid var(--line);padding:20px;margin-bottom:14px;display:flex;gap:14px;align-items:flex-start;}
.contact-card .cc-icon{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none;}
.contact-card .cc-icon svg{width:16px;height:16px;}
.contact-card h4{font-family:'Fraunces';font-size:16px;color:var(--cream);margin-bottom:4px;}
.contact-card p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.tour-replay-card{border:1px solid var(--line);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;background:var(--bg-soft);}
.tour-replay-card .tr-left h4{font-family:'Fraunces';font-size:16px;color:var(--cream);margin-bottom:3px;}
.tour-replay-card .tr-left p{font-size:13px;color:var(--muted);}
/* === ONBOARDING TOUR === */
#tour-mask{position:fixed;inset:0;z-index:9000;pointer-events:none;display:none;}
#tour-mask.show{display:block;}
#spot{position:absolute;border-radius: 0;box-shadow:0 0 0 9999px rgba(8,15,11,.82);transition:all .4s cubic-bezier(.16,.84,.32,1);pointer-events:none;outline:1.5px solid var(--gold);outline-offset:0;}
#tip{position:fixed;z-index:9001;width:340px;max-width:calc(100vw - 28px);background:var(--bg-card);border:1px solid var(--gold);padding:22px;display:none;box-shadow:0 28px 56px -20px rgba(0,0,0,.8);transition:top .4s cubic-bezier(.16,.84,.32,1),left .4s cubic-bezier(.16,.84,.32,1);}
#tip.show{display:block;}
#tip .tip-cm{position:absolute;width:12px;height:12px;}
#tip .tip-num{font-family:'Space Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:13px;display:flex;align-items:center;gap:10px;}
#tip .tip-num .rule{flex:1;height:1px;background:var(--line);}
#tip h3{font-family:'Fraunces';font-size:22px;font-weight:400;line-height:1.1;color:var(--cream);margin-bottom:9px;letter-spacing:-.02em;}
#tip h3 .ital{font-style:italic;color:var(--gold-2);}
#tip p{font-size:13.5px;color:var(--cream-2);line-height:1.62;}
#tip .tip-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:10px;}
#tip .dots{display:flex;gap:5px;}
#tip .dots i{width:5px;height:5px;border-radius:50%;background:var(--line-soft);transition:background .28s,width .28s;}
#tip .dots i.on{background:var(--gold);width:16px;border-radius: 0;}
#tip .tip-btns{display:flex;gap:7px;}
#tour-skip{position:fixed;top:16px;right:20px;z-index:9002;font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);cursor:pointer;display:none;align-items:center;justify-content:center;gap:6px;background:var(--nav-bg);border:1px solid var(--line);height:32px;padding:0 14px;line-height:1;box-sizing:border-box;border-radius: 0;backdrop-filter:blur(6px);}
#tour-skip.show{display:inline-flex;}
#tour-skip:hover{color:var(--gold-2);border-color:var(--line);}
/* welcome modal */
#welcome{position:fixed;inset:0;z-index:9100;background:var(--scrim);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;}
#welcome.show{display:flex;}
.wc{max-width:520px;background:var(--bg-card);border:1px solid var(--gold);padding:44px 40px;text-align:center;position:relative;animation:wcup .5s cubic-bezier(.16,.84,.32,1);}
@keyframes wcup{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.wc .perf{position:absolute;top:0;bottom:0;width:13px;display:flex;flex-direction:column;justify-content:space-around;padding:13px 0;}
.wc .perf.l{left:-1px;}.wc .perf.r{right:-1px;}
.wc .perf b{display:block;height:8px;width:6px;margin:0 auto;background:var(--cream);opacity:.11;border-radius: 0;}
.wc .meta{margin-bottom:18px;display:block;}
.wc h2{font-size:36px;font-weight:300;letter-spacing:-.03em;line-height:1.04;margin-bottom:14px;}
.wc h2 .ital{font-style:italic;color:var(--gold-2);}
.wc p{color:var(--cream-2);font-size:14.5px;max-width:390px;margin:0 auto 26px;line-height:1.68;}
.wc .wc-btns{display:flex;gap:11px;justify-content:center;}
@media(max-width:1100px){.builder{grid-template-columns:1fr;}.b-col.left,.b-col.right{border:none;border-bottom:1px solid var(--line-soft);}.settings-grid{grid-template-columns:1fr;}.settings-nav{border-right:none;border-bottom:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:4px;padding:8px;}}
@media(max-width:820px){.nav-tabs{position:fixed;bottom:0;left:0;right:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;border-top:1px solid var(--line);justify-content:center;z-index:200;background:var(--nav-bg);backdrop-filter:blur(14px);padding:6px;}.nav-in{padding:0 16px;}.app{padding:22px 16px 90px;}.stats{grid-template-columns:repeat(2,1fr);}.frow,.vid-row{grid-template-columns:1fr;}.tbl .hide-sm{display:none;}#tip{width:296px;}#help-panel{width:100vw;}}
/* Auth pages styling */
.auth-body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg);
}
/* CRITICAL: on auth pages .app is a flex child that otherwise shrink-wraps to
its content — which collapses .auth-wrap's width:100% and makes max-width
never apply (the box looked stuck ~600px no matter the number). Forcing the
wrapper to full width lets the box actually reach its max-width. */
.auth-body .app {
width: 100%;
max-width: 920px;
display: flex;
justify-content: center;
}
.auth-wrap {
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 24px;
display: flex;
flex-direction: column;
}
.auth-logo {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.auth-logo img {
height: 28px;
}
.auth-title {
font-size: 24px;
font-weight: 500;
color: var(--cream);
text-align: center;
margin-bottom: 8px;
}
.auth-sub {
font-size: 14px;
color: var(--muted);
text-align: center;
margin-bottom: 32px;
}
.auth-footer {
text-align: center;
font-size: 13px;
color: var(--muted);
margin-top: 24px;
}
.auth-footer a {
color: var(--gold-2);
text-decoration: none;
}
.auth-wrap .panel {
padding: 32px;
background: var(--bg-card);
}
.auth-panel {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 0;
padding: 40px 44px;
box-shadow: 0 8px 32px var(--shadow);
}
/* Auth pages: roomier inputs & buttons so the form doesn't feel cramped */
.auth-panel .field { margin-bottom: 20px; }
.auth-panel .inp {
height: 50px;
line-height: 48px;
font-size: 15px;
padding: 0 16px;
}
.auth-panel .btn {
height: 50px;
font-size: 14.5px;
}
.auth-title { font-size: 28px; }
.auth-logo img { height: 32px; }
.auth-tabs-wrap {
display: flex;
gap: 0;
margin-bottom: 0;
border: 1px solid var(--line-soft);
border-bottom: none;
background: var(--bg);
}
.auth-tab {
flex: 1;
padding: 16px;
border: none;
border-right: 1px solid var(--line-soft);
font-size: 13px;
cursor: pointer;
font-family: inherit;
transition: all .15s;
background: transparent;
color: var(--muted);
font-weight: 400;
border-radius: 0;
}
.auth-tab:last-child {
border-right: none;
}
.auth-tab.active {
background: var(--bg-card);
color: var(--cream);
font-weight: 500;
}
/* Admin Table styling */
.table-wrap {
overflow-x: auto;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 0;
}
.table-wrap table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--cream);
}
.table-wrap th {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-weight: 500;
}
.table-wrap td {
padding: 12px 16px;
border-bottom: 1px solid var(--line-soft);
}
.table-wrap tr:last-child td {
border-bottom: none;
}
/* Stats grid for admin */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line);
background: var(--bg-2);
margin-bottom: 32px;
}
.stat:last-child {
border-right: none;
}
.stat-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.stat-val {
font-size: 24px;
font-weight: 500;
color: var(--cream);
}
/* Corner bracket border effect */
.auth-panel, .inp, .panel {
position: relative;
border: 1px solid var(--line-soft) !important;
border-radius: 0 !important;
}
.auth-panel, .panel, .stats-grid {
border: 1px solid var(--line-soft) !important;
border-radius: 0 !important;
background-image:
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold)),
linear-gradient(var(--gold), var(--gold));
background-repeat: no-repeat;
background-position:
top left, top left,
top right, top right,
bottom left, bottom left,
bottom right, bottom right;
background-size:
8px 2px, 2px 8px,
8px 2px, 2px 8px,
8px 2px, 2px 8px,
8px 2px, 2px 8px;
}
.inp {
background-image: none !important;
border: 1px solid var(--line-soft) !important;
}
/* === BILLING PAGE === */
.billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.plan-badge{display:inline-block;background:var(--warm-bg);color:var(--gold-2);font-size:11px;font-weight:500;padding:3px 10px;margin-bottom:12px;}
.plan-price{font-family:'Fraunces',serif;font-size:44px;font-weight:300;margin:6px 0 2px;color:var(--cream);}
.plan-meta{font-size:13px;color:var(--muted);}
.plan-feats{margin:16px 0;display:flex;flex-direction:column;gap:8px;}
.plan-feat{font-size:13px;display:flex;align-items:center;gap:8px;color:var(--cream-2);}
.plan-feat .tick{color:var(--green-2);font-weight:600;}
.panel-title{font-weight:600;font-size:16px;margin-bottom:20px;color:var(--cream);}
.kv{margin-bottom:16px;}
.kv-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.kv-val{font-size:13px;color:var(--cream);}
.pill.danger{background:var(--red-line);color:var(--red-txt);}
.meta-sub{font-size:11.5px;color:var(--muted);font-family:'Space Mono';letter-spacing:.02em;}
.tbl-wrap{overflow-x:auto;}
.inv-link{color:var(--green-2);font-size:12px;font-weight:500;text-decoration:none;margin-left:14px;}
.inv-link:hover{text-decoration:underline;}
.empty-state{padding:32px 20px;color:var(--muted);font-size:13.5px;line-height:1.6;text-align:center;}
@media(max-width:760px){.billing-grid{grid-template-columns:1fr;}}
/* === RESPONSIVE: small screens === */
/* media should never force a horizontal scrollbar */
img,svg,video{max-width:100%;}
@media(max-width:560px){
.auth-wrap{padding:16px;}
.auth-panel{padding:28px 22px;}
.auth-panel .inp{height:48px;line-height:46px;}
.billing-grid{grid-template-columns:1fr;}
.plan-price{font-size:38px;}
.page-head h1{font-size:30px;}
}
/* phones: stop the top bar from crowding + give content room */
@media(max-width:480px){
.nav-in{padding:0 14px;}
.userchip span{display:none;} /* avatar + caret only — name was crowding */
.userchip{padding:4px;}
.nav-right{gap:8px;}
.app{padding:18px 14px 96px;}
.stats{grid-template-columns:1fr;}
.page-head{margin-bottom:22px;}
.page-head h1{font-size:26px;}
.panel{padding:18px;}
}
/* === HELP / FAQ PAGE === */
.help-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
@media(max-width:860px){.help-grid{grid-template-columns:1fr;}}
/* === ADMIN BRANDING PREVIEW === */
.logo-preview{padding:18px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:80px;}
.logo-preview-dark{background:#0F1C14;}
.logo-preview-light{background:#F5F1E6;}
/* === Mobile grid stacking (prevents the side-by-side overflow on phones) === */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){
.grid-2{grid-template-columns:1fr;}
.steps{grid-template-columns:1fr;}
.steps .step{border-right:none;border-bottom:1px solid var(--line-soft);}
.steps .step:last-child{border-bottom:none;}
.stats-grid{grid-template-columns:repeat(2,1fr);}
.drop{padding:26px 18px;}
}
@media(max-width:440px){
.stats-grid{grid-template-columns:1fr;}
}