/* blueHealthcare section stylesheet — NEW FILE, used only by pages under
   /portfolio/bluehealthcare/, /healthcare-gate, and manuals/*.
   Deliberately does not touch or extend /assets/style.css (blueMonster's
   stylesheet) so this section can be reviewed, changed, or removed without
   any risk to the blueMonster page.

   Design intent (owner request, 2026-09-10): read as a healthcare company,
   not a dev tool. Light surface, calm navy ink, generous whitespace, each
   product tinted with its OWN Brand Law v4 color — never a single "family
   blue" accent (Brand Law v4 rule 8). */

:root {
  --hc-ink: #0B1734;
  --hc-ink-soft: #33405A;
  --hc-dim: #5A6578;
  --hc-bg: #FFFFFF;
  --hc-bg-soft: #F6F8FB;
  --hc-edge: #DCE4EF;
  --hc-card: #FFFFFF;
  --hc-primary: #14337A;   /* default = blueHealthcare primary; pages override */
  --hc-signal: #B9FFE0;
  --hc-amber: #8A5A00;
  --hc-red: #A52E3A;
  --hc-green: #0B5A2E;
  --hc-shadow: 0 18px 50px rgba(11, 23, 52, .08);
  --hc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hc-sans: "Geist", "Helvetica Neue", Inter, Arial, sans-serif;
}

/* 091426 design-system lift (SITE-6): additive only. Every rule below is a
   NEW class or a sitewide fix (mobile nav, focus-visible) — nothing here
   redefines an existing selector's box model, so the ~45 pages outside this
   lane's scope keep rendering exactly as before. Source: ChatGPT design
   delivery 5, P0_audit/AUDIT_AND_DIRECTION.md + P1_website/healthcare-style.css,
   adapted to this file's existing tokens/paths rather than replacing them. */

/* Accessible focus ring everywhere (WCAG 2.4.7) — belt-and-suspenders on top
   of each component's own :focus rule. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(20, 51, 122, .5); outline-offset: 2px;
}

/* Mobile nav — REAL FIX: below 900px the old .hc-nav had no collapse, so
   an 8-14-item .hc-navlinks row could overflow/wrap awkwardly at 390px.
   Hidden by default; only takes effect once a page also renders the
   <details class="hc-mobile"> markup (additive — pages that omit it are
   unaffected either way). */
.hc-mobile { display: none; }
@media (max-width: 1279px) {
  nav.hc-nav .hc-navlinks { display: none; }
  .hc-mobile { display: block; margin-left: auto; position: relative; }
  .hc-mobile summary {
    list-style: none; cursor: pointer; font-family: var(--hc-mono); font-size: 11px;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--hc-ink);
    border: 1px solid var(--hc-edge); border-radius: 8px; padding: 9px 14px;
  }
  .hc-mobile summary::-webkit-details-marker { display: none; }
  .hc-mobile-links {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
    background: #fff; border: 1px solid var(--hc-edge); border-radius: 12px;
    box-shadow: var(--hc-shadow); padding: 10px; display: grid; gap: 2px; min-width: 220px;
  }
  .hc-mobile-links a { padding: 11px 12px; border-radius: 8px; text-decoration: none; color: var(--hc-ink); font-size: 14px; }
  .hc-mobile-links a:hover, .hc-mobile-links a[aria-current="page"] { background: var(--hc-bg-soft); color: var(--hc-primary); }
}
.hc-navlinks a[aria-current="page"] { color: var(--hc-primary); font-weight: 800; }

/* Refined page-title scale for the hc-back/hc-eyebrow/h1/hc-sub pattern used
   on most secondary pages, replacing the old flat inline 36px so pages read
   with more editorial hierarchy at desktop while staying compact on mobile. */
.hc-page-h1 {
  font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px;
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.06;
}

/* Status vocabulary (AUDIT_AND_DIRECTION #4: "Standardize uncertainty").
   Distinct from .hc-badge (product tier); this is evidence/claim state and
   is meant to read identically wherever "measured / not measured / proposed
   / being built / coming soon" appears. */
.hc-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 26px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hc-edge);
  font-family: var(--hc-mono); font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  background: #fff; color: var(--hc-ink);
}
.hc-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.hc-chip.measured { color: var(--hc-green); }
.hc-chip.notmeasured { color: var(--hc-dim); }
.hc-chip.proposed { color: #3421B5; }
.hc-chip.building { color: var(--hc-amber); }
.hc-chip.soon { color: #0066E6; }

/* Evidence-file hero visual (AUDIT_AND_DIRECTION #1) — a requirement -> row
   evidence state -> separate named-human block -> offline-check idiom.
   Every instance MUST carry a visible "(synthetic)" / "Example" label on any
   sample name or number (correction 3, SITE-6 brief). */
.proof-file {
  background: #fff; border: 1px solid var(--hc-edge); border-radius: 18px;
  box-shadow: var(--hc-shadow); padding: 24px; position: relative;
}
.proof-file::before {
  content: "EXAMPLE DECISION FILE"; display: block; margin-bottom: 18px;
  font-family: var(--hc-mono); font-size: 10px; letter-spacing: .15em; color: var(--hc-primary);
}
.proof-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--hc-bg-soft); }
.proof-row:first-of-type { border-top: 0; }
.proof-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.proof-row.support { color: var(--hc-green); }
.proof-row.contra { color: var(--hc-red); }
.proof-row.missing { color: var(--hc-amber); }
.proof-copy { color: var(--hc-ink); font-size: 14px; }
.proof-state {
  font-family: var(--hc-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid currentColor; border-radius: 999px; padding: 4px 8px; white-space: nowrap;
}
.proof-human {
  margin-top: 18px; background: var(--hc-bg-soft); border-radius: 12px; padding: 15px;
  display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap;
}
.proof-human strong { display: block; color: var(--hc-ink); }
.proof-human small { color: var(--hc-dim); }

/* Audience path card (hub "three ways in") — numbered, one-line memorable
   claim, link pinned to the bottom so uneven copy lengths still align. */
.hc-path {
  background: #fff; border: 1px solid var(--hc-edge); border-radius: 16px; padding: 25px;
  display: flex; flex-direction: column; min-height: 240px; min-width: 0;
}
.hc-path .n { font-family: var(--hc-mono); font-size: 11px; color: var(--hc-primary); letter-spacing: .04em; }
.hc-path h3 { font-family: var(--hc-sans); font-size: 21px; line-height: 1.18; margin: 16px 0 8px; }
.hc-path p { margin: 0; color: var(--hc-ink-soft); font-size: 14.5px; line-height: 1.65; }
.hc-path a { margin-top: auto; padding-top: 18px; color: var(--hc-primary); font-weight: 700; text-decoration: none; }
.hc-path a:hover { text-decoration: underline; }

/* Two-column section heading (label + h2 on the left, one supporting
   sentence on the right) — opt-in, used on the redesigned primary pages. */
.hc-sec-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin: 56px 0 24px; }
.hc-sec-head h2 { font-family: var(--hc-sans); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.hc-sec-head p { margin: 0; color: var(--hc-ink-soft); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) { .hc-sec-head { grid-template-columns: 1fr; gap: 12px; } }

/* Status-vocabulary card grid (hub "said plainly, every time" section). */
.hc-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hc-status-card { border-radius: 16px; padding: 24px; border: 1px solid var(--hc-edge); background: #fff; }
.hc-status-card h3 { font-family: var(--hc-sans); margin: 10px 0 12px; font-size: 19px; }
.hc-status-card ul { padding-left: 18px; color: var(--hc-ink-soft); margin: 0; }
.hc-status-card li { margin-bottom: 4px; }
@media (max-width: 900px) { .hc-status-grid { grid-template-columns: 1fr; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.hc-body {
  font-family: var(--hc-sans);
  background: var(--hc-bg);
  color: var(--hc-ink);
  -webkit-font-smoothing: antialiased;
}

.hc-skip {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.hc-skip:focus {
  position: static; width: auto; height: auto; margin: 12px; padding: 8px 10px;
  border-radius: 8px; border: 1px solid var(--hc-edge); background: #fff; color: #000;
  font-family: var(--hc-mono); font-size: 12px; letter-spacing: 1px; text-decoration: none;
}

/* Nav */
.hc-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 20px; row-gap: 10px; padding: 26px 48px; max-width: 1280px; margin: 0 auto;
}
.hc-nav .hc-brand { font-size: 16px; font-weight: 700; text-decoration: none; color: var(--hc-ink); }
.hc-nav .hc-brand b { color: var(--hc-primary); }
.hc-brandrow { display: flex; align-items: center; gap: 10px; }
.hc-brand-sep { color: var(--hc-dim); font-weight: 500; }
.hc-brand-logo { display: inline-flex; }
.hc-brand-logo img { height: 44px; width: auto; display: block; }
.hc-navlinks { display: flex; gap: 24px; font-family: var(--hc-mono); font-size: 12px; letter-spacing: 1px; flex-wrap: wrap; }
.hc-navlinks a { text-decoration: none; color: var(--hc-dim); }
.hc-navlinks a:hover { color: var(--hc-ink); }

/* Layout */
.hc-wrap { max-width: 980px; margin: 0 auto; padding: 8px 48px 0; }
.hc-wrap-wide { max-width: 1200px; margin: 0 auto; padding: 8px 48px 0; }
.hc-back {
  font-family: var(--hc-mono); font-size: 11px; letter-spacing: 2px; color: var(--hc-dim);
  text-decoration: none;
}
.hc-back:hover { color: var(--hc-ink); }

/* Hero */
.hc-hero { display: grid; grid-template-columns: 120px 1fr; gap: 36px; align-items: center; padding: 40px 0 8px; }
.hc-hero-icon {
  width: 100%; max-width: 96px; border-radius: 22%; display: block;
}
.hc-hero h1 { font-weight: 800; font-size: 40px; margin: 0 0 8px; letter-spacing: -0.01em; }
.hc-hero h1 b { color: var(--hc-primary); }
.hc-eyebrow {
  font-family: var(--hc-mono); font-size: 12px; letter-spacing: 2.5px; color: var(--hc-dim);
  text-transform: uppercase; margin-bottom: 16px;
}
.hc-sub { font-size: 17px; line-height: 1.7; max-width: 66ch; color: var(--hc-ink-soft); }

/* Section headers */
.hc-sec {
  font-family: var(--hc-mono); font-size: 12px; letter-spacing: 3px; color: var(--hc-primary);
  margin: 56px 0 20px; text-transform: uppercase;
}
.hc-sec::after { content: ""; display: block; width: 56px; height: 2px; background: var(--hc-primary); margin-top: 9px; }

/* Cards */
.hc-card {
  background: var(--hc-card); border: 1px solid var(--hc-edge); border-radius: 14px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 10px;
}
.hc-card p { font-size: 15px; line-height: 1.7; color: var(--hc-ink-soft); margin: 0; }
.hc-card ul, .hc-card ol { font-size: 15px; line-height: 1.75; color: var(--hc-ink-soft); margin: 6px 0 0; padding-left: 20px; }
.hc-card h4 { margin: 0; font-weight: 800; font-size: 18px; }

.hc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

/* Status badges — three-tier honesty, never one undifferentiated "our products" list */
.hc-badge {
  display: inline-block; font-family: var(--hc-mono); font-size: 10.5px; letter-spacing: 1.4px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; text-transform: uppercase;
}
.hc-badge-flagship { color: #0B5A2E; border-color: #9FE6BE; background: #EEFBF3; }
.hc-badge-module { color: #1A4A99; border-color: #C7DBFB; background: #EFF5FE; }
.hc-badge-build { color: #8A5A00; border-color: #F3D89B; background: #FFF8EA; }
.hc-badge-notbuilt { color: #7A2C2C; border-color: #F0BEBE; background: #FDF1F1; }
/* PLANNED — a market or feature with no built code and no date. Deliberately
   neutral gray, not flagship-green/module-blue/build-amber, so a planned
   market can never be visually mistaken for something live. */
.hc-badge-planned { color: #4A4E58; border-color: #D8DBE2; background: #F3F4F6; }
/* IN DEVELOPMENT — parts of the platform actively being built. Amber-gray,
   distinct from build (pure amber for modules), to signal "under active
   construction but not yet demo-ready". */

/* Steps */
.hc-steps { display: flex; flex-direction: column; gap: 18px; }
.hc-step { display: flex; gap: 16px; }
.hc-step > .hc-step-n {
  flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--hc-primary); color: white; border-radius: 50%; font-family: var(--hc-mono);
  font-size: 12px; font-weight: 700;
}
.hc-step > .hc-step-t { padding-top: 4px; font-size: 15px; line-height: 1.65; color: var(--hc-ink-soft); }

/* Receipt / boundary callouts */
.hc-boundary {
  border: 1px solid var(--hc-edge); border-radius: 12px; padding: 24px; background: var(--hc-bg-soft);
  margin: 40px 0; font-size: 14.5px; line-height: 1.7; color: var(--hc-ink-soft);
}
.hc-boundary b { color: var(--hc-ink); }

/* Status table — wrap in an overflow-x:auto container on narrow viewports
   rather than letting the page itself scroll sideways. */
.hc-table-scroll { overflow-x: auto; }
.hc-status-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.hc-status-table th, .hc-status-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hc-edge); }
.hc-status-table th { font-family: var(--hc-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--hc-dim); text-transform: uppercase; }

/* Product picker on the hub/overview pages */
.hc-product-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  background: var(--hc-card); border: 1px solid var(--hc-edge); border-radius: 14px; padding: 22px 24px;
  transition: border-color .15s, transform .15s;
}
.hc-product-card:hover { border-color: var(--hc-card-accent, var(--hc-primary)); transform: translateY(-2px); }
.hc-product-card h4 { margin: 0; font-size: 17px; font-weight: 800; }
/* Full v8 lockups (icon + wordmark, Brand Law v4 light colours baked into the SVG) -- owner, 2026-09-14:
   "use the full logos everywhere on this page". */
.hc-card-lockup { margin: -6px 0 0 -8px; line-height: 0; }
.hc-card-lockup img { display: block; height: 60px; width: auto; max-width: 100%; }
.hc-hero-lockup { grid-template-columns: 1fr; gap: 12px; }
.hc-hero-logo { display: block; height: 96px; width: auto; max-width: 100%; margin-left: -12px; }

/* Hub/open hero: text column + evidence-file visual, side by side on
   desktop, stacked on mobile — the "hero visual language" the audit asks
   for, without touching .hc-hero's own grid (product pages keep the
   120px-icon layout untouched). */
.hc-hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .hc-hero-split { grid-template-columns: 1fr; gap: 32px; } }
.hc-hero-split h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -.03em; }
.hc-product-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--hc-dim); }

/* CTA buttons */
.hc-cta {
  display: inline-block; font-family: var(--hc-mono); font-size: 13px; letter-spacing: 1.6px;
  text-decoration: none; color: #fff; background: var(--hc-primary); padding: 13px 24px;
  border-radius: 8px; font-weight: 700; text-transform: uppercase;
}
.hc-cta-outline {
  display: inline-block; font-family: var(--hc-mono); font-size: 13px; letter-spacing: 1.6px;
  text-decoration: none; color: var(--hc-primary); background: transparent; border: 1.5px solid var(--hc-primary);
  padding: 11.5px 22px; border-radius: 8px; font-weight: 700; text-transform: uppercase;
}
.hc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.hc-meta {
  font-family: var(--hc-mono); font-size: 11.5px; color: var(--hc-dim); letter-spacing: .6px;
  margin-top: 14px; line-height: 1.8;
}

/* Manual TOC + screenshot placeholders */
.hc-toc { display: flex; flex-direction: column; gap: 8px; }
.hc-toc a { text-decoration: none; color: var(--hc-primary); font-size: 15px; }
.hc-shot-todo {
  border: 1.5px dashed var(--hc-edge); border-radius: 10px; padding: 34px 20px; text-align: center;
  color: var(--hc-dim); font-family: var(--hc-mono); font-size: 12px; letter-spacing: .6px; background: var(--hc-bg-soft);
  margin: 10px 0 22px;
}

/* Real product/workflow screen captures (2026-09-12). Every capture on this
   site is synthetic demonstration data run on MOBLUEHQ's own demo systems --
   the .hc-shot-tag badge says so on every single image, not just once on
   the page, because a screenshot can be copied out of context. */
/* One capture per row, full width of the (already width-capped) content
   column -- not a multi-up grid. A 1600x1000 capture inside a 280px auto-fit
   column was scaled to about a third of its native width, and the interface
   text inside it became unreadable; a screenshot that can't be read defeats
   the point of showing it, especially in a manual where it IS the
   documentation. .hc-wrap already caps content at 980px, so full width here
   does not become oversized on a wide monitor. */
/* SHOT-WIDTH (2026-09-12): screenshots break OUT of the 980px text column.
   Prose wants ~980px for a comfortable line length; a 1600x1000 screenshot rendered into that
   column lands at ~800px -- a 50% downscale of a dense clinical UI, which is unreadable, and in a
   manual a screenshot is documentation rather than decoration. The negative margins widen the
   figure to the viewport (capped at 1440) WITHOUT widening the text around it. `clamp` keeps it at
   exactly the column width on narrow screens, so nothing changes below ~1100px. */
.hc-shot-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin: 10px 0 28px;
  width: clamp(100%, calc(100vw - 96px), 1440px);
  margin-left: calc((min(100%, 1440px) - min(calc(100vw - 96px), 1440px)) / 2);
  max-width: 1440px;
}
@media (max-width: 1100px) { .hc-shot-grid { width: 100%; margin-left: 0; } }
.hc-shot {
  border: 1px solid var(--hc-edge); border-radius: 14px; overflow: hidden; background: var(--hc-card);
  display: flex; flex-direction: column; min-width: 0;
}
.hc-shot a { display: block; line-height: 0; }
.hc-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--hc-edge); cursor: zoom-in; }
.hc-shot figcaption { padding: 14px 18px 16px; font-size: 13px; line-height: 1.6; color: var(--hc-ink-soft); }
.hc-shot-tag {
  display: inline-block; font-family: var(--hc-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #8A5A00; background: #FFF8EA; border: 1px solid #F3D89B; padding: 2px 9px; border-radius: 999px;
  margin-bottom: 8px;
}

/* Workflow sequence -- a numbered strip of screens meant to be read in order,
   one patient moving through the record. Reuses .hc-step-n's numbered-circle
   look so it reads as a continuation of the steps pattern, not a new idiom. */
.hc-flow { display: flex; flex-direction: column; gap: 28px; margin: 10px 0 28px; }
.hc-flow-item { display: grid; grid-template-columns: 32px 1fr; gap: 16px; }
.hc-flow-n {
  flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--hc-primary); color: #fff; border-radius: 50%; font-family: var(--hc-mono);
  font-size: 13px; font-weight: 700; margin-top: 2px;
}
.hc-flow-body { min-width: 0; }
.hc-flow-body h4 { margin: 2px 0 6px; font-size: 16px; font-weight: 800; color: var(--hc-ink); }
.hc-flow-body p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--hc-ink-soft); }
.hc-flow-body .hc-shot { max-width: 720px; }
@media (max-width: 480px) {
  .hc-flow-item { grid-template-columns: 24px 1fr; gap: 10px; }
  .hc-flow-n { width: 24px; height: 24px; font-size: 11px; }
}

details.hc-details { border: 1px solid var(--hc-edge); border-radius: 10px; padding: 20px 24px; margin-bottom: 14px; }
details.hc-details summary { cursor: pointer; font-weight: 800; font-size: 15px; color: var(--hc-ink); margin-bottom: 8px; }
details.hc-details p, details.hc-details li { font-size: 14.5px; line-height: 1.7; color: var(--hc-ink-soft); }
details.hc-details ol, details.hc-details ul { padding-left: 20px; margin: 6px 0 14px; }

code { font-family: var(--hc-mono); background: var(--hc-bg-soft); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
pre {
  font-family: var(--hc-mono); background: var(--hc-bg-soft); border: 1px solid var(--hc-edge);
  border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; overflow-x: auto; max-width: 100%;
}
pre code { background: none; padding: 0; }

/* Footer */
.hc-footer { border-top: 1px solid var(--hc-edge); margin-top: 90px; padding: 44px 48px; font-family: var(--hc-mono); font-size: 12px; letter-spacing: 1px; }
.hc-footer-in { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; color: var(--hc-dim); }
.hc-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.hc-footer-links a { text-decoration: none; color: var(--hc-dim); }
.hc-footer-links a:hover { color: var(--hc-ink); }
.hc-footer-disclaimer {
  max-width: 1200px; margin: 20px auto 0; padding-top: 18px; border-top: 1px solid var(--hc-edge);
  font-family: var(--hc-sans); font-size: 12px; line-height: 1.65; letter-spacing: 0; color: var(--hc-dim);
}
.hc-footer-disclaimer p { margin: 0 0 8px; }
.hc-footer-disclaimer strong { color: var(--hc-ink); font-weight: 600; }
.hc-footer-disclaimer a { color: var(--hc-primary); text-decoration: underline; }

/* Gate form (own copy — mirrors demo.html's pattern, light not dark) */
.hc-gate-form { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; max-width: 360px; }
.hc-gate-input {
  width: 100%; background: #fff; border: 1px solid var(--hc-edge); color: var(--hc-ink);
  font-family: var(--hc-mono); font-size: 14px; padding: 14px 16px; border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.hc-gate-input:hover { border-color: #B9C6DA; }
.hc-gate-input:focus { outline: none; border-color: var(--hc-primary); box-shadow: 0 0 0 3px rgba(20,51,122,.12); }
.hc-gate-error { color: #B23A3A; font-family: var(--hc-mono); font-size: 12px; letter-spacing: .4px; min-height: 1.2em; }

@media (max-width: 760px) {
  .hc-nav, .hc-wrap, .hc-wrap-wide, .hc-footer { padding-left: 20px; padding-right: 20px; }
  .hc-hero { grid-template-columns: 84px 1fr; gap: 20px; }
  .hc-hero h1 { font-size: 30px; }
}
@media (max-width: 480px) {
  .hc-navlinks { gap: 16px; font-size: 11px; }
  .hc-hero { grid-template-columns: 1fr; }
  .hc-hero-icon { max-width: 72px; }
  .hc-hero-logo { height: 72px; }
}
code, .hc-step, .hc-step *, .hc-steps, details, details * { overflow-wrap: anywhere; word-break: break-word; }
.hc-steps, .hc-step, .hc-step > div, .hc-card, details { min-width: 0; }