/* ============================================================
   House, product and pricing pages, and the shell of the public pages.

   Reads brand values from brand.css only; declares none of its own.
   Color roles follow answers-from-the-website-side.md, section 1:
     - The house's accent is the neutral opposite its ground
       (navy on white/paper, white on navy), carried by form.
     - A clay product page's accent is clay; on navy, clay-on-ink for text.
     - A product's color appears on another surface only where
       that product is named, including the act that enters it.
     - Accent is never state.
   Type: Source Serif 4 for display headings, Figtree for everything
   else (owner's decisions). No other family is declared, and nothing
   falls back to a system stack. Bodoni Moda is not loaded or used.
   Scale: four marketing steps above the product scale, carried
   from the retired house stylesheet (answer 2.1).
   ============================================================ */

/* ---------- Surface and ground roles ----------------------- */
body {
  /* Marketing scale — answer 2.1 */
  --t-display: clamp(36px, 5.5vw, 76px);
  --t-section: clamp(28px, 3.4vw, 46px);
  --t-lede:    clamp(17px, 1.8vw, 20px);
  --t-body:    17px;
  /* Product-scale sizes kept for labels and small print */
  --t-label:   13px;
  --t-note:    12px;

  --serif: "Source Serif 4";
  --sans:  "Figtree";
}

/* The house: neutral accent, carried by form */
body.surface-house {
  --act: var(--navy);  --act-label: var(--white);  --act-hover: var(--navy);
  --outline: var(--navy);  --rule: var(--navy);  --focus: var(--navy);
}
body.surface-house .on-navy {
  --act: var(--white); --act-label: var(--navy);   --act-hover: var(--white);
  --outline: var(--white); --rule: var(--white); --focus: var(--white);
}

/* Free tools carry the color of the product they feed. No product is named
   on a public page; the color is the only link. */
body.feeds-purple { --feed: var(--purple); --feed-hover: var(--purple);
  --act: var(--purple); --act-label: var(--white); --act-hover: var(--purple); --rule: var(--purple); }
body.feeds-clay { --feed: var(--clay); --feed-hover: var(--clay-deep);
  --act: var(--clay); --act-label: var(--white); --act-hover: var(--clay-deep); --rule: var(--clay); }
.feed-bar { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--feed, var(--navy)); margin-bottom: 18px; }
.btn-feed { background: var(--feed, var(--navy)); color: var(--white); }
.btn-feed:hover { background: var(--feed-hover, var(--navy)); }

/* Product page: clay */
body.surface-lintel {
  --act: var(--clay);  --act-label: var(--white);  --act-hover: var(--clay-deep);
  --outline: var(--clay);  --rule: var(--clay);  --focus: var(--clay);
}
body.surface-lintel .on-navy {
  --outline: var(--white); --rule: var(--clay-on-ink); --focus: var(--clay-on-ink);
}

/* ---------- Base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Links in running text: always underlined — the house cannot
   separate a link from a sentence by color (answer 1.2). */
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Focus: a ring offset from the element by a gap of the ground
   color. Never removed anywhere (answer 6). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--white); color: var(--navy); padding: 10px 16px;
  font-weight: 600; font-size: 15px;
}
.skip-link:focus { top: 12px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px) { .container { padding: 0 16px; } }
.measure { max-width: 660px; }

/* ---------- Grounds ---------------------------------------- */
.section { padding: 112px 0; }
@media (max-width: 700px) { .section { padding: 72px 0; } }
.on-white { background: var(--white); color: var(--navy); }
.on-paper { background: var(--paper); color: var(--navy); }
.on-navy  {
  background: var(--navy);
  /* Expressive ground, permitted on marketing surfaces — definition 3.2 */
  background-image:
    radial-gradient(rgba(200,215,245,0.055) 1px, transparent 1px),
    radial-gradient(ellipse at 15% 50%, rgba(200,215,245,0.03) 0%, transparent 55%);
  background-size: 38px 38px, 100% 100%;
  color: var(--white);
}
.surface-lintel .on-navy.tint-clay {
  background-image:
    radial-gradient(rgba(201,69,15,0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 80% 30%, rgba(201,69,15,0.06) 0%, transparent 55%);
}
.section + .section.on-white { border-top: 1px solid var(--line-on-white); }

/* ---------- Type ------------------------------------------- */
.display, .h-section {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.display   { font-size: var(--t-display); line-height: 1.06; max-width: 900px; }
.h-section { font-size: var(--t-section); line-height: 1.14; max-width: 820px; }
.h-item    { font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.lede      { font-size: var(--t-lede); line-height: 1.62; max-width: 620px; }
.eyebrow {
  display: block;
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.on-white .eyebrow, .on-white .muted { color: var(--muted-on-white); }
.on-paper .eyebrow, .on-paper .muted { color: var(--muted-on-paper); }
.on-navy  .eyebrow, .on-navy  .muted, .on-navy .lede { color: var(--muted-on-navy); }
/* A clay product page's eyebrows carry its identity on white and navy — never on
   paper, where clay text falls to 4.25:1. */
.surface-lintel .on-white .eyebrow { color: var(--clay); }
.surface-lintel .on-navy  .eyebrow { color: var(--clay-on-ink); }
.section-head { margin-bottom: 56px; }
.section-head .lede { margin-top: 20px; }
.note { font-size: var(--t-note); font-style: italic; }

/* ---------- Buttons ---------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border-radius: 3px; border: 2px solid transparent;
  font: 600 15px/1.2 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s;
}
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Primary: the surface's accent, solid */
.btn-primary { background: var(--act); color: var(--act-label); }
.btn-primary:hover { background: var(--act-hover); }
/* Secondary: the accent as a full-strength outline — never grey */
.btn-secondary { background: transparent; color: inherit; border-color: var(--outline); }
/* Product-named acts carry that product's color on any surface */
.btn-lintel { background: var(--clay); color: var(--white); }
.btn-lintel:hover { background: var(--clay-deep); }
.btn-rubric { background: var(--purple); color: var(--white); }

/* ---------- Navigation ------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line-on-white);
  --focus: var(--navy);
}
.surface-lintel .nav { --focus: var(--clay); }
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
@media (max-width: 700px) { .nav-inner { padding: 0 16px; } }
.nav-home {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 700; color: var(--navy);
}
/* The house name is plain text from site-config.js — not a wordmark */
.nav-home-house { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-home-product { font-size: 20px; letter-spacing: -0.01em; }
.nav-byline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-on-white); border-left: 1px solid var(--line-on-white); padding-left: 10px;
  text-decoration: none;
}
.nav-byline:hover { text-decoration: underline; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 15px; font-weight: 500; text-decoration: none; padding: 6px 0; }
.nav-links a:hover { text-decoration: underline; }
/* Selection: weight plus a rule in the accent — answer 1.2 */
.nav-links a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--rule); }
.nav-cta { min-height: 42px; padding: 9px 20px; font-size: 14px; }
.nav-toggle {
  display: none; background: none; border: 2px solid var(--navy); border-radius: 3px;
  font: 600 14px var(--sans); color: var(--navy); padding: 8px 14px; cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line-on-white);
    padding: 16px 16px 24px;
  }
  .nav.open .nav-menu { display: block; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-menu .nav-cta { margin-top: 16px; }
}
@media (min-width: 901px) { .nav-menu { display: flex; align-items: center; gap: 28px; } }

/* Product marks — identity only */
.mark-lintel { width: 16px; height: 16px; border-radius: 2px; background: var(--clay); flex: none; }
.mark-rubric { flex: none; display: block; }

/* ---------- Hero ------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 69px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background-color: var(--ink);
  color: var(--white);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 30% 50%, transparent 40%, rgba(6,9,15,0.55) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 128px; padding-bottom: 104px; }
.hero .display { color: var(--white); margin-bottom: 30px; }
.hero .lede { color: var(--muted-on-navy); }
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero-inner { padding-top: 88px; padding-bottom: 72px; }
}
.hero-product-id { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-on-ink); }

/* ---------- Two products (house) --------------------------- */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; } }
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-on-white); border-radius: 8px;
  padding: 40px; background: var(--white);
}
@media (max-width: 700px) { .product-card { padding: 28px 22px; } }
.product-id { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.product-name { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.product-line { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.3; margin-bottom: 16px; }
.product-card p { color: var(--muted-on-white); }
.product-card .btn-row { margin-top: auto; padding-top: 32px; }
.product-audience { font-size: var(--t-label); font-weight: 600; color: var(--navy); margin-top: 18px; }

/* ---------- Position statement ----------------------------- */
.position { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.45; max-width: 900px; }
.beside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; max-width: 900px; }
@media (max-width: 700px) { .beside-grid { grid-template-columns: 1fr; gap: 32px; } }
.beside-grid h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.beside-grid li { padding: 10px 0; border-top: 1px solid var(--line-on-paper); font-size: 16px; }
.beside-grid li:last-child { border-bottom: 1px solid var(--line-on-paper); }

/* ---------- Three-up principles ---------------------------- */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px; }
@media (max-width: 900px) { .three-up { grid-template-columns: 1fr; gap: 36px; } }
.three-up p { font-size: 16px; }
.on-white .three-up p { color: var(--muted-on-white); }
.on-paper .three-up p { color: var(--muted-on-paper); }
.on-navy  .three-up p { color: var(--muted-on-navy); }
.num { font-size: var(--t-note); font-weight: 800; letter-spacing: 0.1em; margin-bottom: 12px; color: inherit; opacity: .9; }

/* ---------- Product page: the file, first contact to funding ----- */
.file-path { display: grid; grid-template-columns: repeat(8, 1fr); counter-reset: step; position: relative; }
.file-path::before {
  content: ''; position: absolute; top: 11px; left: 6%; right: 6%; height: 2px; background: var(--line-on-white);
}
.file-path li { position: relative; text-align: center; padding: 0 6px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.file-path li::before {
  content: ''; display: block; width: 24px; height: 24px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--white); border: 2px solid var(--navy); position: relative; z-index: 1;
}
.file-path li.end::before { background: var(--navy); }
@media (max-width: 900px) {
  .file-path { grid-template-columns: 1fr; gap: 0; }
  .file-path::before { top: 12px; bottom: 12px; left: 11px; right: auto; width: 2px; height: auto; }
  .file-path li { display: flex; align-items: center; gap: 16px; text-align: left; padding: 10px 0; }
  .file-path li::before { margin: 0; flex: none; }
}

/* Illustrative record */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 48px; } }
.stack > * + * { margin-top: 36px; }
.record-card {
  background: var(--white); border: 1px solid var(--line-on-paper); border-radius: 8px;
  box-shadow: 0 8px 40px rgba(12,14,18,0.07); overflow: hidden; font-size: 14px;
}
.record-head { background: var(--navy); color: var(--white); padding: 14px 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.record-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px 16px; padding: 16px 20px; border-top: 1px solid var(--line-on-white); }
.record-row:first-of-type { border-top: 0; }
.record-what { font-weight: 700; }
.record-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.record-who { grid-column: 1 / -1; color: var(--muted-on-white); font-size: 13px; }
.record-foot { padding: 10px 20px; background: var(--paper); color: var(--muted-on-paper); font-size: 12px; font-style: italic; }
@media (max-width: 480px) { .record-row { grid-template-columns: 1fr; } .record-value { text-align: left; } }

/* Boundaries */
.boundaries { max-width: 820px; }
.boundaries li {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line-on-navy);
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.35;
}
.boundaries li:last-child { border-bottom: 1px solid var(--line-on-navy); }
.boundaries .glyph { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--muted-on-navy); }

/* Tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier { border: 1px solid var(--line-on-paper); background: var(--white); border-radius: 8px; padding: 30px; }
.tier h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 10px 0 12px; }
.tier p { color: var(--muted-on-white); font-size: 16px; }

/* ---------- Contact form ----------------------------------- */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-label); font-weight: 600; }
.field input, .field select, .field textarea {
  font: 16px/1.4 var(--sans); color: var(--navy); background: var(--white);
  border: 1px solid var(--muted-on-white); border-radius: 3px; padding: 11px 13px; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  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 1l5 5 5-5' stroke='%234A5261' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}
/* Field focus changes thickness as well as color — answer 1.2 */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus);
}
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--act); }
.on-paper .consent { color: var(--muted-on-paper); }
.form-note { font-size: 13px; margin-top: 14px; }
.on-paper .form-note { color: var(--muted-on-paper); }
.on-navy .form-note, .on-navy .consent { color: var(--muted-on-navy); }
.on-navy .field input, .on-navy .field select, .on-navy .field textarea { border-color: var(--white); }

/* ---------- Footer ----------------------------------------- */
.footer { background: var(--paper); border-top: 1px solid var(--line-on-paper); padding: 64px 0 34px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h2 { font-size: var(--t-note); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-paper); margin-bottom: 14px; }
.footer li { margin-bottom: 10px; }
.footer-house { font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-top: 22px; border-top: 1px solid var(--line-on-paper);
  font-size: 13px; color: var(--muted-on-paper);
}
.footer .muted { color: var(--muted-on-paper); }

/* ---------- Pricing structure ------------------------------ */
.structure-note { background: var(--paper); border-bottom: 1px solid var(--line-on-paper); padding: 14px 0; font-size: 14px; color: var(--muted-on-paper); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.price-tier { border: 1px solid var(--line-on-white); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--white); }
.price-tier h3 { font-size: 20px; font-weight: 800; }
.price-slot { min-height: 64px; border: 1px dashed var(--muted-on-white); border-radius: 4px; }
.price-tier ul li { font-size: 15px; padding: 6px 0; border-top: 1px solid var(--line-on-white); }
.price-tier p { color: var(--muted-on-white); font-size: 15px; }

/* ---------- Motion ----------------------------------------- */
/* Motion is decoration; nothing is said only by it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Product marks and acts on public pages: color only, no name */
.mark-clay, .mark-purple { display: inline-block; width: 16px; height: 16px; border-radius: 2px; flex: none; }
.mark-clay { background: var(--clay); }
.mark-purple { background: var(--purple); }
.btn-clay { background: var(--clay); color: var(--white); }
.btn-clay:hover { background: var(--clay-deep); }
.btn-purple { background: var(--purple); color: var(--white); }
.beside-grid.three { grid-template-columns: repeat(3, 1fr); max-width: none; }
@media (max-width: 900px) { .beside-grid.three { grid-template-columns: 1fr; } }
.three-up.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
@media (max-width: 900px) { .three-up.two { grid-template-columns: 1fr; } }
.tier-when { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-white); margin: 6px 0 10px; }