/*
 * Creditcrest Technologies — corporate site.
 *
 * The Creditcrest Precision brand system (September 2026): midnight anchors,
 * cobalt carries action and emphasis, ice lights dark surfaces, white is the
 * content surface. One geometric sans, Space Grotesk. Controls 6px, cards 12px,
 * an 8px grid. Tokens are the brand system's design-tokens.json; the few
 * derived ones say what they are derived from.
 *
 * Deliberately NOT Mundane Read's look: that is a reading product, paper and
 * serif. This is a lending-software company selling to credit providers.
 *
 * Constraints that are load-bearing, from _headers: style-src 'self' means no
 * inline style attributes anywhere in the HTML, and none inside inline SVG —
 * the evidence drawing is coloured by the .ev-* classes below; img-src 'self'
 * means no data: URIs here. Every url() is a file in this directory,
 * root-absolute because 404.html is served at any path.
 *
 * CONTRAST, measured rather than assumed: cobalt on midnight is 3.55:1, which
 * fails for text. So on dark surfaces the small type, the links and the focus
 * ring are ice (12.65:1), and cobalt appears there only as a filled button with
 * white text on it (5.41:1).
 */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/media/fonts/space-grotesk-400600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/media/fonts/space-grotesk-400600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the brand system's tokens */
  --midnight: #070D24;
  --cobalt: #2457FF;
  --ice: #79DFFF;
  --white: #FFFFFF;
  --surface: #EDF2FF;
  --muted: #53617D;
  --border: #CAD4EB;

  /* derived: raised surfaces on midnight, and the lines between them */
  --midnight-2: #0D1733;
  --midnight-3: #15224A;
  --line-dark: #22305C;
  /* derived: cobalt darkened for hover (white on it 7.2:1), and lightened to
     be read on midnight as a line or a bar (5.4:1) */
  --cobalt-hover: #1A45D8;
  --cobalt-light: #6B8CFF;
  /* derived: body copy, between midnight and the brand's secondary text, for
     paragraphs long enough that #53617D tires the eye (10.6:1 on white) */
  --text: #333E5B;
  /* derived: type on midnight — 10.9:1 and 7.3:1 */
  --on-dark: #B4C3E3;
  --on-dark-dim: #8FA0C7;
  --line: #DEE5F3;

  --r-control: 6px;
  --r-card: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--midnight); line-height: 1.12; margin: 0; font-weight: 500; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -.03em; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: var(--cobalt-hover); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; border-radius: 2px; }
.hero :focus-visible, .how :focus-visible, .numbers :focus-visible, .contact-card :focus-visible, .site-foot :focus-visible, .lost :focus-visible { outline-color: var(--ice); }

/* padding-inline, never the `padding` shorthand: .wrap is also on the hero
   grid, the contact card and the 404 panel, and a shorthand here resets their
   vertical padding to zero wherever this rule wins — which the phone rule
   below did once, flattening the hero against the header. */
.wrap { width: 100%; max-width: 1312px; margin-inline: auto; padding-inline: 64px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--midnight); color: #fff; padding: 10px 14px; border-radius: var(--r-control);
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- buttons, pills, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font: 500 17px/1 var(--font); letter-spacing: -.005em;
  padding: 15px 22px; border-radius: var(--r-control); border: 1.5px solid transparent;
  text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-hover); color: #fff; }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
.btn-ghost:hover { color: #fff; border-color: var(--ice); background: rgba(121, 223, 255, .06); }
.btn-dark { background: var(--midnight); color: #fff; }
.btn-dark:hover { background: var(--midnight-3); color: #fff; }
.btn-link { padding-left: 4px; padding-right: 4px; color: var(--cobalt); }
.btn-link:hover { text-decoration: underline; }
.btn-sm { padding: 11px 16px; font-size: 15px; }
.btn-lg { padding: 18px 26px; font-size: 17px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font); letter-spacing: .02em;
  padding: 8px 12px; border-radius: 999px;
}
.pill-live { background: rgba(121, 223, 255, .1); color: var(--ice); border: 1px solid rgba(121, 223, 255, .38); }
.pill-plain { background: rgba(255, 255, 255, .05); color: var(--on-dark); border: 1px solid rgba(255, 255, 255, .16); }

/* Status is a word first and a colour second, as the brand manual asks. */
.tag { font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-control); }
.tag-built { background: var(--surface); color: var(--cobalt); }
.tag-planned { background: transparent; color: var(--muted); border: 1px dashed var(--border); }

.kicker {
  font: 500 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cobalt); margin-bottom: 18px;
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* 34px tall is 164px wide: above the manual's 160px minimum for the lockup. */
.brand-logo { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a:not(.btn) { color: var(--midnight); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a:not(.btn):hover { color: var(--cobalt); }

.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: var(--r-control); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 2px; background: var(--midnight); border-radius: 2px; }
.menu nav { position: absolute; right: 0; top: 54px; min-width: 220px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: 0 18px 40px -16px rgba(7, 13, 36, .32); padding: 8px; display: flex; flex-direction: column; }
.menu nav a { padding: 12px 14px; border-radius: var(--r-control); text-decoration: none; color: var(--midnight); font-weight: 500; }
.menu nav a:hover { background: var(--surface); }

/* ---------- hero ----------
   The crest sculpture sits in the right two thirds and fades into midnight on
   its left, where the render's own background is already within a shade of
   it, so there is no seam. On a phone it drops below the copy: the manual's
   "the primary action remains visible before the image". */
.hero { position: relative; overflow: hidden; background: var(--midnight); color: var(--on-dark); isolation: isolate; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(121, 223, 255, .55), rgba(36, 87, 255, .7), transparent);
}
.hero-grid {
  position: relative; z-index: 1; display: flex; align-items: center;
  padding-top: 104px; padding-bottom: 104px; min-height: min(780px, 88vh);
}
.hero-copy { max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 26px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 5px rgba(121, 223, 255, .16); }
.hero h1 { color: #fff; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 28px; }
.hl { color: var(--ice); }
.lede { font-size: 20px; line-height: 1.6; color: var(--on-dark); max-width: 30em; margin-bottom: 36px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.status { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 0; }

/* ---------- sections ---------- */
.section { padding: 112px 0; }
.band { padding: 112px 0; background: var(--surface); }
.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 20px; }
.section-lede { font-size: 20px; color: var(--text); margin: 0; }

.cards { display: grid; gap: 20px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 28px; transition: border-color .16s var(--ease), box-shadow .24s var(--ease);
}
.card:hover { border-color: #A9BAE6; box-shadow: 0 16px 36px -22px rgba(7, 13, 36, .35); }
.card h3 { margin: 20px 0 10px; }
.card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.card.flat:hover { box-shadow: none; }

/* Two icon families, as in the brand system: a product is a midnight tile with
   an ice glyph, like the app icon; anything else is a cobalt glyph on the
   light surface. Same 24px grid and 1.6 stroke for both. */
.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--surface); color: var(--cobalt);
}
.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.product .icon { background: var(--midnight); color: var(--ice); }

.product-top { display: flex; align-items: center; justify-content: space-between; }
.product h3 { font-size: 24px; margin-bottom: 4px; }
.card .lead { color: var(--cobalt); font-weight: 500; font-size: 15px; margin-bottom: 10px; }
.product.planned { background: transparent; border-style: dashed; }
.product.planned:hover { box-shadow: none; }
.product.planned .icon { background: transparent; color: var(--muted); border: 1.5px dashed var(--border); }
.product.planned .lead { color: var(--muted); }

.note {
  margin-top: 32px; padding: 22px 26px; border-radius: var(--r-card);
  background: var(--surface); border-left: 4px solid var(--cobalt);
}
.note p { margin: 0; font-size: 15px; }
.note strong { color: var(--midnight); font-weight: 600; }

/* ---------- products: intro and the lifecycle ---------- */
/* The render is on a white that is not quite #fff; multiply takes its edge
   away against the page, so it has no visible box. */
/* Its studio white is not quite #fff and its shadow runs to the frame, so
   multiply takes the white away and the mask fades the frame out: no box. */


.stage { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 56px 0 20px; font-size: 20px; color: var(--midnight); }
.stage:first-of-type { margin-top: 0; }
.stage-k { font: 600 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ice); background: var(--midnight); padding: 8px 10px; border-radius: var(--r-control); }

/* ---------- how it works ---------- */
.how { position: relative; padding: 112px 0; background: var(--midnight); color: var(--on-dark); }
.how h2 { color: #fff; margin-bottom: 20px; }
.how .kicker { color: var(--ice); }
.how .section-lede { color: var(--on-dark); }
.how-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.evidence { margin: 0; }
.evidence figcaption { margin-top: 10px; font-size: 13px; color: var(--on-dark-dim); text-align: right; }

.ev { width: 100%; height: auto; overflow: visible; }
.ev text { font-family: var(--font); }
.ev-mono text, .ev-hash { font-family: var(--mono); }
.ev-mono text { fill: #DCE4F7; }
.ev-chips rect { fill: var(--midnight-2); stroke: var(--line-dark); stroke-width: 1; }
.ev-in { stroke: var(--ice); }
.ev-out { stroke: var(--cobalt-light); }
.ev-dash { stroke-dasharray: 5 5; }
.ev-file { fill: #0F1B40; stroke: rgba(121, 223, 255, .55); stroke-width: 1.2; }
.ev-title { fill: #fff; font-weight: 600; letter-spacing: .12em; }
.ev-hash { fill: var(--on-dark-dim); }
.ev-lock { fill: none; stroke: var(--ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ev-rule { stroke: var(--line-dark); stroke-width: 1; }
.ev-label { fill: #DCE4F7; }
.ev-value { fill: #fff; font-weight: 600; }
.ev-sub text, .ev-foot { fill: var(--on-dark-dim); }
.ev-dot-in { fill: var(--ice); }
.ev-dot-out { fill: var(--cobalt-light); }
.ev-tie { stroke: var(--on-dark-dim); stroke-width: 1.2; stroke-dasharray: 2 4; fill: none; }
.ev-decision { fill: none; stroke: var(--ice); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ev-made { fill: #fff; font-weight: 600; }


/* ---------- numbers ----------
   The crest's ribs, repeated, as a texture behind the numbers and the
   contact card: the brand system's architecture pattern, at a few per cent. */
.numbers {
  position: relative; padding: 104px 0; color: var(--on-dark);
  background: url(/media/brand/ribs.svg) no-repeat right -40px center / auto 118%, var(--midnight);
}
.on-dark h2 { color: #fff; }
.on-dark .kicker { color: var(--ice); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 26px; border-radius: var(--r-card);
  background: var(--midnight-2); border: 1px solid var(--line-dark);
}
.stat-n { font-size: 68px; font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--ice); }
.stat-l { font-size: 15px; line-height: 1.5; color: var(--on-dark); }

/* ---------- Mundane Read ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.split h2 { margin-bottom: 20px; }
.split p { font-size: 17px; }
.chips { list-style: none; padding: 0; margin: 26px 0 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  font-size: 15px; font-weight: 500; color: var(--midnight);
  padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
}

.compare { margin: 0; }
.compare-card { border-radius: var(--r-card); padding: 32px; color: var(--on-dark); background: var(--midnight); }
.compare-title { color: #fff; font-weight: 500; font-size: 20px; margin: 0 0 4px; }
.compare-sub { font-size: 15px; color: var(--on-dark-dim); margin: 0 0 26px; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bars li { display: grid; grid-template-columns: 118px 1fr 40px; align-items: center; gap: 14px; font-size: 15px; }
.bar-name { color: #DCE4F7; }
.bar { height: 10px; border-radius: 99px; background: var(--midnight-3); overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 99px; background: var(--cobalt-light); }
.fill-99 { width: 99%; }
.fill-78 { width: 78%; }
.fill-76 { width: 76%; }
.bar-v { font-family: var(--mono); color: #fff; text-align: right; }
.ours .bar-name { color: #fff; font-weight: 600; }
.ours .fill { background: var(--ice); }
.ours .bar-v { color: var(--ice); font-weight: 700; }
.compare figcaption { font-size: 15px; color: var(--muted); margin-top: 14px; }

/* ---------- roadmap ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 18px 46px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center;
  font: 600 13px/1 var(--font); color: var(--cobalt); background: var(--surface);
}
.steps strong { color: var(--midnight); font-weight: 600; }

/* ---------- launch ---------- */
.launch-steps { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 32px; }

/* ---------- pricing ---------- */
.plans { margin-bottom: 24px; }
.plan h3 { margin-top: 0; font-size: 20px; }
.plan-price { margin: 0 0 4px; color: var(--muted); }
.card .plan-price { font-size: 15px; margin-top: 14px; }
.plan-n { font-size: 44px; font-weight: 500; color: var(--midnight); letter-spacing: -.035em; margin-right: 4px; }
.card .plan-inc { margin: 0 0 14px; font-weight: 500; color: var(--cobalt); font-size: 15px; }
.plan-mid { border: 2px solid var(--cobalt); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-box { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px; }
.price-box h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.price-table td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child { text-align: right; font-weight: 600; color: var(--midnight); white-space: nowrap; padding-left: 12px; }
.price-note { margin: 14px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- contact ---------- */
.contact { padding: 0 0 112px; }
.contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 56px; border-radius: 16px; color: var(--on-dark);
  background: url(/media/brand/ribs.svg) no-repeat right -120px center / auto 170%, var(--midnight);
  max-width: 1184px;
}
.contact-card h2 { color: #fff; margin-bottom: 12px; }
.contact-card p { margin: 0; font-size: 17px; }
.contact-more { margin-top: 32px; }
.contact-more dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-more dt a { font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.contact-more dd { margin: 4px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- footer ---------- */
.site-foot { background: var(--midnight); color: var(--on-dark-dim); padding: 64px 0 32px; font-size: 15px; }
.foot-grid { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.site-foot .brand-logo { height: 44px; }
.legal { margin: 20px 0 0; }
.legal + .legal { margin-top: 6px; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a { color: #DCE4F7; text-decoration: none; }
.foot-links a:hover { color: #fff; text-decoration: underline; }
.foot-credits { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.foot-credits p { margin: 0; font-size: 13px; color: var(--on-dark-dim); }

/* ---------- 404 ---------- */
.lost-page { background: var(--midnight); }
/* The header is 94% white so the page shows through it as you scroll; here
   there is only midnight behind it, which would turn it grey for good. */
.lost-page .site-head { background: #fff; }
.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 96px 0; }
.lost .mark { width: 64px; height: auto; margin: 0 auto 28px; }
.lost .code { font-family: var(--mono); color: var(--ice); font-size: 15px; letter-spacing: .1em; margin-bottom: 14px; }
.lost h1 { color: #fff; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.035em; margin-bottom: 16px; }
.lost p { color: var(--on-dark); max-width: 32em; margin: 0 auto 32px; }

/* ---------- the software, working ---------- */
.working-cards .work { display: flex; flex-direction: column; gap: 6px; }
.work .xp { margin-bottom: 14px; flex: 1; }
.work h3 { margin: 0; }
.card .work-lead { color: var(--cobalt); font-weight: 500; margin: 0 0 6px; }
.work .btn-link { align-self: flex-start; padding: 6px 0; font-size: 15px; }

/* ---------- redesign, 27 September 2026 ----------
   Less said, more shown: numbers as a light strip under the hero, product
   cards as a name and a line that open the product, the path a loan takes,
   an API sample, and questions answered in one line each. */

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.numbers { padding: 0; background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.numbers .stats { gap: 0; }
.numbers .stat { background: transparent; border: 0; border-radius: 0; padding: 36px 28px; gap: 8px; border-left: 1px solid var(--line); }
.numbers .stat:first-child { border-left: 0; padding-left: 0; }
.numbers .stat-n { font-size: 44px; color: var(--cobalt); }
.numbers .stat-l { font-size: 15px; color: var(--muted); }

.products .product { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 18px 20px; }
.products .product-top { display: contents; }
.products .product .icon { grid-row: 1 / 3; width: 44px; height: 44px; }
.products .product h3 { margin: 0; font-size: 20px; }
.products .product .lead { margin: 2px 0 0; font-size: 15px; }
.products .product .tag { position: absolute; top: 12px; right: 12px; padding: 0; background: none; font-size: 11px; letter-spacing: .1em; }
.products .product .tag-built { color: var(--muted); }
.card-go { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card-go:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.products .product:hover { border-color: var(--cobalt); }
.stage { margin: 40px 0 14px; font-size: 20px; }

.connect { padding-top: 0; }
.pipe { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.pipe li { display: grid; grid-template-columns: 36px 120px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); }
.pipe-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--cobalt); font-weight: 600; font-size: 15px; }
.pipe-k { font: 600 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pipe-s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pipe-p { display: inline-flex; align-items: center; gap: 6px; text-align: center; padding: 7px 12px; border-radius: 8px; background: var(--surface); color: var(--midnight); font-weight: 500; font-size: 15px; text-decoration: none; border: 1px solid transparent; }
a.pipe-p:hover { border-color: var(--cobalt); color: var(--cobalt); }
.pipe-par { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 11px; border: 1px solid var(--border); background: #F7F9FE; }
.pipe-par .pipe-p { background: #fff; }
.pipe-then { color: var(--cobalt); font-weight: 600; }
.pipe-planned { background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.pipe-planned i { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pipe-you { background: transparent; border: 1.5px solid var(--midnight); }
/* Wide enough, the path runs left to right: a column per stage, the steps
   inside a stage stacked, "then" pointing down. */
@media (min-width: 1100px) {
  .pipe { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; }
  .pipe li { position: relative; grid-template-columns: 1fr; align-content: start; justify-items: start; gap: 10px; padding: 16px 14px; }
  .pipe li:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 20px; color: var(--cobalt); font-weight: 600; }
  .pipe-k { margin-top: 2px; }
  .pipe-s { flex-direction: column; align-items: stretch; width: 100%; gap: 6px; }
  .pipe-par { flex-direction: column; }
  .pipe-p { justify-content: center; font-size: 15px; padding: 7px 8px; }
  .pipe-then { align-self: center; transform: rotate(90deg); line-height: 1; }
}

.dev-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.dev h2 { margin-bottom: 20px; }
.ticks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--text); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt); transform: rotate(-45deg); }
.dev-code { display: grid; gap: 12px; min-width: 0; }
.api-code { margin: 0; background: var(--midnight); border-radius: var(--r-card); overflow: hidden; }
.api-code figcaption { display: flex; justify-content: space-between; padding: 9px 16px; border-bottom: 1px solid var(--line-dark); font: 600 11px/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-dim); }
.api-code-note { text-transform: none; letter-spacing: 0; font-weight: 500; }
.api-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--mono); color: #E6ECFA; white-space: pre-wrap; overflow-wrap: anywhere; }
.api-code i { font-style: normal; }
.j-k { color: var(--ice); } .j-s { color: #C9D4F2; } .j-n { color: #8FB0FF; } .j-c { color: var(--on-dark-dim); } .j-f { color: var(--ice); }

.price-more { margin-top: 28px; border: 1px solid var(--border); border-radius: var(--r-card); padding: 0 24px; background: #fff; }
.price-more > summary { cursor: pointer; padding: 18px 0; font-weight: 500; color: var(--cobalt); list-style-position: inside; }
.price-more[open] { padding-bottom: 24px; }
.price-more .price-grid { margin-top: 8px; }

.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 20px 40px 20px 0; font-size: 20px; font-weight: 500; color: var(--midnight); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 24px; font-weight: 400; color: var(--cobalt); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; font-size: 17px; color: var(--text); max-width: 640px; }


@media (max-width: 900px) {
  .numbers .stats { grid-template-columns: repeat(2, 1fr); }
  .numbers .stat { padding: 24px 16px; border-left: 0; border-top: 1px solid var(--line); }
  .numbers .stat:nth-child(-n+2) { border-top: 0; }
  .numbers .stat:first-child { padding-left: 16px; }
  .numbers .stat-n { font-size: 36px; }
  .pipe li { grid-template-columns: 30px minmax(0, 1fr); }
  .pipe-s { grid-column: 1 / -1; }
  .dev-grid, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-wrap { gap: 0; }
  .faq-wrap .section-head { margin-bottom: 24px; }
  .products.cards { gap: 8px; }
  .products .product { padding: 14px 16px; }
}

/* ---------- type ----------
   One scale, 27 September 2026: 11 for labels in capitals, 13 small, 15 the
   secondary text, 17 the body, 20 and 24 for leads and card titles, and the
   headings' own clamps. The page had used 37 different sizes. */

/* ---------- pages, 27 September 2026 ----------
   Four short pages instead of one long one: the home page says what the
   platform is and sends a reader on; the catalogue, the prices and the
   company each have a page. One header and footer, written into every page by
   scripts/build-site-explainers.js, and a cross-fade between pages where the
   browser can (Safari 18.2+, Chrome 126+). */

@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  }
}

.nav a[aria-current="page"] { color: var(--cobalt); }
.menu nav a[aria-current="page"] { color: var(--cobalt); }
.btn-ghost-dark { color: var(--midnight); border-color: var(--border); background: #fff; }
.btn-ghost-dark:hover { border-color: var(--cobalt); color: var(--cobalt); }

.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; min-height: 0; padding-top: 88px; padding-bottom: 96px; }
.hero h1 { font-size: clamp(40px, 4.6vw, 64px); }
.hero-shot { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(121, 223, 255, .22);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 8px rgba(121, 223, 255, .04); transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
.hero-shot img { display: block; width: 100%; height: auto; }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF2FA; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CAD4EB; }
.shot-bar span { margin-left: 10px; font: 500 11px/1 var(--font); color: var(--muted); }

.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stage-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: border-color .16s var(--ease), transform .2s var(--ease); }
.stage-card:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.stage-card .stage-k { align-self: flex-start; }
.stage-card b { font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--midnight); }
.stage-p { font-size: 15px; color: var(--muted); }

.page-top { padding-top: 80px; }
.page-top h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.035em; margin-bottom: 20px; }
.subnav { position: sticky; top: 72px; z-index: 40; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 40px; padding: 10px 0;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.subnav a { flex: none; padding: 7px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--midnight); text-decoration: none; }
.subnav a:hover { background: var(--surface); color: var(--cobalt); }
.stage { scroll-margin-top: 140px; }

.closer { padding: 0 0 112px; }
.band + .closer, .how + .closer { padding-top: 72px; }
.closer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px 44px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.closer-h { margin: 0; max-width: 34em; font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--midnight); letter-spacing: -.01em; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; padding-bottom: 64px; }
  .hero-shot { transform: none; }
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
  .page-top { padding-top: 48px; }
  .subnav { top: 64px; }
  .closer-row { padding: 28px 24px; }
  .closer-h { font-size: 20px; }
}

/* ---------- motion ----------
   The brand system's motions (media/motion/, re-rendered with the capitals
   lockup). Muted, looping, and replaced by a still for a reader who has asked
   for less motion. */
.motion { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--midnight); aspect-ratio: 16 / 9; border: 1px solid var(--line-dark); }
.motion video, .motion img { display: block; width: 100%; height: 100%; object-fit: cover; }
.motion-still { display: none !important; }
@media (prefers-reduced-motion: reduce) { .motion video { display: none; } .motion-still { display: block !important; } }
.stage-row { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.stage-row .products.cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.head-motion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: center; margin-bottom: 56px; }
.head-motion .section-head { margin-bottom: 0; }
.motion-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.motion-cards .motion { margin-bottom: 18px; }
@media (max-width: 900px) {
  .stage-row, .head-motion, .motion-cards { grid-template-columns: minmax(0, 1fr); }
  .stage-row .products.cards-3 { grid-template-columns: minmax(0, 1fr); }
  .head-motion { gap: 24px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .wrap { padding-inline: 40px; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; gap: 48px; }
  .evidence { max-width: 640px; }
}
/* Between a phone and a wide screen the copy and the sculpture share the
   width, and at about 1,000px the paragraph ran across the sculpture's first
   rib. Here the copy narrows and the picture gives up some of its width. */
@media (min-width: 901px) and (max-width: 1280px) {
  .hero-copy { max-width: 470px; }
  .lede { font-size: 17px; }
  .hero h1 { font-size: clamp(40px, 4.6vw, 58px); }
  }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; }
  .hero-grid { padding-top: 64px; padding-bottom: 8px; min-height: 0; }
    .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .price-grid { grid-template-columns: 1fr; }
  .contact-card { flex-direction: column; align-items: flex-start; padding: 44px 36px; background-size: auto 110%; background-position: right -160px bottom -40px, 0 0; }
  .contact-more dl { grid-template-columns: 1fr; }
  .section, .band, .how { padding: 80px 0; }
  .numbers { padding: 80px 0; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .wrap { padding-inline: 24px; }
  .head-row { height: 68px; }
  .brand-logo { height: 34px; }
  .cards-4, .cards-3, .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(40px, 11vw, 48px); }
  .lede { font-size: 17px; }
  .card { padding: 24px; }
  .stat-n { font-size: 56px; }
  .bars li { grid-template-columns: 96px 1fr 36px; gap: 10px; font-size: 15px; }
  .compare-card { padding: 24px; }
  .contact-card { padding: 36px 24px; }
  /* The contact button holds a 36-character address. break-all split it
     wherever the line ran out ("…com.a" / "u"); the <wbr>s in the markup,
     after the @ and before .com.au, are the breaks it should take, and
     overflow-wrap is only the fallback for a screen too narrow even for
     those. The addresses under the card are marked up the same way. */
  .btn-lg { width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.3; font-size: 15px; }
  .foot-grid { flex-direction: column; }
  .section, .band, .how, .numbers { padding: 64px 0; }
  .contact { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
}

/* ---------- print ----------
   Somebody considering a licence or a partnership prints the page. Paper has
   no midnight: the dark bands print as ink on white, the navigation and the
   decorative artwork are left off, and every link prints its address. */
@media print {
  body { font-size: 11pt; color: #000; background: #fff; }
  .site-head, .menu, .skip, .hero-shot, .cta-row, .subnav, .status, .hero::after, .evidence { display: none !important; }
  .hero, .numbers, .band, .how, .contact-card, .site-foot, .compare-card { background: none !important; color: #000 !important; box-shadow: none !important; }
  .hero h1, .how h2, .on-dark h2, .contact-card h2, .compare-title, .stat-n, .bar-v { color: #000 !important; }
  .hl { color: #000; }
  .lede, .stat-l, .contact-card p, .compare-sub, .bar-name, .site-foot, .foot-credits p, .how .section-lede { color: #222 !important; }
  .hero-grid, .section, .band, .how, .numbers { padding: 16pt 0 !important; min-height: 0; }
  .card, .stat, .lane { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; background: #fff !important; }
  .cards-4, .cards-3, .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .split, .how-grid { grid-template-columns: 1fr !important; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " <" attr(href) ">"; font-size: 9pt; word-break: break-all; }
  .btn { border: 1px solid #000; color: #000 !important; background: none !important; }
  .site-foot .brand-logo { filter: invert(1); }
}