/* ==========================================================================
   Marketing site — the ONLY stylesheet.

   THIS FILE DELIBERATELY CONTAINS NO PRODUCT NAME, not even in a comment, and
   that is a property worth preserving: the product has no settled name
   (SAAS-PLAN §12 decision #7), so the rename-day grep in marketing/README.md
   must find every occurrence in the four HTML pages and in that README, and
   must find NOTHING in here. A name that appears in a stylesheet is a name
   somebody will miss.

   Rules this file lives under (marketing/README.md has the full list):
     - No JavaScript anywhere on this site, and no external request of any
       kind: no CDN, no web font, no analytics, no remote image, and not one
       CSS `url` reference. Every page must render identically from `file://`
       and from any static host. The animations below are CSS keyframes for
       that reason — motion that needs a bundle is motion this site does not
       get.
     - System fonts, one accent colour, light and dark via
       `prefers-color-scheme`. The palette below is the same one
       `status.html` carries inline — keep them in step by hand if either
       changes (status.html is deliberately self-contained so it can be
       hosted alone, away from the product's failure domain).
     - Everything is built from the tokens in the next block. A literal
       `1.15rem` in a rule is how a page ends up not lining up with the one
       beside it.
   ========================================================================== */

/* --- design tokens ------------------------------------------------------ */

:root {
  /* Colour — light. Every value here is duplicated in status.html's inline
     stylesheet; the two must move together. */
  --bg: #ffffff;
  --panel: #f7f7f8;
  --line: #e3e3e6;
  --ink: #16171a;
  --muted: #64656b;
  --accent: #1f6f5c;
  --ok: #1f6f5c;
  --warn: #9a6516;
  --bad: #a32c22;
  --ok-bg: #e8f2ee;
  --warn-bg: #fbf1de;
  --bad-bg: #fbeae8;

  /* Spacing — 4px base, eight steps. --sp-3/4 is the inside of a box,
     --sp-5/6 the gap between sections, --sp-7/8 the page's own margins. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Type. Body is 1rem/1.55; everything else is a step from it. */
  --fs-xs: 0.75rem;    /* pills */
  --fs-sm: 0.85rem;    /* captions, footer, quiet asides */
  --fs-md: 0.9rem;     /* nav, list descriptions, note boxes */
  --fs-base: 1rem;
  --fs-lg: 1.05rem;    /* sub-heading, box titles, h3 */
  --fs-xl: 1.35rem;    /* masthead, plan price */
  --fs-2xl: 1.9rem;    /* the one h1 per page */
  --fs-eyebrow: 0.78rem;
  --fs-code: 0.88em;   /* relative on purpose: monospace runs large */

  /* Shape */
  --radius: 8px;
  --pill: 999px;

  /* Motion. One duration and one easing, so nothing on the site moves at a
     speed nothing else moves at. Only ever applied inside
     `prefers-reduced-motion: no-preference`. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.5s;
  --dur-quick: 0.2s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131417;
    --panel: #1b1c20;
    --line: #2c2d33;
    --ink: #eceef2;
    --muted: #9c9ea6;
    --accent: #63c3a8;
    --ok: #63c3a8;
    --warn: #e0b166;
    --bad: #ef8074;
    --ok-bg: #17322b;
    --warn-bg: #33280f;
    --bad-bg: #37201d;
  }
}

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

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base)/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

a { color: var(--accent); }

/* Keyboard focus is visible everywhere, and is never the thing that motion
   preferences turn off. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- masthead ---------------------------------------------------------- */

header.site { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); }
.brand { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.brand a { color: inherit; text-decoration: none; }
nav.site { margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
           font-size: var(--fs-md); }
nav.site a[aria-current="page"] { color: var(--ink); font-weight: 650; }

/* The underline is always THERE and merely colourless, so hovering changes one
   property rather than reflowing the text a pixel. The fade is motion-gated at
   the bottom of this file; the underline itself is not. */
nav.site a, footer.site nav a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
}
nav.site a:hover, footer.site nav a:hover { text-decoration-color: currentColor; }

/* --- headings and prose ------------------------------------------------ */

h1.lede { font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.02em;
          font-weight: 650; margin: var(--sp-6) 0 var(--sp-3); }
h2.section { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.09em;
             color: var(--muted); font-weight: 650; margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-1); }
p { margin: 0 0 var(--sp-3); }
.sub { font-size: var(--fs-lg); color: var(--muted); margin: 0 0 var(--sp-5); }
.quiet { color: var(--muted); font-size: var(--fs-md); }
strong { font-weight: 650; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: var(--fs-code); }

/* --- boxes ------------------------------------------------------------- */

.banner {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-left-color: var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}
.banner h2 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.banner p { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-md); }
.banner p:last-child { margin-bottom: 0; }

.note-box { border: 1px dashed var(--line); border-radius: var(--radius);
            padding: var(--sp-4); color: var(--muted); font-size: var(--fs-md);
            margin: 0 0 var(--sp-4); }
.note-box p:last-child { margin-bottom: 0; }

/* --- the funnel / step list -------------------------------------------- */

ol.steps { list-style: none; counter-reset: step; margin: 0; padding: 0;
           border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* The 3rem left inset is the marker's own geometry: --sp-4 in, 1.5rem wide,
   --sp-2 of air after it. */
ol.steps li { counter-increment: step; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-7);
              border-top: 1px solid var(--line); position: relative; }
ol.steps li:first-child { border-top: 0; }
ol.steps li::before {
  content: counter(step);
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  width: 1.5rem; height: 1.5rem; border-radius: var(--pill);
  background: var(--ok-bg); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 650; line-height: 1.5rem; text-align: center;
}
ol.steps .sname { font-weight: 650; display: block; }
ol.steps .sdesc { color: var(--muted); font-size: var(--fs-md); }

/* --- plain fact rows (same shape as status.html's component list) ------ */

ul.rows { list-style: none; margin: 0 0 var(--sp-4); padding: 0;
          border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
ul.rows li { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
ul.rows li:first-child { border-top: 0; }
ul.rows .rname { font-weight: 600; display: block; }
ul.rows .rdesc { display: block; color: var(--muted); font-size: var(--fs-sm); }

/* --- the one diagram on the site (security.html) -----------------------

   Text, not an image: it renders from file://, it costs no request, it is
   readable by a screen reader, and it cannot go stale in a way a PNG could
   hide. It scrolls inside its own box rather than widening the page. */

pre.flow { overflow-x: auto; margin: 0 0 var(--sp-4); padding: var(--sp-4);
           border: 1px solid var(--line); border-radius: var(--radius);
           background: var(--panel); color: var(--ink);
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 0.8rem; line-height: 1.45; }

/* --- tables ------------------------------------------------------------ */

.tablewrap { overflow-x: auto; margin: 0 0 var(--sp-4); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
caption { text-align: left; color: var(--muted); font-size: var(--fs-sm);
          padding: 0 0 var(--sp-2); }
th, td { text-align: left; vertical-align: top; padding: var(--sp-3);
         border-top: 1px solid var(--line); }
thead th { border-top: 0; border-bottom: 1px solid var(--line);
           font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.06em;
           color: var(--muted); }
td.num { white-space: nowrap; font-weight: 650; }

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

.plans { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin: 0 0 var(--sp-4); }
@media (min-width: 40rem) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { border: 1px solid var(--line); border-radius: var(--radius);
        padding: var(--sp-4); background: var(--panel); }
.plan.is-lead { border-left: 4px solid var(--accent); }
.plan h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); }
.plan .price { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em;
               margin: 0 0 var(--sp-1); }
.plan .per { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.plan ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); font-size: var(--fs-md);
           color: var(--muted); }
.plan li { margin: var(--sp-1) 0; }

/* --- pills (states, matching status.html) ------------------------------ */

.pill { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.03em;
        text-transform: uppercase; padding: var(--sp-1) var(--sp-2); border-radius: var(--pill);
        white-space: nowrap; color: var(--warn); background: var(--warn-bg); }
.pill.is-ok { color: var(--ok); background: var(--ok-bg); }

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

footer.site { margin-top: var(--sp-7); padding-top: var(--sp-5);
              border-top: 1px solid var(--line);
              color: var(--muted); font-size: var(--fs-sm); }
footer.site a { color: var(--accent); }
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
                  margin: 0 0 var(--sp-3); }
footer.site p { margin: 0 0 var(--sp-2); }
footer.site p:last-child { margin-bottom: 0; }

/* --- motion ------------------------------------------------------------

   Everything below is OPT-IN. The rest of the stylesheet renders a complete,
   final page on its own: nothing is hidden, nothing is offset, nothing waits
   for an animation to finish. That ordering is the whole safety argument —
   `opacity: 0` only ever exists inside this block, so a reader who has asked
   for no motion, a printer, or a browser that ignores the keyframes gets the
   page rather than a blank column.

   `screen` as well as the motion query, because a printed page should not be
   holding its breath either.

   There is no scroll-triggered variant, and there cannot be one without
   JavaScript. So the whole page arrives at once over about half a second,
   which is finished long before anybody has scrolled to the fold. */

@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Every top-level block of a page, in document order: masthead, lede, sub,
     banner, each section heading and the block under it, footer. */
  .wrap > * {
    opacity: 0;
    animation: rise var(--dur) var(--ease) forwards;
    animation-delay: 0.24s;   /* everything past the sixth block, together */
  }
  .wrap > *:nth-child(1) { animation-delay: 0s; }
  .wrap > *:nth-child(2) { animation-delay: 0.04s; }
  .wrap > *:nth-child(3) { animation-delay: 0.08s; }
  .wrap > *:nth-child(4) { animation-delay: 0.12s; }
  .wrap > *:nth-child(5) { animation-delay: 0.16s; }
  .wrap > *:nth-child(6) { animation-delay: 0.2s; }

  nav.site a, footer.site nav a { transition: text-decoration-color var(--dur-quick) var(--ease); }

  /* A card lifts under the pointer; a row it is not worth lifting just warms
     up. Both are hover-only, so a touch device sees neither. */
  .plan { transition: transform var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease); }
  .plan:hover { transform: translateY(-2px); border-color: var(--accent); }

  ul.rows li, ol.steps li { transition: background var(--dur-quick) var(--ease); }
  ul.rows li:hover, ol.steps li:hover { background: var(--panel); }
}