/* Sales Economic — marketing site. Light, spacious, precise. */
:root {
  --bg:#FFFFFF; --bg-2:#F6F7F9; --surface:#FFFFFF; --surface-2:#FAFAFB;
  --fg:#0B0B10; --fg-2:#54545E; --fg-3:#8B8B96;
  --line:rgba(11,11,16,.08); --line-2:rgba(11,11,16,.15);
  --accent:#1F6BFF; --accent-2:#1858DB; --accent-soft:rgba(31,107,255,.09);
  --good:#0E9F6E; --warn:#C27803; --bad:#D93A3A;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --card-shadow:0 1px 2px rgba(11,11,16,.05), 0 1px 1px rgba(11,11,16,.03);
  --pop-shadow:0 1px 2px rgba(11,11,16,.06), 0 18px 40px -18px rgba(11,11,16,.28);
  --w:1120px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.menu-open { overflow:hidden; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; }
img { max-width:100%; }
.wrap { max-width:var(--w); margin:0 auto; padding:0 28px; }
.num { font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
::selection { background:rgba(31,107,255,.18); }
.good { color:var(--good); } .bad { color:var(--bad); } .warn-t { color:var(--warn); }

/* ── icons + brand ──────────────────────────────────────────────────── */
.ic { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ic-box { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(31,107,255,.18); flex:none; }
.ic-box.good { color:var(--good); background:rgba(14,159,110,.10); border-color:rgba(14,159,110,.2); }
.ic-box.warn { color:var(--warn); background:rgba(194,120,3,.10); border-color:rgba(194,120,3,.2); }
.ic-box.bad { color:var(--bad); background:rgba(217,58,58,.09); border-color:rgba(217,58,58,.2); }
.mark { width:26px; height:26px; flex:none; border-radius:7px; box-shadow:0 1px 2px rgba(31,107,255,.35); }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.025em; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:10px; }

/* ── header ─────────────────────────────────────────────────────────── */
.hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.hdr-in { height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.hdr-nav { display:flex; align-items:center; gap:2px; justify-self:center; }
.hdr-nav a { font-size:14px; font-weight:500; color:var(--fg-2); text-decoration:none; padding:7px 12px; border-radius:var(--r-sm); transition:color 120ms, background-color 120ms; }
.hdr-nav a:hover { color:var(--fg); background:rgba(11,11,16,.05); }
.hdr-nav a.on { color:var(--fg); background:rgba(11,11,16,.06); }
.hdr-right { display:flex; align-items:center; gap:8px; justify-self:end; }
.hdr-menu { display:none; width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); color:var(--fg); cursor:pointer; place-items:center; padding:0; }
.hdr-menu .ic { width:20px; height:20px; }
.hdr-menu .i-close, .hdr-menu[aria-expanded="true"] .i-open { display:none; }
.hdr-menu[aria-expanded="true"] .i-close { display:block; }
.mnav { display:none; }
@media (max-width:860px) {
  .hdr-in { grid-template-columns:auto 1fr; gap:12px; }
  .hdr-nav { display:none; }
  .hdr-right .btn-primary { height:36px; padding:0 13px; }
  .hdr-menu { display:grid; }
  .mnav { display:block; position:absolute; top:100%; left:0; right:0; height:calc(100vh - 64px); height:calc(100dvh - 64px); background:var(--bg); border-top:1px solid var(--line); overflow-y:auto; z-index:49; }
  .mnav[hidden] { display:none; }
  .mnav .wrap { display:flex; flex-direction:column; padding-top:12px; padding-bottom:28px; }
  .mnav a:not(.btn) { font-size:18px; font-weight:500; padding:14px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg); }
  .mnav a.on { color:var(--accent); }
  .mnav-cta { display:grid; gap:10px; margin-top:22px; }
  .mnav-cta .btn { width:100%; }
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-sm); font:inherit; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:background-color 120ms, border-color 120ms, box-shadow 120ms, transform 120ms; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 8px 18px -10px rgba(31,107,255,.55); }
.btn-primary:hover { background:var(--accent-2); }
.btn-primary:active { transform:translateY(1px); }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--line-2); }
.btn-ghost:hover { background:rgba(11,11,16,.04); }
.btn-lg { height:48px; padding:0 20px; font-size:15px; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(31,107,255,.3); }
.btn:disabled { opacity:.6; cursor:default; }

/* ── type ───────────────────────────────────────────────────────────── */
h1 { margin:0; font-weight:600; letter-spacing:-0.04em; line-height:1.02; text-wrap:balance; }
h2 { margin:0; font-size:clamp(26px,3.2vw,38px); font-weight:600; letter-spacing:-0.035em; line-height:1.1; text-wrap:balance; }
h3 { margin:0; font-size:16px; font-weight:600; letter-spacing:-0.015em; }
.sub { margin:16px 0 0; font-size:17px; line-height:1.6; color:var(--fg-2); max-width:56ch; }
.sub strong { color:var(--fg); font-weight:500; }
.sec { padding:96px 0; border-top:1px solid var(--line); }
.sec.tint { background:var(--bg-2); }
.sec.slim { padding:40px 0; }
.sec-head { max-width:640px; margin-bottom:44px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head .sub { margin-top:12px; font-size:16.5px; }
.sec-head.center .sub { margin-left:auto; margin-right:auto; }
.kicker { display:block; font-size:12.5px; font-weight:600; color:var(--accent); letter-spacing:.02em; text-transform:uppercase; margin-bottom:12px; }
@media (max-width:700px) { .sec { padding:72px 0; } .sec-head { margin-bottom:32px; } }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { position:relative; padding:84px 0 0; text-align:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(31,107,255,.10), transparent 70%); pointer-events:none; }
.hero::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(11,11,16,.09) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 55% 45% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 55% 45% at 50% 0%, #000 20%, transparent 75%); pointer-events:none; }
.hero .wrap { position:relative; }
.hero h1 { font-size:clamp(38px,6.4vw,74px); max-width:15ch; margin:0 auto; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .sub { margin:22px auto 0; font-size:18px; max-width:52ch; }
.hero .cap-form { margin:32px auto 0; }
.hero .cap-note { text-align:center; }
@media (max-width:700px) { .hero { padding-top:56px; } .hero h1 { font-size:clamp(36px,10.4vw,44px); max-width:none; } .hero .sub { font-size:16.5px; margin-top:16px; } }
.pill { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--fg-2); padding:6px 13px 6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); box-shadow:var(--card-shadow); margin-bottom:24px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(14,159,110,.5); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(14,159,110,.4);} 70%{box-shadow:0 0 0 8px rgba(14,159,110,0);} 100%{box-shadow:0 0 0 0 rgba(14,159,110,0);} }
@media (prefers-reduced-motion:reduce) { .dot { animation:none; } html { scroll-behavior:auto; } }
.hero-split { text-align:left; padding-top:72px; }
.hero-split .grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
@media (max-width:900px) { .hero-split .grid { grid-template-columns:1fr; gap:40px; } }
.hero-split h1 { font-size:clamp(36px,5vw,58px); margin:0; max-width:none; }
.hero-split .sub { margin-left:0; }
.hero-split .cap-form { margin-left:0; }
.hero-split .cap-consent { text-align:left; }
.hero-split .works { justify-content:flex-start; gap:8px 0; }
.hero-split .works-k { flex-basis:100%; }
.hero-split .works-l { gap:10px 10px; justify-content:flex-start; }
.hero-split .brandmark { font-size:14px; gap:7px; }
.hero-split .brandmark svg { width:24px; height:24px; }
.hero-split .cap-note { text-align:left; }
.hero-page { padding-bottom:40px; }
.hero-page .sub { max-width:64ch; }
@media (max-width:700px) { .hero-split { padding-top:48px; } .hero-split h1 { font-size:clamp(34px,9.6vw,44px); } }

/* ── capture ────────────────────────────────────────────────────────── */
.cap-form { max-width:440px; }
.cap { display:flex; gap:8px; }
.cap-consent { margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--fg-3); }
.cap-consent a { color:var(--fg-2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line-2); }
.cap-consent a:hover { color:var(--fg); }
.hero .cap-consent, .band .cap-consent { text-align:center; }
@media (max-width:480px) { .cap { flex-direction:column; } }
.cap input[type=email] { flex:1 1 auto; min-width:0; height:48px; padding:0 14px; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); font:inherit; font-size:15px; outline:none; transition:border-color 120ms, box-shadow 120ms; }
.cap input::placeholder { color:var(--fg-3); }
.cap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,107,255,.18); }
.cap input:-webkit-autofill { -webkit-text-fill-color:var(--fg); -webkit-box-shadow:0 0 0 1000px var(--surface) inset; transition:background-color 600000s 0s; }
.cap-note { margin:10px 0 0; font-size:13px; min-height:20px; color:var(--fg-3); }
.cap-note.err { color:var(--bad); }
.cap-note.ok { color:var(--good); }

/* ── works-with ─────────────────────────────────────────────────────── */
.works { display:flex; align-items:center; justify-content:center; gap:12px 22px; flex-wrap:wrap; margin-top:30px; }
.works-k { font-size:12.5px; color:var(--fg-3); }
.works-l { display:inline-flex; align-items:center; justify-content:center; gap:14px 26px; flex-wrap:wrap; }
.brandmark { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500; color:var(--fg-2); white-space:nowrap; }
.brandmark svg { width:26px; height:26px; }
.bm-meta svg { transform:scale(1.12); }
.bm-gmail svg { transform:scale(1.04); }
.bm-zoho svg { transform:scale(0.96); }
.bm-fera svg { transform:scale(0.92); }
@media (max-width:520px) { .works { gap:10px 0; } .works-k { flex-basis:100%; text-align:center; } .hero-split .works-k { text-align:left; } .hero-split .works-l { justify-content:flex-start; } .works-l { gap:12px 20px; } .brandmark { font-size:14px; } .brandmark svg { width:22px; height:22px; } }

/* ── product shot ───────────────────────────────────────────────────── */
.shot-wrap { position:relative; margin:60px auto 0; max-width:1080px; padding:0 28px; }
.shot-wrap::before { content:""; position:absolute; left:12%; right:12%; top:-40px; height:220px; background:radial-gradient(ellipse at 50% 100%, rgba(31,107,255,.18), transparent 70%); filter:blur(30px); pointer-events:none; }
.shot { position:relative; border-radius:var(--r-lg); background:#FFFFFF; border:1px solid var(--line-2); box-shadow:0 1px 2px rgba(11,11,16,.06), 0 30px 70px -30px rgba(11,11,16,.35), 0 0 100px -30px rgba(31,107,255,.18); overflow:hidden; text-align:left; }
.shot-bar { display:flex; align-items:center; gap:12px; height:42px; padding:0 14px; border-bottom:1px solid var(--line); background:#F7F7F9; }
.shot-dots { display:flex; gap:6px; }
.shot-dots i { width:10px; height:10px; border-radius:50%; background:#DADAE0; display:block; }
.shot-url { margin:0 auto; font-size:12px; color:var(--fg-3); background:#FFFFFF; border:1px solid var(--line); border-radius:6px; padding:4px 12px; }
.shot-av { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#1F6BFF,#7DA6FF); color:#fff; font-size:10px; font-weight:600; display:grid; place-items:center; letter-spacing:0; }
.shot-body { display:grid; grid-template-columns:208px 1fr; min-height:440px; }
@media (max-width:760px) { .shot-body { grid-template-columns:1fr; } .shot-side { display:none; } }
.shot-side { border-right:1px solid var(--line); padding:14px 10px; background:#FAFAFB; }
.shot-side .s-brand { font-size:13px; font-weight:600; letter-spacing:-0.02em; padding:6px 10px 12px; display:flex; align-items:center; gap:8px; }
.shot-side .s-brand .mark { width:18px; height:18px; border-radius:5px; box-shadow:none; }
.shot-side .s-store { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg-2); border:1px solid var(--line); background:#fff; border-radius:7px; padding:6px 9px; margin:0 4px 10px; }
.shot-side .s-store .chev { margin-left:auto; }
.shot-side a { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fg-2); padding:7px 10px; border-radius:6px; text-decoration:none; }
.shot-side a.on { color:var(--fg); background:rgba(11,11,16,.06); font-weight:500; }
.shot-side .ic { width:15px; height:15px; opacity:.75; }
.shot-side .s-badge { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--fg-2); background:rgba(11,11,16,.07); border-radius:999px; padding:1px 7px; line-height:1.5; }
.shot-side .s-badge.warn { color:#fff; background:var(--warn); }
.shot-main { padding:18px 20px 0; display:flex; flex-direction:column; gap:16px; min-width:0; }
.shot-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.shot-head b { font-size:15px; font-weight:600; letter-spacing:-0.02em; }
.shot-sels { display:flex; gap:6px; }
.sel { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--fg-2); border:1px solid var(--line); border-radius:6px; padding:4px 8px 4px 10px; background:var(--bg-2); white-space:nowrap; }
.chev { width:12px; height:12px; opacity:.6; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.kpis.k3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:600px) { .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); min-width:0; }
.kpi span { display:block; font-size:11.5px; color:var(--fg-3); margin-bottom:6px; }
.kpi b { display:flex; align-items:baseline; gap:7px; font-size:20px; font-weight:600; letter-spacing:-0.025em; white-space:nowrap; }
.kpi b.good { color:var(--good); }
.kpi small { font-size:11px; color:var(--good); font-weight:500; }
.chart-wrap { display:flex; flex-direction:column; gap:6px; }
.chart-legend { display:flex; justify-content:flex-end; gap:14px; font-size:11px; color:var(--fg-3); }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.chart-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.chart-legend .l-rev { background:rgba(31,107,255,.22); } .chart-legend .l-pro { background:var(--accent); }
.chart { display:grid; grid-template-columns:repeat(14,1fr); gap:5px; align-items:end; height:104px; padding:0 2px; }
.chart i { display:block; position:relative; height:var(--r); border-radius:4px 4px 2px 2px; background:rgba(31,107,255,.20); overflow:hidden; }
.chart i::after { content:""; position:absolute; left:0; right:0; bottom:0; height:var(--p); background:var(--accent); opacity:.9; }
.chart i.hi { background:rgba(31,107,255,.32); }
.chart-x { display:grid; grid-template-columns:repeat(14,1fr); gap:5px; font-size:10.5px; color:var(--fg-3); text-align:center; }
@media (max-width:480px) { .chart-x span:nth-child(odd) { visibility:hidden; } }
.trows { min-width:0; }
.trow { display:grid; grid-template-columns:1.3fr repeat(5,1fr); gap:10px; font-size:12.5px; padding:9px 0; border-top:1px solid var(--line); color:var(--fg-2); white-space:nowrap; }
.trow.h { color:var(--fg-3); font-size:11.5px; border-top:0; padding-top:0; }
.trow .r { text-align:right; }
.trow .good { color:var(--good); }
.trow .bad { color:var(--bad); }
@media (max-width:600px) { .trow { grid-template-columns:1.3fr repeat(3,1fr); } .trow .hm { display:none; } }
.shot-fade { position:absolute; left:0; right:0; bottom:0; height:110px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; }
.float { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 14px 12px 12px; background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--pop-shadow); font-size:13px; white-space:nowrap; }
.float .ic-box { width:34px; height:34px; border-radius:9px; }
.float .ic-box .ic { width:18px; height:18px; }
.float div { display:flex; flex-direction:column; gap:1px; }
.float b { font-weight:500; color:var(--fg); }
.float span { font-size:12px; color:var(--fg-3); }
.float em { font-style:normal; font-size:11.5px; font-weight:600; color:var(--warn); background:rgba(194,120,3,.10); border-radius:999px; padding:3px 9px; margin-left:6px; }
.float em.ok { color:var(--good); background:rgba(14,159,110,.10); }
.float-a { right:-110px; top:300px; animation:drift 6s ease-in-out infinite; }
.float-b { left:-34px; bottom:64px; animation:drift 7s ease-in-out infinite reverse; }
@keyframes drift { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@media (max-width:1240px) { .float-a { right:8px; } .float-b { left:8px; } }
@media (max-width:1000px) { .float { display:none; } }
@media (prefers-reduced-motion:reduce) { .float { animation:none; } }



/* ── bento ──────────────────────────────────────────────────────────── */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media (max-width:900px) { .bento { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .bento { grid-template-columns:1fr; } }
.card { position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); padding:24px; display:flex; flex-direction:column; gap:14px; overflow:hidden; transition:border-color 160ms, box-shadow 160ms, transform 160ms; }
.card:hover { border-color:var(--line-2); box-shadow:0 6px 16px -6px rgba(11,11,16,.12); transform:translateY(-1px); }
.card.c3 { grid-column:span 3; }
.card.c2 { grid-column:span 2; }
@media (max-width:900px) { .card.c3, .card.c2 { grid-column:span 2; } }
@media (max-width:560px) { .card.c3, .card.c2 { grid-column:span 1; } }
.card p { margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55; }
.card .vis { margin-top:auto; padding-top:6px; }

/* mini visuals inside cards */
.mini-receipt { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:12px 14px; font-size:12.5px; }
.mini-receipt div { display:flex; justify-content:space-between; padding:5px 0; color:var(--fg-2); }
.mini-receipt div.t { border-top:1px solid var(--line); margin-top:4px; padding-top:9px; color:var(--fg); font-weight:500; }
.mini-receipt div.t b { color:var(--good); font-size:15px; }
.mini-receipt .neg { color:var(--bad); }
.mini-list { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:4px 14px; font-size:12.5px; }
.mini-list > div { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.mini-list > div:first-child { border-top:0; }
.mini-list .d { width:8px; height:8px; border-radius:50%; background:var(--fg-3); flex:none; }
.mini-list .d.ok { background:var(--good); } .mini-list .d.bad { background:var(--bad); } .mini-list .d.warn { background:var(--warn); }
.mini-list span { color:var(--fg); font-weight:500; min-width:0; display:flex; flex-direction:column; }
.mini-list span small { font-weight:400; color:var(--fg-3); font-size:11.5px; }
.mini-list em { font-style:normal; margin-left:auto; color:var(--fg-3); white-space:nowrap; font-size:12px; }
.mini-list em.good { color:var(--good); font-weight:500; } .mini-list em.bad { color:var(--bad); font-weight:500; } .mini-list em.warn { color:var(--warn); font-weight:500; }
.mini-list > div.flag { background:rgba(217,58,58,.06); margin:0 -14px; padding-left:14px; padding-right:14px; border-top-color:rgba(217,58,58,.18); border-radius:0 0 9px 9px; }
.mini-mail, .mini-task { display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:11px 13px; font-size:12.5px; }
.mini-mail .av, .avs i { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; color:#fff; background:linear-gradient(135deg,#1F6BFF,#7DA6FF); flex:none; font-style:normal; }
.mini-mail div, .mini-task div { display:flex; flex-direction:column; min-width:0; }
.mini-mail b, .mini-task b { font-weight:500; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-mail small, .mini-task small { color:var(--fg-3); font-size:11.5px; }
.mini-mail em, .mini-task em { font-style:normal; margin-left:auto; font-size:11.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.avs { display:flex; flex:none; }
.avs i { width:26px; height:26px; font-size:10px; border:2px solid var(--bg-2); margin-left:-8px; }
.avs i:first-child { margin-left:0; }
.avs i:nth-child(2) { background:linear-gradient(135deg,#0E9F6E,#6FD3AE); } .avs i:nth-child(3) { background:linear-gradient(135deg,#C27803,#F2B450); }
.mini-bar { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:12px 14px; font-size:12.5px; display:flex; flex-direction:column; gap:8px; }
.mini-bar .mb-row { display:flex; justify-content:space-between; color:var(--fg-2); }
.mini-bar .mb-row b { color:var(--fg); font-weight:500; }
.mini-bar .mb-row b.good { color:var(--good); }
.mini-bar .mb-track { height:6px; border-radius:3px; background:rgba(11,11,16,.08); overflow:hidden; }
.mini-bar .mb-track i { display:block; height:100%; background:var(--good); border-radius:3px; }

/* ── audiences ──────────────────────────────────────────────────────── */
.aud { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px) { .aud { grid-template-columns:1fr; } }
.aud a { display:flex; flex-direction:column; gap:12px; padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); text-decoration:none; color:inherit; transition:border-color 160ms, box-shadow 160ms, transform 160ms; }
.aud a:hover { border-color:var(--line-2); box-shadow:0 6px 16px -6px rgba(11,11,16,.12); transform:translateY(-1px); }
.aud p { margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55; }
.aud-go { margin-top:auto; padding-top:6px; font-size:14px; font-weight:500; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.aud-go .ic { width:16px; height:16px; transition:transform 160ms; }
.aud a:hover .aud-go .ic { transform:translateX(3px); }

/* ── steps ──────────────────────────────────────────────────────────── */
.steps { --sgap:32px; position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sgap); }
.step:not(:last-child)::after { content:""; position:absolute; top:19px; left:48px; right:calc(-1 * var(--sgap) + 8px); border-top:2px dashed var(--line-2); pointer-events:none; }
@media (max-width:860px) { .steps { grid-template-columns:1fr; gap:22px; } .step:not(:last-child)::after { display:none; } }
.step { display:flex; flex-direction:column; gap:12px; position:relative; min-width:0; }
.step-n { position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; font-size:15px; font-weight:600; display:grid; place-items:center; box-shadow:0 8px 18px -10px rgba(31,107,255,.6); }
.step h3 { margin-top:6px; font-size:18px; }
.step p { margin:0; font-size:15px; color:var(--fg-2); line-height:1.55; max-width:30ch; }

/* ── generic feature grid (audience + security pages) ───────────────── */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px) { .grid3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid3 { grid-template-columns:1fr; } }
.feat { display:flex; flex-direction:column; gap:12px; padding:24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); transition:border-color 160ms, box-shadow 160ms; }
.feat:hover { border-color:var(--line-2); box-shadow:0 6px 16px -6px rgba(11,11,16,.12); }
.feat p { margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55; }

/* ── product page: alternating feature rows ─────────────────────────── */
.jump { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.jump a { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--fg); text-decoration:none; padding:7px 13px 7px 8px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); transition:border-color 120ms, background-color 120ms; }
.jump a:hover { border-color:var(--accent); background:var(--accent-soft); }
.jump .ic-box { width:24px; height:24px; border-radius:7px; border:0; }
.jump .ic { width:14px; height:14px; }
.frow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.frow.rev .ftext { order:2; } .frow.rev .fvis { order:1; }
@media (max-width:900px) { .frow { grid-template-columns:1fr; gap:36px; } .frow.rev .ftext { order:1; } .frow.rev .fvis { order:2; } }
.ftext .group-k { margin-bottom:10px; }
.ftext .sub { margin-top:12px; font-size:16.5px; }
.flist { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.flist li { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.flist .ic-box { width:34px; height:34px; border-radius:9px; }
.flist .ic { width:18px; height:18px; }
.flist h3 { font-size:15.5px; }
.flist p { margin:3px 0 0; font-size:14.5px; color:var(--fg-2); line-height:1.55; }
.fvis .panel { max-width:520px; margin:0 auto; }
.group-k { font-size:12.5px; font-weight:600; color:var(--accent); margin:0 0 10px; letter-spacing:.02em; text-transform:uppercase; }

/* ── panels (audience heroes + product visuals) ─────────────────────── */
.panel { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--pop-shadow); }
.panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:13px; color:var(--fg-2); }
.panel-head .tag { font-size:11.5px; color:var(--fg-3); }
.panel-foot { margin:14px 0 0; font-size:12.5px; color:var(--fg-3); line-height:1.5; }
.panel .kpis { margin-top:14px; }
.panel .trows { margin-top:14px; }
.tl { list-style:none; margin:0; padding:6px 0 0; }
.tl li { display:grid; grid-template-columns:14px 1fr auto; gap:12px; align-items:baseline; padding:9px 0; font-size:14px; }
.tl .t-dot { width:8px; height:8px; border-radius:50%; background:var(--fg-3); position:relative; top:1px; }
.tl .t-dot.ok { background:var(--good); } .tl .t-dot.warn { background:var(--warn); } .tl .t-dot.bad { background:var(--bad); }
.tl .t-what { color:var(--fg); } .tl .t-what small { display:block; color:var(--fg-3); font-size:12.5px; margin-top:1px; }
.tl .t-when { color:var(--fg-3); font-size:12.5px; white-space:nowrap; }
.tl li.alert { margin-top:6px; padding:12px; border-radius:10px; background:rgba(217,58,58,.06); border:1px solid rgba(217,58,58,.25); }
.tl li.alert .t-what { font-weight:500; }
.tl li.done { margin-top:6px; padding:12px; border-radius:10px; background:rgba(14,159,110,.07); border:1px solid rgba(14,159,110,.25); }
.tl li.done .t-what { font-weight:500; }
.fn { margin:0; padding:8px 0 0; list-style:none; }
.fn li { display:grid; grid-template-columns:7rem 1fr auto; gap:12px; align-items:center; padding:7px 0; font-size:13.5px; }
.fn .f-bar { height:8px; border-radius:4px; background:var(--accent); opacity:.9; }
.fn .f-n { color:var(--fg-2); } .fn .f-v { color:var(--fg); } .fn .f-drop { color:var(--bad); font-size:12px; margin-left:8px; }
.st { width:100%; border-collapse:collapse; margin-top:6px; font-size:13.5px; }
.st th { text-align:left; font-weight:500; color:var(--fg-3); font-size:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.st td { padding:9px 0; border-bottom:1px solid var(--line); color:var(--fg-2); }
.st tr:last-child td { border-bottom:0; }
.st th.r, .st td.r { text-align:right; } .st td.r { color:var(--fg); } .st td.good { color:var(--good); } .st td.bad { color:var(--bad); } .st td.warn-t { color:var(--warn); }
.st .pill-s { display:inline-block; font-size:11px; font-weight:600; border-radius:999px; padding:2px 8px; background:rgba(14,159,110,.10); color:var(--good); }
.st .pill-s.warn { background:rgba(194,120,3,.10); color:var(--warn); }
.st .pill-s.mute { background:rgba(11,11,16,.06); color:var(--fg-3); }
.line { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.line-name { font-size:14.5px; color:var(--fg-2); } .line-val { font-size:15px; }
.line.total { margin-top:8px; padding-top:15px; border-top:1px solid var(--line-2); border-bottom:0; }
.line.total .line-name { color:var(--fg); font-weight:500; } .line.total .line-val { font-size:24px; font-weight:600; color:var(--good); letter-spacing:-0.02em; }
.panel-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-2); }
.panel-cta .btn { height:32px; padding:0 12px; font-size:12.5px; }
/* inbox */
.inbox { list-style:none; margin:0; padding:4px 0 0; }
.inbox li { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.inbox .av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:600; color:#fff; background:linear-gradient(135deg,#1F6BFF,#7DA6FF); flex:none; }
.inbox li:nth-child(2) .av { background:linear-gradient(135deg,#C27803,#F2B450); }
.inbox div { display:flex; flex-direction:column; min-width:0; }
.inbox b { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox small { color:var(--fg-3); font-size:12px; }
.inbox em { font-style:normal; margin-left:auto; font-size:11.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.draft { margin-top:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:12px 14px; font-size:13px; color:var(--fg-2); line-height:1.55; }
.draft .draft-k { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--accent); margin-bottom:6px; }
.draft .draft-k .ic { width:13px; height:13px; }
.draft p { margin:0; }
.draft-actions { display:flex; gap:8px; margin-top:10px; }
.draft-actions .btn { height:30px; padding:0 11px; font-size:12.5px; }
/* chat */
.chat { display:flex; flex-direction:column; gap:10px; padding-top:14px; }
.msg { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:13.5px; }
.msg .av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; color:#fff; background:linear-gradient(135deg,#0E9F6E,#6FD3AE); flex:none; }
.msg.a .av { background:linear-gradient(135deg,#1F6BFF,#7DA6FF); }
.msg.ai .av { background:var(--fg); }
.msg.ai .av .ic { width:14px; height:14px; color:#fff; }
.msg div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.msg small { color:var(--fg-3); font-size:12px; }
.msg p { margin:0; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:8px 11px; color:var(--fg); line-height:1.5; }
.msg.ai p { background:var(--accent-soft); border-color:rgba(31,107,255,.2); }
.task { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px; }
.task .ic-box { width:26px; height:26px; border-radius:7px; }
.task .ic { width:14px; height:14px; }
.task div { display:flex; flex-direction:column; min-width:0; }
.task b { font-weight:500; }
.task small { color:var(--fg-3); font-size:12px; }
.task em { font-style:normal; margin-left:auto; font-size:11.5px; font-weight:600; color:var(--good); background:rgba(14,159,110,.10); border-radius:999px; padding:3px 9px; }

/* ── pains ──────────────────────────────────────────────────────────── */
.pains { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:700px) { .pains { grid-template-columns:1fr; } }
.pain { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); }
.pain .q { color:var(--accent); font-size:30px; line-height:.8; font-weight:600; }
.pain p { margin:0; font-size:15px; color:var(--fg-2); line-height:1.6; }
.pain p b { color:var(--fg); font-weight:500; }

/* ── faq ────────────────────────────────────────────────────────────── */
.faq { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
details { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--card-shadow); padding:0 20px; transition:border-color 160ms; }
details[open], details:hover { border-color:var(--line-2); }
summary { cursor:pointer; list-style:none; padding:17px 0; font-size:15.5px; font-weight:500; display:flex; justify-content:space-between; gap:16px; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--fg-3); font-size:20px; line-height:1; flex:none; transition:transform 160ms; }
details[open] summary::after { transform:rotate(45deg); }
summary:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(31,107,255,.25); border-radius:6px; }
details p { margin:0 0 18px; font-size:14.5px; color:var(--fg-2); line-height:1.65; }
details a { color:var(--fg); }

/* ── contact ────────────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:start; }
@media (max-width:820px) { .contact-grid { grid-template-columns:1fr; gap:30px; } }
.cform { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:620px) { .cform { grid-template-columns:1fr; } }
.cform .full { grid-column:1 / -1; }
.cform label { display:block; font-size:13.5px; color:var(--fg-2); margin-bottom:6px; }
.cform input[type=text], .cform input[type=email], .cform select, .cform textarea { width:100%; padding:11px 13px; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); font:inherit; font-size:15px; outline:none; transition:border-color 120ms, box-shadow 120ms; }
.cform input[type=text], .cform input[type=email], .cform select { height:46px; }
.cform textarea { min-height:140px; resize:vertical; line-height:1.55; }
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,107,255,.18); }
.cform .actions { grid-column:1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cform .cap-consent { margin:-4px 0 0; }
.contact-aside { font-size:14.5px; color:var(--fg-2); line-height:1.65; display:flex; flex-direction:column; gap:14px; }
.contact-aside > div { padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--card-shadow); }
.contact-aside b { color:var(--fg); font-weight:500; display:block; margin-bottom:2px; }
.contact-aside a { color:var(--fg); }
.note { margin:0; font-size:13.5px; min-height:20px; color:var(--fg-3); } .note.err { color:var(--bad); } .note.ok { color:var(--good); }

/* ── legal / prose ──────────────────────────────────────────────────── */
.doc { max-width:680px; }
.doc h1 { font-size:clamp(30px,4vw,40px); margin-bottom:10px; }
.doc .updated { margin:0 0 34px; font-size:13.5px; color:var(--fg-3); }
.doc h2 { font-size:19px; margin:34px 0 8px; letter-spacing:-0.02em; }
.doc p, .doc li { color:var(--fg-2); font-size:15.5px; line-height:1.7; }
.doc ul { padding-left:20px; } .doc li { margin-bottom:7px; }
.doc a { color:var(--fg); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.doc p b { color:var(--fg); font-weight:500; }

/* ── closing CTA band ───────────────────────────────────────────────── */
.band { position:relative; text-align:center; padding:96px 0; border-top:1px solid var(--line); overflow:hidden; background:var(--bg-2); }
.band::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(31,107,255,.12), transparent 70%); pointer-events:none; }
.band .wrap { position:relative; }
.band h2 { font-size:clamp(28px,3.6vw,44px); }
.band .sub { margin:14px auto 0; }
.band .cap-form { margin:30px auto 0; }
.band .cap-note { text-align:center; }
@media (max-width:700px) { .band { padding:72px 0; } }

/* ── footer ─────────────────────────────────────────────────────────── */
.ftr { border-top:1px solid var(--line); padding:56px 0 40px; }
.ftr-grid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; }
@media (max-width:820px) { .ftr-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .ftr-grid { grid-template-columns:1fr; } }
.ftr-brand p { margin:12px 0 0; font-size:14px; color:var(--fg-2); max-width:34ch; line-height:1.55; }
.ftr-works { display:flex; align-items:center; gap:12px; margin-top:16px; font-size:12.5px; color:var(--fg-3); }
.ftr-works svg { width:20px; height:20px; opacity:.85; }
.ftr h4 { margin:0 0 12px; font-size:13px; font-weight:600; color:var(--fg); }
.ftr ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ftr li a { font-size:14px; color:var(--fg-2); text-decoration:none; }
.ftr li a:hover { color:var(--fg); }
.ftr-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3); }

/* ── interactive tour ───────────────────────────────────────────────── */
.tour { position:relative; margin:56px auto 0; max-width:1120px; padding:0 28px; text-align:left; }
.tour::before { content:""; position:absolute; left:12%; right:12%; top:-40px; height:220px; background:radial-gradient(ellipse at 50% 100%, rgba(31,107,255,.18), transparent 70%); filter:blur(30px); pointer-events:none; }
.tour .shot { position:relative; }
.tour-tabs { display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--line); background:#fff; overflow-x:auto; scrollbar-width:none; }
.tour-tabs::-webkit-scrollbar { display:none; }
.tour-tabs [role=tab] { position:relative; display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 14px; border:0; background:none; color:var(--fg-2); font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; transition:color 120ms; }
.tour-tabs [role=tab] .ic { width:16px; height:16px; }
.tour-tabs [role=tab]:hover { color:var(--fg); }
.tour-tabs [role=tab].on { color:var(--accent-2); }
.tour-tabs [role=tab]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(31,107,255,.3) inset; border-radius:8px; }
.tour-tabs [role=tab]::before { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:rgba(31,107,255,.18); opacity:0; }
.tour-tabs [role=tab].on::before { opacity:1; }
.tour-tabs [role=tab]::after { content:""; position:absolute; left:10px; bottom:-1px; height:2px; width:0; background:var(--accent); border-radius:1px; }
.tour.run [role=tab].on::after { animation:prog 6s linear forwards; }
.tour.paused [role=tab].on::after { animation-play-state:paused; }
.tour.still [role=tab].on::after { width:calc(100% - 20px); }
@keyframes prog { from { width:0; } to { width:calc(100% - 20px); } }
.tour .shot-body { height:640px; }
.tour-panels { min-width:0; position:relative; }
.tour-panel { display:none; flex-direction:column; gap:14px; padding:16px 18px; height:100%; overflow:hidden; }
.tour-panel.on { display:flex; }
.tour .shot-fade { height:64px; }
.tour-cap { margin:14px auto 0; max-width:64ch; text-align:center; font-size:14px; color:var(--fg-2); line-height:1.5; }
.tour-cap small { font-size:12px; color:var(--fg-3); }
@media (max-width:760px) { .tour { margin-top:40px; padding:0 16px; } .tour .shot-body { height:auto; } .tour-panel { max-height:1080px; padding:14px; } .tour-tabs [role=tab] { padding:0 11px; font-size:13px; } }
.btn-sm { height:30px; padding:0 11px; font-size:12.5px; }
.kpi small.bad { color:var(--bad); }

/* tour panel components */
.p-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.p-head b { font-size:15px; font-weight:600; letter-spacing:-0.02em; }
.p-cols { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:14px; align-items:start; }
.p-cols.a { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.p-cols.s { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
.p-cols.sp { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.p-cols.tm { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
@media (max-width:760px) { .p-cols, .p-cols.a, .p-cols.s, .p-cols.sp, .p-cols.tm { grid-template-columns:1fr; } }
.p-side { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:12px 14px; font-size:12.5px; display:flex; flex-direction:column; gap:9px; min-width:0; }
.p-stack { display:flex; flex-direction:column; gap:12px; }
.p-sub { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.p-sub .ic { width:13px; height:13px; }
.p-note { margin:0; font-size:12px; color:var(--fg-3); line-height:1.5; }
.p-note.verdict { display:flex; align-items:center; gap:6px; color:var(--bad); font-weight:500; margin-top:4px; }
.p-note.callout { display:flex; align-items:center; gap:6px; color:var(--accent-2); font-weight:500; }
.p-note .ic { width:14px; height:14px; flex:none; }
.spills { display:flex; gap:8px; flex-wrap:wrap; }
.spill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--fg-2); border:1px solid var(--line); background:var(--bg-2); border-radius:999px; padding:5px 11px; }
.spill b { color:var(--fg); font-weight:600; }
.spill.bad { color:var(--bad); border-color:rgba(217,58,58,.25); background:rgba(217,58,58,.06); } .spill.bad b { color:var(--bad); }
.d { width:7px; height:7px; border-radius:50%; background:var(--fg-3); display:inline-block; flex:none; } .d.ok { background:var(--good); } .d.bad { background:var(--bad); } .d.warn { background:var(--warn); }
.chip { display:inline-block; font-size:11px; font-weight:600; border-radius:999px; padding:2px 8px; background:rgba(11,11,16,.06); color:var(--fg-2); white-space:nowrap; line-height:1.6; }
.chip.ok { background:rgba(14,159,110,.10); color:var(--good); } .chip.bad { background:rgba(217,58,58,.09); color:var(--bad); } .chip.warn { background:rgba(194,120,3,.10); color:var(--warn); } .chip.info { background:var(--accent-soft); color:var(--accent-2); }
.est { display:inline-block; font-style:normal; font-size:9.5px; font-weight:600; color:var(--warn); background:rgba(194,120,3,.10); border-radius:4px; padding:1px 4px; margin-left:4px; vertical-align:middle; letter-spacing:.02em; line-height:1.4; }
.dt { width:100%; border-collapse:collapse; font-size:12.5px; min-width:0; }
.dt th { text-align:left; font-weight:500; color:var(--fg-3); font-size:11.5px; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
.dt td { padding:8px 8px 8px 0; border-bottom:1px solid var(--line); color:var(--fg-2); white-space:nowrap; }
.dt td:first-child { color:var(--fg); font-weight:500; }
.dt .r { text-align:right; padding-right:0; } .dt td.r { color:var(--fg); }
.dt td.good { color:var(--good); } .dt td.bad { color:var(--bad); }
.dt tr.hl td { border-bottom:0; }
.dt tr.x td { padding:0 0 12px; }
@media (max-width:640px) { .dt .hm { display:none; } }
.tlh { display:flex; align-items:center; font-size:11.5px; color:var(--fg-2); flex-wrap:wrap; row-gap:4px; width:0; min-width:100%; }
.tlh span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.tlh span::after { content:""; width:18px; height:1px; background:var(--line-2); margin:0 8px; }
.tlh span:last-child::after { display:none; }
.tlh .bad { color:var(--bad); font-weight:500; }
.dtimes { display:flex; flex-direction:column; gap:8px; }
.dtimes div { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; color:var(--fg-2); }
.dtimes i { grid-column:1 / -1; height:5px; border-radius:3px; background:rgba(11,11,16,.08); overflow:hidden; display:block; }
.dtimes i::after { content:""; display:block; height:100%; width:var(--w); background:var(--accent); border-radius:3px; }
.dtimes b { color:var(--fg); font-weight:600; }
.dtimes div.total { color:var(--fg); font-weight:500; } .dtimes div.total b { color:var(--accent-2); }
.fn.sm li { grid-template-columns:5.5rem 1fr auto; font-size:12.5px; padding:5px 0; }
.fn.sm .f-bar { height:7px; }
.fn li.drop .f-bar { background:var(--bad); }
.creatives { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cre { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); font-size:12px; min-width:0; }
.cre .thumb { position:relative; height:64px; background:linear-gradient(135deg,#E9ECF2,#D9DEE7); display:grid; place-items:center; }
.cre .thumb::before { content:""; position:absolute; width:30px; height:30px; border-radius:50%; background:rgba(11,11,16,.38); }
.cre .thumb::after { content:""; position:relative; width:0; height:0; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:4px; }
.cre .thumb .chip { position:absolute; top:6px; right:6px; }
.cre .meta { padding:8px 10px; display:flex; flex-direction:column; gap:2px; color:var(--fg-3); }
.cre .meta b { color:var(--fg); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:640px) { .creatives { grid-template-columns:1fr 1fr; } .cre:last-child { display:none; } }
.kv { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--fg-2); padding:4px 0; border-bottom:1px solid var(--line); }
.kv b { color:var(--fg); font-weight:500; }
.kv.diff { margin:4px -6px 6px; padding:8px 8px; border-radius:8px; background:rgba(194,120,3,.10); color:var(--warn); font-weight:500; border-bottom:0; }
.kv.diff b { color:var(--warn); font-weight:600; }
.av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; color:#fff; flex:none; font-style:normal; background:linear-gradient(135deg,#1F6BFF,#7DA6FF); }
.av.a2 { background:linear-gradient(135deg,#0E9F6E,#6FD3AE); } .av.a3 { background:linear-gradient(135deg,#C27803,#F2B450); } .av.a4 { background:linear-gradient(135deg,#6B4EFF,#B09CFF); }
.cases { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cases li { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:8px 8px; border-radius:8px; font-size:12.5px; }
.cases li.on { background:rgba(31,107,255,.07); }
.cases li div { min-width:0; }
.cases b { display:block; font-weight:500; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cases small { color:var(--fg-3); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.tile { display:flex; align-items:baseline; gap:8px; margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); font-size:12.5px; color:var(--fg-2); }
.tile b { font-size:18px; color:var(--fg); letter-spacing:-0.02em; margin-left:auto; } .tile small { font-size:11.5px; font-weight:500; }
.case { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:12px 14px; font-size:12.5px; display:flex; flex-direction:column; gap:9px; min-width:0; }
.ocard { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 11px; min-width:0; }
.ocard .ic { width:18px; height:18px; color:var(--accent); }
.ocard div { min-width:0; }
.ocard b { font-weight:500; color:var(--fg); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ocard small { color:var(--fg-3); display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.case .p-note { color:var(--fg-2); font-size:12.5px; }
.draftbox { background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:10px 12px; color:var(--fg); line-height:1.5; font-size:12.5px; }
.tour .chat { padding-top:0; }
.tour .msg p { font-size:12.5px; padding:7px 10px; }
.tour .task { margin-top:4px; }
.task .task-btns { margin-left:auto; display:flex; gap:6px; }
.members { display:flex; flex-direction:column; gap:8px; }
.members div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--fg); font-weight:500; }
.members .av { width:24px; height:24px; font-size:9.5px; }
.members .chip { font-weight:500; }
.ask { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.ask .q { color:var(--fg); font-weight:500; }
.ask .a { background:var(--accent-soft); border:1px solid rgba(31,107,255,.2); border-radius:8px; padding:8px 10px; color:var(--fg); line-height:1.5; }

/* ── lifecycle strip ────────────────────────────────────────────────── */
.life { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:12px; position:relative; }
.life::before { content:""; position:absolute; left:calc(100% / 14); right:calc(100% / 14); top:23px; border-top:2px dashed var(--line-2); }
.life li { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; position:relative; }
.life .ic-box { width:48px; height:48px; border-radius:13px; background:#fff; box-shadow:0 0 0 6px var(--bg-2), var(--card-shadow); }
.sec:not(.tint) .life .ic-box { box-shadow:0 0 0 6px var(--bg), var(--card-shadow); }
.life span { font-size:13.5px; font-weight:500; max-width:11ch; line-height:1.3; }
.life-note { text-align:center; margin:32px 0 0; font-size:15.5px; color:var(--fg-2); }
@media (max-width:900px) { .life { grid-template-columns:1fr; gap:0; max-width:320px; margin:0 auto; } .life::before { left:23px; right:auto; top:12px; bottom:12px; border-top:0; border-left:2px dashed var(--line-2); } .life li { flex-direction:row; text-align:left; padding:9px 0; gap:16px; } .life span { max-width:none; font-size:15px; } }

/* ── everything it does ─────────────────────────────────────────────── */
.all { display:grid; grid-template-columns:repeat(6,1fr); gap:28px 22px; }
.all.n3 { grid-template-columns:repeat(3,1fr); max-width:900px; margin:0 auto; }
@media (max-width:1000px) { .all { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .all, .all.n3 { grid-template-columns:repeat(2,1fr); gap:26px 16px; } }
.all h3 { display:flex; align-items:center; gap:8px; font-size:14.5px; margin-bottom:12px; }
.all h3 .ic-box { width:28px; height:28px; border-radius:8px; } .all h3 .ic { width:15px; height:15px; }
.all ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.all li { display:grid; grid-template-columns:14px 1fr; gap:8px; align-items:start; font-size:13.5px; color:var(--fg-2); line-height:1.4; }
.all li .ic { width:14px; height:14px; color:var(--good); margin-top:3px; stroke-width:2.2; }

/* ── before / after ─────────────────────────────────────────────────── */
.ba { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:920px; margin:0 auto; }
@media (max-width:700px) { .ba { grid-template-columns:1fr; } }
.ba-col { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); padding:24px; }
.ba-col h3 { font-size:15px; margin-bottom:16px; color:var(--fg-2); }
.ba-col.after h3 { color:var(--accent-2); }
.ba-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ba-col li { display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--fg-2); }
.ba-col li .ic-box { width:30px; height:30px; border-radius:8px; } .ba-col li .ic { width:16px; height:16px; }
.ba-col.before .ic-box { color:var(--fg-3); background:rgba(11,11,16,.05); border-color:var(--line); }
.ba-col.after { border-color:rgba(31,107,255,.3); box-shadow:0 0 0 4px rgba(31,107,255,.06), var(--card-shadow); }
.ba-col.after .ic-box { color:var(--good); background:rgba(14,159,110,.10); border-color:rgba(14,159,110,.2); }
.ba-col.after li { color:var(--fg); }

.owed { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; }
.owed div { border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:8px 10px; font-size:11.5px; color:var(--fg-3); }
.owed b { display:block; font-size:15px; color:var(--fg); letter-spacing:-0.02em; margin-top:2px; }
.owed b.warn-t { color:var(--warn); }
.hours { display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width:480px) { .tour-tabs { padding:0 6px; } .tour-tabs [role=tab] { padding:0 8px; font-size:12px; gap:5px; height:42px; } .tour-tabs [role=tab] .ic { width:15px; height:15px; } }
@media (max-width:760px) { .tour-tabs { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); } }

/* ── unified inbox bits ─────────────────────────────────────────────── */
.filters { display:flex; gap:6px; flex-wrap:wrap; }
.fchip { font-size:12px; font-weight:500; color:var(--fg-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:#fff; line-height:1.4; }
.fchip.on { color:#fff; background:var(--fg); border-color:var(--fg); }
.chn { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
.chn .ic { width:15px; height:15px; }
.chn.warn { background:rgba(194,120,3,.10); color:var(--warn); }
.chn.brand { background:none; } .chn.brand svg { width:24px; height:24px; }
.stars { color:var(--warn); letter-spacing:1px; font-size:11px; margin-right:5px; }
.case.sm { gap:8px; }
.ccom { display:flex; align-items:center; gap:10px; min-width:0; }
.ccom div { min-width:0; }
.ccom b { font-weight:500; color:var(--fg); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccom small { color:var(--fg-3); font-size:11.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mute-t { color:var(--fg-3) !important; font-weight:400; }

/* ── tour: real sidebar ─────────────────────────────────────────────── */
.tour .shot-side { padding:12px 8px 10px; display:flex; flex-direction:column; }
.tour .shot-side a { padding:5px 9px; font-size:12.5px; gap:8px; }
.tour .shot-side a span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tour .shot-side .s-sep { height:1px; background:var(--line); margin:6px 8px; }
.tour .shot-side .s-ver { margin-top:auto; padding:10px 9px 0; border-top:1px solid var(--line); font-size:10.5px; color:var(--fg-3); line-height:1.4; }
.tour .shot-side .s-ver b { display:block; font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums; }
/* ── tour: callout ──────────────────────────────────────────────────── */
.callout { display:flex; align-items:center; gap:8px; padding:2px 0; font-size:12.5px; color:var(--fg-2); }
.callout .ic { width:16px; height:16px; flex:none; }
.callout b { font-weight:600; }
.callout span { color:var(--fg-2); }
.callout b { color:var(--fg); }
.callout.bad .ic { color:var(--bad); } .callout.warn .ic { color:var(--warn); } .callout.good .ic { color:var(--good); } .callout.info .ic { color:var(--accent); }
/* ── tour: Sales sheet ──────────────────────────────────────────────── */
.fbar { display:flex; flex-direction:column; gap:6px; }
.flt { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fk { font-size:11px; font-weight:600; color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em; width:44px; }
.fk2 { width:auto; margin-left:10px; }
.fchip.cb::before { content:""; display:inline-block; width:10px; height:10px; border:1.5px solid var(--line-2); border-radius:3px; margin-right:6px; vertical-align:-1px; }
.fchip.cb.on { color:var(--fg); background:var(--accent-soft); border-color:rgba(31,107,255,.3); }
.fchip.cb.on::before { background:var(--accent); border-color:var(--accent); }
.cmp { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); font-size:12px; color:var(--fg-2); }
.cmp .ic { width:14px; height:14px; transform:rotate(-90deg); }
.cmp span { font-weight:600; color:var(--fg); }
.cmp small { color:var(--fg-3); font-size:11.5px; }
.sheet-wrap { position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:8px; }
.sheet-wrap::after { content:""; position:absolute; top:0; right:0; bottom:0; width:32px; background:linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events:none; }
.sheet { border-collapse:collapse; table-layout:fixed; font-size:11px; }
.sheet th, .sheet td { border:1px solid rgba(11,11,16,.10); padding:0 4px; height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet th.day, .sheet td.day { position:sticky; left:0; z-index:2; width:72px; min-width:72px; background:#fff; text-align:left; font-weight:500; color:var(--fg); border-right:4px solid rgba(11,11,16,.18); }
.sheet thead th.day { background:#F7F7F9; font-size:10.5px; color:var(--fg-3); font-weight:600; }
.sheet thead th.g { background:#EEF0F4; color:var(--fg); font-weight:600; font-size:11px; text-align:center; }
.sheet thead th.gt { background:#4f46e5; color:#fff; }
.sheet thead th.rt-h { background:#EEF0F4; color:var(--fg-2); font-size:10px; width:40px; padding:0 1px; }
.sheet th.mh { color:#fff; font-weight:700; font-size:10px; text-align:right; width:48px; letter-spacing:-0.01em; white-space:normal; line-height:1.1; padding:2px 3px; height:auto; vertical-align:bottom; }
.sheet th.m-cog { width:56px; }
.sheet th.tg { width:58px; } .sheet th.tg.m-cog, .sheet th.tg.m-rev { width:60px; } .sheet th.tg.m-fees, .sheet th.tg.m-gst { width:50px; } .sheet th.tg.m-orders, .sheet th.tg.m-roas, .sheet th.tg.m-roi { width:44px; } .sheet th.tg.m-cpr { width:52px; }
.sheet .m-profit { background:#15803d; } .sheet .m-ads { background:#2563eb; } .sheet .m-cog { background:#b91c1c; } .sheet .m-rev { background:#0f766e; }
.sheet .m-fees, .sheet .m-gst, .sheet .m-orders { background:#475569; } .sheet .m-roas { background:#7c3aed; } .sheet .m-cpr { background:#b45309; } .sheet .m-roi { background:#be185d; }
.sheet td { color:var(--fg-2); }
.sheet td.r { text-align:right; }
.sheet td.gs, .sheet th.gs { border-left:4px solid rgba(11,11,16,.18); }
.sheet td.good { color:var(--good); font-weight:500; } .sheet td.bad { color:var(--bad); font-weight:500; }
.sheet td.mute-t { color:var(--fg-3); font-style:italic; }
.sheet .est { font-size:8px; padding:0 2px; margin-left:2px; letter-spacing:0; }
.sheet td.rt-c { text-align:center; width:40px; padding:0 1px; }
.sheet tr.wk td { padding:0 2px; font-size:10.5px; }
.sheet td.rt-c .rt { padding:1px 5px; }
.rt { display:inline-block; font-size:9.5px; font-weight:700; border-radius:999px; padding:1px 7px; line-height:1.5; }
.rt.a { background:rgba(14,159,110,.14); color:var(--good); } .rt.b { background:var(--accent-soft); color:var(--accent-2); } .rt.c { background:rgba(194,120,3,.14); color:var(--warn); } .rt.d { background:rgba(217,58,58,.12); color:var(--bad); }
.sheet tr.wk td { background:#F3F4F7; font-weight:600; color:var(--fg); }
.sheet tr.wk td.day { background:#F3F4F7; }
.sheet tr.wk.a td { font-weight:400; color:var(--fg-2); font-style:italic; }
.sheet tr.wk.t td { border-top:2px solid rgba(11,11,16,.18); }
@media (max-width:760px) { .fk { width:100%; } .fk2 { margin-left:0; } .tour .shot-side { display:none; } .sheet-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .sheet-wrap::after { display:none; } }

/* ── v12 pages ──────────────────────────────────────────────────────── */
.sec-more { text-align:center; margin:22px 0 0; font-size:14.5px; color:var(--fg-2); }
.sec-more a { color:var(--accent-2); font-weight:500; text-decoration:none; }
.sec-more a:hover { text-decoration:underline; }
.int-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px) { .int-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .int-grid { grid-template-columns:1fr; } }
.int-card { display:flex; flex-direction:column; gap:12px; padding:24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); text-decoration:none; color:inherit; transition:border-color 160ms, box-shadow 160ms, transform 160ms; }
.int-card:hover { border-color:var(--line-2); box-shadow:0 6px 16px -6px rgba(11,11,16,.12); transform:translateY(-1px); }
.int-card .bm { width:40px; height:40px; display:grid; place-items:center; }
.int-card .bm svg { width:32px; height:32px; }
.int-card p { margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55; }
.conn { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px; box-shadow:var(--pop-shadow); }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1000px) { .grid4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid4 { grid-template-columns:1fr; } }
.conn-note { display:flex; align-items:center; gap:8px; margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3); }
.conn-note .ic { width:15px; height:15px; color:var(--accent); }
.conn-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.conn-tile { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); font-size:13px; font-weight:500; text-align:center; }
.conn-tile svg { width:44px; height:44px; }
.conn-tile .mark { width:44px; height:44px; border-radius:11px; }
.conn-link { width:56px; border-top:2px dashed var(--line-2); position:relative; }
.conn-link::after { content:""; position:absolute; right:-1px; top:-5px; width:8px; height:8px; border-right:2px solid var(--line-2); border-top:2px solid var(--line-2); transform:rotate(45deg); }
.conn-flows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.conn-flows li { display:grid; grid-template-columns:16px 1fr; gap:10px; align-items:start; font-size:14px; color:var(--fg-2); }
.conn-flows .ic { width:16px; height:16px; color:var(--good); margin-top:3px; stroke-width:2.2; }
.conn-k { font-size:11px; font-weight:600; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.cmpt { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--card-shadow); }
.cmpt th, .cmpt td { padding:14px 18px; text-align:left; vertical-align:top; font-size:14.5px; border-bottom:1px solid var(--line); line-height:1.5; }
.cmpt tr:last-child td { border-bottom:0; }
.cmpt th { background:var(--bg-2); font-size:13px; font-weight:600; color:var(--fg-2); }
.cmpt th.us { color:var(--accent-2); }
.cmpt td.job { font-weight:500; color:var(--fg); width:22%; }
.cmpt td.old { color:var(--fg-2); }
.cmpt td.us { color:var(--fg); background:rgba(31,107,255,.035); }
.cmpt td .ic { width:15px; height:15px; margin-right:7px; vertical-align:-2px; stroke-width:2.2; }
.cmpt td.old .ic { color:var(--fg-3); } .cmpt td.us .ic { color:var(--good); }
@media (max-width:700px) {
  .cmpt, .cmpt tbody, .cmpt tr, .cmpt td { display:block; width:auto; }
  .cmpt thead { display:none; }
  .cmpt tr { padding:14px 16px 6px; border-bottom:1px solid var(--line); }
  .cmpt tr:last-child { border-bottom:0; }
  .cmpt td { border:0; padding:4px 0 8px; }
  .cmpt td.job { font-size:15px; padding-bottom:6px; width:auto; }
  .cmpt td.old::before, .cmpt td.us::before { display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-3); margin-bottom:2px; }
  .cmpt td.old::before { content:"Spreadsheet and six tabs"; }
  .cmpt td.us { background:none; padding-left:0; }
  .cmpt td.us::before { content:"Sales Economic"; color:var(--accent-2); }
}
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px) { .price-grid { grid-template-columns:1fr; } }
.price-card { display:flex; flex-direction:column; gap:12px; padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--card-shadow); }
.price-card p { margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.55; }
.faq-hub h2 { font-size:22px; margin:0 0 16px; }
.faq-hub .faq { margin:0 0 44px; }

/* ── 404 ────────────────────────────────────────────────────────────── */
.nf { text-align:center; padding:96px 0 72px; }
.nf h1 { font-size:clamp(34px,5vw,56px); }
.nf .links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }