/* Inner-page layer (body.os-page), loaded after /site.css on every generated inner page, CMS page and hand-owned
 * page. Quixo Marketing Editorial Brand System 2026: /site.css carries the tokens-only components (type, pivots,
 * artwork, pills, grids, forms); this file only adds the compositions that depend on the page family the renderer
 * picks from the route (os-page--industry, --audit, --campaign, --legal, --pricing, --solutions, --contact,
 * --marketing, --error, --status). No colour literals (scripts/check-brand.mjs). */

body.os-page { background: var(--ground); color: var(--ink); color-scheme: light; }
body.os-page [hidden] { display: none !important; }
body.os-page :where(main, section, article, aside, div, li, form, fieldset) { min-inline-size: 0; }
body.os-page :where(h1, h2, h3, p, li, a, label, legend) { overflow-wrap: break-word; }
body.os-page :where(section[id], h2[id], h3[id]) { scroll-margin-block-start: 2rem; }

/* Section heading + supporting lede share one row on wide screens (headline left, explanation right). */
@media (min-width: 900px) {
  body.os-page .section:not(.hero-block) > .wrap > h2 + .lede { align-self: end; }
}

/* ---- industry pages: the evidence map reads as a two-column plate */
@media (min-width: 900px) {
  body.os-page--industry .dim-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--col-gap); padding-block: 2rem; border-block: var(--rule-ink); }
  body.os-page--industry .dim-map figcaption { flex-direction: column; margin: 0; }
}

/* ---- solutions directory: each industry card carries a circular arrow */
body.os-page--solutions .cards .card h3 a { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; text-decoration: none; }
body.os-page--solutions .cards .card h3 a::after {
  content: "\2197";
  content: "\2197" / "";
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 1.1rem;
  transition: background-color 0.25s var(--ease);
}
[dir="rtl"] body.os-page--solutions .cards .card h3 a::after, body.os-page--solutions[dir="rtl"] .cards .card h3 a::after { content: "\2196"; content: "\2196" / ""; }
body.os-page--solutions .cards .card h3 a:hover::after { background: var(--lav); border-color: var(--lav); }

/* ---- audit family: the sample report sits in the content columns, the order section on a quiet plate */
body.os-page--audit [data-audit-step="request"], body.os-page--campaign [data-audit-step="request"] { border-top: var(--rule-ink); }
body.os-page .hero-block[data-audit-step] { min-height: 62svh; }

/* ---- legal: a calm reading measure, headings stay sticky beside the text */
body.os-page--legal .section { padding-block: clamp(3rem, 5vw, 4.5rem); }
body.os-page--legal .section h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.1; }

/* ---- contact: the enquiry panel becomes a ruled plate with oversized copy */
body.os-page--contact .section[data-section="lead-form"] .panel { border-inline: 0; border-radius: 0; border-block: var(--rule-ink); padding-inline: 0; }
body.os-page--contact .section[data-section="lead-form"] .panel > p:first-child { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.35; letter-spacing: -0.025em; max-width: 30ch; }

/* ---- campaign + error pages open on a taller field */
body.os-page--campaign .hero-block { min-height: 72svh; }
body.os-page--error .hero-block h1, body.os-page--campaign .hero-block h1 { max-width: 16ch; }

/* ---- Arabic */
body.os-page.lang-ar .page-breadcrumb, body.os-page.lang-ar .page-index p, body.os-page.lang-ar .section-kicker { font-family: var(--q-font-arabic); letter-spacing: 0; text-transform: none; }
body.os-page.lang-ar .section-number { font-family: var(--q-font-mono); }

@media (prefers-reduced-motion: reduce) {
  body.os-page *, body.os-page *::before, body.os-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body.os-page .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ Meta Ads landing page (/lp/growth-audit, Oct 2026)
   Built from the v3 design (the home film's illustrated loop clips, white editorial ground, one lavender accent) and
   written for people who are not marketers. The clips are played by qm-v3.js; their posters are the reduced-motion and
   no-script state. */
.hero-block.has-media::before, .hero-block.has-media::after { display: none; }
[data-page="lp-growth-audit"] .page-index { display: none; }

/* hero: copy on the start side, the scan clip on the end side; stacked on phones */
.hero-block.has-media > .wrap > .lpv-search { margin: 2rem 0 0; }
@media (min-width: 900px) {
  .hero-block.has-media > .wrap { align-items: start; }
  .hero-block.has-media > .wrap > .eyebrow { grid-column: 1 / 7; grid-row: 1; }
  .hero-block.has-media > .wrap > h1 { grid-column: 1 / 7; grid-row: 2; }
  .hero-block.has-media > .wrap > .lede { grid-column: 1 / 7; grid-row: 3; }
  .hero-block.has-media > .wrap > .actions { grid-column: 1 / 7; grid-row: 4; margin-top: 0.5rem; }
  .hero-block.has-media > .wrap > .lpv-search { grid-column: 8 / -1; grid-row: 1 / span 4; align-self: center; margin: 0; }
  .hero-block.has-media h1 { font-size: clamp(3rem, 1.6rem + 3.4vw, 5.75rem); max-width: 11ch; }
}

/* how it works: three numbered steps, each with its clip */
.steps-media { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.steps-media > li { display: grid; align-content: start; gap: 0.5rem; min-width: 0; }
.steps-media .lpv { margin: 0 0 0.75rem; }
.steps-media-n { margin: 0; font-family: var(--q-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--lav-deep); }
.steps-media h3 { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.steps-media h3 + p { margin: 0; color: var(--q-ink-mid); max-width: 36ch; }
@media (min-width: 900px) { .steps-media { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .steps-media > li { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .steps-media > li > .lpv { grid-row: 1 / span 3; margin: 0; min-height: 7rem; padding: 0.875rem; }
}
.steps-media h3 + p { font-size: var(--q-step--1); }
[data-page="lp-growth-audit"] .free-score-form .form-status:empty { display: none; }

/* the questions sit in one row of three on this page */
@media (min-width: 900px) {
  [data-page="lp-growth-audit"] #gaps .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* free check: address and button on one line on wider screens */
[data-page="lp-growth-audit"] .free-score-form, [data-page="lp-growth-audit"] .free-score-result { max-width: 46rem; }
@media (min-width: 700px) {
  [data-page="lp-growth-audit"] .free-score-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  [data-page="lp-growth-audit"] .free-score-form label, [data-page="lp-growth-audit"] .free-score-form .form-status { grid-column: 1 / -1; }
  [data-page="lp-growth-audit"] .free-score-form input { margin: 0; }
}

/* levels: the recommended card carries the one accent rule */
.levels .tier-card { transition: transform 0.6s var(--ease), border-color 0.4s var(--ease); }
.levels .tier-card.is-primary { box-shadow: inset 0 4px 0 var(--lav); }
.levels .level-title { margin: 0.25rem 0 0; color: var(--ink); font-size: 1.125rem; }

/* industry-map stencil drawn as a ring on this page: your website in the middle, six places customers look around it.
   Lavender = gap (weight high). Phones keep the stencil's pill layout. */
@media (min-width: 900px) {
  [data-page="lp-growth-audit"] .dim-map { position: relative; inline-size: min(100%, 34rem); aspect-ratio: 1; margin-inline: auto; }
  [data-page="lp-growth-audit"] .dim-map::before { content: ""; position: absolute; inset: 14%; border: 1px dashed var(--q-ink-mute); border-radius: 50%; }
  [data-page="lp-growth-audit"] .dim-map figcaption { position: absolute; inset: 34%; margin: 0; border-radius: 50%; background: var(--ink); color: var(--ground); display: grid; place-content: center; text-align: center; gap: 0.25rem; padding: 0.5rem; }
  [data-page="lp-growth-audit"] .dim-map figcaption strong { font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem); font-weight: 400; }
  [data-page="lp-growth-audit"] .dim-map figcaption span { color: var(--lav); font-family: var(--q-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .lang-ar[data-page="lp-growth-audit"] .dim-map figcaption span { letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 0.8125rem; }
  [data-page="lp-growth-audit"] .dim-map ul { position: absolute; inset: 0; display: block; }
  [data-page="lp-growth-audit"] .dim-map li { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 0.15rem; white-space: nowrap; text-align: center; background: var(--ground); }
  [data-page="lp-growth-audit"] .dim-map li.is-high { background: var(--lav); }
  [data-page="lp-growth-audit"] .dim-map li:nth-child(1) { transform: none; top: 14%; }
  [data-page="lp-growth-audit"] .dim-map li:nth-child(2) { left: 81%; top: 32%; }
  [data-page="lp-growth-audit"] .dim-map li:nth-child(3) { left: 81%; top: 68%; }
  [data-page="lp-growth-audit"] .dim-map li:nth-child(4) { left: 50%; top: 86%; }
  [data-page="lp-growth-audit"] .dim-map li:nth-child(5) { left: 19%; top: 68%; }
  [data-page="lp-growth-audit"] .dim-map li:nth-child(6) { left: 19%; top: 32%; }
  [data-page="lp-growth-audit"] .dim-map .dim-note { font-family: var(--q-font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-block.has-media > .wrap > * { animation: lp-rise 0.9s var(--ease) both; }
  .hero-block.has-media > .wrap > h1 { animation-delay: 0.08s; }
  .hero-block.has-media > .wrap > .lede { animation-delay: 0.16s; }
  .hero-block.has-media > .wrap > .actions { animation-delay: 0.24s; }
  .hero-block.has-media > .wrap > .lpv-search { animation-delay: 0.3s; }
  /* the gaps light up one after another once the map scrolls in (animations.js adds .is-visible) */
  .reveal-ready [data-page="lp-growth-audit"] #gaps .dim.is-high { transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease); background: var(--ground); border-color: var(--grid); }
  .reveal-ready [data-page="lp-growth-audit"] #gaps.is-visible .dim.is-high { background: var(--lav); border-color: var(--lav); }
  [data-page="lp-growth-audit"] #gaps .dim:nth-child(2) { transition-delay: 0.5s; }
  [data-page="lp-growth-audit"] #gaps .dim:nth-child(6) { transition-delay: 0.9s; }
  .levels .tier-card:hover { transform: translateY(-4px); border-color: var(--ink); }
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- markup visuals (no video): demo search, typed address, score dial, checklist ---- */
.lpv { position: relative; margin: 0; min-width: 0; border: 1px solid var(--ink); border-radius: 1.5rem; background: var(--ground); padding: 1.25rem; display: grid; align-content: center; gap: 0.75rem; overflow: hidden; }
.lpv-demo { position: absolute; top: 0.875rem; inset-inline-end: 0.875rem; }
.lpv-type { display: inline-block; white-space: nowrap; }
/* search */
.lpv-search { padding: 1.5rem 1.25rem 1.25rem; gap: 0.5rem; }
.lpv-bar { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--grid); border-radius: 100px; padding: 0.7rem 1rem; margin: 1.5rem 0 0.5rem; min-width: 0; }
.lpv-g { flex: none; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--q-pale); font-weight: 700; font-size: 0.875rem; }
.lpv-query { min-width: 0; overflow: hidden; font-size: 1rem; }
.lpv-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.lpv-result { display: grid; gap: 0.15rem; padding: 0.6rem 0.25rem; border-bottom: var(--rule); }
.lpv-url { font-family: var(--q-font-mono); font-size: 0.6875rem; color: var(--q-ink-mute); text-align: start; }
.lpv-title { font-size: 1rem; font-weight: 500; color: var(--ink); }
.lpv-you { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px dashed var(--q-ink-mute); border-radius: 1rem; color: var(--q-ink-mid); }
.lpv-you-name { font-weight: 500; }
.lpv-flag { background: var(--lav); color: var(--ink); border-radius: 100px; padding: 0.3rem 0.75rem; font-size: 0.8125rem; font-weight: 600; }
/* typed address */
.lpv-typebox { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 10rem; }
.lpv-field { border: 1px solid var(--ink); border-radius: 100px; padding: 0.7rem 1rem; font-family: var(--q-font-mono); font-size: 0.9375rem; overflow: hidden; text-align: start; }
.lpv-go { background: var(--lav); border-radius: 100px; padding: 0.7rem 1rem; font-weight: 600; font-size: 0.9375rem; }
/* score dial */
.lpv-score { justify-items: center; min-height: 10rem; }
.lpv-score svg { inline-size: 7.5rem; block-size: 7.5rem; transform: rotate(-90deg); }
[dir="rtl"] .lpv-score svg { transform: rotate(-90deg) scaleY(-1); }
.lpv-track, .lpv-arc { fill: none; stroke-width: 10; }
.lpv-track { stroke: var(--q-pale); }
.lpv-arc { stroke: var(--lav-deep); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.lpv-arc-46 { stroke-dashoffset: 54; }
.lpv-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.lpv-num .num { font-size: 2rem; line-height: 1; letter-spacing: -0.03em; }
.lpv-num .of { font-family: var(--q-font-mono); font-size: 0.6875rem; color: var(--q-ink-mute); }
/* checklist */
.lpv-check { min-height: 10rem; }
.lpv-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lpv-check li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; }
.lpv-box { flex: none; position: relative; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 0.35rem; border: 1.5px solid var(--ink); background: var(--lav); }
.lpv-box::after { content: ""; position: absolute; inset-inline-start: 0.35rem; top: 0.1rem; inline-size: 0.35rem; block-size: 0.65rem; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 899px) {
  .steps-media > li > .lpv-typebox { grid-template-columns: 1fr; gap: 0.5rem; }
  .steps-media > li > .lpv .lpv-field, .steps-media > li > .lpv .lpv-go { font-size: 0.75rem; padding: 0.45rem 0.6rem; text-align: center; }
  .steps-media > li > .lpv .lpv-field { font-size: 0.625rem; padding-inline: 0.4rem; }
  .steps-media > li > .lpv-score svg { inline-size: 5rem; block-size: 5rem; }
  .steps-media > li > .lpv-score .num { font-size: 1.375rem; }
  .steps-media > li > .lpv-check li { font-size: 0.6875rem; gap: 0.4rem; }
  .steps-media > li > .lpv-check .lpv-box { inline-size: 0.9rem; block-size: 0.9rem; }
  .steps-media > li > .lpv-check .lpv-box::after { inset-inline-start: 0.22rem; top: 0.04rem; inline-size: 0.25rem; block-size: 0.5rem; }
  .steps-media > li > .lpv .lpv-demo { display: none; }
}

/* scroll progress (where scroll-driven animations exist) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-page="lp-growth-audit"]::before { content: ""; position: fixed; inset-inline: 0; top: 0; block-size: 3px; z-index: 100; background: var(--lav-deep); transform-origin: 0 50%; transform: scaleX(0); animation: lp-progress linear both; animation-timeline: scroll(root); }
    [dir="rtl"] body[data-page="lp-growth-audit"]::before, body[data-page="lp-growth-audit"][dir="rtl"]::before { transform-origin: 100% 50%; }
  }
}
@keyframes lp-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* hero search plays on load */
  .lpv-search .lpv-type { clip-path: inset(0 100% 0 0); animation: lp-type 1s steps(22, end) 0.8s forwards; }
  [dir="rtl"] .lpv-search .lpv-type { clip-path: inset(0 0 0 100%); }
  .lpv-search .lpv-result, .lpv-search .lpv-you { opacity: 0; animation: lp-rise 0.6s var(--ease) forwards; }
  .lpv-search .lpv-result:nth-child(1) { animation-delay: 1.9s; } .lpv-search .lpv-result:nth-child(2) { animation-delay: 2.1s; } .lpv-search .lpv-result:nth-child(3) { animation-delay: 2.3s; }
  .lpv-search .lpv-you { animation-delay: 2.8s; }
  .lpv-search .lpv-flag { animation: lp-pulse 1.6s var(--ease) 3.4s 2; }
  /* steps play when their section scrolls in */
  .reveal-ready #how-it-works .lpv-typebox .lpv-type { clip-path: inset(0 100% 0 0); }
  .reveal-ready #how-it-works.is-visible .lpv-typebox .lpv-type { animation: lp-type 0.9s steps(16, end) 0.5s forwards; }
  .reveal-ready #how-it-works .lpv-go { transition: transform 0.2s var(--ease) 1.6s; }
  .reveal-ready #how-it-works.is-visible .lpv-go { animation: lp-press 0.35s var(--ease) 1.6s; }
  .reveal-ready #how-it-works .lpv-arc { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease) 0.9s; }
  .reveal-ready #how-it-works.is-visible .lpv-arc-46 { stroke-dashoffset: 54; }
  .reveal-ready #how-it-works .lpv-num { opacity: 0; transition: opacity 0.5s var(--ease) 1.6s; }
  .reveal-ready #how-it-works.is-visible .lpv-num { opacity: 1; }
  .reveal-ready #how-it-works .lpv-box { background: var(--ground); transition: background-color 0.3s var(--ease); }
  .reveal-ready #how-it-works .lpv-box::after { opacity: 0; transition: opacity 0.2s var(--ease); }
  .reveal-ready #how-it-works.is-visible .lpv-box { background: var(--lav); }
  .reveal-ready #how-it-works.is-visible .lpv-box::after { opacity: 1; }
  .reveal-ready #how-it-works li:nth-child(3) .lpv-check li:nth-child(1) .lpv-box, .reveal-ready #how-it-works li:nth-child(3) .lpv-check li:nth-child(1) .lpv-box::after { transition-delay: 1.4s; }
  .reveal-ready #how-it-works li:nth-child(3) .lpv-check li:nth-child(2) .lpv-box, .reveal-ready #how-it-works li:nth-child(3) .lpv-check li:nth-child(2) .lpv-box::after { transition-delay: 1.9s; }
  .reveal-ready #how-it-works li:nth-child(3) .lpv-check li:nth-child(3) .lpv-box, .reveal-ready #how-it-works li:nth-child(3) .lpv-check li:nth-child(3) .lpv-box::after { transition-delay: 2.4s; }
  /* step cards and level cards rise one after another */
  .reveal-ready #how-it-works .steps-media > li, .reveal-ready #levels .tier-card, .reveal-ready #gaps .dim { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), background-color 0.6s var(--ease), border-color 0.6s var(--ease); }
  .reveal-ready #how-it-works.is-visible .steps-media > li, .reveal-ready #levels.is-visible .tier-card, .reveal-ready #gaps.is-visible .dim { opacity: 1; transform: none; }
  .reveal-ready #how-it-works .steps-media > li:nth-child(2), .reveal-ready #levels .tier-card:nth-child(2) { transition-delay: 0.15s; }
  .reveal-ready #how-it-works .steps-media > li:nth-child(3) { transition-delay: 0.3s; }
  .reveal-ready #gaps .dim:nth-child(2) { transition-delay: 0.1s; } .reveal-ready #gaps .dim:nth-child(3) { transition-delay: 0.2s; } .reveal-ready #gaps .dim:nth-child(4) { transition-delay: 0.3s; } .reveal-ready #gaps .dim:nth-child(5) { transition-delay: 0.4s; } .reveal-ready #gaps .dim:nth-child(6) { transition-delay: 0.5s; }
  /* the ring draws in */
  .reveal-ready [data-page="lp-growth-audit"] #gaps .dim-map::before { transform: scale(0.6) rotate(-90deg); opacity: 0; transition: transform 1s var(--ease), opacity 0.8s var(--ease); }
  .reveal-ready [data-page="lp-growth-audit"] #gaps.is-visible .dim-map::before { transform: none; opacity: 1; }
}
@keyframes lp-press { 50% { transform: scale(0.92); } }
@keyframes lp-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lav-deep) 60%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@keyframes lp-type { to { clip-path: inset(0 0 0 0); } }

/* still illustrations (v3 film frames as images, no video): the card look of the film clips */
.lpv-img { padding: 0; border-color: var(--grid); border-radius: 1.25rem; display: block; aspect-ratio: 16 / 9; }
.lpv-img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-block.has-media > .wrap > .lpv-img.is-hero { border-radius: 1.5rem; aspect-ratio: 16 / 10; }
.hero-block.has-media > .wrap > .lpv-img.is-hero img { transform: scale(1.04); }
@media (min-width: 900px) { .hero-block.has-media > .wrap > .lpv-img.is-hero { grid-column: 7 / -1; grid-row: 1 / span 4; align-self: center; margin: 0; } }
@media (max-width: 899px) {
  .steps-media > li > .lpv-img { padding: 0; min-height: 0; border-radius: 0.875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-block.has-media > .wrap > .lpv-img.is-hero img { animation: lp-drift 9s ease-in-out 1s infinite alternate; }
  .reveal-ready #how-it-works .lpv-img img { transform: scale(1.12); transition: transform 1.4s var(--ease) 0.2s; }
  .reveal-ready #how-it-works.is-visible .lpv-img img { transform: scale(1); }
}
@keyframes lp-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, 1%); } }