/* ==========================================================================
   Minted — Contact page styles (contact.html)
   Load after css/tokens.css, css/components.css and css/main.css.
   Option A (Carlo, Oct 14): hero (#schedule: the pitch, the form card #message, the session team, the assessment
   link) → What You'll Get (three cards) → FAQ → the closing call to action.
   Semantic tokens only. The mockup's raw values map to the nearest semantic token by value; where a translucent step
   of one is needed it's a color-mix() of that token, never a new primitive. Two primitives stay where no semantic role
   exists yet: --minted-green-700 (the "+" tile, as specified) and --minted-green-100 (the brand mark's lit cell, the
   "+", link hover); the calendar panel's carried-over glyph also keeps --minted-green-300. Roles the system lacks, so
   borrowed by value (README, Known debt): display accent words (--minted-text-label), the illustration fills, the
   tag pill and the form card's halo (--minted-bg-hover-wash, --minted-glow-200).
   The raised planes (.ask__card, .step, .win) take their recipe from main.css's family list.
   ========================================================================== */

html { scroll-behavior: smooth } /* #schedule / #message anchors */

.contact { position: relative }
.contact > :not(.grid-field) { position: relative; z-index: 1 }
.contact .accent { color: var(--minted-text-label) }

/* ============ A · Hero ============ */
.ask { max-width: 1320px; margin: 0 auto; padding: clamp(130px, 17vh, 180px) var(--minted-pad-x) clamp(72px, 10vh, 110px) }
.ask__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: start;
  grid-template-areas: "pitch side" "team side" "assess side"; grid-template-rows: auto auto 1fr;
}
.ask__pitch { grid-area: pitch; display: grid; gap: 26px; padding-top: 12px }
.ask__side { grid-area: side; display: grid; gap: var(--minted-space-3) }
.ask__team { grid-area: team; margin-top: 40px; display: grid; gap: 12px; justify-items: start }
.ask__assess { grid-area: assess; margin-top: 36px; display: grid; gap: 4px; justify-items: start }
.ask__title { font-family: var(--minted-font-display); font-weight: 800; font-stretch: 120%; font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase }
.ask__lede { max-width: 46ch; color: var(--minted-text-secondary); font-size: clamp(1.05rem, 1.4vw, 1.2rem) }
.ask__team-label { font-size: 0.66rem; letter-spacing: 0.2em }
.ask__assess-note { font-size: 0.92rem; color: var(--minted-text-faint) }

/* the session team: one labeled image (role="img"); 4:5 tiles, zero radius, a page-colored edge, overlapping */
.team { display: flex }
.team > * + * { margin-left: -10px }
.team__ava, .team__more {
  position: relative; width: 40px; height: 50px; flex: none; overflow: hidden; background-color: var(--minted-surface-raised);
  border: 2px solid var(--minted-bg-page); outline: 1px solid var(--minted-stroke-active); outline-offset: 0; box-shadow: 0 0 14px var(--minted-glow-200);
}
.team__img { width: 100%; height: 100%; object-fit: cover; display: block }
/* Josh's and Troy's portraits are square: a slight scale brings their faces to the 4:5 photos' scale */
.team__img--square { transform: scale(1.15); transform-origin: center 22% }
.team__more { display: grid; place-content: center; background-color: var(--minted-green-700); background-image: var(--minted-lit-face); color: var(--minted-green-100) }
.team__more svg { display: block }

/* the form card: a raised plane (amendment 01) with a faint green halo */
.ask__card { box-shadow: var(--minted-bevel), var(--minted-cast), 0 0 60px var(--minted-bg-hover-wash) } /* raised plane (main.css) + a faint halo */
.mform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--minted-space-3); padding: clamp(24px, 3vw, 44px); text-align: left }
.mform__head { grid-column: 1 / -1; display: grid; gap: 10px; margin-bottom: 10px }
.mform__title { font-family: var(--minted-font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase }
.mform__lede { max-width: 48ch; color: var(--minted-text-muted); font-size: 0.98rem }
.mform__actions { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: center; margin-top: 10px }
.mform__send { width: 100%; justify-content: space-between; gap: 14px; padding: 22px 24px; font-size: 0.85rem }
.mform__send-arrow { width: 36px; height: 36px; flex: none; display: grid; place-content: center; background-color: color-mix(in srgb, var(--minted-text-on-accent) 16%, transparent) }
.mform__send-arrow svg { display: block }
.mform__privacy { text-align: center; font-size: 0.85rem; line-height: 1.5; color: var(--minted-text-faint) }
.mform__privacy a { display: inline-block; padding: 12px 4px; margin: -12px -4px; color: var(--minted-text-label); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap }
.mform__privacy a:hover { color: var(--minted-green-100) }

/* ============ B · What You'll Get ============ */
.gets { border-top: var(--minted-border-hairline); background-color: color-mix(in srgb, var(--minted-bg-surface) 72%, transparent) }
.gets__inner { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vh, 130px) var(--minted-pad-x); display: grid; gap: clamp(36px, 5vh, 56px) }
.contact__h2 { max-width: 22ch; font-family: var(--minted-font-display); font-weight: 800; font-stretch: 118%; font-size: var(--minted-size-h2); line-height: 1.04; letter-spacing: -0.012em; text-transform: uppercase }

.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
/* each card is a raised plane holding a recessed illustration panel */
/* each card spans the row's two tracks (subgrid): the illustration panels share the first, so all three are as tall as
   the tallest, and the words share the second (Carlo, Oct 14) */
.step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding: 10px } /* raised plane: main.css */
.step--key { border-color: var(--minted-stroke-active); box-shadow: var(--minted-bevel), var(--minted-cast), 0 0 40px var(--minted-glow-100) }
/* the panel is never shorter than 4:3 of its width (cqi: the media's width) and grows to fit its window */
.step__media { position: relative; display: grid; container-type: inline-size }
.step__vis { position: relative; min-height: calc(100cqi * 3 / 4); display: grid; place-items: center; padding: 22px; overflow: hidden; background-color: var(--minted-bg-cell); border: var(--minted-border-hairline); box-shadow: var(--minted-press) }
.step__vis--cells {
  background-image: linear-gradient(to right, var(--minted-stroke-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--minted-stroke-grid) 1px, transparent 1px);
  background-size: calc(var(--minted-cell) / 2) calc(var(--minted-cell) / 2);
}
.step__vis--strong { background-color: var(--minted-bg-cell-strong) }
.step__vis--glow { background-color: var(--minted-bg-page); background-image: radial-gradient(ellipse at 50% 30%, var(--minted-glow-100), transparent 65%) }
/* the arrow between cards: centered on the panels, in the middle of the gap (the card's 1px edge, its 10px padding, half
   the 14px gap, and half the tile) */
.step__next {
  position: absolute; z-index: 2; top: 50%; right: calc(-1 * (1px + 10px + 7px + 24px)); transform: translateY(-50%); width: 48px; height: 48px;
  display: grid; place-content: center; background-color: var(--minted-action-primary-bg); color: var(--minted-text-on-accent);
  border: 4px solid var(--minted-bg-page); box-shadow: 0 0 24px var(--minted-glow-200);
}
.step__next svg { display: block }
.step__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 18px 26px }
.step__tag {
  padding: 7px 11px; background-color: var(--minted-bg-hover-wash); border: 1px solid var(--minted-glow-200);
  font-family: var(--minted-font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--minted-text-secondary);
}
.step__title { font-family: var(--minted-font-display); font-weight: 800; font-stretch: 115%; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase }
.step__text { max-width: 40ch; color: var(--minted-text-muted); font-size: 0.98rem; line-height: 1.55 }

/* the illustrations: decorative HTML (aria-hidden), a raised window inside each recessed panel */
.win { width: 100%; max-width: 330px } /* raised plane: main.css */
.win__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: var(--minted-border-hairline) }
.win__dots { display: flex; gap: 5px }
.win__dots span { width: 7px; height: 7px; background-color: var(--minted-stroke-divider) }
.win__title { font-family: var(--minted-font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--minted-text-secondary) }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background-color: var(--minted-bg-hover-wash); font-family: var(--minted-font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--minted-text-secondary) }
.chip i { width: 6px; height: 6px; background-color: var(--minted-stroke-active); box-shadow: 0 0 8px var(--minted-stroke-active) }
.mark { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px }
.mark i { width: 9px; height: 9px; background-color: var(--minted-stroke-active) }
.mark i.hi { background-color: var(--minted-green-100) }
.mark--lg { grid-template-columns: repeat(2, 12px); gap: 4px }
.mark--lg i { width: 12px; height: 12px }
/* 1 · the call */
.call { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px }
.call__tile { position: relative; aspect-ratio: 16 / 10; display: grid; place-content: center; overflow: hidden; background-color: var(--minted-surface-recessed); border: 1px solid var(--minted-stroke-grid); color: var(--minted-text-label) }
.call__tile--live { border-color: var(--minted-stroke-active); box-shadow: inset 0 0 0 1px var(--minted-stroke-active), 0 0 16px var(--minted-glow-100) }
.call__tile svg { display: block }
.call__second { opacity: 0.6 }
.call__name { position: absolute; left: 5px; bottom: 5px; padding: 2px 5px; background-color: var(--minted-scrim-200); font-family: var(--minted-font-mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--minted-text-secondary) }
.call__bars { position: absolute; top: 6px; right: 6px; height: 10px; display: flex; align-items: flex-end; gap: 2px }
.call__bars i { width: 2px; background-color: var(--minted-stroke-active) }
.call__bars i:nth-child(1) { height: 40% }
.call__bars i:nth-child(2) { height: 100% }
.call__bars i:nth-child(3) { height: 65% }
.call__bars i:nth-child(4) { height: 85% }
/* 2 · the ranking */
.rank { display: grid; gap: 8px; padding: 12px }
.rank__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; background-color: var(--minted-surface-recessed); border: 1px solid var(--minted-stroke-grid) }
.rank__row--top { background-color: var(--minted-bg-hover-wash); border-color: var(--minted-stroke-active) }
.rank__n { width: 20px; height: 20px; display: grid; place-content: center; background-color: var(--minted-stroke-active); font-family: var(--minted-font-mono); font-size: 0.6rem; font-weight: 700; color: var(--minted-text-on-accent) }
.rank__row:not(.rank__row--top) .rank__n { background-color: var(--minted-stroke-divider); color: var(--minted-text-secondary) }
.rank__meta { display: grid; gap: 5px }
.rank__label { font-family: var(--minted-font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--minted-text-secondary) }
.rank__bar { height: 5px; background-color: var(--minted-stroke-grid) }
.rank__fill { display: block; height: 100%; background-color: var(--minted-stroke-active) }
.rank__fill--1 { width: 92% }
.rank__fill--2 { width: 64%; opacity: 0.75 }
.rank__fill--3 { width: 38%; opacity: 0.5 }
/* 3 · the matrix */
.mx { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 12px 12px 6px }
.mx span { aspect-ratio: 1; background-color: var(--minted-bg-hover-wash) }
.mx .on { background-color: var(--minted-glow-300) }
.mx .hi { background-color: var(--minted-stroke-active); box-shadow: 0 0 10px var(--minted-glow-300) }
.kv { margin: 0 }
.kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--minted-stroke-grid) }
.kv dt { font-family: var(--minted-font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--minted-text-faint) }
.kv dd { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--minted-text-primary) }

/* ============ C · FAQ (the shared faq__ component, in sentence case, with a recessed icon) ============ */
.faqs { border-top: var(--minted-border-hairline) }
.faqs__inner {
  max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vh, 130px) var(--minted-pad-x) clamp(56px, 8vh, 88px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start;
}
.faqs__head { display: grid; gap: 18px }
.faq__list--contact .faq__q { min-height: 44px; padding: 24px 0; font-stretch: 108%; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.3; letter-spacing: 0; text-transform: none }
.faq__list--contact .faq__a { padding: 0 64px 26px 0; max-width: 62ch; color: var(--minted-text-muted); font-size: 1rem; line-height: 1.6 }
.faq__list--contact div.faq__a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px }
/* the plus in a recessed square turns to a cross when open: only the SVG rotates, never the box */
.faq__icon { width: 36px; height: 36px; flex: none; display: grid; place-content: center; background-color: var(--minted-surface-recessed); background-image: var(--minted-recessed-face); border: var(--minted-border-hairline); box-shadow: var(--minted-press); color: var(--minted-stroke-active) }
.faq__icon svg { display: block; transition: transform var(--minted-dur-fast) var(--minted-ease-state) }
.faq__item[open] .faq__icon { border-color: var(--minted-stroke-active) }
.faq__item[open] .faq__icon svg { transform: rotate(45deg) }

/* ============ D · Closing call to action ============ */
.closer {
  width: calc(min(100%, 1320px) - 2 * var(--minted-pad-x)); margin: 0 auto clamp(64px, 9vh, 100px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  background-color: var(--minted-surface-raised); background-image: linear-gradient(110deg, var(--minted-glow-100), transparent 60%), var(--minted-lit-face);
  border: 1px solid var(--minted-stroke-active); box-shadow: var(--minted-bevel), var(--minted-cast), 0 0 50px var(--minted-glow-100);
}
.closer__lead { display: flex; align-items: center; gap: 18px }
.closer__title { font-family: var(--minted-font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase }
.closer__btn { gap: 14px; padding: 20px 28px; font-size: 0.8rem }
.closer__btn svg { display: block }

/* ============ The calendar panel, parked (#99) ============
   Built into the page only once links.sessionBookingUrl is set (data-config-show). Parked with no date to return
   (Carlo, Oct 14): bringing it back means redesigning its on-state first (README, Known debt). */
.ask__side > .book-lane__slot { border: var(--minted-border-hairline) }
/* restrained grid-cell language */
.book-lane__slot {
  position: relative; min-height: 380px; display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: clamp(28px, 3vw, 48px); background-color: var(--minted-bg-cell);
  background-image: linear-gradient(to right, var(--minted-stroke-grid) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--minted-stroke-grid) 1px, transparent 1px);
  background-size: var(--minted-cell) var(--minted-cell);
}
.book-lane__slot-glyph { display: grid; grid-template-columns: repeat(3, 10px); gap: 4px }
.book-lane__slot-glyph i { width: 10px; height: 10px; background-color: var(--minted-glow-100) }
.book-lane__slot-glyph i.on { background: var(--minted-green-300) }
.book-lane__slot-glyph i.hi { background: var(--minted-green-100) }
.book-lane__slot-note { margin: 0; color: var(--minted-text-faint); font-size: var(--minted-size-note); text-align: center; max-width: 30ch; text-wrap: pretty }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .faq__icon svg { transition: none }
}

/* ============ Breakpoints ============ */
@media (max-width: 980px) {
  /* order: the pitch, the form card, the team, the assessment link (the DOM's order too, so focus follows it) */
  .ask__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pitch" "side" "team" "assess"; grid-template-rows: auto; row-gap: 36px }
  .ask__team, .ask__assess { margin-top: 0 }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 22px }
  .step__next { display: none }
  .step__vis { min-height: 0; padding: 32px 18px }
  .faqs__inner { grid-template-columns: minmax(0, 1fr) }
  .faq__list--contact .faq__a { padding-right: 0 }
  .closer__btn { width: 100%; justify-content: space-between }
  .book-lane__slot { min-height: 300px }
}
@media (max-width: 560px) {
  .mform__grid { grid-template-columns: minmax(0, 1fr) }
}

/* contact form (step 4): the spam trap stays off-screen and out of the tab order; the failure line
   uses the validation text color and takes focus when it appears */
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.form-error { margin: 0; color: var(--minted-field-error-text); font-size: 0.95rem; line-height: 1.5 }
.form-error:focus-visible { outline: var(--minted-focus-ring); outline-offset: 2px }
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px }
.form-error a:focus-visible { outline: var(--minted-focus-ring); outline-offset: 2px }
/* the form's spoken status (sending, sent): present from page load so screen readers announce changes */
.mform__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }