/* ============================================================
   Noetisphere Innovations — site stylesheet
   Palette and spacing tokens live at the top; change them here.
   TYPE SIZES ARE IN WHOLE PIXELS. The root is 16px, so every font-size here
   is a multiple of .0625rem — 12px=.75, 13px=.8125, 14px=.875, 15px=.9375,
   16px=1, 17px=1.0625, 18px=1.125. A size like .96rem lands on 15.36px, and
   on an ordinary 1x display the rasteriser then straddles the pixel grid and
   the text looks soft. Keep new sizes on the grid.

   TEXT ON A LIGHT BACKGROUND IS --ink, which IS --navy-900 - the same colour
   as the headings. Owner decision, 2026-09-22: grey body
   copy read as washed out, so every word the visitor is meant to read is near
   black, including the small ones - hints, notes, eyebrows, straplines and the
   "last updated" line. --ink-soft is no longer a text colour; it survives only
   on the disabled button, where looking inactive is the point, and on the FAQ
   chevron, which is a border. Do not reach for it for new copy.
   BORDERS COME IN TWO STRENGTHS. --line (#dde5ee) is 1.3:1 on white and is for
   decoration only - card edges, table cells, dividers - where the line is a hint
   and nothing depends on seeing it. Anything you can TYPE IN OR CLICK gets
   --line-control (#74879f, 3.7:1 on white, 3.5:1 on --bg-alt, 3.3:1 on
   --navy-050), because an empty text box has no other visual cue that it is a
   control - WCAG 1.4.11 wants 3:1 for that boundary. Owner report 2026-09-22:
   the contact form read as blank page. The one exception is .btn.is-disabled,
   which keeps --line because looking inactive is the point.
   --amber-600 is the darkest amber that still clears 4.5:1 on white, --bg-alt
   and --amber-100. On the navy bands use --amber-400 instead: --amber-500 is
   only 3.9:1 there and fails as body or label text.
   ============================================================ */

:root {
  --navy-900: #0b1f38;
  --navy-800: #122c4d;
  --navy-700: #1b3c66;
  --navy-050: #eef3f9;
  --amber-600: #96590a;
  --amber-400: #e5a337;   /* amber for text ON the navy bands; -600 is for text on white */
  --amber-500: #d98613;
  --amber-100: #fdf1dd;
  --ink: var(--navy-900);   /* text = the heading colour; owner pick, 2026-09-22 */
  --ink-soft: #3d4b5a;
  --line: #dde5ee;          /* decorative rules only - card edges, table cells, dividers */
  --line-control: #74879f;   /* 3.7:1 on white - the edge of anything you can type in or click */
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --ok: #1c7a4a;
  --err: #b3261e;

  --wrap: 1140px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 56, .06), 0 2px 8px rgba(11, 31, 56, .05);
  --shadow-md: 0 6px 24px rgba(11, 31, 56, .09);
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

img { max-width: 100%; display: block; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; color: var(--navy-900); margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.015em; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }

/* The focus ring is two-tone on purpose. A single amber ring was 2.38:1 on
   white and failed WCAG 1.4.11; a single navy ring would vanish on the navy
   bands. White halo then navy ring means the two are always adjacent to each
   other (16.6:1), so whichever one the background swallows, the other still
   reads. No border-radius here - browsers follow the element's own radius, and
   hard-coding 4px squared off the 8px form inputs the moment they took focus. */
:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--navy-900);
  color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* Touch targets. WCAG 2.2 SC 2.5.8 asks for at least 24x24 CSS px. Links that
   sit on their own line in a list get their own minimum here rather than
   relying on the spacing exception. Links inline in a sentence are exempt from
   the rule and are deliberately left alone — padding them would break the
   line spacing of the paragraph around them.

   Scoped to anchors whose whole content is a single element or text node. The
   GSTIN item in the topbar is a span mixing a text label with a strong tag, and
   making that a flex container drops the space between the two. */
.foot-list a,
.foot-address a,
.info-list a,
a.topbar-item {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* Headings that exist to give a section a place in the document outline
   without adding a visible title to the design. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- config placeholders / errors ---------- */

.cfg-placeholder {
  background: #fff4d6;
  border-bottom: 1px dashed var(--amber-600);
  color: var(--amber-600);
  padding: 0 .18em;
  border-radius: 3px;
}

.cfg-error {
  background: #fdecea; color: var(--err); padding: .9rem 1.2rem;
  border-bottom: 2px solid var(--err); font-size: .9375rem;
}
.cfg-error code { background: rgba(0,0,0,.06); padding: .1em .35em; border-radius: 4px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.4rem; border-radius: 8px; font-weight: 600; font-size: 1rem;
  border: 1.5px solid transparent; cursor: pointer; transition: .18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-primary { background: var(--amber-500); color: #21160a; border-color: var(--amber-500); }
.btn-primary:hover { background: var(--amber-600); border-color: var(--amber-600); color: #fff; }
.btn-dark { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.btn-dark:hover { background: var(--navy-900); }
.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--line-control); }
.btn-outline:hover { border-color: var(--navy-800); background: var(--navy-050); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); }

/* A call to action that is deliberately not available yet — every demo button
   while demoAvailable is false in company.json. These render as <span>, not
   <a>, so there is no link to click, hover or tab into. The grey says so to a
   sighted visitor; aria-disabled and the note beside it say so to everyone
   else. */
.btn.is-disabled {
  background: var(--navy-050); color: var(--ink-soft); border-color: var(--line);
  cursor: not-allowed;
}
.btn.is-disabled:hover { transform: none; }
/* On the dark bands the light grey reads as an active button, so invert it. */
.cta-band .btn.is-disabled,
.hero .btn.is-disabled {
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.22);
}
/* The one-line explanation that sits under a disabled call to action. */
.cta-note { font-size: .875rem; color: var(--ink); margin: .55rem 0 0; }
.cta-band .cta-note { color: #9fbcd9; margin-top: .7rem; }

.link-arrow { font-weight: 600; font-size: .9375rem; color: var(--amber-600); }
.link-arrow::after { content: " →"; }

/* ---------- header ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: var(--shadow-sm); }

.topbar { background: var(--navy-900); color: #cfe0f2; font-size: .8125rem; }
.topbar-in { display: flex; gap: .8rem; align-items: center; justify-content: flex-end; padding: .42rem 0; flex-wrap: wrap; }
.topbar a { color: #cfe0f2; }
.topbar strong { color: #fff; font-weight: 600; }
.topbar-sep { opacity: .35; }

.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
/* The mark is now the emblem artwork (assets/img/logo-mark.webp), generated
   by tools/make-logo-assets.py. It carries its own gold ring and cream disc,
   so nothing is painted behind it — width/height are set on the <img> too, so
   the header does not reflow while it loads. */
.brand-mark {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { color: var(--navy-900); font-size: 1.0625rem; }
.brand-text small { color: var(--ink); font-size: .75rem; }

.nav-links { display: flex; align-items: center; gap: .3rem; }
.nav-links a {
  padding: .5rem .8rem; border-radius: 7px; font-weight: 600; font-size: .9375rem; color: var(--ink);
}
.nav-links a:hover { background: var(--navy-050); text-decoration: none; }
.nav-links a.active { color: var(--navy-800); background: var(--navy-050); }
.nav-cta { margin-left: .5rem; }
.nav-cta:hover { background: var(--amber-600); }

.nav-toggle {
  display: none; width: 44px; height: 40px; border: 1px solid var(--line-control);
  background: #fff; border-radius: 8px; cursor: pointer; padding: 10px 9px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--navy-800); border-radius: 2px; transition: .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(217,134,19,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color: #eaf2fb; padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero p.lede { font-size: 1.125rem; color: #c9dcf0; max-width: 58ch; }
.hero-eyebrow {
  display: inline-block; font-size: .8125rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber-400); font-weight: 700; margin-bottom: .9rem;
  border: 1px solid rgba(217,134,19,.4); border-radius: 999px; padding: .28rem .85rem;
}
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }

.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }

.hero-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; backdrop-filter: blur(4px);
}
.hero-card h2 { color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.hero-card ul { margin: 0; padding-left: 1.1rem; color: #cfe0f2; font-size: .9375rem; }
.hero-card li { margin-bottom: .45rem; }

/* ---------- page banner (inner pages) ---------- */

.page-head {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color: #fff; padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}
.page-head h1 { color: #fff; margin-bottom: .35rem; }
.page-head p { color: #c9dcf0; margin: 0; max-width: 62ch; }
.crumbs { font-size: .875rem; color: #9fbcd9; margin-bottom: .7rem; }
.crumbs a { color: #9fbcd9; }
.crumbs span { opacity: .6; padding: 0 .35rem; }

/* ---------- sections ---------- */

section { padding: clamp(2.6rem, 6vw, 4.2rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 64ch; margin-bottom: 2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  font-size: .8125rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber-600); font-weight: 700; margin-bottom: .5rem; display: block;
}
.lede { font-size: 1.0625rem; color: var(--ink); }

/* ---------- grids & cards ---------- */

.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.split-wide { grid-template-columns: 1.25fr .75fr; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm); transition: .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #c9d6e6; }
/* A card title is an h2 where the document outline needs one and an h3 where it
   sits under a section heading. Both are sized as a card title, not as a
   page-level heading. */
.card h2, .card h3 { margin-bottom: .4rem; }
.card h2 { font-size: 1.125rem; letter-spacing: normal; }
.card p { color: var(--ink); font-size: 1rem; margin-bottom: .8rem; }
.card p:last-child { margin-bottom: 0; }

.card-ico {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: var(--amber-100); color: var(--amber-600); margin-bottom: 1rem;
}
.card-ico .ico { width: 24px; height: 24px; }
/* A product brand mark fills the badge instead of sitting on the amber tile.
   object-fit keeps a non-square mark from being stretched into the square. */
.card-ico-mark { background: none; }
.card-ico-mark img { width: 46px; height: 46px; object-fit: contain; display: block; }

.ticks { list-style: none; margin: 0; padding: 0; font-size: .9375rem; color: var(--ink); }
.ticks li { position: relative; padding-left: 1.4rem; margin-bottom: .38rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 12px;
  border: solid var(--amber-600); border-width: 0 2px 2px 0; transform: rotate(43deg);
}

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

/* The pricing page is a directory, not a price list: one row per product and a
   link to where that product publishes its plans. The card, figure and
   "announced soon" styles that used to live here went with the plan cards -
   the only survivor is .price-tba, which now marks a product whose shop is not
   open yet.
   The table reuses .detail-table but flips its shape. That one is a two-column
   key/value list, so its th is 38% wide and every th is a row header; this one
   has a real header row, and the middle column takes whatever is left. */
.plan-table th { width: auto; white-space: nowrap; }
.plan-table thead th:last-child, .plan-table thead th:nth-child(2) { white-space: normal; }
.plan-table td:nth-child(2) { width: 100%; white-space: normal; }
.plan-table td:last-child { white-space: nowrap; }
.price-tba { font-weight: 600; color: var(--amber-600); }

/* ---------- product cards ---------- */

.product-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card .product-cat {
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); font-weight: 700; margin: 0 0 .25rem;
}
.product-card h3 { margin-bottom: .35rem; }
.product-tagline { color: var(--ink) !important; font-weight: 600; font-size: 1rem !important; }

.badge {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.badge-live { background: #e4f4ea; color: #14683f; border-color: #b9e2ca; }
.badge-beta { background: var(--amber-100); color: var(--amber-600); border-color: #f0d7ac; }
.badge-dev  { background: var(--navy-050); color: var(--navy-700); border-color: #cddbea; }

/* ---------- stats ---------- */

.stats-band { background: var(--navy-800); color: #fff; padding: 2.2rem 0; }
.stats-band .grid { gap: 1rem; }
.stat { text-align: center; padding: .6rem; }
.stat strong { display: block; font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--amber-400); line-height: 1.1; }
.stat span { font-size: .875rem; color: #c9dcf0; }

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

.detail-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9375rem; }
.detail-table th, .detail-table td {
  text-align: left; padding: .78rem 1rem; border: 1px solid var(--line); vertical-align: top;
}
.detail-table th { background: var(--navy-050); width: 38%; color: var(--navy-900); font-weight: 600; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 820px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .7rem; background: #fff; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-weight: 600; color: var(--navy-900);
}
.faq-q:hover { background: var(--bg-alt); }
.faq-chev {
  width: 10px; height: 10px; flex: 0 0 10px; border: solid var(--ink-soft);
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; margin-top: -4px;
}
.faq-q[aria-expanded="true"] .faq-chev { transform: rotate(-135deg); margin-top: 4px; }
.faq-a { padding: 0 1.15rem 1.1rem; color: var(--ink); font-size: 1rem; }
.faq-a p { margin: 0; }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items: start; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; color: var(--navy-900); }
.field .req { color: var(--err); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-control); border-radius: 8px;
  font: inherit; font-size: 16px; line-height: 24px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
/* appearance:none takes the select out of the native Windows widget and draws
   it as an ordinary box, so its text goes through the same text pipeline as
   the inputs beside it rather than the OS theme. The arrow is ours from here.
   NOTE: this only reaches the CLOSED control. The list that opens on click is
   a native OS popup window and no stylesheet can reach it. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230b1f38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field select::-ms-expand { display: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-700); outline-offset: 1px; }
/* Honeypot wrapper — see the comment on the field in contact.html. Moved out
   of view rather than hidden, so a bot that ignores CSS still fills it in and
   gives itself away. Never put a real field in here. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.field-hint { font-size: .8125rem; color: var(--ink); margin-top: .3rem; }

.form-status { margin-top: .9rem; font-size: .9375rem; font-weight: 600; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }
/* Failure messages carry a mail and a phone link, so those need to read as
   links against the error colour rather than inherit it. */
.form-status.err a { color: inherit; text-decoration: underline; }

.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list strong { display: block; font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.info-list a, .info-list span.val { color: var(--navy-800); font-weight: 600; }

#map-holder { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
#map-holder iframe { width: 100%; height: 320px; border: 0; display: block; }
.map-empty { padding: 2rem 1.2rem; text-align: center; color: var(--ink); font-size: .9375rem; }
.map-empty code { background: #e7edf5; padding: .1em .35em; border-radius: 4px; }

/* ---------- legal / prose pages ---------- */

.prose { max-width: 78ch; }
.prose h2 { margin-top: 2.2rem; font-size: 1.375rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--ink); }
.prose li { margin-bottom: .45rem; }
.prose .updated { font-size: .875rem; color: var(--ink); border-left: 3px solid var(--amber-500); padding-left: .9rem; }

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(150deg, var(--navy-800), var(--navy-700));
  color: #fff; border-radius: var(--radius); padding: 2.2rem 2.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .3rem; font-size: 1.5rem; }
.cta-band p { color: #c9dcf0; margin: 0; }
.cta-band .actions { display: flex; gap: .7rem; flex-wrap: wrap; }

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

.site-footer { background: var(--navy-900); color: #b9cde3; margin-top: 0; font-size: .9375rem; }
.foot-grid {
  display: grid; grid-template-columns: 1.6fr .8fr .8fr 1.2fr; gap: 2rem;
  padding: 3rem 0 2rem;
}
.site-footer h2 { color: #fff; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #b9cde3; }
.site-footer a:hover { color: #fff; }
.foot-brand .brand-text strong { color: #fff; }
.foot-brand .brand-text small { color: #8fadcb; }
.foot-about { margin-top: 1rem; color: #9fbcd9; font-size: .9375rem; }
.foot-reg { font-size: .875rem; color: #9fbcd9; }
.foot-reg strong { color: #fff; font-weight: 600; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: .55rem; }
.foot-address { font-style: normal; line-height: 1.7; }
.foot-hours { font-size: .875rem; color: #8fadcb; margin-top: .7rem; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 1.1rem 0; display: flex;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .875rem; color: #8fadcb;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero-grid, .split, .split-wide, .contact-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* The menu collapses well above the phone breakpoint because the inline nav
   needs ~1090px on one line: brand 252 + gap 16 + links and button 781, plus
   the .wrap gutters, measured 2026-09-23 with the button reading
   "Peridot — coming soon". Below that, "About Us" and "Contact Us" broke onto
   two lines and, under ~930px, the button ran off the right edge — the old
   760px breakpoint left that whole band broken. 1120 keeps a margin for
   platform fonts wider than Segoe UI. Re-measure if a nav item is added. */
@media (max-width: 1120px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: .6rem 1.25rem 1.1rem; box-shadow: var(--shadow-md); gap: .1rem;
  }
  .nav-links.open { display: flex; }
  .nav-in { position: relative; }
  .nav-cta { margin: .5rem 0 0; }
}

@media (max-width: 760px) {
  .topbar-in { justify-content: center; font-size: .8125rem; }
  .topbar-sep { display: none; }
  .topbar-item { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .form-row, .foot-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 1.6rem; }
  .detail-table th { width: 44%; }
  /* A phone should not have to scroll a three-column table sideways just to
     read a hostname, so let the link break instead. */
  .plan-table td:last-child { white-space: normal; overflow-wrap: anywhere; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { font-size: 12pt; }
}