/* ============================================================================
   rdtschool.com — THE PLAIN RECEIPT
   Token block is pasted here rather than @imported: one request, no chain.
   Roles and measured ratios are documented in _tokens.css — read it first.
   ========================================================================= */
:root{
  --ink:#1A1A1E;            --ink-dk:#101013;
  --navy:#1745AC;           --navy-dk:#12368A;
  --action:#A51F1F;         --action-dk:#7E1616;   --action-ink:#FFFFFF;
  --money:#1A1A1E;          --money-lt:#FFF4CC;
  --accent:#997800;
  --paper:#FBF9F5;          --card:#FFFFFF;
  --line:#E6E1D8;           --muted:#5C5A55;

  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Source Sans 3", system-ui, -apple-system, sans-serif;
  --shell:1160px;
  --pad:clamp(16px, 4vw, 28px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4{ font-family:var(--display); line-height:1.14; margin:0; font-weight:700 }
p{ margin:0 }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad) }

/* ---- accessibility floor ------------------------------------------------ */
*:focus-visible{ outline:3px solid var(--action); outline-offset:3px; border-radius:3px }
.strip *:focus-visible,.receipt *:focus-visible,footer *:focus-visible{ outline-color:#FFF }
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--action); color:var(--action-ink); font-family:var(--body);
  font-weight:700; padding:12px 18px; text-decoration:none;
}
.skip:focus{ left:0 }

/* An email address is one unbreakable string, so it sets a min-content floor
   the grid track cannot go below and the page spills sideways. `break-word`
   does NOT fix it — only `anywhere` lowers min-content. See CSS-PITFALLS.md. */
a[href^="mailto:"], a[href^="tel:"]{ overflow-wrap:anywhere }

/* ---- licence strip ------------------------------------------------------ */
.strip{ background:var(--navy); color:#FFF; font-size:14px }
.strip .shell{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:9px }
.strip a{ color:#FFF; text-underline-offset:3px }
.strip b{ font-weight:600; font-variant-numeric:tabular-nums }

/* ---- nav ----------------------------------------------------------------
   The wordmark is live text, not the 24 KB PNG the live site ships. Playfair
   at 700 is the closest widely-available match to the school's Didone. */
.nav{ background:var(--card); border-bottom:1px solid var(--line) }
.nav .shell{ display:flex; align-items:center; justify-content:space-between; gap:16px;
             flex-wrap:wrap; padding-block:14px }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; min-width:0 }
.brand .glyph{ width:42px; height:42px; flex:0 0 auto }
.brand .wordmark{ font-family:var(--display); font-weight:700; font-size:23px; line-height:1.05; letter-spacing:-.01em }
.brand .wordmark span{
  display:block; font-family:var(--body); font-weight:600; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:5px;
}
.nav nav ul{ display:flex; gap:17px; flex-wrap:wrap; list-style:none; margin:0; padding:0; font-size:15.5px }
.nav nav a{ text-decoration:none; color:var(--muted) }
.nav nav a:hover{ color:var(--ink) }

/* Login and Register sit together as one pair, on purpose: a returning
   student and a new one arrive at the same place looking for opposite things,
   and hunting for "Login" in a list of section anchors is the commonest
   complaint on sites like this one. */
.acct{ display:flex; align-items:center; gap:9px; flex:0 0 auto }

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer; border:0;
  font-family:var(--body); font-weight:700; font-size:16px; letter-spacing:.01em;
  color:var(--action-ink); background:var(--action);
  box-shadow:0 3px 0 var(--action-dk), 0 5px 14px rgba(26,26,30,.16);
  padding:13px 24px; border-radius:8px; position:relative;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn::after{ content:" \2192"; font-weight:700 }
.btn:hover{ transform:translateY(-1px); box-shadow:0 4px 0 var(--action-dk), 0 8px 20px rgba(26,26,30,.2) }
.btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--action-dk), inset 0 2px 5px rgba(0,0,0,.25) }
.btn-quiet{
  background:var(--card); color:var(--ink); box-shadow:none;
  border:2px solid var(--line); padding:11px 20px;
}
.btn-quiet::after{ content:"" }
.btn-quiet:hover{ border-color:var(--ink); transform:none; box-shadow:none; background:var(--card) }
.btn-sm{ padding:9px 17px; font-size:15px }
.btn-block{ display:block; text-align:center; width:100% }

/* ---- the credentials band ------------------------------------------------
   The signature element: what the school IS, stated plainly, above the fold on
   both pages.

   It carried "$0" chips for one revision and they were removed on purpose. The
   school sells an optional extra at the checkout, so a band advertising that
   nothing is added would contradict its own payment page. Facts only here —
   no prices, no "included", no "$0". Do not put money back in this band. */
.receipt{ background:var(--ink); color:#FFF }
.receipt .shell{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:13px }
.receipt .lede{
  font-family:var(--display); font-weight:700; font-size:17px; flex:0 0 auto;
}
.receipt ul{ display:flex; gap:7px; flex-wrap:wrap; margin:0; padding:0; list-style:none }
.receipt li{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.09); border-radius:6px; padding:6px 11px;
  font-size:13.5px; line-height:1.3;
}
.receipt li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--accent);
}

/* ---- hero ---------------------------------------------------------------- */
.hero{ background:var(--card); border-bottom:1px solid var(--line);
       padding-block:clamp(34px,5vw,62px) clamp(34px,5vw,58px) }
.hero .shell{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
              gap:clamp(24px,4vw,48px); align-items:center }
.hero h1{ font-size:clamp(33px,5.2vw,54px); max-width:15ch; margin-bottom:18px; letter-spacing:-.015em }
.hero .lede{ font-size:clamp(17px,1.9vw,19.5px); color:var(--muted); max-width:52ch; margin-bottom:26px }
/* .acts is a general button row, not a hero-only thing — the 404 page uses it
   too. Declared once here so no page has to reach for an inline style, which
   a media query cannot override. See CSS-PITFALLS.md. */
.acts{ display:flex; gap:13px; flex-wrap:wrap; align-items:center }
.hero .from{ font-size:15px; color:var(--muted) }
.hero .from b{ font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink);
               font-variant-numeric:tabular-nums }
/* Media box carries its OWN height with the image positioned absolutely inside
   it. height:100% on an <img> in an auto-height parent resolves to auto, so a
   portrait source would grow the row to its full natural height. */
/* 360px, not 420px: the hero photograph is a wide room shot, and a taller box
   forces `cover` to crop the sides off and turn it back into a portrait —
   which is exactly what the picture was chosen NOT to be. */
.hero-media{ position:relative; overflow:hidden; min-height:360px; border-radius:12px;
             box-shadow:0 0 0 1px var(--line), 0 20px 44px rgba(26,26,30,.14) }
/* object-position is set PER IMAGE, never once globally — `cover` centre-crops
   by default and every photograph has a different focal point. Values are
   recorded in assets/img/SOURCES.md so they survive a swap. */
/* A deliberately WIDE composition — the subject sits small in a real room
   rather than filling the frame. That was the brief, so the crop must not undo
   it: keep the whole desk and the room around it in shot. */
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 50% }
/* The Spanish hero is a different photograph with a different focal point: the
   subject sits centre-left with the laptop to her right, so it needs its own
   crop. Scoped by html[lang] so it can never leak onto the English hero. */
html[lang="es"] .hero-media img{ object-position:50% 42% }

.cards.cards-single {
  grid-template-columns: 1fr;   /* stop it trying to fill multiple columns */
  max-width: 40%;               /* roughly half the width, matching one grid column on index1 */
  margin: 0 auto;                /* center it */
}
.eyebrow{
  display:block; font-family:var(--body); font-size:11.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:15px;
}
.eyebrow::before{
  content:""; display:inline-block; width:24px; height:3px; border-radius:2px;
  background:var(--accent); vertical-align:middle; margin-right:10px;
}

/* ---- section furniture --------------------------------------------------- */
.band{ padding-block:clamp(38px,5vw,60px) }
.band.on-card{ background:var(--card); border-block:1px solid var(--line) }
.band h2{ position:relative; font-size:clamp(26px,3.4vw,36px); margin-bottom:12px;
          max-width:010ch; max-width:20ch; padding-top:18px; letter-spacing:-.015em }
.band h2::before{
  content:""; position:absolute; left:0; top:0; width:38px; height:4px; border-radius:2px;
  background:var(--accent);
}
.band .intro{ color:var(--muted); max-width:60ch; margin-bottom:28px }

/* ---- price tag ----------------------------------------------------------- */
.tag{
  display:inline-block; background:var(--money-lt); color:var(--money); border-radius:7px;
  padding:5px 11px; font-family:var(--display); font-weight:700; font-size:20px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tag sup{ font-size:.55em; vertical-align:super; margin-right:1px }
.tag.call{ font-family:var(--body); font-weight:700; font-size:14.5px; white-space:normal }

/* ---- course cards: one card per product ---------------------------------
   auto-fit with a bare minmax(0,1fr) NEVER wraps — a zero minimum means four
   columns stay four columns at 360px. min(100%,270px) gives it a real floor. */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,248px),1fr)); gap:16px }
.card{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  scroll-margin-top:16px;
}
/* The image box is a RATIO, not a fixed height.
   It was `height:180px`, which only ever looked right at the English page's
   four-across width. The Spanish page carries two cards, so each one stretches
   to roughly 544px — and a 544x180 box letterboxed every photograph into a
   strip with the subject's head cut off. A ratio scales the box with whatever
   width the card ends up at, so one rule serves 1, 2, 3 and 4 columns.
   min-height is the floor for the narrow single-column case. */
.card .shot{ position:relative; overflow:hidden; aspect-ratio:3/2; min-height:170px; background:var(--ink) }
/* Two-card rows (the Spanish page) would otherwise give each card half the
   shell — wider than any of these photographs wants to be. Cap the track so
   the pair sits at a sensible size and stays left-aligned with the heading. */
.cards:has(> :last-child:nth-child(2)){ grid-template-columns:repeat(auto-fit, minmax(min(100%,248px), 400px)); justify-content:start }
.card .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
#online .shot img{ object-position:56% 42% }
#classroom .shot img{ object-position:50% 38% }
/* A portrait source in a landscape box. Her face sits in the upper third and
   her hand is on the trackpad at the bottom, so the crop is pulled high to
   keep the smile — the whole point of the picture — inside the frame. */
#espanol .shot img{ object-position:50% 26% }
/* The booklet workbook is biased left in frame and the writing hand enters from
   the right, so the crop is pulled left to keep the open pages as the subject
   rather than the hand. */
#booklet .shot img{ object-position:38% 52% }
/* A card with no photograph gets a brand panel rather than weak filler stock:
   ink ground, the wordmark initial, a gold rule. Five booklet candidates were
   sourced and every one failed the text-in-image test (a tax questionnaire, a
   Chilean civil-registry form, a media consent release, a job application and
   an algebra workbook). A brand panel beats a wrong picture. */
.card .shot.brand{ display:grid; place-items:center }
.card .shot.brand span{
  font-family:var(--display); font-weight:700; font-size:62px; color:#FFF; opacity:.9; line-height:1;
}
.card .shot.brand::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--accent);
}
.card .body{ display:flex; flex-direction:column; flex:1 1 auto; padding:20px; gap:11px }
.card h3{ font-size:21px }
.card .who{ font-size:14.5px; color:var(--muted); font-weight:600 }
.card p{ font-size:15px; color:var(--muted) }
.card .flag{
  display:inline-block; align-self:flex-start; font-family:var(--body); font-weight:700;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  border:2px solid var(--accent); border-radius:5px; padding:3px 8px;
}
.card .foot{ margin-top:auto; display:flex; flex-direction:column; gap:11px; padding-top:4px }
/* Four cards across leaves roughly 208px of button. At the default 16px the
   longer labels wrapped onto a second line and the card feet stopped lining
   up, so the in-card button is a step down. */
.card .btn{ font-size:15px; padding:12px 16px }
.card .tag{ align-self:flex-start }

/* ---- comparison rack ----------------------------------------------------- */
.rack{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card) }
.rack .row{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,2.1fr) auto;
  gap:16px; align-items:center; padding:15px 20px; border-top:1px solid var(--line);
}
.rack .row:first-child{
  border-top:0; background:var(--paper); font-family:var(--body); font-weight:700;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.rack .row .what{ font-family:var(--display); font-weight:700; font-size:18px }
.rack .row .who{ font-size:15px; color:var(--muted); line-height:1.55 }

/* ---- how it works -------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,235px),1fr));
        gap:20px; list-style:none; margin:0; padding:0; counter-reset:s }
.steps li{ counter-increment:s; padding-top:16px; border-top:4px solid var(--accent) }
.steps li::before{
  content:counter(s,decimal-leading-zero); display:block; font-family:var(--body);
  font-weight:700; font-size:12.5px; color:var(--muted); letter-spacing:.1em; margin-bottom:8px;
}
.steps b{ display:block; font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:6px }
.steps p{ font-size:15px; color:var(--muted) }

/* A ".ledger" component lived here: an itemised "$0" list headed "what other
   schools bill you for". It was removed with the section it styled, because
   the school sells an optional extra at the checkout and the page must not
   claim otherwise. Deleted rather than left dormant, so it cannot quietly
   come back. */

/* ---- key facts: extractable for a person and for a machine --------------- */
.facts{ margin:0; border-top:1px solid var(--line) }
.facts div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.facts dt{ font-family:var(--body); font-weight:700; font-size:15px }
.facts dd{ margin:0; color:var(--muted); font-size:15px }
.facts dd b{ color:var(--ink); font-variant-numeric:tabular-nums }

/* ---- faq ----------------------------------------------------------------- */
.faq{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card) }
.faq details{ border-top:1px solid var(--line) }
.faq details:first-of-type{ border-top:0 }
.faq summary{
  cursor:pointer; padding:15px 20px; font-family:var(--display); font-weight:700; font-size:17.5px;
  display:flex; justify-content:space-between; gap:14px; align-items:center; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--body); font-weight:700; font-size:21px;
                     color:var(--accent); flex:0 0 auto }
.faq details[open] summary::after{ content:"\2013" }
.faq .a{ padding:0 20px 17px; color:var(--muted); font-size:15.5px; max-width:70ch }

/* ---- espanol call-out ----------------------------------------------------
   The live site carries this as a 1.6 MB glossy badge PNG with the words baked
   into the pixels — unreadable to a search engine, to a screen reader and to
   anyone on a slow connection. It is live text and a real link here, pointing
   at a real Spanish URL rather than a jump to an anchor further down the same
   English page. */
.crosslang{ background:var(--navy); color:#FFF }
.crosslang .shell{ display:flex; align-items:center; justify-content:space-between;
                   gap:20px; flex-wrap:wrap; padding-block:26px }
.crosslang h2{ color:#FFF; font-size:clamp(23px,3vw,30px); padding-top:0; margin-bottom:6px; max-width:24ch }
.crosslang h2::before{ display:none }
.crosslang p{ color:rgba(255,255,255,.86); font-size:16px; max-width:52ch }
.crosslang .btn{ background:#FFF; color:var(--navy); box-shadow:0 3px 0 rgba(0,0,0,.28) }
.crosslang .btn:hover{ background:#FFF }

/* ---- office / contact ---------------------------------------------------- */
.office{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,255px),1fr)); gap:20px }
.office .box{ background:var(--card); border:1px solid var(--line); border-top:4px solid var(--accent);
              border-radius:12px; padding:20px }
.office h3{ font-size:18px; margin-bottom:9px }
.office p{ font-size:15.5px; color:var(--muted) }
.office a{ color:var(--ink) }
.office .big{ font-family:var(--display); font-weight:700; font-size:23px; color:var(--ink);
              text-decoration:none; display:inline-block; margin-block:2px }
.office .note{ font-size:13.5px }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:clamp(24px,4vw,44px); align-items:center }
.split-media{ position:relative; overflow:hidden; min-height:340px; border-radius:12px;
              box-shadow:0 0 0 1px var(--line) }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:44% 45% }

/* ---- footer -------------------------------------------------------------- */
footer{ background:var(--navy); color:#FFF; margin-top:0 }
footer .shell{ padding-block:36px 28px }
footer .cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,215px),1fr)); gap:26px }
footer h4{ font-family:var(--body); font-weight:700; font-size:11.5px; letter-spacing:.14em;
           text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:10px }
footer p{ font-size:15px; color:rgba(255,255,255,.9) }
footer a{ color:#FFF; text-underline-offset:3px }
footer .foot-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
                  gap:8px; font-size:15px }
footer .foot-nav a{ text-decoration:none }
footer .foot-nav a:hover{ text-decoration:underline }
footer .brandline{ font-family:var(--display); font-weight:700; font-size:21px; margin-bottom:8px }
.colophon{ margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.2);
           font-size:13.5px; color:rgba(255,255,255,.78) }
.colophon p + p{ margin-top:6px }

/* ---- tablet -------------------------------------------------------------- */
@media (max-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) }
  .split-media{ min-height:260px }
}
@media (max-width:640px){
  .rack .row{ grid-template-columns:minmax(0,1fr); gap:5px }
  .rack .row:first-child{ display:none }
  .facts div{ grid-template-columns:minmax(0,1fr); gap:2px }
  .ledger .line{ padding-inline:16px }
}

/* ---- above the fold on a phone ------------------------------------------
   Section anchors are dropped below 780px: the course cards do that navigating
   anyway, and the nav wrapped to three rows before this. Login and Register
   STAY — they are the two things a phone visitor actually arrives looking for,
   and the whole point of putting them in the header was that they are never
   more than one tap away. */
@media (max-width:780px){
  .strip{ font-size:12.5px }
  .strip .shell{ padding-block:7px; gap:8px }
  .nav .shell{ padding-block:10px; gap:10px }
  .nav nav{ order:3; width:100% }
  .nav nav li:not(.lang){ display:none }
  .nav nav ul{ font-size:14.5px; gap:16px }
  .brand .glyph{ width:36px; height:36px }
  .brand .wordmark{ font-size:20px }
  .brand .wordmark span{ font-size:9px; letter-spacing:.12em; margin-top:3px }

  .receipt .shell{ padding-block:11px; gap:10px }
  .receipt .lede{ font-size:15.5px }
  .receipt li{ font-size:12.5px; padding:5px 9px }

  /* The hero photograph is hidden on phones deliberately: it costs roughly
     300px of the one screen that decides whether anybody starts a course, and
     the fold budget has no room for it above the first button. */
  .hero .shell{ grid-template-columns:minmax(0,1fr) }
  .hero-media{ display:none }
  .hero{ padding-block:26px 30px }
  .hero h1{ font-size:31px; margin-bottom:13px }
  .hero .lede{ font-size:16.5px; margin-bottom:20px }
  .eyebrow{ margin-bottom:11px; font-size:11px }
  .btn{ padding:12px 20px; font-size:15.5px }
  .band{ padding-block:32px }
  .band h2{ padding-top:15px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
  .btn:hover{ transform:none }
}