/* site.css — marketing site + privacy policy.
   ---------------------------------------------------------------
   Deliberately a lean, standalone copy of the extension's design tokens
   (see theme.css) rather than theme.css itself — the site needs the same
   palette/type to feel like the same product, but none of the app
   component CSS (cards, toolbars, data tables). Keep the token values in
   sync by hand if the extension's palette ever changes.

   Fonts are self-hosted (fonts/*.woff2, copied from the extension) rather
   than loaded from Google Fonts — a privacy-focused product shouldn't ship
   a third-party tracking request on its own privacy policy page. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --bg: #f8f9ff;
  --surface: #ffffff;
  --surface-low: #eff4ff;
  --surface-mid: #e5eeff;
  --on-surface: #0b1c30;
  --on-surface-variant: #45464d;
  --border: #e2e8f0;

  --primary: #0f172a;
  --primary-hover: #1e293b;
  --on-primary: #ffffff;

  --secondary: #006c49;
  --secondary-surface: #e6f5ec;
  --error: #ba1a1a;
  --error-container: #ffdad6;

  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);

  --container: 720px;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
a {
  color: var(--on-surface);
}
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.05);
}
.site-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--on-surface);
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}
/* The umbrella brand is a plain wordmark — the bed icon belongs to Points
   Repricer specifically, so it's used on tool cards / the tool eyebrow, not
   on the site chrome. */
.brand-wordmark {
  letter-spacing: -0.03em;
  font-size: 19px;
}
.site-header nav {
  margin-left: auto;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header nav a {
  color: var(--on-surface-variant);
  text-decoration: none;
}
.site-header nav a:hover {
  color: var(--on-surface);
}

/* "Points Repricer · a PointsRelated tool" line above a tool page's hero */
.tool-eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--on-surface);
}
.tool-eyebrow img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.tool-eyebrow-sep {
  color: #c6c6cd;
  margin: 0 2px;
}
/* the trailing "a PointsRelated tool" reads lighter than the tool name */
.tool-eyebrow-muted {
  font-weight: 500;
  color: var(--on-surface-variant);
}

/* ---------- Umbrella home: tool cards ---------- */
.section-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 14px;
}
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 0 0 64px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
a.tool-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tool-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tool-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tool-card p {
  margin: 0;
  font-size: 15px;
  color: var(--on-surface-variant);
  flex: 1;
}
.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.tool-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-low);
  color: var(--on-surface-variant);
  font-size: 22px;
  font-weight: 600;
}
.tool-card-soon {
  opacity: 0.8;
}
.pill-inline {
  margin-bottom: 0;
  font-size: 12px;
  padding: 3px 10px;
}
.tool-cta {
  font-weight: 600;
  color: var(--on-surface);
  font-size: 15px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 48px;
  text-align: center;
}
.hero h1 {
  font-size: 44px;
  font-weight: 700;
}
.hero .lead {
  margin: 16px auto 0;
  max-width: 34rem;
  font-size: 18px;
  color: var(--on-surface-variant);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--secondary-surface);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ---------- CTAs ---------- */
.btn-lg {
  font-size: 16px;
  padding: 14px 26px;
}
.btn-sm {
  font-size: 13px;
  padding: 8px 14px;
}
/* Header button — sits after the text links, visible while scrolling.
   Selector is deliberately specific: `.site-header nav a` above sets link
   colour to grey and would otherwise win over `.btn`. */
.site-header nav a.nav-cta {
  margin-left: 6px;
  color: var(--on-primary);
}
.site-header nav a.nav-cta:hover {
  color: var(--on-primary);
}
/* Home hero: a single primary button + a one-line reassurance under it. */
.hero-cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-cta-note {
  font-size: 13px;
  color: var(--on-surface-variant);
}
/* Tool hero: the waiting-list form lives right in the hero — the form IS
   the call to action, and the product screenshot sits just beneath as
   proof. Centred, capped so the input doesn't sprawl on wide screens. */
.hero-form {
  margin: 28px auto 0;
  max-width: 34rem;
  text-align: left;
}
.hero-form .form-row {
  justify-content: center;
}
.hero-form .form-note {
  text-align: center;
}
.hero .form-msg {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* Closing band at the foot of the tool page for readers who scrolled the
   whole way — points back up to the one form in the hero. */
.cta-band {
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 40px 28px;
  margin: 0 0 64px;
}
.cta-band h2 {
  font-size: 26px;
  font-weight: 700;
}
.cta-band p {
  margin: 8px 0 22px;
  color: var(--on-surface-variant);
  font-size: 15px;
}
@media (max-width: 560px) {
  .nav-cta {
    display: none; /* hero button is right there; keep the small header uncluttered */
  }
}

/* ---------- Waiting list ---------- */
.waitlist {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  margin: 40px 0;
}
.waitlist h2 {
  font-size: 22px;
  font-weight: 700;
}
.waitlist p {
  margin: 8px 0 20px;
  color: var(--on-surface-variant);
  font-size: 15px;
}
.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.form-row input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--on-surface);
}
.form-row input[type="email"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: transparent;
}
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-block;
  line-height: normal;
}
.btn:hover:not(:disabled) {
  background: var(--primary-hover);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Bot trap — real users never see or fill this. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--on-surface-variant);
}
.form-msg {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}
.form-msg[hidden] {
  display: none;
}
.form-msg.ok {
  background: var(--secondary-surface);
  color: var(--secondary);
}
.form-msg.err {
  background: var(--error-container);
  color: var(--error);
}

/* ---------- Product screenshots ---------- */
/* Images live in site/img/ as WebP, generated from store/screenshots/ (mock
   data — never real bookings). A faint browser-window frame makes them read
   as the product rather than a pasted picture. */
.wrap-wide {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}
.shot {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.28), var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
a.shot {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -24px rgba(15, 23, 42, 0.34), var(--shadow-md);
}
.shot-bar {
  height: 30px;
  background: var(--surface-low);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.shot-bar i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d3dbe8;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--on-surface-variant);
}
/* Vertical margins only — this class shares its element with .wrap-wide,
   whose `margin: 0 auto` does the centring. A shorthand `margin: 8px 0 56px`
   here would zero the horizontal auto margins and left-align the shot on
   any viewport wider than the container. */
.shot-hero {
  margin-top: 8px;
  margin-bottom: 56px;
}
.shots-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 0 0 64px;
}
.shots-2 figure {
  margin: 0;
}
.section-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.section-sub {
  margin: 0 0 24px;
  color: var(--on-surface-variant);
  font-size: 15px;
}

/* ---------- Feature list ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 16px;
  margin: 40px 0 64px;
}
.feature {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.feature h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.feature p {
  margin: 0;
  font-size: 14px;
  color: var(--on-surface-variant);
}

/* ---------- Long-form doc (privacy policy) ---------- */
.doc {
  padding: 48px 0 72px;
}
.doc h1 {
  font-size: 34px;
}
.doc-meta {
  margin: 12px 0 32px;
  font-size: 14px;
  color: var(--on-surface-variant);
}
.doc h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 12px;
}
.doc h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 8px;
}
.doc p,
.doc li {
  font-size: 15.5px;
  color: var(--on-surface);
}
.doc ul {
  padding-left: 22px;
}
.doc li {
  margin-bottom: 8px;
}
.doc code {
  background: var(--surface-mid);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 14px;
}
.summary-box {
  background: var(--secondary-surface);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 0 0 32px;
}
.summary-box p:last-child {
  margin-bottom: 0;
}
.callout {
  background: var(--surface);
  border-left: 3px solid var(--secondary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin: 20px 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  box-shadow: 0 -1px 8px rgba(15, 23, 42, 0.03);
  padding: 28px 0;
  margin-top: auto;
}
.site-footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--on-surface-variant);
}
.site-footer-links {
  display: flex;
  gap: 20px;
}
.site-footer a {
  color: var(--on-surface-variant);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--on-surface);
}

@media (max-width: 560px) {
  .hero {
    padding: 48px 0 32px;
  }
  .hero h1 {
    font-size: 34px;
  }
}