/* ==========================================================================
   HERCULOG — herculog.com
   Built on the Herculog Design System (Iron & Bronze; tokens verbatim).
   Light "Marble" is the site theme (the app itself is dark-primary).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base palette */
  --iron-950: #100E0C;
  --iron-900: #141210;
  --iron-850: #1C1915;
  --iron-800: #221E19;
  --iron-700: #2A2622;
  --iron-600: #3A352E;
  --iron-500: #554F45;
  --iron-400: #7C7568;
  --iron-300: #9B948A;
  --iron-200: #C7C0B4;
  --iron-100: #E4DED2;
  --iron-50:  #EFE9DF;
  --parchment: #F6F1E7;

  --bronze-700: #8A6437;
  --bronze-600: #A87F49;
  --bronze-500: #C2955C;
  --bronze-400: #D4AC74;
  --bronze-300: #E3C494;

  --laurel-600: #5E7050;
  --laurel-500: #7A8F68;
  --oxide-600: #A34632;
  --oxide-500: #C25B44;

  /* Semantic — light "Marble" theme (per the design system) */
  --surface-page: var(--parchment);
  --surface-raised: #FFFFFF;
  --surface-card: #FFFDF8;
  --surface-inset: #ECE5D7;
  --surface-overlay: rgba(28, 25, 21, 0.45);

  --text-display: var(--iron-900);
  --text-body: var(--iron-850);
  --text-muted: #6E6659;
  --text-faint: #948A78;
  --text-inverse: var(--iron-50);
  --text-accent: var(--bronze-700);

  --accent: var(--bronze-600);
  --accent-strong: var(--bronze-700);
  --accent-soft: rgba(168, 127, 73, 0.14);
  --on-accent: #FFFDF8;

  --positive: var(--laurel-600);
  --danger: var(--oxide-600);

  --border-subtle: #E0D8C8;
  --border-strong: #C9BFAC;
  --border-accent: var(--bronze-600);

  --focus-ring: 0 0 0 3px rgba(168, 127, 73, 0.35);

  --shadow-card: 0 1px 3px rgba(28, 25, 21, 0.06), 0 8px 24px rgba(28, 25, 21, 0.07);

  /* Typography */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', -apple-system, 'Helvetica Neue', sans-serif;

  --tracking-display: 0.04em;
  --tracking-kicker: 0.18em;

  /* Spacing & radii */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  color: var(--text-display);
  margin: 0;
  text-transform: uppercase;
}

p { margin: 0 0 16px; }
a { color: var(--bronze-700); }
a:hover { color: var(--bronze-600); }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--bronze-300); color: var(--iron-900); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }

.kicker {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 11px 24px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn:active { background: var(--bronze-700); transform: scale(0.98); }

.btn--ghost {
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-raised); border-color: var(--bronze-600); color: var(--text-body); }
.btn--ghost:active { background: var(--surface-inset); }

.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--iron-950); color: var(--iron-50); text-decoration: none;
  border: 1px solid var(--iron-800); border-radius: 12px;
  padding: 10px 22px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.store-badge:hover { border-color: var(--bronze-600); color: var(--iron-50); }
.store-badge .icon { width: 26px; height: 26px; }
.store-badge small { display: block; font-size: 11px; opacity: 0.75; line-height: 1.2; }
.store-badge strong { font-size: 18px; line-height: 1.2; }

.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 241, 231, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.wordmark img { width: 34px; height: 34px; border-radius: 8px; }
.wordmark span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--text-display);
}
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

.site-nav { margin-left: auto; display: flex; gap: var(--space-6); }
.site-nav a {
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--bronze-700); }
.header-cta { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Hero — parchment panel, headline in the calm left third
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--border-subtle);
}
.hero__panel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 560px;
  background: url('assets/images/hero.webp') right center / cover no-repeat;
  display: flex;
  align-items: center;
}
.hero__copy {
  max-width: 460px;
  padding: var(--space-12) var(--space-10);
  color: var(--iron-900);
}
.hero__copy .kicker { color: var(--bronze-700); }
.hero__copy h1 {
  font-size: clamp(36px, 5vw, 56px);
  color: var(--iron-900);
  margin: 14px 0 0;
}
.hero__copy p {
  font-size: 18px;
  color: var(--iron-800);
  margin: 18px 0 0;
  max-width: 40ch;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--space-8); }
.hero__note {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-700);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.block { padding: 72px 0; }
.block--inset { background: var(--surface-inset); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.section-head { margin-bottom: var(--space-10); }
.section-head h2 { font-size: clamp(26px, 3.2vw, 34px); margin-top: 10px; }
.section-head p { color: var(--text-muted); max-width: 60ch; margin-top: 12px; font-size: 17px; }

/* Labor rows — the app tour */
.labor {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border-subtle);
}
.labor:first-of-type { border-top: none; padding-top: 0; }
.labor--flip .labor__media { order: 2; }
.labor__media img {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.labor__num {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  color: var(--text-faint);
  text-transform: uppercase;
}
.labor h3 { font-size: 24px; margin: 10px 0 12px; }
.labor p { color: var(--text-muted); font-size: 16.5px; margin: 0; }

/* Feature grid */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.feat {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feat svg { flex: 0 0 auto; width: 24px; height: 24px; stroke: var(--bronze-600); margin-top: 2px; }
.feat b {
  display: block;
  font-family: var(--font-condensed);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-display);
  margin-bottom: 4px;
}
.feat span { color: var(--text-muted); font-size: 15.5px; }

/* Parchment banner strips */
.banner {
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
.banner img { width: 100%; }

/* Stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.stat-tile {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.stat-tile b {
  display: block;
  font-family: var(--font-condensed);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bronze-700);
  line-height: 1.1;
}
.stat-tile span {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Spec card */
.spec-card {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.spec-card h3 { font-size: 22px; margin-bottom: var(--space-5); }
.spec { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.spec li { display: flex; gap: var(--space-5); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 16px; }
.spec li:last-child { border-bottom: none; }
.spec .k {
  flex: 0 0 150px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 3px;
}

/* FAQ */
.faq { max-width: 820px; }
.faq-item {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-5);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--text-body);
  padding: 15px 0;
}
.faq-item p { color: var(--text-muted); font-size: 15.5px; margin: 0 0 16px; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-inset);
  padding: var(--space-10) 0;
  font-size: 15px;
  color: var(--text-muted);
}
.site-footer .inner { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--text-body); text-decoration: none; }
.site-footer a:hover { color: var(--bronze-400); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .labor, .labor--flip { grid-template-columns: 1fr; gap: var(--space-6); }
  .labor--flip .labor__media { order: 0; }
  .feat-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .hero__panel {
    background: linear-gradient(rgba(246, 241, 231, 0.92), rgba(246, 241, 231, 0.92)), url('assets/images/hero-mobile.webp') right center / cover no-repeat;
    min-height: 0;
  }
  .hero__copy { max-width: none; padding: var(--space-10) var(--space-6); }
}

/* --------------------------------------------------------------------------
   Subpage hero (guides hub, plan builder, articles)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--border-subtle);
}
.page-hero__panel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 380px;
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.page-hero__panel--guides { background-image: url('/assets/images/banner-guides.webp'); }
.page-hero__panel--plans { background-image: url('/assets/images/banner-plans.webp'); }
.page-hero__copy {
  max-width: 480px;
  padding: var(--space-12) var(--space-10);
  color: var(--iron-900);
}
.page-hero__copy h1 { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 0; }
.page-hero__copy p { font-size: 17px; color: var(--iron-800); margin: 16px 0 0; max-width: 44ch; }

@media (max-width: 900px) {
  .page-hero__panel {
    min-height: 0;
    justify-content: flex-start;
  }
  .page-hero__panel--guides,
  .page-hero__panel--plans {
    background-image: linear-gradient(rgba(246, 241, 231, 0.92), rgba(246, 241, 231, 0.92)), var(--hero-img, none);
  }
  .page-hero__panel--guides { --hero-img: url('/assets/images/banner-guides-mobile.webp'); }
  .page-hero__panel--plans { --hero-img: url('/assets/images/banner-plans-mobile.webp'); }
  .page-hero__copy { max-width: none; padding: var(--space-10) var(--space-6); }
}

/* Breadcrumbs */
.crumbs {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-6);
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--bronze-700); }
.crumbs .sep { margin: 0 8px; color: var(--border-strong); }

/* --------------------------------------------------------------------------
   Guide cards (hub)
   -------------------------------------------------------------------------- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.guide-card {
  display: block;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.guide-card:hover { border-color: var(--bronze-600); transform: translateY(-2px); }
.guide-card .kicker { display: block; margin-bottom: 8px; }
.guide-card h3 { font-size: 19px; margin: 0 0 8px; }
.guide-card p { color: var(--text-muted); font-size: 15.5px; margin: 0; }
@media (max-width: 900px) { .guide-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Article layout (guides)
   -------------------------------------------------------------------------- */
.article { max-width: 780px; }
.article__meta {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 12px 0 0;
}
.article h1 { font-size: clamp(30px, 4vw, 42px); margin: 10px 0 0; }
.article .lede { font-size: 19px; color: var(--text-muted); margin: 20px 0 0; }
.article h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 44px 0 14px; }
.article h3 { font-size: 19px; margin: 32px 0 10px; }
.article p, .article li { color: var(--text-body); font-size: 17px; }
.article ul, .article ol { padding-left: 24px; margin: 0 0 16px; }
.article li { margin-bottom: 6px; }
.article img { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

.toc {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--bronze-600);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.toc b {
  display: block;
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 8px;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc a { color: var(--text-body); text-decoration: none; }
.toc a:hover { color: var(--bronze-700); text-decoration: underline; }

.table-wrap { overflow-x: auto; margin: 0 0 16px; }
.article table, .builder table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 15.5px;
}
.article th, .builder th {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.article td, .builder td { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.article tr:last-child td, .builder tr:last-child td { border-bottom: none; }

.callout {
  background: var(--accent-soft);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--bronze-600);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.callout b {
  display: block;
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 6px;
}
.callout p { font-size: 15.5px; margin: 0; color: var(--text-body); }
.callout p + p { margin-top: 8px; }

/* Download-plan card */
.dl-card {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}
.dl-card h3 { font-size: 18px; margin: 0 0 8px; }
.dl-card p { color: var(--text-muted); font-size: 15.5px; margin: 0 0 14px; }
.dl-card .row { display: flex; gap: 12px; flex-wrap: wrap; }

.disclaimer {
  font-size: 13.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
  margin-top: var(--space-10);
}

/* Article footer nav */
.article-next {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   Forms — calculator & plan builder
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field--tight { flex: 0 0 auto; }
.field > label, .field-label {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
input[type="text"], input[type="number"], select, textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 42px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--bronze-600);
  box-shadow: var(--focus-ring);
}
.btn--small { min-height: 36px; padding: 6px 14px; font-size: 14.5px; }
.btn--danger-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--oxide-600); }
.btn--danger-ghost:hover { border-color: var(--oxide-600); background: var(--surface-raised); color: var(--oxide-600); }

/* Calculator */
.calc-card {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}
.calc-card .calc-inputs { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-end; }
.calc-card .calc-inputs .field { flex: 1 1 120px; }
.calc-result {
  margin-top: var(--space-6);
  font-family: var(--font-condensed);
}
.calc-result .big {
  display: block;
  font-size: 40px;
  font-weight: 700;
  color: var(--bronze-700);
  line-height: 1.1;
}
.calc-result .label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Plan builder
   -------------------------------------------------------------------------- */
.builder-card {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.builder-card h2 { font-size: 20px; margin: 0 0 var(--space-5); }
.builder-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-5); }
.builder-toolbar .field { flex: 1 1 220px; max-width: 340px; }
.builder-toolbar .field--tight { flex: 0 0 auto; }

/* Segmented unit toggle */
.seg {
  display: inline-flex;
  width: max-content;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.seg__btn {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  min-height: 40px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg__btn:hover { color: var(--bronze-700); }
.seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.b-table-wrap { overflow-x: auto; }
.builder table { min-width: 960px; }
.builder th { padding: 10px 6px; }
.builder td { padding: 8px 6px; }
.builder td input, .builder td select { width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px; font-size: 15px; }
.builder td input[data-field="exercise"] { min-width: 160px; }
.builder select[data-field="muscleGroup"] { width: 118px; min-width: 118px; }
.builder td .num { width: 72px; min-width: 72px; }
.builder select[data-field="kg"] { width: 62px; min-width: 62px; }
.builder select[data-field="rpe"] { width: 62px; min-width: 62px; }
.builder td input[data-field="note"] { min-width: 120px; }
.builder td input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--bronze-600); }
.builder td.actions { white-space: nowrap; text-align: right; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--bronze-600); color: var(--bronze-700); }
.icon-btn--danger:hover { border-color: var(--oxide-600); color: var(--oxide-600); }

.builder-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-5); }
.builder-empty {
  color: var(--text-faint);
  font-size: 15.5px;
  padding: var(--space-6);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.plan-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.plan-tab {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.plan-tab:hover { border-color: var(--bronze-600); color: var(--bronze-700); }
.plan-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-5) 52px;
  color: var(--text-muted);
  font-size: 16px;
}
.steps li::before {
  content: counter(step, upper-roman);
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bronze-700);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
}
.steps li b { color: var(--text-display); }

/* --------------------------------------------------------------------------
   Mobile navigation (CSS-only hamburger — no JS, CSP-safe)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-header__inner { gap: 12px; }
  .wordmark { gap: 9px; }
  .wordmark img { width: 30px; height: 30px; }
  .wordmark span { font-size: 18px; }
  .header-cta { margin-left: auto; font-size: 15px; padding: 9px 16px; }
}

@media (max-width: 480px) {
  /* icon-only App Store button so wordmark + burger fit */
  .header-cta { font-size: 0; gap: 0; padding: 10px 13px; }
  .header-cta .icon { width: 20px; height: 20px; }
}

@media (max-width: 900px) {

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 11px;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--iron-800);
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    padding: 4px 0 8px;
  }
  .site-nav a {
    padding: 13px var(--space-6);
    font-size: 16px;
    border-top: 1px solid var(--border-subtle);
  }
  .site-nav a:first-child { border-top: none; }

  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}