/* ============================================================
   PharmTech.AI — homepage styles  (v2 "intelligence product")
   Type system:  Newsreader (editorial serif) · Inter (UI/body) ·
                 IBM Plex Mono (data/eyebrows)
   Palette:      deep navy + warm gold accent + signal colors
   No build step, no framework.
   ============================================================ */

:root {
  --navy:        #0f1115;
  --navy-2:      #171b21;
  --navy-3:      #2b3340;
  --navy-line:   rgba(255,255,255,.10);
  --ink:         #14171c;
  --slate:       #46566c;
  --slate-2:     #6c7c93;
  --line:        #e4e9f1;
  --bg:          #ffffff;
  --bg-alt:      #f6f8fc;
  --paper:       #fbfcfe;
  --gold:        #0071e3;
  --gold-2:      #0066cc;
  --gold-soft:   #d6e9ff;
  --sig-red:     #c4452f;
  --sig-amber:   #c98415;
  --sig-green:   #2f7d52;
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --maxw: 1140px;
  --shadow:    0 1px 2px rgba(15,17,21,.05), 0 10px 34px rgba(15,17,21,.08);
  --shadow-lg: 0 24px 70px rgba(15,17,21,.16);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18.5px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

h1,h2,h3 { font-family: var(--sans); color: var(--ink); line-height: 1.1; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.022em; }
h1 { font-size: clamp(2rem, 4.8vw, 3.15rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.section { padding: 92px 0; }
.section--alt  { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #c5cad2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* eyebrow — mono, the "intelligence" tell */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--gold-2);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); display: inline-block; }
.section--navy .eyebrow, .hero .eyebrow { color: var(--gold); }

.lead { font-size: 1.18rem; color: var(--slate); max-width: 64ch; }
.section--navy .lead { color: #aebbd4; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1;
  padding: 16px 28px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .12s var(--ease), background .16s, box-shadow .16s, border-color .16s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--gold); color: #ffffff; border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 12px 28px rgba(0,113,227,.34); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); }
.hero .btn--ghost, .section--navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn--ghost:hover, .section--navy .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn--block { width: 100%; justify-content: center; }
/* link-styled button — an <a>-looking control for real actions (e.g. account "Start fresh") */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.linklike:hover { text-decoration: none; }
/* inline-SVG icons (replaces the Tabler webfont) — sized by font-size like the old icon font */
.ti { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ti { font-size: 1.05rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(15,17,21,.07); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--navy); font-size: 1.2rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--navy); display: grid; place-items: center; overflow: hidden; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand .dot { color: var(--gold-2); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--slate); font-weight: 500; font-size: .92rem; }
.nav-links a:hover { color: var(--navy); text-decoration: none; }
.nav-cta { padding: 11px 20px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink); font-size: 1.7rem; line-height: 1; padding: 4px; }
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0 14px; box-shadow: 0 14px 28px rgba(0,0,0,.07); display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 26px; font-size: 1rem; }
  .nav-links a.nav-cta { margin: 10px 26px 2px; justify-content: center; padding: 13px 20px; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(1200px 560px at 88% -8%, rgba(0,113,227,.14), transparent 58%),
    radial-gradient(900px 600px at 6% 110%, rgba(22,51,107,.55), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #07080a 100%);
  color: #e9eefb; padding: 92px 0 84px; }
.hero::after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; opacity:.5; pointer-events:none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }
.hero h1 { color: #fff; max-width: 16ch; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: #0071e3; }
.hero p.lead { color: #b9c6e2; font-size: 1.2rem; max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 10px; }
.hero-note { font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: #8595b8; margin-top: 16px; }

.stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--navy-line); }
.stat .num { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.stat .num em { color: var(--gold); font-style: normal; }
.stat .lab { font-family: var(--mono); font-size: .68rem; color: #8595b8; text-transform: uppercase; letter-spacing: .09em; margin-top: 2px; }

/* hero intelligence panel (data viz) */
.intel { background: rgba(255,255,255,.045); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 22px; backdrop-filter: blur(4px); box-shadow: var(--shadow-lg); }
.intel__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.intel__title { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #aebbd4; }
.intel__big { font-family: var(--serif); color:#fff; font-size: 2.5rem; font-weight: 600; line-height: 1; margin: 8px 0 2px; }
.intel__big em { color: var(--gold); font-style: normal; font-size: 1.1rem; vertical-align: middle; margin-left: 6px; }
.intel__cap { font-size: .82rem; color: #9fb0cf; margin-bottom: 16px; }
.intel__cap a { color:#c6d2e8; text-decoration: underline; }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 118px; padding-top: 6px; }
.bar { flex: 1; background: #2b3340; position: relative; border-radius: 5px 5px 0 0; height: 0; transition: height 1s var(--ease); }
.bar.peak { background: var(--gold); }
.bar span { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: .62rem; color: #9fb0cf; }
.bar small { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: .62rem; color: #7888ab; }
.bar.peak span { color: var(--gold); }
.intel__foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--navy-line); display: flex; gap: 10px; align-items: flex-start; }
.intel__foot .ti { color: var(--gold); font-size: 1.1rem; margin-top: 2px; }
.intel__foot p { margin: 0; font-size: .82rem; color: #b9c6e2; }
.intel__foot b { color: #fff; font-weight: 600; }

/* ---------- trust strip ---------- */
.trustbar { background: #07080a; border-top: 1px solid var(--navy-line); }
.trustbar .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; padding: 20px 26px; }
.trustbar span { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; color: #aebbd4; }
.trustbar .ti { color: var(--gold); font-size: 1.05rem; }

/* ---------- grids / cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 920px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr;} }

.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--slate); margin: 0; font-size: 1rem; }
.card .ico { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--navy); color: var(--gold); font-size: 1.35rem; margin-bottom: 16px; }
.card--plain { box-shadow: none; }
.card--plain:hover { transform: none; box-shadow: none; border-color: var(--navy-3); }

.split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 58px; align-items: center; }
@media (max-width: 920px){ .split{ grid-template-columns: 1fr; gap: 38px;} }

/* checklist */
.check { list-style: none; padding: 0; margin: 22px 0 0; }
.check li { position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--line); color: var(--slate); }
.check li:last-child { border-bottom: 0; }
.check li::before { content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: rgba(47,125,82,.12) center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E"); }
.check strong { color: var(--ink); font-weight: 600; }

/* ---------- sample brief mock ---------- */
.brief-mock { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.brief-mock__bar { background: var(--navy); color: #fff; padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; }
.brief-mock__bar b { font-family: var(--serif); font-size: 1rem; font-weight: 560; }
.brief-mock__bar span { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(0,113,227,.4); padding: 3px 9px; border-radius: 999px; }
.brief-mock__body { padding: 24px 22px; }
.intro-line { font-size: .92rem; color: var(--slate); margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--gold); }
.intro-line b { color: var(--navy); }
.tag { display: inline-block; font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.tag--crit { color: var(--sig-red); border-color: rgba(196,69,47,.4); background: rgba(196,69,47,.06); }
.tag--high { color: var(--sig-amber); border-color: rgba(201,132,21,.4); background: rgba(201,132,21,.07); }
.brief-row { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.brief-row:last-child { border-bottom: 0; padding-bottom: 0; }
.brief-row h4 { font-family: var(--serif); margin: 9px 0 4px; color: var(--navy); font-size: 1.08rem; font-weight: 600; }
.brief-row p { font-size: .92rem; color: var(--slate); margin: 0; }
.brief-watermark { font-family: var(--mono); font-size: .66rem; color: var(--slate-2); text-align: center; padding-top: 14px; letter-spacing: .02em; }

/* ---------- self-assessment ---------- */
.assess { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.assess__q { padding: 8px 30px; }
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.qrow:last-of-type { border-bottom: 0; }
.qtext { color: var(--ink); font-size: 1rem; max-width: 58ch; }
.qtext small { display: block; font-family: var(--mono); color: var(--slate-2); font-size: .72rem; letter-spacing: .04em; margin-top: 4px; }
.opts { display: flex; gap: 8px; flex-shrink: 0; }
.opt { border: 1.5px solid var(--line); background: #fff; color: var(--slate); padding: 9px 15px; border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .14s var(--ease); white-space: nowrap; }
.opt:hover { border-color: var(--navy-3); color: var(--navy); }
.opt.is-sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.assess__foot { padding: 22px 30px 30px; border-top: 1px solid var(--line); background: var(--bg-alt); }
.result { display: none; }
.result.is-on { display: block; animation: fade .4s var(--ease); }
@keyframes fade { from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }
.result__band { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; }
.result__band.low { color: var(--sig-green); } .result__band.mod { color: var(--sig-amber); } .result__band.high { color: var(--sig-red); }
.meter { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 14px 0; }
.meter > span { display: block; height: 100%; width: 0; transition: width .7s var(--ease); }
.assess__hint { font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--slate-2); margin-top: 16px; }

/* ---------- steps / timeline ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 820px){ .steps{ grid-template-columns: 1fr 1fr;} }
@media (max-width: 480px){ .steps{ grid-template-columns: 1fr;} }
.step { position: relative; padding-top: 6px; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-size: .72rem; font-weight: 600; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--navy-line); color: var(--gold); margin-bottom: 16px; }
.step h3 { font-size: 1.2rem; }
.step p { color: #aebbd4; font-size: .96rem; margin: 0; }

/* ---------- "who we are" experience band (company voice) ---------- */
.founder { max-width: 940px; }
.founder__lead { font-size: 1.12rem; color: var(--navy); line-height: 1.62; margin: 0 0 18px; max-width: 58ch; }
.founder__lead strong { font-weight: 700; }

.beliefs__title { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 34px 0 18px; }
.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0 0 32px; }
.belief { padding-top: 16px; border-top: 2px solid var(--gold); }
.belief__num { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--gold); }
.belief__label { font-size: 1.14rem; font-weight: 700; color: var(--navy); margin: 8px 0 10px; line-height: 1.2; }
.belief__desc { font-size: .94rem; color: var(--slate); line-height: 1.55; margin: 0; }

.founder__method { font-size: 1.08rem; color: var(--navy); line-height: 1.6; margin: 0 0 26px; padding: 18px 22px; background: var(--bg-alt); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; max-width: 58ch; }
.founder__method strong { font-weight: 700; }

@media (max-width: 720px) { .beliefs { grid-template-columns: 1fr; gap: 22px; } }
.placeholder-note { margin-top: 20px; font-family: var(--mono); font-size: .74rem; color: var(--slate-2); border-left: 3px solid var(--gold); padding: 6px 0 6px 14px; background: rgba(0,113,227,.05); line-height: 1.55; }

/* ---------- faq ---------- */
.faq details { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; background: #fff; overflow: hidden; transition: border-color .15s; }
.faq details[open] { border-color: var(--navy-3); }
.faq summary { cursor: pointer; padding: 20px 24px; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 24px 22px; color: var(--slate); font-size: 1rem; }
.faq .ans p:last-child { margin: 0; }

/* ---------- subscribe ---------- */
.subscribe-card { position: relative; overflow: hidden; background: radial-gradient(900px 400px at 80% -20%, rgba(0,113,227,.16), transparent 60%), linear-gradient(180deg, var(--navy) 0%, #07080a 100%); border-radius: var(--r-lg); padding: 56px 44px; color: #e9eefb; text-align: center; box-shadow: var(--shadow-lg); }
.subscribe-card h2 { color: #fff; }
.subscribe-card .lead { color: #b9c6e2; margin: 0 auto 28px; }
.subform { display: flex; flex-wrap: wrap; gap: 10px; max-width: 500px; margin: 0 auto; position: relative; z-index: 1; }
.subform input[type=email] { flex: 1; padding: 16px 18px; border-radius: var(--r-sm); border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; font-family: var(--sans); }
.subform input::placeholder { color: #8595b8; }
.subform input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
/* nowrap belongs ONLY in the column context. In the row layout above 560px,
   .subintent (width:100%) needs to wrap onto its own line; forcing nowrap there
   drags it into the row and shreds the desktop card. In the column layout the
   wrapped flex line takes its cross-size from Turnstile's fixed 300px and
   stretches the email field and button to match, overflowing the card. */
@media (max-width: 560px){ .subform{ flex-direction: column; flex-wrap: nowrap; } }
.subintent { display: flex; flex-direction: column; gap: 9px; max-width: 500px; margin: 16px auto 0; text-align: left; }
.subintent label { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: #c4d0e4; cursor: pointer; }
.subintent input { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; }
.subnote { font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; color: #8595b8; margin-top: 18px; }
.subnote a { color: #c6d2e8; text-decoration: underline; }
.form-msg { margin-top: 16px; font-size: .94rem; font-weight: 500; min-height: 1.2em; }
.form-msg.ok { color: #84e6ad; } .form-msg.err { color: #ffb0a0; }

/* ---------- footer ---------- */
.site-footer { background: #07080a; color: #93a3c2; padding: 60px 0 34px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; margin-bottom: 34px; }
@media (max-width: 740px){ .footer-grid{ grid-template-columns: 1fr;} }
.site-footer a { color: #b9c6e2; }
.site-footer h4 { font-family: var(--sans); color: #fff; font-size: .82rem; letter-spacing: 0; margin: 0 0 14px; font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.disclaimer { border-top: 1px solid var(--navy-line); padding-top: 24px; font-size: .82rem; color: #7888ab; line-height: 1.65; }
.disclaimer strong { color: #aebbd4; }

/* ---------- signature: enforcement trendline ---------- */
.signature { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); background: rgba(0,113,227,.08); border: 1px solid rgba(0,113,227,.28); padding: 5px 11px; border-radius: 999px; margin-bottom: 18px; }
.trend-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.trend-card__bar { background: var(--navy); color: #fff; padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; }
.trend-card__bar b { font-family: var(--serif); font-size: 1rem; font-weight: 560; }
.trend-card__bar span { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.trend-card__body { padding: 8px 22px 18px; }
.trow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow__name { font-weight: 600; color: var(--navy); font-size: .96rem; }
.trow__name small { display: block; font-family: var(--mono); color: var(--slate-2); font-size: .68rem; letter-spacing: .03em; margin-top: 3px; font-weight: 400; }
.dir { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dir--up { color: var(--sig-red); border-color: rgba(196,69,47,.4); background: rgba(196,69,47,.06); }
.dir--steady { color: var(--sig-amber); border-color: rgba(201,132,21,.4); background: rgba(201,132,21,.07); }
.dir--cool { color: var(--sig-green); border-color: rgba(47,125,82,.4); background: rgba(47,125,82,.06); }
.trend-card__foot { font-family: var(--mono); font-size: .64rem; color: var(--slate-2); text-align: center; padding: 12px 0 4px; letter-spacing: .02em; }

/* ---------- platform tool-lines ---------- */
.statusbadge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.statusbadge--live { color: var(--gold-2); background: rgba(0,113,227,.09); border-color: rgba(0,113,227,.32); }
.statusbadge--dev { color: var(--slate-2); background: var(--bg-alt); border-color: var(--line); }
.toolline { display: flex; flex-direction: column; }
.toolline .lhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.toolset { list-style: none; padding: 0; margin: 16px 0 0; }
.toolset li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.toolset li .name { color: var(--ink); font-weight: 500; }
.px { font-family: var(--mono); font-size: .56rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.px--free { color: var(--sig-green); border-color: rgba(47,125,82,.4); background: rgba(47,125,82,.06); }
.px--paid { color: var(--navy-3); border-color: rgba(22,51,107,.35); background: rgba(22,51,107,.06); }
.px--soon { color: var(--slate-2); border-color: var(--line); background: var(--bg-alt); }

/* ---------- CSA callout + product ---------- */
.csa-callout { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(47,125,82,.3); background: rgba(47,125,82,.05); border-radius: var(--r); }
.csa-callout > .ti { color: var(--sig-green); font-size: 1.25rem; margin-top: 1px; flex-shrink: 0; }
.csa-callout p { margin: 0; font-size: .82rem; color: var(--slate); line-height: 1.5; }
.csa-callout b { color: var(--ink); font-weight: 600; }
.roadmap { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: center; padding: 18px 24px; border: 1px dashed var(--line); border-radius: var(--r); background: #fff; }
.roadmap .rl { font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-2); }
.roadmap .ri { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--slate); }

/* ---------- supply-risk tag ---------- */
.supplytag { align-self: flex-start; margin-top: auto; padding: 5px 11px; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .05em; color: var(--gold-2); background: rgba(0,113,227,.08); border: 1px solid rgba(0,113,227,.3); border-radius: 999px; }
.toolline p { margin-bottom: 14px; }

/* ---------- feedback loop ---------- */
.loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.loop .node { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--gold); background: rgba(0,113,227,.07); color: var(--gold-2); }
.loop .arrow { color: var(--gold-2); font-weight: 700; }

/* ---------- marquee: signature story ---------- */
.marquee { display: grid; grid-template-columns: 1.08fr .92fr; gap: 50px; align-items: center; }
@media (max-width: 920px){ .marquee{ grid-template-columns: 1fr; gap: 32px; } }
.marquee__story { font-family: var(--serif); font-size: 1.32rem; line-height: 1.5; color: #fff; font-weight: 500; }
.marquee__story em { color: var(--gold-soft); font-style: italic; }
.drill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.drill { font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--navy-line); color: #93a3c2; display: inline-flex; align-items: center; gap: 6px; }
.drill.off { color: var(--gold); border-color: rgba(0,113,227,.45); background: rgba(0,113,227,.09); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .bar { transition: none; } }

/* ============================================================
   APPLE-STYLE LIGHT THEME (override) — light, airy, near-black text,
   one restrained blue accent (#0071e3), pill buttons. Overrides the
   dark sections above (later cascade wins).
   ============================================================ */
:root {
  --navy: #1d1d1f;           /* now: ink for text/brand/logo chip */
  --navy-line: rgba(0,0,0,.10);
  --ink: #1d1d1f;
  --slate: #515257;          /* content gray — ~7:1 on white & #f5f5f7 (AA/AAA) */
  --slate-2: #5b6573;        /* secondary/meta gray — ~5.9:1 (AA) */
  --line: #d2d2d7;
  --bg-alt: #f5f5f7;
  --link: #0a5bd0;          /* body-link blue — ~5:1 on white (AA); --gold-2 #0066cc failed */
}
body { color: var(--ink); }

/* buttons → Apple pill */
.btn { border-radius: 980px; padding: 14px 26px; font-weight: 600; }
.btn:hover { transform: none; }
.btn--primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-2); border-color: var(--gold-2); box-shadow: none; }
.btn--ghost, .hero .btn--ghost, .section--navy .btn--ghost { color: var(--gold-2); border-color: var(--line); background: transparent; }
.btn--ghost:hover, .hero .btn--ghost:hover, .section--navy .btn--ghost:hover { border-color: var(--gold-2); background: transparent; }
.nav-links a.nav-cta { color: #fff; }
.nav-links a.nav-cta:hover { color: #fff; }

/* hero → white & airy */
.hero { background: #fff; color: var(--ink); }
.hero::after { display: none; }
.hero h1 { color: var(--ink); }
.hero h1 em { color: var(--gold); }
.hero p.lead { color: var(--slate); }
.hero-note { color: var(--slate-2); font-family: var(--sans); letter-spacing: 0; font-size: .92rem; }
.hero .eyebrow, .section--navy .eyebrow { color: var(--gold-2); }

/* trust strip → light */
.trustbar { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trustbar span { color: var(--slate); }

/* supply panel → light card */
.intel { background: var(--bg-alt); border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; }
.intel__title { color: var(--slate-2); }
.intel__big { color: var(--ink); }
.intel__cap { color: var(--slate); }
.intel__cap a { color: var(--link); }
.intel__foot { border-top: 1px solid var(--line); }
.intel__foot p { color: var(--slate); }
.intel__foot b { color: var(--ink); }

/* "navy" sections (pilot) → light */
.section--navy { background: var(--bg-alt); color: var(--slate); }
.section--navy h2, .section--navy h3 { color: var(--ink); }
.section--navy .lead { color: var(--slate); }
.step::before { background: #fff; border: 1px solid var(--line); color: var(--gold-2); }
.step p { color: var(--slate); }

/* subscribe → light card */
.subscribe-card { background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink); }
.subscribe-card h2 { color: var(--ink); }
.subscribe-card .lead { color: var(--slate); }
.subscribe-card .eyebrow { color: var(--gold-2); }
.subform input[type=email] { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.subform input::placeholder { color: var(--slate-2); }

/* work-with-us intake: style ALL controls like the email field (text inputs,
   select, textarea otherwise render as bare browser defaults) */
.workform input[type=text], .workform select, .workform textarea {
  padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1rem; font-family: var(--sans);
  width: 100%;
}
.workform textarea { resize: vertical; }
.workform textarea::placeholder { color: var(--slate-2); font-family: var(--sans); }
.workform input[type=text]:focus, .workform select:focus, .workform textarea:focus {
  outline: none; border-color: var(--gold);
}
.subintent label { color: var(--slate); }
.subnote { color: var(--slate-2); font-family: var(--sans); letter-spacing: 0; }
.subnote a { color: var(--link); }

/* footer → light */
.site-footer { background: var(--bg-alt); color: var(--slate); border-top: 1px solid var(--line); }
.site-footer a { color: var(--slate); }
.site-footer a:hover { color: var(--gold-2); }
.site-footer h4 { color: var(--ink); }
.disclaimer { border-top: 1px solid var(--line); color: var(--slate-2); }
.disclaimer strong { color: var(--slate); }

/* ---------- phone type & spacing scale ---------- */
@media (max-width: 600px) {
  html { font-size: 16px; }
  .section { padding: 58px 0; }
  .hero { padding: 52px 0 44px; }
  .wrap { padding: 0 20px; }
  h1 { font-size: clamp(1.85rem, 7.5vw, 2.35rem); }
  .lead, .hero p.lead { font-size: 1.12rem; }
  .intel__big { font-size: 1.75rem !important; }
  .btn { padding: 13px 22px; }
}

/* ============================================================
   SHIP-BLOCKER FIXES (design-panel review) — accent scarcity,
   AA contrast, caption legibility, keyboard focus. Latest cascade.
   ============================================================ */

/* Hero product subhead — makes "what it is" land in a 3-second scan */
.hero-sub { font-size: 1.32rem; line-height: 1.4; font-weight: 600; color: var(--ink);
  letter-spacing: -.012em; max-width: 30ch; margin: 0 0 .85rem; }

/* Accent scarcity: blue is reserved for CTAs + true links.
   Demote decorative "dashboard" chrome to quiet gray. */
.supplytag { color: var(--slate); background: var(--bg-alt); border-color: var(--line);
  font-size: .8rem; font-weight: 600; }
.loop .node { color: var(--slate); border-color: var(--line); background: var(--bg-alt); }

/* Caption legibility floor (was ~11–12px) */
.intel__title { font-size: .8rem; }
.subnote { font-size: .8rem; }

/* Visible keyboard focus everywhere (was only on the email input) */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

/* Respect reduced-motion for in-page smooth scroll */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 600px) { .hero-sub { font-size: 1.12rem; } }

/* Mobile tap-target sizing — comfortable touch targets (WCAG 2.5.5 / Apple HIG ~44px).
   Inline links inside sentences are intentionally left as-is (WCAG inline exception). */
@media (max-width: 600px) {
  .site-footer li a { display: inline-block; padding: 8px 0; }
  .card > a { display: inline-block; padding: 9px 0; }
}

/* ===== Self-check (ephemeral — nothing saved or sent) ===== */
#riskForm .qrow { display: block; border-top: 1px solid var(--line); padding: 18px 2px; }
#riskForm .qrow:first-child { border-top: none; }
.qrow__q { font-weight: 600; color: var(--ink); margin: 0 0 10px; font-size: 1.04rem; line-height: 1.4; }
.qrow__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { font-family: inherit; font-size: .92rem; font-weight: 600; padding: 8px 16px; border-radius: 980px; border: 1px solid var(--line); background: #fff; color: var(--slate); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.opt:hover { border-color: var(--ink); }
.opt.is-sel { background: var(--ink); color: #fff; border-color: var(--ink); }
#riskResult { display: none; margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 26px 28px; }
#riskResult.is-on { display: block; }
.result__band { font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; margin-bottom: 12px; }
.result__band.low { color: #2f7d52; } .result__band.mod { color: #b9740f; } .result__band.high { color: #c4452f; }
.result__meter { height: 8px; border-radius: 980px; background: var(--bg-alt); overflow: hidden; margin-bottom: 16px; }
.result__meter span { display: block; height: 100%; width: 0; border-radius: 980px; transition: width .8s ease; }
.result__text { color: var(--slate); margin: 0; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .result__meter span { transition: none; } }

/* ===== Round-2: intent now inside the form, mobile self-check, skip link ===== */
.subform .subintent { width: 100%; max-width: none; margin: 0 0 14px; }
@media (max-width: 560px) { .qrow__opts { flex-direction: column; } .opt { width: 100%; text-align: center; padding-top: 12px; padding-bottom: 12px; } }
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 9999; background: #1d1d1f; color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
/* self-check: collapsible on mobile (open on desktop via JS) */
.selfcheck-q > summary { cursor: pointer; display: inline-block; font-weight: 600; color: var(--link); padding: 10px 18px; border: 1px solid var(--line); border-radius: 980px; list-style: none; margin-top: 10px; }
.selfcheck-q > summary::-webkit-details-marker { display: none; }
.selfcheck-q[open] > summary { display: none; }

/* ---------- hero proof card (the brief quoting itself) ---------- */
.proof { background: #fff; border: 1px solid #e5e9f0; border-left: 4px solid var(--gold-2); border-radius: 12px; box-shadow: 0 1px 2px rgba(10,31,68,.06), 0 16px 40px rgba(10,31,68,.09); padding: 28px 28px 22px; max-width: 460px; width: 100%; justify-self: center; }
.proof__head { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: 18px; }
.proof__head .brand-mark { width: 22px; height: 22px; border-radius: 6px; }
.proof__dots { display: grid; grid-template-columns: repeat(16, 8px); gap: 6px; margin-bottom: 10px; }
.proof__dots span { width: 8px; height: 8px; border-radius: 50%; background: #cfd8e3; }
.proof__dots span.hit { background: var(--gold-2); }
.proof__cap { font-family: var(--mono); font-size: .8rem; color: #475569; margin: 0 0 18px; }
.proof__cap b { color: var(--gold-2); font-weight: 600; }
.proof__quote { margin: 0 0 18px; padding-left: 16px; border-left: 3px solid var(--gold-2); font-size: 1rem; line-height: 1.5; font-weight: 500; color: #0a2540; }
.proof__skel { position: relative; margin-bottom: 14px; }
.proof__skel span { display: block; height: 10px; border-radius: 6px; background: #eef2f7; margin-bottom: 10px; width: 82%; }
.proof__skel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.proof__link { font-size: .92rem; font-weight: 600; color: var(--link); }
@media (max-width: 940px) { .proof { margin: 0 auto; } }

/* hero A-grade fixes: fold, accent binding, slim eyebrow, real mono, bigger dots */
.hero { padding: 44px 0 60px; }
.hero h1 { margin-bottom: 18px; }
.hero h1 { text-wrap: balance; }
.eyebrow--slim { font-size: .72rem; font-weight: 600; color: var(--slate); letter-spacing: .05em; text-transform: uppercase; }
.proof__head, .proof__cap { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.proof__dots { grid-template-columns: repeat(16, 10px); gap: 8px; }
.proof__dots span { width: 10px; height: 10px; }
.proof__by { font-size: .8rem; color: #64748b; margin: 0 0 10px; }
.subhint { display: block; font-size: .78rem; font-weight: 400; color: var(--slate-2); margin-top: 2px; }

/* ============================================================
   v1 LAUNCH — three pillars, the see-it-work → custom path,
   the hero "free account" card, subtle staggered motion.
   Latest cascade; reuses existing tokens.
   ============================================================ */

/* ----- hero "free account" card (right column) ----- */
.acct-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold-2);
  border-radius: 16px; box-shadow: 0 1px 2px rgba(10,31,68,.06), 0 16px 40px rgba(10,31,68,.09);
  padding: 26px 26px 22px; max-width: 420px; width: 100%; justify-self: center; }
.acct-card__head { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 18px; }
.acct-card__head .brand-mark { width: 24px; height: 24px; border-radius: 7px; }
.acct-list { list-style: none; padding: 0; margin: 0 0 22px; }
.acct-list li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--slate); line-height: 1.5; }
.acct-list li:first-child { border-top: 0; }
.acct-list li b { color: var(--ink); font-weight: 600; }
.acct-list .ti { color: var(--sig-green); font-size: 1.15rem; margin-top: 2px; flex-shrink: 0; stroke-width: 2.4; }
.acct-card__cta { margin-top: 4px; }
.acct-card__note { font-size: .78rem; color: var(--slate-2); text-align: center; margin: 12px 0 0; }
@media (max-width: 940px) { .acct-card { margin: 0 auto; } }

/* ----- pillars (What we build) — 3 across, 1 on phones ----- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 920px) { .pillars { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
/* 3-across only: align the cards top AND bottom, so the row reads as three peers.
   Tops — reserve two heading lines ("AI agents for manufacturing" wraps at column
   width, the others don't); line-height is 1.1, so 2.2em is exactly two lines.
   A future title that wraps to THREE lines would silently break this alignment.
   Bottoms — the grid already equalises card height, so push .card-proof to the
   floor of the card; without this the shortest card trails ~94px of dead space.
   Phones stack to one column, where both are unnecessary. */
/* Compound selector is load-bearing: plain `.card-proof` loses `color` and `margin`
   to `.card p` (line 174). `.pillars .card .card-proof` still outranks this, so the
   desktop margin-top:auto below is unaffected. */
.card p.card-proof, .card-proof { font-size: .82rem; color: var(--slate-2); margin: 10px 0 0; }
@media (min-width: 921px) {
  .pillars .card h3 { min-height: 2.2em; }
  .pillars .card { display: flex; flex-direction: column; }
  /* auto pushes the proof line to the card floor; on a card with no slack auto
     resolves to 0, so padding-top carries the minimum separation from the body. */
  .pillars .card .card-proof { margin-top: auto; padding-top: 10px; }
}
.buildnote { display: flex; gap: 11px; align-items: flex-start; max-width: 780px; margin: 26px auto 0;
  padding: 14px 18px; border: 1px solid rgba(47,125,82,.3); background: rgba(47,125,82,.05);
  border-radius: var(--r); font-size: .82rem; color: var(--slate); line-height: 1.55; text-align: left; }
.scenarios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.scenario { font-size: .72rem; font-weight: 600; color: var(--slate); background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }

/* ----- the ladder (How to start) ----- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; align-items: stretch; }
@media (max-width: 920px) { .ladder { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.rung { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.rung:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rung--feature { border: 2px solid var(--gold); box-shadow: var(--shadow-lg); position: relative; }
.rung__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: var(--gold); padding: 5px 14px; border-radius: 999px; }
.rung__step { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }
.rung h3 { margin: 8px 0 6px; font-size: 1.2rem; }
.rung__price { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 0 0 18px; }
.rung__per { font-size: .92rem; font-weight: 600; color: var(--slate-2); letter-spacing: 0; }
.rung .check { margin: 0 0 24px; }
.rung .check li { padding: 10px 0 10px 32px; font-size: .92rem; }
.rung .check li::before { top: 10px; width: 20px; height: 20px; }
.rung__cta { margin-top: auto; }

/* ----- founder link ----- */
.founder__link { margin-top: 16px; font-size: .92rem; }
.founder__link a { font-weight: 600; }

/* ----- staggered scroll-reveal within a grid ----- */
.pillars .reveal:nth-child(2), .ladder .reveal:nth-child(2) { transition-delay: .09s; }
.pillars .reveal:nth-child(3), .ladder .reveal:nth-child(3) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .pillars .reveal, .ladder .reveal { transition-delay: 0s !important; } }

/* ----- hero card entrance on phones: keep the airy single column ----- */
@media (max-width: 940px) { .hero-grid { gap: 36px; } }

/* ----- work-with-us intake grid ----- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 32px; }
@media (max-width: 920px){ .work-grid{ grid-template-columns: 1fr; gap: 32px; } }

/* ----- trust note icon (What we build) ----- */
.buildnote .ti { color: var(--sig-green); font-size: 1.2rem; margin-top: 1px; flex-shrink: 0; }

/* ----- signup: optional intents demoted below the email + button ----- */
.subform .subintent--optional { width: 100%; max-width: none; order: 9; margin: 18px 0 0;
  padding-top: 16px; border-top: 1px solid var(--line); }
.subintent__label { display: block; width: 100%; font-size: .8rem; font-weight: 600;
  color: var(--slate-2); letter-spacing: 0; margin-bottom: 6px; text-align: left; }

/* ============================================================
   REDESIGN r1 — vision-first hero. The H1 is now the product
   vision itself: three verb-lines mapping 1:1 to the three
   pillars (agents → leaner, simulations → leaders, custom → build).
   Operator credibility moves down to the founder band.
   ============================================================ */
.hero h1.h1--verbs {
  font-size: clamp(2.15rem, 5.2vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 15ch;
  margin-bottom: 20px;
  text-wrap: balance;
}
/* Quiet rhythm: the plant/leaders lines lead, "build what you need" lands
   the custom pillar. Weight (not color) carries the emphasis — accent scarcity. */
.hero h1.h1--verbs br + * { display: inline; }

/* ------------------------------------------------------------
   REDESIGN r2 — the founder's own headline, a three-line stack.
   Lines 1-2 are the name of the thing and carry full display size;
   line 3 is the field it operates in, so it renders as a subordinate
   descriptor rather than a third 3.35rem line that would wrap to
   four rows on a phone. His words, his order, unchanged.
   ------------------------------------------------------------ */
.hero h1.h1--stack {
  font-size: clamp(1.9rem, 3.5vw, 2.25rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  max-width: 32ch;
  margin-bottom: 20px;
  text-wrap: wrap;
}
.hero h1.h1--stack .h1-tie { white-space: nowrap; }
.hero h1.h1--stack .h1-sub {
  display: block;
  text-wrap: balance;
  margin-top: 12px;
  max-width: 24ch;
  font-size: .40em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.008em;
  color: var(--slate);
}
@media (max-width: 600px) {
  .hero h1.h1--stack { font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.06; max-width: 16ch; }
  .hero h1.h1--stack .h1-tie { white-space: normal; }
  .hero h1.h1--stack .h1-sub { font-size: .5em; margin-top: 10px; }
}
@media (max-width: 600px) {
  .hero h1.h1--verbs { font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.08; }
}
/* Surfaced free offer — the one action a scanner should catch. Quiet emphasis
   (weight + a left rule), not a colored shout; blue stays reserved for CTAs. */
.hero .hero-free {
  margin: 18px 0 4px; padding-left: 14px; border-left: 3px solid var(--gold);
  font-size: 1.06rem; font-weight: 600; color: var(--ink); line-height: 1.5; max-width: 52ch;
}
/* The hero account card is above the fold and reveals on load; start it only
   lightly faded (not from 0) so a fast-landing user never sees it washed out. */
.hero .acct-card.reveal { opacity: .55; transform: translateY(10px); }
.hero .acct-card.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero .acct-card.reveal { opacity: 1; transform: none; } }

/* ============================================================
   Static header nav for the JS-free pages
   (/brief, /resources). Their old inline style="display:flex"
   overrode the mobile dropdown's display:none, leaving the menu
   PERMANENTLY OPEN over the content on phones (no JS on those
   pages = nothing could ever close it). This class renders the
   nav inline at all widths instead of as a toggled dropdown.
   ============================================================ */
@media (max-width: 880px) {
  .nav-links--static {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: 12px; background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  .nav-links--static a { padding: 8px 4px; font-size: .92rem; }
  .nav-links--static a.nav-cta { margin: 0; padding: 10px 16px; }
}
@media (max-width: 480px) {
  /* brand + CTA only; plain links won't fit beside the pill */
  .nav-links--static a:not(.nav-cta) { display: none; }
  .nav-links--static a.nav-cta { font-size: .85rem; padding: 9px 14px; }
  /* brand + pill can't share 375px on one row — let the header wrap to two
     rows on the static-nav pages instead of overlapping the wordmark */
  .nav:has(.nav-links--static) { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; }
}

/* ============================================================
   REDESIGN r2 — "one clear path". Quiet connector arrows link the
   three steps into a single journey (desktop; the section heading
   already reads "One path, three steps"). Skipped on mobile, where
   the cards stack and an arrow would collide with the step badge.
   ============================================================ */
.ladder .rung { position: relative; }
@media (min-width: 921px) {
  .ladder .rung:not(:last-child)::after {
    content: "\2192"; /* → */
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translate(-50%, -50%);
    color: var(--slate-2); font-size: 1.25rem; font-weight: 700; line-height: 1;
    z-index: 2; pointer-events: none;
  }
}

/* ------------------------------------------------------------
   Hero brief block (founder-authored copy, r2). The gold rule and
   the bold weight were built for a one-line offer; at four sentences
   that reads as a shout, so the paragraph drops to body weight and
   keeps only the rule. The small ghost button is the founder's
   "insert small button with link to the brief".
   ------------------------------------------------------------ */
.hero .hero-free { font-weight: 400; font-size: 1.02rem; max-width: 58ch; }
.btn--sm { padding: 11px 20px; font-size: .92rem; }
.hero-free-cta { margin: 14px 0 20px; padding-left: 17px; }

/* Quiet evidence-of-practice line under the locked brief button. Replaces the
   three-item product list, which peer readers read as "three products from
   someone who hasn't finished one." Weight and colour carry it; blue stays
   reserved for CTAs. (From the design pass.) */
.hero-proofline { font-size: .92rem; color: var(--slate); max-width: 52ch; margin: 2px 0 22px; line-height: 1.5; }

/* Locked-headline protection at very narrow widths. The mobile clamp floors at
   1.9rem, which is wider than the text column below ~340px, so "AI-powered
   Solutions" broke onto a fourth line at 320px — a violation of the lock. Below
   360px the size becomes purely proportional so line two always holds. Verified
   at 320, 360, 375 and 1280. */
@media (max-width: 359px) {
  /* Both constraints have to give: the clamp floor AND the 16ch cap, which at
     this size is narrower than the line itself. */
  /* Three things had to give here, and only the third was the real cause:
     the clamp floor, the 16ch cap, and — the actual culprit — text-wrap:
     balance, which was splitting a line that fits (measured 275px of 280px
     available). Balance is right for the descriptor, wrong for a locked line. */
  .hero h1.h1--stack { font-size: 8.2vw; max-width: none; text-wrap: wrap; }
  .hero h1.h1--stack .h1-sub { text-wrap: balance; }
}

/* ------------------------------------------------------------
   TYPE SCALE CLEAN-UP. The hero had drifted to eight distinct sizes,
   four of them within 2px of each other (18.9 / 18.5 / 17.6 / 17) —
   which reads as sloppiness, not hierarchy. Collapsed onto five real
   steps. The locked headline, its descriptor and the founder's hero
   paragraph keep their exact sizes; only the supporting text moved.
     50.9px  display   — the locked H1
     20.4px  descriptor— the locked third line
     18.9px  body      — the founder's hero paragraph
     17.0px  support   — buttons, card body, proof line
     14.4px  micro     — notes and fine print
   ------------------------------------------------------------ */
.acct-card li, .acct-card li span, .acct-card li a, .acct-card li b, .acct-card li em { font-size: .92rem; }

/* ============================================================
   TYPE SCALE — page-wide normalisation.
   The page had drifted to 26 distinct font sizes, with clusters
   sitting 0.4-1px apart (22.9/22.2/21.8/21.1/20.7/20 …
   18.5/17.6/17.4/17.2/17/16.6 … 15.9/15.5/15.2/14.8/14.4).
   Differences that small do not read as hierarchy — they read as a
   page nobody proof-set. Collapsed onto one ladder:

     50.9  display  — the locked H1             (unchanged)
     41    section heading (h2)                 (unchanged)
     30.4  price figure
     22.2  sub-heading (h3)
     20.4  the locked H1 descriptor             (unchanged)
     18.9  the locked hero paragraph            (unchanged)
     18.5  body
     17.0  support — buttons, card body, links
     15.2  small
     13.3  micro — labels, badges, fine print

   The three locked items keep their exact sizes; everything else
   moved onto the nearest step.
   ============================================================ */
h3, .belief__label              { font-size: 1.2rem; }
.rung__price                    { font-size: 1.64rem; }
.lead, .hero p.lead,
.founder__lead,
.founder__method, summary       { font-size: 1rem; }
.btn, .rung__per, .card-note,
.acct-card li, .acct-card li span,
.acct-card li a, .acct-card li b,
.acct-card li em, .acct-card p  { font-size: .92rem; }
.belief__desc, .beliefs__title,
.card-proof, .cf-hint,
.subnote, h4                    { font-size: .82rem; }
.subhint, .subintent__label,
.acct-card__note, .belief__num,
.scenario, .rung__step,
.rung__badge                    { font-size: .72rem; }

.faq summary { font-size: 1rem; }
/* Higher-specificity finishers: these three lost to earlier compound
   selectors (.card p, .acct-card__head) and were left off the ladder. */
.card p.card-proof, .card .card-proof, .card .card-proof a,
p.cf-hint, .cf-hint                { font-size: .82rem; }
.acct-card .acct-card__head        { font-size: .72rem; }

/* Turnstile renders a fixed ~300px-wide frame regardless of its container, so on
   phones it overflows the signup card and is sliced by overflow:hidden. Two moves:
   claw back side padding, then scale the frame down proportionally. Origin is
   left top so it stays aligned with the field above it. */
@media (max-width: 560px) {
  .subscribe-card { padding-left: 20px; padding-right: 20px; }
  .cf-turnstile { transform-origin: left top; }
}
/* Base margin belongs here, NOT inline in turnstile.js - an inline style beats
   every media query, which silently made the bands below dead CSS.
   transform: scale() shrinks the paint but not the layout box, so each band
   subtracts the freed height (73px x (1 - scale)) from the 14px base to keep
   the widget-to-button gap constant as the widget shrinks. */
.cf-turnstile { margin: 0 0 14px; }
@media (max-width: 420px) { .cf-turnstile { transform: scale(.95); margin-bottom: 10px; } }
@media (max-width: 395px) { .cf-turnstile { transform: scale(.88); margin-bottom: 5px; } }
@media (max-width: 378px) { .cf-turnstile { transform: scale(.84); margin-bottom: 2px; } }
@media (max-width: 364px) { .cf-turnstile { transform: scale(.79); margin-bottom: -1px; } }
@media (max-width: 340px) { .cf-turnstile { transform: scale(.68); margin-bottom: -9px; } }

/* The 26-to-10 size normalisation inverted the footer: column labels ended up
   smaller than the links beneath them. Labels take the support step, links the
   small step, so the hierarchy reads correctly again. */
.site-footer h4 { font-size: .92rem; }
.site-footer .foot-col a, .site-footer ul a { font-size: .82rem; }

/* ============================================================
   THE WARNING LETTER BRIEF SPEC BLOCK
   ("AI agents for manufacturing" pillar, What we build)
   What the agent does, the FDA program areas it files letters
   under, and a highlighted link to the newest issue. /brief is a
   publish-maintained redirect to that issue, rewritten by the publish
   step — never link a dated issue path from here.

   HEIGHT IS LOAD-BEARING, AND IT IS NOT A FOUR-SAMPLE PROPERTY.
   Above 920px the three pillars share one grid row, so the row is as
   tall as the TALLEST card. This block has to fit inside the slack
   card 1 already had at EVERY width, or the section grows.
   The first cut of this block was measured at 1440/1200/1024/960,
   passed all four, and still grew the section by up to +40px across
   39 widths (926-927, 939-958, 1001-1006, 1118-1128): the three
   cards shed text lines at different widths, so card 1 overtakes the
   others in narrow bands and is comfortably clear everywhere else.
   Four samples cannot see that. The gate is a 1px sweep of 921-1920
   asserting card1 <= max(card2, card3) — cards 2 and 3 are untouched
   by this block, so max(card2, card3) IS the pre-change row height.

   The two fluid sizes below are keyed to the VIEWPORT (vw), and that
   is deliberate — read this before "improving" it to container units.
   The column is only ~226px wide near 940px and reaches its cap of
   292px by 1180px (--maxw: 1140px), so vw does keep growing the type
   after the column has stopped. That looks like the bug container
   queries exist to fix, and it was tried: `container-type: inline-size`
   on the card with cqi-based clamps. It is WORSE here, measured.
   The binding width is not the narrow end — it is 1118-1128px, where
   card 2 sheds a text line and card 1 does not. The column there is
   already 288 of its 292px maximum, so column-relative sizing hands
   this block near-maximum type at precisely the width with no room:
   minimum headroom fell from 13.45px to 0.75px across three engines.
   Sizing by viewport is what keeps the type small through that band.
   The cost is real and accepted: the type keeps growing to ~1718px
   for no layout reason, spending height where there is plenty.

   Below 921px the cards stack and the constraint is gone, which is
   why every shrink here is inside the desktop media query: phones
   keep the full, more legible size.
   ============================================================ */
.card p.agent-scope, .agent-scope { margin: 6px 0 0; font-size: .72rem; line-height: 1.45;
  font-weight: 600; color: var(--slate); }
/* One category name is one unit. The nbsp binds the separator to the name
   BEFORE it so a line can never open with a stray middle dot. */
.agent-scope span { white-space: nowrap; }

.card p.card-cta, .card-cta { margin: 10px 0 0; }
.card .card-cta a { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem;
  font-weight: 600; color: var(--gold-2); background: rgba(0,113,227,.07);
  /* .75, measured, puts the pill's edge at 3.15:1 against the card — the 3:1
     WCAG 1.4.11 floor for a non-text control boundary, so the pill is not
     identified by hue alone. Softer values do NOT get there and it is not close:
     .22 = 1.36:1, .45 = 1.93:1, .65 = 2.67:1. Do not lighten this back to taste
     without re-measuring the flattened value against the card. */
  border: 1px solid rgba(0,113,227,.75); border-radius: 999px; padding: 7px 15px;
  text-decoration: none; line-height: 1.2;
  transition: background .18s var(--ease), border-color .18s var(--ease); }
.card .card-cta a:hover { background: rgba(0,113,227,.13); border-color: rgba(0,113,227,1); }

@media (min-width: 921px) {
  /* `.pillars` prefix is deliberate: the type ladder's finisher
     `.card p.card-proof` (0-2-1) sits above this in the file and would tie on
     specificity, leaving source order as the only thing holding this up. The
     third class makes it 0-3-1 so appending CSS below cannot silently undo it. */
  .pillars .card p.card-proof--spec { font-size: clamp(.66rem, .28vw + .50rem, .76rem);
    line-height: 1.42; }
  .pillars .card p.agent-scope { font-size: clamp(.63rem, .25vw + .48rem, .72rem);
    line-height: 1.4; }
  .pillars .card .card-cta a { font-size: .78rem; padding: 6px 14px; }
  /* margin-top:auto on .card-proof already floors the block; these keep the
     three parts tight to one another. */
  .pillars .card .agent-scope, .pillars .card .card-cta { margin-top: 5px; }
}

/* The pillars stack one-per-page-column in print and the card was already
   splitting across a page break before this block existed; it is taller now, so
   keep each card whole. Printed pages lose the pill's fill (print-color-adjust
   is `economy`), which would leave a link with nowhere to go — so print the URL. */
@media print {
  .pillars .card { break-inside: avoid; page-break-inside: avoid; }
  .card .card-cta a[href^="/"]::after { content: " (pharmtech.ai" attr(href) ")"; font-weight: 400; }
}

/* A DISABLED SUBMIT MUST LOOK DISABLED. Found on the LIVE site by an
   independent post-deploy review: no `:disabled` or `[disabled]` rule existed in ANY
   stylesheet, so the Turnstile-gated submit button rendered identical to a live one —
   full brand blue, opacity 1, cursor:pointer — while `button.disabled` was true. A
   visitor typed their email, clicked a solid blue button and nothing happened, with no
   feedback of any kind. This affects EVERY visitor during the window before a token
   arrives, not only the ones served an interactive challenge. Disabled controls are
   exempt from the WCAG 1.4.3 contrast minimum, so dimming is safe here. */
.btn:disabled,.btn[disabled],button:disabled,button[disabled]{
  opacity:.5;cursor:not-allowed;box-shadow:none;
}

/* A dead control must not react to the pointer either: .btn--primary:hover otherwise still
   won on `background` and darkened a disabled button on hover (measured rgb(0,113,227) ->
   rgb(0,102,204)). Restated rather than `inherit` so it holds wherever the base rule lives. */
.btn--primary:disabled:hover,.btn--primary[disabled]:hover{
  background:var(--gold,#0071e3);border-color:var(--gold,#0071e3);
}
.btn:disabled:hover,.btn[disabled]:hover,button:disabled:hover,button[disabled]:hover{
  box-shadow:none;transform:none;
}