/* Self-hosted so no visitor IP is sent to a third party on page load, and so
   the site can keep a strict `default-src 'self'` CSP. Latin subset only.
   Inter ships as one variable file covering every weight we use. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-700.woff2') format('woff2');
}
/* ============================================================
   QuietField, LLC — house site
   Design system: docs/QUIETFIELD_BRAND_SYSTEM.md ("Signal Ear House")
   The house wordmark is the swappable <HOUSE> token; it reads
   "QuietField" here. Mark, palette, type, voice and the naming
   rule are unchanged from the system.
   ============================================================ */

/* ---- Color roles. Each hex has exactly one job (system §4). ---- */
:root {
  --field-navy:   #22314E;  /* ground, authority, frame base */
  --deep-navy:    #101B30;  /* gradient floor only */
  --signal-teal:  #2BA898;  /* the signal: mark, one primary action */
  --ripple:       #5FD4C4;  /* arcs and motion only — never type */
  --deep-amber:   #B8762B;  /* high-confidence tier only */
  --teal-ink:     #1C8F7D;  /* deeper teal — the teal that may carry type, on light */

  /* Light ground. Neutral is biased cool, toward the navy. */
  --ground:       #F5F8F8;
  --surface:      #FFFFFF;
  --ink:          #1B2637;
  --scope:        #6B7686;  /* Scope Grey — 4.54:1 on white */
  --rule:         #DCE4E6;
  --rule-strong:  #C3CFD2;
  --statement:    #FFFFFF;

  --band:         var(--field-navy);
  --band-floor:   var(--deep-navy);
  --band-ink:     #FFFFFF;
  --band-scope:   #A8B2C0;  /* Scope Grey, dark-ground tint — 6.0:1 on navy */
  --band-rule:    rgba(255,255,255,0.16);

  --space:  clamp(64px, 8vw, 112px);
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 63ch;

  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal-ink:    #35C2B0;  /* brighter teal — the teal that may carry type, on dark */
    --ground:      #1A2437;
    --surface:     #22314E;
    --ink:         #FFFFFF;
    --scope:       #A8B2C0;
    --rule:        rgba(255,255,255,0.14);
    --rule-strong: rgba(255,255,255,0.26);
    --band:        #101B30;
    --band-floor:  #0A1222;
    --band-rule:   rgba(255,255,255,0.14);
  }
}
:root[data-theme="dark"] {
  --teal-ink:    #35C2B0;
  --ground:      #1A2437;
  --surface:     #22314E;
  --ink:         #FFFFFF;
  --scope:       #A8B2C0;
  --rule:        rgba(255,255,255,0.14);
  --rule-strong: rgba(255,255,255,0.26);
  --band:        #101B30;
  --band-floor:  #0A1222;
  --band-rule:   rgba(255,255,255,0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--measure); }

h1, h2, h3 { font-family: var(--display); text-wrap: balance; font-weight: 700; letter-spacing: -0.022em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal-teal); outline-offset: 3px; border-radius: 2px; }

/* ---- The house tagline slot. All-caps lives here and nowhere else. ---- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--scope);
}

/* ============================================================
   The mark — Signal Ear, "Variation A / Forward Field"
   (Marketing/brand/quietfield-signal-ear-refined.html, Nadia).
   A solid dog ear at the origin of a widening ripple field:
   three concentric arcs on radii 20 / 32 / 44 (ratio 1 : 1.6 : 2.2,
   carried from QuietCheck's 60/96/132), every one of them struck
   about a SINGLE shared centre — the ear tip at (49.25, 48.35).
   Each arc sweeps -50deg to +50deg THROUGH 0, so the field is
   symmetric about the horizontal and never tips downward.
   Never mirrored, never rotated, never ligatured to the wordmark:
   mark + clear-space of one ear-width + wordmark.
   Below ~48px the outermost ripple drops (#ear-small).
   Masters: Marketing/brand/quietfield-signal-ear.svg + -appicon.svg.
   ============================================================ */
.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.mark { display: block; width: 40px; height: 40px; flex: none; border-radius: 23.4%; }
.wordmark {
  font-family: var(--display);
  font-size: 23px; font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: var(--ink);
}
.wordmark b { font-weight: 700; color: var(--teal-ink); }
/* The entity suffix rides beside the wordmark at a smaller size in Scope Grey,
   so "QuietField" still reads as the coined compound the naming rule is built
   on, and "LLC" reads as what it is. Never ligatured, never the same weight. */
.wordmark .llc {
  font-size: 0.6em; font-weight: 600; letter-spacing: 0.08em;
  color: var(--scope); margin-left: 0.08em; vertical-align: 0.08em;
}
footer .wordmark .llc { color: var(--band-scope); }

/* The parent identity: teal-led tile, white ear, ripples fading outward.
   One slow outward breath, ≥1.2s. It never accelerates. */
.tile { width: clamp(76px, 9vw, 96px); height: auto; display: block; margin-bottom: 32px; color: #FFFFFF; }
@keyframes breathe {
  0%, 100% { opacity: var(--o); }
  50%      { opacity: calc(var(--o) * 0.45); }
}
.tile .wave { fill: none; stroke: currentColor; stroke-linecap: round; animation: breathe 4.4s ease-in-out infinite; }
.tile .ear-shape { fill: currentColor; }
.tile .w-40 { animation-delay: 0.55s; }
.tile .w-55 { animation-delay: 1.1s; }

/* ---- Navigation ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.nav a { font-size: 14.5px; font-weight: 500; color: var(--scope); text-decoration: none; white-space: nowrap; transition: color .18s ease; }
.nav a:hover { color: var(--ink); }
.nav a.proof { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 5px; }
.nav .at-sm { display: none; }
@media (max-width: 720px) {
  .nav a.hide-sm { display: none; }
  .nav .at-lg { display: none; }
  .nav .at-sm { display: inline; }
  .wordmark { font-size: 19px; }
  .topbar .mark { width: 34px; height: 34px; }
}

/* ---- Hero band ---- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--band) 0%, var(--band-floor) 100%);
  color: var(--band-ink);
  padding-block: clamp(72px, 11vw, 128px);
}
.hero-field {
  position: absolute;
  z-index: -1;
  right: -14%;
  top: 50%;
  translate: 0 -50%;
  height: 150%;
  width: auto;
  color: var(--ripple);
  pointer-events: none;
}
@media (max-width: 900px) { .hero-field { right: -52%; opacity: .3; } }
.hero .eyebrow { color: var(--band-scope); }
.hero .tagline { color: #35C2B0; letter-spacing: 0.2em; font-size: 13px; }
/* The company name is the hero's largest element and its h1. The thesis
   sentence sits directly beneath it and keeps display weight — demoted in
   size, not in voice. */
.hero .hero-name {
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-block: 26px 16px;
  color: var(--statement);
}
.hero .hero-name b { font-weight: 700; color: #35C2B0; }
.hero .hero-name .llc {
  font-size: 0.36em; font-weight: 600; letter-spacing: 0.1em;
  color: var(--band-scope); margin-left: 0.14em; vertical-align: 0.42em;
}
.hero .headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.1vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin-block: 22px 22px;
  max-width: 22ch;
  color: var(--statement);
}
.hero .promise { font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.5; max-width: 46ch; color: var(--band-ink); }
.hero .limit {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--band-rule);
  max-width: 52ch;
  color: var(--band-scope);
  font-size: 17px; /* limit copy is never smaller than body */
}
.hero .limit strong { color: var(--statement); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }

/* One primary action per screen. Teal ground, Deep Navy type — 5.9:1. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--signal-teal); color: var(--deep-navy);
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  padding: 13px 24px; border-radius: 4px;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover { background: var(--ripple); transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.link-plain { font-size: 15.5px; font-weight: 500; color: var(--band-scope); text-decoration: none; border-bottom: 1px solid var(--band-rule); padding-bottom: 3px; }
.link-plain:hover { color: var(--statement); }

/* ---- Sections ---- */
section { padding-block: var(--space); scroll-margin-top: 68px; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 52px; max-width: var(--measure); }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.16; }
.section-head p { color: var(--scope); }

/* ---- Method: posture claims only. No capability verbs here. ---- */
.method { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 620px)  { .method { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .method { grid-template-columns: repeat(4, 1fr); } }
.method > div { background: var(--ground); padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.method h3 { font-size: 1.06rem; }
.method p { color: var(--scope); font-size: 16px; }

/* ---- Product icon + store link ---- */
.product-icon { width: 44px; height: 44px; border-radius: 22.5%; flex: none; box-shadow: 0 0 0 1px var(--rule-strong); }
.card-name { align-items: center; }
.card-name h3 { margin-right: auto; }
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.btn-store { padding: 11px 20px; font-size: 15px; }
.store-meta { font-size: 15px; color: var(--scope); }

/* ---- What we build on: the native sensor suite, as raw material ---- */
.builds-on { margin-top: clamp(56px, 7vw, 88px); }
.builds-on .section-head { margin-bottom: 34px; }
.builds-on-list { display: grid; border-top: 1px solid var(--rule); }
.builds-on-item { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .builds-on-item { grid-template-columns: 15.5rem 1fr; gap: 40px; align-items: baseline; } }
.builds-on-item h3 { font-size: 1.02rem; }
.builds-on-item p { color: var(--scope); font-size: 17px; }

/* ---- The namesake: what the name and the mark actually say.
   House level, so it claims method and posture only — no capability
   verbs, and none of the internal "sentinel / guardian" framing from
   the concept deck, which the system bans in public copy (§3). ---- */
.namesake-body { display: grid; gap: clamp(30px, 5vw, 56px); align-items: start; }
@media (min-width: 880px) { .namesake-body { grid-template-columns: 16rem 1fr; } }
.namesake-figure { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.tile-lg { display: block; width: clamp(96px, 12vw, 128px); height: auto; }
.namesake-figure figcaption { color: var(--scope); font-size: 15.5px; line-height: 1.55; max-width: 34ch; }
.namesake-figure figcaption b { font-weight: 700; color: var(--teal-ink); }
.namesake-list { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.namesake-list > div { padding: 22px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
@media (min-width: 620px) { .namesake-list > div { grid-template-columns: 9rem 1fr; gap: 40px; align-items: baseline; } }
.namesake-list dt { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.022em; }
.namesake-list dd { margin: 0; color: var(--scope); font-size: 17px; }
.namesake-list dd a { color: var(--teal-ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; }
.namesake-list dd a:hover { border-bottom-color: var(--teal-ink); }

/* ---- Products. Every card is claim, then hairline, then limit. ---- */
.products { display: grid; gap: 22px; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(26px, 3.4vw, 38px);
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .card { grid-template-columns: 1fr 1fr; gap: 40px; } }
.card-head { display: flex; flex-direction: column; gap: 14px; }
.card-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.card-name h3 { font-size: 1.45rem; letter-spacing: -0.022em; }
.card-name h3 b { font-weight: 700; color: var(--teal-ink); }
.chip {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--rule-strong); color: var(--scope);
}
.chip.shipping { color: var(--deep-navy); background: var(--signal-teal); border-color: var(--signal-teal); }
.chip.building { color: var(--ink); border-color: var(--rule-strong); }
.card-scope { font-size: 1.06rem; line-height: 1.5; }
.card-body { display: flex; flex-direction: column; gap: 18px; }
.card-body p { color: var(--ink); }
.card-limit {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--scope);
  font-size: 17px; /* the limit clause never shrinks */
}
.card-limit .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px; }

/* The features card — names the rule it demonstrates. */
.inside { border-style: dashed; }
.inside ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.inside li::marker { color: var(--teal-ink); }

/* ---- Cannot-detect band: the proof asset, at full weight ---- */
.cannot {
  background: linear-gradient(170deg, var(--band) 0%, var(--band-floor) 100%);
  color: var(--band-ink);
}
.cannot .section-head h2 { color: var(--statement); }
.cannot .section-head p, .cannot .eyebrow { color: var(--band-scope); }
.cannot-list { display: grid; gap: 1px; background: var(--band-rule); border-block: 1px solid var(--band-rule); }
.cannot-item { background: var(--band); padding: 26px 0; display: grid; gap: 8px; }
@media (min-width: 760px) { .cannot-item { grid-template-columns: 15.5rem 1fr; gap: 40px; align-items: baseline; padding-inline: 4px; } }
.cannot-item h3 { font-size: 1.02rem; color: var(--statement); font-weight: 600; }
.cannot-item p { color: var(--band-scope); font-size: 17px; }
.cannot-close { margin-top: 44px; display: flex; flex-direction: column; gap: 18px; max-width: 58ch; }
.cannot-close .headline { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 600; color: var(--statement); line-height: 1.28; }
.cannot-close p { color: var(--band-scope); }

/* ---- The Real Bosses. Copy is verbatim from the app's hidden credits
   (QuietCheck/Features/Support/MoraleCreditsView.swift), which is the
   source of truth for names, titles and bios. Cards share a fixed basis
   so both divisions read as one roster rather than two layouts. ---- */
.divisions { display: flex; flex-direction: column; gap: clamp(34px, 4.5vw, 52px); }
.division-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--scope); padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 28px;
}
.division-name .remote { letter-spacing: 0.08em; text-transform: none; }
.team-grid { display: flex; flex-wrap: wrap; gap: 34px 28px; }
.team-card { flex: 0 1 186px; display: flex; flex-direction: column; gap: 4px; }
.team-card img {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  display: block; margin-bottom: 14px;
  background: var(--surface-2, var(--surface));
  box-shadow: 0 0 0 1px var(--rule-strong);
}
.team-card h3 { font-size: 1.06rem; }
.team-card .role {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal-ink); margin-top: 2px;
}
.team-card .bio { font-size: 15px; line-height: 1.5; color: var(--scope); margin-top: 6px; }
.team-note {
  margin-top: clamp(38px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--rule);
  color: var(--scope); font-size: 16px; max-width: 62ch;
}

/* ---- Founder ---- */
.founder { display: grid; gap: clamp(32px, 5vw, 60px); }
@media (min-width: 880px) { .founder { grid-template-columns: 20rem 1fr; } }
.founder-aside { display: flex; flex-direction: column; gap: 22px; }
.portrait {
  aspect-ratio: 1; width: 100%; max-width: 240px; border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: linear-gradient(160deg, var(--field-navy), var(--deep-navy));
  display: grid; place-items: center;
}
.portrait .mark { width: 132px; height: 132px; border-radius: 0; color: #FFFFFF; }
.founder-name h3 { font-size: 1.45rem; }
.founder-name p { color: var(--scope); margin-top: 6px; }
.focus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.focus li { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--scope); }
.founder-body { display: flex; flex-direction: column; gap: 20px; max-width: var(--measure); }
.founder-body p { color: var(--ink); }
.pullquote {
  margin-top: 8px; padding: 24px 0 24px 26px;
  border-left: 2px solid var(--signal-teal);
  font-size: 1.16rem; line-height: 1.5; font-weight: 500;
}
.pullquote cite { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 500; font-style: normal; color: var(--scope); }

/* ---- Footer ---- */
footer { background: var(--band-floor); color: var(--band-ink); padding-block: 56px 44px; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid var(--band-rule); }
footer .wordmark { color: var(--statement); }
footer .wordmark b { color: #35C2B0; }
.foot-contact { display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; }
.foot-contact a { color: var(--band-ink); text-decoration-color: var(--band-rule); text-underline-offset: 4px; }
.foot-label { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--band-scope); }
.foot-bottom { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; }
.foot-bottom p { font-size: 14.5px; color: var(--band-scope); }