/* ==========================================================================
   Nestriq — nestriq.app
   Colors are sampled from the app icon (cyan-blue mark on deep navy).
   Type and the spacing/radius scales still mirror NestriqDesign.swift.
   ========================================================================== */

:root {
  /* Sampled from the app icon: deep navy ground, cyan-blue mark.
     Icon hues run 168°–214° (median 196°), so the accent is a true
     cyan-blue rather than the indigo this used to be. */
  --bg:           #F4F7F9;
  --surface:      #FFFFFF;
  --surface-muted:#E7EEF3;
  --hairline:     rgba(10, 25, 52, 0.10);
  --accent:       #0E6E9C;   /* icon mid-blue · 5.6:1 on white */
  --accent-soft:  rgba(14, 110, 156, 0.10);
  --text:         #0A1934;   /* the icon's darkest navy */
  --text-muted:   #47607A;
  --text-faint:   #6F8399;

  /* Spacing scale from Nestriq.Spacing */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 12px;
  --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 36px;

  /* Radius scale from Nestriq.Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(10, 25, 52, 0.05);
  --shadow-md: 0 4px 20px rgba(10, 25, 52, 0.07);
  --shadow-lg: 0 24px 60px rgba(10, 25, 52, 0.12);

  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The icon sits on a near-black navy (#010006). Lifted slightly so the
       page isn't pure black, and the mark's bright cyan becomes the accent. */
    --bg:           #080C16;
    --surface:      #121A2A;
    --surface-muted:#0D131F;
    --hairline:     rgba(255, 255, 255, 0.08);
    --accent:       #5CCBEE;   /* icon highlight cyan · 10.4:1 on the bg */
    --accent-soft:  rgba(92, 203, 238, 0.14);
    --text:         #E6EDF5;
    --text-muted:   #93A6BC;
    --text-faint:   #6B7F96;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

/* --------------------------------------------------------------- base --- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Nunito, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--sp-md); }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 var(--sp-lg); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-xl); }
.narrow { max-width: 760px; }

section { padding: clamp(56px, 9vw, 104px) 0; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: var(--sp-lg);
}

.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--text-muted); }

.center { text-align: center; }
.center .lede { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- header --- */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg); /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: var(--sp-sm); }

nav.site-nav { display: flex; align-items: center; gap: var(--sp-xl); }

/* :not(.btn) matters — without it these rules out-specify .btn-primary and
   grey out the button label. */
nav.site-nav a:not(.btn) {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}
nav.site-nav a:not(.btn):hover { color: var(--text); text-decoration: none; }

@media (max-width: 720px) {
  nav.site-nav .hide-sm { display: none; }
  nav.site-nav { gap: var(--sp-md); }
}

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px var(--accent-soft);
}
@media (prefers-color-scheme: dark) { .btn-primary { color: #061019; } }
.btn-primary:hover { box-shadow: 0 10px 28px var(--accent-soft); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}

.btn-sm { padding: 9px 18px; font-size: 0.92rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: center;
}
.center .btn-row { justify-content: center; }

.note { font-size: 0.88rem; color: var(--text-faint); margin-top: var(--sp-md); }

/* --------------------------------------------------------------- hero --- */

.hero { padding-top: clamp(48px, 8vw, 88px); padding-bottom: 0; overflow: hidden; }


.hero h1 { margin-bottom: var(--sp-lg); }
.hero h1 .accent { color: var(--accent); }

/* --------------------------------------------- hero without a mockup --- */

.hero-solo {
  position: relative;
  padding-top: clamp(56px, 10vw, 104px);
}
.hero-solo::before {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: min(900px, 130vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero-solo > .wrap { position: relative; z-index: 1; }
.hero-solo h1 { max-width: 15ch; margin-left: auto; margin-right: auto; }

/* The mechanic line under the slogan. Sits between h1 and .lede in weight
   so the pair reads as one thought: promise, then how it works. */
.hero-sub {
  margin: calc(var(--sp-md) * -1) auto var(--sp-lg);
  max-width: 24ch;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hero-icon {
  width: clamp(84px, 12vw, 112px);
  height: auto;
  margin: 0 auto var(--sp-xl);
  border-radius: 24%;
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------- screenshot shots --- */

.screens[hidden] { display: none; }

/* The gallery uses <details> for the mobile collapse, but must not inherit the
   FAQ's card styling further down this file. */
.screens details {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.screens summary {
  width: max-content;
  max-width: 100%;
  margin: var(--sp-xl) auto 0;
  padding: 10px 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  color: var(--text-muted);
  justify-content: center;
}
.screens summary::after { font-size: 1.2rem; }

/* On anything wider than a phone the gallery is simply open, so the toggle
   would be noise. The open attribute is in the HTML, so hiding the control
   here is safe even with JavaScript off. */
@media (min-width: 721px) {
  .screens summary { display: none; }
}

.shots {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: var(--sp-xxl);
}

.shot { margin: 0; text-align: center; }

/* The screenshots are dark, and so is the bezel colour, so without the inset
   ring the frame and the screen melt into one black blob on a light page. */
.shot img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  border: 8px solid #10141F;
  background: #10141F;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  display: block;
}
@media (prefers-color-scheme: dark) {
  .shot img {
    border-color: #26303F;
    background: #26303F;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  }
}

.shot figcaption {
  margin-top: var(--sp-md);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-faint);
}

/* --------------------------------------------------------- logo strip --- */

.strip {
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: clamp(48px, 8vw, 88px);
}
.strip .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md) var(--sp-xl);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-faint);
}
.strip span { white-space: nowrap; }

/* --------------------------------------------------------------- grid --- */

.grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--sp-xxl);
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: var(--sp-sm); }
.card p { color: var(--text-muted); font-size: 0.96rem; margin: 0; }

.ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-md);
}
.ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------- block builder demo --- */
/* The web version of the interactive onboarding screen. Block tints are the
   literal colours from OnboardingView.swift and are set inline by the JS.
   Keep .builder inside a .wrap — it has no gutter of its own. */

.builder { max-width: 560px; margin: var(--sp-xl) auto 0; }

.builder-page {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
}

.builder-title { font-size: 1.02rem; font-weight: 600; color: var(--text); }
.builder-title::before { content: "\1F4C4"; margin-right: 8px; }

.builder-clear {
  background: none;
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.builder-clear:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.builder-clear:disabled { opacity: .35; cursor: default; }

.builder-canvas {
  padding: var(--sp-md);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-empty {
  margin: auto;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.builder-block {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 13px 14px;
  background: var(--surface-muted);
  border-radius: var(--r-md);
  animation: builder-in .18s ease;
}
@keyframes builder-in { from { opacity: 0; transform: translateY(-5px); } }

.builder-block svg { flex: none; display: block; }
.builder-block .bar { flex: 1; height: 9px; border-radius: 999px; background: var(--hairline); }
.builder-block .mono {
  flex: none;
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.builder-block .tick {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; line-height: 1;
}
.builder-block .cells { flex: 1; display: flex; gap: 6px; }
.builder-block .cells i { flex: 1; height: 9px; border-radius: 3px; background: var(--hairline); }

/* The payoff line — this is the point of the whole demo, so give it room
   and real contrast rather than treating it as a caption. */
.builder-caption {
  margin: var(--sp-lg) auto 0;
  max-width: 42ch;
  min-height: 3.4em;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--accent);
}

.builder-label {
  margin: var(--sp-sm) 0 var(--sp-md);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.builder-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.builder-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: var(--sp-md) var(--sp-sm);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.builder-add:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.builder-add:active:not(:disabled) { transform: none; }
.builder-add:disabled { opacity: .35; cursor: default; }

@media (max-width: 460px) {
  .builder-picker { grid-template-columns: repeat(2, 1fr); }
  .builder-caption { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) { .builder-block { animation: none; } }

/* ------------------------------------------------------------- chips ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
  margin-top: var(--sp-xl);
}
.chip {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------ pricing --- */

/* auto-fit rather than a fixed column count, because the number of plan cards
   changes (monthly is currently pulled). 240px min fits three across at 1080,
   and still fits four if the monthly card ever comes back — no CSS edit needed. */
.price-grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
  margin: var(--sp-xxl) auto 0;
}
@media (max-width: 560px) {
  .price-grid { grid-template-columns: 1fr; max-width: 380px; }
}

.price {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.price.featured { border-color: var(--accent); box-shadow: 0 12px 40px var(--accent-soft); }

.price .tier { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.price.featured .tier { color: var(--accent); }
.price .amount {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: var(--sp-sm) 0 var(--sp-xs);
  line-height: 1.1;
}
.price .amount small { font-size: 0.9rem; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.price .blurb { color: var(--text-muted); font-size: 0.92rem; margin-bottom: var(--sp-lg); }

.ticks { list-style: none; margin: 0 0 var(--sp-xl); padding: 0; }
.ticks li {
  display: flex; gap: var(--sp-sm); align-items: flex-start;
  font-size: 0.95rem; color: var(--text-muted);
  padding: 5px 0;
}
.ticks li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
  flex: none;
  line-height: 1.5;
}
.price .btn { margin-top: auto; width: 100%; }

/* ---------------------------------------------------------------- faq --- */

.faq { max-width: 760px; margin: var(--sp-xxl) auto 0; }
details {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-xl);
  margin-bottom: var(--sp-md);
  box-shadow: var(--shadow-sm);
}
summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-md);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex: none;
}
details[open] summary::after { content: "−"; }
details p { margin: var(--sp-md) 0 0; color: var(--text-muted); font-size: 0.96rem; }

/* ------------------------------------------------------ signup form ----- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot — hidden from people, left in the DOM for bots to trip over. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}
.signup[hidden] { display: none; }

.signup-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  box-shadow: var(--shadow-sm) inset;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.signup-input::placeholder { color: var(--text-faint); }
.signup-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.signup .btn { flex: 0 0 auto; }

@media (max-width: 520px) {
  .signup { flex-direction: column; }
  .signup .btn { width: 100%; }

  /* The base rule sets flex: 1 1 240px. Once the container is a COLUMN, the
     main axis is vertical, so that 240px flex-basis becomes the input's
     HEIGHT — which with border-radius: 999px rendered as a giant egg.
     Reset the basis and drive the width directly instead. */
  .signup-input {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

.form-msg {
  min-height: 1.5em;
  margin: var(--sp-md) 0 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.form-msg:empty { margin-top: 0; }
.form-msg.is-success { color: var(--accent); }
.form-msg.is-error   { color: #C2410C; }
@media (prefers-color-scheme: dark) { .form-msg.is-error { color: #FB923C; } }

/* --------------------------------------------------------------- cta ---- */

.cta-band {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: clamp(32px, 6vw, 64px) var(--sp-xl);
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------- footer --- */

footer.site {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-xxl) 0;
  margin-top: var(--sp-xxl);
}
footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg) var(--sp-xl);
  align-items: center;
  justify-content: space-between;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--sp-lg); }
footer.site a, footer.site p { color: var(--text-faint); font-size: 0.9rem; }
.footer-slogan { display: block; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
footer.site p { margin: 0; }
footer.site a:hover { color: var(--text); text-decoration: none; }

/* -------------------------------------------------------- doc (legal) --- */

.doc { padding-top: var(--sp-xxl); }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: var(--sp-sm); }
.doc .updated { color: var(--text-faint); font-size: 0.9rem; margin-bottom: var(--sp-xxl); }
.doc h2 { font-size: 1.3rem; margin: var(--sp-xxl) 0 var(--sp-md); }
.doc h3 { margin: var(--sp-xl) 0 var(--sp-sm); }
.doc p, .doc li { color: var(--text-muted); }
.doc ul, .doc ol { padding-left: 1.25rem; margin: 0 0 var(--sp-lg); }
.doc li { margin-bottom: var(--sp-sm); }
.doc strong { color: var(--text); font-weight: 600; }

.callout {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-xl);
  margin: var(--sp-xl) 0;
}
.callout p:last-child { margin-bottom: 0; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-xl);
  font-size: 0.94rem;
}
.doc th, .doc td {
  text-align: left;
  padding: var(--sp-md);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.doc th { font-weight: 600; color: var(--text); }
.doc td { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}