/* GPUVault - components for the model-first pages (category, model, and the
   rebuilt homepage sections). Loads after v2.css and reuses its tokens:
   --amber, --panel, --line, --text-2, --radius, --ease-out, --pad-x. */

/* ── Nav: "What Are You Working On?" mega dropdown ───────────────────────── */
/* v2.css leaves .nav-links at the flex default of align-items:stretch. The plain
   <a> links stretch and centre their own text, but the dropdown's <button> sits
   inside a wrapper div and lands 5px high. Centre both explicitly. */
.nav-links { align-items: center; }
.nav-mega-wrap { position: relative; display: flex; align-items: center; }
.nav-mega-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; color: var(--text-2);
  font: 500 14.5px/1 'Sora', system-ui, sans-serif;
  padding: 10px 14px; border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.nav-mega-btn:hover, .nav-mega-btn[aria-expanded="true"] { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav-mega-btn .caret { width: .7em; height: .7em; transition: transform .25s var(--ease-out); }
.nav-mega-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.mega[hidden] { display: none; }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  z-index: 120; width: min(760px, calc(100vw - 40px));
}
.mega-inner {
  background: rgba(22, 21, 56, .97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 30px 80px var(--shadow);
  padding: 16px;
}
.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.mega-item {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  padding: 12px; border-radius: 12px; color: var(--text);
  transition: background-color .2s;
}
.mega-item:hover { background: rgba(245, 166, 35, .1); color: var(--text); }
.mega-item .icon {
  grid-row: span 2; width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
  color: var(--amber); background: rgba(245, 166, 35, .14);
  border: 1px solid rgba(245, 166, 35, .25); border-radius: 10px;
}
.mega-name { font-weight: 600; font-size: 14.5px; }
.mega-blurb { color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.mega-all {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 0 4px 12px; font-weight: 600; font-size: 14px; min-height: 40px;
}
@media (max-width: 700px) { .mega-grid { grid-template-columns: 1fr; } }
.nav-mobile a.sub { padding-left: 28px; font-size: 13.5px; color: var(--text-3); }

/* ── Page shell ──────────────────────────────────────────────────────────── */
.page { padding-top: 96px; }
.page-hero {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(28px, 6vh, 60px) var(--pad-x) clamp(20px, 4vh, 40px);
}
.page-hero h1 {
  font-size: clamp(34px, 5vw, 64px); font-weight: 700;
  line-height: 1.06; letter-spacing: -.02em;
  margin: 8px 0 18px; max-width: 18ch;
}
.page-sub { color: var(--text-2); font-size: clamp(16px, 1.35vw, 19px); max-width: 60ch; }
.model-hero .hero-ctas { margin-top: 30px; margin-bottom: 0; }

/* ── Photographic page hero (category pages) ─────────────────────────────── */
.page-hero.has-img {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: none; width: 100%;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 10vh, 104px) 0 clamp(46px, 7vh, 76px);
}
.page-hero-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.page-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%;
  display: block;
}
/* Copy sits left, subject sits right in every shot, so the scrim is weighted left.
   Kept only as heavy as the text needs - the point of the photograph is to be seen.
   The last vertical stop is opaque so the band blends into the page instead of
   ending on a visible cut. */
.page-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 14, 42, .93) 0%, rgba(15, 14, 42, .74) 38%, rgba(15, 14, 42, .3) 72%, rgba(15, 14, 42, .22) 100%),
    linear-gradient(180deg, rgba(15, 14, 42, .75) 0%, rgba(15, 14, 42, .14) 30%, rgba(15, 14, 42, .5) 76%, #0F0E2A 100%);
}
.page-hero.has-img h1 { text-shadow: 0 2px 30px rgba(6, 5, 24, .5); }
@media (max-width: 760px) {
  .page-hero-bg img { object-position: 72% 45%; }
  .page-hero-bg::after {
    background:
      linear-gradient(90deg, rgba(15, 14, 42, .94) 0%, rgba(15, 14, 42, .8) 60%, rgba(15, 14, 42, .72) 100%),
      linear-gradient(180deg, rgba(15, 14, 42, .8) 0%, rgba(15, 14, 42, .5) 40%, rgba(15, 14, 42, .92) 100%);
  }
}

/* ── Image + copy band ───────────────────────────────────────────────────── */
.imgband {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 52px); align-items: center;
  padding: clamp(22px, 3vw, 34px); overflow: hidden;
}
.imgband-media { border-radius: 14px; overflow: hidden; height: 100%; min-height: 260px; }
.imgband-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgband-body h2 {
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.12; margin-bottom: 20px; max-width: 18ch;
}
.imgband-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.imgband-points li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.imgband-points .icon {
  width: 38px; height: 38px; padding: 9px; box-sizing: border-box; margin-top: 1px;
  color: var(--amber); background: rgba(245, 166, 35, .14);
  border: 1px solid rgba(245, 166, 35, .25); border-radius: 11px;
}
.imgband-points span { color: var(--text-3); font-size: 14.5px; line-height: 1.55; }
.imgband-points strong { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .imgband { grid-template-columns: 1fr; }
  .imgband-media { min-height: 200px; max-height: 240px; }
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--amber-hover); }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { color: var(--text-2); }

/* ── Trust strip: inline stats, hairline dividers, no cards ──────────────── */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 clamp(16px, 2.4vw, 30px);
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 14px;
}
.trust > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.trust > span + span { padding-left: clamp(16px, 2.4vw, 30px); border-left: 1px solid var(--line); }
.trust .icon { color: var(--amber); }
@media (max-width: 620px) {
  .trust { gap: 0 14px; }
  .trust > span + span { padding-left: 14px; }
}

/* ── Category grid (/working-on/) ────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px; color: var(--text); min-height: 200px;
  transition: transform .5s var(--ease-out), border-color .3s, box-shadow .4s;
  will-change: transform;
}
.cat-card:hover { border-color: rgba(245, 166, 35, .4); box-shadow: 0 24px 60px var(--shadow); color: var(--text); }
.cat-card .icon {
  width: 46px; height: 46px; padding: 11px; box-sizing: border-box;
  color: var(--amber); margin-bottom: 10px;
  background: rgba(245, 166, 35, .15); border: 1px solid rgba(245, 166, 35, .25);
  border-radius: 13px;
}
.cat-card strong { font-size: 18px; font-weight: 700; }
.cat-card .desc { color: var(--text-2); font-size: 14px; }
.cat-count { margin-top: auto; padding-top: 12px; color: var(--amber); font-size: 13px; font-weight: 600; }
@media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } .cat-card { min-height: 0; } }

.nudge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: clamp(22px, 3vw, 34px);
}
.nudge p { color: var(--text-2); max-width: 52ch; margin: 0; }

/* ── Task strip (category pages) ─────────────────────────────────────────── */
.task-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.task {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 52px 22px 22px; color: var(--text);
  transition: border-color .3s, transform .4s var(--ease-out), background-color .3s;
}
.task:hover { border-color: rgba(245, 166, 35, .45); color: var(--text); transform: translateY(-3px); }
.task strong { font-size: 16.5px; font-weight: 700; }
.task span { color: var(--text-3); font-size: 14px; }
.task-go {
  position: absolute; right: 20px; top: 22px;
  color: var(--amber); opacity: .5;
  transition: transform .35s var(--ease-out), opacity .3s;
}
.task:hover .task-go { opacity: 1; transform: translateX(4px); }
.task-go .icon { width: 20px; height: 20px; }
@media (max-width: 900px) { .task-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .task-strip { grid-template-columns: 1fr; } }

/* ── Model cards ─────────────────────────────────────────────────────────── */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mgrid.mgrid-9 { grid-template-columns: repeat(3, 1fr); }
.mcard {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 24px; color: var(--text); overflow: hidden;
  transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s;
}
.mcard:hover { border-color: rgba(245, 166, 35, .42); color: var(--text); transform: translateY(-3px); box-shadow: 0 20px 50px var(--shadow); }
.mtag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: var(--amber); background: rgba(245, 166, 35, .12); border: 1px solid rgba(245, 166, 35, .3);
}
.mtag-fastest { color: #6ee7a0; background: rgba(110, 231, 160, .1); border-color: rgba(110, 231, 160, .3); }
.mtag-best-quality { color: #a9b6ff; background: rgba(169, 182, 255, .1); border-color: rgba(169, 182, 255, .3); }
.mname { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.mdesc { color: var(--text-2); font-size: 14px; flex: 1; }
.mmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line);
}
.mprice { color: var(--amber); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mtime { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13px; }
.mtime .icon { width: 14px; height: 14px; }
@media (max-width: 1000px) { .mgrid, .mgrid.mgrid-9 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mgrid, .mgrid.mgrid-9 { grid-template-columns: 1fr; } }

/* ── Comparison table ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cmp, .facts-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td, .facts-table th, .facts-table td {
  text-align: left; padding: 15px 18px; font-size: 14.5px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.cmp thead th {
  color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  white-space: nowrap;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td,
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover { background: rgba(255, 255, 255, .03); }
.cmp tbody th { font-weight: 700; white-space: nowrap; }
.cmp td { color: var(--text-2); }
.num-cell { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate { display: inline-block; font-size: 13.5px; white-space: nowrap; }
.rate-excellent, .rate-very-fast { color: #6ee7a0; }
.rate-very-good, .rate-fast { color: var(--text); }
.rate-good, .rate-moderate { color: var(--text-2); }
.rate-slow { color: var(--text-3); }
.table-note { color: var(--text-3); font-size: 13.5px; margin-top: 14px; max-width: 70ch; }

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose p { color: var(--text-2); font-size: clamp(15.5px, 1.2vw, 17px); margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }

/* ── What you can make ───────────────────────────────────────────────────── */
.make-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.make {
  position: relative; padding: 22px 20px 20px 20px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(150deg, rgba(62, 74, 165, .16), rgba(30, 29, 58, .5));
  color: var(--text-2); font-size: 14px; line-height: 1.5;
  min-height: 108px; display: flex; align-items: flex-end;
  transition: border-color .3s, transform .4s var(--ease-out);
}
.make:hover { border-color: rgba(245, 166, 35, .35); transform: translateY(-2px); }
.make-q {
  position: absolute; top: 2px; left: 12px;
  font-size: 54px; line-height: 1; font-weight: 800; color: rgba(245, 166, 35, .22);
}
.make-note { color: var(--text-3); font-size: 13.5px; margin-top: 16px; max-width: 70ch; }
@media (max-width: 1000px) { .make-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .make-grid { grid-template-columns: 1fr; } }

.pair-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pair { padding: 24px; }
.pair-label {
  display: block; color: var(--amber);
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px;
}
.pair-p { font-size: 15.5px; font-weight: 500; margin-bottom: 18px; }
.pair-r { color: var(--text-2); font-size: 14.5px; }
@media (max-width: 860px) { .pair-grid { grid-template-columns: 1fr; } }

/* ── Your setup ──────────────────────────────────────────────────────────── */
.setup { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 38px); }
.setup-gpu { display: block; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.setup-blurb { color: var(--text-2); font-size: 16px; margin-bottom: 18px; max-width: 52ch; }
.setup-stats {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 34px);
}
.setup-stats > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.setup-stats > div:last-child { border-bottom: 0; }
.setup-stats dt { color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 4px; }
.setup-stats dd { font-size: 15.5px; font-weight: 600; }
@media (max-width: 860px) {
  .setup { grid-template-columns: 1fr; }
  .setup-stats { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
}

/* ── Disclosures (Why this card, Model facts, FAQ) ───────────────────────── */
details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary .caret { flex: none; width: 18px; height: 18px; color: var(--amber); transition: transform .3s var(--ease-out); }
details[open] > summary .caret { transform: rotate(180deg); }

.why { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.why > summary { color: var(--amber); font-weight: 600; font-size: 14.5px; min-height: 40px; }
.why-body { padding-top: 10px; }
.why-body p { color: var(--text-3); font-size: 14.5px; max-width: 62ch; }

.facts {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 4px 22px;
}
.facts > summary { font-weight: 700; font-size: 16px; padding: 18px 0; }
.facts .table-wrap { border: 0; border-radius: 0; background: none; margin-bottom: 12px; }
.facts-table { min-width: 460px; }
.facts-table th { color: var(--text-3); font-weight: 500; width: 34%; white-space: nowrap; }
.facts-table td { color: var(--text-2); }

/* ── Cost calculator ─────────────────────────────────────────────────────── */
.calc { padding: clamp(24px, 3vw, 38px); max-width: 900px; }
.calc-input label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.calc-controls { display: flex; align-items: center; gap: 18px; }
.calc-range {
  flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--amber) var(--fill, 30%), rgba(255, 255, 255, .12) var(--fill, 30%));
  border-radius: 999px; cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--amber); border: 3px solid #1a1940;
  box-shadow: 0 2px 12px rgba(245, 166, 35, .5); cursor: grab;
}
.calc-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber); border: 3px solid #1a1940;
  box-shadow: 0 2px 12px rgba(245, 166, 35, .5); cursor: grab;
}
.calc-range:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.calc-num {
  width: 120px; flex: none; min-height: 46px; padding: 10px 14px;
  background: rgba(12, 11, 40, .6); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 12px;
  font: 600 15px 'Sora', system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.calc-num:focus { outline: none; border-color: rgba(245, 166, 35, .6); box-shadow: 0 0 0 3px rgba(245, 166, 35, .15); }

.calc-out {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  margin: 26px 0 16px; padding: 22px;
  border: 1px solid rgba(245, 166, 35, .28); border-radius: 14px;
  background: rgba(245, 166, 35, .06);
  font-size: clamp(17px, 2vw, 24px); font-variant-numeric: tabular-nums;
}
.calc-part b { font-weight: 700; }
.calc-part .calc-u { color: var(--text-2); font-size: .72em; font-weight: 400; }
.calc-sep { color: var(--text-3); }
.calc-money b { color: var(--amber); }
.calc-note { color: var(--text-3); font-size: 13.5px; max-width: 66ch; }
@media (max-width: 560px) {
  .calc-controls { flex-direction: column; align-items: stretch; gap: 14px; }
  .calc-num { width: 100%; }
}

/* ── Two ways to run it ──────────────────────────────────────────────────── */
.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.way { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); }
.way h3 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; letter-spacing: -.01em; }
.way p { color: var(--text-2); font-size: 15px; flex: 1; }
.way .btn { align-self: flex-start; margin-top: 4px; }
.way-note { color: var(--text-3); font-size: 13px; }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }

/* ── Usage proof ─────────────────────────────────────────────────────────── */
.proof {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 26px clamp(22px, 3vw, 34px);
  border-left: 3px solid var(--amber); border-radius: 4px;
  background: linear-gradient(90deg, rgba(245, 166, 35, .08), transparent 70%);
}
.proof strong {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.02em;
  color: var(--amber); font-variant-numeric: tabular-nums;
}
.proof span { color: var(--text-2); font-size: 16px; }

/* ── Provider strip ──────────────────────────────────────────────────────── */
.provider-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px;
  max-width: 1440px; margin: 0 auto;
  padding: 26px var(--pad-x) 40px;
  border-top: 1px solid var(--line);
}
.provider-strip p { color: var(--text-3); font-size: 14.5px; margin: 0; max-width: 70ch; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 900px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  padding: 22px 4px; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600;
  transition: color .2s;
}
.faq-item > summary:hover { color: var(--amber-hover); }
.faq-a { padding: 0 4px 24px; }
.faq-a p { color: var(--text-2); font-size: 15.5px; line-height: 1.7; max-width: 72ch; }

/* ── Homepage (v2) model-first sections ──────────────────────────────────── */
.ask { max-width: 860px; margin: 0 auto; }
.ask-form { display: flex; gap: 12px; align-items: stretch; }
.ask-input {
  flex: 1; min-width: 0; min-height: 64px; padding: 18px 22px;
  background: rgba(12, 11, 40, .72); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 16px;
  font: 400 clamp(15px, 1.5vw, 18px)/1.4 'Sora', system-ui, sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.ask-input::placeholder { color: var(--text-3); }
.ask-input:focus { outline: none; border-color: rgba(245, 166, 35, .65); box-shadow: 0 0 0 4px rgba(245, 166, 35, .14); }
.ask-form .btn { min-height: 64px; border-radius: 16px; padding-left: 30px; padding-right: 30px; white-space: nowrap; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ask-chips .chip { min-height: 42px; padding: 10px 20px; font-size: 14px; }
@media (max-width: 700px) {
  .ask-form { flex-direction: column; }
  .ask-form .btn { min-height: 54px; }
}

.hero-ask {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 92svh; text-align: center;
  padding: clamp(130px, 18vh, 190px) var(--pad-x) 70px;
  overflow: hidden;
}
.hero-ask .hero-inner { display: block; text-align: center; }
.hero-ask h1 {
  font-size: clamp(38px, 6vw, 82px); font-weight: 700;
  line-height: 1.03; letter-spacing: -.025em;
  margin: 0 auto 22px; max-width: 16ch;
}
/* text-wrap: balance evens the lines out so the last one is never a lone orphan word.
   The nbsp in "90 seconds" backs it up on browsers that do not support balancing, and
   the measure is wide enough that the sentence sets in three even lines rather than
   four ragged ones. Balance is the right algorithm here rather than pretty: this is a
   short block where every line should carry roughly the same weight. */
.hero-ask .hero-sub {
  color: var(--text-2); font-size: clamp(16px, 1.5vw, 20px);
  max-width: 68ch; margin: 0 auto 40px;
  text-wrap: balance;
}
.hero-ask .trust { justify-content: center; margin-top: 46px; }
/* v2.css scrims the hero from the left, which is right for left-aligned copy and
   wrong here. No left-side fade: the layout is centred, so the treatment is an even
   scrim (enough contrast for white text anywhere across the frame) plus a symmetric
   edge vignette. Deliberately not a centre-weighted radial - that darkens the photo
   exactly where the subject is and reads as a smudge behind the headline. */
.hero-ask .hero-bg::after {
  background:
    /* Balance the plate. Measured, the clip runs ~30 on the left to ~124 on the
       right, so a symmetric scrim still reads lopsided. This pulls the bright side
       down - the opposite bias to v2.css, which was built for left-aligned copy. */
    linear-gradient(90deg, transparent 0%, transparent 36%, rgba(15, 14, 42, .26) 70%, rgba(15, 14, 42, .42) 100%),
    linear-gradient(180deg, rgba(15, 14, 42, .8) 0%, rgba(15, 14, 42, .46) 28%, rgba(15, 14, 42, .52) 62%, rgba(15, 14, 42, .96) 97%),
    radial-gradient(125% 95% at 50% 50%, transparent 42%, rgba(15, 14, 42, .5) 100%);
}
/* v2.js tracks the pointer into --mx/--my; these are the resting values. v2.css
   defaults them to 60%/30%, which parks the amber glow off to the right of centred
   content. Centre it. */
.hero-ask { --mx: 50%; --my: 40%; }
.hero-ask h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber-dark) 0%, var(--amber) 40%, var(--amber-hover) 70%, #fff 115%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
/* Rotating verb. Every word sits in the same single-cell grid so nothing reflows
   mid-swap; JS measures each word and drives --rot-w, so the question mark eases
   across instead of snapping between "build" and "generate". */
.hero-ask h1 .rot {
  display: inline-grid;
  width: var(--rot-w, auto);
  transition: width .5s var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.hero-ask h1 .rot-w {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  /* Each word carries the gradient itself. Inherited from an ancestor it would be
     one clip across all four stacked words, and every hidden word would paint. */
  background: linear-gradient(100deg, var(--amber-dark) 0%, var(--amber) 40%, var(--amber-hover) 70%, #fff 115%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s ease-in-out infinite;
  /* The next word waits out most of the exit before arriving. Overlapping them
     fully reads as a smear; a short beat between reads as a deliberate swap. */
  opacity: 0; transform: translateY(.24em); filter: blur(6px);
  transition:
    opacity .3s ease .16s,
    transform .44s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) .16s,
    filter .3s ease .16s;
}
.hero-ask h1 .rot-w.is-in { opacity: 1; transform: none; filter: none; }
.hero-ask h1 .rot-w.is-out {
  opacity: 0; transform: translateY(-.24em); filter: blur(6px);
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ask h1 em, .hero-ask h1 .rot-w { animation: none; }
  .hero-ask h1 .rot { width: auto !important; transition: none; }
  .hero-ask h1 .rot-w { transition: none; }
}
@media (max-width: 860px) {
  .hero-ask { min-height: 0; padding-top: 118px; padding-bottom: 56px; }
  .hero-ask .trust { margin-top: 34px; }
}

/* Cost control block */
.cost-block {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(50px, 9vh, 110px) var(--pad-x);
}
.cost-inner {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 70px); align-items: center;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(245, 166, 35, .3); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(245, 166, 35, .09), rgba(30, 29, 58, .55) 55%);
}
.cost-inner h2 { font-size: clamp(28px, 3.2vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; max-width: 16ch; }
.cost-points { display: flex; flex-direction: column; gap: 14px; }
.cost-point {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: center;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(12, 11, 40, .4);
}
.cost-point .icon {
  width: 42px; height: 42px; padding: 10px; box-sizing: border-box;
  color: var(--amber); background: rgba(245, 166, 35, .14);
  border: 1px solid rgba(245, 166, 35, .25); border-radius: 12px;
}
.cost-point strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.cost-point span { color: var(--text-3); font-size: 13.5px; }
@media (max-width: 900px) { .cost-inner { grid-template-columns: 1fr; } }

/* Three-step "How it works", with step 2 given the most weight */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 36px); }
.step-n {
  font-size: 13px; font-weight: 700; letter-spacing: 2.4px; color: var(--text-3);
}
.step h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; letter-spacing: -.01em; }
.step p { color: var(--text-2); font-size: 15px; }
.step-key {
  border-color: rgba(245, 166, 35, .38);
  background: linear-gradient(150deg, rgba(245, 166, 35, .1), rgba(30, 29, 58, .6) 60%);
  box-shadow: 0 24px 60px var(--shadow);
}
.step-key .step-n { color: var(--amber); }
.step-key h3 { font-size: clamp(21px, 2.1vw, 28px); }
.step-key .step-flag {
  align-self: flex-start; margin-top: auto; padding-top: 12px;
  color: var(--amber); font-size: 13px; font-weight: 600;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .task, .mcard, .make, .cat-card, .task-go,
  .nav-mega-btn .caret, details > summary .caret { transition-duration: .01ms !important; }
}