/* simple-style.css — the Simple house style.
   A theme layer loaded after tokens/base/layout and the page sheets so it
   wins the cascade; tokens.css stays untouched because the admin app shares it.

   The look: white ground, ink #1C1C1C, hairline #D6D6D6 borders, light
   serif display headlines (Aleo 300), uppercase monospace UI labels
   (Azeret Mono), black notched-corner CTAs, with the brand green as the
   accent and the link colour. */

@import url("https://fonts.googleapis.com/css2?family=Aleo:wght@300;400&family=Host+Grotesk:wght@400;500;600;700&family=Azeret+Mono:wght@400;500;600&display=swap");

:root {
  /* Accent: the brand green, unchanged from tokens.css. */

  /* Ink + surfaces */
  --sv-noire: #1C1C1C;
  --sv-noire-80: rgba(28, 28, 28, 0.80);
  --sv-noire-60: rgba(28, 28, 28, 0.60);
  --sv-noire-30: rgba(28, 28, 28, 0.30);
  --sv-noire-12: rgba(28, 28, 28, 0.12);
  --sv-cream: #F5F5F4;
  --sv-mist: rgba(0, 0, 0, 0.04);

  /* Hairlines + text */
  --sv-line: #D6D6D6;
  --sv-line-soft: rgba(0, 0, 0, 0.10);
  --sv-text: #1C1C1C;
  --sv-muted: #666666;
  --sv-subtle: #999999;

  /* Type */
  --font-sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Aleo", Georgia, "Times New Roman", serif;

  /* Geometry: square things off, flatten elevation. */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --shadow-1: none;
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* The notched "ticket" corner on every button tier. */
.btn,
.site-header__start {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

/* ---------- Type ---------- */
h1, h2,
.sv-display, .sv-h1, .sv-h2 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}
h1 em, h2 em { font-style: italic; }

.eyebrow, .sv-caption,
.post-card__tag,
.partner-logos__label,
.site-footer__col-title {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

a { color: var(--sv-green-800); }
a:hover { color: var(--sv-green-700); text-decoration-thickness: 2px; }

/* ---------- Buttons: black CTAs, mono uppercase labels ---------- */
.btn, .site-header__start {
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn--lg { font-size: 13px; }
.btn--primary, .site-header__start { background: var(--sv-noire); color: #FFFFFF; }
.btn--primary:hover, .site-header__start:hover { background: #000000; color: #FFFFFF; }

/* Ghost buttons: a real border would be clipped away with the corner, so the
   1px rim is a pseudo-element filled with the border colour and clipped to a
   notch-shaped ring (even-odd polygon: outer outline, then the inner outline
   1px in — the diagonal sits 9.41px out so it runs parallel to the cut).
   Any bordered .btn variant joins this list; the pricing card's outline CTA
   is the one component sheet that ships its own. */
.btn--ghost-light, .btn--ghost-dark, .pricing-model__cta--outline {
  position: relative;
  border: none;
  border-radius: 0;
}
.btn--ghost-light::before, .btn--ghost-dark::before, .pricing-model__cta--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 0.15s ease;
  clip-path: polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 0,
    1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 9.41px),
    calc(100% - 9.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px);
}
.btn--ghost-light { background: #FFFFFF; color: var(--sv-noire); }
.btn--ghost-light:hover { background: var(--sv-cream); }
.btn--ghost-light::before { background: var(--sv-noire); }
.btn--ghost-light:hover::before { background: #000000; }
.btn--ghost-dark::before { background: rgba(255, 255, 255, 0.30); }
.btn--ghost-dark:hover::before { background: rgba(255, 255, 255, 0.55); }
.pricing-model__cta--outline::before { background: rgba(27, 27, 27, 0.16); }
.pricing-model__cta--outline:hover::before { background: var(--sv-noire-30); }

/* ---------- Header: white, hairline, mono nav ---------- */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--sv-line-soft);
}
.site-nav__link {
  font: 500 12px/20px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sv-noire-80);
}
.site-nav__link:hover, .site-nav__link.is-open, .site-nav__link.is-active { color: var(--sv-noire); }
.site-nav__underline { background: var(--sv-noire); height: 1px; bottom: 0; }
.signin__trigger { color: var(--sv-noire-80); }
.signin__trigger:hover { color: var(--sv-noire); }
.signin__panel { border-radius: var(--radius-lg); border-color: var(--sv-line); }
.mega { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08); }
.mega__item-label { color: var(--sv-green-800); }
.mega__feature { border: 1px solid var(--sv-line); }
.mega__feature:hover { border-color: var(--sv-noire); }

/* ---------- Footer: light, mono column titles ---------- */
.site-footer { background: var(--sv-cream); border-top: 1px solid var(--sv-line-soft); }
.site-footer__tagline { color: var(--sv-muted); }
.site-footer__col-title { color: var(--sv-subtle); }
.site-footer__link { color: #444444; }
.site-footer__link:hover { color: #000000; }
.site-footer__traveller { border: 1px solid rgba(0, 0, 0, 0.18); }
.site-footer__traveller:hover { background: #FFFFFF; border-color: var(--sv-noire); }
.site-footer__traveller-title { color: var(--sv-noire); }
.site-footer__traveller-domain { color: var(--sv-green-700); }
.site-footer__legal { border-top: 1px solid var(--sv-line-soft); }
.site-footer__copyright, .site-footer__legal-links span, .site-footer__status { color: var(--sv-subtle); }
.site-footer__status:hover { color: var(--sv-noire); }

/* ---------- Cards: hairline border, square corners, no float ---------- */
.card, .post-card, .ask-ai {
  border: 1px solid var(--sv-line);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.post-card:hover { border-color: var(--sv-noire); box-shadow: none; }
.post-card__tag { border-radius: var(--radius-sm); }

/* ---------- Chips squared off ---------- */
.badge { background: var(--sv-noire); border-radius: var(--radius-sm); }
.pill, .status-pill, .mega__item-tag, .mega__feature-tag { border-radius: var(--radius-sm); }
.mega__feature-tag { background: var(--sv-noire); }
.ask-ai__btn { border-radius: var(--radius-sm); }

/* Form controls follow the geometry. */
input, select, textarea { border-radius: var(--radius-md) !important; }