/* ========================================================================
   stepkeep — coming-soon.css
   Coming-soon page: notify forms, hero tour with window chrome,
   already-working exports proof, numbered FAQ, and contained dispatch card.
   Split from css/components.css; load order in HTML preserves the cascade.
   ======================================================================== */

/* Hero tour video rises with the hero elements on load. */
html[data-anim='on'] .shot--hero {
  animation: hero-rise 0.8s var(--ease) 0.3s both;
}

/* --- Hero Tour Video with Window Chrome -----------------------------------
   Frames the CRM recording in realistic browser chrome with the signature
   "0 B uploaded" indicator and a clean external figure caption below.
   -------------------------------------------------------------------------- */

.shot--hero {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.shot--hero .shot__frame {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.shot--hero .shot__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  background: var(--paper-sunk);
  border-bottom: var(--border);
}

.shot--hero .shot__url {
  flex: 1;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot--hero .video__frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--paper-sunk);
}

.page-coming-soon .video__play {
  color: var(--on-marker);
}

.page-coming-soon .video__play:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

.video__caption-bar {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.5;
}

.page-coming-soon .video__label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.35rem;
}

.page-coming-soon .video__label::after {
  content: ' —';
  font-weight: 400;
  color: var(--slate);
}

.page-coming-soon .video__sub {
  color: var(--slate);
}

/* --- Trust Strip (Hero) ---------------------------------------------------
   The three claims as the ruled band the finished page closes its hero with
   (hero.css §"The three claims"): one rule across the top, three equal columns,
   nothing wrapped around them.

   There used to be a bordered, washed card here. It was doing three jobs at
   once — grouping, framing, and affording a click it never had — and the frame
   is the part that lied: a 1px border, a fill, a radius and a shadowless lift
   is the shape of a button, so the row read as something to press. The group is
   now the rule and the column grid, which say "these three belong together"
   without saying "click me".

   Two smaller corrections came with it. The row now spans the hero's own
   measure instead of hugging its text: the old fit-content box ended 156px to
   the right of the form and matched no edge on the page, while the headline,
   the band and the window below all share this width. And the tick is drawn
   bare, with no disc behind it — a circled check is a control's shape, and the
   check is legible without a second closed outline competing with the words.
   -------------------------------------------------------------------------- */

.page-coming-soon .trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-5);
  /* A new group: the claims are about the product, not about the form, so the
     gap above the rule is a step larger than the 12px inside the form and
     smaller than the 48px that opens the form. 24px on a phone, 32px on a
     laptop, where there is room to make the separation legible. */
  margin-top: clamp(var(--sp-5), 2.5vw, var(--sp-6));
  padding: var(--sp-4) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  max-width: none;
  font-size: var(--step--1);
}

.page-coming-soon .trust__item {
  align-items: flex-start;
  min-width: 0;
  font-weight: 500;
  color: var(--ink);
}

/* The tick is secondary text, not a second accent: three moss checks beside a
   marker-coloured headline would spend the page's one accent three more times.
   --slate keeps it subordinate by value (6.3:1 light, 7.8:1 dark) rather than by
   fading ink below the 3:1 a meaningful glyph needs. */
.page-coming-soon .trust__icon {
  /* Onto the first line's optical centre when a claim wraps; on one line this
     is where centring it would put it. */
  margin-top: 0.2rem;
  color: var(--slate);
}

/* --- Notify Form ----------------------------------------------------------
   One email field and one button on a single row, stacked on a phone.
   Surface background with high-contrast ink focus.
   -------------------------------------------------------------------------- */

.notify {
  display: grid;
  grid-template-columns: minmax(0, 22rem) auto;
  gap: var(--sp-3);
  align-items: stretch;
  margin-bottom: var(--sp-3);
  max-width: 44rem;
}

.notify__input {
  font: inherit;
  font-size: var(--step-0);
  color: var(--graphite);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  min-width: 0;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

/* Full opacity, because --slate at 0.8 lands on #7d837e over --surface: 3.81:1,
   under the 4.5:1 normal text needs. The label is visually hidden, so this
   placeholder is the only prompt the field visibly has. At full opacity it is
   6.00:1 on --surface in light and 6.47:1 in dark, and still far lighter than the
   --graphite an address is set in once typed. */
.notify__input::placeholder {
  color: var(--slate);
  opacity: 1;
}

.notify__input:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-color: var(--ink);
}

.notify__btn {
  white-space: nowrap;
}

/* The submit is a round trip, and a click that appears to do nothing for a moment
   reads as broken and invites a second one. notify.js marks the button busy the
   instant the submit is accepted, and hands it back if the list turns out to be
   unreachable. The global reduced-motion rule in base.css stops the spin; the
   dimming and the disabled state still read as "working". */
.notify__btn[aria-busy='true'] {
  opacity: 0.72;
}

.notify__btn[aria-busy='true']::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.55em;
  vertical-align: -0.08em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: notify-spin 0.7s linear infinite;
}

@keyframes notify-spin {
  to {
    transform: rotate(1turn);
  }
}

.notify__done {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: var(--border);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--ink);
}

.notify__error {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--border);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--clay);
}

.notify__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--step--1);
  color: var(--slate);
}

/* Consent. A real checkbox, unticked, with the whole label as its target — the
   affirmative act the law asks for, and the larger tap area a phone wants. It
   sits after the note on purpose: the note sells the promise, this states the
   terms. The link is underlined rather than coloured, because the palette spends
   colour on meaning (marker, moss, clay) and a policy link is none of those. */
.notify__consent {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--step--1);
  color: var(--slate);
}

.notify__check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
}

.notify__check input {
  /* Nudged onto the first line's baseline. The label carries the tap target, so
     the box does not have to be 44px on its own. */
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.05rem 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.notify__check input:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

.notify__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.notify__consent a:hover {
  color: var(--ink);
}

/* --- "Already Working" Exports Proof --------------------------------------
   Shows the three real document outputs (PDF, HTML, Markdown).
   Three cards across desktop, stacking gracefully on mobile.
   -------------------------------------------------------------------------- */

.coming-soon-exports {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.coming-soon-exports .export {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.coming-soon-exports .export:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.coming-soon-exports .export__shot {
  height: 200px;
  margin: 0 0 var(--sp-3);
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

.coming-soon-exports .export__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.coming-soon-exports .export__title {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.coming-soon-exports .export__body {
  font-size: var(--step--1);
  color: var(--slate);
  margin-bottom: var(--sp-3);
  line-height: 1.45;
}

.coming-soon-exports .export__meta {
  margin-top: auto;
  font-size: 0.76rem;
  color: var(--slate);
}

/* The download is the point of the card, so it sits under the filename rather
   than being the whole card: a reader can read the example and take the file
   without the two competing. It is left-aligned like the text above it. */
.coming-soon-exports .export__download {
  align-self: flex-start;
  margin-top: var(--sp-3);
}

/* --- Numbered Editorial FAQ -----------------------------------------------
   Numbered questions (01, 02, 03) in JetBrains Mono with clean rules.
   -------------------------------------------------------------------------- */

.page-coming-soon .faq {
  counter-reset: cs-faq;
  border-top: var(--border);
}

.page-coming-soon .faq__item {
  counter-increment: cs-faq;
  border-bottom: var(--border);
}

.page-coming-soon .faq__item summary {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.page-coming-soon .faq__item summary::-webkit-details-marker {
  display: none;
}

.page-coming-soon .faq__item summary::before {
  content: counter(cs-faq, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate);
}

.page-coming-soon .faq__item summary::after {
  content: '+';
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--slate);
  transition: transform 0.18s var(--ease);
}

.page-coming-soon .faq__item[open] summary::after {
  content: '–';
}

.page-coming-soon .faq__item summary:hover::after {
  color: var(--ink);
}

.page-coming-soon .faq__item p {
  padding-left: calc(2.25rem + var(--sp-3));
  padding-bottom: var(--sp-5);
  margin: 0;
  max-width: var(--measure);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--slate);
}

/* --- Closing Ask: Contained Dispatch Card ---------------------------------
   Replaces the full-bleed dark-ink / neon-mint band with a contained card on
   --surface. Fixes dark-mode palette inversion completely and keeps buttons
   unified in Ink.
   -------------------------------------------------------------------------- */

.page-coming-soon .cta {
  background: transparent;
  border-top: var(--border);
  padding-block: clamp(3rem, 6vw, var(--sp-8));
}

.cta__card {
  background: var(--surface);
  border: var(--border);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(2rem, 4vw, var(--sp-7));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, var(--sp-6));
  align-items: center;
}

.cta__eyebrow {
  margin-bottom: var(--sp-2);
}

.cta__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-2);
  color: var(--ink);
}

.cta__card .cta__body {
  margin: 0;
  color: var(--slate);
  font-size: var(--step-0);
  line-height: 1.45;
}

.cta__card .notify {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
  max-width: 100%;
}

/* --- Header Controls & Touch Targets -------------------------------------- */

.page-coming-soon .lang-switch {
  display: inline-flex;
}

.page-coming-soon .theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
}

.page-coming-soon .lang-switch > a {
  min-width: 2.75rem;
  height: 2.75rem;
}

.page-coming-soon .site-footer__inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.page-coming-soon .site-footer__nav {
  grid-template-columns: minmax(0, 1fr);
}

/* The SpacerrApps featured badge closes the footer, aligned under the legal
   column. The colophon sentence and the 234x54 picture together are wider than
   the base's content box, so the badge takes a line of its own; the auto start
   margin is what keeps it to the right rather than letting it fall back under
   the sentence. The picture carries its own background and corner radius, so
   the link only has to hold its size against the flex row. */
.page-coming-soon .site-footer__base {
  align-items: center;
}

.site-footer__badge {
  display: inline-flex;
  flex: none;
  margin-inline-start: auto;
  line-height: 0;
}

.site-footer__badge img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Responsive Adjustments ----------------------------------------------- */

@media (max-width: 62rem) {
  .coming-soon-exports {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta__card {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Three columns need 288px each before the longest claim wraps, which a
     62rem viewport no longer gives. Below it the band becomes a plain ruled
     list of three lines; 12px is enough to separate them once each is its own
     line, and no rule is drawn between them because the top rule already
     brackets the group. */
  .page-coming-soon .trust {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3) 0;
  }
}

@media (max-width: 44rem) {
  .notify,
  .cta__card .notify {
    grid-template-columns: minmax(0, 1fr);
  }

  .notify__btn {
    width: 100%;
  }

  .page-coming-soon .video__play {
    width: 3.5rem;
    height: 3.5rem;
  }

  .page-coming-soon .video__play svg {
    width: 20px;
    height: 20px;
  }

  .page-coming-soon .faq__item summary {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: var(--sp-2);
  }

  .page-coming-soon .faq__item p {
    padding-left: 0;
  }
}

@media (max-width: 36rem) {
  .shot--hero .shot__chrome .shot__url {
    display: none;
  }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  html[data-anim='on'] :is(.notify, .shot--hero, .cta__inner) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .page-coming-soon .hero::before,
  .page-coming-soon .hero::after {
    display: none !important;
  }

  .page-coming-soon .video__play {
    display: none !important;
  }
}