/* ==========================================================================
   /app — the install page (Plan/app-page-mockup.html, brief Plan/app-page-brief.md, 29 Sep 2026)
   The mockup's CSS, scoped under .pt-app so nothing here reaches the theme, followed by an OVERRIDES block
   with a reason for every rule the live site needed on top. Tokens: ink #1A1A1A, paper #FAF9F6, graphite
   #23211E, bone #EFEBE3, hairlines #E4E2DB / #C9C7BF, accent #185FA5; ASSUMED (mockup): muted #6B6862, body
   #3A3834. The previous stylesheet is kept as Plan/pt-app.old.css.
   ========================================================================== */
.pt-app{
  --ink:#1A1A1A; --paper:#FAF9F6; --graphite:#23211E; --bone:#EFEBE3; --oxblood:#3B1210;
  --line:#E4E2DB; --line2:#C9C7BF; --accent:#185FA5;
  --muted:#6B6862; --body:#3A3834;
  --bone-dim:rgba(239,235,227,.66); --bone-line:rgba(239,235,227,.14);
  --sans:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper);
}
.pt-app,.pt-app *{box-sizing:border-box}
.pt-app button{font:inherit;color:inherit;cursor:pointer}
.pt-app :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pt-app [hidden]{display:none!important}
.pt-app .mono{font-family:var(--mono)}
.pt-app a{color:var(--accent)}
.pt-app .in{max-width:1120px;margin:0 auto;padding:0 24px}

/* buttons */
.pt-app .btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;padding:14px 24px;font-weight:600;font-size:16px;text-decoration:none;border-radius:0}
.pt-app .btn-light{background:var(--bone);color:var(--ink)}
.pt-app .btn-2{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:12.5px 22.5px;font-weight:600;font-size:16px;text-decoration:none;border-radius:0}
.pt-app .btn-ghost{display:inline-flex;align-items:center;gap:10px;background:none;color:var(--bone);border:1.5px solid var(--bone-dim);padding:12.5px 22.5px;font-weight:600;font-size:16px;text-decoration:none;border-radius:0}

/* image slots + device frames */
.pt-app .slot{background:repeating-linear-gradient(135deg,#2C2A26 0 14px,#302E2A 14px 28px);color:var(--bone-dim);display:flex;align-items:center;justify-content:center;text-align:center;font:12px/1.5 var(--mono);padding:16px}
.pt-app .slot.light{background:repeating-linear-gradient(135deg,#ECE8E0 0 14px,#E6E2D9 14px 28px);color:var(--muted)}
.pt-app .phone{width:280px;aspect-ratio:9/19.5;border:10px solid #0F0E0D;border-radius:36px;overflow:hidden;background:#0F0E0D;flex:none}
.pt-app .phone .slot,.pt-app .phone img{width:100%;height:100%;border-radius:26px;object-fit:cover;object-position:top}
.pt-app .laptop{width:100%;max-width:620px}
.pt-app .laptop .screen{border:10px solid #0F0E0D;border-bottom-width:14px;border-radius:10px 10px 0 0;aspect-ratio:16/10;background:#0F0E0D;overflow:hidden}
.pt-app .laptop .screen .slot,.pt-app .laptop .screen img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}   /* the captures are wider than 16:10: keep the logo and the left of the grid, lose the far right (brief §5: never crop meaningful UI) */
.pt-app .laptop .base{height:14px;background:#2A2825;margin:0 -28px;border-radius:0 0 8px 8px}

/* hero */
.pt-app .hero{background:var(--graphite);color:var(--bone);padding:64px 0}
.pt-app .hero .in{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:center}
.pt-app .hero-copy{padding:0}
.pt-app .hero h1{font-size:52px;line-height:1.05;letter-spacing:-.025em;margin:0 0 18px;max-width:16ch}
.pt-app .hero p{margin:0 0 32px;color:var(--bone-dim);font-size:18px;max-width:46ch}
.pt-app .hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pt-app .facts{margin-top:22px;font:13px var(--mono);color:var(--bone-dim)}
.pt-app .hero-phone,.pt-app .hero-media{display:flex;justify-content:center}
.pt-app .device-note{margin-top:14px;font-size:14px;color:var(--bone-dim)}

/* section basics */
.pt-app section.band{padding:88px 0}
.pt-app .band.paper{background:var(--paper)}
.pt-app .band.white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pt-app .sec-title{font-size:32px;line-height:1.15;letter-spacing:-.015em;margin:0 0 8px}
.pt-app .sec-sub{margin:0 0 48px;color:var(--muted);font-size:17px;max-width:56ch}

/* feature rows */
.pt-app .feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.pt-app .feat:first-of-type{border-top:0;padding-top:0}
.pt-app .feat.flip .feat-media{order:2}
.pt-app .feat-media{display:flex;justify-content:center;background:var(--bone);padding:40px 0}
.pt-app .feat-media .phone{width:240px}
.pt-app .ico{width:44px;height:44px;border:1px solid var(--line2);background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pt-app .feat h3{font-size:24px;line-height:1.25;margin:0 0 10px;letter-spacing:-.01em}
.pt-app .feat p{margin:0 0 12px;color:var(--body);max-width:44ch;font-size:17px}
.pt-app .feat .small{font-size:14px;color:var(--muted)}

/* install cards */
.pt-app .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt-app .card{background:#fff;border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;border-radius:0}
.pt-app .card.dark{background:var(--graphite);color:var(--bone);border-color:var(--graphite)}
.pt-app .card.dark .card-lbl,.pt-app .card.dark ol{color:var(--bone-dim)}
.pt-app .card.dark ol b{color:var(--bone)}
.pt-app .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.pt-app .card-lbl{font-size:13px;color:var(--muted)}
.pt-app .yours{font:12px var(--mono);border:1px solid currentColor;padding:1px 8px}
.pt-app .card h3{font-size:22px;margin:0 0 12px}
.pt-app .card ol{margin:0 0 24px;padding-left:20px;color:var(--body);font-size:15px}
.pt-app .card ol li{margin-bottom:6px}
.pt-app .card ol b{color:var(--ink);font-weight:600}
.pt-app .card .grow{flex:1}
.pt-app .card .btn,.pt-app .card .btn-2,.pt-app .card .btn-light{align-self:flex-start}
.pt-app .card.on{outline:2px solid var(--ink);outline-offset:-2px}
.pt-app .card.dark.on{outline-color:var(--bone)}

/* desktop feature */
.pt-app .desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:center}

/* questions */
.pt-app .qs{max-width:760px;margin-top:32px}
.pt-app .q{border-top:1px solid var(--line);padding:20px 0}
.pt-app .q:last-child{border-bottom:1px solid var(--line)}
.pt-app .q h3{font-size:17px;margin:0 0 6px}
.pt-app .q p{margin:0;color:var(--body);font-size:15.5px;max-width:64ch}

@media (max-width:960px){
  .pt-app .hero .in{grid-template-columns:1fr;gap:40px}
  .pt-app .feat{grid-template-columns:1fr;gap:28px}
  .pt-app .feat.flip .feat-media{order:0}
  .pt-app .cards{grid-template-columns:1fr}
  .pt-app .desk{grid-template-columns:1fr;gap:32px}
}
@media (max-width:600px){
  .pt-app .hero{padding-top:40px}
  .pt-app .hero h1{font-size:36px}
  .pt-app .hero p{font-size:16px}
  .pt-app .hero-actions .btn,.pt-app .hero-actions .btn-ghost{width:100%;justify-content:center}
  .pt-app .phone{width:230px}
  .pt-app section.band{padding:64px 0}
  .pt-app .sec-title{font-size:26px}
}

/* ==========================================================================
   OVERRIDES — what the live site needs on top of the mockup (each with its reason)
   ========================================================================== */

/* O1. The page renders inside GeneratePress's content containers via get_header(); every band must run edge to
   edge, so the theme's wrappers are unwrapped on this body class only (kept from the previous stylesheet). */
body.pt-app-page .site-content,
body.pt-app-page .content-area,
body.pt-app-page .site-main,
body.pt-app-page .inside-article,
body.pt-app-page .entry-content,
body.pt-app-page .grid-container,
body.pt-app-page .inside-site-container{max-width:100%!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
body.pt-app-page .site-main{margin-top:0!important;margin-bottom:0!important}
/* #content is a flex row in GeneratePress, so the page block must claim the full row; and the header is fixed
   (body padding-top comes from header-footer-global.css's --pt-header-h rule, which this body class was
   losing because the old stylesheet zeroed it) — restated here so the hero starts under the header, not behind it. */
body.pt-app-page #content.site-content>.pt-app{flex:1 1 100%;width:100%;max-width:100%}
body.pt-app-page{padding-top:var(--pt-header-h,72px)!important}
@media (max-width:1100px){ body.pt-app-page{padding-top:var(--pt-header-h,60px)!important} }

/* O2. §5a — GeneratePress prints `button:hover, button:focus { background:#333; color:#fff }` inline on every page
   and the child theme sets `button { color:#fff; background:#000 }`. The three button styles are used on <button>
   elements (hero install, card install, copy link), so every state restates background AND colour; hover dims,
   never recolours. The theme's `a { color:#e60101 }` is beaten for the link variants. */
.pt-app .btn,.pt-app a.btn,.pt-app button.btn,
.pt-app .btn:focus,.pt-app .btn:active{background:var(--ink);color:var(--paper);text-decoration:none;text-transform:none;letter-spacing:0;line-height:1.3;border-radius:0}
.pt-app .btn:hover{background:#000;color:var(--paper)}
.pt-app .btn.btn-light,.pt-app a.btn-light,.pt-app button.btn-light,
.pt-app .btn-light:focus,.pt-app .btn-light:active{background:var(--bone);color:var(--ink)}
.pt-app .btn-light:hover{background:#E4DFD3;color:var(--ink)}
.pt-app .btn-2,.pt-app a.btn-2,.pt-app button.btn-2,
.pt-app .btn-2:focus,.pt-app .btn-2:active{background:#fff;color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0;line-height:1.3;border-radius:0}
.pt-app .btn-2:hover{background:var(--paper);color:var(--ink)}
.pt-app .btn-ghost,.pt-app a.btn-ghost,
.pt-app .btn-ghost:focus,.pt-app .btn-ghost:active{background:none;color:var(--bone);text-decoration:none;text-transform:none;letter-spacing:0;line-height:1.3;border-radius:0}
.pt-app .btn-ghost:hover{background:rgba(239,235,227,.08);color:var(--bone);border-color:var(--bone)}
.pt-app .btn svg,.pt-app .btn-2 svg,.pt-app .btn-ghost svg{flex:none}

/* O3. Theme typography resets inside the page: `.site-content h1` uppercases, headings carry theme margins and
   colours, `p` and `ol` carry their own margins — the mockup assumed a clean document. */
.site-content .pt-app h1,.pt-app h1{text-transform:none;color:var(--bone);font-weight:800}
.pt-app h2,.pt-app h3{text-transform:none;color:inherit;font-weight:800}
.pt-app .card.dark h3,.pt-app .card.dark .card-top{color:var(--bone)}
.pt-app .card h3{color:var(--ink)}
.pt-app p{margin-top:0}
.pt-app ol{list-style:decimal}
.pt-app .card ol li{margin-left:0}

/* O4 + O5 retired 30 Sep 00:05: Leon's phone captures arrived, so the hero and the five feature rows use the mockup's
   phone frames exactly as drawn. */
.pt-app .phone img{border-radius:26px}

/* O6. States the mockup only previewed: the "Installed." confirmation that replaces the hero buttons, and the
   offline notice the service worker sends people to. */
.pt-app .installed{font-size:18px;color:var(--bone)}
.pt-app .installed b{font-weight:700}
.pt-app .pt-app-offline{background:#fff;border:1px solid var(--line);padding:24px;margin:24px auto;max-width:1120px}
.pt-app .pt-app-offline p{color:var(--body)}

/* O7. "Works on" marks in the hero (Leon 30 Sep 00:41): plain monochrome platform marks with the device names — the
   reassurance older members need that this is for THEIR phone — without the store badges the brief removed. */
.pt-app .works-on{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.pt-app .works-on li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--bone);margin:0}
.pt-app .works-on svg{flex:none;display:block;color:var(--bone)}
.pt-app .facts{margin-top:16px}

/* O8. Help: a "Watch how to install" button per card (only when that device's walkthrough exists), a Need-a-hand strip
   under the cards, and a Noir video dialog (white box, dark backdrop, close returns focus). */
.pt-app .card .watch{margin-top:10px;align-self:flex-start}
.pt-app .card.dark .watch,.pt-app .card.dark .watch:hover,.pt-app .card.dark .watch:focus,.pt-app .card.dark .watch:active{background:var(--graphite);color:var(--bone);border-color:var(--bone-dim)}
.pt-app .card.dark .watch:hover{border-color:var(--bone)}
.pt-app .help-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:20px 24px;background:var(--paper);border:1px solid var(--line)}
.pt-app .help-strip b{display:block;font-size:17px;margin-bottom:4px}
.pt-app .help-strip p{margin:0;color:var(--body);font-size:15px}
.pt-app .help-strip .btn-2{flex:none}
@media (max-width:700px){.pt-app .help-strip{flex-direction:column;align-items:stretch}.pt-app .help-strip .btn-2{justify-content:center}}
.pt-app .video-dialog{position:fixed;inset:0;z-index:9600;background:rgba(26,26,26,.62);display:flex;align-items:center;justify-content:center;padding:16px}
.pt-app .video-dialog[hidden]{display:none!important}
.pt-app .video-dialog__box{background:#fff;width:min(960px,100%);border:1px solid var(--line)}
.pt-app .video-dialog__head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.pt-app .video-dialog__close,.pt-app .video-dialog__close:hover,.pt-app .video-dialog__close:focus,.pt-app .video-dialog__close:active{background:none;color:var(--ink);border:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:0}
.pt-app .video-dialog__close:hover{background:var(--bone)}
.pt-app .video-dialog video{display:block;width:100%;max-height:80vh;background:#000}
body.pt-app-video-open{overflow:hidden}