/* public-premium-2026-10-15 - one finish for the public pages, loaded AFTER the shared site stylesheet.
   Looks only: no rule here hides, moves or restyles away a link, a price, a button target or a Stripe/data-pkg element;
   every selector is a class the pages already carry. Edited only through 4_SCRIPTS/patches/public_premium_2026-10-15.js,
   which names the file for its own contents (trap 20: /assets/css/* is immutable for a year). */

/* 1. FOLLOW THE PHONE. The site's dark palette (the same tokens and rules as :root[data-theme="dark"] in the site
   stylesheet) applies when the phone or browser is set to dark, unless the page says data-theme="light". A saved
   light/dark choice from the member pages (arch_theme) is read by the one head line these pages carry and wins. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --plane:#101725; --surface:#17203a; --surface-2:#1d2745; --surface-3:#26314f;
    --ink:#f6f4ee; --ink-2:#c9cfdd; --ink-3:#8e97ab;
    --rule:#26314f; --rule-2:#33405f;
    --navy:#f6f4ee;
    --gold:#e5c158; --gold-2:#f0d585; --gold-soft:#2b2415; --gold-line:#7a6420;
    --red:#ff8a80; --red-2:#ffab9f; --red-soft:#3a1a18; --red-line:#c0392b;
    --green:#5fd58a; --green-soft:#12301f; --green-line:#2e8b57;
    --amber:#e5c158; --amber-soft:#2b2415;
    --s1:#93a7d6; --s2:#5fd58a; --s3:#e5c158; --s4:#c79ae0; --s5:#6fb6ea;
    --s6:#ff8a80; --s7:#4fd1c5; --s8:#d4b483;
    --on-navy:#16233f;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 4px 12px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
    --on-gold:#16233f; --on-gold-2:#16233f; --on-red:#101a2e; --on-green:#101a2e; --paper:var(--surface); --ico-pale:#eef2fa;
  }
  :root:not([data-theme="light"]) #wm{opacity:.11}
  :root:not([data-theme="light"]) .topbar{background:rgba(23,32,58,.92)}
  :root:not([data-theme="light"]) .site-head{background:rgba(23,32,58,.88)}

  /* the dark bands stay dark (their tokens invert to cream otherwise); their text is already literal white */
  :root:not([data-theme="light"]) :is(.story,.cta-band,.alert-band,.ready-band,.closer,.gcall,.pg-hero,.pf-cta){
    background:#0a1120;color:#f6f4ee;--on-navy:#f6f4ee}
  :root:not([data-theme="light"]) .hero{background:linear-gradient(180deg,var(--surface-2) 0%,var(--plane) 62%)}
  :root:not([data-theme="light"]) a:not([class]){color:var(--gold-2)}
  :root:not([data-theme="light"]) a:not([class]):hover{color:var(--ink)}
  :root:not([data-theme="light"]) img[src*="/img/art/"]{filter:invert(1) hue-rotate(180deg) brightness(1.05)}
  :root:not([data-theme="light"]) .phead{background:linear-gradient(180deg,var(--surface-2),var(--plane))}
  :root:not([data-theme="light"]) .rumatrix .tbl th.best,:root:not([data-theme="light"]) .rumatrix .tbl td.best{background:var(--gold-soft)}
  :root:not([data-theme="light"]) .contacts a.wa .ci,:root:not([data-theme="light"]) .contacts a.ig .ci,:root:not([data-theme="light"]) .contacts a.em .ci{background:var(--surface-3)}
  :root:not([data-theme="light"]) .contacts a.em .ci svg{stroke:var(--ink)}

  /* free-trial: its form and picture frames write literal navy text and white grounds */
  :root:not([data-theme="light"]) .onecard h1,:root:not([data-theme="light"]) .onecard label,:root:not([data-theme="light"]) .coursepick b,:root:not([data-theme="light"]) .tproof b,:root:not([data-theme="light"]) .tsrc>summary,:root:not([data-theme="light"]) .onecard .linkish{color:var(--ink)}
  :root:not([data-theme="light"]) .onecard .lede,:root:not([data-theme="light"]) .tsrc .tsrcbody{color:var(--ink-2)}
  :root:not([data-theme="light"]) .onecard .foot,:root:not([data-theme="light"]) .coursepick span,:root:not([data-theme="light"]) .tproof span{color:var(--ink-3)}
  :root:not([data-theme="light"]) .onecard input[type=email],:root:not([data-theme="light"]) .onecard input[type=password],:root:not([data-theme="light"]) .onecard input[type=text],:root:not([data-theme="light"]) .onecard input[type=tel],:root:not([data-theme="light"]) .tad-tr-selwrap select{background:var(--surface-2);border-color:var(--rule-2);color:var(--ink)}
  :root:not([data-theme="light"]) .onecard{border-color:var(--rule)}
  :root:not([data-theme="light"]) .coursepick label{border-color:var(--rule-2)}
  :root:not([data-theme="light"]) .coursepick label.on{border-color:var(--gold);background:var(--gold-soft)}
  :root:not([data-theme="light"]) .tshot,:root:not([data-theme="light"]) .tshot figcaption,:root:not([data-theme="light"]) .tsrc{background:var(--surface);border-color:var(--rule)}
  :root:not([data-theme="light"]) .tshot img{background:#fff}
  :root:not([data-theme="light"]) .onecard .aerr{background:var(--red-soft);border-color:var(--red-line);color:var(--red-2)}
  :root:not([data-theme="light"]) .onecard .aerr.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
}
/* the same rules for a saved dark choice */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --plane:#101725; --surface:#17203a; --surface-2:#1d2745; --surface-3:#26314f;
    --ink:#f6f4ee; --ink-2:#c9cfdd; --ink-3:#8e97ab;
    --rule:#26314f; --rule-2:#33405f;
    --navy:#f6f4ee;
    --gold:#e5c158; --gold-2:#f0d585; --gold-soft:#2b2415; --gold-line:#7a6420;
    --red:#ff8a80; --red-2:#ffab9f; --red-soft:#3a1a18; --red-line:#c0392b;
    --green:#5fd58a; --green-soft:#12301f; --green-line:#2e8b57;
    --amber:#e5c158; --amber-soft:#2b2415;
    --s1:#93a7d6; --s2:#5fd58a; --s3:#e5c158; --s4:#c79ae0; --s5:#6fb6ea;
    --s6:#ff8a80; --s7:#4fd1c5; --s8:#d4b483;
    --on-navy:#16233f;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 4px 12px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
    --on-gold:#16233f; --on-gold-2:#16233f; --on-red:#101a2e; --on-green:#101a2e; --paper:var(--surface); --ico-pale:#eef2fa;
  }
  :root[data-theme="dark"] #wm{opacity:.11}
  :root[data-theme="dark"] .topbar{background:rgba(23,32,58,.92)}
  :root[data-theme="dark"] .site-head{background:rgba(23,32,58,.88)}

  /* the dark bands stay dark (their tokens invert to cream otherwise); their text is already literal white */
  :root[data-theme="dark"] :is(.story,.cta-band,.alert-band,.ready-band,.closer,.gcall,.pg-hero,.pf-cta){
    background:#0a1120;color:#f6f4ee;--on-navy:#f6f4ee}
  :root[data-theme="dark"] .hero{background:linear-gradient(180deg,var(--surface-2) 0%,var(--plane) 62%)}
  :root[data-theme="dark"] a:not([class]){color:var(--gold-2)}
  :root[data-theme="dark"] a:not([class]):hover{color:var(--ink)}
  :root[data-theme="dark"] img[src*="/img/art/"]{filter:invert(1) hue-rotate(180deg) brightness(1.05)}
  :root[data-theme="dark"] .phead{background:linear-gradient(180deg,var(--surface-2),var(--plane))}
  :root[data-theme="dark"] .rumatrix .tbl th.best,:root[data-theme="dark"] .rumatrix .tbl td.best{background:var(--gold-soft)}
  :root[data-theme="dark"] .contacts a.wa .ci,:root[data-theme="dark"] .contacts a.ig .ci,:root[data-theme="dark"] .contacts a.em .ci{background:var(--surface-3)}
  :root[data-theme="dark"] .contacts a.em .ci svg{stroke:var(--ink)}

  /* free-trial: its form and picture frames write literal navy text and white grounds */
  :root[data-theme="dark"] .onecard h1,:root[data-theme="dark"] .onecard label,:root[data-theme="dark"] .coursepick b,:root[data-theme="dark"] .tproof b,:root[data-theme="dark"] .tsrc>summary,:root[data-theme="dark"] .onecard .linkish{color:var(--ink)}
  :root[data-theme="dark"] .onecard .lede,:root[data-theme="dark"] .tsrc .tsrcbody{color:var(--ink-2)}
  :root[data-theme="dark"] .onecard .foot,:root[data-theme="dark"] .coursepick span,:root[data-theme="dark"] .tproof span{color:var(--ink-3)}
  :root[data-theme="dark"] .onecard input[type=email],:root[data-theme="dark"] .onecard input[type=password],:root[data-theme="dark"] .onecard input[type=text],:root[data-theme="dark"] .onecard input[type=tel],:root[data-theme="dark"] .tad-tr-selwrap select{background:var(--surface-2);border-color:var(--rule-2);color:var(--ink)}
  :root[data-theme="dark"] .onecard{border-color:var(--rule)}
  :root[data-theme="dark"] .coursepick label{border-color:var(--rule-2)}
  :root[data-theme="dark"] .coursepick label.on{border-color:var(--gold);background:var(--gold-soft)}
  :root[data-theme="dark"] .tshot,:root[data-theme="dark"] .tshot figcaption,:root[data-theme="dark"] .tsrc{background:var(--surface);border-color:var(--rule)}
  :root[data-theme="dark"] .tshot img{background:#fff}
  :root[data-theme="dark"] .onecard .aerr{background:var(--red-soft);border-color:var(--red-line);color:var(--red-2)}
  :root[data-theme="dark"] .onecard .aerr.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}


/* 2. ONE FINISH, ALL FOUR COURSE PAGES AND THE REST OF THE PUBLIC SITE (light and dark alike). Looks only. */
.pub main :is(h1,h2){text-wrap:balance}
.pub main :is(.lede,.sec-lede){text-wrap:pretty}
/* prices and counts line up */
.pub :is(.price,.hstats dt,.hero-num,.cmp-cost .big){font-variant-numeric:lining-nums tabular-nums}
/* the course pages' fact and feature cards read as one family: the IDC page's plain cards get the same lift as the
   other pages' tappable ones (shadow, hover), without moving anything */
.pub .pgrid.facts .fcard,.pub .tad-proofs li{box-shadow:var(--shadow);transition:box-shadow .16s ease,transform .16s ease}
.pub .pgrid.facts .fcard:hover,.pub .tad-proofs li:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* the price card: the same gold edge on every course page */
.pub .tad-price .pcard{box-shadow:var(--shadow-lg)}
/* phone: every button in the page body is a full-size tap target */
@media (max-width:640px){.pub main .btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){
  .pub .pgrid.facts .fcard,.pub .tad-proofs li{transition:none}
  .pub .pgrid.facts .fcard:hover,.pub .tad-proofs li:hover{transform:none}
}

/* 3. THE TAPPABLE FEATURE CARD, ONE RULE SET FOR EVERY PAGE. The ORE page defines details.fcard in its own style block; the LDS
   page uses the same card once, at the end of its candidates' band, without the rules, so it drew a bare browser triangle and its
   heading and line came out white on the white card (the story band's own white text). The same rules here (the ORE page's, word
   for word), and the band's white text put back to ink inside the card. */
.feat-hint{margin:.6rem 0 0;color:var(--ink-3);font-weight:600;font-size:.92rem}
details.fcard{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .16s ease,transform .16s ease;padding:0}
details.fcard[open]{box-shadow:var(--shadow-lg)}
details.fcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
details.fcard>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;padding:.85rem .95rem}
details.fcard>summary::-webkit-details-marker{display:none}
details.fcard>summary .f-ic{margin:0;flex:0 0 auto;width:22px;height:22px}
details.fcard>summary h3{margin:0;flex:1 1 auto;font-size:.95rem;line-height:1.25}
details.fcard>summary .fchev{flex:0 0 auto;width:17px;height:17px;color:var(--ink-3);transition:transform .18s ease}
details.fcard[open]>summary .fchev{transform:rotate(90deg)}
details.fcard>p{margin:0;padding:0 .95rem .95rem;font-size:.9rem;color:var(--ink-2)}
.story details.fcard{margin:1rem 0 0}
.story details.fcard h3{color:var(--navy)}
.story details.fcard>p{color:var(--ink-2)}
.story details.fcard .f-ic{color:var(--gold-2)}
@media (prefers-reduced-motion:reduce){details.fcard,details.fcard>summary .fchev{transition:none}details.fcard:hover{transform:none}}