/* =============================================================================
   site-modern.css — the world-class homepage's visual language, applied
   site-wide.  (v2.2.6.76)

   WHY A STYLESHEET AND NOT 44 REWRITES
   index-worldclass.html is a purpose-built page: its markup and CSS were
   designed together. The other 44 pages have their own structure built over a
   long time. Rewriting each one would take a week and would break things that
   currently work. What actually makes that page feel modern is not its HTML —
   it is a small number of decisions about type, spacing, surfaces and motion.
   Those decisions travel. This file carries them to every page, styling the
   elements that already exist rather than demanding new ones.

   Loaded LAST on each page. Delete the one <link> to revert a page completely.
   ============================================================================= */

/* --- TYPE ------------------------------------------------------------------
   The single biggest tell of a dated page is display type that is too large
   and too tightly tracked. Large type needs LESS negative tracking, not more.
   Everything below sets a ceiling and lets the tracking follow the size. */
h1{font-size:clamp(34px,4.6vw,60px) !important;line-height:1.05 !important;
   letter-spacing:-.028em !important;text-wrap:balance}
h2{font-size:clamp(26px,3.1vw,40px) !important;line-height:1.12 !important;
   letter-spacing:-.024em !important;text-wrap:balance}
h3{letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
/* A measure, not a container width. Long lines are the other common tell. */
.lede,.sub,.section-head p,.hero p{max-width:62ch}

/* --- SPACING ---------------------------------------------------------------
   One scale, applied everywhere, instead of per-section values chosen by eye. */
:root{--sm-section:clamp(64px,8vw,112px);--sm-block:clamp(24px,3vw,44px)}
section{padding-top:var(--sm-section);padding-bottom:var(--sm-section)}
.section-head{margin-bottom:var(--sm-block) !important}

/* --- SURFACES --------------------------------------------------------------
   Cards commonly carried a border AND a shadow AND a gradient fill. Any two of
   those compete; all three read as heavy. One hairline border, one soft
   shadow, flat fill — depth comes from the shadow alone. */
.card,.feature-card,.price-card,.app-shot,.compare-wrap,.panel,.box{
  border:1px solid var(--pe-border,rgba(255,255,255,.07)) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 14px 36px -20px rgba(0,0,0,.6) !important;
}
/* Hover changes the SURFACE, never the position: a card that lifts nudges its
   neighbours and makes a grid feel unstable. */
.card:hover,.feature-card:hover,.price-card:hover{
  transform:none !important;
  border-color:var(--pe-border-strong,rgba(255,255,255,.16)) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.22),0 24px 56px -22px rgba(0,0,0,.75) !important;
}

/* --- CONTROLS --------------------------------------------------------------
   Taller targets, a real press state, and one focus ring everywhere. A button
   that only responds to hover feels unfinished on a touch screen. */
.btn,.button,button.cta{min-height:46px;padding-left:22px;padding-right:22px;
  /* PILL, not rounded-rect. design.css had pills from the start; the 12px this
     layer introduced was overriding them — the inconsistency was self-inflicted.
     Pills are also the right call product-wide: with mixed radii everywhere
     else eliminated, the fully-round button is the one shape that reads as
     "action" at a glance. */
  border-radius:999px;font-weight:700;letter-spacing:-.01em;
  transition:background .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s,transform .1s}
.btn:active,.button:active{transform:translateY(1px)}
:where(a,button,[role="button"]):focus-visible{
  outline:2px solid #5b8def;outline-offset:3px;border-radius:999px}

/* --- MEDIA -----------------------------------------------------------------
   The product shot is the page's strongest asset; give it room on large
   screens instead of confining it to the text column. */
@media(min-width:1000px){
  .app-shot{max-width:min(1720px,calc(100vw - 48px)) !important}
}
.app-shot img,.app-shot video{aspect-ratio:16/9;object-fit:contain}

/* --- DETAIL ---------------------------------------------------------------- */
::selection{background:rgba(91,141,239,.30)}
html{scroll-behavior:smooth}
hr{border:0;height:1px;background:var(--pe-border,rgba(255,255,255,.08));margin:var(--sm-block) 0}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* --- CONTRAST FLOOR --------------------------------------------------------
   Audited every text token against every surface it sits on. One failed:
   ink-dim #64748b — used for footer copy, legal meta and fine print — reached
   only 3.8-4.1:1 on the dark surfaces (WCAG AA needs 4.5 for body-size text).
   #75869d passes on every surface (4.9-5.3:1) while staying visibly a step
   quieter than ink-muted, so the hierarchy is preserved. Set here because this
   sheet loads LAST on every page, so it also corrects pages that carry the old
   value in their own inline token blocks. */
:root{
  --ink-dim:#75869d !important;
  --pe-ink-dim:#75869d !important;
}
/* The same audit on light surfaces: fine print must not drop below 3:1. */
.nav .muted, .fine, small.muted { color:#69788c }


/* --- HEADER, MATCHED TO THE HOMEPAGE ----------------------------------------
   The new homepage sets the reference: light glass bar (blurred off-white, a
   border that appears on scroll), a small gradient chip as the mark, and the
   wordmark in ONE ink weight. The inside pages had a flat white bar and a
   two-tone gradient wordmark with a 32px PNG icon — a different brand at every
   click. CSS-only: the 39 shared headers keep their markup and inherit this.

   Why the wordmark loses the gradient: the homepage reserves gradients for the
   one primary action (Buy). A gradient logo next to a gradient button gives the
   page two focal points, and the logo always loses that fight anyway. */
header.nav, .nav {
  background: rgba(247,248,250,.8) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: none !important;
}
/* the mark: the PNG icon becomes the homepage's gradient chip */
.brand .brand-mark, .brand-mark {
  width: 26px !important; height: 26px !important;
  border-radius: 7px !important;
  background: url("assets/brand-mark.png") center/cover no-repeat !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.18) !important;
  margin-right: 9px !important;
  flex: 0 0 auto;
}
/* the wordmark: one weight, one ink — no split colouring, no text gradient */
.brand .bw-white, .brand .bw-grad {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
.brand .bw-white { margin-right: 0 !important; }
/* read as one word, like the homepage: kill the gap between the two spans */
.brand .bw-white { letter-spacing:-.02em !important; }
.brand { gap:0 !important; }

/* nav links: muted slate, ink on hover — the homepage's exact behaviour */
.nav-links a { color: #5b6b82 !important; }
.nav-links a:hover { color: #0f172a !important; background: transparent !important; box-shadow: none !important; }