/* Routes to the /answers library — injected site-wide by tools/install_nav.py. Palette from css/style.css :root. */
/* 1. homepage pill-nav dropdown (desktop; the pill's .nav-links is hidden on mobile, .nav-menu carries the links there) */
.nav-drop{position:relative;display:inline-block}
.nav-drop-top{cursor:pointer}
.nav-drop-top::after{content:"▾";font-size:10px;margin-inline-start:4px;opacity:.6}
.nav-drop-panel{visibility:hidden;opacity:0;position:absolute;top:calc(100% + 10px);inset-inline-start:50%;transform:translateX(-50%) translateY(4px);min-width:250px;background:#fff;border:1px solid #e6e0f5;border-radius:14px;box-shadow:0 18px 44px rgba(13,11,20,.14);padding:8px;display:flex;flex-direction:column;transition:opacity .14s,transform .14s,visibility .14s;z-index:60}
[dir="rtl"] .nav-drop-panel{transform:translateX(50%) translateY(4px)}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}
[dir="rtl"] .nav-drop:hover .nav-drop-panel,[dir="rtl"] .nav-drop:focus-within .nav-drop-panel{transform:translateX(50%) translateY(0)}
.nav-drop-panel a{display:block;padding:9px 12px;border-radius:9px;font:600 13.5px/1.3 var(--font);color:var(--body3);text-decoration:none;white-space:nowrap}
.nav-drop-panel a:hover{background:var(--tint);color:var(--deep)}
.nav-drop-panel .nav-drop-all{margin-top:4px;border-top:1px solid #efeaf9;border-radius:0 0 9px 9px;color:var(--deep)}
/* 1b. THE PORTAL DOOR — "Log in" / "تسجيل الدخول". Rendered by tools/install_nav.py from the
   single PORTAL_LOGIN constant as the last child of the NAVLINK marker block — which is NOT the
   last child of .nav-links. The 09-07 language anchor (<a href="/ar/" hreflang="ar">العربية</a>)
   lives OUTSIDE the markers and renders after it. Measured order on the artifact (EN shown;
   /ar is the same order with that anchor reading "English"):
     … FAQ · Try it · Answers ▾ · [Log in] · العربية · [purple .btn-nav CTA]
   (round-2 shipped a comment claiming "immediately before the .btn-nav CTA" — it never was; a
   false comment about render order is how the next session mis-diagnoses this nav.)
   It is the SECONDARY action on that bar, so it borrows the site's own
   quiet-chip idiom (style.css .nav-toggle / .nav-lang: the same 1px rgba(13,11,20,.1x)
   hairline, the same translucent white, the same 999px radius) instead of a second filled
   pill — nothing competes with "Text our sales team". Type is the nav's own 600 14px, so it
   still reads as a nav item rather than a button.
   ⚠ CASCADE (same law as block 3's header note): this sheet is linked off the charset meta,
   i.e. BEFORE style.css, so `.nav-links a` (0,1,1) and `.nav-links a:hover` (0,2,1) would beat
   a bare `.nav-login` (0,1,0). Every rule here is written `.nav-links a.nav-login` (0,2,1) /
   `:hover` (0,3,1) so it wins on specificity, not on order.
   MOBILE: style.css:701+729 sets .nav-links{display:none} at <=1023 — the phone door is .nav-menu
   row, which install_nav.py deliberately renders UNCLASSED so it inherits .nav-menu a exactly
   like "Book a 15-min call". Nothing to style there.
   RTL: no physical offsets, no letter-spacing (ar.css zeroes tracking on .btn-*; there is none
   to zero here), so /ar mirrors with the flex row itself. */
.nav-links a.nav-login{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(13,11,20,.12);background:rgba(255,255,255,.72);
  font:600 14px/1 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:background .25s,border-color .25s,color .25s;
}
.nav-links a.nav-login:hover{background:var(--tint);border-color:rgba(75,31,214,.28);color:var(--deep)}
.nav-links a.nav-login:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* 2. "Answers" sibling link in every legal-header (kept visible on mobile — that is the point) */
.legal-links .ans-sib{font:600 14px/1 var(--font);color:var(--body2);text-decoration:none;margin-inline-end:14px}
.legal-links .ans-sib:hover{color:var(--violet)}
@media (max-width:560px){.legal-links .ans-sib{font-size:13px;margin-inline-end:10px}}
/* 2b. the portal door in every legal-header — the inner-page twin of .nav-links a.nav-login
   (2026-09-21, fix round 1; RESTYLED round 3). `nav-pill` exists on index.html + ar/index.html
   ONLY, so every other governed page (146 of 148, incl. all 118 /s/ answer pages) needs its door
   here, in the sticky legal-header, rendered by install_nav.py's LOGIN block next to "Answers".
   ⛔ NOT A CHIP — rounds 1-2 shipped the homepage chip idiom here and it does not fit. MEASURED
   round 3, live vs stage, DPR1 Chromium, fonts.ready awaited:
     homepage .nav-pill  1024/1100/1200/1280/1440/1600 → 45/49/53/56/63/63px, live == stage,
                         EN and AR: the pill absorbs a 32px chip inside its existing height.
     inner .legal-header 43px on phones, 52px ≥768 — a bar of 12.5-14px text. The same chip
                         forced it to 57px (phone) and 65px (desktop): +14/+13px of sticky
                         chrome on the 146 routes that get the door, to add one link.
   So the inner door takes the bar's OWN link type — legal.css:22 `.legal-back` (600 14px violet)
   and legal.css:113 (12.5px ≤767). Same call install_nav.py already makes on the homepage mobile
   menu, where "Log in" is rendered UNCLASSED so it inherits .nav-menu a exactly like "Book a
   15-min call". Chip where there is room for one; link where there is not.
   SPECIFICITY: this sheet is linked off the charset meta, i.e. BEFORE css/legal.css, css/
   style.css and css/ar.css — so equal specificity LOSES. Every rule is `.legal-links
   .ans-login` (0,2,0), which beats legal.css's `.legal-back` (0,1,0) and any bare `a`.
   RTL: no physical offsets, no letter-spacing — the .legal-links flex row mirrors on /ar
   by itself, exactly like .ans-sib above. */
.legal-links .ans-login{font:600 14px/1 var(--font);color:var(--violet);text-decoration:none;white-space:nowrap;transition:color .25s}
.legal-links .ans-login:hover{color:var(--deep)}
.legal-links .ans-login:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* 2c. FIT + THE LANGUAGE DOOR — the inner header stays ONE row on phones and keeps its
   language switcher (2026-09-21, fix round 3; SUPERSEDES round 2 entirely).
   ⛔ ROUND-2 BUG. Round 2 shipped `@media(max-width:767px){.legal-header .legal-back{display:none}}`.
   `.legal-back` is the class on TWO anchors in every one of the 148 inner pages, not one —
     <a class="legal-back" href="/ar/pricing.html" hreflang="ar" lang="ar">العربية</a>   ← language door
     <a href="index.html" class="legal-back">← Back to site</a>                          ← back link
   so a bare class selector hid BOTH, and all 148 routes that carry this header (146 governed +
   the 2 /answers hubs; 118 of them are the /s/ answer pages, the organic landing surface on a
   bilingual GCC site) lost their ONLY language door on phones:
   `grep -c nav-lang` on pricing.html and on any /s/ page = 0, there is no other switcher in that
   chrome. The round-2 comment justified removing the BACK link only ("it points at '/', exactly
   where the wordmark 60px to its left already points"); it never covered العربية / English.
   THE SELECTOR — both halves are load-bearing:
     :not([hreflang])  the language anchor is the one carrying hreflang+lang (148/148 verified
                       against the live snapshot: every inner page has exactly 2 .legal-back,
                       1 with hreflang, 1 without). Semantic, so it does not silently invert
                       the day someone reorders the row, the way :last-child would.
     .ans-login ~      hide it ONLY where the door was actually added. The two /answers hubs
                       carry .legal-back but get no LOGIN block (install_nav.py exempts them),
                       so they keep both links and render exactly as live — spec §12.
   (0,3,1) beats legal.css's `.legal-back` (0,1,0) even though this sheet loads first. No :has()
   — the sibling combinator is universally supported; :has() would drop the rule on iOS < 15.4.
   MEASURED, live vs stage, 16 routes (EN+AR × pricing · /s/ · terms · trust · faq · proof ·
   try · answers-hub) × 18 widths 320→1440 = 288 cells, fonts.ready awaited, DPR1 Chromium.
   274 of 288 cells are IDENTICAL to live on header height, row count, language-door presence
   and horizontal overflow; the other 14 are all at 320 and all SHORTER than live:
     339-767  stage == live EXACTLY: .legal-header 43px, ONE row, wordmark on that row, no
              horizontal overflow, door present, language door present.
     320      stage 43px vs live 59px — live's "← Back to site" wraps onto a second line there
              and strands the wordmark; hiding it un-wraps the row. Better, not worse. (321-338
              not measured; 320 is the narrowest width probed.)
     768-1440 stage == live: 52px, one row, back link kept, door added.
     hubs     answers.html + ar/answers.html identical to live at all 18 widths (no .ans-login,
              so the hide rule never matches) — and byte-identical in the artifact. */
@media (max-width:767px){
  .legal-links .ans-login{font-size:12.5px}
  .legal-links .ans-login ~ a.legal-back:not([hreflang]){display:none}
}
/* 3. homepage answers section (in <main>, after the FAQ) — 2026-09-20 re-theme.
   The rows REUSE .feature-rows/.feature-row/.f-num/.f-title/.f-body/.f-meta from style.css,
   so the numbered-row layout, the hover→ink treatment and ar.css's RTL mirror
   (.feature-row:hover{transform:translateX(-6px)} · .f-meta{text-align:left}) are inherited.
   Only what the reuse cannot give lives here.
   ⚠ CASCADE: install_nav.py links this sheet off the charset meta — i.e. BEFORE style.css and
   before ar.css. Equal specificity therefore LOSES to them. Every declaration below that
   overrides a .feature-row / .btn-* / .f-* one must out-specify it (hence `.answers-rows
   .answers-row`, 0-2-0) or copy the declarations outright (hence .answers-all). */
.answers-sec{padding:58px 32px}
.answers-inner{max-width:1160px;margin:0 auto}
.answers-head{text-align:center}
/* mirrors .build-head h2 / .features-head h2 in style.css */
.answers-head h2{margin:14px 0 0;font:800 54px/1 var(--font);letter-spacing:-.045em}
.answers-sub{margin:16px auto 0;max-width:560px;font:500 17px/1.5 var(--font);color:var(--muted)}
/* .feature-row is a <div> upstream (cursor:default); here each row IS the link */
.answers-rows .answers-row{text-decoration:none;color:inherit;cursor:pointer}
/* style.css's .feature-row{transition:…} drops opacity from the transition list, which would
   make the [data-reveal] fade snap. Put opacity back; keep the row's own .35s for the rest. */
.answers-rows .answers-row{transition:opacity .8s cubic-bezier(.16,.84,.44,1),background .35s,border-radius .35s,transform .35s}
/* keyboard parity with the pointer hover ink treatment in style.css */
.answers-rows .answers-row:focus-visible{background:var(--ink);border-radius:18px;outline:2px solid var(--violet);outline-offset:-2px}
.answers-rows .answers-row:focus-visible .f-num{color:var(--lav)}
.answers-rows .answers-row:focus-visible .f-title{color:#fff}
.answers-rows .answers-row:focus-visible .f-body{color:rgba(255,255,255,.72)}
.answers-rows .answers-row:focus-visible .f-meta{color:var(--green)}
.answers-foot{margin-top:30px;text-align:center}
/* the site's secondary pill on a light section — declarations copied from style.css
   .btn-dark (+ .btn-hero.btn-dark:hover / .sp-cta-row .btn-dark:hover), not classed,
   because this sheet loads first and a bare .answers-all would lose every tie.
   min-height:48px clears the 44px tap target. */
.answers-all{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:15px 24px;border-radius:999px;background:var(--ink);color:#fff;font:800 15px/1.25 var(--font);letter-spacing:-.01em;text-align:center;text-decoration:none;transition:transform .25s,background .25s}
.answers-all:hover{background:#241c3c;color:#fff;transform:translateY(-2px)}
/* ar.css zeroes tracking on every .btn-* for Arabic letterforms; same treatment here */
[dir="rtl"] .answers-all{letter-spacing:0}
@media (max-width:1023px){
  /* main{display:flex} at EVERY width, and ≤1023 style.css hands each section an explicit
     order (hero 1 … faq-sec 8, final-cta 9). A child with no order defaults to 0 and would
     jump above the hero. order:8 ties with .faq-sec and DOM order breaks the tie, so the
     section lands after the FAQ — exactly where it sits on desktop. */
  .answers-sec{order:8;padding:58px 44px}
  .answers-head h2{margin-top:0;font-size:48px;line-height:1.06}
  .answers-sub{margin-top:12px;font-size:15px}
  /* style.css hides .features ≤1023, so .feature-row's 4-column desktop grid (min ~556px)
     never needed a narrow form. This section is visible on every width, so give it one:
     num | title | meta on the first line, the teaser spanning underneath. */
  .answers-rows .answers-row{grid-template-columns:34px minmax(0,1fr) auto;align-items:start;gap:6px 14px;padding:20px 14px}
  .answers-rows .answers-row .f-num{grid-column:1;grid-row:1}
  .answers-rows .answers-row .f-title{grid-column:2;grid-row:1;font-size:18.5px;line-height:1.25}
  .answers-rows .answers-row .f-meta{grid-column:3;grid-row:1}
  .answers-rows .answers-row .f-body{grid-column:2 / 4;grid-row:2;font-size:13.5px}
  .answers-foot{margin-top:22px}
}
@media (max-width:767px){
  .answers-sec{padding:34px 18px}
  .answers-head h2{font-size:25px}
  /* 16px, not the 12.5px the sibling section heads use: .answers-sub is a <p> of reading
     copy, and style.css's mobile legibility block (~1286-1324) floors every one of those at
     16px on a phone — .faq-a, p.faq-more, .hero-sub, .start-inner p all render 16-16.5px at
     390px. 12.5px failed the release checklist's C1 gate on both homepages. Written as
     `body p.answers-sub` (0,1,2) to match that block's own idiom: this sheet loads BEFORE
     style.css and ar.css, so a bare .answers-sub (0,1,0) could be beaten by any later
     (0,1,1) rule. Font-size only — line-height stays the 1.5 from the base shorthand. */
  body p.answers-sub{font-size:16px}
  .answers-rows .answers-row{grid-template-columns:26px minmax(0,1fr) auto;gap:5px 11px;padding:16px 10px}
  .answers-rows .answers-row .f-title{font-size:14px}
  .answers-rows .answers-row .f-body{font-size:11.5px}
  .answers-foot{margin-top:18px}
}
/* no-JS net: [data-reveal] starts at opacity:0 and only the IntersectionObserver in
   js/main.js clears it — the whole page has that exposure, but this section used to be
   visible without JS, so do not regress it. Scoped to #answers-strip on purpose. */
@media (scripting:none){#answers-strip [data-reveal]{opacity:1;transform:none}}
/* 4. trust-page keep-reading row */
.ans-keep-reading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;max-width:1080px;margin:0 auto;padding:26px 24px 54px}
.ans-keep-reading span{font:700 12px/1 var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.14em}
.ans-keep-reading a{font:600 14px/1 var(--font);color:var(--body3);text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e6e0f5}
.ans-keep-reading a:hover{border-color:var(--violet);color:var(--violet)}