/* Inner-page companion to marketing-os.css. Uses the shared, unmodified Quixo v1.2 tokens. */
body.os-page {
  min-width: 0;
  margin: 0;
  background: var(--q-white);
  color: var(--q-black);
  color-scheme: light;
  text-rendering: optimizeLegibility;
}
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(h1, h2, h3) { text-wrap: balance; }
body.os-page a { text-underline-offset: 4px; }
body.os-page :focus-visible { outline: 3px solid var(--q-ink-deep); outline-offset: 5px; }
body.os-page :where(section[id], h2[id], h3[id]) { scroll-margin-block-start: 28px; }
body.os-page .wrap { max-width: 1600px; padding-inline: clamp(20px, 3.5vw, 64px); }
body.os-page .site-head {
  position: relative;
  z-index: 10;
  top: auto;
  background: var(--q-white);
  color: var(--q-black);
  border-block-end: var(--q-rule);
  backdrop-filter: none;
}
body.os-page .site-head .nav { min-height: 88px; flex-wrap: nowrap; gap: 20px; padding-block: 14px; }
body.os-page .brand { flex-shrink: 0; }
body.os-page .brand img { width: 182px; height: auto; }
body.os-page .nav-links { flex-wrap: nowrap; gap: 0 20px; }
body.os-page .nav-links > li { flex: 0 0 auto; }
body.os-page .nav-links a { color: var(--q-black); font-size: 0.83rem; font-weight: 500; white-space: nowrap; }
body.os-page .nav-links a:hover { color: var(--q-black); text-decoration: underline; }
body.os-page .nav-links a[aria-current="page"] { color: var(--q-black); border-block-end-color: var(--q-black); }
body.os-page .nav-actions { flex-shrink: 0; gap: 10px; }
body.os-page .lang-switch { background: transparent; color: var(--q-black); border-color: var(--q-hairline); }
body.os-page .lang-switch:hover { background: var(--q-tile); border-color: var(--q-black); }
body.os-page .nav-actions .cta { padding: 12px 18px; border: 1px solid var(--q-black); background: transparent; font-size: 0.78rem; }
body.os-page .nav-actions .cta:hover { background: var(--q-black); color: var(--q-white); }
body.os-page .page-breadcrumb { max-width: 1600px; margin-inline: auto; padding: 24px clamp(20px, 3.5vw, 64px) 0; color: var(--q-ink-mid); font-family: var(--q-font-mono); font-size: 0.68rem; letter-spacing: 0.035em; }
body.os-page .page-breadcrumb :where(ol, ul) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.os-page .page-breadcrumb li { display: flex; align-items: center; gap: 8px; }
body.os-page .page-breadcrumb li + li::before { content: '/'; color: var(--q-ink-mute); }
body.os-page .page-breadcrumb a { display: inline-flex; min-height: 30px; align-items: center; color: inherit; text-decoration: none; }
body.os-page .page-breadcrumb a:hover { text-decoration: underline; }
body.os-page .page-breadcrumb [aria-current="page"] { color: var(--q-black); }

/* A spacious opening, with the description offset from the headline. */
body.os-page .hero-block,
body.os-page main.hero { position: relative; isolation: isolate; padding-block: clamp(64px, 9vw, 132px) clamp(72px, 8vw, 120px); border-block-end: var(--q-rule); }
body.os-page .section.hero-block > .wrap { position: relative; display: block; }
body.os-page .hero-block::before { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: -1; height: 100%; max-height: 780px; background-image: linear-gradient(var(--q-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--q-hairline) 1px, transparent 1px); background-size: 96px 96px; mask-image: linear-gradient(135deg, transparent 38%, var(--q-black) 100%); opacity: 0.16; content: ''; pointer-events: none; }
body.os-page .hero-block::after { position: absolute; z-index: -1; inset-block-start: 16%; inset-inline-end: 8%; width: clamp(112px, 17vw, 260px); aspect-ratio: 1; border: 1px solid var(--q-hue-deep); border-radius: 50%; opacity: 0.45; content: ''; pointer-events: none; }
body.os-page .hero-block h1,
body.os-page main.hero > h1 { max-width: 17ch; margin: 24px 0 44px; color: var(--q-black); font-family: var(--q-font-display); font-size: clamp(3.35rem, 7.7vw, 8.5rem); font-weight: 500; letter-spacing: -0.065em; line-height: 0.98; }
body.os-page .hero-block .eyebrow { margin-block-end: 32px; }
body.os-page .hero-block .lede { max-width: 620px; width: min(55%, 620px); margin-block: 0; margin-inline-start: auto; font-size: clamp(1.15rem, 1.65vw, 1.65rem); letter-spacing: -0.025em; line-height: 1.5; }
body.os-page .hero-block .note { max-width: 620px; width: min(55%, 620px); margin-block: 24px 0; margin-inline-start: auto; }
body.os-page .hero-block .actions { margin-block: 44px 0; }
body.os-page .hero-block .price-line { max-width: 620px; margin-inline-start: auto; font-size: var(--q-step-2); }
body.os-page .pivot { background: none; color: var(--q-hue-deep); font-family: var(--q-font-pivot); font-weight: 400; }
body.os-page .eyebrow,
body.os-page .section-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: var(--q-ink-mid); font-family: var(--q-font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; }
body.os-page .section-number { color: var(--q-black); font-family: var(--q-font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.05em; }
body.os-page .lede { max-width: 650px; margin: 0; color: var(--q-ink-mid); font-size: var(--q-step-0); line-height: 1.65; }
body.os-page :where(.note, .notes, .muted, .field-hint, .price-note, .price-line) { color: var(--q-ink-mid); }
body.os-page .note { max-width: 820px; font-size: var(--q-step--1); line-height: 1.65; }
body.os-page .page-index { max-width: 1600px; margin: 0 auto; padding: 26px clamp(20px, 3.5vw, 64px); border-block-end: var(--q-rule); color: var(--q-ink-mid); overflow-x: auto; }
body.os-page .page-index :where(ol, ul) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
body.os-page .page-index a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; padding-block: 8px; color: var(--q-black); font-family: var(--q-font-mono); font-size: 0.68rem; letter-spacing: 0.035em; text-decoration: none; }
body.os-page .page-index a:hover { text-decoration: underline; }
body.os-page .page-index > a { margin-inline-end: 28px; }
body.os-page .page-index > .wrap { display: flex; align-items: flex-start; gap: 20px 40px; max-width: none; padding-inline: 0; }
body.os-page .page-index > .wrap > p { flex: 0 0 auto; margin: 0; padding-block: 14px; font-family: var(--q-font-mono); font-size: 0.65rem; line-height: 1.5; letter-spacing: 0.05em; text-transform: uppercase; }
body.os-page .page-index > .wrap > ol { flex: 1; }
body.os-page .page-index a > span { color: var(--q-ink-mid); }

/* Shared section grid: headline left, supporting explanation right, content below. */
body.os-page .section { padding-block: clamp(70px, 7.5vw, 112px); background: var(--q-white); color: var(--q-black); }
body.os-page .section + .section { border-block-start: var(--q-rule); }
body.os-page .section.is-pale { background: var(--q-tile); border-block-color: var(--q-hairline); }
body.os-page .section > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(18px, 3vw, 48px); align-items: start; }
body.os-page .section > .wrap > * { grid-column: 1 / -1; }
body.os-page .section > .wrap > h2 { grid-column: 1 / 6; }
body.os-page .section > .wrap > .lede { grid-column: 7 / -1; }
body.os-page .section h2 { margin: 0 0 34px; color: var(--q-black); font-size: clamp(2.3rem, 4.1vw, 4.8rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1.02; }
body.os-page .section h3 { margin: 0 0 18px; color: var(--q-black); font-size: clamp(1.4rem, 2.15vw, 2.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.12; }
body.os-page .section p { color: var(--q-ink-mid); line-height: 1.65; }
body.os-page .section .section-kicker { margin-block-end: 30px; }
body.os-page .section .actions { margin-block: 40px 0; }
body.os-page .section .note { margin-block: 24px 0; }
body.os-page .cta,
body.os-page .cta-ghost { min-height: 50px; gap: 14px; padding: 14px 24px; border-radius: var(--q-radius-pill); color: var(--q-black); box-shadow: none; font-family: var(--q-font-body); font-size: 0.95rem; font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
body.os-page .cta { background: var(--q-hue); border: 1px solid transparent; }
body.os-page .cta:hover { background: var(--q-black); color: var(--q-white); box-shadow: none; transform: none; }
body.os-page .cta-ghost { background: transparent; border: 1px solid var(--q-black); }
body.os-page .cta-ghost:hover { background: var(--q-black); color: var(--q-white); }
body.os-page :where(button, input, textarea, select):disabled { cursor: not-allowed; }
body.os-page .cta:disabled,
body.os-page .cta-ghost:disabled { opacity: 0.6; transform: none; }

/* Ruled content grids and visible sequence numbers replace floating dark cards. */
body.os-page .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 36px 0 0; border-block-start: 1px solid var(--q-black); border-inline-start: var(--q-rule); counter-reset: page-card; }
body.os-page .card { position: relative; min-height: 260px; padding: clamp(24px, 2.5vw, 40px); border: 0; border-inline-end: var(--q-rule); border-block-end: var(--q-rule); border-radius: 0; background: var(--q-white); justify-content: flex-start; counter-increment: page-card; box-shadow: none; transition: background 180ms ease; }
body.os-page .card::before { display: block; margin-block-end: 48px; color: var(--q-ink-mid); font-family: var(--q-font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; content: counter(page-card, decimal-leading-zero); }
body.os-page .card:hover { border-color: var(--q-hairline); background: var(--q-tile); transform: none; box-shadow: none; }
body.os-page .card h3 { margin-block: 0 20px; }
body.os-page .card p { margin: 0; color: var(--q-ink-mid); font-size: var(--q-step-0); line-height: 1.6; }
body.os-page .card h3 a { color: var(--q-black); font-weight: inherit; text-decoration: none; }
body.os-page .card h3 a:hover { text-decoration: underline; }
body.os-page .card > a { color: var(--q-black); font-weight: 500; }
body.os-page .card-n { margin-block-end: 48px; color: var(--q-ink-mid); font-family: var(--q-font-mono); font-size: 0.7rem; font-weight: 400; }
body.os-page .principles .card::before,
body.os-page .card:has(> .card-n)::before { display: none; content: none; }
body.os-page .principles .card { min-height: 310px; }
body.os-page .principles .card h3 { margin-block-start: auto; }
body.os-page .chips { gap: 8px; margin-block-start: 28px; }
body.os-page .chips li { padding: 9px 14px; border-color: var(--q-hairline); background: transparent; color: var(--q-ink-mid); font-size: 0.75rem; }
body.os-page .panel { padding: clamp(24px, 3vw, 48px); border: var(--q-rule); border-radius: var(--q-radius-tile); background: var(--q-tile); box-shadow: none; }
body.os-page .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-block: 36px 0; border-block-start: 1px solid var(--q-black); }
body.os-page .steps li { display: flex; flex-direction: column; border: 0; border-block-end: var(--q-rule); border-inline-end: var(--q-rule); padding: 28px 28px 38px; }
body.os-page .steps li:first-child { border-inline-start: var(--q-rule); }
body.os-page .steps li::before { width: 42px; min-height: 42px; display: grid; place-items: center; border: 1px solid var(--q-black); border-radius: 50%; margin-block-end: 52px; color: var(--q-black); font-family: var(--q-font-mono); font-size: 0.7rem; font-weight: 400; }
body.os-page .steps h3 { font-size: clamp(1.25rem, 1.7vw, 1.8rem); }
body.os-page .steps p { font-size: var(--q-step--1); }
body.os-page .stats { gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); border-block: var(--q-rule); margin-block: 36px 0; }
body.os-page .stats li { padding: 32px; border-inline-end: var(--q-rule); gap: 24px; }
body.os-page .num { color: var(--q-black); font-size: clamp(3rem, 5.5vw, 6rem); font-weight: 500; letter-spacing: -0.06em; }
body.os-page .num-sm { color: var(--q-black); font-weight: 500; }
body.os-page .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block-start: 20px; }
body.os-page .split .panel { background: var(--q-white); }
body.os-page .split .panel:first-child { background: var(--q-tile); }
body.os-page .split ul { color: var(--q-ink-mid); }
body.os-page .split li { margin-block: 14px; padding-inline-start: 6px; }

/* Industry directory and each industry's evidence-based operating plan. */
body.os-page--solutions .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.os-page--solutions .card { min-height: 260px; padding-inline-end: 68px; }
body.os-page--solutions .card h3 a::after { position: absolute; inset-block-start: 28px; inset-inline-end: 30px; color: var(--q-black); font-family: var(--q-font-body); font-size: 1.5rem; content: '↗'; }
body.os-page--solutions .card::before { margin-block-end: 52px; }
body.os-page--industry .hero-block h1 { max-width: 18ch; }
body.os-page .dim-map { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin: 38px 0 0; padding-block: 34px; border-block: 1px solid var(--q-black); }
body.os-page .dim-map figcaption { display: flex; flex-direction: column; gap: 18px; margin: 0; color: var(--q-ink-mid); line-height: 1.55; }
body.os-page .dim-map figcaption strong { color: var(--q-black); font-size: var(--q-step-2); font-weight: 500; letter-spacing: -0.025em; }
body.os-page .dim-map ul { align-content: flex-start; gap: 10px; }
body.os-page .dim { gap: 8px; flex-wrap: wrap; padding: 12px 18px; background: var(--q-white); border-color: var(--q-hairline); color: var(--q-ink-mid); line-height: 1.4; }
body.os-page .dim.is-high { background: var(--q-black); color: var(--q-white); border-color: var(--q-black); font-weight: 500; }
body.os-page .dim.is-low { color: var(--q-ink-mid); border-style: dashed; }
body.os-page .dim-note { color: inherit; opacity: 0.8; }
body.os-page .card .dim-score { margin-block-start: auto; padding-block-start: 28px; flex-wrap: wrap; color: var(--q-ink-mid); font-size: var(--q-step--1); }
body.os-page meter { max-width: 100%; accent-color: var(--q-hue); }

/* Pricing keeps the decision and the purchased scope together. */
body.os-page .cards.tiers { align-items: stretch; }
body.os-page .tier-card { min-height: 380px; gap: 20px; }
body.os-page .tier-card::before { content: none; }
body.os-page .tier-card h3 { font-size: 1.3rem; margin: 0; }
body.os-page .tier-card .tier-price { margin: 12px 0 8px; color: var(--q-black); font-size: clamp(2.7rem, 4.3vw, 5rem); font-weight: 500; letter-spacing: -0.06em; line-height: 1.08; }
body.os-page .tier-card p { font-size: var(--q-step--1); }
body.os-page .tier-card .price-line { margin-block: -10px 0; }
body.os-page .tier-features { list-style: none; width: 100%; margin: 2px 0 12px; padding: 0; border-block-start: var(--q-rule); }
body.os-page .tier-features li { position: relative; padding-block: 13px; padding-inline: 22px 0; border-block-end: var(--q-rule); color: var(--q-ink-mid); font-size: 0.82rem; line-height: 1.55; }
body.os-page .tier-features li::before { position: absolute; inset-inline-start: 0; color: var(--q-black); content: '↳'; }
body.os-page .tier-card > .cta,
body.os-page .tier-card > .cta-ghost { width: 100%; margin-block-start: auto; font-size: 0.86rem; }
body.os-page .tier-card.is-featured { border-color: var(--q-hairline); box-shadow: none; background: var(--q-tile); }
body.os-page .tier-card .badge { margin-block-end: 0; background: var(--q-black); color: var(--q-white); border-color: var(--q-black); }
body.os-page [data-section="plans"] .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.os-page [data-section="plans"] .tier-card { min-height: 360px; }
body.os-page [data-section="plans"] .tier-price { font-size: clamp(2rem, 2.7vw, 3rem); }
body.os-page [data-section="plans"] .tiers > :last-child:nth-child(3n + 2) { grid-column: span 2; }

/* Sample report and audit controls preserve their existing API-facing hooks. */
body.os-page .report-card { max-width: 100%; margin-block: 36px 0; padding: clamp(28px, 4.5vw, 64px); border: 1px solid var(--q-black); border-radius: var(--q-radius-tile); background: var(--q-black); color: var(--q-white); }
body.os-page .section > .wrap > .report-card { grid-column: 7 / -1; }
body.os-page .report-card .report-domain { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: var(--q-white); font-family: var(--q-font-mono); font-size: 0.8rem; }
body.os-page .report-score { display: flex; align-items: baseline; gap: 16px; margin: 48px 0 22px; }
body.os-page .report-score .num { color: var(--q-white); font-size: clamp(5rem, 9vw, 9rem); }
body.os-page .report-score .of { color: var(--q-hairline); font-family: var(--q-font-mono); font-size: 1rem; }
body.os-page .report-card .report-grade { margin: 0; padding-block-start: 24px; border-block-start: 1px solid var(--q-ink-deep); color: var(--q-white); font-size: var(--q-step-0); }
body.os-page .report-card .badge { background: transparent; color: var(--q-white); border-color: var(--q-ink-mute); }
body.os-page [data-audit-step="request"] { background: var(--q-tile); }
body.os-page [data-audit-step="request"] > .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr); column-gap: clamp(32px, 6vw, 100px); }
body.os-page [data-audit-step="request"] > .wrap > h2 { grid-column: 1 / -1; max-width: 850px; }
body.os-page .steps-inline { display: flex; gap: 0; margin: 8px 0 40px; padding: 0; border-block: var(--q-rule); list-style: none; counter-reset: order-step; }
body.os-page .steps-inline li { display: flex; flex: 1; align-items: center; gap: 14px; padding: 20px 20px 20px 0; color: var(--q-ink-mid); font-size: var(--q-step--1); counter-increment: order-step; }
body.os-page .steps-inline li::before { color: var(--q-black); font-family: var(--q-font-mono); font-size: 0.72rem; content: counter(order-step, decimal-leading-zero); }
body.os-page [data-audit-step="request"] #audit-request { grid-column: 1; grid-row: 3 / span 4; }
body.os-page [data-audit-step="request"] #audit-request-done { grid-column: 1; grid-row: 3 / span 4; }
body.os-page [data-audit-step="request"] > .wrap > .note { grid-column: 2; grid-row: 3; margin: 0 0 28px; }
body.os-page [data-audit-step="request"] .tier-includes { grid-column: 2; grid-row: 4; margin: 0; }
body.os-page [data-audit-step="request"] .notes { grid-column: 2; grid-row: 5; margin-block: 32px 0; }
body.os-page .form { gap: 16px; max-width: 100%; width: 100%; margin: 0; }
body.os-page .panel.form,
body.os-page .form-done { padding: clamp(24px, 3vw, 44px); background: var(--q-white); border-color: var(--q-hairline); }
body.os-page .form label,
body.os-page .tier-picker legend { color: var(--q-black); font-size: 0.95rem; font-weight: 500; }
body.os-page .form :where(input[type="email"], input[type="url"], input[type="text"], textarea, select) { width: 100%; min-height: 52px; padding: 14px 16px; border: var(--q-rule); border-radius: var(--q-radius-tile); background: var(--q-white); color: var(--q-black); font: inherit; }
body.os-page .form :where(input, textarea, select):focus-visible { outline: 2px solid var(--q-black); outline-offset: 2px; border-color: var(--q-black); box-shadow: none; }
body.os-page .form :where(input, textarea)::placeholder { color: var(--q-ink-mid); opacity: 1; }
body.os-page .form textarea { min-height: 120px; resize: vertical; }
body.os-page .form .check { color: var(--q-ink-mid); font-size: var(--q-step--1); line-height: 1.55; }
body.os-page .form .check input { flex: 0 0 18px; margin-block-start: 4px; accent-color: var(--q-black); }
body.os-page .form .field-hint { margin: -6px 0 6px; color: var(--q-ink-mid); font-size: 0.78rem; line-height: 1.5; }
body.os-page .form button { max-width: 100%; }
body.os-page .section .form-status { min-height: 1.5em; color: var(--q-ink-deep); font-size: var(--q-step--1); font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
body.os-page .form-status:not(:empty) { margin-block: 16px 0; padding-block-start: 16px; border-block-start: var(--q-rule); }
body.os-page .tier-picker { gap: 10px; margin-block: 0 18px; }
body.os-page .tier-picker legend { margin-block-end: 16px; }
body.os-page .tier-option { padding: 16px; border-color: var(--q-hairline); background: var(--q-white); }
body.os-page .tier-option:hover { border-color: var(--q-black); background: var(--q-tile); }
body.os-page .tier-option:has(input:checked) { background: var(--q-hue-wash); border-color: var(--q-black); box-shadow: inset 0 0 0 1px var(--q-black); }
body.os-page .tier-option input { accent-color: var(--q-black); }
body.os-page .form .tier-option label { color: var(--q-black); gap: 8px 16px; }
body.os-page .tier-option-price { color: var(--q-black); font-weight: 500; }
body.os-page .tier-option .note { margin: 0; color: var(--q-ink-mid); font-size: 0.8rem; }
body.os-page .tier-includes-block { padding-block: 28px; border-block: 1px solid var(--q-black); }
body.os-page .tier-includes-block h3 { margin-block: 0 20px; font-size: clamp(1.55rem, 2.2vw, 2.5rem); }
body.os-page .tier-includes-block .tier-includes-lead { margin-block: 0 20px; color: var(--q-black); font-weight: 500; }
body.os-page .tier-includes-block ul { gap: 0; padding: 0; list-style: none; }
body.os-page .tier-includes-block li { position: relative; padding: 14px 0 14px 24px; border-block-start: var(--q-rule); color: var(--q-ink-mid); font-size: var(--q-step--1); line-height: 1.55; }
body.os-page .tier-includes-block li::before { position: absolute; inset-inline-start: 0; color: var(--q-black); content: '↳'; }
body.os-page .notes { padding-inline-start: 20px; font-size: 0.78rem; line-height: 1.65; }
body.os-page .notes li + li { margin-block-start: 16px; }
body.os-page .hero-block[data-audit-step] { min-height: 70svh; }
body.os-page .hero-block[data-audit-step] h1 { max-width: 20ch; font-size: clamp(3rem, 6vw, 6.5rem); }
body.os-page .hero-block[data-audit-step] .form { max-width: 620px; margin-block: 36px; }
body.os-page .hero-block[data-audit-step] .note { width: auto; margin-inline: 0; }
body.os-page .hero-block[data-audit-step] .form-status { max-width: 800px; }
body.os-page #audit-report-files { max-width: 850px; margin-block-start: 32px; }
body.os-page #audit-report-files a { color: var(--q-black); }
body.os-page .buy-bar { background: var(--q-white); border-block-start: 1px solid var(--q-black); box-shadow: 0 -10px 35px color-mix(in srgb, var(--q-black) 6%, transparent); backdrop-filter: none; }
body.os-page .buy-bar p { color: var(--q-black); }

/* FAQs, contact and reading pages. */
body.os-page .faq { max-width: none; gap: 0; border-block-start: 1px solid var(--q-black); }
body.os-page .section[data-section="faq"] > .wrap > h2 { grid-column: 1 / 5; }
body.os-page .section[data-section="faq"] > .wrap > .faq { grid-column: 6 / -1; }
body.os-page .faq details,
body.os-page .faq details[open] { padding: 24px 0; border: 0; border-block-end: var(--q-rule); border-radius: 0; background: transparent; }
body.os-page .faq summary { position: relative; justify-content: space-between; gap: 28px; color: var(--q-black); font-size: var(--q-step-0); font-weight: 500; }
body.os-page .faq summary::after { flex: 0 0 auto; font-family: var(--q-font-mono); font-size: 1.2rem; font-weight: 400; content: '+'; }
body.os-page .faq details[open] summary::after { content: '−'; }
body.os-page .faq details p { max-width: 740px; margin-block: 14px 0; padding-inline-end: 42px; color: var(--q-ink-mid); font-size: var(--q-step--1); line-height: 1.7; }
body.os-page .prose { max-width: 820px; }
body.os-page .prose p { margin: 0 0 24px; color: var(--q-ink-mid); font-size: var(--q-step-0); line-height: 1.75; }
body.os-page .prose :where(ul, ol) { margin: 0 0 24px; padding-inline-start: 22px; color: var(--q-ink-mid); line-height: 1.75; }
body.os-page .prose li + li { margin-block-start: 14px; }
body.os-page .prose strong { color: var(--q-black); font-weight: 500; }
body.os-page .prose a { color: var(--q-black); overflow-wrap: anywhere; }
body.os-page .section[data-section="rich-text"] > .wrap > .prose { grid-column: 6 / -1; }
body.os-page--legal .hero-block,
body.os-page--methodology .hero-block { padding-block: 64px 80px; }
body.os-page--legal .hero-block h1,
body.os-page--methodology .hero-block h1 { font-size: clamp(3.3rem, 6.5vw, 6.7rem); }
body.os-page--legal .hero-block::after { content: none; }
body.os-page--legal .section,
body.os-page--methodology .section { padding-block: 52px; }
body.os-page--legal .section h2,
body.os-page--methodology .section h2 { max-width: 15ch; font-size: clamp(1.65rem, 2.3vw, 2.7rem); letter-spacing: -0.035em; line-height: 1.15; }
body.os-page--legal .section > .wrap > .prose,
body.os-page--methodology .section > .wrap > .prose { grid-column: 6 / -1; }
body.os-page--legal .page-index,
body.os-page--methodology .page-index { padding-block: 20px; background: var(--q-tile); }
body.os-page--contact .section[data-section="lead-form"] > .wrap > .panel { grid-column: 6 / -1; background: var(--q-white); border: 0; border-block: 1px solid var(--q-black); border-radius: 0; padding: 32px 0; }
body.os-page--contact .section[data-section="lead-form"] .panel > p:first-child { max-width: 650px; margin: 0; color: var(--q-black); font-size: var(--q-step-2); line-height: 1.5; letter-spacing: -0.025em; }
body.os-page--contact .section[data-section="lead-form"] .panel .note { margin-block-start: 28px; }
body.os-page--contact .section[data-section="lead-form"] .panel .note a { color: var(--q-black); overflow-wrap: anywhere; }
body.os-page .section[data-section="cta"] { padding-block: clamp(80px, 9vw, 140px); border-block-start: var(--q-rule); background: var(--q-white); }
body.os-page .cta-band { text-align: start; }
body.os-page .cta-band h2 { max-width: 1100px; margin: 0; font-size: clamp(3rem, 6.5vw, 7rem); font-weight: 500; letter-spacing: -0.06em; line-height: 1.02; }
body.os-page .cta-band .actions { justify-content: flex-start; margin-block: 42px 0; }
body.os-page .cta-band .note { margin-block-start: 24px; }

/* Real status and report states retain the meaning supplied by the application. */
body.os-page--status .hero-block { padding-block-end: 60px; }
body.os-page--status .hero-block h1 { max-width: 18ch; }
body.os-page #status-summary { max-width: 850px; padding: 22px 26px; border: var(--q-rule); border-inline-start: 3px solid var(--q-black); background: var(--q-tile); color: var(--q-ink-deep); font-size: var(--q-step-0); }
body.os-page .status-list,
body.os-page .status-incidents { gap: 0; width: 100%; margin-block: 24px 0; }
body.os-page .status-row { padding: 24px 0; border: 0; border-block-end: var(--q-rule); border-radius: 0; background: transparent; color: var(--q-black); flex-wrap: wrap; }
body.os-page .status-row:first-child { border-block-start: 1px solid var(--q-black); }
body.os-page .status-row > span:first-child { font-size: var(--q-step-0); font-weight: 500; }
body.os-page .status-row > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.os-page .status-uptime { color: var(--q-ink-mid); font-size: 0.75rem; }
body.os-page .badge { gap: 7px; padding: 7px 12px; border-color: var(--q-hairline); background: var(--q-white); color: var(--q-black); font-family: var(--q-font-mono); font-size: 0.68rem; font-weight: 400; line-height: 1.4; }
body.os-page .badge[data-status="operational"] { border-color: var(--q-black); background: var(--q-white); color: var(--q-black); }
body.os-page .badge[data-status="operational"]::before { content: '✓'; }
body.os-page .badge[data-status="degraded"] { border-color: var(--q-black); background: var(--q-hue); color: var(--q-black); }
body.os-page .badge[data-status="outage"] { background: var(--q-error); color: var(--q-white); border-color: var(--q-error); }
body.os-page .badge[data-status="unknown"] { background: var(--q-tile); color: var(--q-ink-mid); border-style: dashed; }
body.os-page .incident { margin: 0 0 24px; padding: 28px; border-color: var(--q-hairline); background: var(--q-white); }
body.os-page .incident h3 { color: var(--q-black); }
body.os-page .incident :where(time, .meta),
body.os-page .status-incidents > .meta { color: var(--q-ink-mid); font-size: var(--q-step--1); line-height: 1.6; }
body.os-page .dashboard { margin-block-start: 28px; border-color: var(--q-black); background: var(--q-white); box-shadow: 10px 10px 0 var(--q-tile); }
body.os-page .dashboard:hover { transform: none; border-color: var(--q-black); box-shadow: 10px 10px 0 var(--q-tile); }
body.os-page .dashboard .dash-chrome { padding: 18px 22px; background: var(--q-black); color: var(--q-white); border-color: var(--q-black); font-size: 0.7rem; }
body.os-page .tiles { gap: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.os-page .tiles li { min-height: 150px; gap: 12px; flex-wrap: wrap; padding: 24px; border-radius: 0; border: 0; border-block-end: var(--q-rule); border-inline-end: var(--q-rule); background: var(--q-white); color: var(--q-black); cursor: default; }
body.os-page .tiles li:hover { transform: none; background: var(--q-tile); border-color: var(--q-hairline); box-shadow: none; }
body.os-page .tutorial-wrapper { max-width: none; border-radius: var(--q-radius-tile); border-color: var(--q-hairline); box-shadow: none; }
body.os-page .tutorial-ratio { background: var(--q-tile); }
body.os-page .tutorial-placeholder { color: var(--q-black); }
body.os-page .media-figure :where(img, video) { background: var(--q-tile); }
body.os-page .media-figure figcaption { color: var(--q-ink-mid); }
body.os-page .logos img { filter: grayscale(100%); }
body.os-page .logos li:hover img { filter: none; transform: none; }
body.os-page--error .hero-block { min-height: 68svh; }
body.os-page--campaign .hero-block { min-height: 76svh; }
body.os-page--error .hero-block h1,
body.os-page--campaign .hero-block h1 { max-width: 19ch; }

/* The shared footer anchors every page in the same site. */
body.os-page .site-foot { padding-block: 70px 36px; border-block-start: 1px solid var(--q-black); background: var(--q-black); color: var(--q-white); }
body.os-page .site-foot :focus-visible { outline-color: var(--q-white); }
body.os-page .site-foot .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px 64px; align-items: start; }
body.os-page .site-foot .foot > p:first-child { max-width: 350px; font-size: 1.35rem; letter-spacing: -0.025em; line-height: 1.4; }
body.os-page .site-foot .foot > nav { grid-column: 2; grid-row: 1 / span 2; }
body.os-page .site-foot .foot-links { gap: 8px 28px; }
body.os-page .site-foot .foot-links a { color: var(--q-white); font-size: 0.85rem; font-weight: 400; }
body.os-page .site-foot .foot-links a:hover { color: var(--q-white); text-decoration: underline; }
body.os-page .site-foot .foot > p { color: var(--q-hairline); font-size: 0.8rem; line-height: 1.65; }
body.os-page .site-foot .foot > .foot-owner { grid-column: 1 / -1; margin-block-start: 24px; padding-block-start: 22px; border-block-start: 1px solid var(--q-ink-deep); color: var(--q-ink-mute); font-size: 0.72rem; }

/* Arabic keeps the same hierarchy, with breathing room for joined letterforms. */
body.os-page.lang-ar :where(h1, h2, h3, .hero-block h1, .pivot) { font-family: inherit; letter-spacing: 0; line-height: 1.45; }
body.os-page.lang-ar .hero-block h1 { max-width: 20ch; font-size: clamp(3rem, 6.4vw, 6.7rem); }
body.os-page.lang-ar .hero-block .lede { letter-spacing: 0; line-height: 1.85; }
body.os-page.lang-ar :where(.eyebrow, .section-kicker, .page-breadcrumb, .page-index a, .badge) { font-family: inherit; letter-spacing: 0; }
body.os-page.lang-ar .card h3 { font-size: clamp(1.3rem, 1.7vw, 2rem); }
body.os-page.lang-ar :where(.card p, .section p, .prose p, .prose li) { line-height: 1.85; }
body.os-page.lang-ar .tier-card .tier-price { font-family: inherit; letter-spacing: 0; line-height: 1.45; }
body.os-page.lang-ar .tier-includes-block li { padding-inline: 24px 0; }
body.os-page.lang-ar .steps-inline li { padding-inline: 0 20px; }
body.os-page.lang-ar .tier-option input { margin-block-start: 6px; }

@media (max-width: 1280px) {
  body.os-page .site-head .nav { display: grid; grid-template-columns: 1fr auto; gap: 0 20px; padding-block: 12px 0; }
  body.os-page .site-head nav { order: 3; grid-column: 1 / -1; min-width: 0; overflow-x: auto; }
  body.os-page .nav-links { width: max-content; min-width: 100%; justify-content: center; padding-block-end: 0; }
  body.os-page .nav-actions { justify-self: end; }
  body.os-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.os-page .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.os-page .steps li:nth-child(2n + 1) { border-inline-start: var(--q-rule); }
  body.os-page .cards.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.os-page .tier-card { padding: 24px; }
  body.os-page .tier-card .tier-price { font-size: clamp(2.5rem, 4.5vw, 4rem); }
  body.os-page [data-section="plans"] .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.os-page [data-section="plans"] .tiers > :last-child:nth-child(3n + 2) { grid-column: auto; }
  body.os-page [data-section="plans"] .tiers > :last-child:nth-child(2n + 1) { grid-column: span 2; }
  body.os-page [data-section="plans"] .tier-price { font-size: clamp(2rem, 3.5vw, 3rem); }
  body.os-page [data-audit-step="request"] > .wrap { column-gap: 32px; }
  body.os-page .panel.form { padding: 26px; }
}
@media (max-width: 800px) {
  body.os-page .nav-links { justify-content: flex-start; }
  body.os-page .page-breadcrumb { padding-block-start: 18px; font-size: 0.64rem; }
  body.os-page .hero-block { padding-block: 64px 72px; }
  body.os-page .hero-block h1 { max-width: 17ch; margin-block: 22px 36px; font-size: clamp(3.3rem, 9.5vw, 6rem); letter-spacing: -0.055em; line-height: 1.04; }
  body.os-page .hero-block .lede,
  body.os-page .hero-block .note { width: 100%; margin-inline: 0; }
  body.os-page .hero-block .lede { max-width: 620px; font-size: 1.2rem; }
  body.os-page .hero-block::after { inset-inline-end: 4%; inset-block-start: 9%; width: 130px; }
  body.os-page .hero-block .eyebrow { margin-block-end: 28px; }
  body.os-page .page-index { padding-block: 16px; }
  body.os-page .page-index :where(ol, ul) { gap: 4px 20px; }
  body.os-page .page-index > .wrap { flex-direction: column; gap: 0; }
  body.os-page .page-index > .wrap > p { padding-block: 4px 12px; }
  body.os-page .section { padding-block: 64px; }
  body.os-page .section > .wrap { display: block; }
  body.os-page .section h2 { max-width: 22ch; font-size: clamp(2.15rem, 6vw, 3.5rem); line-height: 1.08; margin-block-end: 26px; }
  body.os-page .section .lede { margin-block-end: 32px; }
  body.os-page .section .section-kicker { margin-block-end: 24px; }
  body.os-page .cards { margin-block-start: 30px; }
  body.os-page .card { min-height: 250px; padding: 26px; }
  body.os-page .card h3 { font-size: 1.55rem; }
  body.os-page .card::before,
  body.os-page .card-n { margin-block-end: 38px; }
  body.os-page .cards.tiers { grid-template-columns: 1fr; }
  body.os-page .tier-card { min-height: 330px; gap: 18px; }
  body.os-page .tier-card .tier-price { font-size: 3.6rem; }
  body.os-page .tier-card > .cta,
  body.os-page .tier-card > .cta-ghost { width: auto; }
  body.os-page [data-section="plans"] .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.os-page [data-section="plans"] .tier-price { font-size: 2rem; }
  body.os-page .split,
  body.os-page .dim-map { grid-template-columns: 1fr; }
  body.os-page .dim-map { gap: 28px; }
  body.os-page .report-card { margin-block-start: 32px; }
  body.os-page [data-audit-step="request"] > .wrap { display: block; }
  body.os-page [data-audit-step="request"] > .wrap > .note { margin-block: 28px; }
  body.os-page [data-audit-step="request"] .tier-includes { margin-block: 36px; }
  body.os-page .steps-inline { margin-block-end: 30px; }
  body.os-page .steps-inline li { gap: 10px; padding-inline-end: 16px; font-size: 0.76rem; }
  body.os-page .form { max-width: none; }
  body.os-page .panel.form { padding: 28px; }
  body.os-page .hero-block[data-audit-step] h1 { font-size: clamp(2.9rem, 8.5vw, 5rem); }
  body.os-page .faq { margin-block-start: 34px; }
  body.os-page--contact .section[data-section="lead-form"] > .wrap > .panel { margin-block-start: 24px; }
  body.os-page--legal .section,
  body.os-page--methodology .section { padding-block: 38px; }
  body.os-page--legal .section h2,
  body.os-page--methodology .section h2 { max-width: none; font-size: 1.85rem; }
  body.os-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.os-page .site-foot { padding-block: 56px 28px; }
  body.os-page .site-foot .foot { grid-template-columns: 1fr; gap: 28px; }
  body.os-page .site-foot .foot > nav { grid-column: auto; grid-row: auto; }
  body.os-page .site-foot .foot > .foot-owner { margin-block-start: 4px; }
  body.os-page.lang-ar .hero-block h1 { font-size: clamp(2.65rem, 7.3vw, 5.5rem); line-height: 1.5; }
  body.os-page.lang-ar .section h2 { line-height: 1.55; }
}
@media (max-width: 480px) {
  body.os-page .site-head .nav { gap: 0 12px; }
  body.os-page .brand img { width: clamp(88px, 28vw, 120px); }
  body.os-page .nav-actions { gap: 6px; }
  body.os-page .nav-actions .cta { min-height: 44px; padding: 10px; font-size: 0.64rem; }
  body.os-page .lang-switch { padding: 8px; font-size: 0.75rem; }
  body.os-page .nav-links { gap: 0 18px; }
  body.os-page .nav-links a { font-size: 0.75rem; }
  body.os-page .hero-block { padding-block: 52px 62px; }
  body.os-page .hero-block h1 { font-size: clamp(3rem, 11.2vw, 4.6rem); letter-spacing: -0.06em; }
  body.os-page .hero-block .lede { font-size: 1.1rem; }
  body.os-page .page-index a { font-size: 0.65rem; }
  body.os-page .eyebrow,
  body.os-page .section-kicker { font-size: 0.66rem; }
  body.os-page .cards,
  body.os-page--solutions .cards,
  body.os-page .steps,
  body.os-page [data-section="plans"] .tiers { grid-template-columns: 1fr; }
  body.os-page [data-section="plans"] .tiers > :last-child { grid-column: auto; }
  body.os-page .card { min-height: 235px; padding: 24px; }
  body.os-page .card::before,
  body.os-page .card-n { margin-block-end: 36px; }
  body.os-page .steps li { border-inline-start: var(--q-rule); padding: 24px; }
  body.os-page .steps li::before { margin-block-end: 34px; }
  body.os-page .steps-inline { flex-direction: column; }
  body.os-page .steps-inline li { padding-block: 14px; border-block-end: var(--q-rule); }
  body.os-page .steps-inline li:last-child { border-block-end: 0; }
  body.os-page .panel.form { padding: 22px 18px; }
  body.os-page .tier-option { padding: 14px 12px; }
  body.os-page .form button { width: 100%; justify-self: stretch; }
  body.os-page .form .check { gap: 10px; }
  body.os-page .tier-card { min-height: 325px; }
  body.os-page .tier-card > .cta,
  body.os-page .tier-card > .cta-ghost { width: 100%; }
  body.os-page .faq summary { gap: 20px; font-size: 1.05rem; }
  body.os-page .faq details p { padding-inline-end: 0; }
  body.os-page .cta-band h2 { font-size: 3rem; line-height: 1.08; }
  body.os-page .status-row { gap: 14px; }
  body.os-page .status-row > span:last-child { width: 100%; }
  body.os-page #status-summary { padding: 18px; }
  body.os-page .incident { padding: 22px 18px; }
  body.os-page .tiles { grid-template-columns: 1fr; }
  body.os-page .tiles li { min-height: 120px; }
  body.os-page .buy-bar .wrap { gap: 10px; padding-block: 12px; }
  body.os-page .buy-bar p { font-size: 0.8rem; }
  body.os-page.lang-ar .hero-block h1 { font-size: 2.65rem; letter-spacing: 0; line-height: 1.55; }
  body.os-page.lang-ar .section h2 { font-size: 1.95rem; }
  body.os-page.lang-ar .cta-band h2 { font-size: 2.5rem; line-height: 1.5; }
}
@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; }
}