/* The pages after Home, v3 (the director, 6 Nov 2026: "the same v3 style and quality, using everything we learned on the
   Home page"). Loaded after site.css and home.css on Features, Pricing, Get the app, FAQ, Contact and the legal pages,
   with body class "studio pg": the Home's dark studio, its solid bar band, its type (Inter; Readex Pro in Arabic) and
   its readable greys. The Home's own files are frozen (D-301, home-guard.mjs): everything new lives here. */

/* ---- the page under the fixed bar: nothing ever sits under it (the sixth phone test) ---- */
body.pg main { padding-top: 84px; }
body.pg .sheet { background: #0B0B0C; color: var(--ink); }
body.pg { --panel: #111113; --line: rgba(255, 255, 255, .1); --ink-2: #A8A8AD; --sec: clamp(56px, 7vw, 112px); }
body.pg .foot .big { color: #1C1C1F; } /* the big footer word is scenery: quiet on black */

/* ---- one rhythm: tight, no big gaps ---- */
body.pg .ph { padding-block: clamp(40px, 8vh, 112px) 0; }
body.pg .ph h1 { font-size: clamp(44px, 6.4vw, 112px); max-width: 11em; }
:root[dir="rtl"] body.pg .ph h1 { font-size: clamp(38px, 5.4vw, 92px); }
body.pg .ph .lead { margin-top: 22px; color: var(--ink-2); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; max-width: 32em; }
body.pg .sec h2, body.pg .head h2 { font-size: clamp(34px, 4.4vw, 76px); }
:root[dir="rtl"] body.pg .sec h2, :root[dir="rtl"] body.pg .head h2 { font-size: clamp(30px, 3.8vw, 64px); }
body.pg .ticks li { color: var(--ink); }
body.pg .ticks li::before { width: 8px; height: 8px; top: .62em; border-radius: 50%; clip-path: none; }
body.pg .demo-note { color: var(--ink-2); }
body.pg .more a, body.pg .test a { color: var(--link); }

/* ---- calm cards: one dark surface, a hairline, round corners (the Home's lower half) ---- */
body.pg .panel, body.pg .apps li, body.pg .toc, body.pg .draft {
  background: var(--panel); color: var(--ink); clip-path: none; border: 1px solid var(--line); border-radius: 22px; }
body.pg .panel .muted, body.pg .toc h2 { color: var(--ink-2); }

/* ---- a device is a solid screen in a frame: the picture fills the glass edge to edge and never changes; only the
   section's screen crossfades (the seventh phone test). 9:16 glass, the same shape as the app's captures ---- */
body.pg .phone { clip-path: none; padding: 9px; background: #1C1D20; border-radius: 34px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px -40px rgba(0, 0, 0, .9); transform: none !important; }
body.pg .phone > img, body.pg .tour-phone .screens { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 26px; overflow: hidden; background: #000; }
body.pg .tour-phone .screens img { width: 100%; height: 100%; object-fit: cover; transform: none; transition: opacity .3s; }
body.pg .tour-phone .screens img.on { transform: none; }
body.pg .pcwin { clip-path: none; padding: 10px; background: #1C1D20; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px -40px rgba(0, 0, 0, .9); }
body.pg .pcwin .shot.wide, body.pg .pcwin .shot.stack img { border-radius: 10px; }
body.pg .pcwin .ghost, body.pg .pcwin .scan { display: none; }

/* ---- Features ---- */
body.pg .frow { padding-block: clamp(56px, 8vw, 120px) 0; perspective: none; }
body.pg .frow h2 { font-size: clamp(32px, 3.8vw, 64px); }
:root[dir="rtl"] body.pg .frow h2 { font-size: clamp(28px, 3.3vw, 54px); }
body.pg .frow .txt p { color: var(--ink-2); }
@media (min-width: 901px) {
  body.pg .tour.live .frow { min-height: 64vh; padding-block: 14vh 0; }
  body.pg .tour.live .frow .txt { opacity: .28; transition: opacity .35s; }
  body.pg .tour.live .frow.on .txt { opacity: 1; }
  body.pg .tour.live .frow:last-child { min-height: 76vh; }
  body.pg .tour.live .tour-phone { top: max(100px, 13vh); height: auto; }
  body.pg .tour-phone .phone { width: min(100%, 330px, calc((80vh - 60px) * 9 / 16)); }
  body.pg .tour-dots i { border-radius: 2px; }
}
@media (max-width: 900px) {
  body.pg .frow { gap: 26px; padding-block: 64px 0; }
  body.pg .frow .phone { width: min(76%, 300px); }
}
body.pg .power .note { color: var(--ink-2); }
body.pg .count60 { color: var(--ink); }
body.pg .build .head p { color: var(--ink-2); }

/* ---- Pricing ---- */
body.pg .price { margin-top: 40px; }
body.pg .price h2 { font: 600 14px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
:root[dir="rtl"] body.pg .price h2 { letter-spacing: 0; font-size: 17px; }
body.pg .price .amount { font: 500 clamp(52px, 7.6vw, 132px)/1.05 var(--head); letter-spacing: -.04em; }
:root[dir="rtl"] body.pg .price .amount { font-weight: 600; letter-spacing: 0; line-height: 1.3; }
body.pg .price .per, body.pg .price .fine { color: var(--ink-2); }
body.pg .dashed { border-radius: 999px; outline: 0; border: 1.5px dashed var(--ink-2); opacity: 1; color: var(--ink); }
body.pg .qa { margin-top: 56px; gap: 0; border-top: 1px solid var(--line); }
body.pg .qa > div { padding-block: 24px; border-bottom: 1px solid var(--line); }
body.pg .qa dt { font: 500 clamp(20px, 1.7vw, 26px)/1.35 var(--head); letter-spacing: -.01em; }
:root[dir="rtl"] body.pg .qa dt { font-weight: 600; letter-spacing: 0; line-height: 1.55; }
body.pg .qa dd { color: var(--ink-2); }

/* ---- Get the app: the two parts as calm cards, a line drawing of each device ---- */
body.pg .apps { margin-top: 40px; }
body.pg .apps li { padding: 30px 28px; gap: 12px; }
body.pg .apps .dev { width: 52px; height: 52px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.pg .apps h2 { font: 500 clamp(22px, 2vw, 30px)/1.2 var(--head); letter-spacing: -.02em; }
:root[dir="rtl"] body.pg .apps h2 { font-weight: 600; letter-spacing: 0; line-height: 1.45; }
body.pg .apps p { color: var(--ink-2); }
body.pg .apps .tag { clip-path: none; border-radius: 999px; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 7px 12px; }
body.pg .apps .tag::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); vertical-align: middle; }
body.pg .apps .later { background: transparent; border-style: dashed; color: var(--ink-2); display: flex; align-items: center; gap: 16px; }
body.pg .apps .later h2 { color: var(--ink-2); font-size: clamp(19px, 1.6vw, 24px); margin: 0; }
body.pg .apps .later .soon-mark { width: 52px; height: 52px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
body.pg .steps li::before { border-radius: 50%; clip-path: none; font-family: var(--body); font-weight: 600; }
body.pg .steps li { color: var(--ink); }

/* ---- FAQ: a quiet list, a hairline between questions ---- */
body.pg .helpgrid { margin-top: 40px; }
body.pg .faq { gap: 0; border-top: 1px solid var(--line); }
body.pg .faq details { background: transparent; color: var(--ink); clip-path: none; border-bottom: 1px solid var(--line); padding-inline: 0; }
body.pg .faq summary { font: 500 clamp(19px, 1.6vw, 24px)/1.4 var(--head); letter-spacing: -.01em; padding-block: 22px; }
:root[dir="rtl"] body.pg .faq summary { font-weight: 600; letter-spacing: 0; line-height: 1.6; }
body.pg .faq summary::after { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); width: 34px; height: 34px; font-size: 20px; }
body.pg .faq details[open] summary::after { box-shadow: none; background: var(--lime); }
body.pg .faq details p { color: var(--ink-2); line-height: 1.65; }
body.pg .helpgrid .stuck { top: 104px; }
body.pg .stuck h2 { font: 500 clamp(24px, 2.2vw, 34px)/1.2 var(--head); }

/* ---- Contact ---- */
body.pg .mail { margin-top: 40px; }
body.pg .mail b { font: 500 clamp(24px, 5vw, 64px)/1.15 var(--head); letter-spacing: -.03em; }
:root[dir="rtl"] body.pg .mail b { letter-spacing: 0; }
body.pg .about { margin-top: 40px; }
body.pg .about h2 { font-size: clamp(26px, 2.6vw, 40px); }
body.pg .who { margin-top: 40px; }

/* ---- legal: calm and simple; plain text at a comfortable measure, nothing moves ---- */
body.pg.legalpage .ph h1 { font-size: clamp(36px, 4.6vw, 72px); }
body.pg .draft { border: 1.5px dashed var(--amber); outline: 0; padding: 16px 20px; font-size: 16px; line-height: 1.55; }
body.pg .legal { padding-block: 40px 0; }
body.pg .toc { top: 100px; padding: 18px 16px; border-radius: 18px; }
body.pg .toc a { color: var(--ink-2); }
body.pg .toc a:hover, body.pg .toc a.here { color: var(--ink); }
body.pg .legal-body { background: transparent; color: #D9D9DE; clip-path: none; padding: 0; font-size: 17px; line-height: 1.75; }
:root[dir="rtl"] body.pg .legal-body { line-height: 1.95; font-size: 18px; }
body.pg .legal-body section { padding-top: 0; margin-bottom: 44px; scroll-margin-top: 104px; }
body.pg .legal-body h2 { font: 500 clamp(22px, 2vw, 30px)/1.3 var(--head); color: var(--ink); letter-spacing: -.015em; }
body.pg .legal-body h3 { font: 600 18px/1.4 var(--body); color: var(--ink); }
:root[dir="rtl"] body.pg .legal-body h2 { font-weight: 600; letter-spacing: 0; line-height: 1.55; }
body.pg .legal-body .src { color: var(--ink-2); }
body.pg .legal-body th { background: #161618; color: var(--ink); }
body.pg .legal-body a { color: var(--ink); }

/* ---- phones ---- */
@media (max-width: 860px) {
  body.studio.pg .bar .menu-btn { margin-inline-start: auto; }
}

/* ---- the separate reviewer's findings (6 Nov) ---- */
body.pg .panel .btn { color: #15171A; }                         /* site.css's .panel a inherited near-white onto lime (1.17:1) */
@media (pointer: fine) { body.pg .bar-wrap { background: #000; backdrop-filter: none; } } /* a solid bar with a mouse too */
:root[dir="rtl"] body.pg .price .amount { font-size: clamp(42px, 6.2vw, 108px); }
@media (min-width: 901px) {
  body.pg .tour.live .frow { min-height: 52vh; padding-block: 10vh 0; }
  body.pg .tour.live .frow:last-child { min-height: 64vh; }
  body.pg .tour.live .frow .txt { opacity: .5; }
  body.pg .tour.live .frow.on .txt { opacity: 1; }
}
@media (max-width: 860px) { body.pg .power .count60 { margin-inline: auto; } }
/* legal tables on phones: each row a small block, the column name above each value */
@media (max-width: 600px) {
  body.pg .legal-body table, body.pg .legal-body tbody, body.pg .legal-body tr, body.pg .legal-body td { display: block; width: 100%; }
  body.pg .legal-body thead { display: none; }
  body.pg .legal-body tr { padding-block: 12px; border-bottom: 1px solid var(--line); }
  body.pg .legal-body td { padding: 3px 0; border: 0; }
  body.pg .legal-body td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--ink-2); }
}
/* the contents list folds away on phones (open on wide screens) */
body.pg .toc details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
body.pg .toc details > summary::-webkit-details-marker { display: none; }
body.pg .toc details > summary::after { content: '+'; color: var(--ink-2); font-size: 20px; line-height: 1; }
body.pg .toc details[open] > summary::after { content: '\2212'; }
@media (min-width: 961px) { body.pg .toc details > summary { pointer-events: none; } body.pg .toc details > summary::after { display: none; } }
/* Pricing (the director, 6 Nov): free while in testing; paid plans may come later with their own terms */
body.pg .price .later { margin-top: 18px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--ink); max-width: 30em; }
body.pg .price > div + div h2 { margin-top: 0; }
@media (max-width: 860px) { body.pg .price > div + div { padding-top: 26px; border-top: 1px solid var(--line); } }