/* Earful marketing site. Everything references design/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--weight-text);
  font-size: var(--step-body);
  line-height: var(--leading-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-weight: var(--weight-display); letter-spacing: var(--tracking-head); line-height: var(--leading-head); text-wrap: balance; }
p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--magenta); color: var(--black); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: var(--space-2); background: var(--action); color: var(--action-ink); padding: var(--space-2) var(--space-4); z-index: 10; }

/* Grid: one pair of outer margins, twelve columns */
.grid, .hero-stage, .versus-intro, .versus-pair, .how-intro, .replies, .count, .plans-row, .faq-head, .faq-band, .close, .foot-cols, .page-head, .article {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.5rem);
  padding-inline: var(--gutter);
}

/* Buttons: flat pills, one fill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.75rem;
  border: 0; border-radius: var(--radius-pill);
  background: var(--action); color: var(--action-ink);
  font: inherit; font-weight: var(--weight-strong); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.btn:hover { background: var(--action-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-small { min-height: 2.75rem; padding: 0 1.25rem; font-size: var(--step-small); }
.btn-light { background: var(--pink-100); color: var(--black); }
.btn-light:hover { background: var(--white); }
.btn-block { width: 100%; }

/* Bar */
.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--space-4) var(--gutter);
  background: var(--bar-bg, var(--bg)); color: var(--bar-ink, var(--ink));
}
.wordmark { font-weight: var(--weight-display); font-size: 1.75rem; letter-spacing: -0.04em; text-decoration: none; line-height: 1; justify-self: start; }
.bar-links { display: flex; gap: var(--space-6); font-weight: var(--weight-strong); font-size: var(--step-small); }
.bar-links a { text-decoration: none; padding: var(--space-2) 0; }
.bar-links a:hover { text-decoration: underline; }
.bar .btn { justify-self: end; }
body.home { --bar-bg: var(--field-pink); --bar-ink: var(--field-pink-ink); }

/* Hero: shouted headline, rising picture */
.hero {
  background: var(--field-pink); color: var(--field-pink-ink);
  height: calc(100svh - 4.75rem); min-height: 40rem;
  display: flex; flex-direction: column; overflow: hidden;
}
.hero-title {
  font-size: var(--step-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  text-align: center; padding: clamp(1.5rem, 4vh, 3rem) var(--gutter) 0; position: relative; z-index: 1;
}
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line > span { display: block; animation: rise var(--dur-slow) var(--ease-out) both; }
.line + .line > span { animation-delay: 110ms; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero-stage { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: end; position: relative; }
.hero-sub { grid-column: 1 / 4; align-self: end; padding-bottom: var(--space-6); max-width: 22rem; animation: fade 600ms 500ms var(--ease-out) both; }
.hero-shot { grid-column: 5 / 9; grid-row: 1; margin: -1.2vw 0 0; align-self: stretch; overflow: hidden; }
.hero-shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; background: var(--surface); }
.hero-shell {
  grid-column: 9 / 11; grid-row: 1; align-self: start; margin-top: 6vh; margin-left: -3vw;
  width: clamp(9rem, 15vw, 15rem); aspect-ratio: 1; object-fit: cover; object-position: 50% 50%;
  border-radius: 50%; transform: rotate(-8deg);
  animation: sway 7s ease-in-out infinite alternate;
}
@keyframes sway { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(-3deg) translateY(-10px); } }
.hero-fact { grid-column: 10 / 13; grid-row: 1; align-self: end; justify-self: end; text-align: right; padding-bottom: var(--space-6); display: grid; gap: var(--space-4); justify-items: end; animation: fade 600ms 500ms var(--ease-out) both; }
.hero-fact strong { font-weight: var(--weight-strong); font-size: var(--step-lead); }
@keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Versus: two giant figures compared */
.versus { padding-top: var(--section-gap); overflow: hidden; }
.versus-intro h2 { grid-column: 1 / 6; font-size: var(--step-head); }
.versus-intro p { grid-column: 7 / 13; max-width: var(--measure); }
.versus-pair { margin-top: 12vh; }
.spec { margin: 0; }
.spec-ours { grid-column: 1 / 7; }
.spec-theirs { grid-column: 7 / 13; }
.spec { display: flex; flex-direction: column-reverse; }
.spec figcaption { font-weight: var(--weight-strong); margin-top: var(--space-4); font-size: var(--step-body); }
.spec-figure {
  font-size: var(--step-giant); font-weight: var(--weight-display); line-height: 0.8; letter-spacing: -0.06em;
  height: calc(var(--step-giant) * 0.66); overflow: hidden; white-space: nowrap;
}

/* How: accordion of tinted stages */
.how { padding-top: var(--section-gap); }
.how-intro { align-items: end; }
.how-intro h2 { grid-column: 1 / 6; font-size: var(--step-head); }
.how-intro p { grid-column: 7 / 12; }
.accordion { display: flex; height: 34rem; margin: var(--space-8) var(--gutter) 0; border-radius: var(--radius); overflow: hidden; }
.stage { position: relative; flex: 1 1 0; min-width: 0; background: var(--c); color: var(--i); transition: flex-grow var(--dur) var(--ease-out); }
.stage.is-open { flex-grow: 6; }
.stage-tab {
  position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-weight: var(--weight-display); font-size: var(--step-body); text-align: left;
  display: flex; align-items: flex-end; justify-content: center; padding: var(--space-5) 0;
}
.stage-tab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.stage-tab:hover span { text-decoration: underline; text-decoration-thickness: 3px; }
.stage-tab:focus-visible { outline-offset: -6px; }
.stage.is-open .stage-tab { display: none; }
.stage-body { display: none; height: 100%; padding: var(--space-6); grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-6); }
.stage.is-open .stage-body { display: grid; animation: fade var(--dur) var(--ease-out) both; }
.stage-text { display: flex; flex-direction: column; justify-content: space-between; }
.stage-text h3 { font-size: var(--step-lead); }
.stage-text p { max-width: 36ch; }
.stage-body img { align-self: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-small); background: var(--surface); }

/* Replies: pinned heading, passing rows */
.replies { background: var(--field-cyan); color: var(--field-cyan-ink); margin-top: var(--section-gap); padding-block: var(--section-gap); }
.replies-title { grid-column: 1 / 7; align-self: start; position: sticky; top: var(--space-6); font-size: var(--step-title); line-height: 0.92; letter-spacing: var(--tracking-display); }
.replies-rows { grid-column: 7 / 13; display: grid; gap: 7.5rem; }
.row h3 { font-size: var(--step-lead); margin-bottom: var(--space-5); }
.row-pair { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.row-flip .row-pair { grid-template-columns: minmax(0, 1fr) 13rem; }
.row-flip .row-pair img { order: 2; }
.row-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-small); background: var(--surface); }
.row-pair ul { display: grid; gap: 0.875rem; }
.row-pair li { padding-left: 1.25rem; position: relative; }
.row-pair li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }

/* Count: the live calculator */
.count { background: var(--field-dark); color: var(--field-dark-ink); padding-block: var(--section-gap); row-gap: var(--space-7); }
.count h2 { grid-column: 1 / 13; font-size: var(--step-head); }
.count-form { grid-column: 1 / 7; display: grid; gap: var(--space-6); align-content: start; }
.count-form legend, .count-n { font-weight: var(--weight-strong); margin-bottom: var(--space-3); display: block; }
.count-kind, .count-sites { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.count-kind legend, .count-sites legend { width: 100%; }
.count-form fieldset label {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
  border-radius: var(--radius-pill); background: #262626; color: var(--white); cursor: pointer; font-weight: 500;
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.count-form fieldset label:hover { transform: translateY(-2px); }
.count-form fieldset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.count-form fieldset label:has(input:checked) { background: var(--pink-100); color: var(--black); }
.count-form fieldset label:has(input[data-direct]:checked) { background: var(--cyan-100); }
.count-form fieldset label:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 3px; }
.count-n input {
  display: block; margin-top: var(--space-3); width: 8rem; min-height: 3.25rem; padding: 0 1rem;
  border: 0; border-radius: var(--radius-small); background: #262626; color: var(--white);
  font: inherit; font-size: var(--step-lead); font-weight: var(--weight-strong);
}
.count-out { grid-column: 8 / 13; display: grid; gap: var(--space-4); align-content: start; }
.count-profiles { font-size: var(--step-lead); font-weight: var(--weight-strong); }
.count-price { display: flex; flex-direction: column; margin-top: var(--space-5); font-size: var(--step-display); font-weight: var(--weight-display); line-height: 0.9; letter-spacing: var(--tracking-display); color: var(--pink-100); }
.count-per { display: block; font-size: var(--step-lead); letter-spacing: 0; line-height: 1.3; color: var(--field-dark-ink); font-weight: var(--weight-strong); margin-top: var(--space-3); }
.count-paths { max-width: 44ch; }

/* Plans that step up */
.plans { padding-top: var(--section-gap); }
.plans-row { align-items: end; row-gap: var(--space-2); column-gap: var(--space-2); }
/* In the flow, not over the cards: cards grow with their lists, so there's no fixed gap above the short ones */
.plans-title { padding: 0 var(--gutter) var(--space-6); max-width: 60%; font-size: var(--step-title); line-height: 0.95; letter-spacing: var(--tracking-display); }
.plan {
  grid-column: span 4; min-height: var(--h); display: flex; flex-direction: column;
  background: var(--c); color: var(--i); border-radius: var(--radius); overflow: hidden;
}
.plan h3 { font-size: var(--step-lead); padding: var(--space-6) var(--space-6) 0; }
.plan-price { font-size: var(--step-head); font-weight: var(--weight-display); letter-spacing: var(--tracking-head); line-height: 1.1; padding: 0 var(--space-6); }
.plan-price span { font-size: var(--step-body); letter-spacing: 0; font-weight: var(--weight-strong); }
.plan ul { padding: var(--space-5) var(--space-6) var(--space-6); display: grid; gap: var(--space-2); flex: 1; align-content: start; }
.plan-go {
  display: flex; align-items: center; min-height: 4rem; padding: 0 var(--space-6);
  background: color-mix(in srgb, var(--c) 78%, #000); color: inherit; font-weight: var(--weight-strong); text-decoration: none;
  transition: background-color var(--dur-fast);
}
.plan-go::after { content: '→'; margin-left: auto; transition: transform var(--dur-fast) var(--ease-out); }
.plan-go:hover { background: color-mix(in srgb, var(--c) 65%, #000); }
.plan-go:hover::after { transform: translateX(6px); }
.plans-more { padding: var(--space-5) var(--gutter) 0; max-width: calc(var(--measure) + 2 * var(--gutter)); }

/* FAQ: a band per question */
.faq { margin-top: var(--section-gap); }
.faq-head { background: var(--field-orange); color: var(--field-orange-ink); min-height: 44svh; align-items: end; padding-block: var(--space-7); }
.faq-head h2 { grid-column: 1 / 7; font-size: var(--step-title); line-height: 0.92; letter-spacing: var(--tracking-display); }
.faq-head img { grid-column: 8 / 13; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: rotate(3deg); border-radius: 4px; }
.faq-band { padding-block: 3.5rem; }
.faq-band:nth-child(odd) { background: var(--surface); }
.faq-band h3 { grid-column: 1 / 6; font-size: var(--step-lead); }
.faq-band p { grid-column: 7 / 13; max-width: var(--measure); }

/* Close: the first step, already open */
.close { background: var(--field-loud); color: var(--field-loud-ink); min-height: 72svh; align-items: center; padding-block: var(--space-8); }
.close-words { grid-column: 1 / 6; align-self: end; display: grid; gap: var(--space-5); }
.close-words h2 { font-size: var(--step-title); line-height: 0.92; letter-spacing: var(--tracking-display); }
.dialog {
  grid-column: 8 / 12; background: var(--white); color: var(--black); border-radius: var(--radius);
  padding: var(--space-6); display: grid; gap: var(--space-3); box-shadow: var(--shadow-float); /* taste-skill-ignore: the open dialog floats */
}
.dialog h3 { font-size: var(--step-lead); margin-bottom: var(--space-3); }
.dialog > label, .seg legend { font-weight: var(--weight-strong); font-size: var(--step-small); }
.dialog input[type='url'] {
  min-height: 3.25rem; padding: 0 1rem; border: 2px solid #d9d9d9; border-radius: var(--radius-small);
  font: inherit; background: var(--white); color: var(--black); width: 100%;
}
.dialog input[type='url']:focus { border-color: var(--black); outline: none; }
.seg { margin: var(--space-3) 0 var(--space-4); }
.seg legend { margin-bottom: var(--space-2); }
.seg-pill { display: flex; background: var(--grey-50); border-radius: var(--radius-pill); padding: 4px; }
.seg label { flex: 1; position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg span { display: flex; justify-content: center; align-items: center; min-height: 2.75rem; border-radius: var(--radius-pill); font-weight: var(--weight-strong); transition: background-color var(--dur-fast); }
.seg input:checked + span { background: var(--black); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 2px; }
.dialog .btn { background: var(--black); color: var(--white); }

/* Footer: the mark, built large */
.foot { background: var(--field-dark); color: var(--field-dark-ink); padding: var(--space-8) 0 var(--space-6); }
.foot-mark { display: flex; gap: 4px; align-items: flex-end; height: 34svh; min-height: 14rem; padding-inline: var(--gutter); }
.foot-mark span {
  flex: 1; height: var(--h); background: var(--c); color: var(--black); border-radius: var(--radius-small);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  font-weight: var(--weight-display); font-size: var(--step-giant); line-height: 0.78; letter-spacing: 0;
}
.foot-cols { margin-top: 3.5rem; row-gap: var(--space-6); }
.foot-cols > * { grid-column: span 3; display: grid; gap: var(--space-2); align-content: start; font-size: var(--step-small); }
.foot-cols h2 { font-size: var(--step-body); font-weight: var(--weight-strong); letter-spacing: 0; margin-bottom: var(--space-2); }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-credits { margin: var(--space-7) var(--gutter) 0; font-size: var(--step-small); color: #bdbdbd; max-width: 36rem; }
.foot-last { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--gutter) 0; font-size: var(--step-small); }

/* Inner pages: a field-coloured head, then the article on the grid */
.page-head { background: var(--head-bg, var(--field-cyan)); color: var(--head-ink, var(--field-cyan-ink)); padding-block: var(--space-9) var(--space-8); align-items: end; row-gap: var(--space-5); }
.page-head h1 { grid-column: 1 / 9; font-size: var(--step-title); line-height: 0.95; letter-spacing: var(--tracking-display); }
.page-head p { grid-column: 1 / 8; font-size: var(--step-lead); max-width: 40ch; }
.page-head img { grid-column: 10 / 13; grid-row: 1 / 3; align-self: center; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transform: rotate(-6deg); }
.article { padding-block: var(--space-9) var(--section-gap); row-gap: var(--space-8); }
.article:has(+ .article-tail) { padding-bottom: var(--space-8); }
.article-tail { padding-top: 0; }
main > .article:last-child { padding-bottom: var(--space-8); }
.article-aside { grid-column: 1 / 5; align-self: start; position: sticky; top: var(--space-6); display: grid; gap: var(--space-4); background: var(--surface); border-radius: var(--radius); padding: var(--space-6); }
.article-aside h2 { font-size: var(--step-lead); }
.article-aside ul { display: grid; gap: var(--space-2); }
.article-aside li::before { content: '→ '; font-weight: var(--weight-strong); }
.article-body { grid-column: 6 / 13; min-width: 0; display: grid; gap: var(--space-5); align-content: start; }
.article-body > p, .article-body > ol { max-width: var(--measure); }
.article-body h2 { font-size: var(--step-lead); margin-top: var(--space-7); }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: var(--step-lead); margin-top: var(--space-4); }
.article-body ol { margin: 0; padding-left: 1.5rem; display: grid; gap: var(--space-3); }
.article-body ul { display: grid; gap: var(--space-2); }
.article-body ul li { padding-left: 1.25rem; position: relative; }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--magenta); }
.article-body figure { margin: var(--space-3) 0; }
.article-body figure img { width: 100%; border-radius: var(--radius-small); background: var(--surface); }
.article-body figcaption { font-size: var(--step-small); color: var(--muted); margin-top: var(--space-2); }
.tool { display: grid; gap: var(--space-3); max-width: var(--measure); }
.tool label { font-weight: var(--weight-strong); font-size: var(--step-small); }
.tool input:not([type='radio']) {
  min-height: 3.25rem; padding: 0 1rem; border: 2px solid #d9d9d9; border-radius: var(--radius-small);
  font: inherit; background: var(--white); color: var(--black); width: 100%;
}
.tool input:not([type='radio']):focus { border-color: var(--black); outline: none; }
.tool textarea { padding: 0.75rem 1rem; border: 2px solid #d9d9d9; border-radius: var(--radius-small); font: inherit; background: var(--white); color: var(--black); width: 100%; resize: vertical; }
.tool textarea:focus { border-color: var(--black); outline: none; }
.tool .btn:disabled { opacity: 0.6; cursor: progress; }
.place-list { display: grid; gap: var(--space-2); max-width: var(--measure); }
.place-list:empty { display: none; }
.article-body .place-list li { padding-left: 0; }
.article-body .place-list li::before { content: none; }
.place { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; font-size: var(--step-small); color: var(--black); background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); cursor: pointer; }
.place strong { font-size: var(--step-body, 1rem); }
.place:hover, .place[aria-pressed='true'] { border-color: var(--black); }
.tool-alt { max-width: var(--measure); }
.tool-alt summary { cursor: pointer; font-weight: var(--weight-strong); margin-bottom: var(--space-3); }
.reply-out { display: grid; gap: var(--space-4); max-width: var(--measure); }
.reply-out[hidden] { display: none; }
.reply-out [data-o='reply'] { white-space: pre-wrap; background: var(--surface); border-radius: var(--radius); padding: var(--space-5) var(--space-6); }
.review-card { display: none; }
@media print {
  @page { size: A5; margin: 0; }
  body.print-card { background: var(--white); }
  body.print-card > :not(.review-card) { display: none !important; }
  body.print-card .review-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6mm; height: 209mm; padding: 12mm; text-align: center; color: var(--black); font-size: 14pt; }
  .review-card-ask { font-size: 28pt; font-weight: var(--weight-display, 900); line-height: 1.05; }
  .review-card-name { font-size: 18pt; font-weight: var(--weight-strong); }
  .review-card-name:empty { display: none; }
  .review-card img { width: 90mm; height: 90mm; }
  .review-card-thanks { color: var(--muted); }
}
.tool .btn { justify-self: start; background: var(--black); color: var(--white); }
.tool-error { color: var(--magenta); font-weight: var(--weight-strong); }
.tool-out { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.tool-out[hidden] { display: none; }
.tool-out img { background: var(--white); border-radius: var(--radius-small); }
.tool-out a[data-o='link'] { word-break: break-all; font-weight: var(--weight-strong); }
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.note { background: var(--field-pink); color: var(--field-pink-ink); border-radius: var(--radius); padding: var(--space-5) var(--space-6); }
.table-wrap { margin: var(--space-2) 0; overflow-x: auto; }
.table-wide table { min-width: 48rem; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
th, td { text-align: left; vertical-align: top; padding: 0.875rem var(--space-3); border-bottom: 2px solid var(--surface); }
thead th { background: var(--black); color: var(--white); font-weight: var(--weight-strong); }
thead th:first-child { border-radius: var(--radius-small) 0 0 0; }
thead th:last-child { border-radius: 0 var(--radius-small) 0 0; }
tbody th { font-weight: var(--weight-strong); }
td.yes { font-weight: var(--weight-strong); }
.cta-strip { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; background: var(--field-loud); color: var(--field-loud-ink); border-radius: var(--radius); padding: var(--space-7) var(--space-7); }
.cta-strip h2 { font-size: var(--step-head); line-height: 1; letter-spacing: var(--tracking-display); }

/* Entrances: only hidden when script is running, so nothing stays hidden without it */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--n, 0) * 80ms); }
.js [data-reveal].in > * { opacity: 1; transform: none; }

/* Without script the accordion is a stack, all open */
html:not(.js) .accordion { flex-direction: column; height: auto; }
html:not(.js) .stage-tab { display: none; }
html:not(.js) .stage-body { display: grid; }

@media (max-width: 900px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar-links { display: none; }
  .hero { min-height: auto; }
  .hero-title { font-size: 16vw; padding-top: var(--space-6); }
  .hero-stage { display: flex; flex-direction: column; align-items: stretch; padding-top: 0; position: relative; }
  .hero-shot { width: 68%; margin: var(--space-4) auto 0; order: 1; }
  .hero-shell { position: absolute; right: var(--gutter); top: 14vw; width: 26vw; margin: 0; }
  .hero-sub { order: 2; max-width: none; padding: var(--space-6) 0 var(--space-4); font-size: var(--step-lead); line-height: 1.35; }
  .hero-fact { order: 3; align-self: stretch; justify-self: stretch; justify-items: start; text-align: left; padding-bottom: var(--space-7); }

  .versus-intro, .how-intro { row-gap: var(--space-4); }
  .versus-intro h2, .versus-intro p, .how-intro h2, .how-intro p { grid-column: 1 / -1; }
  .versus-pair { margin-top: var(--space-8); row-gap: var(--space-5); padding-inline: 0; }
  .spec-ours, .spec-theirs { grid-column: 1 / -1; }
  .spec figcaption { padding-inline: var(--gutter); }
  .spec-figure { --step-giant: 40vw; padding: var(--space-5) var(--gutter) 0; height: calc(40vw * 0.66 + var(--space-5)); }
  .spec-theirs .spec-figure { background: var(--black); color: var(--white); }
  .spec-ours .spec-figure { background: var(--field-pink); color: var(--field-pink-ink); }

  .accordion { flex-direction: column; height: auto; }
  .stage { flex: none; }
  .stage-tab { position: static; min-height: 4rem; padding: 0 var(--space-5); justify-content: flex-start; align-items: center; }
  .stage-tab span { writing-mode: horizontal-tb; transform: none; }
  .stage-body { grid-template-columns: 1fr; padding: var(--space-5); }
  .stage-text { gap: var(--space-4); }

  .replies { row-gap: var(--space-7); }
  .replies-title { grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; background: var(--field-cyan); font-size: var(--step-head); padding-block: var(--space-3); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .replies-rows { grid-column: 1 / -1; gap: 4.5rem; }
  .row-pair, .row-flip .row-pair { grid-template-columns: 1fr; }
  .row-flip .row-pair img { order: 0; }
  .row-pair img { aspect-ratio: 4 / 3; object-position: top; }

  .count-form, .count-out { grid-column: 1 / -1; }

  .plans { padding-top: var(--section-gap); }
  .plans-title { max-width: none; }
  .plans-row { row-gap: var(--space-5); }
  .count-out { margin-top: var(--space-6); }
  .plan { grid-column: 1 / -1; min-height: 0; }

  .faq-head { min-height: 30svh; row-gap: var(--space-6); }
  .faq-head h2 { grid-column: 1 / -1; order: 2; }
  .faq-head img { grid-column: 1 / -1; order: 1; width: 86%; }
  .faq-band { padding-block: var(--space-6); row-gap: var(--space-3); }
  .faq-band h3, .faq-band p { grid-column: 1 / -1; }

  .close { min-height: 84svh; align-content: space-between; row-gap: var(--space-8); }
  .close-words { grid-column: 1 / -1; align-self: start; }
  .dialog { grid-column: 1 / -1; }
  .dialog .btn { min-height: 3.25rem; }

  .foot-mark { height: 22svh; min-height: 9rem; }
  .foot-mark span { font-size: 22vw; }
  .foot-cols > * { grid-column: span 6; }
  .foot-cols > .foot-contact { grid-column: 1 / -1; }

  .page-head { padding-block: var(--space-8) var(--space-7); }
  .page-head h1, .page-head p { grid-column: 1 / -1; }
  .page-head img { grid-column: 8 / 13; grid-row: auto; order: -1; width: 100%; }
  .article-aside, .article-body { grid-column: 1 / -1; position: static; }
  .cta-strip { padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js [data-reveal] > * { opacity: 1; transform: none; }
}