/* Saint Michael Systems Pty Ltd corporate site */

/* Two themes off one token set. --ink was doing double duty as both the
   heading colour and the dark-panel background, which cannot both invert, so
   it is split into --heading (text) and --panel (dark surface). --ink is kept
   as the fixed brand near-black used by the header in both themes. */
:root {
  --ink: #16191c;
  --maxw: 1080px;

  color-scheme: light;
  --page: #ffffff;
  --tint: #f7f5f0;
  --card: #ffffff;
  --heading: #16191c;
  --body: #333a40;
  --muted: #5f6a73;
  --line: #e2ddd3;
  --gold: #9a7020;
  --gold-bright: #c09433;
  --green: #2f6b50;
  --panel: #16191c;
  --panel-fg: #ffffff;
  --panel-fg-dim: #c6ccd2;
  --btn-bg: #16191c;
  --btn-fg: #ffffff;
  --btn-hover-bg: #9a7020;
}

[data-theme="dark"] {
  color-scheme: dark;
  --page: #0f1316;
  --tint: #151a1e;
  --card: #181e23;
  --heading: #eef2f5;
  --body: #c2cbd2;
  --muted: #93a0a9;
  --line: #272f36;
  /* Lifted from the light values to hold contrast against a dark canvas. */
  --gold: #d9a94a;
  --gold-bright: #e8bd66;
  --green: #57a583;
  --panel: #1a2127;
  --panel-fg: #f3f6f8;
  --panel-fg-dim: #b3bec6;
  /* A near-black button would vanish on a dark page, so the primary action
     inverts to gold with dark type. */
  --btn-bg: #e8bd66;
  --btn-fg: #14181b;
  --btn-hover-bg: #f4d288;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--heading); line-height: 1.2; margin: 0 0 0.5em; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.85rem); }
h3 { font-size: 1.12rem; font-weight: 650; }
p { margin: 0 0 1.1em; }
a { color: var(--gold); text-decoration: none; }
a:hover, a:focus { color: var(--heading); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

/* Floating bar: stays put on scroll, lets the page show through a blur, and
   tightens up once you leave the top of the document. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Solid while resting at the top, so the nav reads cleanly against the
     hero. The translucency is the scrolled state, not the default. */
  background: rgba(22, 25, 28, 0.98);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(192, 147, 51, 0.42);
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}

/* Without backdrop-filter a translucent bar would leave the nav unreadable
   over scrolling content, so those browsers get a solid one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: #16191c; }
}

/* Floating: lifts off the page, lets content pass beneath through the blur. */
.site-header.is-stuck {
  background: rgba(18, 21, 24, 0.74);
  border-bottom-color: rgba(192, 147, 51, 0.7);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
}
.site-header.is-stuck .wrap { padding-top: 9px; padding-bottom: 9px; }
.site-header.is-stuck .brand img { width: 37px; height: 37px; }

/* Reading progress hairline on the bottom edge. scaleX of a custom property,
   so it animates on the compositor and never causes layout. */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform: scaleX(var(--scroll, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  pointer-events: none;
}

.site-header .wrap {
  transition: padding .32s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
/* Direct child only: the brand link also contains the flag, which must not
   inherit the badge's dimensions. */
/* The badge PNG already carries its own alpha, so it sits straight on the
   bar with no tile behind it. */
.brand > img { width: 44px; height: 44px; display: block; transition: width .32s ease, height .32s ease; }

/* Australian flag, drawn to the official specification in /au-flag.svg */
.flag {
  display: inline-block;
  vertical-align: -0.12em;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
}
.flag-xs { width: 18px; height: 9px; }
.flag-sm { width: 22px; height: 11px; }
.eyebrow .flag { margin-left: 9px; vertical-align: -0.1em; }
.footer-au { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.footer-au .flag { flex: none; }
/* Company identifiers. The ABN links to its record on the public ABR so the
   entity can be checked against the register directly. */
.footer-legal { margin-top: 10px; font-size: .89rem; letter-spacing: .01em; }
.footer-legal a { border-bottom: 1px solid rgba(192, 147, 51, .45); }
.footer-legal a:hover, .footer-legal a:focus { text-decoration: none; border-bottom-color: var(--gold-bright); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .site-header .wrap, .brand img { transition: none; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { color: #fff; font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; }
.brand-sub { color: #a9b1b8; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; }

.site-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.site-nav a {
  color: #dfe3e7;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus { color: #fff; text-decoration: none; border-bottom-color: var(--gold-bright); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold-bright); }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--tint); border-bottom: 1px solid var(--line); padding: 68px 0 60px; }
.hero-grid { position: relative; z-index: 1; }

/* The artwork runs off the right edge of the viewport rather than stopping at
   the 1080px wrap, so it reads as a backdrop the page is sitting on instead of
   a picture placed in a column. The copy is capped short of it so no line of
   text ever runs into the figure. */
.hero-copy { max-width: 620px; }
.hero-copy .lede { max-width: 46ch; }

.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(56%, 780px);
  display: block;
  /* Fades into the page on its left edge instead of ending on a hard vertical
     seam. Solid by 52%, which is inside the shield, so the SMS mark and the
     figure holding it stay at full strength. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .40) 34%, #000 56%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .40) 34%, #000 56%);
}
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  /* Cover, framed on the shield: the hero band is far wider than it is tall, so
     without an explicit focal point the crop drifts onto the wings. */
  object-fit: cover;
  object-position: 57% 38%;
}
/* On cream the artwork is the darkest thing on the page, so it is pulled back a
   little; on the dark theme it belongs and runs at full strength. */
[data-theme="light"] .hero-art { opacity: 0.93; }

/* The band has to be tall enough to hold a near-square image at a useful size,
   or cover crops the figure down to a strip. Done with padding rather than a
   min-height: the copy is already the tallest thing in the band, so symmetric
   padding centres it without making .hero a flex container, which knocked the
   centred .wrap off its own axis. */
@media (min-width: 1001px) {
  .hero { padding: 92px 0 84px; }
}

/* The backdrop needs roughly 1000px before the copy column and the figure stop
   competing for the same pixels. Below that the headline ends up set over a
   wing, and there is no opacity that fixes it: anything faint enough to read
   through is too faint to be worth showing. So the artwork stops being a
   backdrop and becomes an ordinary image under the copy, at full strength.
   Keep this threshold above 800: the earlier value left a band around 820px,
   which is a phone held sideways, where the two overlapped badly. */
@media (max-width: 1000px) {
  .hero { overflow: visible; }
  .hero-art {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 34px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-art img { height: auto; aspect-ratio: 991 / 875; border-radius: 5px; }
  [data-theme="light"] .hero-art { opacity: 1; }
}
.eyebrow {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.lede { font-size: 1.16rem; color: var(--body); max-width: 62ch; }
.hero h1 { margin-bottom: 0.4em; }

.page-head { background: var(--tint); border-bottom: 1px solid var(--line); padding: 54px 0 46px; }
.page-head .lede { margin-bottom: 0; }

/* ---------- Sections ---------- */

section { padding: 58px 0; }
section + section { border-top: 1px solid var(--line); }
.section-tint { background: var(--tint); }
.measure { max-width: 68ch; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 28px; margin-top: 34px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-bright);
  border-radius: 4px;
  padding: 26px 24px;
}
.card h3 { margin-bottom: 0.45em; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Product feature ---------- */

.product {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 8px;
}
.product-head {
  background: var(--panel);
  color: var(--panel-fg);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 30px;
}

/* The icon ships with its own rounded corners on a transparent background,
   so the shadow follows the alpha channel rather than a CSS box. */
/* The source is very slightly taller than wide, so height stays auto rather
   than being forced square. */
.product-icon {
  width: 128px;
  height: auto;
  flex: none;
  display: block;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
}
.product-head-text { min-width: 0; }
.product-head h2 { color: var(--panel-fg); margin-bottom: 0.3em; }
.product-head p { color: var(--panel-fg-dim); margin-bottom: 0; max-width: 62ch; }
.product-body { padding: 32px; }

.badge-beta {
  display: inline-block;
  background: rgba(192, 148, 51, 0.16);
  color: var(--gold-bright);
  border: 1px solid rgba(192, 148, 51, 0.5);
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  margin-bottom: 16px;
}

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.feature-list li { padding-left: 20px; border-left: 3px solid var(--green); }
.feature-list strong { display: block; color: var(--heading); margin-bottom: 3px; }
.feature-list span { color: var(--muted); font-size: 0.96rem; }

.attribution {
  background: var(--tint);
  border-left: 4px solid var(--green);
  border-radius: 3px;
  padding: 18px 22px;
  margin: 32px 0 0;
  color: var(--heading);
  font-size: 1.02rem;
}
.attribution strong { font-weight: 650; }

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.97rem;
  padding: 13px 26px;
  border-radius: 4px;
  border: 1px solid var(--btn-bg);
}
.btn:hover, .btn:focus { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-fg); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--heading); border-color: var(--heading); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--heading); color: var(--page); border-color: var(--heading); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 30px; margin-top: 34px; }
.contact-block { border: 1px solid var(--line); border-radius: 4px; padding: 28px 26px; }
.contact-block h3 { margin-bottom: 0.3em; }
.contact-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.contact-value { font-size: 1.14rem; font-weight: 600; color: var(--heading); margin: 0 0 4px; word-break: break-word; }
.contact-value a { color: var(--gold); }
.contact-note { color: var(--muted); font-size: 0.95rem; margin: 10px 0 0; }

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

.site-footer { background: var(--panel); color: var(--panel-fg-dim); padding: 48px 0 34px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: var(--panel-fg); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 14px; font-weight: 650; }
.site-footer a { color: #dfe3e7; font-size: 0.95rem; }
.site-footer a:hover, .site-footer a:focus { color: var(--gold-bright); }
.site-footer p { font-size: 0.95rem; margin-bottom: 0.6em; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-brand { color: var(--panel-fg); font-weight: 650; font-size: 1.05rem; margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid #2c3237;
  margin-top: 38px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #98a1a8;
}
.footer-bottom p { margin: 0; font-size: 0.9rem; }

/* ---------- 404 ---------- */

.notfound { text-align: center; padding: 96px 0 88px; }
.notfound .btn-row { justify-content: center; }

/* ---------- Responsive ---------- */

@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding: 46px 0 42px; }
  section { padding: 44px 0; }
  .product-head, .product-body { padding: 24px 22px; }
  .product-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .product-icon { width: 96px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* Matches the narrower .wrap padding below this breakpoint, so the artwork
     stays on the same margins as the copy above it. */
  .hero-art { padding: 0 18px; }
  .site-header .wrap { justify-content: center; text-align: center; }
  .site-nav { gap: 18px; justify-content: center; width: 100%; }
  .wrap { padding: 0 18px; }
}


/* ---------- Theme toggle ---------- */

/* Segmented pill: the knob slides between the moon and the sun. Entirely
   driven by html[data-theme], so there is no state to keep in sync. */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 32px;
  padding: 4px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .3s ease, border-color .3s ease;
}
.theme-toggle:hover { border-color: rgba(192, 147, 51, 0.55); }

.toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(192, 147, 51, 0.22);
  border: 1px solid rgba(192, 147, 51, 0.5);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="light"] .toggle-knob { transform: translateX(32px); }
[data-theme="dark"] .toggle-knob { transform: translateX(0); }

.toggle-icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transition: color .3s ease;
}
.toggle-icon svg { width: 15px; height: 15px; display: block; }
[data-theme="dark"] .icon-moon { color: var(--gold-bright); }
[data-theme="dark"] .icon-sun { color: #6f7a83; }
[data-theme="light"] .icon-sun { color: var(--gold-bright); }
[data-theme="light"] .icon-moon { color: #6f7a83; }

.header-right { display: flex; align-items: center; gap: 22px; }

/* Repaint smoothly when the theme flips. */
body, .card, .contact-block, .product, .product-head, .attribution,
.site-footer, .hero, .page-head, .section-tint {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .card, .contact-block, .product, .product-head, .attribution,
  .site-footer, .hero, .page-head, .section-tint,
  .theme-toggle, .toggle-knob, .toggle-icon { transition: none; }
}

@media (max-width: 560px) {
  .header-right { gap: 14px; width: 100%; justify-content: center; }
}


/* "Coming soon" marker. Green rather than the gold used for the Home Protego
   beta badge, so the two product states read differently at a glance. */
.badge-soon {
  display: inline-block;
  background: rgba(47, 107, 80, 0.12);
  color: var(--green);
  border: 1px solid rgba(47, 107, 80, 0.42);
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  margin-bottom: 16px;
}
[data-theme="dark"] .badge-soon {
  background: rgba(87, 165, 131, 0.16);
  border-color: rgba(87, 165, 131, 0.5);
}
.lede.measure { margin-bottom: 1em; }


/* ---------- Product selector ---------- */

.product-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 4px;
}
.product-nav-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-nav-card:hover, .product-nav-card:focus {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--gold-bright);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
}
.product-nav-card img {
  width: 86px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .38));
}
.pn-text { display: block; min-width: 0; }
.pn-status {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 3px 8px;
  margin-bottom: 9px;
}
.pn-beta { background: rgba(192, 148, 51, 0.16); color: var(--gold); border: 1px solid rgba(192, 148, 51, 0.45); }
.pn-soon { background: rgba(47, 107, 80, 0.12); color: var(--green); border: 1px solid rgba(47, 107, 80, 0.42); }
[data-theme="dark"] .pn-soon { background: rgba(87, 165, 131, 0.16); border-color: rgba(87, 165, 131, 0.5); }
.pn-name {
  display: block;
  color: var(--heading);
  font-weight: 650;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
}
.pn-desc { display: block; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }

/* The header is sticky, so an anchor jump must leave room for it. */
#home-protego, #archangel { scroll-margin-top: 88px; }

@media (max-width: 760px) {
  .product-nav { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
  .product-nav-card { padding: 18px; gap: 16px; }
  .product-nav-card img { width: 68px; }
}

/* On the dark product banner the light-background green has too little
   contrast, so the badge gets a panel variant in both themes. */
.product-head .badge-soon {
  background: rgba(87, 165, 131, 0.18);
  color: #83c9a7;
  border-color: rgba(87, 165, 131, 0.55);
}


/* ---------- Trust page components ---------- */

/* A single stated principle, set apart from the prose. A gold rule rather
   than quote marks, so it reads as a standard the company holds itself to
   and not as a testimonial from someone else. */
.pullquote {
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--gold);
  max-width: 60ch;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading);
}

/* Commitments, one per line, each with its own mark. The Australian items
   carry the flag artwork rather than the flag emoji, which degrades to the
   bare letters "AU" on Windows. */
.trust-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px 36px;
  max-width: 920px;
}
.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--body);
  line-height: 1.5;
}
/* Fixed-width gutter so the flags and the padlocks share one optical
   left edge despite being different shapes. */
.trust-list .ti {
  flex: none;
  width: 22px;
  display: flex;
  justify-content: center;
  color: var(--gold);
}
.trust-list .ti svg { width: 17px; height: 17px; display: block; margin-top: 3px; }
.trust-list .ti .flag { margin-top: 6px; }

@media (max-width: 560px) {
  .pullquote { font-size: 1.08rem; padding-left: 18px; }
  .trust-list { gap: 14px; }
}

/* ---------- Founder ---------- */

.founder {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 4px 0 30px;
}
/* The PNG carries its own circular alpha, so the ring has to be drawn with a
   spread shadow on the square border-box rather than a border, which would
   trace the box and not the circle. */
.founder-photo {
  width: 116px;
  height: 116px;
  flex: none;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line), 0 12px 28px rgba(0, 0, 0, .16);
}
[data-theme="dark"] .founder-photo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .11), 0 12px 28px rgba(0, 0, 0, .5);
}
.founder-name {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--heading);
  margin: 0 0 4px;
}
.founder-role {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 560px) {
  .founder { gap: 16px; }
  .founder-photo { width: 88px; height: 88px; }
  .founder-name { font-size: 1.08rem; }
}

/* ---------- The namesake ---------- */

/* An eyebrow that names its parent page. Gold is already the eyebrow colour,
   so the link only needs the underline to read as a link at all. */
.eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.eyebrow a:hover, .eyebrow a:focus { color: var(--gold-bright); }

.relic {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.relic-figure { margin: 0; }
.relic-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
/* The artwork is near-black at its edges, so a light-theme border would be the
   only thing separating it from the page and a dark-theme border would be the
   only thing separating it from nothing. Both themes get a hairline, tuned in
   opposite directions, plus a drop shadow to lift it off the tint. */
[data-theme="light"] .relic-figure img {
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, .22);
}
[data-theme="dark"] .relic-figure img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 18px 40px rgba(0, 0, 0, .55);
}
.relic-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 40ch;
}
.relic-body h2 { margin-top: 0; }
.relic-body p { max-width: 58ch; }

@media (max-width: 860px) {
  .relic { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Unbounded, the figure would run the full width of a tablet viewport and
     push the prose below the fold on its own. */
  .relic-figure { max-width: 420px; }
}

/* A quiet pointer from About to the namesake page. Deliberately not a nav
   item: it is context for people who want it, not a primary destination. */
.namesake {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 36px;
  padding: 18px 22px 18px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  max-width: 640px;
  text-decoration: none;
}
.namesake:hover, .namesake:focus { border-color: var(--gold); text-decoration: none; }
.namesake img {
  width: 84px;
  height: 84px;
  flex: none;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}
.namesake h3 { margin: 0 0 5px; }
.namesake p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }
.namesake .go { color: var(--gold); font-weight: 650; white-space: nowrap; }

@media (max-width: 560px) {
  .namesake { gap: 16px; padding: 16px; }
  .namesake img { width: 64px; height: 64px; }
}

/* ---------- Contact form ---------- */

.contact-form { max-width: 660px; margin-top: 30px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.field { margin: 0 0 18px; }
.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--heading);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.field-opt { color: var(--muted); font-weight: 400; font-size: 0.86rem; }
.field input,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--card);
  color: var(--body);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(154, 112, 32, .18);
}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(217, 169, 74, .22);
}

/* Off-screen rather than display:none. A bot that renders CSS can see which
   fields are hidden and skip them; one that only reads the DOM cannot tell the
   difference between this and a real field, which is the entire trick. */
.cf-trap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Collection notice. Sits under the form rather than above it: it belongs to
   the act of sending, and nobody reads a wall of text before they have decided
   they want to write to you. */
.form-note {
  max-width: 660px;
  margin: 22px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

.form-status { margin: 16px 0 0; font-size: 0.95rem; min-height: 1.4em; color: var(--muted); }
.form-status.is-error { color: #b3261e; }
[data-theme="dark"] .form-status.is-error { color: #f2857a; }
.form-status.is-ok { color: var(--green); font-weight: 600; }

/* The address is not in the page source, so this is what stands in its place
   until someone asks for it. Styled as a link rather than a button, because
   that is what it becomes. */
.reveal {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--gold);
  cursor: pointer;
  border-bottom: 1px solid rgba(154, 112, 32, .45);
}
.reveal:hover, .reveal:focus { color: var(--heading); border-bottom-color: currentColor; }

@media (max-width: 620px) {
  .field-pair { grid-template-columns: 1fr; }
}

/* ---------- Product banner call to action ---------- */

/* The banner is the dark panel in both themes, so the ordinary primary button
   (near-black on light) would vanish into it. Gold on the panel, in both
   themes, matching the header's own accent. */
.btn-panel {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #14181b;
}
.btn-panel:hover, .btn-panel:focus { background: #f4d288; border-color: #f4d288; color: #14181b; }
.product-cta { white-space: nowrap; }

/* The lit call to action.
 *
 * The product banner is the dark --panel surface in both themes, so the
 * button can behave like a lit object sitting on it: a halo that breathes,
 * a sheen crossing the face, embers drifting up off the top edge, and a ring
 * that pushes outward when it is opened.
 *
 * Every part of it is a sibling of the link rather than the link itself, is
 * absolutely positioned and pointer-events: none, and animates only transform
 * and opacity. So it cannot move the layout, cannot swallow a click, and the
 * link still works with this stylesheet, the script, or both absent.
 */
.cta-glow {
  position: relative;
  flex: none;
  margin-left: auto;
  display: inline-flex;
}
.cta-glow .product-cta {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform-origin: 50% 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 205, 0.55),
    0 4px 20px rgba(255, 168, 48, 0.38);
}

/* Halo. Two washes in one layer: a tight bright core that hugs the button and
   a wide soft one that carries the falloff. Blurred so neither edge ever
   resolves into a shape.

   The horizontal inset stays inside 32px because .product clips at its border
   radius, and a blurred edge meeting that clip would show as a straight cut.
   There is more room above and below, so the spread goes there instead. */
.cta-halo {
  position: absolute;
  inset: -34px -26px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 226, 168, 0.85), rgba(255, 198, 100, 0.30) 46%, transparent 68%),
    radial-gradient(farthest-side, rgba(255, 176, 60, 0.42), transparent 72%);
  filter: blur(11px);
  transform: scale(0.9);
  opacity: 0.6;
  animation: ctaBreathe 3.4s ease-in-out infinite;
}
@keyframes ctaBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Sheen. Parked off the left edge for most of the cycle, so it reads as an
   occasional catch of light rather than a loop. */
.cta-glow .product-cta::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -62%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  transform: translateX(0) rotate(16deg);
  animation: ctaSheen 4.4s ease-in-out infinite;
}
@keyframes ctaSheen {
  0%, 55%   { transform: translateX(0) rotate(16deg); }
  83%, 100% { transform: translateX(440%) rotate(16deg); }
}

/* Embers. Six of them, each given its own column, drift and pace so the
   group never falls into step with itself. */
.cta-motes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cta-motes i {
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff2d6;
  box-shadow: 0 0 8px 2px rgba(255, 199, 104, 0.95);
  opacity: 0;
  animation: ctaMote 4.6s linear infinite;
}
.cta-motes i:nth-child(1) { left: 14%; --dx:  7px; animation-delay: 0s;    animation-duration: 4.6s; }
.cta-motes i:nth-child(2) { left: 31%; --dx: -6px; animation-delay: 1.5s;  animation-duration: 5.4s; }
.cta-motes i:nth-child(3) { left: 47%; --dx:  4px; animation-delay: 0.7s;  animation-duration: 4.1s; }
.cta-motes i:nth-child(4) { left: 62%; --dx: -9px; animation-delay: 2.6s;  animation-duration: 5.9s; }
.cta-motes i:nth-child(5) { left: 78%; --dx:  6px; animation-delay: 3.4s;  animation-duration: 4.8s; }
.cta-motes i:nth-child(6) { left: 90%; --dx: -4px; animation-delay: 2.0s;  animation-duration: 5.2s; }
@keyframes ctaMote {
  0%   { opacity: 0; transform: translate(0, 6px) scale(0.5); }
  14%  { opacity: 1; }
  72%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx, 6px), -78px) scale(0.3); }
}

/* Hover and keyboard focus wake it up rather than changing it: the same
   motion, faster and brighter. */
.cta-glow:hover .cta-halo,
.cta-glow:focus-within .cta-halo { animation-duration: 1.5s; filter: blur(10px); }
.cta-glow:hover .cta-motes i,
.cta-glow:focus-within .cta-motes i { animation-duration: 2.6s; }
.cta-glow .product-cta:active { transform: scale(0.97); }

/* Opened. The script adds .is-open on a plain left click and holds the
   navigation for a beat so this is seen rather than cut off by the next
   page. Two rings, the second a quarter of a second behind the first. */
.cta-ring {
  position: absolute;
  inset: -3px;
  border-radius: 7px;
  pointer-events: none;
  z-index: 2;
}
.cta-ring::before, .cta-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 217, 145, 0.95);
  opacity: 0;
}
.cta-glow.is-open .cta-ring::before { animation: ctaRing 620ms cubic-bezier(.16,.84,.44,1) forwards; }
.cta-glow.is-open .cta-ring::after  { animation: ctaRing 620ms cubic-bezier(.16,.84,.44,1) 160ms forwards; }
.cta-glow.is-open .cta-halo { animation: ctaFlare 700ms ease-out forwards; }
.cta-glow.is-open .product-cta { animation: ctaPunch 460ms cubic-bezier(.2,.9,.3,1); }
@keyframes ctaRing {
  0%   { opacity: 0.95; transform: scale(0.97, 0.9); }
  100% { opacity: 0;    transform: scale(1.3, 1.85); }
}
@keyframes ctaFlare {
  0%   { opacity: 1;   transform: scale(1.02); }
  100% { opacity: 0.5; transform: scale(1.12, 1.4); }
}
@keyframes ctaPunch {
  0%   { transform: scale(1); }
  28%  { transform: scale(0.95); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Scrolled out of view. The script sets this so the browser is not asked to
   composite a blurred layer nobody is looking at. Default is running, so a
   failed script leaves the effect intact rather than frozen. */
.cta-glow.is-dim .cta-halo,
.cta-glow.is-dim .cta-motes i,
.cta-glow.is-dim .product-cta::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .cta-halo { animation: none; opacity: 0.6; transform: scale(1); }
  .cta-motes, .cta-ring, .cta-glow .product-cta::after { display: none; }
  .cta-glow .product-cta, .cta-glow.is-open .product-cta { animation: none; transform: none; }
}

@media (max-width: 800px) {
  /* The head stacks below 800px, so "right of the banner" becomes "under
     the text", full width, where a thumb can reach it. */
  .cta-glow { margin-left: 0; align-self: stretch; display: flex; }
  .cta-glow .product-cta { flex: 1; text-align: center; }
  /* The banner padding drops to 22px here, so the halo has to pull in with it
     or it meets the clip on both sides instead of just the right. */
  .cta-halo { inset: -30px -12px; }
}

/* ---------- Home Protego feature set ---------- */

/* Icon tile. The hue comes from the app's own colour system (lib/nav-icons.ts)
   through --c, so a tool reads the same colour here as it does inside the
   product's All Tools page. The wash is the hue at low alpha over the card,
   which is why it works on both themes without a second rule. */
.tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .tile { background: color-mix(in srgb, var(--c) 18%, var(--card)); }

/* The five headline cards. Each is a link into the catalogue below. */
.sell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.sell {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: 24px 24px 22px;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sell:hover, .sell:focus {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
  border-color: var(--gold);
}
[data-theme="dark"] .sell:hover, [data-theme="dark"] .sell:focus { box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.sell .tile { width: 52px; height: 52px; margin-bottom: 18px; }
.sell .tile svg { width: 26px; height: 26px; }
.sell h3 { margin: 0 0 8px; }
.sell p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* "Every event, on the record" */
.record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; align-content: start; }
.record-list li { display: flex; gap: 16px; align-items: flex-start; }
.record-list strong { display: block; color: var(--heading); font-weight: 650; margin-bottom: 3px; }
.record-list span { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* The catalogue */
.tool-group { margin-top: 44px; }
.tool-group h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-bottom: 0.35em; }
.tool-blurb { color: var(--muted); }
.tool-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px 28px;
}
.tool { display: flex; gap: 14px; align-items: flex-start; }
.tool > div { min-width: 0; }
.tool-name { margin: 0 0 4px; color: var(--heading); font-weight: 650; line-height: 1.35; }
.tool > div > p:last-child { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.tool-list-ai .tile { --c: #0ea5e9; }

/* Tier labels. Text plus colour, never colour alone: a screen reader gets the
   word, a colour-blind reader gets the word, everyone else also gets the tint. */
.tag {
  display: inline-block;
  vertical-align: 0.14em;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
  white-space: nowrap;
}
.tag-core { background: color-mix(in srgb, var(--green) 14%, var(--card)); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent); }
.tag-premium { background: color-mix(in srgb, var(--gold) 14%, var(--card)); color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.tag-ai { background: color-mix(in srgb, #0ea5e9 14%, var(--card)); color: #0284c7; box-shadow: inset 0 0 0 1px color-mix(in srgb, #0ea5e9 45%, transparent); }
[data-theme="dark"] .tag-ai { color: #38bdf8; }

/* Who pays */
.model-cards { display: grid; gap: 16px; align-content: start; }
.model-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; }
.model-card p:last-child { margin: 0; color: var(--muted); font-size: 0.95rem; }
.model-who { margin: 0 0 2px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.model-line { margin: 0 0 8px; color: var(--heading); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.model-card-accent { border-left: 3px solid var(--gold); }

@media (max-width: 800px) {
  .tool-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sell { transition: none; }
  .sell:hover, .sell:focus { transform: none; }
}