/*
 * Summely marketing site.
 *
 * One stylesheet, no build step. Values come from branding/BRAND-GUIDELINES.md
 * and are identical to the product's design tokens — the brand consecrates the
 * app's palette rather than inventing a second one.
 *
 * The site is light, with two deliberate dark surfaces — the hero's journal
 * card and the closing band. Guidelines §3.4 (v2.1): ~75% Paper and white,
 * ~20% Ledger Ink, ~5% Sum Blue. The page becomes the ledger it sells:
 * entries on paper, and a struck total at the end.
 *
 * The contrast rule INVERTS from the old dark site. On Paper and white,
 * accent-600 is the interactive blue and accent-400 FAILS as text. Read the
 * comment on the accent tokens before reaching for a blue.
 */

@layer reset, tokens, base, layout, components, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  /* min-height alone only stretches the body; the footer still stops where
     the content does. Short pages — Contact, the legal pages — then show a
     band of paper below a dark footer. The column pushes it down instead. */
  body {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }
  body > main { flex: 1 0 auto; }
  img, svg, video { display: block; max-inline-size: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li { text-wrap: pretty; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light;

    /* Light surfaces — the product's own lightTheme values, so the site
       feels like the thing a signup lands in. */
    --paper: #ffffff;        /* card surface */
    --paper-alt: #f6f8fb;    /* page background */
    --paper-line: #e3e9f1;   /* card borders, decorative rules */

    /* Ink — text on light, and the two dark bands. */
    --ink-900: #05090f;
    --ink-800: #0b1220;
    --ink-700: #121b2c;
    --ink-600: #1b2639;
    --ink-500: #27344a;
    --ink-300: #61707f;
    --ink-200: #94a3b8;
    --ink-050: #e9eef5;

    /* Sum Blue. On LIGHT surfaces the dark site's rule inverts:
       accent-600 is 6.3:1 on Paper and is the interactive blue;
       accent-500 is 4.9:1, passes AA, and is reserved for the double rule;
       accent-400 is 3.5:1 and FAILS as text on light — it exists only for
       rules and accents inside .on-ink. Never on light, not even once. */
    --accent-600: #1d4ed8;
    --accent-500: #2563eb;
    --accent-400: #3b82f6;
    --accent-100: #dbeafe;

    --positive-600: #047857;
    --negative-600: #b91c1c;

    --bg: var(--paper-alt);
    --surface: var(--paper);
    --border: var(--paper-line);
    --border-strong: #cbd5e1;
    --text: var(--ink-800);
    --text-muted: #475569;
    --text-subtle: var(--ink-300);
    --link: var(--accent-600);

    /* Elevation on paper is a soft shadow plus a hairline, never a heavy
       drop — the page should read as documents on a desk. */
    --shadow-card: 0 1px 2px rgb(11 18 32 / 0.05), 0 8px 24px rgb(11 18 32 / 0.06);
    --shadow-raised: 0 1px 3px rgb(11 18 32 / 0.07), 0 16px 40px rgb(11 18 32 / 0.10);

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --text-hero: clamp(2.5rem, 1.43rem + 3.57vw, 4rem);
    --text-h2: clamp(1.75rem, 1.21rem + 1.79vw, 2.5rem);
    --text-h3: 1.5rem;
    --text-body-lg: 1.125rem;
    --text-body: 1rem;
    --text-caption: 0.8125rem;
    --text-label: 0.6875rem;

    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
    --space-12: 3rem;    --space-16: 4rem;    --space-24: 6rem;
    --section-pad: clamp(var(--space-16), 8vw, var(--space-24));

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-pill: 999px;

    --container: 70rem;
    --container-narrow: 52rem;
    --prose: 42rem;
    --gutter: clamp(var(--space-4), 4vw, var(--space-8));
  }

  /* The two dark surfaces re-scope the same properties, so every component
     inside them works unmodified — no dark variant of anything. */
  .on-ink {
    color-scheme: dark;
    --bg: var(--ink-900);
    --surface: var(--ink-700);
    --border: var(--ink-600);
    --border-strong: var(--ink-500);
    --text: var(--ink-050);
    --text-muted: var(--ink-200);
    --text-subtle: #8494ab;
    --link: var(--accent-400);
    background: var(--ink-800);
    color: var(--text);
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.6;
  }

  h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
  h1 { font-size: var(--text-hero); line-height: 1.05; }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); letter-spacing: -0.0125em; font-weight: 600; }

  /* Both of these read from the re-scoped tokens rather than a fixed hex,
     because the accessible blue is not the same blue on both surfaces:
     accent-600 on paper (6.7:1), accent-400 on ink. Hard-coding accent-400
     here — as the dark site did — makes every body link fail on paper and
     hover to a near-white that vanishes against it. */
  a { color: var(--link); text-underline-offset: 0.2em; }
  a:hover { color: var(--text); }

  /* One visible focus treatment everywhere, including inside dark cards. */
  :focus-visible {
    outline: 2px solid var(--accent-400);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection { background: var(--accent-100); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .wrap {
    inline-size: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }
  .wrap--narrow { max-inline-size: var(--container-narrow); }
  .wrap--prose { max-inline-size: var(--prose); }

  .section { padding-block: var(--section-pad); }
  /* Alternation on paper is a surface change, not a colour change: white
     cards on Paper, or a white band between Paper sections. */
  .section--band { background: var(--paper); }
  .section--tint { background: var(--paper-alt); }
  /* The closing band. Dark, and the one place the full-width double rule
     appears — the page ends the way an account does. */
  .section--close {
    border-block-start: 6px double var(--accent-400);
  }

  .stack > * + * { margin-block-start: var(--space-4); }
  .stack--lg > * + * { margin-block-start: var(--space-8); }

  .grid { display: grid; gap: var(--space-6); }
  @media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

  .skip-link {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-start: var(--space-4);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--accent-500);
    color: #fff;
    border-radius: var(--radius-md);
    transition: inset-block-start 0.15s;
  }
  .skip-link:focus { inset-block-start: var(--space-4); color: #fff; }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* --- site header ------------------------------------------------------ */
  .site-header {
    background: var(--paper);
    border-block-end: 1px solid var(--border);
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
  }
  .site-header > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-3);
  }
  /* The lockup ships as an <img> pointing at the branding master, never as
     inline SVG: an <img> is a boundary the page cascade cannot reach through,
     so no future rule can recolour a stroke or flip the slash. */
  .logo img { block-size: 28px; width: auto; }
  .logo:focus-visible { outline-offset: 4px; }

  .nav { display: flex; align-items: center; gap: var(--space-6); }
  /* :not(.btn) matters. The signup button sits inside the same <nav>, and a
     bare `.nav a` rule is one class more specific than `.btn--primary`, so it
     repainted the button's label in muted ink on Sum Blue — 1.6:1, and the
     most important control on the site was the least readable thing on it. */
  .nav a:not(.btn) {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-caption);
    font-weight: 500;
  }
  .nav a:not(.btn):hover,
  .nav a:not(.btn)[aria-current="page"] { color: var(--text); }
  .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4em; }

  /* Mobile disclosure uses <details>, so navigation works with JS disabled. */
  .nav-toggle { display: none; }
  /* Every rule that decides whether these two are on screen is qualified with
     .site-header, so none of them can be settled by source order. A bare
     `.nav-signup--mobile { display: none }` ties with `.btn { display:
     inline-flex }` on specificity, and whichever is written second wins —
     which is how this element managed to be missing from the phone header and
     duplicated on the desktop one, from the same declaration. */
  .site-header .nav-login--mobile,
  .site-header .nav-signup--mobile { display: none; }
  @media (max-width: 47.99rem) {
    .nav--desktop { display: none; }
    .nav-toggle { display: block; order: 3; }
    .site-header .nav-login--mobile { display: inline-block; order: 1; }
    .site-header .nav-signup--mobile { display: inline-flex; order: 2; }
    .site-header > .wrap { flex-wrap: nowrap; gap: var(--space-3); }
    .logo { margin-inline-end: auto; }
    .nav-toggle summary {
      list-style: none;
      cursor: pointer;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-size: var(--text-caption);
      color: var(--text-muted);
    }
    .nav-toggle summary::-webkit-details-marker { display: none; }
    .nav-toggle[open] summary { color: var(--text); border-color: var(--ink-500); }
    .nav-toggle .nav {
      position: absolute;
      inset-inline: var(--gutter);
      margin-block-start: var(--space-3);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-2);
    }
    .nav-toggle .nav a { padding: var(--space-3); font-size: var(--text-body); }
  }

  /* --- buttons ---------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-body);
    text-decoration: none;
    border: 1px solid transparent;
    /* A two-word label is not a paragraph. Without this, "Start free" broke
       across two lines in the phone header, where the row is tightest. */
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
  }
  /* White on accent-500 is 4.6:1 — the blue works as a fill, not as text. */
  .btn--primary { background: var(--accent-500); color: #fff; }
  .btn--primary:hover { background: var(--accent-600); color: #fff; }
  /* Hover has to travel *toward* the text on whichever surface it is on. The
     old pair went ink-500 → ink-200, which darkens on ink and lightens on
     paper — on the light site the outline faded as you reached for it. */
  .btn--secondary { border-color: var(--border-strong); color: var(--text); }
  .btn--secondary:hover { border-color: var(--text); color: var(--text); }

  .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .btn--compact { padding: var(--space-2) var(--space-4); font-size: var(--text-caption); }

  /* Log in is a quiet text link beside a filled Sign up: two actions, one
     obvious. Making both buttons would make neither the answer. */
  .nav-login {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-caption);
    font-weight: 500;
    white-space: nowrap;
  }
  .nav-login:hover { color: var(--text); }

  /* --- section furniture ------------------------------------------------ */
  .eyebrow {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.064em;
    font-weight: 600;
    color: var(--text-subtle);
    margin-block-end: var(--space-3);
  }
  .lede { font-size: var(--text-body-lg); color: var(--text-muted); max-inline-size: var(--prose); }
  .muted { color: var(--text-muted); }
  .subtle { color: var(--text-subtle); font-size: var(--text-caption); }

  /* --- hero ------------------------------------------------------------- */
  .hero { padding-block: clamp(var(--space-16), 10vw, var(--space-24)); }
  .hero h1 { max-inline-size: 15ch; }
  .hero .lede { margin-block-start: var(--space-6); }
  .hero .btn-row { margin-block-start: var(--space-8); }
  .hero-grid { display: grid; gap: var(--space-16); align-items: center; }
  @media (min-width: 64rem) {
    .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  }

  /* --- the journal entry: the site's one signature element -------------- */
  /* A dark artifact on a paper page — the product's own shell. It re-scopes
     the surface tokens for the same reason .on-ink does: every rule inside it
     asks for --text-muted and must get the dark-surface value, or the figures
     wash out against the ink. */
  .ledger-card {
    color-scheme: dark;
    --text: var(--ink-050);
    --text-muted: var(--ink-200);
    --text-subtle: #8494ab;
    --border: var(--ink-600);
    color: var(--text);
    background: var(--ink-700);
    border: 1px solid var(--ink-600);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  }
  .ledger-card table { inline-size: 100%; border-collapse: collapse; }
  .ledger-card caption {
    text-align: start;
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.064em;
    color: var(--text-subtle);
    padding-block-end: var(--space-4);
  }
  .ledger-card th, .ledger-card td {
    padding-block: var(--space-2);
    font-size: var(--text-caption);
    text-align: start;
  }
  .ledger-card th { color: var(--text-subtle); font-weight: 500; }
  .ledger-card .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }
  .ledger-card tbody tr + tr td { border-block-start: 1px solid var(--ink-600); }
  /* The struck total: the brand's double rule, restated in the product's
     own material. A DOUBLE rule, never a single one — in bookkeeping a single
     underline is a subtotal, and this row is the whole point of the table.
     This is the 5% blue budget for the section. */
  .ledger-card tfoot td {
    /* 6px, not 5: the browser splits a double border into three, so 6 gives
       an even 2-2-2 and the gap actually reads. At 5px it is 2-1-2 and the
       rule looks like one thick line — which is the subtotal story, not the
       closed-books one. 2:2 also matches the logo's own stroke-to-gap ratio. */
    border-block-start: 6px double var(--accent-400);
    padding-block-start: var(--space-3);
  }
    /* Inside the dark hero card, so the dark-surface green. */
  .ledger-card tfoot .balanced { color: #34d399; font-weight: 600; }

  /* --- cards ------------------------------------------------------------ */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
  }
  /* Inside a dark band the shadow disappears into the background and only
     the border does any work. */
  .on-ink .card { box-shadow: none; }
  .card h3 { margin-block-end: var(--space-2); }
  .card p { color: var(--text-muted); }

  .feature-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
  .feature-list strong { color: var(--text); }
  .feature-list li { color: var(--text-muted); }

  /* --- comparison table ------------------------------------------------- */
  .table-scroll { overflow-x: auto; }
  .compare { inline-size: 100%; border-collapse: collapse; min-inline-size: 34rem; }
  .compare th, .compare td {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    border-block-end: 1px solid var(--border);
    font-size: var(--text-caption);
  }
  .compare thead th { color: var(--text-subtle); font-weight: 600; }
  .compare tbody th { font-weight: 500; color: var(--text); }
  .compare td { color: var(--text-muted); }
  .compare .col-us { background: var(--accent-100); color: var(--text); }

  /* --- pricing ---------------------------------------------------------- */
  /* The badge is lifted out of the flow and onto the card's top edge, so the
     featured plan's heading and price stay on the same line as its
     neighbours'. Three prices that do not align are hard to compare, which is
     the one thing a pricing table exists to make easy. */
  .plan { display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
  .plan--featured { border-color: var(--accent-500); }
  .plan .badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--space-6);
    transform: translateY(-50%);
    background: var(--ink-700);
    border: 1px solid var(--accent-500);
  }
  .plan .price { font-size: 2.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .plan .price span { font-size: var(--text-body); font-weight: 400; color: var(--text-muted); }
  .plan ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .plan li { color: var(--text-muted); font-size: var(--text-caption); }
  .plan .btn { margin-block-start: auto; }

  .badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--accent-100);
    color: var(--accent-600);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.064em;
    font-weight: 600;
  }

  /* --- FAQ (native disclosure, no JS) ----------------------------------- */
  .faq { border-block-end: 1px solid var(--border); padding-block: var(--space-4); }
  .faq summary { cursor: pointer; font-weight: 600; }
  .faq p { color: var(--text-muted); margin-block-start: var(--space-3); }

  /* --- CTA band --------------------------------------------------------- */
  .cta { text-align: center; }
  .cta .btn-row { justify-content: center; margin-block-start: var(--space-8); }

  /* --- footer ----------------------------------------------------------- */
  .site-footer {
    background: var(--ink-800);
    border-block-start: 1px solid var(--ink-600);
    padding-block: var(--space-16) var(--space-12);
    font-size: var(--text-caption);
  }
  .site-footer .cols { display: grid; gap: var(--space-8); }
  @media (min-width: 40rem) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
  .site-footer h2 { font-size: var(--text-label); text-transform: uppercase;
                    letter-spacing: 0.064em; color: var(--text-subtle);
                    margin-block-end: var(--space-3); font-weight: 600; }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .site-footer a { color: var(--text-muted); text-decoration: none; }
  .site-footer a:hover { color: var(--text); }
  .site-footer .colophon {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--border);
    color: var(--text-subtle);
  }
  .site-footer .logo img { block-size: 24px; }

  /* --- prose (legal) ---------------------------------------------------- */
  .prose h2 { font-size: var(--text-h3); margin-block: var(--space-12) var(--space-4); }
  .prose p, .prose li { color: var(--text-muted); }
  .prose ul { padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
  .prose > * + * { margin-block-start: var(--space-4); }

  /* The form styles that used to live here went with the request-access form.
     They are not kept "just in case": they were written for ink surfaces and
     would have come back wrong on paper. The site has no forms — its CSP sets
     form-action 'none', and signup lives in the app. */
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .center { text-align: center; margin-inline: auto; }
  .mt-4 { margin-block-start: var(--space-4); }
  .mt-8 { margin-block-start: var(--space-8); }
  .mt-12 { margin-block-start: var(--space-12); }
  .mt-16 { margin-block-start: var(--space-16); }
  .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}