/* ================================================================
   RIYO STUDIO — Telemetry skin for the pages that keep their own layout
   Loaded after as-built.css and the page's own stylesheet(s). It changes how
   the existing components look (surfaces, type, borders, colour) and nothing
   about what they are: every class, id and attribute stays where it was.
   ================================================================ */

/* ── Page shell ──────────────────────────────────────────────────── */
body.ab-legacy { display: block; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; padding: 0 !important; }
html[lang="ar"] body.ab-legacy { font-family: var(--arabic); font-size: 17px; line-height: 1.7; }
body.ab-legacy::before, body.ab-legacy::after { content: none !important; display: none !important; }
body.ab-legacy > #quantum-field, body.ab-legacy #quantum-field { display: none !important; }
body.ab-legacy #main { scroll-margin-top: 16px; }
body.ab-legacy .ab-title { margin-top: 64px; }
body.ab-legacy:not(.ab-fam-report) h1, body.ab-legacy:not(.ab-fam-report) h2, body.ab-legacy:not(.ab-fam-report) h3, body.ab-legacy:not(.ab-fam-report) h4 { font-family: var(--sans); letter-spacing: -0.02em; }
html[lang="ar"] body.ab-legacy h1, html[lang="ar"] body.ab-legacy h2, html[lang="ar"] body.ab-legacy h3, html[lang="ar"] body.ab-legacy h4 { font-family: var(--arabic); letter-spacing: 0; }
body.ab-legacy ::selection { background: var(--signal); color: var(--on-signal); }

/* The one floating thing the brief rules out. The element and its hook stay. */
body.ab-legacy .rs-wa-fab, body.ab-legacy .check-pill, body.ab-legacy #riyo-bottom-nav { display: none !important; }

/* ── The new header on a page that also loads the old navigation rules ── */
body.ab-legacy .ab-head { position: static; z-index: 20; }
body.ab-legacy .ab-nav { position: sticky; inset: 0 auto auto 0; width: 100%; background: var(--bg-2); border: 0; border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; z-index: 100; }
body.ab-legacy .ab-nav .nav-inner { height: auto; max-width: var(--wrap); margin-inline: auto; padding: 14px var(--gutter); justify-content: flex-start; gap: 12px 28px; transition: none; }
body.ab-legacy .ab-nav .nav-brand { gap: 10px; margin: 0; padding: 0; }
body.ab-legacy .ab-nav .nav-brand-icon-img { width: 26px; height: 26px; border-radius: 0; filter: none; transform: none; }
body.ab-legacy .ab-nav .nav-brand-name { font-family: var(--sans) !important; font-weight: 700 !important; font-size: 16px; letter-spacing: 0 !important; background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--fg) !important; }
body.ab-legacy .ab-nav .nav-links { margin: 0; gap: 4px 22px; }
body.ab-legacy #main-nav .nav-links { position: static; left: auto; transform: none; margin: 0; }
body.ab-legacy .ab-nav .nav-link { color: var(--fg-3); font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 6px 0; }
body.ab-legacy .ab-nav .nav-link::after { content: none; }
body.ab-legacy .ab-nav .nav-link:hover, body.ab-legacy .ab-nav .nav-link.active, body.ab-legacy .ab-nav .nav-link[aria-current="page"] { color: var(--fg); }
body.ab-legacy .ab-nav .nav-end { margin-inline-start: auto; gap: 18px; }
body.ab-legacy .ab-nav .nav-lang { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 500; color: var(--fg-2); display: inline; font-family: inherit; }
body.ab-legacy .ab-nav .nav-lang:hover { background: none; color: var(--signal); }
body.ab-legacy .ab-nav .nav-cta-btn { background: var(--signal); color: var(--on-signal); border: 0; border-radius: var(--r); box-shadow: none; padding: 10px 16px; font-size: 14px; font-weight: 700; letter-spacing: 0; transform: none !important; }
body.ab-legacy .ab-nav .nav-cta-btn:hover { background: var(--fg); transform: none; box-shadow: none; }
@media (max-width: 767px) {
  body.ab-legacy .ab-nav .nav-inner { gap: 8px; padding-inline: 16px; }
  body.ab-legacy .ab-nav .nav-brand { gap: 8px; margin-inline-end: auto; }
  body.ab-legacy .ab-nav .nav-brand-name { font-size: 15px; }
  body.ab-legacy .ab-nav .nav-brand-icon-img { width: 23px; height: 23px; }
  body.ab-legacy .ab-nav .nav-cta-btn { padding: 9px 13px; font-size: 13.5px; }
  body.ab-legacy .ab-nav .nav-links { gap: 0; margin: 0; }
  body.ab-legacy .ab-nav .nav-link { padding: 12px 0; }
  body.ab-legacy .ab-nav .nav-lang { display: block; padding: 12px 0; font-size: 15px; }
  html.ab-js body.ab-legacy .ab-nav:not(.is-open) .nav-lang { display: none; }
}

/* ── Buttons and links shared by the legacy components ───────────── */
body.ab-legacy .rs-btn, body.ab-legacy .art-btn, body.ab-legacy:not(.ab-fam-report) .pl-btn, body.ab-legacy .nf-primary { border-radius: var(--r); box-shadow: none; transform: none; font-weight: 700; letter-spacing: 0; }
body.ab-legacy .rs-btn--solid, body.ab-legacy .art-btn, body.ab-legacy:not(.ab-fam-report) .pl-btn--solid, body.ab-legacy .nf-primary { background: var(--signal); color: var(--on-signal); border: 1px solid var(--signal); background-image: none; }
body.ab-legacy .rs-btn--solid:hover, body.ab-legacy .art-btn:hover, body.ab-legacy:not(.ab-fam-report) .pl-btn--solid:hover, body.ab-legacy .nf-primary:hover { background: var(--fg); border-color: var(--fg); color: var(--on-signal); }
body.ab-legacy .rs-btn--line, body.ab-legacy:not(.ab-fam-report) .pl-btn--line, body.ab-legacy:not(.ab-fam-report) .pl-btn--ghost { background: none; border: 1px solid var(--line-2); color: var(--fg); }
body.ab-legacy .rs-btn--line:hover, body.ab-legacy:not(.ab-fam-report) .pl-btn--line:hover, body.ab-legacy:not(.ab-fam-report) .pl-btn--ghost:hover { border-color: var(--fg-3); background: none; color: var(--fg); }
body.ab-legacy .rs-link { color: var(--signal); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body.ab-legacy .rs-link:hover { color: var(--fg); }

/* ── Inputs ──────────────────────────────────────────────────────── */
body.ab-legacy:not(.ab-fam-report) input[type="text"], body.ab-legacy:not(.ab-fam-report) input[type="email"], body.ab-legacy:not(.ab-fam-report) input[type="url"], body.ab-legacy:not(.ab-fam-report) input[type="number"], body.ab-legacy:not(.ab-fam-report) input[type="search"], body.ab-legacy:not(.ab-fam-report) input[type="tel"], body.ab-legacy:not(.ab-fam-report) input[type="date"], body.ab-legacy:not(.ab-fam-report) input[type="password"], body.ab-legacy:not(.ab-fam-report) textarea, body.ab-legacy:not(.ab-fam-report) select { background-color: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--fg); box-shadow: none; font-family: inherit; }
body.ab-legacy:not(.ab-fam-report) input:focus-visible, body.ab-legacy:not(.ab-fam-report) textarea:focus-visible, body.ab-legacy:not(.ab-fam-report) select:focus-visible, body.ab-legacy:not(.ab-fam-report) button:focus-visible, body.ab-legacy:not(.ab-fam-report) a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; box-shadow: none; }

/* ── Studio pages (home.css components): plans, monitor, audit, tools, Gulf ── */
body.ab-fam-home, body.ab-fam-home.home { background: var(--bg); }
.ab-fam-home .rs-hero-bg, .ab-fam-home .rs-stage-glow, .ab-fam-home .rs-contact-glow, .ab-fam-home .rs-pulse, .ab-fam-home .rs-live { display: none !important; }
.ab-fam-home .rs-hero { padding-block: 64px 48px; background: none; }
.ab-fam-home .rs-sec { padding-block: var(--sec); background: none; border-top: 1px solid var(--line); }
.ab-fam-home .rs-wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.ab-fam-home .rs-display, .ab-fam-home .rs-h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; text-transform: none; font-variation-settings: 'wdth' 100; }
.ab-fam-home .rs-display { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
.ab-fam-home .rs-h2 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; }
.ab-fam-home .rs-display em, .ab-fam-home .rs-h2 em, .ab-fam-home em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
/* Care plans hero and lead-in title: second part in the accent green. */
#pp-heading em, #pc-plans-heading em { color: var(--em-2); -webkit-text-fill-color: var(--em-2); }
/* Phone hero sizing is now handled by the shared hero rule in as-built.css so
   every page matches; no per-heading override here. */
.ab-fam-home .rs-h3 { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ab-fam-home .rs-hero-lede, .ab-fam-home .rs-lede { font-size: 17px; line-height: 1.6; color: var(--fg); }
.ab-fam-home .rs-kicker, .ab-fam-home .rs-pp-eyebrow, .ab-fam-home .rs-services-group { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); background: none; border: 0; padding: 0; box-shadow: none; }
.ab-fam-home .rs-kicker span, .ab-fam-home .rs-index { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--signal-text); background: none; border: 0; padding: 0; margin-inline-end: 8px; width: auto; height: auto; border-radius: 0; display: inline; }
.ab-fam-home .rs-pill, .ab-fam-home .rs-tag, .ab-fam-home .rs-check-badge, .ab-fam-home .rs-float { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
.ab-fam-home .rs-tag { color: var(--signal); }
.ab-fam-home .rs-card, .ab-fam-home .rs-plans, .ab-fam-home .rs-contact-panel, .ab-fam-home .rs-contact-aside, .ab-fam-home .rs-wcheck, .ab-fam-home .rs-next, .ab-fam-home .rs-check, .ab-fam-home .rs-work, .ab-fam-home .rs-founder, .ab-fam-home .rs-faq details, .ab-fam-home .rs-wt-start, .ab-fam-home .rs-wt-manage, .ab-fam-home .rs-wt-status, .ab-fam-home .rs-pp-from, .ab-fam-home .rs-pp-report, .ab-fam-home .rs-pp-existing, .ab-fam-home .rs-pp-cta, .ab-fam-home .rs-pp-watch, .ab-fam-home .rs-gf-hours, .ab-fam-home .rs-tl-card, .ab-fam-home .rs-wt-facts > div, .ab-fam-home .rs-pp-paths div, .ab-fam-home .rs-plans-list li, .ab-fam-home .rs-wcheck-deep li { background: var(--bg-2) !important; background-image: none !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ab-fam-home .rs-card:hover, .ab-fam-home .rs-work:hover { border-color: var(--line-2) !important; transform: none; }
.ab-fam-home .rs-icon, .ab-fam-home .rs-founder-mark, .ab-fam-home .rs-work-emblem { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; color: var(--signal); }
.ab-fam-home .rs-step-num, .ab-fam-home .rs-pp-ring, .ab-fam-home .rs-browser-bar i { box-shadow: none; background-image: none; }
.ab-fam-home .rs-step-num { background: var(--bg); border: 1px solid var(--line-2); color: var(--fg); font-family: var(--mono); }.ab-fam-home .rs-btn { padding: 14px 22px; font-size: 15px; border-radius: var(--r); }
.ab-fam-home .rs-btn--solid { background-image: none; box-shadow: none; }
.ab-fam-home .rs-wcheck-form input, .ab-fam-home .rs-wt-form input[type=text], .ab-fam-home .rs-tl-form input { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: none; color: var(--fg); }
.ab-fam-home .rs-list li::before, .ab-fam-home .rs-hero-facts svg { color: var(--signal); }
.ab-fam-home .rs-card p, .ab-fam-home .rs-list li, .ab-fam-home .rs-service p, .ab-fam-home .rs-plans-list li { color: var(--fg-2); }.ab-fam-home .rs-hero-grid { align-items: start; }

/* ── Guides: the hub and the articles ────────────────────────────── */
.ab-fam-guide { background: var(--bg); }
.ab-fam-guide .gd-main { max-width: none; margin: 0; padding: 0; background: none; }
.gd-head { padding-block: 72px 40px; }
.gd-kicker { margin: 0 0 18px; }
.gd-h1 { margin: 0; max-width: 18em; text-wrap: balance; }
.gd-sub { margin: 18px 0 0; max-width: 60em; font-size: 17px; line-height: 1.6; color: var(--fg-2); }
.gd-list { padding-block: 0 72px; }
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gd-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--fg); text-decoration: none; transition: border-color 0.2s ease; }
.gd-card:hover { border-color: var(--signal); }
.gd-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.gd-card-top { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.gd-no { color: var(--signal-text); }
.gd-tag { color: var(--fg-3); }
.gd-card-title { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.gd-card-desc { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.gd-more-link { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--signal-text); }
.gd-cta { padding-block: 0 96px; }
.gd-cta-in { padding: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.gd-cta-in h2 { margin: 0 0 10px; }
.gd-cta-in p { margin: 0 0 22px; max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.gd-form { max-width: 560px; }
.gd-form input { height: 54px; font-size: 16px; }
.gd-form button { height: 54px; font-size: 15px; padding-inline: 20px; }

/* Article: a contents rail beside a reading column */
.gd-art-wrap { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 0 64px; align-items: start; padding-block: 56px 32px; }
.gd-rail { position: sticky; top: 96px; font-size: 14px; }
.gd-toc-h { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.gd-rail ol { margin: 0; padding: 0; list-style: none; counter-reset: gd; }
.gd-rail li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 7px 0; line-height: 1.4; counter-increment: gd; }
.gd-rail li::before { content: counter(gd, decimal-leading-zero); padding-top: 2px; font-family: var(--mono); font-size: 12px; color: var(--signal-text); }
.gd-rail a { color: var(--fg-2); }
.gd-rail a:hover { color: var(--fg); }
.ab-fam-guide .art { max-width: none; margin: 0; }
.ab-fam-guide .art-kicker { margin: 0 0 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ab-fam-guide .art-kicker a { color: var(--fg-3); text-decoration: none; }
.ab-fam-guide .art-kicker a:hover { color: var(--fg); }
.ab-fam-guide .art-kicker a::before { content: "\2190"; margin-inline-end: 8px; }
html[dir="rtl"] .ab-fam-guide .art-kicker a::before { content: "\2192"; }
.ab-fam-guide .art h1 { margin: 0; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.ab-fam-guide .art .ab-meta { margin: 16px 0 24px; }
.ab-fam-guide .art-lede { margin: 0 0 20px; font-size: 19px; line-height: 1.6; color: var(--fg); }
.ab-fam-guide .art p, .ab-fam-guide .art li { font-size: 17px; line-height: 1.7; color: var(--fg); }
.ab-fam-guide .art h2 { margin: 52px 0 14px; padding-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.ab-fam-guide .art h3 { margin: 30px 0 8px; font-size: 18px; line-height: 1.35; font-weight: 650; color: var(--fg); }
.ab-fam-guide .art strong { color: var(--fg); font-weight: 650; }
.ab-fam-guide .art a { color: var(--signal); }
.ab-fam-guide .art ul { margin: 12px 0 22px; padding-inline-start: 1.3em; list-style: disc; }
.ab-fam-guide .art li::marker { color: var(--signal); }
.ab-fam-guide .art-cta { margin: 44px 0 0; padding: 28px; background: var(--bg-2); background-image: none; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; }
.ab-fam-guide .art-cta + .art-cta { margin-top: 16px; }
.ab-fam-guide .art-cta--monitor { border-inline-start: 3px solid var(--signal); }
.ab-fam-guide .art-cta h2 { margin: 0 0 10px; padding: 0; border: 0; }
.ab-fam-guide .art-cta p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.ab-fam-guide .art-cta-form { display: flex; flex-wrap: wrap; }
.ab-fam-guide .art-cta-form input { flex: 1 1 220px; height: 52px; border-radius: var(--r) 0 0 var(--r); border-inline-end: 0; }
.ab-fam-guide .art-cta-form .art-btn { height: 52px; border-radius: 0 var(--r) var(--r) 0; }
html[dir="rtl"] .ab-fam-guide .art-cta-form input { border-radius: 0 var(--r) var(--r) 0; border-inline-end: 1px solid var(--line-2); border-inline-start: 0; }
html[dir="rtl"] .ab-fam-guide .art-cta-form .art-btn { border-radius: var(--r) 0 0 var(--r); }
.gd-more { padding-block: 24px 96px; }
.gd-more .ab-h2 { margin: 0; }
.gd-more .gd-grid { margin-top: 24px; }
html[lang="ar"] .gd-tag, html[lang="ar"] .gd-toc-h { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .gd-card-title { letter-spacing: 0; }
@media (max-width: 1099px) {
  .gd-art-wrap { grid-template-columns: minmax(0, 700px); padding-block: 40px 24px; }
  .gd-rail { display: none; }
}
@media (max-width: 1023px) { .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .gd-grid { grid-template-columns: minmax(0, 1fr); }
  .gd-head { padding-block: 48px 28px; }
  .gd-cta-in { padding: 22px; }
  .ab-fam-guide .art h2 { margin-top: 40px; }
  .ab-fam-guide .art-cta h2 { margin-top: 0; }
  .ab-fam-guide .art-cta { padding: 22px; }
  .ab-fam-guide .art-cta-form { flex-direction: column; gap: 10px; }
  .ab-fam-guide .art-cta-form input, .ab-fam-guide .art-cta-form .art-btn { flex: none; width: 100%; border-radius: var(--r); border-inline-end: 1px solid var(--line-2); }
  html[dir="rtl"] .ab-fam-guide .art-cta-form input, html[dir="rtl"] .ab-fam-guide .art-cta-form .art-btn { border-radius: var(--r); border-inline-start: 1px solid var(--line-2); }
}

/* ── Legal and reviews: a plain article ──────────────────────────── */
.ab-fam-legal .legal-main { padding: 56px var(--gutter) 24px !important; min-height: 0 !important; }
.ab-fam-legal .legal-content { max-width: 760px !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none; }
.ab-fam-legal .legal-content h1 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.ab-fam-legal .legal-content h2 { font-size: 24px; font-weight: 700; margin-top: 36px; }
.ab-fam-legal .legal-content p, .ab-fam-legal .legal-content li { font-size: 17px; line-height: 1.65; color: var(--fg); }
.ab-fam-legal .legal-content p[style*="monospace"] { font-family: var(--sans) !important; font-size: 13px !important; font-weight: 500; color: var(--fg-3) !important; }
.ab-fam-legal .legal-content a { color: var(--signal); }
.ab-fam-legal .highlight-box { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-inline-start: 2px solid var(--signal) !important; border-radius: var(--r) !important; box-shadow: none !important; }

/* ── 404 ─────────────────────────────────────────────────────────── */
.ab-fam-nf .nf-main { padding: 72px var(--gutter); }
.ab-fam-nf .nf-code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--signal); background: none; -webkit-text-fill-color: currentColor; }
.ab-fam-nf .nf-wrap h1 { font-size: clamp(30px, 2.7vw, 40px); font-weight: 700; letter-spacing: -0.02em; }
.ab-fam-nf .nf-links a:not(.nf-primary) { border: 1px solid var(--line-2); border-radius: var(--r); background: none; color: var(--fg); box-shadow: none; }
.ab-fam-nf .nf-ar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; }

/* ── Tool pages and every page on style.css: the palette comes from tokens ── */
body.ab-legacy {
  --bg-deep: var(--bg);
  --bg-surface: var(--bg-2);
  --bg-surface-hover: var(--bg-3);
  --bg-card: var(--bg-2);
  --accent: var(--signal);
  --accent-dim: var(--signal);
  --accent-bright: var(--signal);
  --accent-glow: transparent;
  --accent-soft: var(--bg-3);
  --text: var(--fg);
  --text-dim: var(--fg-2);
  --text-faint: var(--fg-2);
  --text-muted: var(--fg-3);
  --border: var(--line);
  --border-hover: var(--line-2);
  --border-accent: var(--line-2);
  --shadow-card: none;
  --shadow-lg: none;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 6px;
  --radius-pill: 4px;
  --em-2: var(--signal);
  --shiftcore: var(--signal);
  --shiftcore-glow: transparent;
}

/* ── The six tools: the old fixed-nav offsets go, surfaces take the tokens ── */
.ab-fam-tool .invoice-container, .ab-fam-tool .qr-container { margin-top: 40px; }
.ab-fam-tool .tool-main { padding-top: 40px; }
.ab-fam-tool .logo-maker-grid { margin-top: 40px; }
.ab-fam-tool .studio-hook-card, .ab-fam-tool .tool-panel, .ab-fam-tool .glass-panel, .ab-fam-tool [class*="-panel"]:not(.cmd-palette-modal), .ab-fam-tool .rv-card { background-image: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ab-fam-tool h1 span, .ab-fam-tool h1 em, .ab-fam-tool .gradient-text, .ab-fam-tool .text-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--signal); font-style: normal; }
.ab-fam-tool .studio-hook-btn { background: var(--signal); color: var(--on-signal); border-radius: var(--r); box-shadow: none; }
.ab-fam-tool .studio-hook-link { color: var(--signal); }
.ab-fam-tool .studio-hook-kicker { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-fam-tool button[class*="btn"], .ab-fam-tool .btn { box-shadow: none; }
.ab-fam-tool .rv-sec { background: none; }
.ab-fam-tool .mobile-tool-fab { background: var(--signal); color: var(--on-signal); border-radius: var(--r); box-shadow: none; }
@media (max-width: 767px) { .ab-fam-tool .invoice-container, .ab-fam-tool .qr-container, .ab-fam-tool .logo-maker-grid { margin-top: 20px; } .ab-fam-tool .tool-main { padding-top: 20px; } }

/* ── The project planner ─────────────────────────────────────────── */
.ab-fam-plan .pl-progress { top: 0; }
.ab-fam-plan .pl-progress i { background: var(--signal); box-shadow: none; }
html[dir="rtl"] .ab-fam-plan .pl-progress i { background: var(--signal); }
.ab-fam-plan .pl-main { padding-block: 40px 56px; }
.ab-fam-plan .pl-count { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.ab-fam-plan [class*="pl-opt"], .ab-fam-plan .pl-card, .ab-fam-plan [class*="pl-choice"] { border-radius: var(--r-card); box-shadow: none; background-image: none; }
.ab-fam-plan .pl-btn { padding: 14px 22px; }

/* The page clips sideways overflow without becoming its own scroller, so the sticky buttons below can stick.
   style.css forces hidden overflow on phones for the old tool pages; the planner does not need it. */
html:has(> body.ab-fam-plan), body.ab-fam-plan { overflow-x: clip !important; overflow-y: visible !important; }

/* The planner's questions: one card, the same surface as the care plan page, with Back and Continue in reach on a phone */
.ab-fam-plan .pl-count { max-width: 820px; margin-inline: auto; }
.ab-fam-plan .pl-step { position: relative; max-width: 820px; margin-inline: auto; padding: clamp(22px, 2.6vw, 36px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: linear-gradient(180deg, #181f29 0%, #131921 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.35), 0 50px 100px -50px rgba(0, 0, 0, 0.85); }
.ab-fam-plan .pl-step::before { content: ''; position: absolute; inset: 0 32px auto 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(111, 216, 179, 0.55), transparent); pointer-events: none; }
.ab-fam-plan .pl-step .pl-nav { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ab-fam-plan .pl-step .pl-option-card { background: #0e1319; border-color: rgba(255, 255, 255, 0.1); }
.ab-fam-plan .pl-step .pl-option:hover .pl-option-card { border-color: rgba(255, 255, 255, 0.24); }
.ab-fam-plan .pl-step .pl-option input:checked + .pl-option-card { border-color: rgba(111, 216, 179, 0.7); background: rgba(111, 216, 179, 0.06); }
.ab-fam-plan .pl-person { display: flex; align-items: center; gap: 12px; margin: -6px 0 22px; }
.ab-fam-plan .pl-person img { flex: none; width: 40px; height: 40px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; }
.ab-fam-plan .pl-person p { margin: 0; }
.ab-fam-plan .pl-person b { display: block; font-size: 14.5px; font-weight: 650; color: var(--fg); }
.ab-fam-plan .pl-person span { display: block; margin-top: 1px; font-size: 13px; color: var(--fg-3); }
.ab-fam-plan .pl-care-note { margin: 4px 0 18px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.03); font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.ab-fam-plan .pl-care-note::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 10px; border-radius: 50%; background: var(--signal); vertical-align: 1px; }
@media (max-width: 640px) {
  .ab-fam-plan .pl-main { padding-block: 20px 32px; }
  .ab-fam-plan .pl-step { padding: 18px 16px; border-radius: 16px; }
  .ab-fam-plan .pl-step::before { inset-inline: 20px; }
  .ab-fam-plan .pl-step .pl-nav { position: sticky; bottom: 0; z-index: 5; margin: 18px -16px -18px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 0 16px 16px; background: #131921; }
  .ab-fam-plan .pl-step .pl-option-card { padding: 12px 14px; gap: 12px; border-radius: 12px; }
  .ab-fam-plan .pl-step .pl-option-icon { width: 36px; height: 36px; border-radius: 10px; }
  .ab-fam-plan .pl-step .pl-option-text b { font-size: 15px; }
  .ab-fam-plan .pl-step .pl-option-text small { font-size: 13px; }
  .ab-fam-plan .pl-step .pl-options { gap: 8px; }
}
/* the installed app keeps its tab bar along the bottom of a phone, so the sticky buttons sit just above it */
@media (display-mode: standalone) and (max-width: 640px) {
  .ab-fam-plan .pl-step .pl-nav { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: 14px; }
}

/* ── Arabic: one face (IBM Plex Sans Arabic), no tracking, no serif display ── */
html[lang="ar"] .ab-fam-home .rs-display, html[lang="ar"] .ab-fam-home .rs-h2, html[lang="ar"] .ab-fam-home .rs-h3, html[lang="ar"] .ab-fam-home .rs-hero-lede, html[lang="ar"] .ab-fam-home .rs-kicker, html[lang="ar"] .ab-fam-home .rs-tag, html[lang="ar"] .ab-fam-home em, html[lang="ar"] .ab-fam-guide .art h1, html[lang="ar"] .ab-fam-guide .art h2, html[lang="ar"] .ab-fam-legal .legal-content h1, html[lang="ar"] .ab-fam-legal .legal-content h2 { font-family: var(--arabic); letter-spacing: 0; font-style: normal; }
html[lang="ar"] .ab-fam-home .rs-display { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.2; }
html[lang="ar"] body.ab-legacy * { letter-spacing: 0; }

.ab-fam-home .rs-tag, .ab-fam-home .rs-tag--client { font-size: 13px !important; }

/* ── Fixes from the page-by-page review ──────────────────────────── */
.ab-fam-guide .art a.art-btn { color: var(--on-signal); }
.ab-fam-guide .art a.art-btn:hover { color: var(--on-signal); }
.ab-fam-guide .gd-kicker { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--fg-3); }
body.ab-legacy .ab-nav .nav-cta-btn { background: var(--signal) !important; color: var(--on-signal) !important; }
body.ab-legacy .ab-nav .nav-cta-btn:hover { background: var(--fg) !important; }
.ab-fam-nf .nf-code { border: 0; border-radius: 0; padding: 0; background: none; }
.ab-fam-nf .nf-ar, .ab-fam-nf .nf-ar * { font-family: var(--arabic); letter-spacing: 0; }
.ab-fam-nf .nf-primary { color: var(--on-signal); }

/* Links inside running text are underlined, so colour is not the only cue. */
.ab-fam-legal .legal-content a, .ab-fam-guide .art p a, .ab-fam-guide .art li a { text-decoration: underline; text-underline-offset: 3px; }
.ab-fam-guide .art a.art-btn, .ab-fam-guide .gd-card, .ab-fam-guide .gd-rail a { text-decoration: none; }

/* ── Chrome-only re-skin: sample reports, owner form, redirect stubs ── */
/* The sample report is embedded in /audit without its page chrome. */
.ax-embed .ab-head, .ax-embed .ab-title, .ax-embed .ab-skip { display: none !important; }
.ab-fam-report .pl-main { padding-top: 40px; }
.ab-fam-report .ax-example { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; color: var(--fg-2); }

.ab-fam-owner .wrap { margin: 56px auto 72px; padding-inline: var(--gutter); max-width: 560px; }
.ab-fam-owner .tag { background: none; color: var(--fg-3); padding: 0; border-radius: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ab-fam-owner h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.ab-fam-owner p.sub, .ab-fam-owner label, .ab-fam-owner .remember { color: var(--fg-2); font-size: 15px; }
.ab-fam-owner .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; }
.ab-fam-owner input { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--fg); }
.ab-fam-owner input:focus { border-color: var(--signal); }
.ab-fam-owner button { background: var(--signal); color: var(--on-signal); border-radius: var(--r); background-image: none; }
.ab-fam-owner .out.ok { color: var(--signal); }
.ab-fam-owner .out.err { color: var(--bad); }
.ab-fam-owner .note { color: var(--fg-3); font-size: 13px; }

.ab-fam-stub main { padding: 72px var(--gutter); }
.ab-fam-stub h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; }
.ab-fam-stub main a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* The report renderer inherits type, colour and the plan.css/style.css variables from <body>.
   Its screen and print output must not move, so on the sample-report pages body keeps exactly
   what it had; only the chrome around the report (strip, nav, footer) takes the new tokens. */
body.ab-legacy.ab-fam-report {
  --ink: #050608;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --ivory: #F3EFE6;
  --mist: #A9AEB6;
  --dim: #80868F;
  --mint: #6FD8B3;
  --mint-2: #B4F5DA;
  --mint-soft: rgba(111, 216, 179, 0.1);
  --sans: 'Inter', 'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', sans-serif;
  --bg-deep: #050608;
  --bg-surface: rgba(255, 255, 255, 0.03);
  --bg-surface-hover: rgba(255, 255, 255, 0.06);
  --bg-card: rgba(255, 255, 255, 0.02);
  --accent: #10B981;
  --accent-dim: #059669;
  --accent-bright: #34D399;
  --accent-glow: rgba(16, 185, 129, 0.25);
  --accent-soft: rgba(16, 185, 129, 0.06);
  --text: #FFFFFF;
  --text-dim: rgba(255, 255, 255, 0.85);
  --text-faint: rgba(255, 255, 255, 0.65);
  --text-muted: rgba(255, 255, 255, 0.50);
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(255, 255, 255, 0.2);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: #F3EFE6;
}
/* …while the chrome inside it keeps the new look. */
body.ab-fam-report .ab-head, body.ab-fam-report .ab-title { --line: #1F2933; --line-2: #2B3A48; --bg-2: #0E141B; --bg-3: #121A23; font-family: 'Archivo', system-ui, sans-serif; line-height: 1.55; color: #E6EDF3; }
body.ab-fam-report .ab-head *, body.ab-fam-report .ab-title * { text-decoration: none; }

/* ── Tool UI: no control or label below 12px; Video Studio's tabs 13px. The invoice
   paper (the document being made) keeps its own scale, as it is the product, not the interface. ── */
.ab-fam-tool [style*="font-size: 0.53rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.53rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.6rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.6rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.62rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.62rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.66rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.66rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.67rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.67rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.68rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.68rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.7rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.7rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.72rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.72rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size: 0.74rem"]:not(.inv-label),
.ab-fam-tool [style*="font-size:0.74rem"]:not(.inv-label) { font-size: 12px !important; }
.ab-fam-tool .vs-hint, .ab-fam-tool .vs-badge-private, .ab-fam-tool .vs-story-tip, .ab-fam-tool .vs-preset, .ab-fam-tool .vs-fmt-aspect small, .ab-fam-tool .vs-addbtn small, .ab-fam-tool .vs-cap-row .vs-cap-time, .ab-fam-tool .vs-audio-row .vs-au-meta, .ab-fam-tool .vs-card-dur, .ab-fam-tool .vs-field small { font-size: 12px !important; }
.ab-fam-tool .vs-tab, .ab-fam-tool .vs-tab * { font-size: 13px !important; }
.ab-fam-tool .cyber-label, .ab-fam-tool label.cyber-label { font-size: 12px !important; }
.ab-fam-tool .cmd-shortcut { font-size: 12px; }

.ab-fam-tool small { font-size: 12px !important; }
.ab-fam-tool select option { font-size: 13px; }

body.ab-page.ab-fam-owner button { background: var(--signal); color: var(--on-signal); }

/* Text on a signal-coloured control is the dark on-signal ink, never light. */
.ab-fam-tool [class*="primary"], .ab-fam-tool [class*="primary"] *, .ab-fam-tool .mode-tab.active, .ab-fam-tool .mobile-tool-fab, .ab-fam-tool .mobile-tool-fab * { color: var(--on-signal) !important; }.ab-fam-tool #layers-list button { min-width: 24px; min-height: 24px; }

/* The glow behind the sample report card is a decoration, and it pushed the page wider than the viewport. */
.ab-fam-home .rs-pp-report::before { display: none; }
.ab-fam-home .rs-kicker.ab-kicker { display: block; gap: 0; }
.ab-fam-home .rs-kicker.ab-kicker .ab-g { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; min-width: 0; height: auto; display: inline; }

/* ── QA pass: one type scale on every page ─────────────────────────── */
.ab-fam-home .rs-display, .ab-fam-home .rs-tl-h1, .ab-fam-guide main > header h1, .ab-fam-guide .gd-h1, .ab-fam-legal main h1, .ab-fam-owner main h1 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
html[lang="ar"] .ab-fam-home .rs-display, html[lang="ar"] .ab-fam-home .rs-tl-h1, html[lang="ar"] .ab-fam-guide .gd-h1, html[lang="ar"] .ab-fam-legal main h1 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.3; letter-spacing: 0; }
h1 em, h2 em, .ab-fam-home .rs-display em, .ab-fam-home .rs-h2 em { font-size: inherit; }
.ab-fam-guide .art h2, .ab-fam-guide main h2, .ab-fam-legal .legal-content h2, .ab-fam-legal main h2, .ab-fam-home h2.rs-h3, .ab-fam-home h2.au-start-h, .ab-fam-home .rs-h3 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
html[lang="ar"] .ab-fam-guide .art h2, html[lang="ar"] .ab-fam-guide main h2, html[lang="ar"] .ab-fam-legal main h2, html[lang="ar"] .ab-fam-home h2.rs-h3, html[lang="ar"] .ab-fam-home .rs-h3 { letter-spacing: 0; }

/* Small labels in the legacy pages take the mono label style */
.ab-fam-home .rs-gf-hours-label, .ab-fam-home .rs-wt-label, .ab-fam-home .rs-wt-tier-name, .ab-fam-home .au-ours-kicker, .ab-fam-home .rs-pp-watch-name, .ab-fam-home .rs-mail-label, .ab-fam-home .rs-pp-report-label, .ab-fam-home .rs-pp-report small, .ab-fam-home .rs-pp-report i, .ab-fam-home .rs-pp-report span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; }
html[lang="ar"] .ab-fam-home .rs-gf-hours-label, html[lang="ar"] .ab-fam-home .rs-wt-label, html[lang="ar"] .ab-fam-home .rs-wt-tier-name, html[lang="ar"] .ab-fam-home .au-ours-kicker, html[lang="ar"] .ab-fam-home .rs-pp-watch-name, html[lang="ar"] .ab-fam-home .rs-mail-label, html[lang="ar"] .ab-fam-home .rs-pp-report-label, html[lang="ar"] .ab-fam-home .rs-pp-report small, html[lang="ar"] .ab-fam-home .rs-pp-report i, html[lang="ar"] .ab-fam-home .rs-pp-report span { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .ab-strip-in .ab-lat, html[lang="ar"] .ab-tb-bottom .ab-lat { font-family: var(--mono); }
html[lang="ar"] .ab-fam-home .rs-display em, html[lang="ar"] .ab-fam-home .rs-h2 em, html[lang="ar"] h1 em, html[lang="ar"] h2 em { font-size: inherit; }
.ab-fam-owner h1 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.ab-fam-tool .studio-hook h2 { font-size: 28px; line-height: 1.2; }
.ab-fam-home .rs-mail-label { font-size: 12px !important; }
html[lang="ar"] .ab-strip .ab-strip-in .ab-lat { font-family: var(--mono); }
@media (max-width: 767px) {
  .ab-meta .ab-g { display: block; }
  .ab-meta .ab-g .ab-sep { display: none; }
}
.ab-fam-guide .art-cta h2 { font-size: 28px; line-height: 1.2; }
.ab-fam-tool .studio-hook h2, .ab-fam-tool #studio-hook-title { font-size: 28px !important; line-height: 1.2 !important; }
html[lang="ar"] .ab-fam-guide .art h1 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.3; letter-spacing: 0; }
@media (max-width: 767px) {
  .ab-fam-home .rs-gf-hours .ab-g, .ab-fam-stub .ab-tb-bottom .ab-g, .ab-offline .ab-tb-bottom .ab-g, .ab-fam-tool .vs-dropzone .ab-g { display: block; }
  .ab-fam-home .rs-gf-hours .ab-g .ab-sep, .ab-fam-stub .ab-tb-bottom .ab-g .ab-sep, .ab-offline .ab-tb-bottom .ab-g .ab-sep, .ab-fam-tool .vs-dropzone .ab-g .ab-sep { display: none; }
}
/* The sample email on the monitor and care-plan pages takes the theme's surfaces */
.ab-fam-home .rs-mail { background: var(--bg-2); color: var(--fg); box-shadow: none; border: 1px solid var(--line); animation: none; }
.ab-fam-home .rs-mail p, .ab-fam-home .rs-mail li { color: var(--fg-2); }
.ab-fam-home .rs-mail-subject { color: var(--fg); }
.ab-fam-home .rs-mail-checks { background: var(--bg-3); border-color: var(--line); }
.ab-fam-home .rs-mail-checks li { color: var(--fg-2); border-color: var(--line); }
.ab-fam-home .rs-mail b, .ab-fam-home .rs-mail strong, .ab-fam-home .rs-mail-head b { color: var(--fg); }
/* The sample monthly report on the care-plan page takes the theme's surfaces */
.ab-fam-home .rs-pp-report, .ab-fam-home .rs-pp-report::after { background: var(--bg-2); color: var(--fg); box-shadow: none; }
.ab-fam-home .rs-pp-report { border: 1px solid var(--line); }
.ab-fam-home .rs-pp-report-head { border-bottom-color: var(--line); }
.ab-fam-home .rs-pp-report-head small, .ab-fam-home .rs-pp-report p, .ab-fam-home .rs-pp-report li, .ab-fam-home .rs-pp-report-label { color: var(--fg-2); }
.ab-fam-home .rs-pp-report-head b, .ab-fam-home .rs-pp-report b { color: var(--fg); }
.ab-fam-home .rs-pp-report-head time { background: rgba(111, 216, 179, 0.12); color: var(--signal); }
.ab-fam-home .rs-pp-report-verdict, .ab-fam-home .rs-pp-report li, .ab-fam-home .rs-pp-report ul > li { background: var(--bg-3); border-color: var(--line); color: var(--fg-2); }

/* The installed app on a phone brings the tab bar back on the legacy pages (the bar itself is drawn in as-built.css). */
@media (display-mode: standalone) and (max-width: 768px) {
  body.ab-legacy #riyo-bottom-nav { display: flex !important; }
}

/* A sub-line under a page title uses the width the page has, so a short sentence is one line */
body.ab-page .rs-tl-sub { max-width: 60em; }
body.ab-page .tool-header-subtitle { max-width: none; }

/* ── Care plans page: three plans, what they cover and how a site is taken over ── */
.ab-fam-home .pc-hero .rs-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ab-fam-home.pc-page .rs-sec { padding-block: clamp(32px, 3.4vw, 44px); }
.ab-fam-home.pc-page .rs-hero { padding-block: 48px 32px; }
.pc-proof { margin: 0; min-width: 0; }
.pc-proof figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.pc-head { max-width: 1040px; margin-bottom: 22px; }
.ab-fam-home .pc-head .rs-h2 { max-width: none; }
.pc-head .rs-lede { max-width: none; margin-top: 8px; color: var(--fg-2); }
.pc-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 26px; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.pc-diff li { padding: 14px 20px 16px; }
.pc-diff li + li { border-inline-start: 1px solid var(--line); }
.pc-diff li:first-child { padding-inline-start: 0; }
.pc-diff h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--fg); }
.pc-diff p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-3); }
.pc-diff .pc-diff-ours { margin-top: 4px; color: var(--fg); }
.pc-diff b { font-weight: 600; color: var(--fg-2); }
.pc-diff .pc-diff-ours b { color: var(--signal-text); }
.pc-diff li { display: flex; flex-direction: column; }
.pc-diff .pc-diff-to { margin: 15px 0 0; margin-top: auto; padding-top: 14px; align-self: start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal-text); }
.pc-diff .pc-diff-to svg { color: var(--signal); flex: none; }
html[lang="ar"] .pc-diff .pc-diff-to { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 13px; }
.pc-plans-intro { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.pc-head .pc-plans-intro { margin: 10px 0 0; max-width: 1040px; }
.pc-plans-intro b { color: var(--fg); font-weight: 700; }
.pc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pc-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; }
.pc-plan--main { border-color: color-mix(in srgb, var(--signal) 60%, var(--line)); background: linear-gradient(180deg, var(--mint-soft), transparent 200px), var(--bg-2); box-shadow: 0 20px 40px -32px rgba(0, 0, 0, 0.6); }
.pc-plan-badge { position: absolute; top: -11px; inset-inline-start: 20px; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--signal); color: var(--on-signal); font-size: 12px; font-weight: 600; }
.pc-plan-tag { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal-text); }
.pc-plan-name { margin: 4px 0 5px; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
.pc-plan-for { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.pc-price { margin: 12px 0; padding: 9px 0; border-block: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.pc-price b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.pc-price small, .pc-quote small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--fg-3); }
.pc-quote { margin: 12px 0; padding: 9px 0; border-block: 1px solid var(--line); font-size: 16px; font-weight: 700; color: var(--fg); }
.pc-list-head { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.pc-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.pc-list li { position: relative; padding-inline-start: 22px; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.pc-list li::before { content: ""; position: absolute; top: 6px; inset-inline-start: 2px; width: 10px; height: 5px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }
.pc-list b { font-weight: 600; color: var(--fg); }
.pc-list--plain li::before { top: 8px; inset-inline-start: 4px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--warn); transform: none; }
.pc-plan-value { margin: -2px 0 12px; padding: 7px 11px; border-radius: var(--r); background: var(--mint-soft); font-size: 13px; line-height: 1.45; color: var(--fg); }
.pc-plan-note { margin: -2px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--fg-3); }
.ab-fam-home .pc-plan-btn { align-self: stretch; justify-content: center; margin-top: auto; }
.pc-addon { max-width: none; margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.pc-addon b { color: var(--fg); }
.pc-more { margin-top: 20px; }
.pc-table-wrap { overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.pc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.pc-table th, .pc-table td { padding: 11px 18px; text-align: start; vertical-align: top; }
.pc-table tbody tr, .pc-table thead + tbody tr:first-child { border-top: 1px solid var(--line); }
.pc-table--access tbody tr:first-child { border-top: 0; }
.pc-table thead th { font-size: 14.5px; font-weight: 700; color: var(--fg); }
.pc-table thead small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--fg-3); }
.pc-table tbody th { width: 22%; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.pc-table td { color: var(--fg-2); }
.pc-table td:nth-child(3), .pc-table thead th:nth-child(3) { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.pc-table td:nth-child(3) { color: var(--fg); }
.pc-table--access td:nth-child(2) { background: none; color: var(--fg-2); }
.pc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-top: 26px; }
.pc-sub { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.pc-split p + .pc-sub, .pc-split .pc-table-wrap + .pc-sub, .pc-split .pc-list + .pc-sub { margin-top: 20px; }
.pc-split p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.pc-split .pc-list { margin-bottom: 12px; }
.pc-ask { display: grid; gap: 20px; padding: clamp(20px, 2.4vw, 30px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; }
.pc-ask-head { max-width: 1040px; }
.ab-fam-home .pc-ask-head .rs-h2 { max-width: none; }
.pc-ask .rs-lede { max-width: none; margin-top: 8px; color: var(--fg-2); }
.pc-ask-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; margin: 0; padding: 0; list-style: none; counter-reset: ask; }
.pc-ask-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-content: start; font-size: 15px; line-height: 1.5; color: var(--fg); counter-increment: ask; }
.pc-ask-list li::before { content: counter(ask, decimal-leading-zero); grid-row: span 2; padding-top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--signal-text); }
.pc-ask-q { grid-column: 2; }
.pc-ask-tag { grid-column: 2; justify-self: start; margin-top: 5px; padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent); border-radius: 999px; font-size: 11.5px; color: var(--signal-text); }
.pc-ask-tag--premium { border-color: var(--line-2); color: var(--fg-2); }
.pc-ask-end { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.ab-fam-home .pc-steps { margin-top: 4px; }
.ab-fam-home .pc-steps::before { top: 21px; left: 22px; right: 22px; }
.ab-fam-home .pc-steps .rs-step { gap: 6px; }
.ab-fam-home .pc-steps .rs-step-num { width: 44px; height: 44px; margin-bottom: 6px; font-size: 13px; }
.ab-fam-home .pc-steps .rs-h3 { font-size: 16.5px; line-height: 1.3; }
.ab-fam-home .pc-steps .rs-step p { font-size: 14px; line-height: 1.55; }
.pc-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 0; }
.pc-terms > div { padding: 14px 0; border-top: 1px solid var(--line); }
.pc-terms dt { font-size: 15px; font-weight: 700; color: var(--fg); }
.pc-terms dd { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
html[lang="ar"] .pc-plan-tag { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (max-width: 1100px) {
  .pc-plans { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (max-width: 900px) {
  .ab-fam-home .pc-hero .rs-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pc-split, .pc-terms, .pc-ask-list { grid-template-columns: minmax(0, 1fr); }
  .pc-diff { grid-template-columns: minmax(0, 1fr); }
  .pc-diff li { padding-inline: 0; }
  .pc-diff li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
  .pc-split { gap: 8px; }
}
@media (max-width: 640px) {
  .pc-plan { padding: 18px 16px 16px; }
  .pc-table thead { display: none; }
  .pc-table tbody tr { display: block; padding: 12px 16px; }
  .pc-table th, .pc-table td { display: block; width: auto; padding: 0; }
  .pc-table tbody th { width: auto; margin-bottom: 6px; }
  .pc-table td + td { margin-top: 8px; }
  .pc-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
  .pc-table td:nth-child(3) { margin-inline: -16px; padding: 8px 16px; }
  .pc-table--access td:nth-child(2) { margin-inline: 0; padding: 0; }
}

/* site-styles: Paper and Navy, written by scripts/site-styles.mjs; edit the rules above, then rerun */
@media screen {
:where(html.ab-alt) body.ab-legacy ::selection { color: var(--on-signal); }
:where(html.ab-alt) body.ab-legacy .ab-nav .nav-cta-btn { color: var(--on-signal); color: var(--on-signal) !important; }
:where(html.ab-alt) .ab-fam-tool .studio-hook-btn { color: var(--on-signal); }
:where(html.ab-alt) .ab-fam-tool .mobile-tool-fab { color: var(--on-signal); }
:where(html.ab-alt) .ab-fam-plan .pl-step { border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent); background-image: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-2) 100%); box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 5%, transparent) inset, 0 0 0 1px rgba(0, 0, 0, 0.35), 0 50px 100px -50px rgba(0, 0, 0, 0.85); }
:where(html.ab-alt) .ab-fam-plan .pl-step::before { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 55%, transparent), transparent); }
:where(html.ab-alt) .ab-fam-plan .pl-step .pl-nav { border-top: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
:where(html.ab-alt) .ab-fam-plan .pl-step .pl-option-card { background-color: var(--bg-deep); border-color: color-mix(in srgb, var(--fg) 10%, transparent); }
:where(html.ab-alt) .ab-fam-plan .pl-step .pl-option:hover .pl-option-card { border-color: color-mix(in srgb, var(--fg) 24%, transparent); }
:where(html.ab-alt) .ab-fam-plan .pl-step .pl-option input:checked + .pl-option-card { border-color: color-mix(in srgb, var(--signal) 70%, transparent); background: color-mix(in srgb, var(--signal) 6%, transparent); }
:where(html.ab-alt) .ab-fam-plan .pl-person img { border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); }
:where(html.ab-alt) .ab-fam-plan .pl-care-note { border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); background: color-mix(in srgb, var(--fg) 3%, transparent); }
@media (max-width: 640px) { :where(html.ab-alt) .ab-fam-plan .pl-step .pl-nav { border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); background-color: var(--bg-2); } }
:where(html.ab-alt) .ab-fam-owner button { color: var(--on-signal); }
:where(html.ab-alt) body.ab-page.ab-fam-owner button { color: var(--on-signal); }
:where(html.ab-alt) .ab-fam-home .rs-pp-report-head time { background: color-mix(in srgb, var(--signal) 12%, transparent); }
:where(html.ab-alt) .pc-plan-badge { color: var(--on-signal); }
}
/* /site-styles */