/* Meridian Flux site styles */

:root {
  /* Brand Guidelines v1.0, section 04 / Colour */
  --navy: #01246C;        /* Meridian Navy — wordmark, headings, text */
  --accent: #0048FC;      /* Flux Blue — accent, arrow, links, buttons */
  --navy-deep: #02153F;   /* Deep Space — dark backgrounds */
  --ground: #F4F6FB;      /* Cloud — light panels and surfaces */

  --white: #FFFFFF;
  --teal: #1BB5A6;

  /* Semantic layer. The four brand colours above never change; these are what
     the components actually use, and what the dark theme remaps. The split
     matters because --navy is both body text and a button fill, and --white is
     both a card surface and text on dark — flipping either literally would
     make text vanish. */
  --bg: #F4F6FB;                            /* page */
  --surface: #FFFFFF;                       /* cards, panels */
  --surface-translucent: rgba(255, 255, 255, 0.82);
  --header-bg: rgba(244, 246, 251, 0.82);
  --footer-bg: #02153F;
  --text: #01246C;                          /* headings and body */
  --text-2: #3F4B6B;
  --text-3: #57638A;
  --border: #DCE2EE;
  --link: #0048FC;                          /* accent where it carries text */
  --topo: #01246C;                          /* contour strokes */

  /* The strong button is navy on light. On dark, navy on Deep Space is
     1.24:1 and the button disappears, so it flips to a light fill. */
  --btn-strong-bg: #01246C;
  --btn-strong-fg: #FFFFFF;
  --btn-strong-bg-hover: #0048FC;
  --accent-hover: #01246C;
  --tile-feature-bg: #01246C;

  /* Section 05 / Typography. Montserrat has no width axis, so the display
     sizes below use letter-spacing rather than font-stretch. */
  --font-display: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --pad-x: clamp(20px, 5.5vw, 80px);
  --section-y: clamp(64px, 8vw, 112px);
  --radius: 28px;
}

/* Dark theme. Follows the system by default; [data-theme] lets the toggle
   override it either way. Deep Space is the brand's designated dark surface. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --bg: #02153F;
  --surface: #0B2455;
  --surface-translucent: rgba(11, 36, 85, 0.72);
  --header-bg: rgba(2, 21, 63, 0.85);
  --footer-bg: #010E2B;
  --text: #F2F5FC;
  --text-2: #C7D3F0;
  --text-3: #9FB0DB;
  --border: rgba(143, 176, 255, 0.22);
  --link: #6E8FFF;
  --topo: #8FB0FF;
  --btn-strong-bg: #F2F5FC;
  --btn-strong-fg: #02153F;
  --btn-strong-bg-hover: #C7D3F0;
  --accent-hover: #0038C8;
  --tile-feature-bg: #16336B;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #02153F;
  --surface: #0B2455;
  --surface-translucent: rgba(11, 36, 85, 0.72);
  --header-bg: rgba(2, 21, 63, 0.85);
  --footer-bg: #010E2B;
  --text: #F2F5FC;
  --text-2: #C7D3F0;
  --text-3: #9FB0DB;
  --border: rgba(143, 176, 255, 0.22);
  --link: #6E8FFF;
  --topo: #8FB0FF;
  --btn-strong-bg: #F2F5FC;
  --btn-strong-fg: #02153F;
  --btn-strong-bg-hover: #C7D3F0;
  --accent-hover: #0038C8;
  --tile-feature-bg: #16336B;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--text); }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--accent);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { top: 16px; color: var(--white); }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* ---------------------------------------------------------------------------
   Contour backdrop

   The Serra da Estrela at 50 m intervals, pinned to the viewport while the
   page scrolls over it. No scroll listener and no parallax library: a fixed
   box at z-index 0, with the header, main and footer above it at z-index 1.

   `slice` scaling means the artwork always covers the viewport and crops
   rather than letterboxing. It is decorative, so it is aria-hidden in the
   markup and takes no pointer events.
   --------------------------------------------------------------------------- */

.topo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
}

/* The artwork is a single flat-coloured line drawing, so it is used as a mask
   and painted with a token rather than shipped twice per theme. Inside
   @supports, because an unsupported mask would paint a solid block: without
   it the layer simply has no background and stays invisible. */
@supports ((-webkit-mask-image: url("/assets/contours.svg")) or (mask-image: url("/assets/contours.svg"))) {
  .topo {
    background-color: var(--topo);
    -webkit-mask: url("/assets/contours.svg") center / cover no-repeat;
    mask: url("/assets/contours.svg") center / cover no-repeat;
  }
}

/* Settles the edges into the page so the crop does not read as a hard cut. */
.topo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 38%, transparent 38%, var(--bg) 100%);
  opacity: 0.8;
}

.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* The header and the light band sit on their own ground so text stays crisp;
   a slight translucency keeps the contours reading through rather than
   stopping dead at each edge. */
.site-header { background: var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.section-white { background: var(--surface-translucent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Type */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 7.2vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.accent { color: var(--link); }

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.h2-wide { max-width: 900px; }

.lede {
  max-width: 600px;
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--text-2);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-sm { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 18px; }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-hover); color: var(--white); }
.btn-navy { background: var(--btn-strong-bg); color: var(--btn-strong-fg); }
.btn-navy:hover { background: var(--btn-strong-bg-hover); color: var(--btn-strong-fg); }
.btn-outline { border: 1.5px solid var(--text); color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--bg); }
.btn-white { background: var(--white); color: var(--navy); min-height: 52px; padding: 0 24px; }
.btn-white:hover { background: var(--teal); color: #04161C; }
.site-footer .btn-accent:hover { background: var(--white); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  font-size: 17px;
}

/* Header */
.site-header { border-bottom: 1px solid var(--border); }
.header-inner {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Guideline 06: the reversed lockup on Deep Space, the two-tone one on light.
   Painted as a background so only the active theme's file is fetched. */
.brand {
  display: block;
  width: 188px;
  height: 40px;
  background: url("/assets/logo.png") left center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand { background-image: url("/assets/logo-dark.png"); }
}
:root[data-theme="dark"] .brand { background-image: url("/assets/logo-dark.png"); }
:root[data-theme="light"] .brand { background-image: url("/assets/logo.png"); }
.site-nav { display: flex; align-items: center; gap: 40px; font-weight: 500; font-size: 16px; }
.nav-link { color: var(--text); }
.nav-link:hover { color: var(--link); }

/* Hero */
/* No bottom rule: the contour field is continuous, and a full-width line
   cut straight across it at the section boundary. */
.hero { position: relative; }
.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 64px;
}
.hero-copy { max-width: 760px; display: flex; flex-direction: column; gap: 32px; }
/* A soft wash of page colour behind the globe, thinning the contours where it
   sits so it reads as an object rather than more texture. Anchored right, so
   the headline side is untouched. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 52%, var(--bg) 0%, var(--bg) 22%, transparent 58%);
  opacity: 0.85;
}

.hero-globe { width: min(520px, 38vw); height: auto; flex-shrink: 0; color: var(--text); }
.globe-arrow { stroke: var(--link); }

/* Theme toggle */
.theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--link); color: var(--link); }

/* Show the icon for the theme the button switches *to*. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Sections */
.section { padding-block: var(--section-y); }
.section-white { border-block: 1px solid var(--border); }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.section-head.split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.section-head.split > div { display: flex; flex-direction: column; gap: 12px; }
.section-intro { max-width: 420px; font-size: 18px; color: var(--text-2); }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 24px;
}
.tile {
  border-radius: var(--radius);
  padding: 40px;
  overflow: hidden;
  display: flex;
}
.tile p { font-size: 17px; }
.tile-top { display: flex; flex-direction: column; gap: 16px; }

.tile-feature {
  grid-column: span 12;
  align-items: center;
  justify-content: space-between;
  background: var(--tile-feature-bg);
  color: var(--white);
  padding: 48px;
  gap: 40px;
}
.tile-feature .tile-top { gap: 20px; }
.tile-feature .tile-top p { font-size: 19px; color: #D5DCEE; }
.tile-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; max-width: 54ch; }
.tile-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.proof { font-family: var(--font-mono); font-size: 13px; color: #AEB9D6; }

.phone {
  width: 260px;
  align-self: center;
  aspect-ratio: 250 / 510;
  flex-shrink: 0;
  border-radius: 40px;
  border: 8px solid #1E2F63;
  background: #122663;
  overflow: hidden;
  display: flex;
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.tile-light {
  grid-column: span 6;
  background: var(--surface);
  border: 1px solid var(--border);
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.tile-light p { color: var(--text-2); }

/* Screenshot peeking from the foot of the card. Decorative — the copy above
   already says what the app does — so it is aria-hidden with an empty alt. */
.shot {
  margin-top: 28px;
  align-self: center;
  width: 240px;
  height: 132px;
  flex-shrink: 0;
  overflow: hidden;
  border: 8px solid var(--navy);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: var(--navy);
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  /* Pull the iOS status bar out of frame. */
  margin-top: -26px;
}

.tile-terra {
  grid-column: span 12;
  background: #1F2A24;
  color: #F3EEE2;
  gap: 28px;
}
.tile-terra p { color: #D6D0BF; }
.tile-terra .text-link { color: #F3EEE2; }
.tile-terra .text-link:hover { color: var(--white); text-decoration: underline; }
.tile-stack { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; max-width: 46ch; }
.tile-terra { align-items: center; justify-content: space-between; }

.tile-title-lg, .tile-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.tile-title-lg { font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.tile-title { font-size: clamp(30px, 2.7vw, 38px); line-height: 1.05; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #C9CFDD;
  color: var(--text-2);
}
.tag-teal { background: var(--teal); border-color: var(--teal); color: #04161C; font-weight: 500; }
.tag-dark { border-color: #5B6B94; color: #D5DCEE; }
.tag-earth { border-color: #6E7A6F; color: #E4DDCB; }

.terrain-grid {
  width: 176px;
  height: 176px;
  flex-shrink: 0;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  padding: 8px;
  border-radius: 14px;
  background: #141B17;
}
.terrain-grid span { border-radius: 3px; }

.cta-strip {
  margin-top: 48px;
  border: 1.5px dashed #9AA5C2;
  border-radius: var(--radius);
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.cta-sub { color: var(--text-2); }

/* Approach */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.principle {
  padding: 28px 32px 8px;
  border-top: 2px solid var(--text);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.principle:first-child { padding-left: 0; border-left: 0; }
.principle:last-child { padding-right: 0; }
.principle-num { font-family: var(--font-mono); font-size: 13px; color: var(--link); }
.principle h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; }
.principle p:last-child { color: var(--text-2); }

/* About */
.about { display: flex; gap: 80px; align-items: flex-start; }
.about .section-head { width: 420px; flex-shrink: 0; margin-bottom: 0; }
.founder { margin: 0; width: 220px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.founder img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.founder figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.founder-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.founder-role { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: var(--text-3); }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--white); padding: var(--section-y) 0 56px; }
.contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-bottom: 104px;
}
.contact > div { display: flex; flex-direction: column; gap: 24px; }
.contact-title {
  max-width: 820px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.contact-email { font-family: var(--font-mono); font-size: clamp(17px, 1.6vw, 22px); color: #8FB0FF; word-break: break-all; }
.contact-email:hover { color: var(--white); }
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid #22346A;
}
.footer-bar img { height: 32px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 32px; font-size: 15px; align-items: center; }
.footer-links a { color: #C5CFEA; }
.footer-links a:hover { color: var(--white); }
.footer-links span { color: #A7B3D6; }

/* Copernicus data requires attribution; this is that credit. */
.footer-credit {
  margin-top: 20px;
  max-width: 60ch;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #8C99BF;
}

/* Simple content pages (privacy, support, 404) */
.page { padding-block: var(--section-y); }
.page-body { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.page-body h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.5vw, 64px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 12px; }
.page-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-top: 16px; }
.page-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-top: 12px; }
.page-body p, .page-body li { color: var(--text-2); }
.page-body ul { list-style: disc; padding-left: 22px; }

/* Responsive */
@media (max-width: 1180px) {
  .hero-globe { display: none; }
  .hero::after { display: none; }
  .topo { opacity: 0.22; }
  .hero-inner { min-height: 0; padding-block: 96px; }
  .bento { grid-template-rows: auto; }
  .tile-feature { grid-column: span 12; grid-row: auto; }
  .tile-light { grid-column: span 6; }
  .tile-feature { flex-direction: column; align-items: flex-start; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .principle:nth-child(3) { padding-left: 0; border-left: 0; }
  .principle:nth-child(2) { padding-right: 0; }
  .about { gap: 56px; }
  .about .section-head { width: auto; }
}

@media (max-width: 820px) {
  .nav-link { display: none; }
  .site-nav { gap: 12px; }
  .header-inner { min-height: 80px; }
  .brand { width: 150px; height: 32px; }
  .section-head.split { flex-direction: column; align-items: flex-start; }
  .tile { padding: 32px; }
  .tile-feature { flex-direction: column; padding: 32px; }
  .phone { width: 220px; height: 440px; }
  .tile-light { grid-column: span 12; }
  .tile-terra { flex-direction: column; }
  .terrain-grid { align-self: flex-start; }
  .cta-strip { flex-direction: column; align-items: flex-start; padding: 32px; }
  .principles { grid-template-columns: 1fr; }
  .principle, .principle:nth-child(n) { padding: 24px 0 0; border-left: 0; }
  .about { flex-direction: column; gap: 40px; }
  .founder { align-self: flex-start; }
  .contact { flex-direction: column; align-items: flex-start; padding-bottom: 72px; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 20px; }
}

/* "Coming soon" — stands in for an app link until the app ships. Not a link:
   no href, no pointer, no arrow, so nothing invites a click. */
.coming-soon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* On the dark feature tile, where it replaces a solid white button. */
.coming-soon-badge {
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #C7D3F0;
}

/* The two darker tiles need their own contrast. */
.tile-terra .coming-soon { color: #BDB5A2; }

/* Brand guidelines page ---------------------------------------------------- */
.brand-section { margin-top: 64px; display: flex; flex-direction: column; gap: 12px; }
.brand-section > .h2 { margin-bottom: 20px; }

.logo-suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.logo-suite figure { margin: 0; }
.logo-suite figure:first-child { grid-column: span 2; }
.logo-suite .plate {
  height: 140px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.logo-suite .plate-deep { background: var(--navy-deep); border-color: var(--navy-deep); }
.logo-suite .plate img { max-height: 100%; width: auto; }
.logo-suite figcaption { font-size: 15px; color: var(--text-2); margin-top: 10px; }
.logo-suite figcaption strong { color: var(--text); font-weight: 600; }

.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.swatch .chip { height: 76px; border-radius: 10px; border: 1px solid transparent; }
/* Deep Space on a Deep Space page would otherwise be an invisible swatch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swatch .chip,
  :root:not([data-theme="light"]) .logo-suite .plate-deep { border-color: var(--border); }
}
:root[data-theme="dark"] .swatch .chip,
:root[data-theme="dark"] .logo-suite .plate-deep { border-color: var(--border); }
.swatch h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 12px 0 2px; }
.swatch .hex { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.swatch p:last-child { font-size: 15px; color: var(--text-2); margin-top: 2px; }

.specimens { display: grid; gap: 18px; }
.specimen { display: flex; align-items: center; gap: 20px; }
.specimen .aa { width: 64px; flex-shrink: 0; font-size: 38px; line-height: 1; color: var(--text); }
.specimen > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.specimen-name { font-size: 16px; font-weight: 600; color: var(--text); }
.specimen-use { font-size: 15px; color: var(--text-2); }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.rules h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.rules ul { display: grid; gap: 10px; margin-top: 12px; }
.rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.rules svg { flex-shrink: 0; margin-top: 5px; }

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
.pillar h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.pillar p { font-size: 15px; color: var(--text-2); }

.statements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.statements .eyebrow { color: var(--text); margin-bottom: 8px; }
.statement {
  border-left: 3px solid var(--link);
  padding: 2px 0 2px 18px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
}

@media (max-width: 1180px) {
  .swatches, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .logo-suite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules, .statements { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .logo-suite, .swatches, .pillars { grid-template-columns: 1fr; }
  .logo-suite figure:first-child { grid-column: auto; }
}