/* =============================================================================
   Eight Pillars — public shell styles.
   The design tokens are copied verbatim from the course bundle so the public
   page and the product read as one product. Only the shell's own layout lives
   here; the course ships its own stylesheet inside the protected bundle.
   ============================================================================= */
:root{
  color-scheme:dark;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;
  --sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;

  --n0:#050609;--n50:#090b10;--n100:#0d1017;--n150:#11141c;--n200:#151924;--n250:#191e2a;
  --n300:#1e2431;--n350:#242b3a;--n400:#2b3242;--n450:#333c4f;--n500:#3d4759;
  --n600:#525d72;--n700:#788196;--n800:#a3abbc;--n900:#ccd2dd;--n950:#eef1f6;

  --bg:var(--n0);
  --surface-1:var(--n150);--surface-2:var(--n200);--surface-3:var(--n300);
  --border-hair:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --text:var(--n950);--text-dim:var(--n800);--text-faint:var(--n700);
  /* --text-ghost was --n600 (#525d72), which measured 2.78:1 on a card and
     2.65:1 on raised chrome — below the 4.5:1 that WCAG AA / IS 5568 require
     for body text. Raised to #8892a6, which measures 4.6:1 on the darkest card
     background used anywhere in the shell. */
  --text-ghost:#8892a6;

  --accent:#c7a96b;--accentText:#171009;
  --accent-a08:color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-a14:color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-a22:color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-a45:color-mix(in srgb, var(--accent) 45%, transparent);

  --good:#3ddc9a;--good-soft:color-mix(in srgb, var(--good) 15%, transparent);
  --good-line:color-mix(in srgb, var(--good) 42%, transparent);
  --bad:#ff7f8a;--bad-soft:color-mix(in srgb, var(--bad) 14%, transparent);
  --bad-line:color-mix(in srgb, var(--bad) 40%, transparent);
  --warn:#f7bb4e;--warn-soft:color-mix(in srgb, var(--warn) 15%, transparent);
  --warn-line:color-mix(in srgb, var(--warn) 42%, transparent);

  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Assistant","Rubik",Arial,sans-serif;
  --serif:"Lora",Georgia,serif;
  --rubik:"Rubik","Assistant",sans-serif;

  --shadow-sm:0 1px 1px rgba(0,0,0,.24), 0 4px 10px -2px rgba(0,0,0,.34);
  --shadow-md:0 2px 6px -1px rgba(0,0,0,.30), 0 14px 30px -8px rgba(0,0,0,.42);
  --shadow-lg:0 8px 18px -6px rgba(0,0,0,.36), 0 32px 64px -16px rgba(0,0,0,.52);
  --shadow-focus:0 0 0 3px var(--accent-a45);

  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-full:999px;
  --fs-2xs:10.5px;--fs-xs:11.5px;--fs-sm:12.5px;--fs-base:14px;--fs-md:15px;
  --fs-lg:17px;--fs-xl:20px;--fs-2xl:25px;--fs-3xl:31px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--r-xs)}

/* ---------------------------------------------------------------- public top */
.pub-top{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--n0) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-hair);
}
.pub-top-in{
  max-width:1120px;margin:0 auto;padding:var(--sp-3) var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
}
.pub-brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.pub-logo{width:34px;height:34px;object-fit:contain}
.pub-brand span{display:flex;flex-direction:column;line-height:1.15}
.pub-brand b{font-family:var(--rubik);font-size:var(--fs-md);letter-spacing:.01em}
.pub-brand small{font-size:var(--fs-2xs);color:var(--text-ghost);letter-spacing:.14em;text-transform:uppercase}
.pub-nav{display:flex;align-items:center;gap:var(--sp-5)}
.pub-nav a{color:var(--text-dim);text-decoration:none;font-size:var(--fs-sm)}
.pub-nav a:hover{color:var(--text)}
.pub-cta{
  font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-full);
  background:var(--accent);color:var(--accentText);border:0;
}
.pub-cta:hover{filter:brightness(1.07)}
@media (max-width:760px){ .pub-nav a{display:none} }

/* -------------------------------------------------------------------- hero */
.pub-hero{
  max-width:1120px;margin:0 auto;padding:var(--sp-11) var(--sp-5) var(--sp-9);
  display:grid;grid-template-columns:1.35fr .8fr;gap:var(--sp-9);align-items:center;
}
@media (max-width:860px){ .pub-hero{grid-template-columns:1fr;padding-top:var(--sp-8)} }
.pub-eyebrow{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-4);
}
.pub-hero h1{
  font-family:var(--rubik);font-weight:800;font-size:clamp(28px,4.4vw,var(--fs-3xl));
  line-height:1.25;margin:0 0 var(--sp-5);letter-spacing:-.01em;
}
.pub-lede{font-size:var(--fs-md);color:var(--text-dim);margin:0 0 var(--sp-6);max-width:56ch}
.pub-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.pub-btn-primary{
  font:inherit;font-weight:700;cursor:pointer;border:0;
  padding:var(--sp-3) var(--sp-7);border-radius:var(--r-full);
  background:var(--accent);color:var(--accentText);box-shadow:var(--shadow-sm);
}
.pub-btn-primary:hover{filter:brightness(1.07)}
.pub-btn-ghost{
  font:inherit;font-size:var(--fs-sm);color:var(--text-dim);text-decoration:none;
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-full);
  border:1px solid var(--border);
}
.pub-btn-ghost:hover{border-color:var(--border-strong);color:var(--text)}
.pub-disclaimer{
  margin:var(--sp-6) 0 0;font-size:var(--fs-xs);color:var(--text-ghost);
  max-width:60ch;line-height:1.7;
}
.pub-disclaimer b{color:var(--text-faint)}

.pub-hero-portrait{display:flex;flex-direction:column;gap:var(--sp-3)}
.pub-portrait-slot{
  aspect-ratio:4/5;border-radius:var(--r-lg);
  border:1px dashed var(--border-strong);background:var(--surface-1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);
  color:var(--text-ghost);
}
.pub-portrait-slot span{font-size:var(--fs-sm)}
.pub-portrait-slot small{font-family:var(--mono);font-size:var(--fs-2xs);opacity:.7}
.pub-hero-portrait img{
  /* height:auto is load-bearing: the width/height attributes on the <img> are
     there to reserve layout space before the file loads, but without this the
     height attribute wins over aspect-ratio and the portrait renders 900px tall
     on a narrow screen. */
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  /* The subject kneels low in the frame, so bias the crop upward to keep the
     face well inside the box at every width. */
  object-position:50% 35%;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface-1);
}
.pub-portrait-cap{display:flex;flex-direction:column;line-height:1.4}
.pub-portrait-cap b{font-family:var(--rubik);font-size:var(--fs-md)}
.pub-portrait-cap span{font-size:var(--fs-xs);color:var(--text-ghost)}

/* ----------------------------------------------------------------- sections */
.pub-section{max-width:1120px;margin:0 auto;padding:var(--sp-9) var(--sp-5);border-top:1px solid var(--border-hair)}
.pub-section-head{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.pub-num{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);letter-spacing:.12em}
.pub-section h2{font-family:var(--rubik);font-weight:800;font-size:var(--fs-2xl);margin:0;letter-spacing:-.01em}
.pub-prose{max-width:72ch}
.pub-prose p{margin:0 0 var(--sp-4);color:var(--text-dim);font-size:var(--fs-md)}
.pub-callout{
  margin:var(--sp-6) 0 0!important;padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-md);background:var(--accent-a08);
  border:1px solid var(--accent-a22);border-inline-start:3px solid var(--accent);
  color:var(--text)!important;font-family:var(--serif);font-size:var(--fs-lg)!important;
}
.pub-grid{
  margin-top:var(--sp-7);display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.pub-card{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);
}
.pub-card b{font-family:var(--rubik);font-size:var(--fs-md)}
.pub-card span{font-size:var(--fs-sm);color:var(--text-faint);line-height:1.6}
.pub-steps{margin:0 0 var(--sp-7);padding:0;list-style:none;counter-reset:s;display:grid;gap:var(--sp-3)}
.pub-steps li{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);
  align-items:baseline;padding:var(--sp-4) var(--sp-5);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);
}
.pub-steps li::before{
  content:counter(s);grid-row:span 2;font-family:var(--mono);font-size:var(--fs-lg);
  color:var(--accent);opacity:.85;
}
.pub-steps b{font-family:var(--rubik);font-size:var(--fs-md)}
.pub-steps span{font-size:var(--fs-sm);color:var(--text-faint)}

.pub-foot{
  max-width:1120px;margin:0 auto;padding:var(--sp-7) var(--sp-5) var(--sp-10);
  border-top:1px solid var(--border-hair);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  font-size:var(--fs-xs);color:var(--text-ghost);
}
.pub-foot-note{max-width:64ch;line-height:1.7}

/* -------------------------------------------------------------------- gate */
.auth-gate{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  background:radial-gradient(1100px 600px at 50% -10%, rgba(199,169,107,.07), transparent 70%), var(--bg);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-6);
}
.auth-card{
  width:min(480px,100%);background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-7);box-shadow:var(--shadow-lg);position:relative;
}
.auth-back{
  position:absolute;inset-inline-start:var(--sp-5);top:var(--sp-4);
  background:none;border:0;color:var(--text-ghost);font:inherit;font-size:var(--fs-xs);
  cursor:pointer;padding:var(--sp-1) 0;
}
.auth-back:hover{color:var(--text-dim)}
.auth-brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.brand-logo{width:38px;height:38px;object-fit:contain}
.auth-brand b{font-family:var(--rubik);font-size:var(--fs-md);display:block}
.ivy-badge{font-size:var(--fs-2xs);color:var(--text-ghost);letter-spacing:.04em}
.auth-view h2{font-family:var(--rubik);font-weight:800;font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.auth-view p{margin:0 0 var(--sp-5);color:var(--text-dim);font-size:var(--fs-sm);line-height:1.7}
.auth-loading{color:var(--text-faint);text-align:center;padding:var(--sp-6) 0}
.auth-note{font-size:var(--fs-xs)!important;color:var(--text-ghost)!important}
#verifyForm+.auth-note{margin-top:14px}
.code-help{display:grid;gap:10px;margin-top:18px}
.code-help a{display:flex;justify-content:center;align-items:center;min-height:46px;text-decoration:none}
.code-bit{display:grid;justify-items:center;gap:10px}
.code-bit-note{margin:0;font-size:var(--fs-sm);color:var(--text-ghost);text-align:center}
.auth-hint{font-size:var(--fs-xs)!important;color:var(--text-ghost)!important;margin:calc(-1*var(--sp-2)) 0 var(--sp-4)!important}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-3);padding:1px 5px;border-radius:var(--r-xs)}

.auth-tabs{display:flex;gap:var(--sp-1);background:var(--surface-2);padding:var(--sp-1);border-radius:var(--r-full);margin-bottom:var(--sp-6)}
.auth-tab{
  flex:1;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  padding:var(--sp-2);border:0;border-radius:var(--r-full);
  background:transparent;color:var(--text-faint);
}
.auth-tab.active{background:var(--surface-3);color:var(--text)}
.auth-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.form-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-field>span{font-size:var(--fs-xs);color:var(--text-faint);font-weight:600}
.form-field input,.form-field select{
  font:inherit;font-size:var(--fs-base);color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);width:100%;
}
.form-field input:focus,.form-field select:focus{outline:none;border-color:var(--accent-a45);box-shadow:var(--shadow-focus)}
.auth-confirm-row{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:var(--sp-5);cursor:pointer}
.auth-confirm-row input{margin-top:3px;accent-color:var(--accent)}

.primary-btn{
  font:inherit;font-weight:700;cursor:pointer;border:0;width:100%;
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);
  background:var(--accent);color:var(--accentText);
}
.primary-btn:hover:not(:disabled){filter:brightness(1.07)}
.primary-btn:disabled{opacity:.45;cursor:not-allowed}
.ghost-btn{
  font:inherit;font-size:var(--fs-sm);cursor:pointer;width:100%;
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);
  background:transparent;color:var(--text-dim);border:1px solid var(--border);
}
.ghost-btn:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}
.ghost-btn:disabled{opacity:.45;cursor:not-allowed}
.link-btn{
  font:inherit;font-size:var(--fs-xs);cursor:pointer;background:none;border:0;
  color:var(--text-ghost);text-decoration:underline;text-underline-offset:3px;
  padding:var(--sp-2);width:100%;margin-top:var(--sp-1);
}
.link-btn:hover{color:var(--text-dim)}

.auth-message{font-size:var(--fs-sm);line-height:1.6;min-height:1px}
.auth-message:empty{display:none}
.auth-message{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm)}
.auth-message.is-error{background:var(--bad-soft);border:1px solid var(--bad-line);color:var(--bad)}
.auth-message.is-ok{background:var(--good-soft);border:1px solid var(--good-line);color:var(--good)}
.auth-message.is-info{background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim)}

.auth-progress{height:3px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.auth-progress i{
  display:block;height:100%;width:35%;border-radius:inherit;background:var(--accent);
  animation:epslide 1.15s ease-in-out infinite;
}
@keyframes epslide{
  0%{transform:translateX(120%)} 100%{transform:translateX(-320%)}
}
@media (prefers-reduced-motion:reduce){
  .auth-progress i{animation:none;width:100%;opacity:.55}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------- personal-use terms */
.terms-list{
  margin:0 0 var(--sp-5);padding:0 0 0 0;padding-inline-start:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);
  font-size:var(--fs-sm);color:var(--text-dim);line-height:1.65;
}
.terms-list li::marker{color:var(--accent)}
.terms-list b{color:var(--text)}
.terms-warn{
  margin:0 0 var(--sp-5)!important;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm);background:var(--warn-soft);
  border:1px solid var(--warn-line);
  color:var(--warn)!important;font-size:var(--fs-sm)!important;
}
.terms-warn b{color:var(--warn)}


/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
.skip-link{
  position:absolute;inset-inline-start:var(--sp-4);top:calc(-1 * var(--sp-12));
  z-index:200;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);
  background:var(--accent);color:var(--accentText);
  font-weight:700;text-decoration:none;
  transition:top .12s ease-out;
}
.skip-link:focus{top:var(--sp-4)}
@media (prefers-reduced-motion:reduce){ .skip-link{transition:none} }

/* Focus must be visible on every interactive element, not only the ones that
   happen to inherit it. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);
}
#top:focus,.legal-main:focus{outline:none}

/* ============================================================================
   SIGNUP CONSENT
   ============================================================================ */
.consent-group{
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--sp-4);margin:0 0 var(--sp-4);
}
.consent-group legend{
  padding:0 var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--text-faint);
}
.consent-group .auth-confirm-row{margin-bottom:var(--sp-2)}
.consent-group .auth-confirm-row:last-of-type{margin-bottom:0}
.consent-required span{color:var(--text)}
.consent-required a{color:var(--accent)}
#signupConsent .auth-confirm-row{margin-bottom:var(--sp-4)}

.collection-notice{
  border:1px solid var(--border-hair);border-radius:var(--r-sm);
  background:var(--surface-2);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs);color:var(--text-faint);line-height:1.7;
  margin-bottom:var(--sp-2);
}
.collection-notice summary{cursor:pointer;font-weight:700;color:var(--text-dim)}
.collection-notice p{margin:var(--sp-3) 0 0}
.collection-notice a{color:var(--accent)}

/* ============================================================================
   LEGAL PAGES
   ============================================================================ */
#legalPage{min-height:100vh;background:var(--bg)}
.legal-top{
  max-width:960px;margin:0 auto;padding:var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  border-bottom:1px solid var(--border-hair);
}
.legal-main{max-width:960px;margin:0 auto;padding:var(--sp-7) var(--sp-5) var(--sp-10)}
.legal-nav{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-7);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border-hair);
}
.legal-nav a{
  font-size:var(--fs-sm);color:var(--text-dim);text-decoration:none;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);
  border:1px solid var(--border);
}
.legal-nav a:hover{color:var(--text);border-color:var(--border-strong)}
.legal-nav a.is-active{background:var(--accent-a14);border-color:var(--accent-a45);color:var(--text)}

.legal-article h1{
  font-family:var(--rubik);font-weight:800;font-size:var(--fs-2xl);
  margin:0 0 var(--sp-2);line-height:1.3;
}
.legal-meta{font-size:var(--fs-xs);color:var(--text-faint);margin:0 0 var(--sp-7)}
.legal-article h3{
  font-family:var(--rubik);font-weight:700;font-size:var(--fs-lg);
  margin:var(--sp-8) 0 var(--sp-3);padding-top:var(--sp-4);
  border-top:1px solid var(--border-hair);
}
.legal-article h4{
  font-family:var(--rubik);font-weight:700;font-size:var(--fs-md);
  margin:var(--sp-5) 0 var(--sp-2);color:var(--text-dim);
}
.legal-article p,.legal-article li{
  font-size:var(--fs-base);line-height:1.85;color:var(--text-dim);
}
.legal-article p{margin:0 0 var(--sp-4)}
.legal-article ul{margin:0 0 var(--sp-4);padding-inline-start:var(--sp-6)}
.legal-article li{margin-bottom:var(--sp-2)}
.legal-article li::marker{color:var(--accent)}
.legal-article a{color:var(--accent);text-underline-offset:3px}
.legal-lead{font-size:var(--fs-md)!important;color:var(--text)!important}

.legal-identity{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-5);
  margin:0 0 var(--sp-5);padding:var(--sp-4) var(--sp-5);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);
  font-size:var(--fs-sm);
}
.legal-identity dt{color:var(--text-faint);font-weight:700}
.legal-identity dd{margin:0;color:var(--text)}

.legal-table{
  width:100%;border-collapse:collapse;margin:0 0 var(--sp-5);
  font-size:var(--fs-sm);display:block;overflow-x:auto;
}
.legal-table th,.legal-table td{
  border:1px solid var(--border);padding:var(--sp-3);text-align:start;vertical-align:top;
}
.legal-table th{background:var(--surface-2);color:var(--text);font-weight:700}
.legal-table td{color:var(--text-dim)}

.legal-note{
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:var(--fs-sm)!important;
}
.legal-pending{
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);margin:0 0 var(--sp-5);
  background:var(--warn-soft);border:1px solid var(--warn-line);
  color:var(--warn);font-size:var(--fs-sm);line-height:1.75;
}
.legal-pending b{color:var(--warn)}
/* An unresolved legal value is marked, never rendered as a raw {{TOKEN}}. */
.legal-unset{
  display:inline-block;padding:0 6px;border-radius:var(--r-xs);
  background:var(--warn-soft);border:1px dashed var(--warn-line);
  color:var(--warn);font-size:.92em;
}

/* ============================================================================
   GLOBAL LEGAL FOOTER
   ============================================================================ */
.legal-footer{
  border-top:1px solid var(--border-hair);
  padding:var(--sp-6) var(--sp-5) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;
  text-align:center;background:var(--bg);
}
.legal-footer-links{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:center;
}
.legal-footer-links a{
  font-size:var(--fs-sm);color:var(--text-dim);text-decoration:none;
  padding:var(--sp-1) 0;
}
.legal-footer-links a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.legal-footer-identity{font-size:var(--fs-xs);color:var(--text-faint)}
.legal-footer-identity:empty{display:none}
.legal-footer-copy{font-size:var(--fs-xs);color:var(--text-faint)}
.legal-footer-tm{
  font-size:var(--fs-2xs);color:var(--text-ghost);max-width:70ch;line-height:1.7;
}

.danger-like-btn{
  font:inherit;font-weight:700;cursor:pointer;width:100%;
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);
  background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-line);
}
.danger-like-btn:disabled{opacity:.45;cursor:not-allowed}
.form-field textarea{
  font:inherit;font-size:var(--fs-base);color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);width:100%;resize:vertical;
}

/* ============================================================================
   PRINT — legal pages must print cleanly.
   ============================================================================ */
@media print{
  .legal-top,.legal-nav,.legal-footer,.skip-link,#publicPage,#authGate{display:none!important}
  #legalPage{background:#fff}
  .legal-article h1,.legal-article h3,.legal-article h4,
  .legal-article p,.legal-article li,.legal-identity dd{color:#000}
  .legal-identity,.legal-note,.legal-table th{background:#fff;border-color:#999}
  .legal-article{max-width:none}
  a[href^="#"]:after{content:""}
}

/* Public-page readability and native, keyboard-accessible FAQ. */
#publicPage .pub-prose { max-width: 760px; }
#publicPage .pub-prose p, #publicPage .pub-card span, #publicPage .pub-steps span { line-height: 1.85; }
#publicPage .pub-actions a { text-decoration: none; text-align: center; }
#publicPage .pub-disclaimer a { color: inherit; text-underline-offset: 4px; overflow-wrap: anywhere; }
#publicPage .pub-faq { padding: 20px 0; border-bottom: 1px solid #343640; }
#publicPage .pub-faq summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; }
#publicPage .pub-faq p { max-width: 720px; line-height: 1.85; color: #c5c6ce; }
#publicPage a:focus-visible, #publicPage summary:focus-visible { outline: 2px solid #d8c48e; outline-offset: 5px; }
#publicPage #contact { scroll-margin-top: 100px; }
@media(max-width:600px) { #publicPage .pub-actions { flex-wrap:wrap; } #publicPage .pub-actions a { max-width:100%; box-sizing:border-box; } }

/* ============================================================================
   FREE GUIDE
   ============================================================================ */
.pub-guide{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.guide-card{
  background:linear-gradient(160deg, var(--accent-a08), transparent 60%), var(--surface-1);
  border:1px solid var(--accent-a22);
  border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-7);
}
.guide-card h2{
  font-family:var(--rubik);font-weight:800;font-size:var(--fs-2xl);
  margin:0 0 var(--sp-4);line-height:1.3;letter-spacing:-.01em;
}
.guide-copy>p{color:var(--text-dim);font-size:var(--fs-md);margin:0 0 var(--sp-5);max-width:62ch}
.guide-list{
  margin:0 0 var(--sp-6);padding-inline-start:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-2);max-width:66ch;
}
.guide-list li{color:var(--text-dim);font-size:var(--fs-sm);line-height:1.65}
.guide-list li::marker{color:var(--accent)}
.guide-note{
  margin:var(--sp-5) 0 0!important;font-size:var(--fs-xs)!important;
  color:var(--text-faint)!important;
}
@media (max-width:600px){ .guide-card{padding:var(--sp-6) var(--sp-5)} }

/* ---------------------------------------------------------- guide lead form */
.guide-form{display:flex;flex-direction:column;gap:var(--sp-4);max-width:640px}
.guide-fields{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.guide-form .form-field>span{color:var(--text-dim)}
.guide-form .auth-confirm-row{margin-bottom:0}
.guide-form .pub-btn-primary{align-self:flex-start;border:0;cursor:pointer}
.guide-form .pub-btn-primary:disabled{opacity:.5;cursor:not-allowed}
/* Off-screen rather than display:none — some bots skip hidden fields. */
.guide-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------- guide-led hero layout
   The hero now carries the whole free-guide offer plus its form, so the copy
   column needs more room than the original 1.35/0.8 split and the portrait
   should not stretch to match a much taller neighbour. */
.pub-hero{align-items:start;grid-template-columns:1.5fr 0.75fr}
.pub-hero .guide-list{margin:0 0 var(--sp-6)}
.pub-hero .guide-form{margin-bottom:var(--sp-5)}
.pub-hero .pub-lede{margin-bottom:var(--sp-5)}
.pub-hero-portrait{position:sticky;top:var(--sp-8)}
@media (max-width:860px){
  .pub-hero{grid-template-columns:1fr}
  /* On a phone, the photo goes above the form: it is the thing that makes the
     offer feel like it comes from a person. */
  .pub-hero-copy{order:2}
  .pub-hero-portrait{order:1;position:static;max-width:320px}
}

.guide-done{
  padding:var(--sp-6);border-radius:var(--r-md);
  background:var(--good-soft);border:1px solid var(--good-line);
  max-width:640px;
}
.guide-done h2{font-family:var(--rubik);font-size:var(--fs-xl);margin:0 0 var(--sp-2)}
.guide-done p{color:var(--text-dim);margin:0 0 var(--sp-4)}
.guide-done .pub-actions{margin-bottom:var(--sp-3)}

/* Arrows are drawn, not typed, so no phone turns them into emoji. */
.ep-arrow{display:inline-block;flex:none;width:.74em;height:.74em;margin-inline-start:.4em;vertical-align:-.04em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ep-arrow-both{width:1.15em;margin-inline-start:0}
html{font-variant-emoji:text}
/* David, 1 Oct 2026: the chat footer ("AI יכול לטעות…", "Enter לשליחה…") is not
   relevant to students. Hidden here so the released course bundle stays as is;
   remove the .moti-footer block from course/app/moti.js in the next bundle. */
.moti-dialog .moti-footer{display:none!important}

/* Free trial: choosing the one track (gate view "trial-track"). */
.trial-track-choice{display:grid;gap:10px;margin-top:18px}
.trial-track-choice .primary-btn{width:100%}