/* ─────────────────────────────────────────────────────────────────────
TCF抢位 · Hi-fi design tokens + base
───────────────────────────────────────────────────────────────────── */
:root{
/* warm dark editorial — ink + cream */
--bg-0:#15110A;
--bg-1:#1B170F;
--bg-2:#241F15;
--bg-3:#2E2818;
--bd:rgba(245,239,224,.07);
--bd-2:rgba(245,239,224,.13);
--bd-3:rgba(245,239,224,.22);
--tx-0:#F5EFE0;
--tx-1:#CFC6AF;
--tx-2:#948B72;
--tx-3:#5E5747;
/* accent — tweakable */
--accent:#C8342A;
--accent-2:#A8261E;
--accent-soft:rgba(200,52,42,.10);
--accent-ring:rgba(200,52,42,.28);
--ok:#2BA77A;
--warn:#C68A1F;
/* type */
--f-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
--f-serif:'Iowan Old Style','Songti SC','STSong','Noto Serif CJK SC',Georgia,'Times New Roman',serif;
--f-display:'Iowan Old Style','Songti SC','STSong','Noto Serif CJK SC',Georgia,serif;
--f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
--f-num:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
/* sizing */
--r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px;
--shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.25);
--shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 48px rgba(0,0,0,.4);
--space-y:96px; /* section vertical rhythm */
--hero-img-small:image-set(
url('/hero-960.avif') type('image/avif'),
url('/hero-960.webp') type('image/webp'),
url('/hero.jpg') type('image/jpeg')
);
--hero-img-medium:image-set(
url('/hero-1440.avif') type('image/avif'),
url('/hero-1440.webp') type('image/webp'),
url('/hero.jpg') type('image/jpeg')
);
--hero-img-large:image-set(
url('/hero-1920.avif') type('image/avif'),
url('/hero-1920.webp') type('image/webp'),
url('/hero.jpg') type('image/jpeg')
);
}
[data-theme="light"]{
/* warm cream / paper palette */
--bg-0:#F4EFE3;
--bg-1:#FBF7EC;
--bg-2:#EDE7D5;
--bg-3:#E1D9C2;
--bd:rgba(43,32,14,.08);
--bd-2:rgba(43,32,14,.13);
--bd-3:rgba(43,32,14,.20);
--tx-0:#1F1A0E;
--tx-1:#4A4332;
--tx-2:#766E58;
--tx-3:#A39B82;
--accent-soft:rgba(255,59,71,.12);
--shadow-1:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px rgba(43,32,14,.06);
--shadow-2:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 40px rgba(43,32,14,.10);
}
[data-density="compact"]{ --space-y:64px; }
/* ─────────────────────────────────────────────────────────────────────
reset + base
───────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
background:var(--bg-0);
color:var(--tx-0);
font-family:var(--f-sans);
font-size:15px;line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-feature-settings:'ss01','cv11','tnum';
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent-soft);color:var(--accent)}
/* container */
.wrap{width:min(1700px,calc(100% - 64px));margin-inline:auto}
/* typography */
.eyebrow{
font:500 13px/1.4 var(--f-sans);letter-spacing:.02em;text-transform:none;
color:var(--tx-2);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'—';width:auto;height:auto;background:none;color:var(--accent);font-weight:600}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
h1,h2{font-family:var(--f-serif);font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(36px,5vw,64px);line-height:1.12;font-weight:700}
h2{font-size:clamp(26px,3.2vw,40px);line-height:1.2;font-weight:600}
h3{font-size:clamp(19px,1.7vw,22px);line-height:1.3;font-weight:600}
h4{font-size:16px;line-height:1.3;font-weight:600}
p{margin:0;color:var(--tx-1)}
.lead{font-size:18px;line-height:1.55;color:var(--tx-1)}
.mono{font-family:var(--f-mono)}
.muted{color:var(--tx-2)}
.tx-2{color:var(--tx-2)}
.tnum{font-variant-numeric:tabular-nums}
/* ─────────────────────────────────────────────────────────────────────
nav
───────────────────────────────────────────────────────────────────── */
.nav{
--nav-h:96px;
position:sticky;top:0;z-index:60;
background:color-mix(in srgb,var(--bg-0) 86%,transparent);
-webkit-backdrop-filter:blur(16px) saturate(140%);
backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid var(--bd);
color:var(--tx-0);
}
.nav.is-scrolled{--nav-h:66px;border-bottom-color:var(--bd-2);box-shadow:0 12px 40px -16px rgba(0,0,0,.6)}
.nav-inner{display:flex;align-items:center;gap:clamp(18px,3vw,40px);height:var(--nav-h);transition:height .35s cubic-bezier(.22,1,.36,1)}
/* wordmark + masthead tagline */
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0;line-height:1;
font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.brand-word{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,1.7vw,25px);letter-spacing:-.01em;color:var(--tx-0);white-space:nowrap}
.brand-accent{color:var(--accent)}
.brand-rule{width:1px;height:20px;background:var(--bd-2);flex:none}
.brand-tag{font:600 10.5px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap;transition:opacity .3s,transform .3s}
.nav.is-scrolled .brand-rule,.nav.is-scrolled .brand-tag{opacity:0;transform:translateX(-6px);pointer-events:none}
/* numbered nav links — echoes the page's Nº section index */
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);margin-left:auto}
.nav-link{position:relative;display:inline-flex;align-items:baseline;gap:6px;font:500 15.5px/1 var(--f-sans);color:var(--tx-1);padding:8px 0;transition:color .2s}
.nav-link .nl-idx{font:600 10px/1 var(--f-num);letter-spacing:.04em;color:var(--tx-3);transition:color .2s}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .32s cubic-bezier(.22,1,.36,1)}
.nav-link:hover,.nav-link.active{color:var(--tx-0)}
.nav-link:hover .nl-idx,.nav-link.active .nl-idx{color:var(--accent)}
.nav-link:hover::after,.nav-link.active::after{right:0}
/* end cluster: live dateline + CTA + burger */
.nav-end{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex-shrink:0;margin-left:clamp(10px,2vw,28px)}
.nav-live{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap}
.nav-live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:live-pulse 2.4s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 var(--accent-ring)}70%{box-shadow:0 0 0 7px rgba(200,52,42,0)}100%{box-shadow:0 0 0 0 rgba(200,52,42,0)}}
.nav-cta-btn{padding:11px 19px;font-size:14.5px;border-radius:var(--r-md)}
.nav-cta-btn .cta-arr{display:inline-block;margin-left:7px;transition:transform .25s}
.nav-cta-btn:hover .cta-arr{transform:translateX(3px)}
/* display:inline-flex beats the UA [hidden]; force-hide these when toggled */
.nav-cta-btn[hidden],.nav-mobile-cta[hidden],.nav-live[hidden]{display:none}
/* 我的控制台 — outlined secondary, distinct from the red CTA */
.nav-dash-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-cta{display:flex;justify-content:center;gap:14px;margin-top:48px;flex-wrap:wrap}
/* burger (mobile) */
.nav-burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0;margin-left:2px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--tx-0);border-radius:2px;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
/* full-screen editorial mobile menu */
.nav-mobile{
position:fixed;inset:0;z-index:55;background:var(--bg-0);
padding:100px clamp(22px,7vw,44px) 44px;
display:flex;flex-direction:column;
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility .3s;
}
body.menu-open{overflow:hidden}
body.menu-open .nav-mobile{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-mobile-links{display:flex;flex-direction:column;border-top:1px solid var(--bd)}
.mm-link{display:flex;align-items:baseline;gap:16px;padding:clamp(18px,4vw,26px) 2px;border-bottom:1px solid var(--bd);
font-family:var(--f-display);font-weight:600;font-size:clamp(28px,8vw,42px);color:var(--tx-0)}
.mm-link .mm-idx{font:600 13px/1 var(--f-num);letter-spacing:.04em;color:var(--accent);flex:none}
.mm-link .mm-label{flex:1}
.mm-link .mm-arr{color:var(--tx-3);font-size:.62em;transition:transform .25s,color .25s}
.mm-link.active{color:var(--accent)}
.mm-link.active .mm-arr,.mm-link:hover .mm-arr{color:var(--accent);transform:translateX(5px)}
.nav-mobile-foot{margin-top:auto;display:flex;flex-direction:column;gap:18px;padding-top:30px}
.nav-mobile-foot .nav-live{font-size:11px}
.nav-mobile-cta{width:100%}
body.menu-open .mm-link{animation:mm-in .5s both cubic-bezier(.22,1,.36,1)}
.nav-mobile-links .mm-link:nth-child(1){animation-delay:.05s}
.nav-mobile-links .mm-link:nth-child(2){animation-delay:.10s}
.nav-mobile-links .mm-link:nth-child(3){animation-delay:.15s}
.nav-mobile-links .mm-link:nth-child(4){animation-delay:.20s}
@keyframes mm-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.nav-inner,.nav-link::after,.brand-tag,.cta-arr,.nav-burger span,.nav-mobile{transition:none}
.nav-live-dot{animation:none}
body.menu-open .mm-link{animation:none}
}
/* ─────────────────────────────────────────────────────────────────────
buttons
───────────────────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 16px;border-radius:var(--r-md);
font-size:14px;font-weight:600;letter-spacing:-.005em;
border:1px solid var(--bd-2);background:var(--bg-1);color:var(--tx-0);
transition:all .18s ease;
white-space:nowrap;line-height:1;
}
.btn:hover{border-color:var(--bd-3);background:var(--bg-2)}
.btn-primary{
background:var(--accent);
color:#fff;border-color:transparent;
}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--bd)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:var(--r-lg)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn .icon{width:14px;height:14px;flex:none}
/* ─────────────────────────────────────────────────────────────────────
hero
───────────────────────────────────────────────────────────────────── */
.hero{
position:relative;padding:96px 0 80px;overflow:hidden;
}
.hero-grid{display:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center}
.hero h1{margin-top:24px}
.hero h1 .hl{color:var(--accent);white-space:nowrap;font-style:normal;font-weight:600}
.hero .lead{margin-top:24px;max-width:520px}
.hero-ctas{margin-top:36px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero-meta{margin-top:36px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;color:var(--tx-2);font-size:13px}
.hero-meta b{color:var(--tx-0);font-weight:600;font-feature-settings:'tnum';margin-right:6px}
.hero-meta > span{display:inline-flex;align-items:center;line-height:1.4}
.hero-meta .sep{width:1px;height:14px;background:var(--bd-2);align-self:center}
/* live monitor card on the right */
.live-card{
background:var(--bg-1);
border:1px solid var(--bd-2);border-radius:var(--r-lg);
padding:22px;
font-family:var(--f-sans);font-size:13px;
}
.live-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.live-title{display:flex;align-items:center;gap:8px;color:var(--tx-1);font-weight:500}
.live-title .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.live-tabs{display:flex;gap:14px;color:var(--tx-2);font-size:11px}
.live-tabs span:first-child{color:var(--tx-0)}
.live-rows{display:flex;flex-direction:column}
.live-row{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--bd)}
.live-row:first-child{border-top:0}
.live-row .t{color:var(--tx-2);font-size:11px}
.live-row .c{color:var(--tx-0);display:flex;align-items:center;gap:8px}
.live-row .c .city-chip{padding:2px 7px;border-radius:99px;background:var(--bg-3);color:var(--tx-1);font-size:11px;font-weight:500;font-family:var(--f-sans);letter-spacing:.04em}
.live-row .v{text-align:right;color:var(--ok);font-weight:500}
.live-row .v.no{color:var(--tx-3)}
.live-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd);
display:flex;justify-content:space-between;color:var(--tx-2);font-size:11px}
.live-foot .pill{padding:3px 8px;border:1px solid var(--bd-2);border-radius:99px;color:var(--tx-1)}
/* ─────────────────────────────────────────────────────────────────────
section base
───────────────────────────────────────────────────────────────────── */
.section{padding:var(--space-y) 0}
.section-head{margin-bottom:48px;max-width:760px}
.section-head h2{margin-top:14px}
.section-head p{margin-top:14px}
.section-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;max-width:none}
.section-head.row > div:first-child{max-width:680px}
.ph-pay{flex:none;font-size:13px;text-align:right;line-height:1.5}
.ph-pay span{color:var(--tx-3)}
/* ─────────────────────────────────────────────────────────────────────
stats
───────────────────────────────────────────────────────────────────── */
.stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--bd);border:1px solid var(--bd);border-radius:var(--r-xl);
overflow:hidden;
}
.stat{padding:28px 24px;background:var(--bg-1);display:flex;flex-direction:column;gap:6px;position:relative}
.stat .k{font:500 13px/1.3 var(--f-sans);letter-spacing:.01em;color:var(--tx-2)}
.stat .v{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.03em;margin-top:8px;color:var(--tx-0);font-variant-numeric:tabular-nums}
.stat .v small{font-size:18px;color:var(--tx-2);font-weight:600;margin-left:4px}
.stat .d{font-size:12.5px;color:var(--tx-2)}
.stat .spark{display:none}
/* ─────────────────────────────────────────────────────────────────────
cities
───────────────────────────────────────────────────────────────────── */
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.city-card{
position:relative;padding:24px;border:1px solid var(--bd);border-radius:var(--r-xl);
background:var(--bg-1);overflow:hidden;
transition:border-color .2s, transform .2s, box-shadow .2s;
}
.city-card:hover{border-color:var(--bd-3);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.city-card .topline{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.city-card .code{font:600 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--tx-2)}
.city-card .badge{font:500 11px/1 var(--f-mono);padding:4px 8px;border-radius:99px;background:var(--bg-3);color:var(--tx-1)}
.city-card .badge.hot{background:var(--accent-soft);color:var(--accent)}
.city-card h3{font-size:28px;font-weight:700;letter-spacing:-.02em}
.city-card .en{margin-top:2px;font:500 12px/1 var(--f-mono);color:var(--tx-2);letter-spacing:.04em}
.city-card .stats-mini{margin-top:20px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.city-card .stats-mini .row{display:flex;justify-content:space-between}
.city-card .stats-mini .row span:first-child{color:var(--tx-2)}
.city-card .stats-mini .row span:last-child{color:var(--tx-0);font-weight:500;font-variant-numeric:tabular-nums}
.city-card .stats-mini .row .ok{color:var(--ok)}
/* ─────────────────────────────────────────────────────────────────────
services compare
───────────────────────────────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc{
position:relative;padding:36px;border:1px solid var(--bd-2);border-radius:var(--r-2xl);
background:var(--bg-1);overflow:hidden;
display:flex;flex-direction:column;gap:24px;
box-shadow:var(--shadow-1);
transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
}
.svc:hover{transform:translateY(-4px);border-color:var(--bd-3);box-shadow:var(--shadow-2)}
.svc.featured{
background:var(--bg-1);
border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent), var(--shadow-1);
}
.svc.featured:hover{
box-shadow:0 0 0 1px var(--accent), var(--shadow-2);
}
.svc-head{display:flex;align-items:center;justify-content:flex-start;gap:16px;padding-right:96px}
.svc-icon{
width:48px;height:48px;border-radius:12px;
display:grid;place-items:center;
background:var(--bg-3);color:var(--tx-0);
border:1px solid var(--bd-2);
}
.svc.featured .svc-icon{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring)}
.svc-name{display:flex;flex-direction:column;gap:4px}
.svc-name .en{font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--tx-2);text-transform:uppercase}
.svc-name h3{font-size:24px}
.svc-tag{color:var(--tx-1);font-size:15px}
.svc-pill{
position:absolute;top:24px;right:24px;
font:500 12px/1 var(--f-sans);letter-spacing:.01em;
color:var(--accent);padding:6px 12px;border:1px solid var(--accent-ring);
background:transparent;border-radius:99px;
}
.svc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.svc-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--tx-1)}
.svc-list li::before{
content:'';flex:none;width:18px;height:18px;border-radius:50%;
background:var(--bg-3);position:relative;margin-top:1px;
background-image:url("data:image/svg+xml;utf8,");
background-size:11px;background-position:center;background-repeat:no-repeat;
}
.svc.featured .svc-list li::before{
background-color:var(--accent-soft);
background-image:url("data:image/svg+xml;utf8,");
}
.svc-price{
margin-top:auto;padding-top:24px;border-top:1px solid var(--bd);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.svc-price .amounts{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.svc-price .p{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.svc-price .num{font-size:28px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1}
.svc-price .u{font-size:12.5px;color:var(--tx-2);line-height:1.2}
.svc-price .p.small{align-items:center}
.svc-price .p.small .u{font-size:13px;color:var(--tx-1)}
/* ─────────────────────────────────────────────────────────────────────
how it works
───────────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;list-style:none;padding:0;margin:0}
.steps::before{
content:'';position:absolute;left:8%;right:8%;top:32px;height:1px;
background:var(--bd-2);
}
.step{position:relative;padding-top:0}
.step .n{
width:64px;height:64px;border-radius:50%;
background:var(--bg-1);border:1px solid var(--bd-2);
display:grid;place-items:center;font:700 22px/1 var(--f-mono);
color:var(--accent);letter-spacing:-.02em;
position:relative;z-index:2;
}
.step:first-child .n,.step:last-child .n{box-shadow:0 0 0 6px var(--bg-0)}
.step h4{margin-top:18px;font-size:17px}
.step p{margin-top:6px;font-size:13.5px;color:var(--tx-2)}
/* how it works — editorial vertical timeline */
.flow{list-style:none;margin:0;padding:0;max-width:780px}
.flow-step{
display:grid;grid-template-columns:64px 1fr;column-gap:30px;
position:relative;padding-bottom:44px;
}
.flow-step:last-child{padding-bottom:0}
.flow-rail{position:relative;display:flex;justify-content:center}
/* the spine: a hairline dropping from this node's centre to the next */
.flow-step:not(:last-child) .flow-rail::before{
content:'';position:absolute;left:50%;transform:translateX(-50%);
top:32px;bottom:-32px;width:1px;background:var(--bd-2);
}
.flow-num{
position:relative;z-index:1;
width:64px;height:64px;border-radius:50%;
display:grid;place-items:center;
background:var(--bg-0);border:1px solid var(--bd-2);
font:600 21px/1 var(--f-num);color:var(--accent);letter-spacing:-.02em;
}
.flow-step:first-child .flow-num{border-color:var(--accent-ring);background:var(--accent-soft)}
.flow-main{padding-top:10px}
.flow-kicker{
display:inline-block;font:500 11px/1 var(--f-mono);letter-spacing:.16em;
text-transform:uppercase;color:var(--tx-2);
}
.flow-main h4{margin-top:10px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.flow-main p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--tx-2);max-width:54ch}
/* desktop: heading sits in a sticky left rail, timeline fills the right */
@media (min-width:1024px){
#how .wrap{
display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
column-gap:88px;align-items:start;
}
#how .section-head{margin-bottom:0;position:sticky;top:118px}
#how .flow{max-width:660px}
}
/* services page: tighter vertical rhythm between sections */
.page-services .section{padding-top:60px;padding-bottom:60px}
@media (max-width:640px){
.page-services .section{padding-top:35px;padding-bottom:35px}
}
/* ─────────────────────────────────────────────────────────────────────
dashboard preview
───────────────────────────────────────────────────────────────────── */
.dash{
border:1px solid var(--bd-2);border-radius:var(--r-2xl);overflow:hidden;
background:var(--bg-1);box-shadow:var(--shadow-2);
}
.dash-bar{
display:flex;align-items:center;gap:14px;padding:12px 16px;
background:var(--bg-2);border-bottom:1px solid var(--bd);
font:500 12px/1 var(--f-mono);color:var(--tx-2);
}
.dash-bar .dots{display:flex;gap:6px}
.dash-bar .dots span{width:11px;height:11px;border-radius:50%;background:var(--bg-3)}
.dash-bar .url{
flex:1;display:flex;align-items:center;gap:8px;
background:var(--bg-1);border-radius:6px;padding:6px 10px;
color:var(--tx-1);font-size:11.5px;
}
.dash-body{display:grid;grid-template-columns:200px 1fr;min-height:480px}
.dash-side{padding:18px 14px;background:var(--bg-2);border-right:1px solid var(--bd);font-size:13px}
.dash-side .group{margin-bottom:18px}
.dash-side .group-t{font:500 12px/1 var(--f-sans);letter-spacing:.01em;color:var(--tx-2);padding:0 8px 10px}
.dash-side .item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;color:var(--tx-1);cursor:default}
.dash-side .item.on{background:var(--accent-soft);color:var(--accent)}
.dash-side .item .ic{width:14px;height:14px;flex:none;opacity:.8}
.dash-side .item .ct{margin-left:auto;font:500 11px/1 var(--f-mono);color:var(--tx-3)}
.dash-side .item.on .ct{color:var(--accent)}
.dash-main{padding:24px 26px}
.dash-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.dash-h h3{font-size:20px;letter-spacing:-.02em}
.dash-h .sub{font-size:13px;color:var(--tx-2);margin-top:4px}
.dash-h .actions{display:flex;gap:8px}
.dash-row{
display:grid;grid-template-columns:60px minmax(0,1fr) 130px 100px 84px;
gap:14px;align-items:center;
padding:14px 16px;border:1px solid var(--bd);border-radius:10px;margin-bottom:8px;
background:var(--bg-1);font-size:13.5px;
}
.dash-row .city{font:600 11px/1 var(--f-mono);letter-spacing:.06em;padding:5px 8px;background:var(--bg-3);border-radius:6px;color:var(--tx-1);width:fit-content;justify-self:start}
.dash-row .name{color:var(--tx-0);font-weight:500;min-width:0}
.dash-row .name small{display:block;color:var(--tx-2);font-weight:400;font-size:12px;margin-top:3px;line-height:1.4}
.dash-row .when{color:var(--tx-1);font-variant-numeric:tabular-nums;font-size:12.5px;line-height:1.4}
.dash-row .when small{display:block;color:var(--tx-2);font-size:11px;margin-top:3px;line-height:1.4}
.dash-row .status{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--f-mono);justify-self:start}
.dash-row .status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.dash-row .status.ok{color:var(--ok)}
.dash-row .status.run{color:var(--accent)}
.dash-row .act{display:flex;justify-content:flex-end}
.dash-row .act .btn-sm{padding:6px 12px;font-size:12px}
/* feed under dashboard */
.feed{margin-top:18px;padding:16px;border:1px solid var(--bd);border-radius:10px;background:var(--bg-2);font-family:var(--f-mono);font-size:12.5px}
.feed-h{display:flex;justify-content:space-between;color:var(--tx-2);margin-bottom:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.feed-line{padding:5px 0;color:var(--tx-1);display:flex;gap:12px}
.feed-line .t{color:var(--tx-3);width:64px}
.feed-line .lvl{width:48px}
.feed-line .lvl.ok{color:var(--ok)}
.feed-line .lvl.info{color:var(--tx-2)}
.feed-line .lvl.hit{color:var(--accent)}
/* ─────────────────────────────────────────────────────────────────────
pricing
───────────────────────────────────────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:920px;margin:0 auto}
.svc .city-select{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.svc .city-chip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx-1);padding:8px 13px;border:1px solid var(--bd-2);border-radius:10px;background:var(--bg-0);font-weight:500}
.svc .city-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.price-card .amt.amt-text{align-items:baseline}
.price-card .amt .n-text{font-size:22px;font-weight:600;color:var(--tx-0);letter-spacing:-.005em;font-family:var(--f-serif);line-height:1}
.price-card{
position:relative;display:flex;flex-direction:column;gap:14px;
padding:28px 24px;border:1px solid var(--bd-2);border-radius:var(--r-xl);
background:var(--bg-1);transition:transform .2s, border-color .2s;
}
.price-card:hover{transform:translateY(-3px);border-color:var(--bd-3)}
.price-card.featured{
border-color:var(--accent);
background:var(--bg-1);
box-shadow:0 0 0 1px var(--accent), var(--shadow-1);
}
.price-card .tag{font:500 13px/1 var(--f-sans);letter-spacing:.01em;color:var(--tx-2)}
.price-card .featured-pill{
position:absolute;top:0;right:24px;transform:translateY(-50%);
font:500 12px/1 var(--f-sans);letter-spacing:.01em;
color:#fff;padding:7px 12px;background:var(--accent);border-radius:99px;
}
.price-card .amt{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.price-card .amt .n{font-size:38px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.price-card .amt .u{font-size:13px;color:var(--tx-2);line-height:1.2}
.price-card h3{font-size:17px;font-weight:700;margin-top:4px}
.price-card .sub{font-size:13px;color:var(--tx-2);margin-top:-10px}
.price-card ul{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--tx-1)}
.price-card ul li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.price-card ul li::before{content:'✓';color:var(--accent);font-weight:700;flex:none;font-family:var(--f-mono);line-height:1.45}
.price-card .btn{margin-top:auto;width:100%}
.price-aside{text-align:center;margin:28px 0 0;font-size:13.5px}
.price-aside a{color:var(--accent);font-weight:500;white-space:nowrap}
.price-aside a:hover{text-decoration:underline}
/* ─────────────────────────────────────────────────────────────────────
testimonials
───────────────────────────────────────────────────────────────────── */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testi{
padding:28px;border:1px solid var(--bd);border-radius:var(--r-xl);background:var(--bg-1);
display:flex;flex-direction:column;gap:20px;
}
.testi .quote{font-size:16px;line-height:1.6;color:var(--tx-0);letter-spacing:-.005em;flex:1}
.testi .who{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--bd)}
.testi .avi{width:36px;height:36px;border-radius:50%;background:var(--bg-3);border:1px solid var(--bd-2);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--tx-1);flex-shrink:0}
.testi .meta{font-size:13px;line-height:1.4}
.testi .meta b{display:block;color:var(--tx-0);font-weight:600;margin-bottom:2px}
.testi .meta span{color:var(--tx-2);font-size:12px;font-family:var(--f-mono)}
/* ─────────────────────────────────────────────────────────────────────
FAQ
───────────────────────────────────────────────────────────────────── */
/* faq · two-column editorial layout */
.faq-layout{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:40px 80px;align-items:start}
.faq-aside{position:sticky;top:118px}
.faq-aside .eyebrow{margin-bottom:14px}
.faq-aside h2{margin-bottom:16px}
.faq-aside .lead{font-size:16px;line-height:1.6;color:var(--tx-1);margin:0 0 22px}
.faq-aside .faq-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.faq-aside .faq-cta .cta-arr{transition:transform .25s}
.faq-aside .faq-cta:hover .cta-arr{transform:translateX(3px)}
.faq-contact{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-sans);color:var(--accent)}
.faq-contact .arr{transition:transform .2s}
.faq-contact:hover .arr{transform:translateX(4px)}
@media (max-width:900px){
.faq-layout{grid-template-columns:1fr;gap:24px}
.faq-aside{position:static}
}
.faq{display:block;max-width:none;border-top:1px solid var(--bd)}
.faq-group{font:600 12px/1 var(--f-num);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:30px 0 8px}
.faq-group:first-child{padding-top:20px}
.faq details{border-bottom:1px solid var(--bd);padding:18px 0}
.faq summary{
list-style:none;cursor:default;display:flex;align-items:center;justify-content:space-between;gap:16px;
font-weight:500;font-size:15.5px;color:var(--tx-0);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:'';width:14px;height:14px;flex:none;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--tx-2);font-size:14px;line-height:1.65;max-width:66ch}
/* ─────────────────────────────────────────────────────────────────────
contact
───────────────────────────────────────────────────────────────────── */
.contact{
display:grid;grid-template-columns:1.1fr 1fr;gap:32px;
padding:48px;border:1px solid var(--bd-2);border-radius:var(--r-2xl);
background:var(--bg-1);
}
.contact-l h2{max-width:480px}
.contact-l p{margin-top:14px;max-width:440px}
.contact-channels{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.ch{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--bg-2)}
.ch .icon{width:32px;height:32px;border-radius:8px;background:var(--bg-3);display:grid;place-items:center;color:var(--tx-1)}
.ch .meta{display:flex;flex-direction:column;gap:2px}
.ch .meta b{color:var(--tx-0);font-weight:600;font-size:14px}
.ch .meta span{color:var(--tx-2);font-size:12px}
.ch .v{margin-left:auto;font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.qr-card{
align-self:start;
padding:28px;border:1px solid var(--bd-2);border-radius:var(--r-xl);
background:var(--bg-2);text-align:center;
}
.qr-card .label{font:500 13px/1 var(--f-sans);letter-spacing:.01em;color:var(--accent);margin-bottom:18px}
.qr{
width:220px;height:220px;margin:0 auto 18px;
background:
linear-gradient(45deg,var(--bg-1) 25%,transparent 25%) 0 0/16px 16px,
linear-gradient(-45deg,var(--bg-1) 25%,transparent 25%) 0 8px/16px 16px,
var(--bg-3);
border:1px solid var(--bd-2);border-radius:14px;position:relative;
}
.qr::before,.qr::after{content:'';position:absolute;width:48px;height:48px;border:5px solid var(--tx-0);border-radius:8px;background:var(--bg-2)}
.qr::before{top:14px;left:14px}
.qr::after{top:14px;right:14px}
.qr .qr-bl{position:absolute;bottom:14px;left:14px;width:48px;height:48px;border:5px solid var(--tx-0);border-radius:8px;background:var(--bg-2)}
.qr .qr-logo{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:.05em;box-shadow:0 0 0 6px var(--bg-2)}
.qr-card .wxid{font:600 16px/1 var(--f-mono);color:var(--tx-0);letter-spacing:.04em}
.qr-card .hint{margin-top:8px;font-size:12px;color:var(--tx-2)}
/* ─────────────────────────────────────────────────────────────────────
footer
───────────────────────────────────────────────────────────────────── */
footer{padding:64px 0 40px;border-top:1px solid var(--bd);margin-top:80px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-grid h5{font:600 13px/1 var(--f-sans);letter-spacing:.01em;color:var(--tx-1);margin:0 0 16px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-grid ul a{color:var(--tx-1)}
.foot-grid ul a:hover{color:var(--tx-0)}
.foot-brand p{font-size:13.5px;color:var(--tx-2);max-width:300px;margin-top:14px;line-height:1.55}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--bd);font-size:12px;color:var(--tx-2);font-family:var(--f-mono)}
.foot-bottom .badges{display:flex;gap:14px;align-items:center}
.foot-bottom .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--bd);border-radius:99px}
.foot-bottom .badge .d{width:6px;height:6px;border-radius:50%;background:var(--ok)}
/* footer on phones — collapse hard: drop the blurb, dissolve the three labeled
link columns into one compact wrapped link row, and tighten the bottom bar.
roughly halves the footer height. (legal disclaimer is kept.) */
@media (max-width:760px){
footer{padding:26px 0 18px;margin-top:38px}
/* `footer .foot-grid` beats the later ≤1024 `.foot-grid{gap:32px}` rule */
footer .foot-grid{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:14px}
.foot-brand{flex:0 0 100%;margin-bottom:2px}
.foot-brand p{display:none} /* drop the marketing blurb */
.foot-cities{display:none}
.foot-grid > div:not(.foot-brand){display:contents}
.foot-grid h5{display:none} /* drop the section headers */
.foot-grid ul{display:contents}
.foot-grid li{display:inline-flex}
.foot-grid ul a{font-size:12.5px;line-height:1.1;color:var(--tx-1)}
.foot-bottom{padding-top:12px;gap:6px}
}
@media (max-width:440px){
/* copyright on its own row; legal + status share the next row (saves a line) */
.foot-bottom{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px 12px;font-size:11px}
.foot-bottom > span:first-child{flex:0 0 100%}
.foot-legal{font-size:11px}
}
/* ─────────────────────────────────────────────────────────────────────
responsive
───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px){
.nav-links{display:none}
.nav-end{margin-left:auto}
.nav-end .nav-live{display:none}
.nav-burger{display:flex}
.brand-rule,.brand-tag{display:none}
}
@media (max-width: 1024px){
.hero-inner{grid-template-columns:1fr;gap:48px}
.stats{grid-template-columns:repeat(2,1fr)}
.city-grid{grid-template-columns:repeat(2,1fr)}
.svc-grid{grid-template-columns:1fr}
.steps{grid-template-columns:repeat(2,1fr);gap:32px}
.steps::before{display:none}
.price-grid{grid-template-columns:repeat(2,1fr)}
.t-grid{grid-template-columns:1fr}
.faq{grid-template-columns:1fr}
.contact{grid-template-columns:1fr}
.dash-body{grid-template-columns:1fr}
.dash-side{display:none}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width: 640px){
:root{--space-y:64px}
.nav{--nav-h:74px}
.nav-cta-btn{display:none}
/* keep the auth entry on the mobile top bar (compact) */
#nav-login, #nav-dashboard{display:inline-flex;padding:8px 12px;font-size:13px}
#nav-login .cta-arr, #nav-dashboard .cta-arr{display:none}
.stats,.city-grid,.steps,.price-grid{grid-template-columns:1fr}
.dash-row{grid-template-columns:60px 1fr 80px;gap:10px}
.dash-row .when,.dash-row .act{display:none}
.contact{padding:28px}
/* services page: pull the first section up close to the nav (only when
#services leads the page — on the home page it sits mid-scroll). */
#top > #services:first-child{padding-top:22px}
}
/* services cards: tighten on phones so the "开通监控" CTA surfaces sooner.
The featured card's heading/labels ate a whole viewport before the button. */
@media (max-width:560px){
#services .section-head{margin-bottom:22px}
#services .section-head h2{font-size:23px;margin-top:10px}
#services .section-head .lead{font-size:14.5px;line-height:1.5;margin-top:10px}
.svc{padding:22px;gap:16px}
.svc-head{gap:12px;padding-right:78px}
.svc-icon{width:40px;height:40px}
.svc-name{gap:2px}
.svc-name .en{font-size:10.5px;letter-spacing:.08em}
.svc-name h3{font-size:20px}
.svc-pill{top:16px;right:16px;padding:4px 9px;font-size:10.5px}
.svc-tag{font-size:13.5px;line-height:1.5}
.svc-list{gap:9px}
.svc-list li{font-size:13.5px}
.svc-price .num{font-size:24px}
/* footer: price centred on its own row; below it the small print sits
bottom-left and the CTA bottom-right (easy thumb reach) */
.svc-price{
padding-top:18px;
display:grid;grid-template-columns:1fr auto;
grid-template-areas:"price price" "small btn";
align-items:center;gap:12px 14px;
}
.svc-price .amounts{display:contents}
.svc-price .p{grid-area:price;justify-content:center}
.svc-price .p.small{grid-area:small;justify-self:start}
.svc-price .btn{grid-area:btn;justify-self:end}
/* timeline: tighter node + spacing on phones */
.flow-step{grid-template-columns:50px 1fr;column-gap:18px;padding-bottom:32px}
.flow-num{width:50px;height:50px;font-size:17px}
.flow-step:not(:last-child) .flow-rail::before{top:25px;bottom:-25px}
.flow-main{padding-top:7px}
.flow-main h4{font-size:17px}
.flow-main p{font-size:14px}
}
/* services cards as a swipeable carousel on phones: cards sit side-by-side
and scroll-snap horizontally; the 2nd card (自动代抢) peeks at the right
edge to signal there's more. Full-bleeds out of .wrap so swiping feels
native and the peek reaches the screen edge. */
@media (max-width:640px){
.svc-grid{
display:flex;
grid-template-columns:none;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
/* bleed to the viewport edges (.wrap gutter is 32px) then inset cards back
by that gutter, so a snapped card sits at the page gutter WITH room for
its shadow on both sides instead of being clipped at the edge */
margin:0 -32px;
padding-inline:32px;
padding-block:6px 22px;
scroll-padding-inline:32px;
scrollbar-width:none;
}
.svc-grid::-webkit-scrollbar{display:none}
.svc{
flex:0 0 85%;
scroll-snap-align:start;
}
}
/* ─────────────────────────────────────────────────────────────────────
theme toggle (floating)
───────────────────────────────────────────────────────────────────── */
.theme-toggle{
position:fixed;right:20px;bottom:20px;z-index:60;
width:44px;height:44px;border-radius:50%;
background:var(--bg-1);border:1px solid var(--bd-2);
color:var(--tx-0);box-shadow:var(--shadow-1);
display:grid;place-items:center;cursor:pointer;
transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.theme-toggle:hover{transform:translateY(-2px);border-color:var(--bd-3);background:var(--bg-2)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:block}
/* ───────────────────────────────────────────────────────────────────
EDITORIAL — homepage only (Nº 037 issue)
Magazine/newspaper voice. Hairline rules, Nº marks, big italic display.
───────────────────────────────────────────────────────────────── */
.masthead{
border-top:1px solid var(--bd-2);
border-bottom:1px solid var(--bd-2);
background:var(--bg-0);
font:500 11.5px/1 var(--f-sans);
letter-spacing:.06em;
text-transform:uppercase;
color:var(--tx-2);
}
.masthead-inner{display:flex;align-items:center;gap:18px;padding:11px 0;flex-wrap:wrap}
.masthead .m-iss{font-family:var(--f-display);font-style:normal;font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;color:var(--tx-0)}
.masthead .m-iss .o{font-feature-settings:'sups' on;font-size:.55em;vertical-align:.45em;margin-left:1px}
.masthead .m-sep{width:1px;height:11px;background:var(--bd-2)}
.masthead .m-spacer{flex:1}
.masthead .dot-mid{color:var(--tx-3);font-weight:400}
.masthead .m-stat{display:inline-flex;align-items:center;gap:7px;color:var(--tx-1)}
.masthead .m-stat .d{width:6px;height:6px;border-radius:50%;background:#2BA77A;box-shadow:0 0 0 3px rgba(43,167,122,.18)}
/* eyebrows / section numbers ────────────────────────────────────── */
.ed-num{
font-family:var(--f-display);
font-style:normal;
font-weight:600;
font-size:13.5px;
color:var(--accent);
letter-spacing:0;
display:inline-flex;align-items:baseline;
white-space:nowrap;
}
.ed-lab{
font:500 11.5px/1 var(--f-sans);
letter-spacing:.14em;
text-transform:uppercase;
color:var(--tx-2);
}
.ed-meta{
font:400 12.5px/1 var(--f-display);
font-style:normal;
color:var(--tx-3);
margin-left:auto;
}
/* hero ─────────────────────────────────────────────────────────── */
.ed-hero{
padding:0;
position:relative;
isolation:isolate;
overflow:hidden;
border-bottom:1px solid var(--bd-2);
min-height:calc(100svh - 96px);
display:flex;
flex-direction:column;
}
.ed-hero .ed-hero-inner{
flex:1;
display:flex;
flex-direction:column;
padding:48px 0 56px;
}
.hero-grid{
flex:1;
display:grid;
grid-template-columns:minmax(0,1fr) clamp(480px,50vw,760px);
gap:clamp(40px,5vw,80px);
align-items:center;
}
.hero-stack{
display:flex;flex-direction:column;
justify-content:center;
gap:clamp(28px,3vw,42px);
}
/* live monitor panel — 4:3 landscape, draggable ─────────────────── */
.hero-panel{
position:relative;align-self:center;justify-self:end;
width:100%;max-width:760px;aspect-ratio:4/3;
display:flex;flex-direction:column;overflow:hidden;
background:color-mix(in srgb,var(--bg-0) 84%,transparent);
-webkit-backdrop-filter:blur(12px) saturate(135%);
backdrop-filter:blur(12px) saturate(135%);
border:1px solid var(--bd-2);border-radius:var(--r-xl);
box-shadow:var(--shadow-2);
cursor:grab;-webkit-user-select:none;user-select:none;
will-change:transform;
transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.hero-panel::before{content:none}
.hero-panel.dragging{cursor:grabbing;transition:box-shadow .3s ease;box-shadow:0 40px 90px -24px rgba(0,0,0,.72);z-index:5}
.hero-panel a{cursor:auto}
/* window title bar */
.hp-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;
border-bottom:1px solid var(--bd-2);background:color-mix(in srgb,var(--bg-2) 55%,transparent)}
.hp-dots{display:flex;gap:7px;flex:none}
.hp-dots i{width:11px;height:11px;border-radius:50%;display:block}
.hp-dots i:nth-child(1){background:#E0564E}
.hp-dots i:nth-child(2){background:#E0A641}
.hp-dots i:nth-child(3){background:#4FA87A}
.hp-addr{flex:1;min-width:0;max-width:300px;margin:0 auto;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:6px 16px;border:1px solid var(--bd);border-radius:99px;background:var(--bg-0);
font:600 11px/1 var(--f-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-date{flex:none;font:600 12px/1 var(--f-sans);color:var(--tx-2);letter-spacing:.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
/* window body */
.hp-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:16px 20px 14px}
.hp-sysmeta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font:500 11.5px/1.4 var(--f-sans);letter-spacing:.02em;color:var(--tx-3)}
.hp-sysmeta b{color:var(--tx-1);font-weight:600;font-variant-numeric:tabular-nums}
.hp-sysmeta .dot{opacity:.55}
/* city tile grid (2 × 3) */
.hp-board{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
margin-top:14px;border-top:1px solid var(--bd);border-left:1px solid var(--bd)}
.hp-skel{grid-column:1/-1;display:grid;place-items:center;color:var(--tx-3);font-size:15px;
border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.hp-tile{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px 20px;
border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.hp-tile-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hp-tile-sub{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:var(--tx-2)}
.hp-city{font-family:var(--f-serif);font-weight:500;font-size:21px;color:var(--tx-0)}
.hp-iata{font-family:var(--f-sans);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--accent);margin-left:9px}
.hp-stat{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-sans);white-space:nowrap}
.hp-stat .st-dot{width:8px;height:8px;margin-right:0}
.hp-stat.st-ok{color:var(--ok)}
.hp-stat.st-ok .st-dot{background:var(--ok)}
.hp-stat.st-stale{color:var(--tx-3)}
.hp-mode{letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-clock{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.hp-clock .hc-t{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.02em;color:var(--tx-1)}
.hp-clock .hc-z{font-family:var(--f-num);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--tx-3)}
/* window status bar */
.hp-statusbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:10px 18px;border-top:1px solid var(--bd-2);background:color-mix(in srgb,var(--bg-2) 50%,transparent);
font:500 11.5px/1 var(--f-sans);letter-spacing:.02em;color:var(--tx-2)}
.hp-status-stats{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.hp-status-stats b{color:var(--tx-0);font-weight:600;font-variant-numeric:tabular-nums;margin-left:3px}
.hp-foot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx-1);transition:color .2s,gap .2s;white-space:nowrap}
.hp-foot .arr{transition:transform .2s}
.hp-foot:hover{color:var(--accent)}
.hp-foot:hover .arr{transform:translateX(3px)}
@media (max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:clamp(32px,6vw,48px)}
.hero-panel{align-self:stretch;justify-self:stretch;width:100%;max-width:640px;aspect-ratio:auto;margin-inline:auto}
}
@media (max-width:520px){
.hp-board{grid-template-columns:minmax(0,1fr);margin-top:10px}
.hp-tile{padding:9px 16px;gap:4px}
.hp-tile-top,.hp-tile-sub{gap:10px;min-width:0}
.hp-city{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.hp-iata{margin-left:6px;font-size:11.5px}
.hp-stat{font-size:12.5px}
.hp-tile-sub{font-size:11.5px}
.hp-clock .hc-t{font-size:12.5px}
.hp-mode{flex:1 1 auto;min-width:0}
.hp-clock{flex:none}
.hp-bar{padding:9px 14px}
.hp-body{padding:12px 16px 10px}
.hp-sysmeta{font-size:10.5px;gap:6px}
.hp-addr{letter-spacing:.08em}
.hp-statusbar{flex-wrap:wrap;gap:8px 14px;padding:8px 16px}
}
.ed-hero::before{
content:'';
position:absolute;inset:0;
background:var(--hero-img-medium) center 30%/cover no-repeat;
filter:grayscale(.32) brightness(.72) contrast(1.06) sepia(.3);
opacity:.88;
z-index:-2;
transform:scale(1.02);
}
@media (max-width:699px){
.ed-hero::before{background-image:var(--hero-img-small)}
}
@media (min-width:1500px){
.ed-hero::before{background-image:var(--hero-img-large)}
}
.ed-hero::after{
content:'';
position:absolute;inset:0;
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--bg-0) 42%, transparent) 0%,
color-mix(in oklab, var(--bg-0) 54%, transparent) 45%,
color-mix(in oklab, var(--bg-0) 84%, transparent) 82%,
var(--bg-0) 100%
);
z-index:-1;
pointer-events:none;
}
.ed-hero-inner{position:relative;z-index:1}
.ed-eyebrow{display:flex;align-items:baseline;gap:14px;margin-bottom:0}
.ed-eyebrow::after{
content:'';flex:1;height:1px;background:var(--bd-2);margin-left:14px;align-self:center;
}
.ed-h1{
font-family:var(--f-display),var(--f-serif);
font-weight:500;
font-size:clamp(54px,8.4vw,128px);
line-height:.96;
letter-spacing:-.02em;
color:var(--tx-0);
margin:0;
font-feature-settings:'ss01' on,'ss02' on;
}
.ed-h1 .l1,.ed-h1 .l2,.ed-h1 .l3{display:block}
.ed-h1 .l2{padding-left:.4em}
.ed-h1 .l3{padding-left:.18em}
.ed-h1 em.num-em{
font-family:inherit;
font-style:normal;
font-weight:600;
color:var(--accent);
font-variant-numeric:tabular-nums;
font-feature-settings:'lnum' on;
letter-spacing:-.02em;
margin:0 .04em 0 .02em;
}
.ed-h1 em.num-em .unit{
font-family:inherit;
font-size:.5em;
font-style:normal;
font-weight:500;
color:var(--accent);
vertical-align:.42em;
margin-left:.02em;
letter-spacing:0;
}
.ed-h1 .period{color:var(--accent)}
.ed-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
gap:88px;
align-items:start;
}
.ed-hero-l{display:flex;flex-direction:column;gap:52px}
.ed-lede{
font-family:var(--f-serif);
font-weight:400;
font-size:clamp(17px,1.5vw,21px);
line-height:1.55;
color:var(--tx-0);
max-width:62ch;
margin:0;
}
.ed-lede em{
font-style:normal;
font-family:var(--f-display);
color:var(--accent);
font-weight:600;
}
.ed-lede .sc{
font-family:var(--f-display);
font-feature-settings:'smcp' on,'c2sc' on;
letter-spacing:.04em;
font-weight:500;
}
.ed-side{padding-top:0}
.ed-side-list{list-style:none;padding:0;margin:0}
.ed-side-list li{
display:flex;justify-content:space-between;align-items:baseline;
padding:14px 0;border-bottom:1px solid var(--bd-2);
font-family:var(--f-sans);
}
.ed-side-list li:first-child{padding-top:0}
.ed-side-list li:last-child{border-bottom:none}
.ed-side-list .k{font-size:13px;color:var(--tx-2)}
.ed-side-list .v{
font-family:var(--f-display);
font-size:18px;
font-weight:500;
color:var(--tx-0);
font-variant-numeric:tabular-nums;
letter-spacing:-.005em;
}
.ed-cta-row{
display:flex;align-items:center;gap:18px;margin-top:56px;flex-wrap:wrap;
}
.ed-cta-rule{flex:0 0 56px;height:1px;background:var(--tx-0)}
.ed-cta-meta{
font-family:var(--f-serif);font-style:normal;color:var(--tx-2);font-size:14.5px;
}
/* arrow link — the editorial CTA pattern ───────────────────────── */
.ed-link{
display:inline-flex;align-items:baseline;gap:14px;
font-family:var(--f-display);
font-weight:600;
font-size:21px;
color:var(--tx-0);
text-decoration:none;
border-bottom:1px solid var(--tx-0);
padding-bottom:4px;
transition:color .18s, border-color .18s;
}
.ed-link .arr{
font-family:var(--f-display);
font-style:normal;
font-size:.92em;
display:inline-block;
transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.ed-link:hover{color:var(--accent);border-color:var(--accent)}
.ed-link:hover .arr{transform:translateX(6px)}
.ed-link.sm{font-size:15.5px;padding-bottom:3px;gap:10px}
.ed-link.lg{font-size:25px}
.ed-link.ghost{color:var(--tx-2);border-color:var(--bd-2)}
.ed-link.ghost:hover{color:var(--tx-0);border-color:var(--tx-0)}
/* sections — share vertical rhythm ─────────────────────────────── */
.ed-section{padding:84px 0;border-bottom:1px solid var(--bd-2)}
.ed-section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:36px}
.ed-section-head::after{content:'';flex:1;height:1px;background:var(--bd-2);margin-left:6px;align-self:center}
.ed-section-head .ed-meta::before{content:none}
@supports (content-visibility:auto){
.ed-section,
.section,
.end-cta,
footer{
content-visibility:auto;
contain-intrinsic-size:auto 720px;
}
}
/* ledger table ─────────────────────────────────────────────────── */
.ledger{
width:100%;
border-collapse:collapse;
font-family:var(--f-sans);
}
.ledger th{
text-align:left;
font:500 10.5px/1 var(--f-sans);
letter-spacing:.14em;
text-transform:uppercase;
color:var(--tx-3);
padding:0 0 14px;
border-bottom:2px solid var(--tx-0);
}
.ledger th.t-time{text-align:right}
.ledger td{
padding:18px 0;
border-bottom:1px solid var(--bd);
font-size:15.5px;
color:var(--tx-0);
vertical-align:middle;
}
.ledger .t-time{
width:140px;text-align:right;
font-family:var(--f-display);font-style:normal;font-weight:500;color:var(--tx-1);
font-variant-numeric:tabular-nums;font-size:16px;
}
.ledger .t-iata{
width:96px;font-family:var(--f-display);font-weight:600;letter-spacing:.06em;font-size:14px;color:var(--accent);
}
.ledger .t-city{font-family:var(--f-serif);font-weight:500;font-size:17px}
.ledger .t-city .venue{color:var(--tx-2);font-family:var(--f-sans);font-weight:400;font-size:14.5px}
.ledger .t-v{
text-align:left;width:150px;
font-family:var(--f-display);font-weight:600;font-size:16px;
}
.ledger tr.taken .t-v{color:var(--tx-3);font-weight:400;font-style:normal}
.ledger tr.taken td{color:var(--tx-2)}
.ledger tr:last-child td{border-bottom:none}
/* live status board (Nº 02) */
.ledger .t-v.st-ok{color:var(--ok)}
.ledger .t-v.st-stale{color:var(--tx-3);font-weight:500}
.st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:middle;background:var(--tx-3)}
.ledger .t-v.st-ok .st-dot{background:var(--ok);animation:st-pulse 2.4s ease-in-out infinite}
@keyframes st-pulse{0%,100%{box-shadow:0 0 0 0 rgba(43,167,122,.32)}50%{box-shadow:0 0 0 4px rgba(43,167,122,0)}}
.ledger-foot{margin-top:32px;display:flex;justify-content:flex-end}
/* big figure ───────────────────────────────────────────────────── */
.bigfig{padding:96px 0}
.bigfig-body{
display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
gap:clamp(40px,7vw,110px);align-items:end;margin-top:8px;
}
.bigfig-main{display:flex;flex-direction:column}
.bigfig-n{
font-family:var(--f-display);font-weight:500;
font-size:clamp(104px,15vw,208px);
line-height:.84;letter-spacing:-.04em;color:var(--tx-0);
font-feature-settings:'ss01' on,'lnum' on;font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.bigfig-n .pct{font-size:.42em;color:var(--accent);margin-left:.04em}
.bigfig-n .sup{font-size:.15em;color:var(--accent);font-weight:600;vertical-align:.9em;margin-left:.08em}
.bigfig-cap{
margin:22px 0 0;font-family:var(--f-serif);font-weight:400;
font-size:clamp(15px,1.3vw,18px);color:var(--tx-1);
}
.bigfig-cap .sep{margin:0 .5em;color:var(--tx-3)}
.bigfig-notes{
list-style:none;margin:0 0 8px;padding:18px 0 0;
border-top:1px solid var(--bd-2);
display:flex;flex-direction:column;gap:13px;
}
.bigfig-notes li{
display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;
font-family:var(--f-serif);font-size:13px;line-height:1.6;color:var(--tx-2);
}
.bigfig-notes .mark{
font-family:var(--f-display);font-weight:600;color:var(--accent);
font-size:14px;line-height:1.5;
}
.bigfig-notes b{color:var(--tx-0);font-weight:600;font-style:normal}
@media (max-width:760px){
.bigfig{padding:64px 0}
.bigfig-body{grid-template-columns:1fr;gap:36px;align-items:start}
}
/* data row ─────────────────────────────────────────────────────── */
.data-row{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:2px solid var(--tx-0);
border-bottom:1px solid var(--bd-2);
}
.data-row .d{
padding:32px 24px 28px 0;
border-right:1px solid var(--bd);
display:flex;flex-direction:column;gap:6px;
}
.data-row .d:last-child{border-right:none;padding-right:0}
.data-row .d:not(:first-child){padding-left:24px}
.data-row .dn{
font-family:var(--f-display);font-weight:500;
font-size:clamp(38px,4.8vw,64px);
line-height:1;
letter-spacing:-.025em;
color:var(--tx-0);
font-variant-numeric:tabular-nums;
}
.data-row .dn small{font-size:.4em;font-weight:500;margin-left:.06em;color:var(--tx-2)}
.data-row .dl{font:500 13px/1.2 var(--f-sans);letter-spacing:.02em;color:var(--tx-1);margin-top:8px}
.data-row .ds{font:400 12.5px/1.4 var(--f-display);font-style:normal;color:var(--tx-3);margin-top:2px}
/* pull quotes ──────────────────────────────────────────────────── */
.quote-carousel{position:relative}
.quote-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:52px;height:52px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;
color:var(--tx-0);border:1px solid var(--bd-2);
background:color-mix(in srgb,var(--bg-0) 45%,transparent);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
opacity:.45;transition:opacity .25s,background .2s,border-color .2s;
}
.quote-carousel:hover .quote-nav{opacity:1}
.quote-nav:hover{background:var(--bg-2);border-color:var(--bd-3)}
.quote-nav:active{transform:translateY(-50%) scale(.93)}
.quote-nav.prev{left:-8px}
.quote-nav.next{right:-8px}
.quote-nav svg{width:21px;height:21px}
.quote-nav[disabled]{opacity:0;pointer-events:none}
@media (max-width:640px){.quote-nav{display:none}}
.quote-grid{
display:flex;gap:clamp(22px,2.2vw,34px);
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
padding-bottom:4px;
scrollbar-width:none;-ms-overflow-style:none;
scroll-padding-left:0;
}
.quote-grid::-webkit-scrollbar{display:none}
.quote-dots{display:flex;justify-content:center;gap:9px;margin-top:28px}
.quote-dots button{
width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;
background:var(--bd-3);transition:width .3s cubic-bezier(.22,1,.36,1),background .25s;
}
.quote-dots button:hover{background:var(--tx-2)}
.quote-dots button.active{width:24px;background:var(--accent)}
.pull-quote{
margin:0;
flex:0 0 clamp(340px,30vw,440px);
scroll-snap-align:start;
display:flex;flex-direction:column;
padding:34px 28px 30px 0;
border-top:1px solid var(--tx-0);
position:relative;
}
.pull-quote .qmark{
font-family:var(--f-display);
font-style:normal;
font-size:88px;
line-height:.6;
color:var(--accent);
position:absolute;top:20px;left:-2px;
font-weight:600;
}
.pull-quote blockquote{
margin:0 0 0 42px;
font-family:var(--f-serif);
font-weight:400;
font-size:21px;
line-height:1.5;
color:var(--tx-0);
letter-spacing:-.001em;
}
.pull-quote blockquote em{
font-family:var(--f-display);font-style:normal;font-weight:600;color:var(--accent);
font-size:1.04em;
}
.pull-quote figcaption{
margin:auto 0 0 42px;padding-top:22px;
font:500 12px/1 var(--f-sans);
letter-spacing:.12em;
text-transform:uppercase;
color:var(--tx-2);
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.pull-quote figcaption .who{color:var(--tx-0);font-weight:600;letter-spacing:.08em}
.pull-quote figcaption .sep{color:var(--bd-3);font-weight:400}
/* end cta ──────────────────────────────────────────────────────── */
.end-cta{padding:clamp(88px,11vw,150px) 0;text-align:center}
.end-cta-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.end-lead{display:flex;flex-direction:column;align-items:center;gap:18px}
.end-num{margin-bottom:6px}
.end-h{
font-family:var(--f-display),var(--f-serif);
font-weight:500;
font-size:clamp(40px,5.6vw,80px);
line-height:1.05;
letter-spacing:-.018em;
color:var(--tx-0);
margin:0;max-width:18ch;
}
.end-h em{font-style:normal;font-weight:600;color:var(--accent);font-feature-settings:'ss01' on}
.end-h .num-em{
font-style:normal;font-weight:600;color:var(--accent);
font-feature-settings:'ss01' on;font-variant-numeric:tabular-nums;
}
.end-unit{white-space:nowrap}
.end-sub{
font-family:var(--f-serif);font-style:normal;
font-size:16px;color:var(--tx-2);max-width:42ch;margin:0;
}
.end-actions{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap;justify-content:center}
@media (max-width:560px){
/* center the stacked buttons (they're half-width on mobile) to match the hero */
.end-actions{flex-direction:column;align-items:center;width:100%;max-width:340px}
}
/* responsive — editorial ───────────────────────────────────────── */
@media (max-width:980px){
.ed-hero{padding:56px 0 40px}
.ed-hero-grid{grid-template-columns:1fr;gap:40px}
.ed-h1{font-size:clamp(44px,9vw,76px)}
.data-row{grid-template-columns:repeat(2,1fr)}
.data-row .d{border-right:none;border-bottom:1px solid var(--bd);padding:20px 16px}
.data-row .d:nth-child(odd){border-right:1px solid var(--bd)}
.data-row .d:nth-last-child(-n+2){border-bottom:none}
.quote-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
.masthead-inner{gap:10px}
.masthead .m-sep{display:none}
.ed-h1{font-size:clamp(52px,14.4vw,60px)}
.ledger .t-time{width:84px;font-size:13px}
.ledger .t-iata{width:52px;font-size:12px}
.ledger .t-city{font-size:15px}
.ledger .t-city .venue{display:block;margin-top:2px}
.ledger .t-v{width:96px;font-size:14px}
.ledger td{padding:14px 0}
.st-dot{margin-right:7px}
/* Nº03 运行数据 → compact 2×2 stat cards on mobile (was a tall sparse list) */
.data-row{grid-template-columns:1fr 1fr;gap:10px;border-top:none;border-bottom:none}
.data-row .d{
padding:15px 14px!important;
border:1px solid var(--bd)!important;
border-radius:14px;
background:color-mix(in srgb,var(--tx-0) 4%,transparent);
gap:3px;
}
.data-row .dn{font-size:31px}
.data-row .dn small{font-size:.42em}
.data-row .dl{margin-top:7px;font-size:12.5px}
.data-row .ds{font-size:11px;margin-top:1px}
/* final CTA: vertically-centered content in a compact band (not full-screen) */
.end-cta{display:flex;align-items:center;justify-content:center;min-height:62svh;padding:48px 0}
.end-actions .ed-btn.ghost{display:none} /* hide 了解服务 on mobile */
.end-links{gap:24px}
}
/* hero redesign — actions + KPI strip ─────────────────────────── */
.ed-actions{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
margin-top:8px;
}
.ed-btn{
display:inline-flex;align-items:center;gap:18px;
padding:20px 30px;
background:var(--accent);
color:#FFFFFF;
font-family:var(--f-sans);
font-weight:600;
font-size:16px;
letter-spacing:-.003em;
line-height:1;
border:1px solid var(--accent);
border-radius:6px;
text-decoration:none;
transition:background .18s, transform .18s, border-color .18s;
white-space:nowrap;
}
.ed-btn:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-1px)}
.ed-btn .t{font-weight:600}
.ed-btn .pp{
font-size:14px;font-weight:500;
opacity:.92;
padding-left:18px;
border-left:1px solid rgba(255,255,255,.32);
font-variant-numeric:tabular-nums;
}
.ed-btn .arr{
font-size:1.1em;font-weight:400;
transition:transform .26s cubic-bezier(.2,.7,.2,1);
display:inline-block;
}
.ed-btn:hover .arr{transform:translateX(5px)}
.ed-btn.ghost{
background:transparent;
color:var(--tx-0);
border:1px solid var(--bd-3);
}
.ed-btn.ghost:hover{
background:rgba(245,239,224,.04);
border-color:var(--tx-0);
transform:translateY(-1px);
}
/* KPI strip — bottom of hero ──────────────────────────────────── */
/* hero bottom band: CTA + live KPI strip */
.hero-foot{
border-top:1px solid var(--bd-2);
padding-top:clamp(22px,3vh,32px);
display:flex;align-items:center;justify-content:space-between;
gap:clamp(24px,4vw,56px);flex-wrap:wrap;
}
.hero-foot .ed-actions{flex:0 0 auto;margin:0}
.hero-kpi{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex:1 1 440px;
gap:24px;
}
.hero-kpi .k{
display:flex;flex-direction:column;gap:8px;
}
.hero-kpi .k:last-child{align-items:flex-end;text-align:right}
.hero-kpi .k .n{
font-family:var(--f-display);
font-size:clamp(28px,3vw,42px);
font-weight:500;
line-height:.95;
letter-spacing:-.022em;
font-variant-numeric:tabular-nums;
color:var(--tx-0);
font-feature-settings:'ss01' on,'lnum' on;
}
.hero-kpi .k .n .d{color:var(--accent);font-weight:500;padding:0 .02em}
.hero-kpi .k .l{
font-size:12.5px;
color:var(--tx-2);
letter-spacing:.02em;
font-weight:500;
}
@media (max-width:760px){
.hero-foot{flex-direction:column;align-items:stretch;gap:28px}
.hero-foot .ed-actions{flex-wrap:wrap}
}
@media (max-width:980px){
.ed-hero .ed-hero-inner{padding:48px 0 40px;gap:56px}
.hero-stack{gap:32px}
.ed-actions{gap:14px}
.ed-btn{padding:16px 22px;font-size:15px;gap:14px}
.ed-btn .pp{padding-left:14px;font-size:13px}
.hero-kpi{display:grid;grid-template-columns:repeat(2,1fr);padding-top:24px;gap:24px 0}
.hero-kpi .k{padding:0 18px 0 0;border-right:1px solid var(--bd)}
.hero-kpi .k:nth-child(2){border-right:none;padding-right:0;padding-left:18px}
.hero-kpi .k:nth-child(3){padding-left:0}
.hero-kpi .k:nth-child(4){padding-left:18px}
.hero-kpi .k:last-child{align-items:flex-start;text-align:left}
}
@media (max-width:640px){
.hero-kpi{grid-template-columns:1fr 1fr;gap:18px 0}
.hero-kpi .k{padding:0 14px 0 0!important}
.hero-kpi .k:nth-child(even){padding:0 0 0 14px!important;border-right:none}
}
/* ── mobile hero rework: single column, KPI proof band above compact panel ──
dissolve the 2-col grid so headline / KPIs / panel share one vertical flow,
then reorder: pitch → proof → live panel. drop the 100svh stretch (it leaves
slack that flex-grow children absorb, blowing out the KPI row gap) and size
everything to content. uses .ed-hero .ed-hero-inner to beat the ≤980 rule. */
@media (max-width:760px){
/* fill the viewport below the sticky nav (96px here, 74px ≤640 below) so the
hero is exactly one screen on load — no next-section peek */
.ed-hero{min-height:calc(100svh - 96px)}
.hero-grid{display:contents}
.hero-stack{order:1;gap:20px;align-items:center;text-align:center}
.ed-lede{display:none}
/* centered eyebrow — drop the trailing rule line */
.ed-eyebrow{justify-content:center}
.ed-eyebrow::after{display:none}
/* remove the staggered left-indents so the H1 lines center cleanly */
.ed-h1 .l2,.ed-h1 .l3{padding-left:0}
/* CTAs side by side as two equal columns */
/* stacked, but each button keeps the old side-by-side width (one of two
12px-gap columns = 50% − 6px), centered */
.ed-actions{display:grid;grid-template-columns:1fr;justify-items:center;gap:12px;width:100%;margin-top:14px}
.ed-btn{width:calc(50% - 6px)}
/* refined twin CTAs: taller, arrow pinned to the right edge, big radius,
tactile press feedback. ghost gets a faint glass fill so it reads over the
hero photo instead of looking like a weak hairline outline. */
.ed-btn{justify-content:space-between;padding:14px 18px;gap:10px;font-size:14.5px;
border-radius:14px;font-weight:600;letter-spacing:.01em}
.ed-btn .pp{display:none}
.ed-btn .t{white-space:nowrap}
.ed-btn .arr{font-size:1.05em;opacity:.85;transition:transform .2s ease}
.ed-btn:active{transform:translateY(1px)}
.ed-btn:active .arr{transform:translateX(3px)}
.ed-btn.ghost{background:color-mix(in srgb,var(--bg-0) 24%,transparent);
border-color:color-mix(in srgb,var(--tx-0) 26%,transparent)}
.hero-foot{order:2;padding-top:18px}
.hero-panel{display:none}
/* fill the hero: pitch group at the top, compact proof band low in the hero */
.ed-hero .ed-hero-inner{flex:1;justify-content:space-between;gap:20px;padding:28px 0 18px}
/* proof band → 2×2 frosted-glass cards (nth-child selectors beat the ≤980
divider/border rules; the card border replaces the old mid divider) */
.hero-kpi{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-kpi .k,
.hero-kpi .k:last-child{align-items:center;text-align:center}
.hero-kpi .k:nth-child(odd),
.hero-kpi .k:nth-child(even){
padding:12px 10px!important;
background:color-mix(in srgb,var(--bg-0) 34%,transparent);
border:1px solid color-mix(in srgb,var(--tx-0) 13%,transparent);
border-radius:14px;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-kpi .k{gap:5px}
.hero-kpi .k .n{font-size:clamp(22px,5.8vw,27px)}
.hero-kpi .k .l{font-size:11px}
}
/* ≤640: nav shrinks to 74px (+1px border), so fill 100svh minus that */
@media (max-width:640px){
.ed-hero{min-height:calc(100svh - 75px)}
}
/* SHORT viewports — keep nav + hero fully visible on first paint without any
scroll, even with the mobile URL bar (and Safari's bottom bar) showing or on
smaller phones. Compress the hero content so it never exceeds the visible
area. Height media queries track the live viewport, so these engage exactly
when vertical room is tight. */
@media (max-width:760px) and (max-height:740px){
.ed-h1{font-size:clamp(40px,11.5vw,50px)}
.hero-stack{gap:16px}
.ed-actions{margin-top:10px}
.ed-btn{padding:12px 18px}
.ed-hero .ed-hero-inner{padding:22px 0 16px;gap:16px}
.hero-kpi{gap:8px}
.hero-kpi .k:nth-child(odd),
.hero-kpi .k:nth-child(even){padding:10px 8px!important}
.hero-kpi .k .n{font-size:clamp(19px,5vw,23px)}
}
@media (max-width:760px) and (max-height:660px){
.ed-h1{font-size:clamp(32px,9.5vw,40px)}
.hero-stack{gap:12px}
.ed-eyebrow{font-size:.85em}
.ed-actions{margin-top:6px}
.ed-btn{padding:10px 16px;font-size:13.5px}
.ed-hero .ed-hero-inner{padding:16px 0 12px;gap:12px}
.hero-kpi .k:nth-child(odd),
.hero-kpi .k:nth-child(even){padding:8px 8px!important}
.hero-kpi .k .l{font-size:10px}
}
/* clean modern tabular numerics ───────────────────────────────── */
.tnum,
.ed-h1 em.num-em,
.ed-h1 em.num-em .unit,
.hero-kpi .k .n,
.hero-kpi .k .n .d,
.bigfig-n,
.bigfig-n .pct,
.bigfig-n .sup,
.data-row .dn,
.data-row .dn small,
.ledger .t-time,
.svc-price .num,
.price-card .amt .n,
.price-card .amt .u,
.step .n,
.flow-num,
.hero-meta b,
.stat .v{
font-family:var(--f-num);
font-feature-settings:'tnum' on,'lnum' on,'ss01' on,'cv11' on;
font-variant-numeric:tabular-nums lining-nums;
}
.ed-h1 em.num-em{font-weight:600;letter-spacing:-.04em}
.ed-h1 em.num-em .unit{font-family:var(--f-serif);font-weight:500;letter-spacing:0;margin-left:.06em}
.hero-kpi .k .n{font-weight:600;letter-spacing:-.03em}
.hero-kpi .k .n .d{color:var(--accent);font-weight:500}
.bigfig-n{font-weight:600;letter-spacing:-.045em}
.data-row .dn{font-weight:600;letter-spacing:-.03em}
.ledger .t-time{font-weight:500;letter-spacing:0}
.price-card .amt .n{font-weight:600;letter-spacing:-.03em}
.svc-price .num{font-weight:600;letter-spacing:-.025em}
/* live-data states ─────────────────────────────────────────────── */
[data-kpi]{
display:inline-block;
transition:opacity .5s ease, color .35s ease;
}
body:not(.live-loaded) [data-kpi]{opacity:.32;color:var(--tx-2)}
body.live-loaded [data-kpi]{opacity:1;color:var(--tx-0)}
[data-kpi].kpi-flash{
color:var(--accent);
transition:color .12s ease;
}
.ledger-skel td{
text-align:left;
color:var(--tx-3);
font-family:var(--f-num);
font-size:13px;
letter-spacing:.02em;
padding:22px 0;
border-bottom:none;
}
[data-live-meta]{
font-family:var(--f-num);
font-size:12px;
letter-spacing:.02em;
}
/* signup modal ─────────────────────────────────────────────────── */
.signup-overlay{
position:fixed;inset:0;
background:rgba(10,8,4,.72);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:grid;place-items:center;
z-index:100;padding:24px;
opacity:0;transition:opacity .22s ease;
}
.signup-overlay.open{opacity:1}
.signup-overlay[hidden]{display:none}
.signup-modal{
background:#1B170F;
border:1px solid rgba(245,239,224,.13);
border-radius:12px;
padding:38px 36px 30px;
max-width:460px;width:100%;
position:relative;
transform:translateY(10px);
transition:transform .25s cubic-bezier(.2,.7,.2,1);
box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.signup-overlay.open .signup-modal{transform:translateY(0)}
.signup-close{
position:absolute;top:14px;right:16px;
background:transparent;border:0;color:var(--tx-2);
font-size:24px;line-height:1;cursor:pointer;
padding:6px 12px;border-radius:6px;
}
.signup-close:hover{color:var(--tx-0);background:rgba(245,239,224,.06)}
.signup-modal h3{
font-family:var(--f-display);font-weight:600;
font-size:26px;letter-spacing:-.012em;
color:var(--tx-0);margin:0 0 6px;
}
.signup-sub{font-size:13px;color:var(--tx-2);margin:0 0 24px}
.signup-modal form{display:flex;flex-direction:column;gap:16px}
.signup-modal label{
font-size:13px;font-weight:500;color:var(--tx-1);
display:flex;flex-direction:column;gap:8px;
}
.signup-modal input,
.signup-modal select{
background:#15110A;
border:1px solid var(--bd-2);
border-radius:6px;
padding:13px 14px;
color:var(--tx-0);
font-size:15px;
font-family:inherit;
width:100%;
transition:border-color .15s ease;
}
.signup-modal input:focus,
.signup-modal select:focus{outline:none;border-color:var(--accent)}
.signup-submit{
background:var(--accent);color:#fff;
border:0;border-radius:6px;
padding:14px 22px;
font-weight:600;font-size:15px;font-family:inherit;
cursor:pointer;margin-top:6px;
transition:background .18s ease;
}
.signup-submit:hover{background:var(--accent-2)}
.signup-submit:disabled{opacity:.6;cursor:wait}
.signup-meta{font-size:12px;color:var(--tx-2);margin:6px 0 0;line-height:1.55}
.signup-error{font-size:13px;color:#F0816C;margin:0;line-height:1.5;padding:10px 12px;background:rgba(200,52,42,.08);border-radius:6px}
/* ────────────────────────────────────────────────────────────────────
Login modal · clean social-app style, own namespace (signup untouched)
──────────────────────────────────────────────────────────────────── */
.lgn-overlay{
position:fixed;inset:0;z-index:120;
display:grid;place-items:center;padding:20px;
background:rgba(8,6,3,.66);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transition:opacity .2s ease;
}
.lgn-overlay.open{opacity:1}
.lgn-overlay[hidden]{display:none}
.lgn-card{
position:relative;width:100%;max-width:392px;
background:var(--bg-1);
border:1px solid var(--bd-2);
border-radius:18px;
padding:30px 30px 26px;
box-shadow:0 30px 80px -24px rgba(0,0,0,.7);
transform:translateY(10px) scale(.99);
transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.lgn-overlay.open .lgn-card{transform:none}
.lgn-x{
position:absolute;top:14px;right:14px;
width:30px;height:30px;display:grid;place-items:center;
background:transparent;border:0;border-radius:8px;
color:var(--tx-2);cursor:pointer;
transition:color .15s ease,background .15s ease;
}
.lgn-x:hover{color:var(--tx-0);background:rgba(245,239,224,.06)}
.lgn-brand{display:flex;justify-content:center;margin:8px 0 22px}
.lgn-brand span{font-weight:700;font-size:18px;letter-spacing:.01em;color:var(--tx-0)}
.lgn-brand b{color:var(--accent);font-weight:700}
.lgn-step{display:flex;flex-direction:column;text-align:center}
.lgn-step[hidden]{display:none}
.lgn-h{
font-family:var(--f-sans);font-weight:650;
font-size:21px;letter-spacing:-.01em;color:var(--tx-0);
margin:0 0 7px;
}
.lgn-p{font-size:13.5px;color:var(--tx-2);line-height:1.55;margin:0 0 22px}
.lgn-dest{color:var(--tx-0);font-weight:600;font-variant-numeric:tabular-nums}
.lgn-input{
width:100%;text-align:center;
background:var(--bg-0);
border:1px solid var(--bd-2);
border-radius:11px;
padding:14px 16px;
color:var(--tx-0);font-size:15px;font-family:inherit;
transition:border-color .15s ease, box-shadow .15s ease;
}
.lgn-input::placeholder{color:var(--tx-3)}
.lgn-input:focus{outline:none;border-color:var(--accent)}
.lgn-btn{
width:100%;margin-top:14px;
background:var(--accent);color:#fff;
border:0;border-radius:11px;
padding:14px 18px;
font-weight:600;font-size:15px;font-family:inherit;
cursor:pointer;
transition:background .16s ease, transform .06s ease;
}
.lgn-btn:hover{background:var(--accent-2)}
.lgn-btn:active{transform:translateY(1px)}
.lgn-btn:disabled{opacity:.6;cursor:wait}
.lgn-err{
font-size:12.5px;color:#F0816C;margin:12px 0 0;line-height:1.5;
}
.lgn-alt{font-size:13px;color:var(--tx-2);margin:18px 0 0}
.lgn-alt a{color:var(--accent);text-decoration:none;font-weight:500}
.lgn-alt a:hover{text-decoration:underline}
.lgn-back{
position:absolute;top:13px;left:14px;
width:30px;height:30px;display:grid;place-items:center;
background:transparent;border:0;border-radius:8px;
color:var(--tx-2);cursor:pointer;
transition:color .15s ease,background .15s ease;
}
.lgn-back:hover{color:var(--tx-0);background:rgba(245,239,224,.06)}
/* segmented one-time-code */
.lgn-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:2px 0 4px}
.lgn-otp-box{
aspect-ratio:1 / 1.15;min-width:0;width:100%;text-align:center;
background:var(--bg-0);
border:1px solid var(--bd-2);
border-radius:11px;
color:var(--tx-0);
font-family:var(--f-num);font-size:clamp(19px,5.2vw,22px);font-weight:600;
caret-color:var(--accent);
transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.lgn-otp-box.is-filled{border-color:var(--bd-3);background:var(--bg-2)}
.lgn-otp-box:focus{
outline:none;border-color:var(--accent);background:var(--bg-0);
}
.lgn-otp.shake{animation:lgnShake .42s cubic-bezier(.36,.07,.19,.97)}
.lgn-otp.shake .lgn-otp-box{border-color:var(--accent)}
@keyframes lgnShake{
10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}
.lgn-resend{
background:none;border:0;padding:0;cursor:pointer;
color:var(--accent);font-size:13px;font-family:inherit;font-weight:500;
}
.lgn-resend:hover:not(:disabled){text-decoration:underline}
.lgn-resend:disabled{color:var(--tx-3);cursor:default;font-weight:400}
@media (max-width:420px){
.lgn-card{padding:28px 20px 24px;max-width:none}
.lgn-otp{gap:6px}
}
@media (prefers-reduced-motion:reduce){
.lgn-card{transition:none;transform:none}
.lgn-otp.shake{animation:none}
.lgn-btn:active{transform:none}
}
/* simple contact (replaces the old multi-channel grid) ─────────── */
.contact-simple{
display:flex;flex-direction:column;align-items:flex-start;gap:18px;
max-width:60ch;
}
.contact-lede{
font-family:var(--f-serif);
font-weight:400;
font-size:clamp(17px,1.5vw,21px);
line-height:1.55;
color:var(--tx-0);
margin:0;
}
.contact-mail{
font-family:var(--f-display);
font-weight:600;
font-size:clamp(22px,2.4vw,30px);
letter-spacing:-.008em;
color:var(--accent);
border-bottom:1px solid var(--accent);
padding-bottom:3px;
transition:opacity .18s ease;
}
.contact-mail:hover{opacity:.78}
.contact-note{
font-size:13.5px;
color:var(--tx-2);
margin:6px 0 0;
line-height:1.55;
}
/* legal pages (terms / privacy) ───────────────────────────────── */
.legal-page{padding:88px 0 120px}
.legal-page .wrap > *{max-width:760px}
.legal-h1{
font-family:var(--f-display),var(--f-serif);
font-weight:600;font-size:clamp(40px,4.4vw,56px);
letter-spacing:-.012em;line-height:1.05;
color:var(--tx-0);margin:0 0 12px;
}
.legal-meta{
font-family:var(--f-num);
font-size:13px;color:var(--tx-3);letter-spacing:.02em;
margin:0 0 36px;padding-bottom:28px;
border-bottom:1px solid var(--bd-2);
}
.legal-page h3{
font-family:var(--f-display),var(--f-serif);
font-size:21px;font-weight:600;
color:var(--tx-0);
margin:36px 0 14px;
letter-spacing:-.003em;
}
.legal-page p,.legal-page ul,.legal-page ol{
font-family:var(--f-serif);
font-size:15.5px;line-height:1.72;
color:var(--tx-1);
margin:12px 0;
}
.legal-page ul,.legal-page ol{padding-left:22px}
.legal-page li{margin:7px 0}
.legal-page li::marker{color:var(--tx-3)}
.legal-page strong{color:var(--tx-0);font-weight:600}
.legal-page a{color:var(--accent);border-bottom:1px solid currentColor}
.legal-page a:hover{opacity:.78}
.legal-mail{
font-family:var(--f-display);font-weight:600;font-size:18px;
}
/* footer legal links ──────────────────────────────────────────── */
.foot-bottom{flex-wrap:wrap;gap:14px}
.foot-legal{display:inline-flex;align-items:center;gap:10px;color:var(--tx-2);font-size:13px}
.foot-legal a{color:var(--tx-2);transition:color .15s ease}
.foot-legal a:hover{color:var(--tx-0)}
.foot-legal .dot{color:var(--tx-3)}
/* account page ─────────────────────────────────────────────────── */
.account-page .wrap > *{max-width:680px}
.account-lede{
font-family:var(--f-serif);
font-size:clamp(16px,1.5vw,19px);
line-height:1.65;
color:var(--tx-0);
margin:0 0 28px;
}
.account-form{display:flex;flex-direction:column;gap:18px;max-width:440px}
.account-form label{
display:flex;flex-direction:column;gap:8px;
font-size:13px;font-weight:500;color:var(--tx-1);
}
.account-form input{
background:#15110A;
border:1px solid var(--bd-2);
border-radius:6px;
padding:13px 14px;
color:var(--tx-0);
font-size:15px;font-family:inherit;
width:100%;
transition:border-color .15s ease;
}
.account-form input:focus{outline:none;border-color:var(--accent)}
.account-submit{
background:var(--accent);color:#fff;
border:0;border-radius:6px;
padding:13px 22px;
font-weight:600;font-size:14.5px;font-family:inherit;
cursor:pointer;
margin-top:4px;
align-self:flex-start;
transition:background .18s ease;
}
.account-submit:hover{background:var(--accent-2)}
.account-submit:disabled{opacity:.55;cursor:wait}
.account-msg{
font-size:13.5px;color:var(--tx-1);
margin:8px 0 0;line-height:1.6;
padding:10px 12px;background:rgba(245,239,224,.04);border-radius:6px;
}
.account-note{
font-size:13px;color:var(--tx-2);
margin:20px 0 0;line-height:1.6;
}
.account-note a{color:var(--accent);border-bottom:1px solid currentColor}
.account-fields{
display:grid;grid-template-columns:160px 1fr;
gap:18px 28px;
margin:0;padding:0;
}
.account-fields dt{
font-family:var(--f-num);font-size:12px;
letter-spacing:.14em;text-transform:uppercase;
color:var(--tx-2);font-weight:500;
padding-top:6px;
}
.account-fields dd{
margin:0;
display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 16px;
}
.acc-value{
font-family:var(--f-display);
font-size:18px;font-weight:500;color:var(--tx-0);
overflow-wrap:anywhere;
}
.acc-note{
font-size:12.5px;color:var(--tx-2);
}
.acc-note a{color:var(--accent);border-bottom:1px solid currentColor}
.account-select{
background:#15110A;
border:1px solid var(--bd-2);
border-radius:6px;
padding:9px 12px;
color:var(--tx-0);
font-size:15px;
font-family:inherit;
min-width:200px;
transition:border-color .15s ease;
}
.account-select:focus{outline:none;border-color:var(--accent)}
.account-submit-inline{
background:var(--accent);color:#fff;
border:0;border-radius:6px;
padding:9px 16px;
font-weight:600;font-size:13.5px;font-family:inherit;
cursor:pointer;
transition:background .18s ease;
}
.account-submit-inline:hover:not(:disabled){background:var(--accent-2)}
.account-submit-inline:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:640px){
.account-fields{grid-template-columns:1fr;gap:4px 0}
.account-fields dt{padding-top:14px}
}
/* ─── account console (signed-in view B) ───────────────────────────── */
/* signed-in: the console IS the page — drop the editorial eyebrow/title, center the panel */
.account-page.acc-wide .wrap > .ed-eyebrow,
.account-page.acc-wide .wrap > .legal-h1{display:none}
/* console spans the full .wrap — same left/right bounds as the nav */
.account-page.acc-wide .wrap > #acc-view-account{max-width:none;width:100%}
.account-page.acc-wide{padding:42px 0 30px !important}
/* native console panel (not a browser-window mockup) */
.acc-console{
width:100%;
border:1px solid var(--bd-2);border-radius:var(--r-xl);
overflow:hidden;background:var(--bg-1);
box-shadow:var(--shadow-1);
}
/* sidebar brand lockup */
.acc-side-brand{
display:flex;flex-direction:column;gap:2px;
padding:2px 8px 14px;margin-bottom:14px;border-bottom:1px solid var(--bd);
}
.acc-brand-mark{font-family:var(--f-display);font-size:23px;font-weight:600;color:var(--tx-0);letter-spacing:-.01em}
.acc-brand-mark b{color:var(--accent);font-weight:600}
.acc-brand-sub{font:500 12px/1 var(--f-num);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}
/* sidebar identity block */
.acc-side-id{padding:0 8px 16px;margin-bottom:16px;border-bottom:1px solid var(--bd)}
.acc-side-email{font-size:14.5px;font-weight:600;color:var(--tx-0);overflow-wrap:anywhere;line-height:1.35}
.acc-side-since{font-size:12.5px;color:var(--tx-2);margin:4px 0 11px}
.acc-side-id .acc-pill{display:inline-block}
.acc-logout{margin-top:14px;background:none;border:1px solid var(--bd-2);color:var(--tx-2);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
.acc-logout:hover{border-color:var(--accent);color:var(--accent)}
/* sidebar fills the panel height; the destructive action sits at the bottom */
.acc-console .dash-side{display:flex;flex-direction:column}
.acc-console .dash-side > .group:last-child{margin-top:auto;margin-bottom:0;padding-top:18px;border-top:1px solid var(--bd)}
/* clickable sidebar items */
.dash-side .item{border-radius:8px}
.dash-side .item.acc-side-act{cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.dash-side .item.acc-side-act:hover{background:var(--accent-soft);color:var(--accent)}
.dash-side .item.acc-side-act:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
.dash-side .item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dash-side .item.on .ic{opacity:1}
/* unsubscribe: de-emphasized, danger-tinted on hover */
#acc-unsub{color:var(--tx-2)}
#acc-unsub:hover{background:rgba(200,52,42,.10);color:var(--accent)}
/* item with no real destination (e.g. demo billing) */
.dash-side .item.acc-item-muted{color:var(--tx-3)}
.acc-side-note{font-size:11.5px;color:var(--tx-3);line-height:1.55;margin:2px 0 0;padding:8px 10px 0}
.acc-side-note a{color:var(--accent)}
/* subscription-status pill */
.acc-pill{
font-size:11.5px;font-weight:600;letter-spacing:.02em;
padding:5px 11px;border-radius:999px;white-space:nowrap;
border:1px solid var(--bd-2);color:var(--tx-1);background:rgba(245,239,224,.04);
}
.acc-pill-active{color:var(--ok);border-color:rgba(43,167,122,.35);background:rgba(43,167,122,.10)}
.acc-pill-past_due{color:var(--warn);border-color:rgba(198,138,31,.35);background:rgba(198,138,31,.10)}
.acc-pill-cancelled{color:var(--tx-2)}
/* main header */
.acc-console .dash-h{align-items:center;flex-wrap:wrap;gap:14px}
.acc-h-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acc-livepill{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;color:var(--tx-1);
padding:5px 11px;border-radius:999px;border:1px solid var(--bd-2);
}
.acc-livepill .st-dot{width:7px;height:7px;border-radius:50%;background:var(--tx-3)}
.acc-livepill.st-ok{color:var(--ok);border-color:rgba(43,167,122,.32);background:rgba(43,167,122,.08)}
.acc-livepill.st-ok .st-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(43,167,122,.18)}
.acc-livepill.st-stale{color:var(--warn);border-color:rgba(198,138,31,.30)}
.acc-livepill.st-stale .st-dot{background:var(--warn)}
.acc-clock-chip{
font-family:var(--f-num);font-size:13px;color:var(--tx-1);
padding:5px 10px;border-radius:999px;border:1px solid var(--bd-2);background:var(--bg-2);
}
.acc-clock-chip small{font-size:10px;color:var(--tx-3);margin-left:4px}
/* KPI tiles */
.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:14px}
.acc-stat{
display:flex;flex-direction:column;gap:5px;
padding:20px 20px;border:1px solid var(--bd-2);border-radius:var(--r-lg);
background:var(--bg-2);
}
.acc-stat-n{
font-family:var(--f-num);font-size:clamp(28px,2.6vw,38px);
font-weight:600;color:var(--tx-0);line-height:1;display:inline-flex;align-items:baseline;
}
.acc-stat-u{font-size:16px;color:var(--tx-2);margin-left:4px;font-weight:500}
.acc-stat-l{font-size:14px;color:var(--tx-1);font-weight:500;margin-top:3px}
.acc-stat-s{font-size:12px;color:var(--tx-3)}
/* sub-header above release rows */
.acc-card-title{
font-family:var(--f-num);font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--tx-2);font-weight:600;
}
.acc-mainsub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.acc-mainsub-r{font-size:12px;color:var(--tx-2)}
.acc-mainsub-r b{color:var(--tx-1);font-weight:600;font-family:var(--f-num)}
/* release history rows */
.acc-rows .dash-row{
grid-template-columns:minmax(0,1fr) 132px 100px;
padding:15px 18px;margin-bottom:10px;font-size:15px;
background:var(--bg-2);border:1px solid var(--bd-2);
transition:border-color .15s,background .15s;
}
.acc-rows .dash-row:hover{border-color:var(--bd-3);background:var(--bg-3)}
.acc-rows .dash-row:last-child{margin-bottom:0}
.acc-rows .dash-row .name{font-size:15.5px}
.acc-rows .dash-row .name small{font-size:13px}
.acc-rows .dash-row .name small.acc-ev-ts{font-family:var(--f-num);font-size:13px;color:var(--tx-1);letter-spacing:.01em}
.acc-rows .dash-row .when{font-size:14px}
.acc-rows .dash-row .when small{font-size:12px}
.acc-rows .dash-row .status{justify-self:end;font-size:13px}
.acc-events-empty{
font-size:14px;color:var(--tx-2);line-height:1.6;
border:1px dashed var(--bd-2);border-radius:10px;padding:20px;text-align:center;
}
/* release list sits at the bottom and scrolls internally as data grows */
.acc-rows-head{margin-top:20px}
.acc-rows-scroll{
max-height:320px;overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:var(--bd-3) transparent;
}
.acc-rows-scroll::-webkit-scrollbar{width:8px}
.acc-rows-scroll::-webkit-scrollbar-thumb{background:var(--bd-3);border-radius:4px}
.acc-rows-scroll::-webkit-scrollbar-thumb:hover{background:var(--tx-3)}
.acc-rows-scroll::-webkit-scrollbar-track{background:transparent}
/* account / subscription detail — grouped into a card like the rows/tiles */
.acc-detail-head{margin-top:20px;margin-bottom:10px}
.acc-detail{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:16px 24px;
padding:18px 20px;background:var(--bg-2);
border:1px solid var(--bd-2);border-radius:var(--r-lg);
}
.acc-detail-i{display:flex;flex-direction:column;gap:4px;min-width:0}
.acc-detail-i .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.acc-detail-i b{font-size:15px;font-weight:600;color:var(--tx-0);overflow-wrap:anywhere}
/* retention / cancel-confirmation modal */
.acc-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.acc-modal[hidden]{display:none}
.acc-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,3,.74);backdrop-filter:blur(3px)}
.acc-modal-card{
position:relative;width:min(520px,100%);
background:var(--bg-1);border:1px solid var(--bd-2);border-radius:var(--r-xl);
box-shadow:var(--shadow-2);padding:30px 32px 26px;
max-height:90vh;overflow:auto;
}
.acc-modal-x{
position:absolute;top:14px;right:15px;
background:none;border:0;color:var(--tx-2);font-size:24px;line-height:1;cursor:pointer;
width:32px;height:32px;border-radius:8px;transition:background .15s,color .15s;
}
.acc-modal-x:hover{background:var(--bg-3);color:var(--tx-0)}
.acc-modal-eyebrow{font:600 11.5px/1 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.acc-modal-h{font-family:var(--f-display);font-size:23px;font-weight:600;color:var(--tx-0);margin:12px 0 14px;line-height:1.3}
.acc-modal-h span{color:var(--accent)}
.acc-modal-lead{font-size:14.5px;color:var(--tx-1);line-height:1.65;margin:0 0 16px}
.acc-modal-lead b{color:var(--tx-0);font-weight:600}
.acc-modal-points{
list-style:none;margin:0 0 16px;padding:14px 16px;
background:var(--bg-2);border:1px solid var(--bd);border-radius:var(--r-md);
display:flex;flex-direction:column;gap:9px;
}
.acc-modal-points li{font-size:13.5px;color:var(--tx-1);padding-left:22px;position:relative}
.acc-modal-points li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
.acc-modal-points b{color:var(--tx-0);font-weight:600}
.acc-modal-alt{font-size:13px;color:var(--tx-2);line-height:1.6;margin:0 0 22px}
.acc-modal-alt b{color:var(--tx-1);font-weight:600}
.acc-modal-alt a{color:var(--accent);border-bottom:1px solid currentColor}
.acc-modal-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.acc-modal-stay{
flex:1 1 auto;min-width:170px;
background:var(--accent);color:#fff;border:0;border-radius:8px;
padding:14px 20px;font:600 15px/1 var(--f-sans);cursor:pointer;transition:background .18s;
}
.acc-modal-stay:hover{background:var(--accent-2)}
.acc-modal-confirm{
flex:0 0 auto;color:var(--tx-2);font-size:13.5px;font-weight:500;
padding:14px 8px;cursor:pointer;text-decoration:none;transition:color .15s;
}
.acc-modal-confirm:hover{color:var(--tx-0)}
.acc-modal-confirm .arr{margin-left:2px}
.acc-modal-stay:focus-visible,
.acc-modal-confirm:focus-visible,
.acc-modal-x:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
/* change-request form (inside modal) */
.acc-form{display:flex;flex-direction:column;gap:14px;margin-top:2px}
.acc-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tx-1);font-weight:500}
.acc-field-opt{color:var(--tx-3);font-weight:400}
.acc-input{
background:#15110A;border:1px solid var(--bd-2);border-radius:8px;
padding:11px 12px;color:var(--tx-0);font-size:14.5px;font-family:inherit;width:100%;
transition:border-color .15s;
}
.acc-input:focus{outline:none;border-color:var(--accent)}
textarea.acc-input{resize:vertical;min-height:62px;line-height:1.5}
.acc-modal-msg{font-size:13px;line-height:1.55;margin:0;padding:10px 12px;border-radius:8px}
.acc-modal-msg.ok{color:var(--ok);background:rgba(43,167,122,.10);border:1px solid rgba(43,167,122,.30)}
.acc-modal-msg.err{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-ring)}
.acc-modal-stay:disabled{opacity:.6;cursor:wait}
/* keep the sidebar (it holds account actions) on tablet/mobile: stack it */
@media (max-width:1024px){
.acc-console .dash-body{grid-template-columns:1fr}
.acc-console .dash-side{display:block;border-right:0;border-bottom:1px solid var(--bd)}
}
/* desktop: a large, roomy console — taller vertical rhythm to match the width */
@media (min-width:1025px){
.acc-wide .acc-console .dash-body{min-height:0;grid-template-columns:268px 1fr}
.acc-wide .acc-console .dash-side{padding:34px 20px;font-size:14.5px}
.acc-wide .acc-console .dash-side .group{margin-bottom:28px}
.acc-wide .acc-console .dash-side .item{padding:11px 10px;gap:11px}
.acc-wide .acc-console .dash-side .item .ic{width:17px;height:17px}
.acc-wide .acc-console .dash-side .item .ct{font-size:12.5px}
.acc-wide .acc-console .dash-main{padding:34px 36px}
.acc-wide .acc-console .dash-h{margin-bottom:26px}
.acc-wide .acc-console .dash-h h3{font-size:29px}
.acc-wide .acc-console .dash-h .sub{font-size:14.5px;margin-top:6px}
.acc-wide .acc-console .acc-livepill{font-size:13px;padding:6px 13px}
.acc-wide .acc-console .acc-clock-chip{font-size:14px;padding:6px 12px}
.acc-wide .acc-console .acc-pill{font-size:12.5px;padding:6px 13px}
.acc-wide .acc-console .acc-card-title{font-size:13px}
.acc-wide .acc-console .acc-stats{gap:18px;margin-bottom:24px}
.acc-wide .acc-console .acc-stat{padding:26px 22px;gap:7px}
.acc-wide .acc-console .acc-mainsub{margin-bottom:18px}
.acc-wide .acc-console .acc-rows .dash-row{padding:20px 20px;margin-bottom:13px}
.acc-wide .acc-console .acc-detail-head{margin-top:24px;margin-bottom:12px}
.acc-wide .acc-console .acc-detail{gap:20px 26px;padding:22px 24px}
.acc-wide .acc-console .acc-rows-head{margin-top:26px}
.acc-wide .acc-console .acc-rows-scroll{max-height:340px}
}
@media (max-width:640px){
.acc-stats{grid-template-columns:repeat(2,1fr)}
.acc-rows .dash-row{grid-template-columns:1fr 84px;gap:10px}
.acc-rows .dash-row .when{display:none}
}
/* ─── cities · cartographic monitoring instrument ──────────────────── */
.cmap-hero{height:calc(100vh - 96px);min-height:560px;display:flex;flex-direction:column;background:var(--bg-0);overflow:hidden;padding-bottom:18px}
.cmap-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 12px;border-bottom:1px solid var(--bd)}
.cmap-tag{font:600 11px/1 var(--f-num);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2)}
.cmap-clock{display:inline-flex;align-items:center;gap:9px;font:600 13px/1 var(--f-num);color:var(--tx-1);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.cmap-clock small{color:var(--tx-3);font-weight:500;letter-spacing:.14em}
.lv-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);flex:none;animation:live-pulse 2.4s ease-out infinite}
.cmap-head{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:18px 0 14px}
.cmap-kicker{display:block;font:600 12px/1 var(--f-num);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cmap-title h1{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(30px,4vw,56px);line-height:1.03;letter-spacing:-.01em;color:var(--tx-0)}
.cmap-title h1 span{display:block;color:var(--tx-1)}
.cmap-headr{flex:none;display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,40px)}
.cmap-stats{display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,40px)}
.cst{display:flex;flex-direction:column;gap:6px}
.cst .n{font-family:var(--f-num);font-weight:600;font-size:clamp(24px,2.6vw,38px);line-height:.9;color:var(--tx-0)}
.cst .n small{font-size:.42em;color:var(--tx-2);margin-left:1px}
.cst .l{font:500 11.5px/1 var(--f-sans);letter-spacing:.03em;color:var(--tx-2)}
.cmap-cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font:600 14.5px/1 var(--f-sans);padding:14px 22px;border-radius:8px;transition:background .18s}
.cmap-cta:hover{background:var(--accent-2)}
.cmap-cta .cta-arr{transition:transform .25s}
.cmap-cta:hover .cta-arr{transform:translateX(4px)}
.cmap-stagewrap{flex:1;min-height:0;display:flex}
.cmap-stage{position:relative;width:100%;height:100%}
.cmap-svg{position:relative;z-index:1;display:block;width:100%;height:100%}
.reg{position:absolute;z-index:2;width:16px;height:16px;border:1.5px solid var(--bd-3);pointer-events:none;opacity:.7}
.reg.tl{top:0;left:0;border-right:0;border-bottom:0}
.reg.tr{top:0;right:0;border-left:0;border-bottom:0}
.reg.bl{bottom:0;left:0;border-right:0;border-top:0}
.reg.br{bottom:0;right:0;border-left:0;border-top:0}
.cprov{fill:#241d13;stroke:var(--bd-2);stroke-width:.6}
.cprov.act{fill:#2e2217;stroke:var(--bd-3)}
.pin-leader{stroke:var(--bd-3);stroke-width:1}
.pin-pulse{fill:none;stroke:var(--accent);stroke-width:1.4;animation:pinpulse 2.6s ease-out infinite}
@keyframes pinpulse{0%{r:6;opacity:.5}70%{opacity:0}100%{r:22;opacity:0}}
.pin-ring{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.75}
.pin-dot{fill:var(--accent)}
.pin-name{fill:var(--tx-1);font:600 13.5px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;paint-order:stroke;stroke:var(--bg-0);stroke-width:3px;stroke-linejoin:round;transition:fill .18s}
.cpin-a{cursor:pointer}
.pin-hit{fill:transparent}
.cpin-a:hover .pin-name{fill:var(--tx-0)}
.cpin-a:hover .pin-dot{r:4.4}
.cpin-a:hover .pin-ring{opacity:1;stroke-width:1.7}
/* detail layers: graticule, roads, secondary cities */
.cmap-grid{pointer-events:none}
.grat{fill:none;stroke:rgba(245,239,224,.055);stroke-width:.6}
.csec .sec-dot{fill:rgba(245,239,224,.42)}
.csec .sec-name{fill:var(--tx-3);font:500 9.5px/1 var(--f-num);letter-spacing:.04em}
.cmap-live{position:absolute;z-index:2;right:2px;bottom:6px;display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--f-num);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2);background:rgba(21,17,10,.6);border:1px solid var(--bd-2);border-radius:999px;padding:7px 12px;backdrop-filter:blur(4px)}
/* entrance — one motion grammar */
.cmap-stage .cmap-land,.cmap-stage .cmap-grid,.cmap-stage .cmap-sec{opacity:0;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.cmap-stage.in .cmap-land,.cmap-stage.in .cmap-grid,.cmap-stage.in .cmap-sec{opacity:1}
.cmap-stage .cpin-a{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.cmap-stage.in .cpin-a{opacity:1}
@media (prefers-reduced-motion:reduce){
.cmap-stage .cmap-land,.cmap-stage .cmap-grid,.cmap-stage .cmap-sec,.cmap-stage .cpin-a{opacity:1;transform:none;transition:none}
.pin-pulse,.lv-dot{animation:none}
}
@media (max-width:860px){
.cmap-hero{min-height:0;padding-bottom:30px}
.cmap-head{flex-direction:column;align-items:flex-start;gap:18px}
.cmap-headr{width:100%;justify-content:space-between}
.pin-name{font-size:19px;letter-spacing:.12em}
}
/* pricing: keep the split section-head readable if it's ever shown narrow */
.section-head.row{flex-wrap:wrap}
/* extra detail bullets shown only on phones (auto-grab card) */
.svc-list li.m-only{display:none}
/* pricing mobile: hide the header entirely and show the two cards straight
away as a swipeable carousel (auto-grab peeks; swipe for the full card).
Phone-only — desktop is untouched. */
@media (max-width:640px){
.page-pricing .section-head{display:none}
.page-pricing #pricing{padding-top:22px}
.price-grid{
display:flex;grid-template-columns:none;gap:14px;max-width:none;margin:0 -32px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
/* bleed to the viewport edges then inset cards back by the 32px gutter, so
a snapped card sits at the page gutter with room for its shadow */
padding-inline:32px;
padding-block:6px 22px;
scroll-padding-inline:32px;
scrollbar-width:none;
}
.price-grid::-webkit-scrollbar{display:none}
.price-grid > .svc{flex:0 0 85%;scroll-snap-align:start}
.svc-list li.m-only{display:flex}
.price-aside{margin-top:22px}
}
/* mobile: drop the wide map, show a tappable editorial city list instead */
.cmap-list{display:none}
@media (max-width:640px){
.cmap-hero{height:auto;min-height:0;padding-bottom:40px}
.cmap-stagewrap{display:none}
/* stack the meta bar so the clock keeps its time + zone on one line */
.cmap-top{flex-direction:column;align-items:flex-start;gap:7px}
.cmap-clock,.cmap-clock small{white-space:nowrap}
.cmap-list{display:block;margin-top:8px;border-top:1px solid var(--bd)}
.cl-row{
display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
align-items:center;column-gap:16px;
padding:17px 2px;border-bottom:1px solid var(--bd);
color:var(--tx-0);
}
.cl-idx{font:600 12.5px/1 var(--f-num);color:var(--accent);letter-spacing:.04em}
.cl-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.cl-name b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.cl-en{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}
.cl-prov{font:600 11px/1 var(--f-num);letter-spacing:.1em;color:var(--tx-3)}
.cl-arr{color:var(--tx-2);font-size:17px;transition:transform .2s,color .2s}
.cl-row:hover .cl-arr,.cl-row:active .cl-arr{color:var(--accent);transform:translateX(3px)}
}