/*
 * The app pages and their sections (components/App*.astro): /apps/<slug>/
 * (pages/apps/[slug].astro; today /apps/quix-lab/) and /product/quix-lab/
 * (pages/product/quix-lab.astro, the steps).
 *
 * Reused, not restyled here: the hero frame (.hero + corner brackets, css/hero.css), the
 * buttons (.btn--solid / --outline / --light, css/hero.css), the dither dividers between
 * the dark and light zones (.pw-divider--in / --out, css/product.css; as many as a page
 * needs) and the page's own header (.nav--page, css/nav.css). New here:
 *   hero            .app-hero (AppHero: centred H1, sub, one or two buttons); --compact
 *                   for a whole-sentence H1 (/product/quix-lab/)
 *   fades           .app-fade--in / --out: the first (hero → light zone) and last (light
 *                   zone → footer) transitions, a plain gradient instead of a divider;
 *                   the middle ones (/apps/quix-lab/) stay pixel dividers
 *   light zone      .app-light (#DADADA), sections .app-sec divided by full-width
 *                   hairlines, .app-h2
 *   dark zone       .app-dark: a band on the page's black between a divider out and a
 *                   divider in (/apps/quix-lab/)
 *   tutorials       .app-tut (AppTutorials): [NN] modules in a tab bar (.app-tut__tab)
 *                   over one framed player (.app-tut__player: the .app-tut__media frame,
 *                   --soon = no video yet, + the site's control bar from
 *                   css/video-player.css), text from .app-step__*. --dark: light on black
 *   steps           .app-step rows (AppSteps: black rule, [NN], pixel title | framed
 *                   video), .app-corner (orange squares on a frame), the WATCH THE DEMO
 *                   button
 *   plans           .app-plan--main (AppPricing: white card, --featured adds corners) /
 *                   --alt (outlined), .app-bullets; one column per plan (--plan-count);
 *                   --detailed (a card with the optional extras: .app-plan__meter,
 *                   __hosting, __includes; the button high, rows lined up across cards)
 *   questions       .app-faq (AppFaq: <details> accordion, + / −)
 *   sign-up         .app-signup__card, .app-form: not used on the website any more, but
 *                   store.quix.io copies this sheet (QuixStorefront tools/sync_site_theme.py)
 *                   and its /buy page uses them. Keep them.
 *   lightbox        .app-demo (<dialog>)
 */

.app-sec[id], #signup { scroll-margin-top: 16px; }
.app-light > .app-sec:last-child { padding-bottom: 170px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* The design darkens the hero photo more than the site default (layout.css, 0.55). */
.bg-layer::after { background: rgba(10, 10, 10, 0.68); }
.hero.app-hero { padding: 120px 38px 128px; text-align: center; }
.app-hero__content { display: flex; flex-direction: column; align-items: center; }
.app-hero__h1 {
  font-family: var(--h1-font);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: var(--h1-color);
  margin: 0 0 20px;
  text-wrap: balance;
}
.app-hero__sub {
  font: 400 clamp(18px, 1.75vw, 24px)/1.4 var(--font-sans);
  color: rgba(255, 255, 255, 0.92);
  max-width: 760px;
  margin: 0 0 40px;
  text-wrap: pretty;
}
/* An equal pair: each button as wide as the wider one. */
.app-hero__ctas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; }
.app-hero__ctas .btn { justify-content: center; min-height: 46px; padding-inline: 26px; }
/* Compact (/product/quix-lab/): the H1 is a whole sentence, so smaller type, less height */
.hero.app-hero--compact { padding: 96px 38px 104px; }
.app-hero--compact .app-hero__h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.16; max-width: 980px; }
.app-hero--compact .app-hero__sub { max-width: 700px; }
.btn.app-btn-glass {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── Light zone ──────────────────────────────────────────────────────────── */
/* #DADADA to match divider-2.png's solid edge (and the light end of the fades). The
   dividers overlap the zone by 64px at the top and bottom (css/product.css), hence the
   larger first/last padding; beside a fade, which overlaps nothing, the section keeps
   the usual padding (below). */
.app-light { position: relative; background: #DADADA; color: var(--black); }
.app-sec { padding: 110px 24px; }
.app-sec + .app-sec { border-top: 1px solid rgba(0, 0, 0, 0.14); }
.app-light > .app-sec:first-child { padding-top: 160px; }
.app-signup { padding-bottom: 170px; }

/* ── Dark zone ───────────────────────────────────────────────────────────── */
/* The page's own black. Between a divider out and a divider in, each of which leaves 64px
   of black in its slot beyond the dither, so the sections keep their usual padding. Each
   section styles its own light-on-black look (e.g. .app-tut--dark). */
.app-dark { position: relative; color: var(--white); }

/* ── Fades ───────────────────────────────────────────────────────────────── */
/* The first and last transitions (the middle ones, on /apps/quix-lab/, are the pixel
   dividers): a plain vertical gradient between the page's black and the light zone's
   #DADADA, 200px, eased (smoothstep stops) so neither end shows an edge.
   --in, hero → light zone: its top is transparent, not black, so the hero photo (faded
   out over 160px below the hero's bottom rule by AppHero's script) shows through while
   the grey comes up over it: one fade from the photo through black to grey, no black
   band. --out, light zone → footer: the same gradient running upwards; its transparent
   foot is the page's black, which the footer (the same black, no top rule) carries on.
   In normal flow and overlapping nothing, so the light zone's section beside a fade keeps
   the usual .app-sec padding. The tram lines (css/layout.css, difference blend) stay on
   top. */
.app-fade {
  height: 200px;
  background: linear-gradient(var(--fade-dir, to bottom),
    rgba(218, 218, 218, 0) 0%,
    rgba(218, 218, 218, 0.03) 10%,
    rgba(218, 218, 218, 0.16) 25%,
    rgba(218, 218, 218, 0.5) 50%,
    rgba(218, 218, 218, 0.84) 75%,
    rgba(218, 218, 218, 0.97) 90%,
    #DADADA 100%);
}
/* Grey at the top, the page's black at the foot (the gradient runs upwards; no transform). */
.app-fade--out { --fade-dir: to top; }
.app-fade--in + .app-light > .app-sec:first-child { padding-top: 110px; }
.app-light:has(+ .app-fade--out) > .app-sec:last-child { padding-bottom: 110px; }

.app-h2 {
  font: 500 clamp(32px, 3.6vw, 52px)/1.12 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--black);
  text-align: center;
  max-width: 820px;
  margin: 0 auto 80px;
  text-wrap: balance;
}
.app-steps .app-h2 { max-width: 800px; font-size: clamp(32px, 3.4vw, 48px); text-wrap: pretty; }
.app-steps__sub {
  font: 400 18px/1.55 var(--font-sans);
  color: #3A3A3A;
  text-align: center;
  max-width: 640px;
  margin: -48px auto 80px;
  text-wrap: pretty;
}
.app-h2--sm { font-size: clamp(28px, 2.8vw, 40px); margin-bottom: 40px; }

.app-eyebrow {
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3A3A3A;
  margin: 0 0 20px;
}

/* Orange squares on the corners of a frame or card */
.app-corner { position: absolute; width: 10px; height: 10px; background: var(--orange); z-index: 1; }
.app-corner--tl { top: -5px; left: -5px; }
.app-corner--tr { top: -5px; right: -5px; }
.app-corner--bl { bottom: -5px; left: -5px; }
.app-corner--br { bottom: -5px; right: -5px; }

/* Light-zone buttons: the black slab (orange brackets, from .btn--solid) and the outline
   (black brackets, from .btn--light, with a grey hairline instead of orange). */
.btn.app-btn-ink { background: var(--black); color: var(--white); border-color: var(--black); }
.btn.app-btn-line { background: transparent; color: var(--black); border-color: rgba(0, 0, 0, 0.3); justify-content: center; }
.btn.app-btn-ink:focus-visible,
.btn.app-btn-line:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.app-light .btn { min-height: 48px; justify-content: center; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.app-steps__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--col-width);
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.app-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 60px;
  align-items: center;
}
.app-step--flip { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.app-step--flip .app-step__media { order: -1; }

.app-step__text { border-left: 4px solid var(--black); padding: 6px 0 6px 28px; }
.app-step__num {
  display: block;
  font: 400 13px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--black);
  margin-bottom: 18px;
}
.app-step__title {
  font: 400 36px/1.18 var(--font-pixel);
  color: var(--black);
  margin: 0 0 20px;
}
.app-step__body {
  font: 400 16px/1.6 var(--font-sans);
  color: #2A2A2A;
  max-width: 470px;
  margin: 0;
}
.app-step__media { position: relative; aspect-ratio: 3 / 2; background: #F2F2F2; }
.app-step__media video,
.app-step__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-steps__demo { text-align: center; margin-top: 110px; }
.btn.app-demo-open { gap: 14px; min-height: 54px; padding-inline: 34px; }
.app-demo-open__icon { flex: none; }

/* ── Tutorials ───────────────────────────────────────────────────────────── */
/* The tab bar: one cell per module, a black rule on top of the picked one. Scrolls sideways
   inside itself when the modules don't fit (phones, or a long list), never the page. */
.app-tut__tabs {
  position: relative; /* offsetLeft of the tabs, for keeping the picked one in view */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  max-width: 1240px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.app-tut__tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 44px;
  padding: 20px 22px 22px;
  border: 0;
  border-top: 4px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: #3A3A3A;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.app-tut__tab:hover { border-top-color: rgba(0, 0, 0, 0.45); color: var(--black); }
.app-tut__tab[aria-selected='true'] { border-top-color: var(--orange); background: var(--white); color: var(--black); }
.app-tut__tab:focus-visible { outline: 2px solid var(--black); outline-offset: -4px; }
.app-tut__num { font: 400 13px/1 var(--font-mono); letter-spacing: 0.12em; }
.app-tut__name { font: 500 16px/1.35 var(--font-sans); }
.app-tut__len { margin-top: auto; font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; color: #6A6A6A; }

/* The player: the picked module's framed 16:9 video beside its text. */
.app-tut__panel { max-width: 1240px; margin: 56px auto 0; }
.app-tut__panel:focus-visible { outline: 2px solid var(--black); outline-offset: 8px; }
.app-tut__module {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.app-tut__module[hidden] { display: none; }
/* The tutorial recordings' own shape (1920×1172); a 16:9 embed letterboxes inside it. */
.app-tut__media { position: relative; aspect-ratio: 1920 / 1172; background: var(--black); }
.app-tut__media video { object-fit: contain; }
.app-tut__media video,
.app-tut__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* .app-tut__player = the frame + the control bar under it (components/VideoControls.astro,
   css/video-player.css). Clicking the video toggles play once the script has taken over. */
.app-tut__player { min-width: 0; }
.app-tut__media video:not([controls]) { cursor: pointer; }
/* Full screen (the script sets .is-fullscreen): the frame fills the screen above the bar */
.app-tut__player.is-fullscreen { display: flex; flex-direction: column; background: var(--black); padding: 0 24px 10px; }
.app-tut__player.is-fullscreen .app-tut__media { flex: 1; min-height: 0; aspect-ratio: auto; }
.app-tut__player.is-fullscreen .app-corner { display: none; }
.app-tut__media--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.app-tut__soon {
  font: 400 13px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3A3A3A;
  margin: 0;
  padding: 0 16px;
  text-align: center;
}
.app-tut .app-step__title { font-size: 30px; }

/* Dark (--dark: the tutorials band of /apps/quix-lab/): light on black. The tab bar
   inverts (white rule and a light wash on the picked tab, whose orange rule stays), the
   text beside the player gets a white rule, the coming-soon frame goes dark grey. The
   player keeps its orange corners; its control bar goes light (css/video-player.css,
   .vctl--dark). */
.app-tut--dark .app-h2 { color: var(--white); }
.app-tut--dark .app-steps__sub { color: rgba(255, 255, 255, 0.72); }
.app-tut--dark .app-tut__tabs { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.app-tut--dark .app-tut__tab { border-top-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.62); }
.app-tut--dark .app-tut__tab:hover { border-top-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.app-tut--dark .app-tut__tab[aria-selected='true'] { border-top-color: var(--orange); background: rgba(255, 255, 255, 0.08); color: var(--white); }
.app-tut--dark .app-tut__tab:focus-visible,
.app-tut--dark .app-tut__panel:focus-visible { outline-color: var(--white); }
.app-tut--dark .app-tut__len { color: rgba(255, 255, 255, 0.5); }
.app-tut--dark .app-step__text { border-left-color: var(--white); }
.app-tut--dark .app-step__num,
.app-tut--dark .app-step__title { color: var(--white); }
.app-tut--dark .app-step__body { color: rgba(255, 255, 255, 0.72); }
.app-tut--dark .app-tut__media--soon { background: #141414; border-color: rgba(255, 255, 255, 0.14); }
.app-tut--dark .app-tut__soon { color: rgba(255, 255, 255, 0.7); }

/* ── Plans ───────────────────────────────────────────────────────────────── */
.app-plans {
  display: grid;
  grid-template-columns: repeat(var(--plan-count, 2), minmax(0, 1fr));
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.app-plan__for { font: 400 15px/1.5 var(--font-sans); color: #3A3A3A; margin: -6px 0 22px; }
/* The unit on its own line, so every card's price row is the same height. */
.app-plans .app-plan__per { flex-basis: 100%; }
.app-plan__note.app-plans__note { max-width: 1240px; margin: 24px auto 0; }
/* "Already have Quix Lab? LOG IN →" under the plans */
.app-plans__login { max-width: 1240px; margin: 28px auto 0; text-align: center; font: 400 15px/1.5 var(--font-sans); color: #3A3A3A; }
.app-plans__login a { font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.04em; color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.app-plans__login a:hover { color: var(--orange); }
.app-plan { position: relative; display: flex; flex-direction: column; padding: 40px; }
.app-plan--main { background: var(--white); }
.app-plan--alt { border: 1px solid rgba(0, 0, 0, 0.25); }

.app-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.app-plan__amount { font: 400 80px/0.95 var(--font-pixel); color: var(--black); }
.app-plan__per { font: 400 15px/1.4 var(--font-sans); color: #4A4A4A; }
.app-plan__title { font: 400 40px/1.1 var(--font-pixel); color: var(--black); margin: 0 0 18px; }
.app-plan__text {
  font: 400 15px/1.6 var(--font-sans);
  color: #3A3A3A;
  max-width: 440px;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.app-bullets { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.app-bullets li { position: relative; padding-left: 28px; font: 400 15px/1.45 var(--font-sans); color: #1A1A1A; }
.app-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 10px;
  height: 10px;
  background: var(--orange);
}
.app-bullets--ink li::before { background: var(--black); }

.app-plan__note {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: #F3F3F3;
  font: 400 13px/1.6 var(--font-sans);
  color: #4A4A4A;
}
.app-plan__btn { margin-top: auto; width: 100%; }

/* A detailed card (AppPricing, a plan with a meter / hosting / includes; no page uses it now;
   it was built for the removed /apps/quix-lab-3/ proposal): n8n's order, the button high. Eight rows: label,
   who it's for, price, meter, button, hosting, includes, bullets. Side by side, each card
   is a subgrid of the plans grid, so those rows line up across the cards whatever the
   length of the text above them (and the meter boxes come out the same height). */
.app-plan--detailed .app-plan__price { container-type: inline-size; }
/* A word ("Custom") as the price: shrinks with the card so it never overflows */
.app-plan--detailed .app-plan__amount { font-size: min(80px, 27cqi); }
.app-plan__meter { margin-top: 24px; padding: 18px 20px 20px; background: #F3F3F3; }
.app-plan--alt .app-plan__meter { background: rgba(0, 0, 0, 0.05); }
.app-plan__meter-label {
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3A3A3A;
  margin: 0 0 14px;
}
.app-plan__meter-value { font: 400 44px/1 var(--font-pixel); color: var(--black); margin: 0 0 10px; }
.app-plan__meter-text { font: 400 15px/1.45 var(--font-sans); color: #1A1A1A; margin: 0; }
.app-plan__meter-small { font: 400 13px/1.5 var(--font-sans); color: #4A4A4A; margin: 6px 0 0; }
.app-plan--detailed .app-plan__btn { margin-top: 24px; }
.app-plan__hosting {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3A3A3A;
}
.app-plan__hosting::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 5px; background: var(--black); }
.app-plan__includes {
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font: 500 15px/1.45 var(--font-sans);
  color: var(--black);
}
.app-plan--alt .app-plan__includes { border-top-color: rgba(0, 0, 0, 0.15); }
.app-plan--detailed .app-bullets { margin: 18px 0 0; }
@media (min-width: 981px) {
  .app-plan--detailed { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
}

/* ── Questions ───────────────────────────────────────────────────────────── */
.app-faq__list { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(0, 0, 0, 0.18); }
.app-faq__item { border-bottom: 1px solid rgba(0, 0, 0, 0.18); }
.app-faq__q {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 24px 4px;
  cursor: pointer;
  font: 400 17px/1.4 var(--font-sans);
  color: var(--black);
}
.app-faq__q::-webkit-details-marker { display: none; }
.app-faq__q:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(0, 0, 0, 0.3); }
.app-faq__q:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
/* + when closed, − when open */
.app-faq__icon { position: relative; flex: none; width: 10px; height: 10px; }
.app-faq__icon::before,
.app-faq__icon::after { content: ''; position: absolute; background: currentColor; }
.app-faq__icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.app-faq__icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.app-faq__item[open] .app-faq__icon::after { display: none; }
.app-faq__a { padding: 0 4px 26px; }
.app-faq__a p { font: 400 15px/1.6 var(--font-sans); color: #3A3A3A; margin: 0 0 12px; max-width: 760px; }
.app-faq__a p:last-child { margin-bottom: 0; }
.app-faq__a a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.app-faq__a code { font: 400 0.9em/1 var(--font-mono); padding: 2px 5px; background: rgba(0, 0, 0, 0.07); color: var(--black); }

/* ── Sign-up ─────────────────────────────────────────────────────────────── */
.app-signup__card { position: relative; max-width: 760px; margin: 0 auto; background: var(--white); padding: 48px 44px 40px; }
.app-signup__h {
  font: 500 clamp(26px, 2.4vw, 34px)/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 32px;
}
.app-form { display: flex; flex-direction: column; gap: 22px; }
.app-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.app-form__field { display: flex; flex-direction: column; gap: 10px; }
.app-form__field label { font: 500 14px/1.3 var(--font-sans); color: var(--black); }
.app-form input[type='email'],
.app-form input[type='text'],
.app-form input[type='tel'],
.app-form textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid #BDBDBD;
  border-radius: 0;
  background: var(--white);
  font: 400 16px/1.2 var(--font-sans);
  color: var(--black);
}
.app-form textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.app-form input::placeholder { color: #8A8A8A; }
.app-form textarea:focus-visible,
.app-form input:focus-visible { outline: 2px solid var(--black); outline-offset: 0; border-color: var(--black); }
.app-form__consent {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font: 400 14px/1.5 var(--font-sans);
  color: #3A3A3A;
  cursor: pointer;
}
.app-form__consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--black); cursor: pointer; }
.app-form__consent a,
.app-form__note a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.app-form__consent a:focus-visible,
.app-form__note a:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.btn.app-form__submit { width: 100%; min-height: 54px; margin-top: 2px; }
.app-signup__text { font: 400 15px/1.6 var(--font-sans); color: #3A3A3A; margin: -16px 0 28px; max-width: 60ch; }
.app-signup__card > .app-form__note { margin-top: 22px; }
.app-form__note { text-align: center; font: 400 14px/1.5 var(--font-sans); color: #3A3A3A; margin: 0; }

/* ── WATCH THE DEMO lightbox ─────────────────────────────────────────────── */
.app-demo {
  width: min(1200px, 92vw, 128vh);
  max-width: none;
  margin: auto; /* reset.css zeroes the UA's centring margin */
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.app-demo::backdrop { background: rgba(0, 0, 0, 0.85); }
.app-demo__box { position: relative; aspect-ratio: 3 / 2; background: var(--black); }
.app-demo__video { display: block; width: 100%; height: 100%; }
.app-demo__close {
  position: absolute;
  top: -52px;
  right: -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
}
.app-demo__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ══ Responsive ═════════════════════════════════════════════════════════════ */
@media (max-width: 1300px) {
  .app-steps__list { padding: 0 24px; }
}

@media (max-width: 980px) {
  .app-step,
  .app-step--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .app-step--flip .app-step__media { order: 0; }
  .app-steps__list { gap: 72px; }
  .app-plans { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .app-tut__module { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .app-tut__panel { margin-top: 40px; }
}

@media (max-width: 620px) {
  .hero.app-hero { padding: 64px 20px 72px; }
  .hero.app-hero--compact { padding: 56px 20px 64px; }
  .app-hero__ctas { grid-auto-flow: row; width: 100%; max-width: 340px; }
  .app-sec { padding: 72px 16px; }
  .app-light > .app-sec:first-child { padding-top: 128px; }
  .app-light > .app-sec:last-child { padding-bottom: 136px; }
  .app-fade--in + .app-light > .app-sec:first-child { padding-top: 72px; }
  .app-light:has(+ .app-fade--out) > .app-sec:last-child { padding-bottom: 72px; }
  .app-signup { padding-bottom: 136px; }
  .app-h2 { margin-bottom: 48px; }
  .app-h2--sm { margin-bottom: 32px; }
  .app-steps__list { padding: 0; gap: 64px; }
  .app-step__text { padding-left: 20px; }
  .app-step__title { font-size: 30px; }
  .app-step__body { font-size: 15px; }
  .app-steps__demo { margin-top: 72px; }
  .app-tut__tabs { grid-auto-columns: minmax(170px, 72%); }
  .app-tut__tab { padding: 16px 18px 18px; }
  .app-tut .app-step__title { font-size: 26px; }
  .app-plan { padding: 30px 22px; }
  .app-plan__amount { font-size: 64px; }
  .app-plan--detailed .app-plan__amount { font-size: min(64px, 27cqi); }
  .app-plan__meter { padding: 16px 18px 18px; }
  .app-plan__meter-value { font-size: 38px; }
  .app-plan__title { font-size: 32px; }
  .app-faq__q { font-size: 16px; padding: 18px 2px; }
  .app-signup__card { padding: 34px 20px 28px; }
  .app-form__row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .app-form__consent { align-items: flex-start; }
}