/* nevuapp.com — Home Plate V2.2 design system, for the web.
   Tokens mirror design-tokens-v2.2.json and MealPlanner/DesignSystem/
   (PlateColor, PlateType, PlateSpace, PlateShape). Change a value there
   first, then here. */

:root {
  color-scheme: light;

  /* Colour — PlateColor */
  --bg: #FFFDFC;               /* bg/background */
  --shell: #F0EEED;            /* bg/shell */
  --subtle: #F8F5F4;           /* bg/subtle */
  --surface: #FFFFFF;          /* cards */
  --hairline: rgba(0, 0, 0, 0.08);
  --rule: #AEAAA8;
  --text: #14110F;             /* text/primary */
  --text-2: #676260;           /* text/secondary */
  --accent: #F2573D;
  --accent-rgb: 242, 87, 61;
  --accent-soft: #FCE8E4;
  --accent-text: #B0311C;      /* links */
  --cta: #D2432B;              /* cta fill */
  --on-accent: #FFFFFF;
  --success-text: #127939;   /* status/success-text */
  --success-soft: #D9F6DD;
  --scrim: rgba(20, 17, 15, 0.4);
  --bloom: rgba(255, 255, 255, 0.45);  /* PlateIllustration.highlight */
  --wash-top: rgba(var(--accent-rgb), 0.55);
  --wash-bloom: rgba(var(--accent-rgb), 0.35);

  /* Space — PlateSpace (4pt grid) */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px;
  --s20: 20px; --s24: 24px; --s32: 32px; --s40: 40px;
  --margin: var(--s20);        /* screenMargin */

  /* Shape — PlateShape by role */
  --r-capsule: 999px;          /* cta, chip */
  --r-field: 14px;             /* PlateRadius.control */
  --r-card: 16px;              /* PlateShape.card */
  --r-container: 20px;         /* PlateShape.container */
  --r-thumb: 10px;             /* PlateRadius.chip */

  /* Elevation — PlateElevation.card */
  --elev-card: 0 1px 2px rgba(20, 17, 15, 0.04), 0 8px 24px rgba(20, 17, 15, 0.06);
  --elev-raised: 0 1px 2px rgba(20, 17, 15, 0.05), 0 16px 40px rgba(20, 17, 15, 0.10);

  /* Type — PlateType */
  --font-display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}


/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 400 17px/22px var(--font-body);          /* body 17/22 */
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  padding-inline: max(var(--margin), env(safe-area-inset-left)) max(var(--margin), env(safe-area-inset-right));
  padding-block: max(var(--s24), env(safe-area-inset-top)) max(var(--s24), env(safe-area-inset-bottom));
}
a { color: var(--accent-text); text-underline-offset: 2px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }

/* ---------- Coral wash (WelcomeBackdrop) ---------- */
/* accent .55 → accent-soft → page, with three soft blurred blooms. Sits
   behind the top of every page; content scrolls over it. */

.wash {
  position: absolute; inset: 0 0 auto 0; height: 440px;
  z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--wash-top) 0%, var(--accent-soft) 58%, var(--bg) 100%);
  /* fade the blooms out too, so nothing is clipped at the bottom edge */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.wash::before, .wash::after, .wash > i {
  content: ""; position: absolute; border-radius: 50%; filter: blur(40px);
}
.wash::before {
  width: 520px; height: 160px; left: calc(50% - 320px); top: -40px;
  background: var(--wash-bloom); transform: rotate(-12deg);
}
.wash > i {
  width: 480px; height: 120px; left: calc(50% - 160px); top: 70px;
  background: var(--bloom); transform: rotate(10deg);
}
.wash::after {
  width: 520px; height: 180px; left: calc(50% - 220px); top: 170px;
  background: rgba(var(--accent-rgb), 0.18); transform: rotate(-8deg); filter: blur(44px);
}
.wash.tall { height: 560px; }

.page { position: relative; z-index: 1; width: 100%; margin: 0 auto; }
.page.narrow { max-width: 440px; }
.page.prose-width { max-width: 680px; }

/* ---------- Type roles ---------- */

.t-large, .t-display, .t-title, .t-heading {
  font-family: var(--font-display); color: var(--text); text-wrap: balance;
}
.t-large   { font-weight: 800; font-size: 34px; line-height: 41px; letter-spacing: -0.34px; }
.t-display { font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -0.28px; }
.t-title   { font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -0.11px; }
.t-heading { font-weight: 700; font-size: 17px; line-height: 22px; }
.t-sub     { font-size: 15px; line-height: 20px; }
.t-foot    { font-size: 13px; line-height: 18px; }
.muted     { color: var(--text-2); }

/* ---------- Brand row ---------- */

.brand {
  display: inline-flex; align-items: center; gap: var(--s12);
  text-decoration: none; color: var(--text);
}
.brand img { width: 40px; height: 40px; }
.brand span { font: 800 20px/24px var(--font-display); letter-spacing: -0.2px; }

/* App icons: the iOS squircle, ~22.5% radius */
.app-icon { display: block; border-radius: 22.5%; box-shadow: 0 0 0 0.5px var(--hairline); flex: none; }

.nevu-mark { height: 9px; width: auto; color: currentColor; display: inline-block; vertical-align: 0; }

/* ---------- Surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--elev-card);
}
.container-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-container);
  box-shadow: var(--elev-raised);
}

/* ---------- Controls ---------- */

.btn-cta, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  height: 52px; padding: 0 var(--s24);
  border-radius: var(--r-capsule);
  font: 600 17px/22px var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.btn-cta { background: var(--cta); color: var(--on-accent); border: 0; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--hairline); }
.btn-cta:active, .btn-secondary:active { transform: scale(0.98); }
.btn-cta:hover { filter: brightness(1.04); }
.btn-block { display: flex; width: 100%; }
.btn-compact { height: 36px; padding: 0 var(--s16); font-size: 15px; line-height: 20px; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s8);
  height: 32px; padding: 0 var(--s12) 0 var(--s4);
  border-radius: var(--r-capsule);
  background: var(--subtle); border: 1px solid var(--hairline);
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text);
}

/* ---------- Footer ---------- */

.foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--s8); margin: var(--s40) 0 0;
  font-size: 13px; line-height: 18px; color: var(--text-2);
}
.foot a { color: inherit; }

/* ---------- Long-form (legal) ---------- */

.doc-head { padding-top: var(--s16); }
.doc-head .brand { margin-bottom: var(--s40); }
.doc-head h1 { margin: 0 0 var(--s8); }
.doc-head .lede { margin: 0 0 var(--s12); font-size: 17px; line-height: 24px; color: var(--text-2); }
.doc-head .date { margin: 0 0 var(--s32); font-size: 13px; line-height: 18px; color: var(--text-2); }

.prose p, .prose li { font-size: 17px; line-height: 26px; }   /* body 17, relaxed leading for reading */
.prose p { margin: 0 0 var(--s16); }
.prose ul { margin: 0 0 var(--s16); padding-left: var(--s20); }
.prose li { margin-bottom: var(--s8); }
.prose li::marker { color: var(--accent); }
.prose h2 { margin: var(--s40) 0 var(--s12); }
.prose h3 { margin: var(--s24) 0 var(--s4); }
.prose strong { font-weight: 600; }
.prose .card { padding: var(--s20); margin: var(--s24) 0; }
.prose .card p:last-child, .prose .card ul:last-child { margin-bottom: 0; }
.prose .card.callout { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.prose .lead { font: 700 17px/22px var(--font-display); margin-bottom: var(--s8); }

.table-card { padding: 0 !important; overflow: hidden; }
.table-card .wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s12) var(--s16); border-bottom: 1px solid var(--hairline); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); background: var(--subtle); }
.prose td:first-child { font-weight: 600; width: 22%; }

/* Phones: each provider becomes its own stacked block, labelled from data-label. */
@media (max-width: 599px) {
  .prose thead { display: none; }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: auto; }
  .prose tr { padding: var(--s16); border-bottom: 1px solid var(--hairline); }
  .prose tr:last-child { border-bottom: 0; }
  .prose td { padding: 0; border: 0; }
  .prose td + td { margin-top: var(--s8); }
  .prose td:first-child { font: 700 17px/22px var(--font-display); width: auto; }
  .prose td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2);
  }
}

.prose + .foot, .doc-foot {
  justify-content: flex-start; padding-top: var(--s20); border-top: 1px solid var(--hairline);
}

@media (min-width: 720px) {
  :root { --margin: var(--s32); }
  body { padding-top: max(var(--s40), env(safe-area-inset-top)); }
  .wash { height: 520px; }
  .wash::before { width: 900px; height: 240px; left: calc(50% - 560px); }
  .wash > i { width: 800px; height: 180px; left: calc(50% - 240px); }
  .wash::after { width: 900px; height: 260px; left: calc(50% - 380px); top: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}