/* ============================================================
   The high-end pass for visibian.com (owner, 30 October 2026: "a little lift, like it can be perfected and
   polished", as was done for visibianhq.com; previewed on 10 pages and approved the same day, "A: Apply it"). A layer over style.css and each page's own styles, loaded last,
   in HQ's visual language: crisp hairlines, smaller corners, labels in sentence case, balanced headings,
   cards that stay still, one deeper shadow kept for the product pictures, calmer motion.
   The brand stays: Ink, Violet, Iris, Paper; Inter Tight and Inter.
   ============================================================ */

:root{
  --line:#E4E0F1;
  --line-soft:#EFECF7;
  --line-strong:#D3CCE8;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(20,17,58,.04);
  --shadow-lift:0 1px 1px rgba(20,17,58,.05),0 14px 32px -14px rgba(20,17,58,.20),0 44px 90px -44px rgba(76,29,149,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- type ---------- */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
h1{letter-spacing:-.042em}
h2{letter-spacing:-.034em}
.lede{font-size:clamp(17.5px,1.7vw,21px);color:var(--ink-2)}

/* labels in sentence case, as on HQ (no spaced capitals) */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:-.005em;text-transform:none;margin-bottom:16px}
.product-tag,.foot h3,footer .ask-ai-label{font-size:13.5px;letter-spacing:0;text-transform:none}
.foot h3{color:var(--ink)}

/* numbers line up */
.stat b,.stats,.price,.amt,.cmp td,.cmp th,table td{font-variant-numeric:tabular-nums}

/* links inside running text are underlined, so they read as links without colour alone */
main p a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(124,58,237,.35);transition:text-decoration-color .15s}
main p a:not(.btn):hover{text-decoration-color:currentColor}

/* ---------- header ---------- */
.nav{background:rgba(255,255,255,.74);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom-color:var(--line)}
.nav-links a{color:var(--muted)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}

/* ---------- buttons: a fine top highlight, no jump ---------- */
.btn{transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(20,17,58,.22)}
.btn-primary:hover{background:#221C5E;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -8px rgba(34,28,94,.55)}
.btn-ghost{background:#fff;border-color:var(--line)}
.btn-ghost:hover{transform:none;border-color:var(--line-strong);background:var(--paper)}
.btn:active{transform:translateY(1px)}

/* ---------- cards: hairlines, no shadow, no lift ---------- */
.step,.product,.feature,.arc,.comp,.stat,.m4-card,.faq details{box-shadow:none}
.step:hover,.product:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
.step,.product,.feature,.arc,.comp,.stat,.m4-card{transition:border-color .2s var(--ease)}
.product::after{display:none}
.product{padding:40px 36px}
.feature-ic{border-radius:10px}

/* ---------- sections: more room, crisp edges between tints ---------- */
section{padding:112px 0}
@media(max-width:700px){section{padding:76px 0}}
.alt{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{margin-bottom:56px}
/* the opening sits on the paper tint, so the white product picture stands forward */
.hero,.page-hero{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.hero-bg,.page-hero .hero-bg{background:radial-gradient(64% 52% at 82% -12%,rgba(124,58,237,.09) 0%,rgba(124,58,237,0) 70%)}

/* section openings with an intro: an editorial split on wide screens, the headline left and the intro right */
@media(min-width:960px){
  .section-head:has(> .lede){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:1fr auto;
    column-gap:72px;max-width:none}
  .section-head:has(> .lede) > .eyebrow{grid-column:1;grid-row:1;justify-self:start;align-self:end}
  .section-head:has(> .lede) > h2{grid-column:1;grid-row:2;margin-bottom:0;align-self:end}
  .section-head:has(> .lede) > .lede{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;padding-bottom:4px}
}

/* the numbers bands: large figures under a fine ink rule, not boxed */
.stats{gap:36px 40px}
.stat{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;padding:22px 0 0}
.band{border-radius:24px}

/* ---------- product pictures: the one place with depth ---------- */
.hero-shot,.frow-shot,.shot{border-color:rgba(20,17,58,.09);box-shadow:var(--shadow-lift)}
.answer-card{box-shadow:0 1px 1px rgba(20,17,58,.05),0 18px 40px -18px rgba(20,17,58,.28)}

/* ---------- FAQ ---------- */
.faq details{border-radius:12px;transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--line-strong)}

/* ---------- motion: one calm reveal ---------- */
.rv{transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){.rv{transform:none;transition:none}}

/* ---------- footer on the paper tint ---------- */
footer{background:var(--paper);border-top-color:var(--line)}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--violet);outline-offset:3px}