/*
 * WinSiteClients — marketing site.
 *
 * Visual language borrowed from the product itself: it scores websites 0–100,
 * so the page is built out of score chips, meters and numbered findings rather
 * than generic marketing cards. The structure encodes something true.
 *
 * Palette is taken from the logo: a rose-to-violet gradient over cool near-white
 * and the logo's own near-black navy. The brand colour and the semantic colours
 * are kept apart on purpose — see --signal vs --bad below — so a failing check
 * never has to borrow whatever hue the branding happens to be this month.
 *
 * No build step, no framework, no external requests except Google Fonts.
 */

:root {
  /* ── Brand ────────────────────────────────────────────────────────────────
     Sampled from the logo itself, not eyeballed: the gradient across "Site"
     runs rose -> magenta -> violet, and these are the peak-chroma readings at
     the start, middle and end of that ramp. */
  --brand-1: #F62155;   /* rose    — gradient start */
  --brand-2: #CE1287;   /* magenta — gradient middle */
  --brand-3: #3F08BE;   /* violet  — gradient end */
  --grad: linear-gradient(95deg, var(--brand-1) 0%, var(--brand-2) 52%, var(--brand-3) 100%);

  /* The solid accent for links, buttons and labels. This is the logo's middle
     magenta rather than its rose, because the rose only reaches 3.8:1 against
     the page and 4.0:1 under white — both short of the 4.5:1 that link text and
     button labels need. The magenta clears it in both directions (4.9 and 5.2)
     while still reading as the same colour as the logo. */
  --signal:  #CE1287;
  --signal-d:#A81073;   /* hover — 6.7:1 */

  /* Neutrals, pulled cool. The previous ground was a warm cream, which fights a
     magenta-violet accent; these are the same lightness with the hue rotated to
     sit under the brand instead of against it. The darks are the logo's own
     near-black navy rather than the teal-black they replace. */
  --paper:   #FBFAFC;
  --paper-2: #F1F0F5;
  --ink:     #14122B;
  --deep:    #0B0A2B;   /* dark bands */
  --deep-2:  #1A1846;
  --muted:   #5F5E76;
  --line:    rgba(20, 18, 43, .13);

  --bad:     #D4194F;   /* a failing check — the brand rose, darkened to 5:1 */
  --good:    #0E9F6E;   /* healthy score */
  --warn:    #E0A106;   /* middling score */

  /* Headings. The fallbacks are the geometric UI sans each platform already
     ships, so if Google Sans is blocked or slow the headings stay in the same
     family of shape rather than dropping to a serif. */
  --display: 'Google Sans', 'Product Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Google Sans is a variable font on two axes. `optical-sizing: auto` lets it
   pick the right cut for the size, which is the whole point of loading the
   opsz range; GRAD 0 is the normal grade — the axis exists to thicken strokes
   on dark backgrounds without changing letter widths, and we don't want it
   applied by default. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'GRAD' 0;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; }
h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.25; }
p  { margin: 0; }

a { color: var(--signal); text-underline-offset: 3px; }
a:hover { color: var(--signal-d); }

img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.band { background: var(--paper-2); }
.band-dark { background: var(--deep); color: rgba(255,255,255,.86); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark a { color: #F9A8D4; }

.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted); max-width: 62ch; }
.head { max-width: 46rem; }
.head p { margin-top: 14px; color: var(--muted); }

.kicker {
  display: inline-block; font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 14px;
}
.band-dark .kicker { color: #F9A8D4; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,252,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 66px; }
/* The brand is the supplied wordmark image. Flex rather than the default
   inline-block, so the anchor is exactly the height of the image and does not
   carry the few pixels of descender space an inline image sits on — that gap is
   what makes a header logo look mysteriously off-centre. */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 34px; width: auto; }
.site-foot .brand img { height: 30px; }
@media (max-width: 420px) { .brand img { height: 28px; } }
.nav { display: none; margin-left: auto; gap: 22px; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--signal); }
@media (min-width: 900px) { .nav { display: flex; } }
.head-cta { margin-left: auto; }
@media (min-width: 900px) { .head-cta { margin-left: 0; } }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-d); color: #fff; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.band-dark .btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
/* The emphasised phrase in a hero heading takes the logo's own gradient, the
   same treatment the logo gives "Site". The solid colour is declared first and
   the gradient added only behind @supports: background-clip:text is what makes
   the text itself transparent, so a browser that understands `color:transparent`
   but not the clip would render an invisible headline. */
.hero h1 em { font-style: normal; color: var(--signal); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 em {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* The answer-first paragraph. Search and answer engines quote this, so it is
   marked up as its own element and kept to one plain, factual sentence. */
.answer {
  margin-top: 20px; padding: 16px 20px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: 0 12px 12px 0; font-size: 16.5px; color: var(--ink); max-width: 62ch;
}

/* ── score card (the product's own motif) ───────────────────────────────── */
.card {
  /* Sets its own text colour for the same reason .pack does: a light card
     dropped inside .band-dark would otherwise inherit the band's white and
     render white on white. Cheap insurance against an invisible section. */
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px;
}
.scorecard { box-shadow: 0 24px 60px -40px rgba(12,26,27,.6); }
.scorecard-top { display: flex; align-items: baseline; gap: 14px; }
.score {
  font-family: var(--mono); font-weight: 700; font-size: 54px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score--low  { color: var(--bad); }
.score--mid  { color: var(--warn); }
.score--high { color: var(--good); }
.score-of { font-family: var(--mono); font-size: 15px; color: var(--muted); }
.score-label { margin-left: auto; font-size: 13px; color: var(--muted); }

.meter { height: 7px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-top: 6px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--bad); }

.findings { list-style: none; margin: 18px 0 0; padding: 0; }
.findings li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px;
}
.findings .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.findings .v { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.v--bad { color: var(--bad); }
.v--ok  { color: var(--good); }

/* ── grids ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: clamp(18px, 2.4vw, 26px); margin-top: clamp(28px, 4vw, 44px); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.5px; }

/* Numbered steps — the number means sequence here, so it is a real ordered list. */
.steps { counter-reset: step; list-style: none; margin: clamp(28px,4vw,44px) 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li {
  counter-increment: step; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px 20px 62px;
}
.band-dark .steps li { background: var(--deep-2); border-color: rgba(255,255,255,.12); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 20px; top: 20px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--signal);
}
.steps h3 { font-size: 17px; margin-bottom: 6px; }
.steps p { font-size: 15px; color: var(--muted); }
.band-dark .steps p { color: rgba(255,255,255,.7); }

/* ── comparison table (answer engines lift these) ───────────────────────── */
.table-scroll { overflow-x: auto; margin-top: clamp(24px,3vw,36px); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { margin-top: clamp(24px,3vw,36px); display: grid; gap: 10px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px;
}
.faq summary {
  cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 16.5px;
  list-style: none; display: flex; gap: 14px; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font-family: var(--mono); color: var(--signal); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details > p { padding: 0 0 16px; color: var(--muted); font-size: 15.5px; max-width: 70ch; }

/* ── pills / related links ──────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.pills a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; text-decoration: none; color: var(--ink);
}
.pills a:hover { border-color: var(--signal); color: var(--signal); }

/* ── pricing ────────────────────────────────────────────────────────────── */
.packs { display: grid; gap: 18px; margin-top: clamp(28px,4vw,44px); }
@media (min-width: 800px) { .packs { grid-template-columns: repeat(3, 1fr); } }
/* A white card sitting inside .band-dark. Setting the text colour here is not
   optional: the dark band sets `color: rgba(255,255,255,.86)`, which every
   descendant inherits unless it declares its own — so anything in this card
   that does not name a colour comes out white on white and simply vanishes.
   Declaring it once on the card fixes the whole subtree. */
.pack {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column;
}
.pack--feature { border-color: var(--signal); box-shadow: 0 22px 50px -38px rgba(206,18,135,.75); }

/* Same trap, one level down: `.band-dark .btn-ghost` turns ghost buttons white
   so they read on the dark band, but these two sit on a white card. Same
   specificity as that rule and later in the file, so this wins. */
.pack .btn-ghost { border-color: var(--line); color: var(--ink); }
.pack .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.pack .qty { font-family: var(--mono); font-size: 40px; font-weight: 700; line-height: 1; }
.pack .unit { color: var(--muted); font-size: 14px; margin-top: 6px; }
.pack ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; font-size: 15px; }
.pack li { padding-left: 24px; position: relative; color: var(--muted); }
.pack li::before { content: '✓'; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.pack .btn { margin-top: 22px; justify-content: center; }
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot { background: var(--deep); color: rgba(255,255,255,.72); padding-block: clamp(40px,5vw,64px); font-size: 15px; }
.site-foot a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: 30px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 12px; font-weight: 500; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-base { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.45); }

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumb { font-size: 14px; color: var(--muted); padding-top: 22px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--signal); }

/* ══ Contact page ═══════════════════════════════════════════════════════════
   The form is the one place on the site a visitor actually does something, so
   it gets the same care as the hero rather than browser-default inputs. */

.hero--short { padding-block: clamp(38px, 5vw, 60px); }

.contact-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.05fr; } }

.contact-facts { list-style: none; margin-top: 32px; display: grid; gap: 0; }
.contact-facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px;
}
.contact-facts li:last-child { border-bottom: 1px solid var(--line); }
.contact-facts strong { font-weight: 500; color: var(--muted); }
.contact-facts a, .contact-facts span { font-family: var(--mono); font-size: 13.5px; }

.form-card { padding: clamp(24px, 3.4vw, 36px); }
.form-title { font-size: clamp(21px, 2.2vw, 26px); margin-bottom: 22px; }

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 14px; font-weight: 500; }
.field .opt { color: var(--muted); font-weight: 400; font-size: 12.5px; }

/* Inherit the page font: inputs default to the OS font otherwise, which is the
   single most obvious tell of an unstyled form. 16px on the font-size is not a
   style choice — iOS Safari zooms the whole page in on focus below 16px. */
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 15px) 51%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--signal); background: #fff;
  box-shadow: 0 0 0 3px rgba(206, 18, 135, .15);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA7AB; }

.field--bad input, .field--bad textarea { border-color: var(--bad); background: #fff; }
.field .err { font-size: 13px; color: var(--bad); font-weight: 500; }

.field-row { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.btn-block { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }

.alert { border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; font-size: 15px; }
.alert--bad  { background: #FDECF1; border: 1px solid rgba(212, 25, 79, .35); color: #8E0F35; }
.alert--good { background: #EAF7F1; border: 1px solid rgba(14, 159, 110, .3); }
.alert--good h2 { font-size: clamp(21px, 2.2vw, 26px); margin-bottom: 10px; }
.alert--good p  { color: var(--muted); font-size: 15.5px; }
.alert a { color: inherit; text-decoration: underline; }

/* The honeypot. Hidden from sight and from assistive tech, but NOT with
   display:none — some bots specifically skip display:none fields, and this
   catches those too. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .field input, .field textarea, .field select { transition: none; }
}

/* Dark theme. The form must not be the one element that stays white when the
   rest of the page goes dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field textarea,
  :root:not([data-theme="light"]) .field select { background: rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .field input:focus,
  :root:not([data-theme="light"]) .field textarea:focus,
  :root:not([data-theme="light"]) .field select:focus { background: rgba(255,255,255,.08); }
}