/* ==========================================================================
   Managello marketing site — global styles
   Design tokens are canonical (from the product plan §3.2). Amber is "the door":
   use it once per viewport.
   ========================================================================== */
:root{
  --brand-navy:#25323D;
  --brand-amber:#C9843E;
  --brand-ink:#1C2630;
  --brand-surface:#F7F8F9;
  --brand-line:#E3E6E9;
  --brand-white:#FFFFFF;
  --radius:7px;
  /* tokens pulled from the live product for the widget rebuilds below */
  --lb-crimson:#B3261E;
  --pill-rejected-bg:#B3261E;
  --pill-submitted-bg:#E2E5E8;
  --pill-submitted-text:#25323D;
  --pill-neutral-bg:#EEF0F2;
  --pill-neutral-text:#5A6870;
  --live-primary:#012751;
  --live-accent:#006F6F;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--brand-surface);
  color:var(--brand-ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Inter Tight',sans-serif;
  letter-spacing:-0.02em;
  color:var(--brand-navy);
}
.mono{ font-family:'JetBrains Mono',monospace; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---- NAV ---- */
nav{ border-bottom:1px solid var(--brand-line); background:var(--brand-white); position:sticky; top:0; z-index:10;}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-img{ height:30px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; font-size:0.98rem; font-weight:500; color:var(--brand-ink);}
.nav-links a{ position:relative; padding:6px 0; }
.nav-links a:hover{ color:var(--brand-navy); }
.nav-links a.active{ color:var(--brand-amber); font-weight:700; }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:var(--brand-amber); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:var(--radius); font-weight:600; font-size:0.9rem; white-space:nowrap; border:none; cursor:pointer; }
.btn-amber{ background:var(--brand-amber); color:var(--brand-white); }
.btn-amber:hover{ background:#b8763a; }
.btn-ghost{ border:1px solid var(--brand-line); color:var(--brand-navy); background:transparent; }
.btn-ghost:hover{ border-color:var(--brand-navy); }

/* ---- HERO ---- */
.hero{ padding:88px 0 72px; }
.eyebrow{ font-size:0.8rem; letter-spacing:0.04em; color:var(--brand-amber); font-weight:500; margin-bottom:20px; }
.hero h1{ font-size:3.4rem; font-weight:800; line-height:1.08; max-width:820px; }
.hero-sub{ font-size:1.2rem; color:#4B5A64; max-width:620px; margin:24px 0 32px; }
.cta-row{ display:flex; gap:14px; align-items:center; margin-bottom:16px;}
.cta-row .btn{ padding:13px 26px; font-size:0.95rem;}
/* two-column hero: copy on the left, live product preview on the right */
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1 .underline{ position:relative; display:inline-block; }
.hero h1 .underline::after{ content:''; position:absolute; left:0; bottom:4px; height:8px; width:100%; background:rgba(201,132,62,.28); z-index:-1; border-radius:2px; }
.hero-help{ font-size:12.5px; color:#7A8791; margin:10px 2px 0; }

/* install command block with copy button */
.install-block{ display:flex; align-items:center; gap:12px; background:var(--brand-navy); border-radius:10px; padding:12px 14px; max-width:520px; }
.install-block .prompt{ color:var(--brand-amber); font-size:13px; }
.install-block code{ color:#E8EDF1; font-size:13px; flex:1; overflow-x:auto; white-space:nowrap; }
.install-copy-btn{ border:1px solid rgba(255,255,255,.18); background:transparent; color:#E8EDF1; border-radius:6px; padding:5px 10px; font-size:11px; cursor:pointer; font-family:'JetBrains Mono',monospace; transition:background 0.2s ease,color 0.2s ease; }
.install-copy-btn:hover{ background:rgba(255,255,255,.08); }
.install-copy-btn.copied{ background:var(--brand-amber); color:#fff; border-color:var(--brand-amber); }

/* ---- HERO PRODUCT PREVIEW: a real client-portal view (white-label = client's brand, never Managello amber) ---- */
.preview-card{ background:#fff; border:1px solid var(--brand-line); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(28,38,48,.04),0 18px 50px rgba(28,38,48,.10); }
.preview-header{ background:var(--portal-brand,#0E56A7); color:#fff; padding:13px 16px; display:flex; align-items:center; gap:10px; }
.preview-header-mark{ width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-weight:700; font-size:12px; flex-shrink:0; }
.preview-header-name{ font-weight:700; font-size:13.5px; line-height:1.15; color:#fff; }
.preview-header-sub{ font-size:10.5px; opacity:.85; line-height:1.15; }
.preview-header-client{ margin-left:auto; font-size:10.5px; opacity:.85; }
.preview-body{ padding:16px; background:var(--brand-surface); }
.preview-section-label{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.preview-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-amber); flex-shrink:0; animation:previewPulse 2.4s ease-in-out infinite; }
@keyframes previewPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,132,62,.5); } 50%{ box-shadow:0 0 0 5px rgba(201,132,62,0); } }
.preview-label-text{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:rgba(28,38,48,.55); }
.preview-blocker-list{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.preview-blocker{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--brand-line); border-radius:8px; padding:9px 11px; }
.preview-blocker-check{ width:14px; height:14px; border-radius:4px; border:1.5px solid rgba(201,132,62,.6); flex-shrink:0; }
.preview-blocker-text{ font-size:12.5px; color:var(--brand-ink); }
.preview-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.preview-panel{ background:#fff; border:1px solid var(--brand-line); border-radius:8px; padding:11px 12px; }
.preview-panel-label{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(28,38,48,.5); margin-bottom:8px; }
.preview-panel-row{ display:flex; gap:7px; align-items:center; margin-bottom:6px; }
.preview-panel-row:last-child{ margin-bottom:0; }
.preview-panel-arrow{ color:var(--portal-brand,#0E56A7); font-size:12px; }
.preview-panel-text{ font-size:11.5px; color:rgba(28,38,48,.82); }
.preview-file-swatch{ width:10px; height:12px; border-radius:2px; background:rgba(28,38,48,.14); flex-shrink:0; }
.preview-file-text{ font-size:11px; color:rgba(28,38,48,.72); }
.preview-approved{ display:flex; align-items:center; gap:9px; background:rgba(21,128,61,.08); border:1px solid rgba(21,128,61,.2); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.preview-approved-check{ width:18px; height:18px; border-radius:50%; background:#15803D; color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; }
.preview-approved-text{ font-size:12.5px; color:var(--brand-ink); font-weight:600; flex:1; }
.preview-approved-time{ font-size:10.5px; color:rgba(28,38,48,.5); white-space:nowrap; }
.preview-approval-row{ background:#fff; border:1px solid var(--brand-line); border-radius:8px; padding:12px 13px; display:flex; align-items:center; gap:11px; transition:background .3s ease, border-color .3s ease; }
.preview-approval-row.approved{ background:rgba(21,128,61,.08); border-color:rgba(21,128,61,.25); }
.preview-approval-title{ font-size:12.5px; font-weight:600; color:var(--brand-ink); margin-bottom:2px; }
.preview-approval-sub{ font-size:11px; color:rgba(28,38,48,.55); }
.preview-approval-pill{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--brand-amber); padding:4px 9px; border-radius:6px; white-space:nowrap; cursor:pointer; transition:background .3s ease; }
.preview-approval-pill.approved{ background:#15803D; cursor:default; }
.preview-billing-row{ display:flex; align-items:center; gap:7px; margin-top:8px; font-size:11px; color:rgba(28,38,48,.55); }
.preview-billing-paid{ color:#15803D; font-weight:700; }

@media (prefers-reduced-motion: reduce){
  .preview-dot{ animation:none; }
}

/* ---- PAIN SEQUENCE (interactive — walks 01→04 "in the order they bite") ---- */
.pain{ padding:64px 0 44px; border-top:1px solid var(--brand-line); }
.pain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px;}
.pain-item{ position:relative; border:1px solid var(--brand-line); border-radius:10px; padding:22px 20px; background:var(--brand-white); cursor:default; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.pain-item:hover{ border-color:var(--brand-amber); }
.pain-item.active{ border-color:var(--brand-amber); box-shadow:0 16px 36px -20px rgba(201,132,62,0.55); transform:translateY(-3px); }
.pain-num{ font-family:'Inter Tight'; font-weight:800; font-size:1.5rem; color:rgba(28,38,48,0.28); margin-bottom:12px; transition:color .25s ease;}
.pain-item.active .pain-num{ color:var(--brand-amber); }
.pain-item h3{ font-size:1.02rem; margin-bottom:6px;}
.pain-item p{ font-size:0.88rem; color:#5A6870;}
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; }
.section-head h2{ font-size:1.9rem; }
.section-head p{ color:#5A6870; font-size:0.95rem; max-width:440px;}

/* ---- BENTO ---- */
.bento{ padding:56px 0 72px; }
.bento-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin-top:36px; }
.tile{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:10px; padding:26px; display:flex; flex-direction:column;}
.tile-lg{ grid-column:span 4; grid-row:span 2; }
.tile-md{ grid-column:span 2; grid-row:span 2; }
.tile-sm{ grid-column:span 2; }
.tile-tag{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--brand-amber); font-weight:600; margin-bottom:10px;}
.tile h3{ font-size:1.15rem; margin-bottom:10px; }
.tile p{ font-size:0.88rem; color:#5A6870; margin-bottom:16px;}
.tile-link{ font-size:0.85rem; font-weight:600; color:var(--brand-navy); margin-top:auto; }

/* ---- Client Value Lens (rebuilt from the real "Value" / "Leaderboard" screens) ---- */
.value-stats-row{ display:flex; gap:24px; margin-bottom:16px; }
.value-stat{ display:flex; flex-direction:column; gap:2px; }
.vs-label{ font-size:0.72rem; color:#8A97A0; }
.vs-amount{ font-family:'Inter Tight'; font-weight:700; font-size:1.15rem; color:var(--brand-navy); }
.value-tabs{ display:flex; gap:6px; margin-bottom:14px; }
.value-tab{ background:var(--brand-surface); border:1px solid var(--brand-line); color:#5A6870; padding:6px 14px; border-radius:6px; font-size:0.8rem; font-weight:600; cursor:pointer; }
.value-tab.active{ background:var(--brand-navy); border-color:var(--brand-navy); color:#fff; }
.value-panel[hidden]{ display:none; }

.lb-row{ display:grid; grid-template-columns:26px 1fr 90px 60px 90px; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--brand-surface); font-size:0.82rem; }
.lb-row:last-child{ border-bottom:none; }
.lb-head{ color:#8A97A0; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--brand-line); padding-bottom:8px; }
.lb-rank{ color:#8A97A0; font-weight:600; text-align:center; }
.lb-client-cell{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lb-client-name{ color:var(--brand-navy); font-weight:600; }
.lb-bar-track{ background:var(--brand-surface); border-radius:4px; height:6px; overflow:hidden; }
.lb-bar{ height:100%; border-radius:4px; background:var(--lb-crimson); }
.lb-bar.top{ background:var(--brand-navy); }
.lb-rev{ color:#5A6870; text-align:right; }
.lb-bill{ color:#8A97A0; text-align:right; font-size:0.78rem; }
.lb-eff{ text-align:right; font-weight:700; color:var(--lb-crimson); }
.lb-eff.top{ color:var(--brand-navy); }
.lb-trophy{ text-align:center; }

.val-row{ display:grid; grid-template-columns:16px 1fr 90px 90px 90px; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--brand-surface); font-size:0.82rem; }
.val-row:last-child{ border-bottom:none; }
.val-chevron{ color:#8A97A0; }
.val-client{ display:flex; flex-direction:column; gap:2px; color:var(--brand-navy); font-weight:600; }
.val-client em{ font-style:normal; color:#8A97A0; font-weight:400; font-size:0.72rem; }
.val-usage-track{ background:var(--brand-surface); border-radius:4px; height:6px; overflow:hidden; }
.val-usage-fill{ height:100%; border-radius:4px; background:var(--brand-amber); }
.val-hours{ color:#8A97A0; font-size:0.75rem; text-align:right; }
.val-amount{ text-align:right; display:flex; flex-direction:column; color:var(--brand-navy); font-weight:600; }
.val-amount small{ color:#8A97A0; font-weight:400; font-size:0.7rem; }

/* Value Lens rows pack fixed numeric columns (revenue/billable/eff. rate) that
   together exceed a phone's content width, pushing the whole home page sideways.
   On narrow screens drop the least-critical column and tighten the rest so each
   row fits the viewport — the headline story (revenue + effective rate) stays. */
@media (max-width:640px){
  .lb-row{ grid-template-columns:15px minmax(0,1fr) 64px 62px; gap:7px; font-size:0.72rem; }
  .lb-row .lb-bill{ display:none; }
  .val-row{ grid-template-columns:14px minmax(0,1fr) 78px 78px; gap:8px; font-size:0.72rem; }
  .val-row .val-usage-track{ display:none; }
}

/* ---- Quote-to-cash flow (vertical animated spine) ---- */
.spine{ display:flex; flex-direction:column; flex:1; }
.spine-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:14px;
  align-items:start;
  cursor:pointer;
}
.spine-node-col{ display:flex; flex-direction:column; align-items:center; }
.spine-node{
  width:30px; height:30px; border-radius:50%;
  background:var(--brand-surface);
  border:2px solid var(--brand-line);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem;
  position:relative;
  z-index:1;
  transition:background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
/* ripple ring that pings outward on the active node */
.spine-node::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--brand-amber);
  opacity:0;
}
.spine-row.active .spine-node{
  background:var(--brand-navy);
  border-color:var(--brand-navy);
  transform:scale(1.15);
  box-shadow:0 0 0 6px rgba(37,50,61,0.10);
}
.spine-row.active .spine-node::after{
  animation:ping 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping{
  0%   { transform:scale(1);   opacity:0.55; }
  100% { transform:scale(1.9); opacity:0; }
}
/* connecting line between nodes, with a flowing highlight */
.spine-connector{
  width:2px;
  flex:1;
  min-height:34px;
  margin-top:2px;
  background:var(--brand-line);
  position:relative;
  overflow:hidden;
}
.spine-connector::after{
  content:'';
  position:absolute;
  top:-60%; left:0;
  width:100%; height:60%;
  background:linear-gradient(var(--brand-amber), transparent);
  animation:flow-down 1.8s linear infinite;
}
@keyframes flow-down{
  0%   { top:-60%; }
  100% { top:100%; }
}
.spine-content{ padding-top:2px; }
.spine-label{ font-weight:700; font-size:0.92rem; color:var(--brand-navy); transition:color .2s; }
.spine-row.active .spine-label{ color:var(--brand-amber); }
.spine-desc{ font-size:0.78rem; color:#5A6870; margin-top:2px; line-height:1.4; max-width:170px; }
.spine-metric{
  text-align:right;
  font-size:0.78rem;
  font-weight:700;
  color:var(--brand-navy);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s, transform .35s;
  white-space:nowrap;
}
.spine-row.active .spine-metric{ opacity:1; transform:translateY(0); }
.spine-metric small{ display:block; font-weight:400; color:#8A97A0; font-size:0.66rem; }
.spine-footer{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--brand-line);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.spine-footer-label{ font-size:0.75rem; color:#8A97A0; }
.spine-footer-amount{ font-family:'Inter Tight'; font-weight:800; font-size:1.3rem; color:var(--brand-navy); }
/* On narrow phones the metric's auto third column (longer labels like
   "branded & frozen when sent") widened the whole spine past the viewport.
   Drop to two columns and stack the metric under the step description. */
@media (max-width:520px){
  .spine-row{ grid-template-columns:30px 1fr; column-gap:12px; row-gap:2px; }
  .spine-node-col{ grid-row:1 / span 2; }
  .spine-content{ grid-column:2; }
  .spine-metric{ grid-column:2; text-align:left; }
  .spine-desc{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  .spine-node::after, .spine-connector::after{ animation:none; }
}

/* ---- Proofing (rebuilt from the real "Compare versions" screen) ---- */
.compare-mini-bar{ display:flex; align-items:center; gap:8px; font-size:0.75rem; font-weight:700; color:var(--brand-navy); margin-bottom:12px; flex-wrap:wrap; }
.compare-swap{ color:#8A97A0; }
.status-pill{ display:inline-block; font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:4px; }
.status-pill.rejected{ background:var(--pill-rejected-bg); color:#fff; }
.status-pill.submitted{ background:var(--pill-submitted-bg); color:var(--pill-submitted-text); }
.proof-mock{ display:flex; gap:8px; margin-bottom:10px;}
.proof-pane{ flex:1; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:6px; height:70px; position:relative;}
.pin{ position:absolute; width:18px; height:18px; border-radius:50%; background:var(--brand-ink); color:#fff; font-size:0.65rem; display:flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer; box-shadow:0 0 0 0 rgba(37,50,61,0); transition:box-shadow 0.2s;}
.pin.pin-active{ box-shadow:0 0 0 4px rgba(201,132,62,0.35); background:var(--brand-amber); }
.pin-comment-bubble{ background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:6px; padding:8px 10px; font-size:0.76rem; color:var(--brand-navy); margin-bottom:12px; }
.pin-comment-bubble[hidden]{ display:none; }

/* ---- Proofing mock (elaborate, product-real) ---- */
.proof{ font-size:0.85rem; }
.proof-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--brand-line); margin-bottom:14px; flex-wrap:wrap; }
.proof-file{ display:flex; align-items:center; gap:7px; font-weight:600; color:var(--brand-navy); }
.proof-vers{ display:flex; align-items:center; gap:8px; font-size:0.76rem; font-weight:700; color:var(--brand-navy); }
.proof-ver.muted{ opacity:.65; }
.proof-swap{ color:#8A97A0; }
.proof-canvas{ position:relative; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:10px; padding:14px; margin-bottom:14px; }
.proof-doc{ position:relative; background:#fff; border:1px solid var(--brand-line); border-radius:8px; height:184px; padding:14px; overflow:hidden; }
.pd-hero{ height:48px; border-radius:6px; background:linear-gradient(120deg,#D9E0E8,#EEF1F4); margin-bottom:10px; }
.pd-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.pd-col{ height:42px; border-radius:6px; background:var(--brand-surface); border:1px solid var(--brand-line); }
.pd-lines{ display:flex; flex-direction:column; gap:7px; }
.pd-lines span{ height:7px; border-radius:4px; background:var(--brand-surface); }
.pd-lines span:nth-child(1){ width:92%; }
.pd-lines span:nth-child(2){ width:80%; }
.pd-lines span:nth-child(3){ width:62%; }
.proof-doc .pin{ z-index:2; }
.proof-thread{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.proof-comment{ display:flex; gap:10px; padding:10px 12px; border:1px solid var(--brand-line); border-radius:9px; background:#fff; cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.proof-comment:hover{ border-color:#C9D0D6; }
.proof-comment.active{ border-color:var(--brand-amber); box-shadow:0 0 0 3px rgba(201,132,62,.15); }
.pc-num{ width:20px; height:20px; border-radius:50%; background:var(--brand-ink); color:#fff; font-size:0.66rem; font-weight:700; display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.proof-comment.resolved .pc-num{ background:#2E8B57; }
.pc-body{ flex:1; min-width:0; }
.pc-meta{ display:flex; align-items:center; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.pc-avatar{ width:20px; height:20px; border-radius:50%; background:var(--brand-navy); color:#fff; font-size:0.58rem; font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.pc-avatar.client{ background:#0E56A7; }
.pc-name{ font-weight:600; color:var(--brand-navy); font-size:0.8rem; }
.pc-time{ color:#8A97A0; font-size:0.72rem; }
.pc-badge{ margin-left:auto; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:20px; }
.pc-badge.open{ background:rgba(201,132,62,.14); color:var(--brand-amber); }
.pc-badge.resolved{ background:rgba(46,139,87,.12); color:#2E8B57; }
.pc-text{ font-size:0.8rem; color:#4B5A64; line-height:1.45; }
.proof-actions{ display:flex; gap:8px; }
.proof-btn{ flex:1; padding:9px 12px; border-radius:8px; font-weight:600; font-size:0.82rem; cursor:pointer; border:1px solid var(--brand-line); transition:background .2s, border-color .2s; }
.proof-btn.ghost{ background:#fff; color:var(--brand-navy); }
.proof-btn.ghost:hover{ border-color:var(--brand-navy); }
.proof-btn.primary{ background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); }
.proof-btn.primary:hover{ background:#1b2730; }

/* ---- Self-hosted (small live status readout) ---- */
.uptime-row{ display:flex; align-items:center; gap:8px; font-size:0.76rem; color:#5A6870; margin-bottom:14px; }
.uptime-dot{ width:8px; height:8px; border-radius:50%; background:#2E8B57; box-shadow:0 0 0 3px rgba(46,139,87,0.18); flex-shrink:0; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }

/* ---- COMPARISON ---- */
.compare{ padding:56px 0; background:var(--brand-white); border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line);}
.compare-bars{ margin-top:36px; display:flex; flex-direction:column; gap:16px; max-width:720px;}
.cbar-row{ display:flex; align-items:center; gap:16px; font-size:0.88rem;}
.cbar-label{ width:170px; font-weight:600; color:var(--brand-navy); flex-shrink:0;}
.cbar-track{ flex:1; background:var(--brand-surface); border-radius:5px; height:26px; position:relative;}
.cbar-fill{ height:100%; border-radius:5px; display:flex; align-items:center; padding-left:10px; color:#fff; font-size:0.78rem; font-weight:600;}
.cbar-fill.navy{ background:var(--brand-navy); }
.cbar-fill.amber{ background:var(--brand-amber); }

/* ---- PRICING ---- */
/* ============================================================
   PRICING v2 — purchase-confidence page (calm, Agency-anchored)
   ============================================================ */

/* 1 · hero */
.pricing-hero{ padding:80px 0 36px; text-align:center; }
.pricing-hero .eyebrow{ margin-bottom:18px; }
.pricing-hero h1{ font-size:clamp(2.2rem,4vw,3rem); font-weight:800; line-height:1.06; max-width:17ch; margin:0 auto; }
.hero-punch{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:clamp(1.05rem,1.7vw,1.32rem); color:var(--brand-amber); max-width:34ch; margin:18px auto 0; line-height:1.3; }
.pricing-hero .hero-sub{ max-width:680px; margin:16px auto 0; }

/* trust strip — sits under the plan cards, reinforcing what the price buys */
.trust-strip{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px auto 0; padding:0; max-width:760px; }
.trust-strip li{ display:inline-flex; align-items:center; gap:7px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:24px; padding:8px 15px; font-size:0.83rem; font-weight:600; color:var(--brand-navy); }
.trust-strip li::before{ content:'✓'; color:var(--brand-amber); font-weight:700; }

/* 2 · billing-period toggle — annual is the default state on load */
.billing-toggle{ display:inline-flex; margin:0 auto 26px; padding:4px; gap:4px; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:999px; }
.decision .wrap{ text-align:center; }
.billing-toggle-opt{ display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; background:transparent; font-family:'Inter Tight',sans-serif; font-size:0.92rem; font-weight:700; color:#5A6870; padding:10px 20px; border-radius:999px; transition:background .18s ease, color .18s ease; }
.billing-toggle-opt:hover{ color:var(--brand-navy); }
.billing-toggle-opt.is-on{ background:var(--brand-navy); color:#fff; }
.billing-toggle-save{ font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--brand-amber); padding:3px 7px; border-radius:5px; }

/* 3 · main decision — Agency anchor + Agency Hosted, side by side */
.decision{ padding:32px 0 8px; }
.plans-grid{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; text-align:left; }
.plan-card{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:22px; padding:44px 36px 38px; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 40px 80px -46px rgba(30,45,58,.4); }
/* Anchor card carries a warm tint as well as the amber border, so the default
   choice reads as the default before any text is parsed. */
.plan-card.is-anchor{ border:2px solid var(--brand-amber); background:linear-gradient(180deg,#FFFCF8 0%,var(--brand-white) 62%); box-shadow:0 50px 90px -46px rgba(201,132,62,.5); }
.plan-card.is-anchor:hover{ box-shadow:0 54px 100px -44px rgba(201,132,62,.62), 0 0 0 1px rgba(201,132,62,.25); }
/* Agency Hosted: a touch more presence than a plain card — a cool-tinted border,
   faint surface wash and soft lift — but deliberately quieter than the amber
   anchor, so the recommended plan still wins the eye. */
.plan-card.is-hosted{ border:1.5px solid rgba(28,38,48,.20); background:linear-gradient(180deg,var(--brand-surface) 0%,var(--brand-white) 55%); box-shadow:0 30px 64px -50px rgba(28,38,48,.42); }
.plan-card.is-hosted:hover{ box-shadow:0 40px 78px -48px rgba(28,38,48,.5); }
.plan-card-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--brand-amber); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:.03em; padding:5px 14px; border-radius:20px; white-space:nowrap; }
.plan-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.plan-card-name{ font-family:'Inter Tight',sans-serif; font-size:1.7rem; font-weight:800; color:var(--brand-navy); line-height:1; margin-bottom:8px; }
.plan-card-sub{ font-size:0.92rem; color:#5A6870; line-height:1.55; max-width:30ch; }
.plan-card-price{ font-family:'Inter Tight',sans-serif; font-size:2.7rem; font-weight:800; color:var(--brand-navy); line-height:1; white-space:nowrap; }
.plan-card-per{ font-size:0.95rem; font-weight:500; color:#5A6870; }
.plan-card-star{ font-size:1.3rem; font-weight:700; color:var(--brand-amber); vertical-align:super; line-height:0; }
.plan-card-value{ border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line); padding:20px 0; margin-bottom:24px; }
.plan-card-value-lead{ font-family:'Inter Tight',sans-serif; font-size:1.18rem; font-weight:800; line-height:1.3; color:var(--brand-navy); letter-spacing:-.01em; }
.plan-card-value-sub{ font-size:0.96rem; color:var(--brand-amber); font-weight:600; margin-top:6px; }
.plan-card-cta{ width:100%; margin-bottom:26px; font-size:1rem; padding:14px; }
.plan-card-trialnote{ font-size:0.78rem; line-height:1.5; color:#8A97A0; text-align:center; margin:10px 0 0; }
.plan-card-feats{ list-style:none; display:grid; grid-template-columns:1fr; gap:11px; margin-bottom:24px; }
.plan-card-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:#3B4A54; line-height:1.45; }
.plan-card-feats li::before{ content:'✓'; color:var(--brand-amber); font-weight:700; flex-shrink:0; }
.plan-card-note{ font-size:0.76rem; color:#8A97A0; line-height:1.5; border-top:1px solid var(--brand-line); padding-top:18px; margin-top:auto; }
.plans-foot{ max-width:1000px; margin:22px auto 0; font-size:0.85rem; color:#5A6870; line-height:1.6; text-align:center; }

/* 3b · choosing a VPS — third-party host comparison (public pricing, not resold) */
.vps-section{ padding:72px 0 8px; }
.vps-sub{ font-size:0.95rem; color:#5A6870; line-height:1.6; max-width:70ch; }
.vps-note{ font-size:0.8rem; color:#8A97A0; line-height:1.6; margin-top:14px; max-width:80ch; }

/* replaces → one install (minimal reinforcement under Agency card) */
.replaces{ max-width:720px; margin:26px auto 0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; }
.replaces-label{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:.06em; text-transform:uppercase; color:#8A97A0; }
.replaces-items{ display:inline-flex; flex-wrap:wrap; gap:8px 10px; }
.replaces-items span{ font-size:0.9rem; color:#5A6870; }
.replaces-items span:not(:last-child)::after{ content:'·'; margin-left:10px; color:var(--brand-line); }
.replaces-arrow{ color:var(--brand-amber); font-weight:700; }
.replaces-one{ font-family:'Inter Tight',sans-serif; font-weight:800; color:var(--brand-navy); }

/* 4 · why this price is low */
.why-low{ padding:80px 0; background:var(--brand-surface); border-top:1px solid var(--brand-line); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:26px 24px; }
.why-card-ic{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; font-weight:700; color:var(--brand-amber); margin-bottom:14px; }
.why-card h3{ font-family:'Inter Tight',sans-serif; font-size:1.08rem; margin-bottom:8px; color:var(--brand-navy); }
.why-card p{ font-size:0.9rem; color:#5A6870; line-height:1.55; }

/* 5 · what you get — elegant grouped cards (vertical lists, room to breathe) */
.getgroups{ padding:80px 0; }
/* capability chips — the "how complete is this?" answer, scannable in one pass */
.get-lead{ font-size:1rem; color:#5A6870; margin-top:10px; max-width:60ch; }
.cap-grid{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:30px 0 8px; padding:0; }
.cap-chip{ display:flex; align-items:center; gap:9px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:10px; padding:12px 14px; font-size:0.9rem; font-weight:600; color:var(--brand-navy); transition:border-color .22s ease, transform .22s ease; }
.cap-chip:hover{ border-color:rgba(201,132,62,.4); transform:translateY(-2px); }
.cap-chip::before{ content:'✓'; color:var(--brand-amber); font-weight:800; flex-shrink:0; }
.getgroups-sub{ margin-top:44px; }
.getgroups-sub-h{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.25rem; color:var(--brand-navy); }
.get-group-ic{ display:block; font-size:1.5rem; line-height:1; margin-bottom:12px; }
@media (max-width:900px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cap-grid{ grid-template-columns:1fr; } }
.get-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch; }
.get-group{ display:flex; flex-direction:column; height:100%; border:1px solid var(--brand-line); border-radius:16px; padding:32px 30px; background:var(--brand-white); transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.get-group:hover{ border-color:rgba(201,132,62,.35); box-shadow:0 24px 48px -30px rgba(28,38,48,.28); transform:translateY(-3px); }
.get-group h3{ font-family:'Inter Tight',sans-serif; font-size:1.1rem; color:var(--brand-navy); padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--brand-line); }
.get-items{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.get-items li{ font-size:0.95rem; color:#4B5A64; line-height:1.4; }
/* pricing "What's included": 2×2 wider cards on desktop (was 4 thin columns).
   Scoped to .getgroups so it never touches the features .oc-grid variant. */
@media(min-width:901px){
  .getgroups .get-grid{ grid-template-columns:repeat(2,1fr); max-width:920px; margin-left:auto; margin-right:auto; gap:24px 26px; }
}

/* 5b · product showcase — featured viewer */
.showcase{ padding:12px 0 80px; }
.showcase-head{ text-align:center; margin-bottom:34px; }
.showcase-head h2{ font-size:clamp(1.6rem,2.5vw,2.1rem); line-height:1.1; }
.showcase-head p{ font-size:1rem; color:#5A6870; margin-top:10px; }
.showcase-viewer{ max-width:1000px; margin:0 auto; }
.showcase-stage{ position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; border:1px solid var(--brand-line); background:var(--brand-surface); box-shadow:0 44px 90px -44px rgba(37,50,61,.44); cursor:zoom-in; }
.showcase-stage-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.showcase-zoom{ position:absolute; bottom:14px; right:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600; color:#fff; background:rgba(28,38,48,.72); backdrop-filter:blur(4px); padding:7px 12px; border-radius:20px; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.showcase-stage:hover .showcase-zoom{ opacity:1; }
.showcase-meta{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.showcase-caption{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.1rem; color:var(--brand-navy); text-align:center; min-width:0; }
.showcase-nav{ flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--brand-line); background:var(--brand-white); color:var(--brand-navy); font-size:1.3rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.showcase-nav:hover{ border-color:var(--brand-amber); color:var(--brand-amber); }
.showcase-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
.showcase-thumb{ position:relative; border:2px solid var(--brand-line); background:var(--brand-white); border-radius:11px; overflow:hidden; padding:0; cursor:pointer; aspect-ratio:16/10; transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.showcase-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; opacity:.72; transition:opacity .22s ease; }
.showcase-thumb:hover{ border-color:rgba(201,132,62,.55); transform:translateY(-3px); box-shadow:0 20px 38px -16px rgba(28,38,48,.46); }
.showcase-thumb:hover img{ opacity:1; }
/* Keyboard parity: the rail was mouse-only before — a tabbing visitor got the
   browser default outline over a dark thumbnail and could barely see it. */
.showcase-thumb:focus-visible{ outline:none; border-color:var(--brand-amber); box-shadow:0 0 0 3px rgba(201,132,62,.32), 0 20px 38px -16px rgba(28,38,48,.46); }
.showcase-thumb:focus-visible img{ opacity:1; }
.showcase-thumb.active{ border-color:var(--brand-amber); box-shadow:0 16px 34px -18px rgba(201,132,62,.5); }
.showcase-thumb.active img{ opacity:1; }
.showcase-thumb-label{ position:absolute; left:0; right:0; bottom:0; font-size:0.72rem; font-weight:600; color:#fff; text-align:center; padding:12px 6px 6px; background:linear-gradient(to top, rgba(28,38,48,.78), rgba(28,38,48,0)); }

/* lightbox */
.showcase-lightbox{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:4vh 4vw; background:rgba(15,22,28,.82); backdrop-filter:blur(6px); cursor:zoom-out; }
.showcase-lightbox img{ max-width:min(1400px,94vw); max-height:84vh; width:auto; height:auto; border-radius:12px; box-shadow:0 40px 100px -30px rgba(0,0,0,.7); cursor:default; }
.showcase-lightbox-cap{ font-size:0.95rem; font-weight:600; color:rgba(255,255,255,.86); text-align:center; }
.showcase-lightbox-close{ position:absolute; top:22px; right:26px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:1rem; cursor:pointer; display:grid; place-items:center; transition:background .2s ease; }
.showcase-lightbox-close:hover{ background:rgba(255,255,255,.2); }

/* 6 · cost comparison — calm ladder */
.still{ padding:80px 0; background:var(--brand-surface); border-top:1px solid var(--brand-line); text-align:center; }
.still .section-head-left{ margin-bottom:8px; }
.still-rows{ max-width:440px; margin:26px auto 0; text-align:left; }
.still-row{ display:flex; align-items:baseline; justify-content:space-between; padding:15px 6px; border-bottom:1px solid var(--brand-line); }
.still-row .q{ font-size:1.05rem; color:#5A6870; }
.still-row .a{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.05rem; color:var(--brand-navy); }
.still-sub{ max-width:560px; margin:26px auto 0; font-size:0.98rem; line-height:1.6; color:#5A6870; }
/* versus — the page's loudest moment. Two figures, one enormous gap. */
.versus{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(14px,3vw,40px); max-width:820px; margin:38px auto 0; }
.versus-side{ text-align:center; min-width:0; }
.versus-label{ font-size:0.7rem; letter-spacing:.06em; text-transform:uppercase; color:#8A97A0; margin-bottom:10px; }
.versus-fig{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(2.4rem,6.5vw,4.4rem); line-height:1; letter-spacing:-.02em; }
.versus-fig.flat{ color:#15803D; }
.versus-fig.seat{ color:var(--brand-amber); }
.versus-per{ font-size:0.34em; font-weight:700; letter-spacing:0; margin-left:2px; }
.versus-note{ font-size:0.84rem; color:#5A6870; margin-top:10px; }
.versus-x{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.9rem; color:#8A97A0; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:999px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.versus-delta{ text-align:center; font-size:clamp(1rem,1.8vw,1.2rem); color:var(--brand-navy); margin-top:28px; }
.versus-delta strong{ font-weight:800; color:#15803D; }
.versus-assume{ text-align:center; font-size:0.74rem; color:#8A97A0; margin-top:12px; max-width:60ch; margin-left:auto; margin-right:auto; line-height:1.5; }
@media (max-width:640px){
  .versus{ grid-template-columns:1fr; gap:18px; }
  .versus-x{ margin:0 auto; }
}

/* 7 · who it is for */
.fit{ padding:80px 0; }
/* ownership pillars — memorable icons above the honest fit/not-fit columns.
   Namespaced .pillar-* deliberately: .own-* is why-self-hosted's "What you own"
   grid, and reusing it let that page's later rules override these. */
.pillar-grid{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 34px; padding:0; align-items:stretch; }
.pillar-card{ display:flex; flex-direction:column; gap:6px; height:100%; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:22px 18px; transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.pillar-card:hover{ border-color:rgba(201,132,62,.35); box-shadow:0 20px 40px -28px rgba(28,38,48,.28); transform:translateY(-3px); }
.pillar-ic{ font-size:1.6rem; line-height:1; }
.pillar-t{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.98rem; color:var(--brand-navy); }
.pillar-d{ font-size:0.84rem; color:#5A6870; line-height:1.45; }

@media (max-width:700px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .pillar-grid{ grid-template-columns:1fr; } }
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.fit-col{ border:1px solid var(--brand-line); border-radius:14px; padding:28px 30px; background:var(--brand-white); }
.fit-col.good{ border-left:3px solid #15803D; }
.fit-col.not{ border-left:3px solid var(--brand-line); }
.fit-col-label{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem; color:var(--brand-navy); margin-bottom:16px; }
.fit-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.fit-col li{ display:flex; align-items:flex-start; gap:10px; font-size:0.94rem; color:#4B5A64; line-height:1.45; }
.fit-col.good li::before{ content:'✓'; color:#15803D; font-weight:700; flex-shrink:0; }
.fit-col.not li::before{ content:'✕'; color:#B0B8BE; font-weight:700; flex-shrink:0; }

/* 8 · add-ons — simple rows */
.addons-band{ padding:96px 0; background:var(--brand-surface); border-top:1px solid var(--brand-line); }
.addons-sub{ font-size:1rem; color:#5A6870; margin-top:8px; }
/* grouped add-ons — three small decisions instead of one long table */
.addon-groups{ max-width:760px; display:flex; flex-direction:column; gap:34px; }
.addon-group-head{ font-size:0.7rem; letter-spacing:.07em; text-transform:uppercase; color:#8A97A0; margin-bottom:4px; }
.addon-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--brand-line); }
.addon-name{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.02rem; color:var(--brand-navy); }
.addon-desc{ font-size:0.88rem; color:#5A6870; margin-top:3px; }
.addon-price{ font-size:0.85rem; color:var(--brand-amber); font-weight:600; white-space:nowrap; }

/* generic callout (bug-free promise) */
.callout{ border:1px solid var(--brand-line); border-left:3px solid var(--brand-amber); border-radius:12px; padding:24px 28px; background:var(--brand-white); max-width:820px; box-shadow:0 18px 44px -30px rgba(28,38,48,.22); }
.callout.subtle{ border-left-color:var(--brand-line); box-shadow:none; }
.callout-title{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.15rem; color:var(--brand-navy); margin-bottom:10px; }
.callout-body{ font-size:0.98rem; line-height:1.6; color:#4B5A64; margin-bottom:10px; }
.callout-body strong{ color:var(--brand-navy); }
.callout-note{ font-size:0.8rem; color:#8A97A0; line-height:1.5; margin-bottom:4px; }

/* section head, left aligned */
.section-head-left{ margin-bottom:28px; }
.section-head-left h2{ font-size:clamp(1.6rem,2.5vw,2.1rem); line-height:1.1; }

/* FAQ — native collapsible */
.faq-section{ padding:96px 0; }
.faq{ max-width:820px; }
/* FAQ long tail — collapsed so the section reads as 8 questions, not 19 */
.faq-toggle{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:11px 20px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:24px; font-family:inherit; font-size:0.9rem; font-weight:600; color:var(--brand-navy); cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.faq-toggle:hover{ border-color:var(--brand-amber); color:var(--brand-amber); }
.faq-toggle-caret{ transition:transform .25s ease; font-size:0.8rem; }
.faq-toggle-caret.is-open{ transform:rotate(180deg); }
.faq-item{ border-bottom:1px solid var(--brand-line); }
.faq-item:first-child{ border-top:1px solid var(--brand-line); }
.faq-q{ list-style:none; cursor:pointer; padding:20px 4px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem; color:var(--brand-navy); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{ content:'+'; font-family:'Inter',sans-serif; font-weight:400; font-size:1.5rem; color:var(--brand-amber); line-height:1; flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] .faq-q::after{ content:'–'; }
.faq-a{ padding:0 4px 22px; }
.faq-a p{ font-size:0.98rem; line-height:1.65; color:#4B5A64; max-width:70ch; }

/* ---- BUILT FOR AGENCIES ---- */
.agencies{ padding:64px 0; background:var(--brand-surface); border-top:1px solid var(--brand-line); }
.agencies-sub{ font-size:1rem; line-height:1.6; color:#5A6870; margin:12px 0 34px; max-width:680px; }
.agency-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.agency-card{ border:1px solid var(--brand-line); border-radius:12px; padding:22px 20px; background:var(--brand-white); display:flex; gap:10px; align-items:flex-start; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.agency-card:hover{ border-color:var(--brand-amber); box-shadow:0 16px 34px -22px rgba(201,132,62,0.5); transform:translateY(-2px); }
.agency-check{ color:var(--brand-amber); font-weight:700; font-size:13px; flex-shrink:0; margin-top:2px; }
.agency-card-title{ font-weight:700; font-size:0.97rem; margin-bottom:6px; color:var(--brand-navy); font-family:'Inter Tight',sans-serif; }
.agency-card-desc{ font-size:0.84rem; line-height:1.5; color:#5A6870; }

/* ---- WHITE-LABEL (make it yours) — the signature interactive widget ---- */
.yours{ background:var(--brand-white); border-top:1px solid var(--brand-line); padding:64px 0; }
.yours-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:8px; }
.yours h2{ font-size:1.9rem; margin:6px 0 16px; line-height:1.1; }
.yours-lead{ font-size:1rem; line-height:1.6; color:#4B5A64; margin:0 0 24px; max-width:520px; }
.proof-list{ display:flex; flex-direction:column; gap:12px; }
.proof-card{ display:flex; gap:12px; align-items:flex-start; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:10px; padding:16px 18px; }
.proof-card-title{ font-weight:700; font-size:0.95rem; margin-bottom:3px; color:var(--brand-navy); }
.proof-card-desc{ font-size:0.85rem; line-height:1.5; color:#5A6870; }

.wl-widget{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(28,38,48,.04),0 12px 40px rgba(28,38,48,.08); }
.wl-controls{ padding:16px 18px; border-bottom:1px solid var(--brand-line); background:var(--brand-surface); }
.wl-controls-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(28,38,48,.55); margin-bottom:12px; }
.wl-logoname-row{ display:flex; gap:12px; margin-bottom:14px; }
.wl-field-label{ font-size:11px; font-weight:600; color:var(--brand-ink); margin-bottom:6px; }
.wl-logo-box{ width:58px; height:44px; border-radius:8px; border:1px dashed var(--brand-line); background:var(--brand-white); display:grid; place-items:center; overflow:hidden; flex-shrink:0; }
.wl-logo-box span{ font-weight:800; font-size:13px; letter-spacing:-.02em; transition:color .35s ease; }
.wl-name-col{ flex:1; min-width:0; }
.wl-name-input{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px; border:1px solid var(--brand-line); background:var(--brand-white); color:var(--brand-ink); font-size:14px; font-family:'Inter',sans-serif; outline:none; }
.wl-name-input:focus{ border-color:var(--brand-amber); }
.wl-presets{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.wl-preset-btn{ border:1px solid var(--brand-line); background:var(--brand-white); border-radius:6px; padding:3px 8px; font-size:11px; cursor:pointer; color:rgba(28,38,48,.7); display:flex; align-items:center; gap:5px; }
.wl-preset-btn:hover{ border-color:var(--brand-amber); }
.wl-preset-swatch{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.wl-color-row{ display:flex; gap:12px; margin-bottom:10px; }
.wl-color-field{ flex:1; min-width:0; }
.wl-color-box{ display:flex; align-items:center; gap:8px; border:1px solid var(--brand-line); border-radius:8px; padding:5px 8px; background:var(--brand-white); }
.wl-color-swatch-label{ width:22px; height:22px; border-radius:6px; position:relative; cursor:pointer; flex-shrink:0; border:1px solid rgba(28,38,48,.1); }
.wl-color-swatch-label input[type="color"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; padding:0; }
.wl-color-hex{ font-size:12px; color:rgba(28,38,48,.7); }
.wl-contrast-row{ display:flex; align-items:center; gap:7px; font-size:12px; }
.wl-contrast-row.pass{ color:#15803D; }
.wl-contrast-row.fail{ color:#B45309; }
.wl-preview-toggle{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 0; background:var(--brand-white); }
.wl-preview-toggle-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(28,38,48,.45); }
.wl-toggle-group{ display:inline-flex; border:1px solid var(--brand-line); border-radius:7px; overflow:hidden; }
.wl-toggle-btn{ border:none; background:transparent; color:rgba(28,38,48,.6); font-size:11.5px; font-weight:600; padding:5px 12px; cursor:pointer; font-family:'Inter',sans-serif; }
.wl-toggle-btn.active{ background:var(--brand-navy); color:#fff; }
.wl-preview-body{ padding:14px; background:var(--brand-white); }
.wl-preview-frame{ border-radius:10px; border:1px solid var(--brand-line); overflow:hidden; }
.wl-preview-header{ padding:12px 14px; display:flex; align-items:center; gap:10px; transition:background .35s ease,color .35s ease; }
.wl-preview-header-mark{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-weight:700; font-size:12px; }
.wl-preview-header-name{ font-weight:700; font-size:13px; line-height:1.1; }
.wl-preview-header-sub{ font-size:10px; opacity:.85; line-height:1.1; }
.wl-preview-header-client{ margin-left:auto; font-size:10px; opacity:.8; }
.wl-signin-panel{ padding:16px; background:var(--brand-surface); text-align:center; }
.wl-signin-title{ font-weight:700; font-size:16px; color:var(--brand-ink); margin-bottom:3px; }
.wl-signin-sub{ font-size:11.5px; color:rgba(28,38,48,.6); margin-bottom:11px; }
.wl-fake-field{ height:28px; border-radius:7px; border:1px solid var(--brand-line); background:var(--brand-white); margin-bottom:7px; }
.wl-signin-btn{ width:100%; padding:10px 12px; border-radius:7px; border:none; font-weight:600; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .35s ease,color .35s ease; }
.wl-dash-panel{ padding:12px; background:var(--brand-surface); }
.wl-dash-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.wl-dash-pill{ font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:5px; transition:background .35s ease,color .35s ease; }
.wl-dash-request-meta{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.wl-dash-open{ font-size:11px; color:rgba(28,38,48,.5); }
.wl-dash-request-title{ font-size:13px; font-weight:600; color:var(--brand-ink); }
.wl-dash-progress-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--brand-ink); margin-bottom:7px; }
.wl-dash-progress-track{ height:6px; border-radius:4px; background:var(--brand-line); overflow:hidden; }
.wl-dash-progress-fill{ width:68%; height:100%; transition:background .35s ease; }
.wl-dash-approve-btn{ width:100%; padding:9px 12px; border-radius:8px; border:none; font-weight:600; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .35s ease,color .35s ease; }
.wl-email-row{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 10px; border:1px solid var(--brand-line); border-radius:8px; background:var(--brand-surface); }
.wl-email-swatch{ width:18px; height:18px; border-radius:4px; flex-shrink:0; transition:background .35s ease; }
.wl-email-text{ font-size:11.5px; color:rgba(28,38,48,.7); }
.wl-email-text strong{ color:var(--brand-ink); }

/* ---- SELF-HOSTED TRUST ---- */
.trust{ background:var(--brand-surface); border-top:1px solid var(--brand-line); padding:64px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px; }
.trust-card{ border:1px solid var(--brand-line); border-radius:12px; padding:24px 20px; background:var(--brand-white); transition:border-color .25s, box-shadow .25s, transform .25s; }
.trust-card:hover{ border-color:var(--brand-amber); box-shadow:0 16px 34px -22px rgba(201,132,62,.5); transform:translateY(-2px); }
.trust-icon{ width:40px; height:40px; border-radius:10px; background:var(--brand-surface); border:1px solid var(--brand-line); display:grid; place-items:center; margin-bottom:14px; font-size:20px; }
.trust-title{ font-weight:700; font-size:0.97rem; margin-bottom:8px; line-height:1.25; color:var(--brand-navy); font-family:'Inter Tight',sans-serif; }
.trust-body{ font-size:0.84rem; line-height:1.55; color:#5A6870; }

/* ---- WEBGRITY CREDIBILITY ---- */
.credibility{ background:var(--brand-navy); padding:64px 0; }
.credibility h2{ color:#fff; font-size:1.9rem; margin:0 0 14px; max-width:680px; }
.credibility-lead{ font-size:1rem; line-height:1.6; color:rgba(255,255,255,.74); margin:0 0 40px; max-width:680px; }
.credibility-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.credibility-stat{ border-left:2px solid rgba(201,132,62,.7); padding-left:18px; }
.credibility-big{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.9rem; letter-spacing:-.02em; color:#fff; margin-bottom:6px; }
.credibility-small{ font-size:0.85rem; line-height:1.45; color:rgba(255,255,255,.66); }

/* ---- BUG-FREE PROMISE ---- */
.bugfree{ background:var(--brand-surface); border-top:1px solid var(--brand-line); padding:56px 0; }
.bugfree-card{ display:flex; gap:20px; align-items:flex-start; border:1px solid var(--brand-line); border-left:4px solid var(--brand-amber); border-radius:12px; background:var(--brand-white); padding:30px 32px; box-shadow:0 1px 2px rgba(28,38,48,.03),0 14px 40px rgba(28,38,48,.06); }
.bugfree-icon{ width:46px; height:46px; border-radius:11px; flex-shrink:0; background:rgba(201,132,62,.12); display:grid; place-items:center; }
.bugfree-title{ font-weight:700; font-size:1.3rem; margin-bottom:10px; color:var(--brand-navy); }
.bugfree-body{ margin:0 0 12px; font-size:0.97rem; line-height:1.6; color:var(--brand-ink); }
.bugfree-body abbr{ text-decoration:none; border-bottom:1.5px dotted var(--brand-amber); cursor:help; }
.bugfree-note{ margin:0; font-size:0.8rem; color:rgba(28,38,48,.6); }
.bugfree-twocol{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bugfree-mini{ display:flex; gap:13px; align-items:flex-start; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:10px; padding:18px 20px; }
.bugfree-mini-icon{ width:34px; height:34px; border-radius:9px; background:var(--brand-surface); border:1px solid var(--brand-line); display:grid; place-items:center; flex-shrink:0; font-size:16px; }
.bugfree-mini-title{ font-weight:700; font-size:0.9rem; margin-bottom:5px; color:var(--brand-navy); }
.bugfree-mini-body{ margin:0; font-size:0.82rem; line-height:1.55; color:#5A6870; }

/* Switch Safely card (reuses .bugfree-card on comparison pages) */
.switch-safely{ margin-top:26px; }
.switch-safely .bugfree-note a{ color:var(--brand-amber); font-weight:600; }

/* ---- SCROLL REVEAL (staggered section entry) ---- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ============================================================
   HOMEPAGE v2 — trailer layout: clear hierarchy, room to breathe.
   One idea per section, generous spacing, one focal visual each.
   ============================================================ */

/* shared top-of-page background zone (hero + aha animation feel like one unit) */
.hero-zone{ position:relative; background:
    radial-gradient(1000px 460px at 50% -90px, rgba(201,132,62,0.09), transparent 66%),
    linear-gradient(180deg, #F3F5F9 0%, #F8FAFC 46%, #FFFFFF 84%); }
.hero-zone::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(37,50,61,0.05) 1px, transparent 1px);
    background-size:24px 24px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 66%);
    mask-image:linear-gradient(180deg,#000 0%, transparent 66%); }
.hero-zone > section{ position:relative; z-index:1; }

/* centered hero */
.hero-v2{ background:transparent; padding:104px 0 36px; text-align:center; }
.hero-v2 .eyebrow{ margin-bottom:22px; }
.hero-v2 h1{ font-size:clamp(2.5rem,5vw,3.7rem); font-weight:800; line-height:1.05; max-width:16ch; margin:0 auto 24px; }
.hero-v2 .hero-sub{ font-size:1.18rem; color:#4B5A64; max-width:640px; margin:0 auto 34px; }
.hero-v2 .cta-row{ justify-content:center; }
.hero-v2 .install-block{ margin:24px auto 0; }
.hero-v2 .hero-help{ text-align:center; }

/* hero "what you get" chip row — instant product legibility under the CTA */
.hero-chips{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin:26px auto 0; max-width:720px; }
.hero-chips li{ font-size:0.82rem; font-weight:600; color:var(--brand-navy); background:var(--brand-white); border:1px solid var(--brand-line); border-radius:20px; padding:6px 14px; }
.hero-chips li:last-child{ border-color:rgba(201,132,62,.4); color:var(--brand-amber); }

/* ===== SIGNATURE ANIMATION: tool chaos → total clarity (two-panel) =====
   Dense TODAY panel (tool grid + tangle + red flags) → arrow → WITH MANAGELLO
   dashboard that activates on scroll. Reduced-motion shows the final state. */
.tc{ background:transparent; padding:8px 0 96px; overflow:hidden; }
.tc-title{ text-align:center; font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:8px; }
.tc-title .amber{ color:var(--brand-amber); }
.tc-sub{ text-align:center; color:#5A6870; font-size:1.05rem; margin-bottom:34px; }

.tc-panels{ display:grid; grid-template-columns:1fr 72px 1fr; align-items:stretch; margin:0 auto; }
.tc-panel{ border-radius:18px; padding:28px; }
.tc-panel.today{ background:var(--brand-surface); border:1px solid var(--brand-line); }
.tc-panel.managello{ background:linear-gradient(180deg,#FDF6EE,#FBFCFD); border:1px solid rgba(201,132,62,.28); opacity:.5; filter:grayscale(.45); transform:scale(.985); transition:opacity .7s ease, filter .7s ease, transform .7s ease; }
#tc.tc-play .tc-panel.managello{ opacity:1; filter:none; transform:none; transition-delay:1.05s; }
.tc-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.tc-pill{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:20px; }
.tc-pill.today{ background:#E4E7EA; color:#5A6870; }
.tc-pill.managello{ background:var(--brand-amber); color:#fff; }
.tc-panel-sub{ font-size:0.82rem; color:#5A6870; }

/* left: tool grid + tangle */
.tc-tools{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.tc-web{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.tc-web line{ stroke:#C7CDD3; stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:4 4; opacity:0; transition:opacity .5s ease .3s; }
#tc.tc-play .tc-web line{ opacity:1; animation:tcMarch 16s linear infinite; }
@keyframes tcMarch{ to{ stroke-dashoffset:-240; } }
.tc-tool{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; background:#fff; border:1px solid var(--brand-line); border-radius:12px; padding:20px 10px; font-size:0.85rem; font-weight:600; color:var(--brand-navy); box-shadow:0 8px 18px -10px rgba(28,38,48,.3); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i)*0.07s); }
.tc-tool .ti{ font-size:1.7rem; transition:transform .28s cubic-bezier(.2,.7,.2,1); }
#tc.tc-play .tc-tool{ opacity:1; transform:none; }
.tc-tool.center{ grid-column:2; }
#tc.tc-play .tc-tool{ cursor:default; }
#tc.tc-play .tc-tool:hover{ transform:translateY(-6px); border-color:var(--brand-amber); box-shadow:0 18px 34px -14px rgba(201,132,62,.5); z-index:3; transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .2s ease, box-shadow .28s ease; }
#tc.tc-play .tc-tool:hover .ti{ transform:scale(1.16) rotate(-4deg); }

.tc-flags{ display:flex; flex-wrap:wrap; gap:7px; }
.tc-flag{ font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:20px; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
#tc.tc-play .tc-flag{ opacity:1; transform:none; }
.tc-flags.bad .tc-flag{ color:var(--lb-crimson); background:rgba(179,38,30,.07); border:1px solid rgba(179,38,30,.18); transition-delay:calc(0.55s + var(--i)*0.06s); }
.tc-flags.good .tc-flag{ color:#15803D; background:rgba(21,128,61,.08); border:1px solid rgba(21,128,61,.2); transition-delay:calc(1.5s + var(--i)*0.07s); }

/* arrow */
.tc-arrow{ display:flex; align-items:center; justify-content:center; }
.tc-arrow span{ width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid var(--brand-line); display:grid; place-items:center; font-size:1.1rem; color:var(--brand-navy); box-shadow:0 10px 24px -12px rgba(28,38,48,.3); }
#tc.tc-play .tc-arrow span{ animation:tcArrowGlow 1.8s ease-in-out infinite .9s; color:var(--brand-amber); }
@keyframes tcArrowGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,132,62,.4); } 50%{ box-shadow:0 0 0 12px rgba(201,132,62,0); } }

/* right: dashboard */
.tc-dash{ background:#fff; border:1px solid var(--brand-line); border-radius:12px; overflow:hidden; margin-bottom:16px; box-shadow:0 20px 44px -30px rgba(28,38,48,.35); }
.tc-dash-top{ display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--brand-line); }
.tc-dash-mark{ width:22px; height:22px; border-radius:6px; background:var(--brand-navy); display:grid; place-items:center; }
.tc-dash-mark img{ width:13px; height:13px; filter:brightness(0) invert(1); }
.tc-dash-brand{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.88rem; color:var(--brand-navy); }
.tc-dash-greet{ margin-left:auto; font-size:0.72rem; color:#8A97A0; }
.tc-dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; }
.tc-dash-stat{ background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:8px; padding:10px; }
.tc-dash-stat .l{ display:block; font-size:0.6rem; text-transform:uppercase; letter-spacing:.04em; color:#8A97A0; margin-bottom:5px; }
.tc-dash-stat .v{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1rem; color:var(--brand-navy); }
.tc-dash-rows{ padding:0 12px 12px; display:flex; flex-direction:column; gap:8px; }
.tc-dash-row{ display:flex; align-items:center; gap:8px; font-size:0.76rem; color:var(--brand-navy); }
.tc-dash-row em{ margin-left:auto; font-style:normal; color:#8A97A0; font-size:0.7rem; }
.tc-dash-row .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.tc-dash-row .dot.green{ background:#2E8B57; }
.tc-dash-row .dot.amber{ background:var(--brand-amber); }
.tc-dash-row .dot.navy{ background:var(--brand-navy); }

/* footer line */
.tc-footer{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
.tc-footer-note{ font-size:0.8rem; color:#8A97A0; }
.tc-footer-pill{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--brand-line); border-radius:30px; padding:9px 16px; box-shadow:0 12px 30px -18px rgba(28,38,48,.3); font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-navy); }
.tc-footer-pill em{ font-style:normal; font-family:'Inter',sans-serif; font-weight:400; font-size:0.8rem; color:#8A97A0; }
.tc-footer-mark{ width:22px; height:22px; border-radius:6px; background:var(--brand-navy); display:grid; place-items:center; }
.tc-footer-mark img{ width:13px; height:13px; filter:brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce){
  .tc-panel.managello{ opacity:1; filter:none; transform:none; }
  .tc-tool, .tc-flag{ opacity:1; transform:none; }
  .tc-web line{ opacity:1; animation:none; }
}
@media(max-width:860px){
  .tc-panels{ grid-template-columns:1fr; }
  .tc-arrow{ transform:rotate(90deg); margin:4px 0; }
}

/* full-width alternating feature sections (Apple-style) */
.feature{ background:var(--brand-white); padding:104px 0; border-top:1px solid var(--brand-line); }
.feature.alt{ background:var(--brand-surface); }
.feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.feature-grid.reverse .feature-copy{ order:2; }
.feature-grid.reverse .feature-visual{ order:1; }
.feature-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-amber); font-weight:600; margin-bottom:16px; }

/* Features section navigator — sticky chip row under the 72px main nav. Chips
   wrap/centre on desktop and scroll horizontally on mobile. Anchor targets are
   the section eyebrows, offset so they clear both sticky bars when jumped to. */
html{ scroll-behavior:smooth; }
.feature-nav{ position:sticky; top:72px; z-index:9; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--brand-line); }
.feature-nav-track{ display:flex; gap:8px; padding:11px 0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.feature-nav-track::-webkit-scrollbar{ display:none; }
.feature-nav-chip{ flex:0 0 auto; white-space:nowrap; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:0.86rem; color:var(--brand-navy); background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:999px; padding:7px 15px; transition:border-color .18s ease, color .18s ease, background .18s ease; }
.feature-nav-chip:hover{ border-color:var(--brand-amber); color:var(--brand-amber); }
.feature-eyebrow[id]{ scroll-margin-top:124px; }
@media (min-width:901px){ .feature-nav-track{ flex-wrap:wrap; justify-content:center; overflow-x:visible; } }
/* Main nav shrinks to 64px at ≤640, so pin the section nav flush under it. */
@media (max-width:640px){ .feature-nav{ top:64px; } .feature-eyebrow[id]{ scroll-margin-top:118px; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
.feature-copy h2{ font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.08; margin-bottom:18px; max-width:15ch; }
.feature-lead{ font-size:1.08rem; line-height:1.65; color:#4B5A64; max-width:460px; margin-bottom:24px; }
.feature-link{ font-weight:600; color:var(--brand-navy); font-size:0.95rem; border-bottom:2px solid rgba(201,132,62,.35); padding-bottom:2px; }
.feature-link:hover{ border-color:var(--brand-amber); }
.feature-visual{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:16px; padding:26px; box-shadow:0 34px 64px -34px rgba(37,50,61,.30); }
.feature.alt .feature-visual{ box-shadow:0 34px 64px -34px rgba(37,50,61,.16); }
.feature-visual.flush{ padding:0; overflow:hidden; background:transparent; border:none; box-shadow:none; }

/* white-label — brand-promise cards under the copy column (widget stays on right) */
.whitelabel .feature-eyebrow{ text-transform:none; letter-spacing:.02em; }
.wl-cards{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.wl-card{ display:flex; align-items:center; gap:14px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:12px; padding:16px 18px; box-shadow:0 1px 2px rgba(28,38,48,.03); transition:border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.wl-card:hover{ border-color:rgba(201,132,62,.45); box-shadow:0 16px 34px -24px rgba(28,38,48,.3); transform:translateY(-2px); }
.wl-check{ flex-shrink:0; width:22px; height:22px; color:var(--brand-amber); font-size:1.05rem; font-weight:700; display:grid; place-items:center; }
.wl-card-title{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.02rem; color:var(--brand-navy); line-height:1.2; }
.wl-card-sub{ font-size:0.9rem; color:#5A6870; margin-top:2px; }

/* self-hosted diagram — the collapsed single "one visual" */
.arch{ display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; }
.arch-server{ width:100%; border:1.5px solid var(--brand-navy); border-radius:14px; padding:22px; background:var(--brand-surface); }
.arch-server-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:.08em; color:#8A97A0; margin-bottom:14px; font-weight:700; }
.arch-app{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--brand-navy); color:#fff; border-radius:10px; padding:16px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem; }
.arch-chips{ display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.arch-chip{ font-size:0.72rem; color:#5A6870; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:6px; padding:4px 10px; }
.arch-flow{ display:flex; flex-direction:column; align-items:center; color:#8A97A0; }
.arch-line{ width:2px; height:26px; background:var(--brand-line); }
.arch-flow-label{ font-size:0.72rem; color:#8A97A0; padding:4px 0; }
.arch-license{ border:1px dashed var(--brand-line); border-radius:10px; padding:12px 16px; font-size:0.82rem; color:#5A6870; background:var(--brand-white); }

/* self-hosted ownership comparison (Cloud SaaS vs Managello) */
.own-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.own-col{ border:1px solid var(--brand-line); border-radius:14px; padding:22px 18px; background:var(--brand-white); text-align:center; }
.own-col.own{ border-color:var(--brand-amber); box-shadow:0 24px 48px -28px rgba(201,132,62,.42); }
.own-col-label{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:#8A97A0; font-weight:700; margin-bottom:14px; }
.own-col-label.amber{ color:var(--brand-amber); }
.own-node{ background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:9px; padding:11px 12px; font-size:0.85rem; font-weight:600; color:var(--brand-navy); display:flex; align-items:center; justify-content:center; gap:7px; }
.own-node.muted{ color:#8A97A0; font-weight:500; background:var(--brand-white); }
.own-node.strong{ background:var(--brand-navy); color:#fff; }
.own-node.accent{ background:rgba(201,132,62,.12); border-color:rgba(201,132,62,.4); color:var(--brand-amber); }
.own-arrow{ color:#C3CAD0; font-size:0.9rem; margin:6px 0; }
.own-col.cloud .own-arrow{ color:#DBAFAF; }

/* how it works — the setup-friction remover */
.howto{ background:var(--brand-white); border-top:1px solid var(--brand-line); padding:96px 0; text-align:center; }
.howto .section-head{ display:block; text-align:center; }
.howto .section-head h2{ margin:0 auto; }
.howto-sub{ color:#5A6870; font-size:1.05rem; margin:10px 0 40px; }
.howto-grid{ display:flex; align-items:stretch; justify-content:center; gap:14px; flex-wrap:wrap; }
.howto-step{ flex:1 1 200px; min-width:180px; max-width:236px; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:14px; padding:26px 20px; position:relative; text-align:center; }
.howto-num{ position:absolute; top:14px; right:16px; font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1rem; color:rgba(28,38,48,.18); }
.howto-icon{ font-size:1.8rem; margin-bottom:12px; }
.howto-step h3{ font-size:1.05rem; margin-bottom:6px; }
.howto-step p{ font-size:0.85rem; color:#5A6870; }
.howto-arrow{ display:flex; align-items:center; color:var(--brand-line); font-size:1.4rem; }
.howto-done{ display:flex; align-items:center; justify-content:center; padding:0 22px; font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-amber); font-size:1.05rem; white-space:nowrap; }
.howto-note{ font-size:0.8rem; color:#8A97A0; margin-top:28px; }

/* built by a real agency — dark band with amber-divider stats */
.team{ background:var(--brand-navy); padding:104px 0; }
.team h2{ font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.08; margin:0 0 20px; max-width:18ch; color:#fff; }
.team-lead{ font-size:1.08rem; line-height:1.65; color:rgba(255,255,255,.72); max-width:680px; margin:0 0 52px; }
.team-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.team-stat{ padding-left:22px; border-left:2px solid var(--brand-amber); }
.team-stat-big{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(1.6rem,2.4vw,2.15rem); color:#fff; line-height:1; margin-bottom:12px; letter-spacing:-.01em; }
.team-stat-small{ font-size:0.92rem; line-height:1.4; color:rgba(255,255,255,.6); }

/* pricing emotion ladder — a defined proof card so the "flat at any size" point lands */
.ladder{ max-width:480px; margin:0 auto 30px; display:flex; flex-direction:column; gap:0; text-align:left; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:16px; padding:6px 28px; box-shadow:0 22px 50px -36px rgba(28,38,48,.28); }
.ladder-row{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--brand-line); padding:15px 2px; }
.ladder-q{ font-size:1.12rem; font-weight:600; color:var(--brand-navy); }
.ladder-a{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.55rem; color:var(--brand-navy); }
.ladder-row:last-child{ border-bottom:none; }
.ladder-row:last-child .ladder-a{ color:var(--brand-amber); }

/* bug-free slim strip */
.bugfree.slim{ background:var(--brand-white); padding:52px 0; }
.bugfree.slim .bugfree-card{ margin:0 auto; max-width:820px; }

/* flat-price statement */
.flatprice{ background:var(--brand-surface); padding:100px 0; text-align:center; border-top:1px solid var(--brand-line); }
.flatprice .eyebrow{ margin-bottom:18px; }
.flatprice h2{ font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.06; margin-bottom:16px; }
.flatprice .strike{ color:#AEB6BC; text-decoration:line-through; font-weight:500; }
.flatprice-sub{ font-size:1.05rem; color:#5A6870; margin:0 auto 30px; max-width:520px; }
.flatprice .cta-row{ justify-content:center; }

/* final CTA */
.final{ background:var(--brand-navy); padding:96px 0 78px; text-align:center; }
.final h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:16px; }
.final p{ color:rgba(255,255,255,.72); font-size:1.05rem; max-width:520px; margin:0 auto 30px; }
.final .cta-row{ justify-content:center; }
.final-note{ color:rgba(255,255,255,.5) !important; font-size:0.82rem !important; margin:24px auto 0 !important; max-width:56ch !important; }
.final .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.final .btn-ghost:hover{ border-color:#fff; }

/* ---- SIMPLE PAGE HEADER (informational pages) ---- */
.page-head{ padding:60px 0 36px; border-bottom:1px solid var(--brand-line); }
.page-head h1{ font-size:2.8rem; font-weight:800; max-width:760px; }
.page-head .hero-sub{ margin-top:18px; }
.page-body{ padding:56px 0 80px; }
.page-body .prose{ max-width:720px; }
.page-body .prose h2{ font-size:1.5rem; margin:36px 0 12px; }
.page-body .prose h3{ font-size:1.15rem; margin:24px 0 8px; }
.page-body .prose p{ color:#4B5A64; margin-bottom:14px; }
.page-body .prose ul{ margin:0 0 18px 20px; color:#4B5A64; }
.page-body .prose li{ margin-bottom:6px; }
.soon-note{ display:inline-flex; align-items:center; gap:8px; background:var(--pill-neutral-bg); color:var(--pill-neutral-text); font-size:0.8rem; font-weight:600; padding:6px 12px; border-radius:20px; margin-top:24px; }

/* ---- FOOTER ---- */
/* footer — grouped, deep, multi-baseline (the whitespace becomes composition) */
footer{ background:var(--brand-navy); color:#C8D2D8; padding:72px 0 40px; border-top:1px solid rgba(255,255,255,0.10); }
.footer-main{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; padding-bottom:44px; }
.footer-brand{ max-width:380px; }
.footer-logo-link{ display:inline-block; margin-bottom:18px; }
.footer-logo{ height:30px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.footer-tagline{ font-size:0.92rem; line-height:1.65; color:#8FA0AC; }
.footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; background:transparent; border:none; position:static; }
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.footer-col-title{ font-family:'Inter Tight',sans-serif; font-size:0.72rem; letter-spacing:.09em; text-transform:uppercase; color:#6E7E8A; font-weight:700; margin-bottom:3px; }
.footer-col a{ font-size:0.92rem; color:#C8D2D8; transition:color .18s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,0.10); font-size:0.8rem; color:#7C8B96; }
.footer-credits{ display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-bugfree{ display:inline-flex; align-items:center; gap:7px; color:#C8D2D8; }
.footer-bugfree::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--brand-amber); }
.footer-bugfree:hover{ color:#fff; }
.footer-copy{ color:#6E7E8A; }

/* ============================================================
   FEATURES — interactive product tour
   ============================================================ */
.btn-lg{ padding:14px 26px; font-size:1rem; }

.ftr-hero{ text-align:center; padding:100px 0 72px; }
.ftr-hero .eyebrow{ margin-bottom:18px; }
.ftr-hero h1{ font-size:clamp(2.3rem,4.4vw,3.4rem); font-weight:800; line-height:1.05; letter-spacing:-.01em; }
.ftr-hero-sub{ font-size:1.12rem; line-height:1.6; color:#4B5A64; max-width:640px; margin:22px auto 30px; }
.ftr-hero .cta-row{ justify-content:center; }

.ftr{ padding:96px 0; }
.ftr-head{ margin-bottom:44px; }
.ftr-head.center{ text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.ftr-head.center .feature-eyebrow{ display:block; }
.ftr-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.1; }
.ftr-lead{ font-size:1.08rem; line-height:1.6; color:#4B5A64; margin-top:14px; }

/* 2 · one workflow */
.flow-section{ background:var(--brand-surface); border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line); }
.flow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; }
.flow-node{ display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:22px 20px; min-width:118px; box-shadow:0 12px 26px -18px rgba(28,38,48,.3); }
.flow-node.accent{ border-color:var(--brand-amber); box-shadow:0 18px 34px -18px rgba(201,132,62,.5); }
.flow-ic{ font-size:1.7rem; line-height:1; }
.flow-label{ font-size:0.86rem; font-weight:600; color:var(--brand-navy); text-align:center; }
.flow-arrow{ color:var(--brand-amber); font-size:1.15rem; font-weight:700; }
.flow-note{ text-align:center; margin-top:34px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.15rem; color:var(--brand-navy); }
.flow .reveal{ transition-delay:calc(var(--fi,0)*.06s); }
.flow-node:nth-child(1){ --fi:0 } .flow-arrow:nth-child(2){ --fi:1 } .flow-node:nth-child(3){ --fi:2 }
.flow-arrow:nth-child(4){ --fi:3 } .flow-node:nth-child(5){ --fi:4 } .flow-arrow:nth-child(6){ --fi:5 }
.flow-node:nth-child(7){ --fi:6 } .flow-arrow:nth-child(8){ --fi:7 } .flow-node:nth-child(9){ --fi:8 }
.flow-arrow:nth-child(10){ --fi:9 } .flow-node:nth-child(11){ --fi:10 }

/* 4 · requests flow + screenshot frame */
.req-flow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:26px; }
.req-sources{ display:flex; flex-direction:column; gap:7px; }
.req-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:9px; padding:8px 12px; font-size:0.85rem; font-weight:600; color:var(--brand-navy); }
.req-chip.strong{ border-color:var(--brand-navy); }
.req-chip.accent{ border-color:var(--brand-amber); color:var(--brand-amber); }
.req-arrow{ color:var(--brand-amber); font-weight:700; }
.shot{ display:block; width:100%; padding:0; border:1px solid var(--brand-line); border-radius:16px; overflow:hidden; background:var(--brand-white); box-shadow:0 40px 80px -40px rgba(37,50,61,.4); cursor:zoom-in; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.shot img{ display:block; width:100%; height:auto; }
.shot:hover{ transform:translateY(-4px); box-shadow:0 50px 90px -40px rgba(37,50,61,.5); }
.shot-lightbox{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:4vh 4vw; background:rgba(15,22,28,.82); backdrop-filter:blur(6px); cursor:zoom-out; }
.shot-lightbox img{ max-width:min(1500px,95vw); max-height:90vh; border-radius:12px; box-shadow:0 40px 100px -30px rgba(0,0,0,.7); }
.shot-lightbox-close{ position:absolute; top:22px; right:26px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:1rem; cursor:pointer; }
.shot-lightbox-close:hover{ background:rgba(255,255,255,.2); }

/* 5 · proofing chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.mini-chip{ font-size:0.8rem; font-weight:600; color:var(--brand-navy); background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:20px; padding:6px 13px; }
.feature.alt .mini-chip{ background:var(--brand-white); }

/* 9 · built for agencies */
.agency-band{ background:var(--brand-surface); border-top:1px solid var(--brand-line); }
.type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.type-card{ display:flex; align-items:center; gap:14px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:24px 26px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.08rem; color:var(--brand-navy); transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.type-card:hover{ border-color:rgba(201,132,62,.4); box-shadow:0 22px 44px -28px rgba(28,38,48,.3); transform:translateY(-3px); }
.type-ic{ font-size:1.6rem; }
.type-card:nth-child(2){ transition-delay:.05s } .type-card:nth-child(3){ transition-delay:.1s }
.type-card:nth-child(4){ transition-delay:.15s } .type-card:nth-child(5){ transition-delay:.2s } .type-card:nth-child(6){ transition-delay:.25s }

/* 10 · replace your stack */
.replace-band{ border-top:1px solid var(--brand-line); }
.replace{ display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; }
.replace-old{ display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); gap:10px; }
.replace-tool{ font-size:0.92rem; color:#8A97A0; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:9px; padding:11px 15px; text-align:center; position:relative; }
.replace-tool::after{ content:''; position:absolute; left:14px; right:14px; top:50%; height:1px; background:#C3CAD0; transform:scaleX(0); transform-origin:left; transition:transform .5s ease .3s; }
.replace-tool.is-visible::after{ transform:scaleX(1); }
.replace-arrow{ font-size:1.6rem; color:var(--brand-amber); font-weight:700; }
.replace-new{ display:inline-flex; align-items:center; gap:12px; background:var(--brand-navy); color:#fff; border-radius:16px; padding:24px 34px; font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.5rem; box-shadow:0 30px 60px -30px rgba(201,132,62,.6); }
.replace-mark{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.12); display:grid; place-items:center; }
.replace-mark img{ width:20px; height:20px; filter:brightness(0) invert(1); }

/* 11 · small features grid */
.mini-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.mini{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:13px; padding:22px 12px; font-size:0.84rem; font-weight:600; color:var(--brand-navy); transition:border-color .22s ease, box-shadow .28s ease, transform .28s ease; }
.mini:hover{ border-color:rgba(201,132,62,.4); box-shadow:0 18px 34px -22px rgba(28,38,48,.32); transform:translateY(-3px); }
.mini-ic{ font-size:1.5rem; line-height:1; }
.mini-grid .reveal:nth-child(3n+2){ transition-delay:.05s } .mini-grid .reveal:nth-child(3n){ transition-delay:.1s }
/* Mobile only: the details grid shows its first 18 items; the rest collapse
   behind "Show all features". Desktop always shows the full grid. */
.mini-showall{ display:none; }
@media (max-width:900px){
  .mini-grid:not(.show-all) .mini:nth-child(n+19){ display:none; }
  .mini-showall{ display:flex; width:fit-content; align-items:center; justify-content:center; gap:8px; margin:20px auto 0; padding:11px 22px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.9rem; color:var(--brand-navy); background:var(--brand-white); border:1px solid var(--brand-line); border-radius:11px; cursor:pointer; transition:border-color .18s ease; }
  .mini-showall:hover{ border-color:var(--brand-amber); }
}

/* 12 · why agencies switch */
.switch-band{ background:var(--brand-navy); }
.switch-band .feature-eyebrow{ color:var(--brand-amber); }
.switch-band .ftr-head h2{ color:#fff; }
.switch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.switch-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:30px 24px; text-align:center; }
.switch-cause{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.12rem; color:#fff; }
.switch-arrow{ color:var(--brand-amber); font-size:1.3rem; margin:12px 0; }
.switch-effect{ font-size:0.95rem; color:rgba(255,255,255,.66); line-height:1.45; }
.switch-card:nth-child(2){ transition-delay:.07s } .switch-card:nth-child(3){ transition-delay:.14s } .switch-card:nth-child(4){ transition-delay:.21s }

/* workflow-tour additions */
.ftr-hero-note{ font-size:0.82rem; color:#8A97A0; margin-top:26px; }
.ftr-alt{ background:var(--brand-surface); border-top:1px solid var(--brand-line); }

/* client portal preview (client-journey, not branding controls) */
.portal-frame{ max-width:420px; margin:0 auto; box-shadow:0 40px 80px -40px rgba(37,50,61,.4); }
.portal-note{ text-align:center; font-size:0.8rem; color:#8A97A0; margin-top:16px; }

/* know-your-agency — two screenshots */
.two-shot{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.shot-figure{ margin:0; }
.shot-figure figcaption{ margin-top:14px; text-align:center; font-size:0.92rem; font-weight:600; color:var(--brand-navy); }

/* platform reliability grid */
.platform-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.platform-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:26px 24px; transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.platform-card:hover{ border-color:rgba(201,132,62,.35); box-shadow:0 22px 44px -28px rgba(28,38,48,.3); transform:translateY(-3px); }
.platform-ic{ font-size:1.6rem; line-height:1; display:block; margin-bottom:14px; }
.platform-name{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem; color:var(--brand-navy); margin-bottom:5px; }
.platform-sub{ font-size:0.9rem; color:#5A6870; line-height:1.5; }
.platform-card:nth-child(2){ transition-delay:.05s } .platform-card:nth-child(3){ transition-delay:.1s }
.platform-card:nth-child(4){ transition-delay:.15s } .platform-card:nth-child(5){ transition-delay:.2s } .platform-card:nth-child(6){ transition-delay:.25s }

/* "New" pill — one small marker per section, never louder than the eyebrow */
.new-pill{ display:inline-block; margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--brand-amber); background:rgba(201,132,62,.12); border:1px solid rgba(201,132,62,.28); padding:2px 7px; border-radius:5px; vertical-align:middle; }

/* "Operate with confidence" — three trust/AI/digest groups reuse the get-group card */
.oc-grid{ grid-template-columns:repeat(2,1fr); max-width:900px; margin-left:auto; margin-right:auto; }
.oc-copy{ font-size:0.9rem; line-height:1.55; color:#5A6870; margin-top:18px; padding-top:16px; border-top:1px solid var(--brand-line); }

@media(max-width:980px){ .oc-grid{ grid-template-columns:1fr; } }

@media(max-width:900px){
  .hero h1{ font-size:2.3rem;}
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  /* Trim the footer's generous desktop padding on phones. */
  footer{ padding:44px 0 26px; }
  .footer-bottom{ padding-top:20px; }
  .pain-grid, .bento-grid, .pricing-grid, .agency-grid{ grid-template-columns:1fr;}
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .get-grid{ grid-template-columns:repeat(2,1fr); }
  .fit-grid{ grid-template-columns:1fr; }
  .showcase-rail{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .showcase-thumb-label{ display:none; }
  .replaces{ gap:8px 12px; }
  .plans-grid{ grid-template-columns:1fr; gap:34px; }
  .plan-card{ padding:34px 26px 30px; }
  .plan-card-head{ flex-direction:column; gap:12px; }
  .yours-grid, .bugfree-twocol{ grid-template-columns:1fr; }
  .trust-grid, .credibility-grid{ grid-template-columns:repeat(2,1fr); }
  .feature{ padding:68px 0; }
  .feature-grid{ grid-template-columns:1fr; gap:36px; }
  .feature-grid.reverse .feature-copy{ order:0; }
  .feature-grid.reverse .feature-visual{ order:0; }
  .hero-v2{ padding:80px 0 36px; }
  .team-stats{ grid-template-columns:repeat(2,1fr); }
  .howto-arrow{ display:none; }
  .howto-done{ padding:12px 0; }
  .tile-lg, .tile-md, .tile-sm{ grid-column:span 1;}
  .nav-links{ display:none; }
  .lb-row, .val-row{ font-size:0.76rem; }
  .footer-main{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
  .type-grid{ grid-template-columns:repeat(2,1fr); }
  .mini-grid{ grid-template-columns:repeat(3,1fr); }
  .switch-grid{ grid-template-columns:repeat(2,1fr); }
  .flow{ flex-direction:column; }
  .flow-arrow{ transform:rotate(90deg); }
  .replace{ flex-direction:column; gap:20px; }
  .replace-arrow{ transform:rotate(90deg); }
  .ftr{ padding:68px 0; }
  .two-shot{ grid-template-columns:1fr; }
  .platform-grid{ grid-template-columns:1fr; }
}

/* Narrowest phones only (≤360px): drop the last multi-column grids that stayed
   2–3 wide down to 320 and left a few px of horizontal scroll. 375px+ keeps its
   existing column counts. */
@media (max-width:360px){
  .why-grid{ grid-template-columns:1fr; }
  .mini-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   WHY SELF-HOSTED PAGE
   ============================================================ */

/* Hero + ownership diagram */
.wsh-hero{ padding:100px 0 40px; }
.wsh-qualify{ max-width:560px; margin:18px auto 0; font-size:0.92rem; line-height:1.55; color:#8A97A0; }
.own-diagram{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:52px auto 0; max-width:520px; }
.own-node{ display:inline-flex; align-items:center; gap:9px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:12px; padding:13px 26px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.02rem; color:var(--brand-navy); box-shadow:0 10px 26px -20px rgba(28,38,48,.4); }
.own-node.top{ background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); }
.own-node.brand{ border-color:var(--brand-amber); box-shadow:0 14px 30px -18px rgba(201,132,62,.5); }
.own-mark{ width:20px; height:20px; border-radius:5px; display:grid; place-items:center; overflow:hidden; }
.own-mark img{ width:100%; height:100%; object-fit:contain; }
.own-arrow{ color:var(--brand-amber); font-size:1.15rem; font-weight:700; line-height:1; }
.own-leaf-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.own-leaf{ background:var(--brand-surface); border:1px dashed var(--brand-line); border-radius:9px; padding:9px 16px; font-size:0.85rem; font-weight:600; color:var(--brand-navy); }

/* platform grid, 4-up variant */
.platform-grid.four{ grid-template-columns:repeat(4,1fr); }

/* What you own — ownership chip grid */
.own-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.own-own{ display:flex; align-items:center; gap:12px; background:var(--brand-surface); border:1px solid var(--brand-line); border-radius:11px; padding:16px 16px; font-weight:600; font-size:0.95rem; color:var(--brand-navy); }
.feature.alt .own-own{ background:var(--brand-white); }
.own-own-ic{ font-size:1.25rem; line-height:1; }
.wsh-note{ font-size:0.82rem; line-height:1.55; color:#8A97A0; border-left:2px solid var(--brand-line); padding-left:14px; max-width:440px; }
/* Ownership integrations, as a scannable bullet list rather than a run-on line. */
.wsh-own-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; max-width:460px; }
.wsh-own-list li{ position:relative; padding-left:22px; font-size:1rem; line-height:1.5; color:#4B5A64; }
.wsh-own-list li::before{ content:''; position:absolute; left:4px; top:0.6em; width:6px; height:6px; border-radius:50%; background:var(--brand-amber); }

/* Why agencies care — comparison cards */
.compare-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.compare-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:26px 24px; }
.compare-card .cc-head{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.1rem; color:#5A6870; margin-bottom:10px; }
.compare-card p{ font-size:0.95rem; line-height:1.55; color:#5A6870; }
.compare-card.highlight{ border-color:var(--brand-amber); background:var(--brand-white); box-shadow:0 26px 50px -30px rgba(201,132,62,.5); }
.compare-card.highlight p{ color:var(--brand-ink); }
.cc-badge{ display:inline-flex; align-items:center; gap:8px; font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.1rem; color:var(--brand-navy); margin-bottom:10px; }

/* Security checklist */
.sec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sec-item{ display:flex; align-items:center; gap:11px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:11px; padding:16px 16px; font-weight:600; font-size:0.9rem; color:var(--brand-navy); }
.sec-check{ width:22px; height:22px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:rgba(14,124,102,.12); color:#0E7C66; font-size:0.7rem; font-weight:800; }
.sec-grid .reveal:nth-child(4n+2){ transition-delay:.05s } .sec-grid .reveal:nth-child(4n+3){ transition-delay:.1s } .sec-grid .reveal:nth-child(4n){ transition-delay:.15s }
/* Client Portal: the four illustration cards carry real explanatory copy, so
   their body text is bumped above the shared .platform-sub size. */
.cp-cards{ grid-template-columns:1fr 1fr; }
.cp-cards .platform-sub{ font-size:0.98rem; line-height:1.55; }
@media (max-width:640px){ .cp-cards{ grid-template-columns:1fr; } }
/* Client Portal controls checklist, split into "Client access" / "Agency control". */
.cp-controls{ display:grid; grid-template-columns:1fr 1fr; gap:26px 32px; max-width:940px; margin:0 auto; text-align:left; }
.cp-controls-label{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-amber); margin-bottom:12px; }
.cp-sec{ grid-template-columns:1fr; }
@media (max-width:760px){ .cp-controls{ grid-template-columns:1fr; gap:24px; } }

/* Myth / reality cards */
.myth-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.myth-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:24px 22px; }
.myth-label{ font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:#B0323A; margin-bottom:8px; }
.myth-q{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.02rem; color:var(--brand-navy); line-height:1.25; }
.myth-rule{ height:1px; background:var(--brand-line); margin:16px 0; }
.reality-label{ font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:#0E7C66; margin-bottom:8px; }
.myth-r{ font-size:0.9rem; line-height:1.55; color:#5A6870; }
.myth-grid .reveal:nth-child(2){ transition-delay:.05s } .myth-grid .reveal:nth-child(3){ transition-delay:.1s } .myth-grid .reveal:nth-child(4){ transition-delay:.15s }

/* Comparison table */
.vs-table-wrap{ overflow-x:auto; border:1px solid var(--brand-line); border-radius:16px; background:var(--brand-white); box-shadow:0 30px 60px -40px rgba(37,50,61,.3); }
.vs-table{ width:100%; border-collapse:collapse; min-width:640px; }
.vs-table th, .vs-table td{ text-align:left; padding:16px 22px; font-size:0.94rem; border-bottom:1px solid var(--brand-line); }
.vs-table thead th{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.9rem; color:#8A97A0; background:var(--brand-surface); text-transform:uppercase; letter-spacing:.04em; }
.vs-table tbody th{ font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-navy); width:150px; }
.vs-table td{ color:#5A6870; }
.vs-table .vs-own{ color:var(--brand-navy); font-weight:600; background:rgba(201,132,62,.06); }
.vs-table thead th.vs-own{ color:var(--brand-navy); background:rgba(201,132,62,.12); white-space:nowrap; }
.vs-table thead th.vs-own .own-mark{ display:inline-grid; vertical-align:-4px; }
.vs-table tbody tr:last-child th, .vs-table tbody tr:last-child td{ border-bottom:none; }

/* Installation flow */
.install-flow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:34px; }
.install-step{ display:inline-flex; align-items:center; gap:11px; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:11px; padding:13px 20px; font-weight:600; font-size:0.92rem; color:var(--brand-navy); }
.install-step-num{ width:24px; height:24px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--brand-navy); color:#fff; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.8rem; }
.install-flow-arrow{ color:var(--brand-amber); font-weight:700; }
.wsh-install{ margin:0 auto; }

/* Who should choose — fit columns */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.fit-col{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:16px; padding:30px 30px; }
.fit-col.good{ border-top:3px solid #0E7C66; }
.fit-col.bad{ border-top:3px solid var(--brand-line); }
.fit-head{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.15rem; color:var(--brand-navy); margin-bottom:18px; }
.fit-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.fit-list li{ display:flex; align-items:flex-start; gap:12px; font-size:0.96rem; line-height:1.5; color:var(--brand-ink); }
.fit-ic{ width:22px; height:22px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:0.72rem; font-weight:800; margin-top:1px; }
.fit-ic.good{ background:rgba(14,124,102,.12); color:#0E7C66; }
.fit-ic.bad{ background:var(--brand-surface); color:#8A97A0; }

/* Responsive */
@media (max-width: 900px){
  .platform-grid.four{ grid-template-columns:repeat(2,1fr); }
  .sec-grid{ grid-template-columns:repeat(2,1fr); }
  .myth-grid{ grid-template-columns:repeat(2,1fr); }
  .compare-cards{ grid-template-columns:1fr; }
  .own-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .platform-grid.four{ grid-template-columns:1fr; }
  .sec-grid{ grid-template-columns:1fr; }
  .myth-grid{ grid-template-columns:1fr; }
  .fit-grid{ grid-template-columns:1fr; }
  .install-flow-arrow{ transform:rotate(90deg); }
  .install-flow{ flex-direction:column; }
  .install-step{ width:100%; }
}

/* ============================================================
   FEATURE-ASK CONVERSION BAND (pricing + features)
   ============================================================ */
.ask-band{ padding:64px 0; }
.ask-card{ max-width:720px; margin:0 auto; text-align:center; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:18px; padding:48px 44px; box-shadow:0 30px 60px -44px rgba(28,38,48,.28); }
.ask-card .feature-eyebrow{ margin-bottom:14px; }
.ask-card h2{ font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.12; margin-bottom:16px; }
.ask-punch{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.1rem; color:var(--brand-amber) !important; margin-bottom:18px !important; }
.ask-card p{ color:#4B5A64; font-size:1rem; max-width:560px; margin:0 auto 12px; }
.ask-card .btn{ margin-top:22px; }
.ask-note{ font-size:0.78rem; color:#5A6870; margin:30px auto 0; max-width:500px; line-height:1.6; }
.ask-band.sm .ask-card{ padding:40px 40px; }
.ask-band.sm h2{ font-size:clamp(1.35rem,2vw,1.6rem); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero{ padding:88px 0 24px; }
.about-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; margin:26px 0 0; }
.about-meta li{ position:relative; font-size:0.88rem; font-weight:600; color:#5A6870; padding-left:16px; }
.about-meta li::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--brand-amber); }
.about-hero h1{ font-size:clamp(2rem,4vw,2.8rem); font-weight:800; max-width:780px; line-height:1.08; }
.about-lede{ max-width:700px; margin:24px 0 30px; }
.about-lede p{ color:#4B5A64; font-size:1.08rem; margin-bottom:15px; }
.about-lede p:last-child{ margin-bottom:0; }
.about-lede strong{ color:var(--brand-navy); font-weight:600; }

.about-split{ padding:66px 0; border-top:1px solid var(--brand-line); }
.about-split .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.about-split-copy h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.12; margin-bottom:18px; }
.about-split-copy p{ color:#4B5A64; margin-bottom:14px; }
.about-split-copy .pull{ font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-navy); font-size:1.15rem; line-height:1.3; border-left:3px solid var(--brand-amber); padding-left:16px; margin:20px 0 0; }

.flow-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:18px; padding:32px 30px; box-shadow:0 34px 64px -44px rgba(28,38,48,.34); }
.flow-card-label{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8A97A0; margin-bottom:18px; }
.flow-steps{ display:flex; flex-direction:column; }
.flow-step{ display:flex; align-items:center; gap:14px; }
.flow-dot{ width:36px; height:36px; border-radius:10px; background:var(--brand-surface); border:1px solid var(--brand-line); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.flow-step span{ font-family:'Inter Tight',sans-serif; font-weight:600; color:var(--brand-navy); font-size:0.98rem; }
.flow-conn{ width:1px; height:14px; background:var(--brand-line); margin:2px 0 2px 18px; }
.flow-foot{ margin-top:24px; padding-top:20px; border-top:1px solid var(--brand-line); font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-navy); text-align:center; font-size:0.98rem; }

.belief-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.belief{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:26px 24px; transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.belief:hover{ border-color:rgba(201,132,62,.35); box-shadow:0 22px 44px -30px rgba(28,38,48,.3); transform:translateY(-3px); }
.belief-n{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--brand-amber); font-weight:600; margin-bottom:12px; }
.belief h3{ font-family:'Inter Tight',sans-serif; font-size:1.02rem; color:var(--brand-navy); margin-bottom:8px; line-height:1.28; }
.belief p{ font-size:0.9rem; color:#5A6870; line-height:1.55; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
.contact-form{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:18px; padding:34px 32px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cf-field{ margin-bottom:18px; }
.cf-field label{ display:block; font-size:0.85rem; font-weight:600; color:var(--brand-navy); margin-bottom:7px; }
.cf-field .req{ color:var(--brand-amber); }
.cf-field .cf-optional{ color:var(--brand-muted, #8a8f98); font-weight:400; font-size:0.8rem; }
.cf-field input, .cf-field select, .cf-field textarea{ width:100%; padding:11px 13px; border:1px solid var(--brand-line); border-radius:9px; font-family:inherit; font-size:0.92rem; color:var(--brand-ink); background:var(--brand-white); transition:border-color .18s ease, box-shadow .18s ease; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ outline:none; border-color:var(--brand-amber); box-shadow:0 0 0 3px rgba(201,132,62,.12); }
.cf-field textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.cf-hint{ font-size:0.8rem; color:#8A97A0; margin-top:6px; }
.cf-error{ font-size:0.8rem; color:var(--lb-crimson); margin-top:6px; }
.cf-hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-actions{ display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap; }
.cf-actions .note{ font-size:0.82rem; color:#8A97A0; }
.cf-reassure{ margin-top:14px; font-size:0.85rem; color:#5A6870; display:flex; align-items:center; gap:8px; }
.cf-reassure::before{ content:''; width:7px; height:7px; border-radius:50%; background:#2E8B57; flex-shrink:0; }
.cf-feature{ border:1px solid rgba(201,132,62,.28); background:rgba(201,132,62,.05); border-radius:12px; padding:22px 22px 6px; margin-bottom:18px; }
.cf-feature-head{ font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-navy); font-size:0.95rem; margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.cf-flash{ background:rgba(179,38,30,.07); border:1px solid rgba(179,38,30,.3); color:#B3261E; font-size:0.88rem; font-weight:500; padding:12px 15px; border-radius:10px; margin-bottom:22px; }

.cf-success{ background:var(--brand-white); border:1px solid rgba(14,124,102,.35); border-radius:18px; padding:44px 38px; text-align:center; max-width:620px; box-shadow:0 30px 60px -44px rgba(28,38,48,.28); }
.cf-success .ic{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:rgba(14,124,102,.12); color:#0E7C66; display:grid; place-items:center; font-size:1.5rem; }
.cf-success h2{ font-size:1.45rem; margin-bottom:10px; }
.cf-success p{ color:#4B5A64; max-width:440px; margin:0 auto 22px; }

.contact-aside{ display:flex; flex-direction:column; gap:14px; }
.contact-card{ background:var(--brand-white); border:1px solid var(--brand-line); border-radius:14px; padding:22px 22px; }
.contact-card h3{ font-family:'Inter Tight',sans-serif; font-size:1rem; color:var(--brand-navy); margin-bottom:8px; display:flex; align-items:center; gap:9px; }
.contact-card h3 .ci{ font-size:1.1rem; line-height:1; }
.contact-card p{ font-size:0.9rem; color:#5A6870; line-height:1.55; margin:0; }
.contact-card .mailto{ display:inline-block; margin-top:8px; color:var(--brand-amber); font-weight:600; font-size:0.92rem; }

/* ---- About + Contact responsive ---- */
@media (max-width: 900px){
  .belief-grid{ grid-template-columns:repeat(2,1fr); }
  .about-split .wrap{ grid-template-columns:1fr; gap:36px; }
  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .cf-row{ grid-template-columns:1fr; gap:0; }
  /* Once stacked, surface "Prefer email?" right under the form, ahead of the
     other intent cards. */
  .contact-card-email{ order:-1; }
}
@media (max-width: 640px){
  .belief-grid{ grid-template-columns:1fr; }
  .ask-card{ padding:38px 26px; }
  .contact-form{ padding:26px 22px; }
  .cta-row{ flex-wrap:wrap; }
  /* Raise genuinely-small CONTENT notes to a comfortable mobile floor (~0.82rem).
     Decorative eyebrows, badges and mono labels are intentionally left small. */
  .versus-assume, .plan-card-note, .plan-card-trialnote, .host-card-renew,
  .host-pick-note, .totals-assume, .trial-aside-note, .ask-note,
  .spine-desc{ font-size:0.82rem; }
  /* The "what's included" / operate grids stayed 2-col down to the smallest
     phones, cramping and overflowing them; stack to one column here. */
  .get-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   MOBILE NAV — hamburger menu (surfaces where .nav-links hides)
   Alpine drives `open`; x-cloak hides the panel until Alpine boots.
   ============================================================ */
[x-cloak]{ display:none !important; }

.nav-toggle{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--brand-line); border-radius:9px; background:var(--brand-white); cursor:pointer; padding:0; }
.nav-toggle:hover{ border-color:var(--brand-navy); }
.nav-toggle-box{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:18px; height:14px; }
.nav-toggle-bar{ display:block; height:2px; width:100%; border-radius:2px; background:var(--brand-navy); transition:transform .25s ease, opacity .2s ease; }
nav.is-open .nav-toggle-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
nav.is-open .nav-toggle-bar:nth-child(2){ opacity:0; }
nav.is-open .nav-toggle-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-mobile{ display:none; }

@media(max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .nav-mobile{ display:block; border-top:1px solid var(--brand-line); background:var(--brand-white); box-shadow:0 24px 44px -26px rgba(28,38,48,.32); }
  /* reset the global `nav .wrap` bar layout (flex row / fixed height / centered) */
  .nav-mobile .wrap{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; height:auto; gap:0; padding-top:8px; padding-bottom:18px; }
  .nav-mobile-link{ display:block; padding:14px 2px; font-size:1rem; font-weight:600; color:var(--brand-ink); border-bottom:1px solid var(--brand-line); }
  .nav-mobile-link:hover{ color:var(--brand-navy); }
  .nav-mobile-link.active{ color:var(--brand-amber); }
  .nav-mobile-cta{ margin-top:16px; width:100%; }
}

/* ============================================================
   MOBILE DENSITY — compress the desktop section rhythm so collapsed
   single-column content stops floating in half-screen voids.
   (~40% off the big 88–116px section paddings.)
   ============================================================ */
@media (max-width: 640px){
  .wrap{ padding:0 20px; }
  nav .wrap{ height:64px; }
  .nav-right{ gap:12px; }
  .nav-right .btn.nav-demo{ padding:9px 14px; font-size:0.84rem; }
  /* On the narrowest phones the top-bar demo button + hamburger overflow the
     row. The button is redundant there — the hamburger menu already carries
     "Try the live demo" — so drop it below 400px. */
  @media (max-width: 400px){ .nav-right .btn.nav-demo{ display:none; } }

  /* heroes */
  .hero{ padding:52px 0 40px; }
  .hero-v2{ padding:52px 0 20px; }
  .hero-v2 h1{ margin-bottom:18px; }
  .hero-v2 .hero-sub{ margin-bottom:26px; font-size:1.08rem; }
  .pricing-hero{ padding:52px 0 28px; }
  .ftr-hero{ padding:52px 0 40px; }
  .about-hero{ padding:52px 0 18px; }
  .about-lede{ margin:18px 0 24px; }
  .wsh-hero{ padding:52px 0 28px; }
  .page-head{ padding:48px 0 26px; }
  .page-head h1{ font-size:2.15rem; }
  .page-body{ padding:32px 0 44px; }

  /* content sections */
  .pain{ padding:44px 0 32px; }
  .pain-grid{ margin-top:22px; }
  .bento{ padding:40px 0 48px; }
  .bento-grid{ margin-top:24px; }
  .compare{ padding:40px 0; }
  .tc{ padding:8px 0 48px; }
  .tc-sub{ margin-bottom:22px; }
  .feature{ padding:44px 0; }
  .why-low{ padding:48px 0; }
  .getgroups{ padding:48px 0; }
  .showcase{ padding:8px 0 48px; }
  .showcase-head{ margin-bottom:24px; }
  .still{ padding:48px 0; }
  .fit{ padding:48px 0; }
  .addons-band{ padding:48px 0; }
  .faq-section{ padding:48px 0; }
  .flatprice{ padding:48px 0; }
  .final{ padding:52px 0 44px; }
  .team{ padding:52px 0; }
  .team-lead{ margin:0 0 32px; }
  .team-stats{ gap:24px 20px; }
  .howto{ padding:48px 0; }
  .howto-sub{ margin:8px 0 26px; }
  .agencies{ padding:44px 0; }
  .agencies-sub{ margin:12px 0 24px; }
  .yours{ padding:44px 0; }
  .bugfree{ padding:40px 0; }
  .bugfree.slim{ padding:36px 0; }
  .ftr{ padding:44px 0; }
  .ftr-head{ margin-bottom:26px; }
  .ask-band{ padding:44px 0; }
  .about-split{ padding:40px 0; }
  .credibility{ padding:48px 0; }
  .credibility-lead{ margin:0 0 26px; }
  .section-head-left{ margin-bottom:20px; }

  /* features: tighten the small tools/features grid so it eats less scroll */
  .mini{ padding:16px 8px; gap:8px; }
  .mini-ic{ font-size:1.3rem; }
  .type-card{ padding:18px 18px; font-size:1rem; }

  /* footer */
  footer{ padding:48px 0 30px; }
  .footer-main{ padding-bottom:32px; }
}


/* ── Trial signup (/trial) ─────────────────────────────────────────────
   Reuses the contact form's cf-* primitives; only the page shell is new. */
.trial-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start; }
.trial-h1{ font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:800; line-height:1.08; margin:14px 0 0; }
.trial-lead{ font-size:1.02rem; color:#5A6870; line-height:1.6; margin:14px 0 26px; max-width:52ch; }
.trial-form{ padding:30px 28px; }
.trial-aside{ display:flex; flex-direction:column; gap:14px; }
.trial-card-quiet{ background:var(--brand-surface); }
.trial-aside-note{ font-size:0.78rem; line-height:1.6; color:#8A97A0; margin-top:4px; }
.trial-aside-note a{ color:var(--brand-amber); font-weight:600; }
.trial-success-note{ font-size:0.9rem !important; color:#8A97A0 !important; margin-top:14px !important; }
.trial-success-note a{ color:var(--brand-amber); font-weight:600; }
@media (max-width:900px){
  .trial-grid{ grid-template-columns:1fr; gap:30px; }
}


/* ── Affordable hosting (was: Choosing a VPS) ─────────────────────────
   Reassurance panel + provider cards. Reuses the page's existing card
   language (white, --brand-line, 14-16px radius) rather than a new one. */
.host-reassure{ background:linear-gradient(180deg,#FFFCF8 0%,var(--brand-white) 70%); border:2px solid var(--brand-amber); border-radius:16px; padding:26px 28px; margin:28px 0 30px; }
.host-reassure-title{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.15rem; color:var(--brand-navy); margin-bottom:16px; }
.host-reassure-list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:12px 26px; padding:0; }
.host-reassure-list li{ display:flex; align-items:flex-start; gap:9px; font-size:0.92rem; color:var(--brand-ink); line-height:1.45; }
.host-reassure-list li::before{ content:'✓'; color:var(--brand-amber); font-weight:800; flex-shrink:0; }

.host-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.host-card{ position:relative; display:flex; flex-direction:column; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:16px; padding:26px 22px 22px; transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.host-card:hover{ border-color:rgba(201,132,62,.35); box-shadow:0 24px 48px -30px rgba(28,38,48,.28); transform:translateY(-3px); }
.host-card.is-pick{ border:2px solid var(--brand-amber); background:linear-gradient(180deg,#FFFCF8 0%,var(--brand-white) 62%); }
.host-card-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--brand-amber); color:#fff; font-size:0.68rem; font-weight:700; letter-spacing:.03em; padding:4px 12px; border-radius:20px; white-space:nowrap; }
.host-card-name{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.15rem; color:var(--brand-navy); }
.host-card-price{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.9rem; line-height:1.1; color:var(--brand-navy); margin-top:8px; letter-spacing:-.01em; }
.host-card-price span{ font-size:0.46em; font-weight:700; color:#8A97A0; }
.host-card-renew{ font-size:0.76rem; color:#8A97A0; margin-top:5px; line-height:1.45; min-height:2.2em; }
.host-card-meta{ margin:16px 0 18px; padding-top:14px; border-top:1px solid var(--brand-line); display:flex; flex-direction:column; gap:9px; flex:1; }
.host-card-meta > div{ display:flex; gap:8px; align-items:baseline; }
.host-card-meta dt{ font-size:0.68rem; text-transform:uppercase; letter-spacing:.04em; color:#8A97A0; flex-shrink:0; width:44px; white-space:nowrap; }
.host-card-meta dd{ font-size:0.86rem; color:var(--brand-ink); line-height:1.4; }
.host-card-cta{ width:100%; text-align:center; }
/* Mobile only: keep the recommended VPS visible, collapse the rest behind
   "Compare all VPS options". Desktop always shows every provider card. */
.vps-showall{ display:none; }
@media (max-width:640px){
  .host-cards:not(.show-all) .host-card:not(.is-pick){ display:none; }
  .vps-showall{ display:flex; width:fit-content; align-items:center; justify-content:center; gap:8px; margin:18px auto 0; padding:11px 22px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.9rem; color:var(--brand-navy); background:var(--brand-white); border:1px solid var(--brand-line); border-radius:11px; cursor:pointer; transition:border-color .18s ease; }
  .vps-showall:hover{ border-color:var(--brand-amber); }
}

.host-pick{ background:var(--brand-surface); border:1px solid var(--brand-line); border-left:3px solid var(--brand-amber); border-radius:14px; padding:24px 26px; margin-top:26px; }
.host-pick-title{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem; color:var(--brand-navy); margin-bottom:10px; }
.host-pick-body{ font-size:0.95rem; line-height:1.6; color:var(--brand-ink); margin:0; }
.host-pick-note{ font-size:0.78rem; line-height:1.6; color:#8A97A0; margin:10px 0 0; }

@media (max-width:1040px){ .host-cards{ grid-template-columns:repeat(2,1fr); gap:20px 16px; } }
@media (max-width:720px){ .host-reassure-list{ grid-template-columns:1fr; } }
@media (max-width:560px){ .host-cards{ grid-template-columns:1fr; } .host-card-renew{ min-height:0; } }

/* ── What it actually costs ───────────────────────────────────────── */
.totals{ padding:80px 0; background:var(--brand-surface); border-top:1px solid var(--brand-line); }
.totals-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:34px auto 0; align-items:stretch; }
.totals-card{ display:flex; flex-direction:column; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:16px; padding:28px 26px 24px; }
.totals-card.is-flat{ border:2px solid var(--brand-amber); background:linear-gradient(180deg,#FFFCF8 0%,var(--brand-white) 62%); }
.totals-card-name{ font-size:0.72rem; letter-spacing:.05em; text-transform:uppercase; color:#8A97A0; margin-bottom:18px; }
.totals-lines{ display:flex; flex-direction:column; gap:11px; flex:1; }
.totals-lines > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.totals-lines dt{ font-size:0.94rem; color:#5A6870; }
.totals-lines dd{ font-size:0.94rem; font-weight:600; color:var(--brand-ink); }
.totals-sum{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--brand-line); }
.totals-sum > span{ font-size:0.94rem; color:#5A6870; }
.totals-sum strong{ font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; letter-spacing:-.02em; }
.totals-sum strong.is-seat{ color:var(--brand-amber); }
.totals-sum strong.is-flat{ color:#15803D; }
/* Target the unit ONLY. A bare `strong span` also matches the Alpine x-text
   span holding the number, which shrank the figure instead of the unit. */
.totals-sum strong .totals-per{ font-size:0.4em; font-weight:700; color:#8A97A0; }
.totals-assume{ font-size:0.76rem; color:#8A97A0; margin:12px 0 0; line-height:1.5; }
@media (max-width:640px){ .totals-grid{ grid-template-columns:1fr; } }