/* guard.css -- Senua Guard's site layer over the Senua AI design system (css/senua.css, vendored whole).
   Only what this site needs that the system does not have; every value is a system token. */

.narrow { max-inline-size: calc(var(--measure) * 0.75); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-04); align-items: center; }

/* HERO PHOTOGRAPHS. The design system's .hero takes its picture from --hero-img and its framing from --hero-pos; a
   page names its photograph with data-hero (never a style attribute: the content security policy refuses them). A
   closed set: a name with no rule here shows the hero's plain ground, which is visible at once. The photographs and
   their licences: site/IMAGES.md. */
[data-hero] { --hero-img: none; }
[data-hero="home"]      { --hero-img: url("/assets/hero/home.jpg");      --hero-pos: 62% 30%; }
[data-hero="how"]       { --hero-img: url("/assets/hero/how.jpg");       --hero-pos: 70% 35%; }
[data-hero="platforms"] { --hero-img: url("/assets/hero/platforms.jpg"); --hero-pos: 60% 35%; }
[data-hero="pricing"]   { --hero-img: url("/assets/hero/pricing.jpg");   --hero-pos: 65% 35%; }
[data-hero="help"]      { --hero-img: url("/assets/hero/help.jpg");      --hero-pos: 62% 40%; }
[data-hero="support"]   { --hero-img: url("/assets/hero/support.jpg");   --hero-pos: 55% 45%; }
[data-hero="kb"]        { --hero-img: url("/assets/hero/kb.jpg");        --hero-pos: 62% 35%; }
[data-hero="downloads"] { --hero-img: url("/assets/hero/downloads.jpg"); --hero-pos: 65% 30%; }
[data-accent="violet"]  { --hero-accent: var(--brand-violet); }
[data-accent="cyan"]    { --hero-accent: var(--brand-cyan); }
/* the knowledge base's band is the same on every knowledge-base page; its title is the section's name, not the page's
   heading (an article's own title is its h1) */
/* ONE TITLE SIZE ON EVERY HERO: a section title that is not the page's h1 (.hero__title) takes exactly the steps the
   system gives a hero h1 (h1 at each breakpoint, `.hero h1`'s 14ch cap, the cap lifted in a narrow hero), so it can never
   drift from the other pages' titles again. Measured 11 November 2026 before this: hero h1 60px, .hero__title 36px. */
.hero .hero__title { margin: 0; font-weight: 600; color: var(--text-on-media); max-width: 14ch;
  font-size: var(--ts-09); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
@media (min-width: 672px) {
  .hero .hero__title { font-size: var(--ts-11); line-height: var(--lh-display); letter-spacing: var(--tr-hero); }
}
@media (min-width: 1056px) {
  .hero .hero__title { font-size: var(--ts-13); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); }
}
@container hero (max-width: 1055px) { .hero .hero__title { max-width: none; } }
/* an interior page's hero is a band, not the first screen. One height for every interior page: tall enough for the
   longest heading and lede on a desktop (measured 11 November 2026: the three-line headings need 485 px at 1717 px
   wide), so a one-line title sits in the same band, centred, instead of a shorter one. Narrower screens grow with
   their text. */
.hero--tight { min-height: clamp(var(--sp-13), 34vw, calc(var(--sp-13) + var(--sp-12) * 2 + var(--sp-11) + var(--sp-10))); }

/* a page without a hero: its heading starts clear of the masthead */
.page { padding-block: var(--sp-09) var(--sp-11); }
.page h1 { margin-block-start: 0; }

/* how it works: five numbered steps, each a card */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-05); counter-reset: step; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-05);
  align-items: start; padding: var(--sp-06); background: var(--layer-01); border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--r-md); }
.steps > li::before { content: counter(step); display: grid; place-items: center; inline-size: var(--sp-08);
  block-size: var(--sp-08); border-radius: var(--r-pill); background: var(--accent); color: var(--text-on-accent);
  font-weight: 600; }
.steps h2 { margin: 0 0 var(--sp-03); font-size: var(--ts-05); }
.steps p { margin: 0; color: var(--text-secondary); }

/* the sign-up and sign-in column: centred at half the page on a desktop (the system's lg breakpoint, --bp-lg 1056px),
   the full width on phones and tablets */
.auth { display: grid; gap: var(--sp-06); inline-size: 100%; margin-inline: auto; padding-block: var(--sp-09) var(--sp-11); }
.auth h1 { margin: 0; }
.auth .lede { margin: 0; }
@media (min-width: 1056px) { .auth { inline-size: 50%; } }

/* plan cards on the pricing page */
.plan { display: flex; flex-direction: column; gap: var(--sp-04); }
.plan .btn { margin-block-start: auto; }
.plan__name { margin: 0; font-size: var(--ts-05); }
.plan__price { margin: 0; font-size: var(--ts-08); font-weight: 600; color: var(--text-primary); }
.plan__period { font-size: var(--ts-03); font-weight: 400; color: var(--text-secondary); }

/* the knowledge base */
.kb-search { margin-block-end: var(--sp-07); max-inline-size: var(--measure); }
/* the system pins a card's last child to its foot (right for an action, wrong for content): lists, prose and
   definition lists stay where they are, so cards in a row line up at the top */
.card > .kb-list:last-child, .card > p:last-child, .card > dl:last-child, .card > ul:last-child { margin-top: 0; }
.kb-list, .kb-results { list-style: none; padding: 0; margin: 0 0 var(--sp-07); display: grid; gap: var(--sp-03); }
.kb-results li p { margin: var(--sp-01) 0 0; color: var(--text-secondary); font-size: var(--ts-02); }
/* articles: section headings a step down from the page title, with room above */
.prose h2 { font-size: var(--ts-06); margin-block: var(--sp-08) var(--sp-04); }
.prose h1 + h2, .prose h1 + p { margin-block-start: var(--sp-05); }
.prose pre { overflow-x: auto; padding: var(--sp-05); background: var(--layer-02); border-radius: var(--r-md); }

/* an eyebrow belongs to the heading under it */
.eyebrow + h1, .eyebrow + h2, .section-head .eyebrow + h2 { margin-block-start: var(--sp-03); }
.section-head { margin-block-end: var(--sp-06); }
.deflist + p { margin-block-start: var(--sp-04); }

/* space between a row of cards and what follows it, and between stacked panels */
.cols-2 + p, .cols-3 + p, .cols-3 + .notice, .notice + p { margin-block-start: var(--sp-06); }
aside.stack { display: grid; gap: var(--sp-05); align-content: start; }
aside.stack > * { margin: 0; }

/* platform logos: each brand's own mark and colour, on a light tile so every colour reads on the dark card */
.platform { display: flex; flex-direction: column; gap: var(--sp-04); }
.platform-logo { display: inline-flex; gap: var(--sp-03); align-self: flex-start; padding: var(--sp-03);
  background: var(--text-on-accent); border-radius: var(--r-md); }
.platform .badge { align-self: flex-start; }
.platform-logo__mark { display: block; inline-size: var(--sp-08); block-size: var(--sp-08); }
.trademarks { margin-block-start: var(--sp-07); font-size: var(--ts-01); color: var(--text-helper); max-inline-size: var(--measure); }

/* downloads */
.downloads { margin-block: var(--sp-07) var(--sp-08); }
.code-line { overflow-x: auto; padding: var(--sp-04) var(--sp-05); background: var(--layer-02); border-radius: var(--r-md); }

/* status.senuaguard.au */
.incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-05); }
.page h2.card__title { margin-block: var(--sp-08) var(--sp-04); }

/* form replies */
.form__status { margin-block-start: var(--sp-04); color: var(--text-secondary); }
.form__status--ok { color: var(--support-success); }
.form__status--error { color: var(--support-error); }