*{margin:0;padding:0;box-sizing:border-box}
  /* overflow-x:clip on BOTH html and body: body alone can propagate its
     overflow to the viewport, so decorative bleed (rotated annotations, glow
     pseudo-elements, wide halos) still triggers a horizontal scrollbar on
     mobile. Clipping html too contains it reliably. */
  html{scroll-behavior:smooth;overflow-x:clip}
  body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;overflow-x:clip}
  h1,h2,h3,.wordmark{font-family:'Poppins',sans-serif}
  .script{font-family:'Caveat',cursive;color:var(--red);font-weight:700}
  a{text-decoration:none;color:inherit}
  img{max-width:100%}
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px}
  /* AA contrast: small uppercase labels use --red-deep on light */
  .eyebrow{color:var(--red-deep);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;text-wrap:balance}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
  .eyebrow.center{justify-content:center}
  /* the editor's red "strike-through pen" on a word (e.g. hero's crossed-out
     "hours"). Shared by every page; each page sizes/positions its own
     `.cross svg` box. stroke-width here is the single knob for line thickness. */
  .cross{position:relative;white-space:nowrap}
  .cross svg path{stroke:var(--red);stroke-width:4;fill:none;stroke-linecap:round;
    stroke-dasharray:1;stroke-dashoffset:1;animation:penDraw .5s ease-out .9s forwards}
  /* Scroll reveal: elements start hidden, get `.in` when observed (see nav.js).
     Shared across every page; the reduced-motion fallback is below. */
  .rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .rv.in{opacity:1;transform:none}
  .btn{display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;font-size:.93rem;padding:13px 26px;border-radius:6px;transition:background .15s ease,transform .15s ease,box-shadow .2s ease;cursor:pointer;border:none}
  .btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .btn-red{background:var(--red);color:#fff}
  .btn-red:hover{background:var(--red-deep);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:#fff}
  .btn-lg{padding:17px 34px;font-size:1.02rem}
  .btn-sm{padding:10px 20px;font-size:.88rem}
  h2.sec{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:700;line-height:1.22;letter-spacing:-.01em;margin-bottom:10px;max-width:46rem}
  p.sec-sub{color:var(--gray);max-width:40rem;margin-bottom:44px;font-size:1rem}

  /* ---- avatars / photo fallback layers (same approach as original) ---- */
  .pf{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;background-color:var(--photo);background-size:cover;background-position:center;flex-shrink:0;position:relative;overflow:hidden}
  /* initials sit above the .pf background as a graceful fallback; the img,
     when it loads, stacks on top. A failed img is hidden (not removed) so the
     initials show through — see the onerror handler in the templates. */
  .pf .ini{position:absolute;z-index:0;font-size:inherit;letter-spacing:.02em;color:#8C8880}
  .pf img,.mphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
  /* Master photos: extracted from per-page base64 data URLs to shared files so
     each image is defined and cached once instead of re-embedded per stylesheet. */
  .p-anubhav{background-image:url(/assets/img/master-anubhav.jpg);background-size:cover;background-position:center 25%}
  .p-bartz{background-image:url(/assets/img/master-bartz.jpg);background-size:cover;background-position:center 25%}
  .p-brier{background-image:url(/assets/img/master-brier.jpg);background-size:cover;background-position:center 25%}
  .p-feifer{background-image:url(/assets/img/master-feifer.jpg);background-size:cover;background-position:center 25%}
  .p-geletka{background-image:url(/assets/img/master-geletka.jpg);background-size:cover;background-position:center 25%}
  .p-lazer{background-image:url(/assets/img/master-lazer.jpg);background-size:cover;background-position:center 25%}
  .p-raj{background-image:url(/assets/img/master-raj.jpg);background-size:cover;background-position:center 25%}
  .p-yonchev{background-image:url(/assets/img/master-yonchev.jpg);background-size:cover;background-position:center 25%}
  .p-dan{background-image:url(/assets/img/dan-manning.jpg);background-size:cover;background-position:center}
  .p-nikki{background-image:url(/assets/img/nikki-estes.jpg);background-size:cover;background-position:center}
  .p-cory{background-image:url(/assets/img/690e3664-0f63-4d-360505db.webp);background-size:cover;background-position:center 25%}
  .p-carrie{background-image:url(/assets/img/6914b506-8d03-49-6147d3dd.webp);background-size:cover;background-position:center 25%}
  .g1{background:linear-gradient(135deg,#EF2D56,#F5A623)}
  .g2{background:linear-gradient(135deg,#6C4CF1,#EF2D56)}
  .g3{background:linear-gradient(135deg,#F5A623,#12A87B)}
  .g4{background:linear-gradient(135deg,#12A87B,#6C4CF1)}
  .g5{background:linear-gradient(135deg,#EF2D56,#6C4CF1)}
  .g6{background:linear-gradient(135deg,#F5A623,#EF2D56)}

  /* ---- rail + nav (identical brand furniture) ---- */
  .rail{position:fixed;left:0;top:0;bottom:0;width:56px;border-right:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;padding-bottom:32px;background:var(--white);z-index:50}
  .rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:.06em;color:var(--red);font-size:1rem}
  main{margin-left:56px}
  nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;position:relative}
  .wordmark{font-weight:800;font-size:1.2rem;display:inline-flex;align-items:center}
  .wordmark b{color:var(--red)}
  .wordmark svg{display:block;height:38px;width:auto}
  footer .wordmark svg{height:30px}
  footer .wordmark svg .lgu{fill:#fff}
  .navlinks{display:flex;gap:26px;align-items:center;font-weight:500;font-size:.92rem}
  .navlinks a:not(.btn):hover{color:var(--red-deep)}
.navlinks a.active:not(.btn){color:var(--red-deep);font-weight:700}
  /* Fixed-width nav CTA so the button stays the same size whether it reads
   "Become a Master" or the shorter "Start Free" — no layout shift per page. */
.nav-cta{min-width:168px;text-align:center}
.navburger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin:-8px}
  .navburger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s ease,opacity .2s ease}
  .navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
footer{background:var(--ink);color:#C9C9D2;padding:42px 0;font-size:.84rem}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot-grid .wordmark{color:#fff}
.foot-links{display:flex;gap:20px}
.foot-links a:hover{color:#fff}
.foot-tag{font-family:'Caveat',cursive;font-size:1.25rem;color:var(--red)}
footer .wordmark svg{height:30px}
footer .wordmark svg .lgu{fill:#fff}

/* ---- responsive: mobile nav (chrome only) ---- */
@media (max-width:900px){
  .rail{display:none} main{margin-left:0}
  .navburger{display:block}
  .navlinks{display:none;position:absolute;top:100%;right:0;left:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 48px rgba(21,21,28,.14);flex-direction:column;align-items:flex-start;gap:0;padding:10px}
  .navlinks.open{display:flex}
  .navlinks a{width:100%;padding:12px 14px;border-radius:8px}
  .navlinks a:not(.btn):hover{background:var(--soft)}
  .navlinks .btn{margin-top:8px;text-align:center}
}

/* ---- back-to-top button (hovering, appears after scrolling) ---- */
.to-top{
  position:fixed;right:28px;bottom:28px;z-index:80;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  box-shadow:0 8px 24px rgba(21,21,28,.22);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .15s ease;
}
.to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.to-top:hover{background:var(--red);transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:900px){ .to-top{right:16px;bottom:16px} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .to-top{transition:opacity .2s ease}
  .navburger span{transition:none}
  .navbar{transition:none}
}

/* ---- sandbox flag (only on sandbox builds): a subtle SANDBOX tag at the top
   of the left rail, mirroring the UPTALES wordmark at the bottom. No banner.
   The base .rail is a row (wordmark bottom-anchored); the sandbox variant
   becomes a column so SANDBOX pins top and UPTALES stays bottom.
   NOTE: 6 page CSS files re-declare a single-class `.rail` AFTER base.css, so
   these use the two-class `.rail.rail--sandbox` selector to out-specify them. */
.rail.rail--sandbox{flex-direction:column;align-items:center;justify-content:space-between}
.rail.rail--sandbox .rail-env{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Poppins',sans-serif;
  font-weight:800;font-size:.72rem;letter-spacing:.12em;color:var(--red);
  background:color-mix(in srgb, var(--red) 12%, transparent);
  /* an environment "tab" hanging flush from the top edge: rounded top, square
     bottom where it continues down the rail */
  padding:14px 5px;border-radius:7px 7px 0 0}

/* ---- rail page label: the spine folio. Quiet gray (red stays reserved for
   the brand mark and the sandbox flap), pinned top; margin-bottom:auto keeps
   the wordmark bottom-anchored — and in sandbox it slots just below the flap.
   Same two-class trick as .rail--sandbox to out-specify page-CSS `.rail`. */
.rail.rail--paged{flex-direction:column;align-items:center}
.rail .rail-page{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Poppins',sans-serif;
  font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);margin-top:26px;margin-bottom:auto}
.rail.rail--sandbox .rail-page{margin-top:16px}

/* ---- sticky nav: pinned to the top from the first pixel and visible by
   default; it slides out of view only while scrolling DOWN, and returns the
   moment you scroll up. nav.js adds .nav-hide to tuck it away. The reserved
   spacer below keeps page content from jumping when the bar leaves flow. */
.navbar{position:sticky;top:0;z-index:70;background:var(--white)}
.navbar.nav-stuck{background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
/* Shadow only when the bar has reappeared over content (nav.js adds nav-float),
   not while it rests flush at the top. Transitioned so it fades in with it. */
.navbar{box-shadow:0 14px 34px rgba(21,21,28,0);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.navbar.nav-float{box-shadow:0 14px 34px rgba(21,21,28,.08)}
.navbar.nav-hide{transform:translateY(-100%)}