/* THE MARKETING SITE'S LOOK
   -------------------------
   Loaded by marketing_base.html for every public page (Features, Switching,
   Developers, Security, Status, the code examples) and layered over
   marketing.css, so those pages keep their structure and gain the home page's
   style. Everything is scoped to `.site`, the class marketing_base puts on
   <body>. The home page adds `.home` on top (home.css) for its own sections.

   COLOUR. Burgundy leads (it is the brand's --wine). Its complement, a deep
   teal, and a warm gold sit opposite it on the colour wheel; a near-black teal
   grounds the dark panels. No pastels: every coloured surface is solid, with
   white or near-black text on it.

   TYPE. A heavy, tightly set grotesque for headlines (Bricolage Grotesque) over
   a plain humanist body (Plus Jakarta Sans). The pages keep their copy; the
   look does the work of making them lighter to read: bigger headings, more
   white space, quieter borders, solid colour where there used to be tints.

   The custom properties marketing.css defines (--ink, --muted, --line, --wine,
   --bg-alt ...) are re-pointed here, so the page-specific <style> blocks in
   switching.html, developers.html and the rest -- which only ever read those
   properties -- pick the new look up without being edited. */

.site{
  --h-ink:#14111a; --h-mute:#5f5a68; --h-line:#e6e2ea;
  --h-wine:#7a2440; --h-teal:#0a6b68; --h-saffron:#f5a800; --h-gold:#d99a00; --h-deep:#0f2e33;
  --h-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --h-body:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --ink:var(--h-ink); --muted:var(--h-mute); --faint:#6d6877; --line:var(--h-line);
  --wine:var(--h-wine); --wine-soft:#f3e6ea; --bg-alt:#f6f4f8;
  --sans:var(--h-body);
  font-family:var(--h-body); color:var(--h-ink); background:#fff;
}
.site .wrap{max-width:1180px}

/* ---------- header and footer ---------- */
.site header.bar{background:#fff; border-bottom:1px solid var(--h-line)}
.site .word{font-family:var(--h-display); font-weight:800; letter-spacing:-.03em}
.site nav.links a.nl{font-family:var(--h-body); font-weight:600; font-size:1rem}
.site .bar .btn{padding:.7rem 1.5rem}
.site footer{border-top:1px solid var(--h-line); margin-top:0}
.site footer .word{font-size:1.3rem}

/* ---------- buttons ---------- */
.site .btn{border-radius:999px; font-family:var(--h-body); font-weight:700}
.site .btn-primary, .site .btn-wine{background:var(--h-wine); color:#fff; box-shadow:none}
.site .btn-primary:hover, .site .btn-wine:hover{box-shadow:none; transform:none; filter:brightness(1.1)}
.site .btn-ghost{border:2px solid var(--h-line)}
.site .btn-ghost:hover{border-color:var(--h-wine); color:var(--h-wine)}
.site .btn:focus-visible{outline:3px solid var(--h-saffron); outline-offset:3px}
.site .h-btn{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:.9rem 2rem;
  border-radius:999px; font-weight:700; font-size:1.1rem; background:var(--h-wine); color:#fff; border:0; cursor:pointer;
  transition:filter .15s}
.site .h-btn:hover{filter:brightness(1.1)}
.site .h-btn:focus-visible{outline:3px solid var(--h-saffron); outline-offset:3px}
.site .h-link{font-weight:700; font-size:1.05rem; color:var(--h-ink); padding:.6rem .2rem; min-height:44px;
  display:inline-flex; align-items:center}
.site .h-link:hover{color:var(--h-wine)}

/* ---------- headings ---------- */
.site h1, .site h2{font-family:var(--h-display); font-weight:800; letter-spacing:-.045em; line-height:1; text-wrap:balance}
.site h1.head, .site .hero h1{font-size:clamp(3rem, 8vw, 6.5rem); line-height:.95; letter-spacing:-.05em}
.site h1.head em{color:var(--h-wine); font-style:normal}
.site section{padding:4.5rem 0}
.site .sec-head{text-align:left; max-width:none; margin:0 0 3rem}
.site .sec-head h2{font-size:clamp(2.6rem, 6vw, 5rem); max-width:14em; margin-left:0; margin-right:0}
.site .sec-head p{font-size:1.2rem; font-weight:500; color:var(--h-mute); line-height:1.45; max-width:36em; margin:1.2rem 0 0}
.site .sec-head p a, .site a.inline{color:var(--h-wine); font-weight:700}
.site .eyebrow{display:inline-block; background:none; border:0; padding:0; margin-bottom:1rem; color:var(--h-wine);
  font-family:var(--h-body); font-weight:800; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase}
.site .eyebrow::before{display:none}

/* ---------- cards: quiet border, big radius, no shadow ---------- */
.site .feat, .site .trust-card, .site .status-card, .site .addon, .site .plat-panel, .site .calc, .site .spotlight{
  border:2px solid var(--h-line); border-radius:28px; box-shadow:none; background:#fff}
.site .feat:hover, .site .addon:hover{transform:none; box-shadow:none; border-color:var(--h-ink)}
.site .feat{padding:1.4rem 1.5rem}
.site .features{gap:14px}
.site .feat h4{font-family:var(--h-display); font-weight:800; font-size:1.25rem; letter-spacing:-.03em}
.site .feat p, .site .trust-card li, .site .trust-card p{font-size:.93rem; line-height:1.5; color:var(--h-mute)}
.site .trust-card{padding:2rem}
.site .trust-card h3{font-family:var(--h-display); font-weight:800; font-size:1.45rem; letter-spacing:-.03em}

/* A round, solid icon badge; the four colours rotate through each grid. */
.site .feat .ic, .site .trust-card .ic{width:52px; height:52px; border-radius:50%; background:var(--h-wine); color:#fff;
  display:flex; align-items:center; justify-content:center}
.site .features .feat:nth-child(4n+2) .ic, .site .trust-grid .trust-card:nth-child(4n+2) .ic{background:var(--h-teal)}
.site .features .feat:nth-child(4n+3) .ic, .site .trust-grid .trust-card:nth-child(4n+3) .ic{background:var(--h-saffron); color:var(--h-ink)}
.site .features .feat:nth-child(4n+4) .ic, .site .trust-grid .trust-card:nth-child(4n+4) .ic{background:var(--h-deep)}
.site .feat .plan-tag{background:var(--h-saffron); color:var(--h-ink); font-weight:800; border:0}

/* Feature groups: a big heading, then the cards */
.site .feat-group > h3{font-family:var(--h-display); font-weight:800; font-size:clamp(1.7rem, 3vw, 2.3rem); letter-spacing:-.04em;
  color:var(--h-ink)}
.site .feat-group > h3::after{background:var(--h-line)}
.site .feat-group{margin-bottom:2.4rem}

/* ---------- the comparison table ---------- */
.site #differentiator{background:#fff; border-block:0}
.site .diff-table thead th{font-family:var(--h-display); font-weight:800}
.site .diff-table thead .dh-win{background:var(--h-wine); color:#fff}
.site .diff-table col.dc-yes{background:#f3e6ea}
.site .diff-wrap{border-radius:28px}

/* ---------- security and status: line up with the left-aligned headings ---------- */
.site .trust-grid{max-width:none; margin-left:0; margin-right:0; gap:16px}
.site .status-banner, .site .status-card, .site .status-note, .site .status-cta{max-width:760px; margin-left:0; margin-right:0}
.site .status-note, .site .status-cta{text-align:left}
.site .status-cta .offer{justify-content:flex-start}

/* ---------- status ---------- */
.site .status-banner{border-radius:999px; font-family:var(--h-display); font-weight:800; font-size:1.3rem; padding:1.1rem 1.8rem}
.site .status-banner.ok{background:var(--h-teal); color:#fff; border:0}
.site .status-banner.bad{background:#b3261e; color:#fff; border:0}
.site .status-dot.ok{background:var(--h-teal)}
.site .status-card{padding:.6rem 1.8rem}

/* ---------- developers and switching: the controls they share ---------- */
.site .plat-chip{border-width:2px; font-weight:700}
.site .plat-chip[aria-current="true"]{background:var(--h-wine); border-color:var(--h-wine)}
.site .plat-panel{padding:2rem}
.site .plat-head h3{font-family:var(--h-display); font-size:1.8rem; letter-spacing:-.035em}
.site .carry-tag{background:var(--h-teal); color:#fff; font-weight:700; border-radius:999px; padding:.3rem .85rem}
.site .carry-tag.generic{background:var(--bg-alt); color:var(--h-mute)}

/* ---------- the closing panel ---------- */
.site .closer{padding:5rem 0 5rem; text-align:center}
.site .closer .box{background:var(--h-deep); border-radius:44px; padding:6rem 2rem; max-width:none;
  display:flex; flex-direction:column; align-items:center; gap:2rem}
.site .closer h2{color:#fff; font-size:clamp(2.6rem, 6.4vw, 5.6rem); max-width:11em; margin:0}
.site .closer h2 em{color:var(--h-saffron)}
.site .closer p{font-size:1.15rem; max-width:34em; margin:0; color:rgba(255,255,255,.82)}
.site .closer .btn, .site .closer .h-btn{background:var(--h-saffron); color:var(--h-ink); min-height:56px; padding:.9rem 2rem; font-size:1.1rem}
.site .closer .offer{margin-top:0}

@media (max-width:860px){
  .site section{padding:3.5rem 0}
  .site .sec-head{margin-bottom:2rem}
  .site .closer .box{padding:4rem 1.4rem; border-radius:32px}
  .site .feat, .site .trust-card{padding:1.5rem}
}
@media (prefers-reduced-motion:reduce){ .site *{transition:none !important} }
