/* ARCFLOWS: the /cars landing page (short clips for car businesses).
   Builds on base.css. No tokens are redefined here; every colour, size and easing comes from there, and so does all
   of the shared chrome (header, menu, marks, dock, footer), which is not restyled here.
   Written phone-first: the base rules are the phone layout, wider windows add columns. */

/* ------------------------------------------------------------------ what this page does differently */

/* A reading page: the three registration marks that cross the column are off; the two in the margins stay. */
.marks i:nth-child(2), .marks i:nth-child(3), .marks i:nth-child(4) { display: none; }

/* ------------------------------------------------------------------ pieces the sections share */

/* a mono label with a short rule after it */
.cars-label { display: flex; align-items: center; gap: 14px; }
.cars-label::after { content: ''; width: clamp(40px, 6vw, 96px); height: 1px; background: var(--line-strong); }

/* the label rail: a narrow left column for a mono label, content on the right. Stacks on phones. */
.cars-split { display: grid; gap: 16px; }
@media (min-width: 721px) {
  .cars-split { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gutter); align-items: baseline; }
  .cars-split--top { align-items: start; }
}

/* a section's opening: label, heading, optional one-line lede */
.sec-head { display: grid; gap: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(32px, 4.4vw, 64px); max-width: 60rem; }
.sec-head .h2 { max-width: 16em; }
.sec-head__lede { color: var(--muted); max-width: 44ch; }
.sec-head--rail { margin-bottom: 0; }

.section { padding-block: clamp(72px, 10vw, 150px); }

/* ------------------------------------------------------------------ 1. hero: words and one button */

.hero { padding: calc(var(--header-h) + clamp(48px, 9vh, 120px)) 0 clamp(56px, 8vw, 110px); }
.hero__inner { display: grid; gap: clamp(20px, 2.8vw, 34px); }
.hero .h1 { max-width: 13em; }
.hero__lede { max-width: 44ch; }
.hero__actions { display: grid; gap: 14px; justify-items: start; margin-top: clamp(4px, 1vw, 12px); }
.hero__note { color: var(--muted); font-size: var(--t-small); max-width: 40ch; }
/* the hero button's label is a whole sentence: on a phone it wraps inside the pill instead of widening the page */
@media (max-width: 600px) {
  .hero .btn { width: 100%; white-space: normal; text-align: center; padding-block: 12px; line-height: 1.35; }
  .hero__actions { justify-items: stretch; }
  .hero__note { text-align: center; max-width: none; }
}

/* ------------------------------------------------------------------ 2. who it's for: one line between two rules */

.who { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(22px, 3vw, 36px); }
.who__line { font-size: var(--t-lede); line-height: 1.5; color: var(--paper); max-width: 52ch; }

/* ------------------------------------------------------------------ 3. how it works: four numbered steps */

.steps-list { counter-reset: step; display: grid; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 8px; border-top: 1px solid var(--line); padding-block: clamp(22px, 2.6vw, 36px); }
.steps-list li::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; padding-top: .35em; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; color: var(--accent); }
.steps-list .h3 { max-width: 14em; }
.steps-list p { margin-top: 10px; color: var(--muted); max-width: 40ch; }
@media (min-width: 721px) {
  .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 1101px) {
  .steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-list li { display: block; padding-top: clamp(22px, 2.6vw, 36px); }
  .steps-list li::before { display: block; margin-bottom: clamp(28px, 3.6vw, 56px); padding-top: 0; }
}

/* ------------------------------------------------------------------ 4. built for car businesses: a checklist with small line icons */

.check-list { display: grid; }
.check-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; align-items: start; border-top: 1px solid var(--line); padding-block: clamp(18px, 2.2vw, 28px); }
.check-list__icon { width: 24px; height: 24px; margin-top: .1em; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.check-list p { color: var(--muted); max-width: 44ch; }
.check-list strong { color: var(--paper); font-weight: 500; }
@media (min-width: 721px) {
  .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}

/* ------------------------------------------------------------------ 5. sample clips: three 9:16 players */

.clips-grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.clip { display: grid; gap: 12px; width: 100%; max-width: 400px; margin-inline: auto; }
.clip__video { width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; object-fit: cover; }
.clip__video:focus-visible { outline-offset: 4px; }
.clip figcaption { padding-inline: 2px; }
@media (min-width: 721px) {
  .clips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clip { max-width: none; margin-inline: 0; }
}

.clips-more { margin-top: clamp(32px, 4vw, 56px); color: var(--muted); font-size: var(--t-small); }
.clips-more .link { display: inline-block; padding: 10px 2px; }

/* ------------------------------------------------------------------ 6. pricing: three rows on hairlines */

.price-list { display: grid; }
.price-row { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-block: clamp(26px, 3.2vw, 44px); }
.price-row__step span { color: var(--accent); }
.price-row__head { display: grid; gap: 8px; }
.price-row__head .h3 { max-width: 16em; }
.price-row__amount { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--paper); }
.price-row__per { font-size: .42em; letter-spacing: 0; color: var(--muted); margin-left: .25em; vertical-align: .32em; }
.price-row__body { display: grid; gap: 12px; color: var(--muted); max-width: 46ch; }
.price-note { margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--line); padding-top: clamp(22px, 2.6vw, 36px); font-size: var(--t-lede); line-height: 1.5; color: var(--paper); max-width: 40ch; }
@media (min-width: 721px) {
  .price-row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gutter); }
  .price-row__step { padding-top: .3em; }
  .price-row__head { grid-column: 2; }
  .price-row__body { grid-column: 2; }
}
@media (min-width: 1101px) {
  .price-row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); }
  .price-row__head { grid-column: 2; }
  .price-row__body { grid-column: 3; padding-top: .3em; }
}

/* ------------------------------------------------------------------ 7. questions: native disclosure widgets, no script */

.faq-list { display: grid; border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: clamp(18px, 2.2vw, 26px) 0; cursor: pointer; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; color: var(--paper); border-radius: 4px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: none; width: 1.2em; text-align: center; font-family: var(--font-mono); font-size: 1rem; color: var(--faint); transition: transform .3s var(--ease), color .2s; }
.faq-item[open] summary::after { content: '–'; color: var(--accent); }
.faq-item summary:hover::after { color: var(--paper); }
.faq-item summary:focus-visible { outline-offset: 6px; }
.faq-item__body { padding: 0 0 clamp(18px, 2.2vw, 26px); }
.faq-item__body p { color: var(--muted); max-width: 54ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-item__body { animation: faq-in .35s var(--ease); }
}
@keyframes faq-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } }

/* ------------------------------------------------------------------ 8. start: the form, in a band with the site's cobalt wash */

.start { position: relative; border-top: 1px solid var(--line); padding-block: clamp(72px, 10vw, 150px); background: radial-gradient(120% 90% at 50% 100%, #16236B 0%, #0E1436 45%, #0B0D10 80%); }
.start__inner { display: grid; gap: clamp(32px, 4vw, 56px); }
.start__copy { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.start__copy .h2 { max-width: 13em; }
.start__lede { color: #B9C0CE; max-width: 40ch; }
@media (min-width: 901px) {
  .start__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gutter) * 2); align-items: start; }
}

.form { display: grid; gap: clamp(22px, 2.6vw, 32px); }
.form__fields { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; color: var(--paper); line-height: 1.4; }
.field__opt { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-left: 8px; }
/* 16px type in the fields: anything smaller and iPhones zoom the page when a field is tapped */
.field input[type="text"], .field input[type="email"] { width: 100%; min-height: 54px; padding: 0 16px; border-radius: 12px; background: rgba(11, 13, 16, .7); color: var(--paper); border: 1px solid var(--line-strong); font: inherit; font-size: 1rem; line-height: 1.3; -webkit-appearance: none; appearance: none; transition: border-color .2s, background-color .2s; }
.field input::placeholder { color: var(--faint); opacity: 1; }
.field input:hover { border-color: var(--paper); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); border-radius: 12px; }
.field input:user-invalid { border-color: #FF8A80; }
.field--check { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-top: 6px; }
.field--check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--accent-strong); cursor: pointer; }
.field--check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.field--check label { font-weight: 400; color: var(--paper); cursor: pointer; }
/* the honeypot: off the page for people (and for the tab order), present for the bots that fill every field */
.form__trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 600px) {
  .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .field--wide { grid-column: 1 / -1; }
}

.form__actions { display: grid; gap: 14px; justify-items: start; }
.form__actions .btn { min-width: 240px; }
.form__actions .btn:focus-visible { outline-color: var(--paper); }
.form__actions .btn:disabled { opacity: .55; cursor: not-allowed; }
.form__actions .btn:disabled::after { transform: none; }
.form__note { color: #B9C0CE; font-size: var(--t-small); max-width: 44ch; }
.form__alt { color: #B9C0CE; font-size: var(--t-small); }
.form__alt .link { display: inline-block; padding: 10px 2px; }
/* the status line is empty until the script has something to say */
.form__status { color: var(--paper); font-size: 1rem; max-width: 46ch; }
.form__status:empty { display: none; }
.form__status[data-state="err"], .form__status[data-state="off"] { padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(11, 13, 16, .6); }
.form__status[data-state="ok"] { font-size: var(--t-lede); line-height: 1.5; }
/* after a successful send the fields and the button go, the confirmation stays */
.form.is-sent .form__fields, .form.is-sent .btn, .form.is-sent .form__note { display: none; }
@media (max-width: 599px) {
  .form__actions { justify-items: stretch; }
  .form__actions .btn { width: 100%; }
  .form__note, .form__alt { text-align: center; max-width: none; }
}

/* ------------------------------------------------------------------ footer: this page's legal line, under the shared footer's base row */

.cars-legal { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; color: var(--faint); }
/* the dot follows each item, so a wrapped line ends with a dot rather than starting with one */
.cars-legal > *:not(:last-child)::after { content: '·'; margin: 0 10px; color: var(--faint); }
.cars-legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); transition: color .2s; }
.cars-legal a:hover { color: var(--accent); }
@media (max-width: 900px), (pointer: coarse) { .cars-legal a { min-height: 44px; } }

/* ------------------------------------------------------------------ forced colours (Windows High Contrast) */

@media (forced-colors: active) {
  .check-list__icon { stroke: CanvasText; }
  .field input[type="text"], .field input[type="email"] { border-color: ButtonText; }
  .faq-item summary::after { color: CanvasText; }
  .start { background: Canvas; }
}