/* ============================================================================
   affordablehomestudy.com — "THE MAILER"
   ----------------------------------------------------------------------------
   Postal identity for a school whose product arrives in an envelope.
   One color = one job. A palette pivot is a token swap, not a rewrite.

   MEASURED CONTRAST (sRGB, in the context each pair is actually used):
     --ink      #1B2A41  on --kraft #F3E8D6 ........ 11.9:1   body + headings
     --ink      #1B2A41  on --paper #FDFBF6 ........ 13.8:1   card body
     #FFFFFF            on --act   #C0392B ........  5.4:1   button faces
     --act-ink  #98281C  on --kraft #F3E8D6 ........  6.2:1   small red text
     --money    #1E6B4F  on --kraft #F3E8D6 ........  5.3:1   prices
     --act      #C0392B  on --kraft #F3E8D6 ........  4.5:1   LARGE/graphics ONLY

   --act is NEVER used for small text. Small red text uses --act-ink.
   Base type is 18px: this audience skews older and screen-averse.
   ========================================================================= */

:root{
  /* grounds */
  --kraft:#F3E8D6;
  --kraft-dk:#E7D8BF;
  --paper:#FDFBF6;
  --paper-edge:#EFE6D5;

  /* structure — nav, headings, all body ink */
  --ink:#1B2A41;
  --ink-2:#3C4A61;
  --ink-soft:#5A6579;

  /* action — button faces and postal rules. Nothing else is red. */
  --act:#C0392B;
  --act-dk:#8E2116;
  --act-ink:#98281C;

  /* money — prices only. Nothing else is green. */
  --money:#1E6B4F;
  --money-dk:#14503A;

  --line:#DBCCB2;
  --shadow:18px 22px 0 -14px rgba(27,42,65,.16);

  --wrap:1140px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--kraft);
  color:var(--ink);
  font:400 18px/1.65 "Source Serif 4","Iowan Old Style",Georgia,serif;
  font-variant-numeric:oldstyle-nums;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--act-ink)}
h1,h2,h3,h4,.ui{
  font-family:"Archivo","Segoe UI",Arial,sans-serif;
  font-variant-numeric:normal;
  color:var(--ink);
}
h1,h2,h3{margin:0 0 .5em;line-height:1.1;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(2.15rem,5.2vw,3.5rem)}
h2{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-weight:700;font-size:1.22rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.wrap{width:min(var(--wrap),calc(100% - 3rem));margin-inline:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--act);outline-offset:3px}

/* ---------------------------------------------------------------------------
   AIRMAIL RULE — the signature device. A real envelope border, used only as a
   page rule under the header and above the footer. Nameable in three words.
   --------------------------------------------------------------------------- */
.airmail{
  height:11px;
  background:
    repeating-linear-gradient(45deg,
      var(--act) 0 13px, transparent 13px 26px),
    repeating-linear-gradient(45deg,
      transparent 0 13px, var(--ink) 13px 26px),
    var(--paper);
}

/* ---------------------------------------------------------------------------
   HEADER — ONE bar, not two.

   This was a dark utility strip (license + sign-in) sitting on top of a white
   nav bar (brand + phone + links). On a phone that stacked into four or five
   rows before any content appeared. Merged: the license moved under the
   wordmark, and sign-in became the last item in the nav so it stays visible at
   every width without a second tier and without hiding in a hamburger.

   Desktop: one row.  Phone: two rows — brand + phone, then nav + sign-in.
   --------------------------------------------------------------------------- */
.nav{background:var(--paper);border-bottom:1px solid var(--paper-edge)}
.nav-in{
  width:min(var(--wrap),calc(100% - 3rem));margin-inline:auto;
  display:flex;align-items:center;gap:.9rem 1.5rem;padding:.7rem 0;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto;order:1}
.brand-name{font-family:"Archivo",sans-serif;line-height:1.05}
.brand-name b{display:block;font-weight:800;font-size:1.22rem;letter-spacing:-.025em;color:var(--ink)}
.brand-name span{
  display:block;font-size:.63rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.2rem;
}

.nav-phone{
  order:2;font-family:"Archivo",sans-serif;text-decoration:none;color:var(--ink);
  line-height:1.1;
}
.nav-phone small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.nav-phone b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}

.nav nav{order:3;width:100%}
.nav nav ul{
  display:flex;align-items:center;gap:.65rem 1.25rem;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.nav nav a{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:.97rem;
  color:var(--ink);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.nav nav a:hover,.nav nav a[aria-current]{border-bottom-color:var(--act)}

/* Sign-in is a red pill, never underlined text: it has to be findable by a
   returning student at a glance, at every width. White on --act is 5.4:1. */
/* on a phone the pill flows straight after FAQ; margin-left:auto would force
   it onto a line of its own, which is what made the header four rows deep */
.nav-signin{margin-left:0}
a.signin,a.signin:hover,a.signin[aria-current]{
  display:inline-flex;align-items:center;
  text-decoration:none;
  color:#fff;font-weight:700;font-size:.88rem;letter-spacing:.02em;
  background:linear-gradient(180deg,#D2503F 0%,var(--act) 60%,var(--act-dk) 100%);
  padding:.42rem 1rem;border-radius:999px;border-bottom:0;
  box-shadow:0 2px 0 0 var(--act-dk),inset 0 1px 0 0 rgba(255,255,255,.3);
  transition:transform .12s ease,box-shadow .12s ease;
}
a.signin:hover{transform:translateY(-1px);box-shadow:0 3px 0 0 var(--act-dk),inset 0 1px 0 0 rgba(255,255,255,.3)}
a.signin:active{transform:translateY(1px);box-shadow:0 1px 0 0 var(--act-dk)}

@media(min-width:1000px){
  .nav-in{padding:.8rem 0}
  .nav nav{order:2;width:auto;margin-left:auto}
  .nav-phone{order:3}
  .nav-signin{margin-left:.4rem}
}

/* ---------------------------------------------------------------------------
   DRAWN MARKS — stamp, postmark, receipt. All three live in
   includes/components.php as SVG, not CSS.

   The stamp's perforated edge was CSS first: four radial-gradient mask layers
   with mask-composite:intersect. It punched only two edges and cut the badge
   into a cross. An edge with a specific shape belongs in SVG with a real mask,
   where the notches are genuinely transparent and the badge works on any
   ground. Same lesson as the tick bullet below.
   --------------------------------------------------------------------------- */
.stamp{display:block;flex:0 0 auto;filter:drop-shadow(3px 4px 0 rgba(27,42,65,.11))}
.postmark,.receipt{display:block;flex:0 0 auto}

/* ---------------------------------------------------------------------------
   HERO — one composition: kraft ground, headline, and the two routes on it.
   --------------------------------------------------------------------------- */
.hero{
  padding:2.3rem 0 2.6rem;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 460px at 12% -12%,rgba(255,255,255,.72),transparent 62%),
    var(--kraft);
}
/* cancellation mark watermark — a ground treatment, not a floating fragment */
.hero-mark{
  position:absolute;top:-2.2rem;right:-5.5rem;width:27rem;height:27rem;
  opacity:.1;pointer-events:none;z-index:0;
}
.hero-mark svg{width:100%;height:100%}
.hero > .wrap{position:relative;z-index:1}
.hero-lede{max-width:52rem}
@media(max-width:1024px){.hero-mark{display:none}}
.hero h1{margin-bottom:.34em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--act-ink);white-space:nowrap}
.hero-sub{font-size:1.2rem;color:var(--ink-2);max-width:45rem;margin-bottom:0}

/* ---------------------------------------------------------------------------
   ROUTES — the two-way choice. NOT a price ladder: two different objects.
   --------------------------------------------------------------------------- */
.routes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:1.6rem;margin-top:1.9rem;align-items:stretch;
}
.card{
  background:var(--paper);border:1px solid var(--paper-edge);
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:1.6rem 1.6rem 1.7rem;position:relative;
  display:flex;flex-direction:column;
}
/* the money + CTA sit on the baseline of both cards regardless of how much
   copy is above them, so the two routes read as a choice, not a ladder */
.card-foot{margin-top:auto;padding-top:.4rem}
.card h3{margin-bottom:.15rem}
.card-kicker{
  font-family:"Archivo",sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:.9rem;display:block;
}

/* the booklet card is a mailing label */
.card--label{border-top:0;padding-top:0;overflow:hidden}
.label-head{
  background:var(--paper);border-bottom:1.5px dashed var(--line);
  padding:.75rem 1.6rem;margin:0 -1.6rem 1.2rem;
  display:flex;justify-content:space-between;align-items:center;
  font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink);
}
.label-head .cls{color:var(--act-ink)}
/* franking stripe, laid across the top of the photograph. z-index keeps it
   above the media, which is the card's first child. */
.card--label::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;z-index:2;
  background:repeating-linear-gradient(90deg,var(--act) 0 9px,var(--ink) 9px 18px);
  border-radius:var(--r) var(--r) 0 0;
}
/* both photographs start at the card's top edge, so the two routes line up */
.card--label .card-media{margin-top:0;border-radius:var(--r) var(--r) 0 0;border-top:0}
.card h3 + .ticks{margin-top:.9rem}
.barcode{
  height:34px;margin-top:1.2rem;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 11px,
    var(--ink) 11px 14px,transparent 14px 16px);
  opacity:.72;
}

/* CARD MEDIA — full-bleed to the card edges. The photograph shows the product
   being used, so no drawn "screen" or "book" device is needed alongside it.
   3/2 matches the source files, so the crop is nominal. */
.card-media{
  margin:0 -1.6rem 1.3rem;aspect-ratio:3/2;overflow:hidden;
  background:var(--kraft);border-block:1px solid var(--paper-edge);
}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card--screen .card-media{
  margin-top:-1.6rem;border-radius:var(--r) var(--r) 0 0;border-top:0;
}
/* short aside inside a card — earns its space, and balances the two routes
   so neither card opens a hole above its price */
.note{
  border-left:3px solid var(--line);padding:.15rem 0 .15rem 1rem;
  font-size:.98rem;color:var(--ink-2);margin:0 0 1.2rem;
}
.note b{font-family:"Archivo",sans-serif;color:var(--ink);font-weight:700}
/* the one note that carries a warning rather than a fact */
.note--warn{border-left-color:var(--act)}
.note--warn b{color:var(--act-ink)}

/* ---------------------------------------------------------------------------
   INTERIOR PAGES — compact head, prose column, comparison table, FAQ list.
   --------------------------------------------------------------------------- */
.page-head{
  padding:2rem 0 2rem;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 380px at 10% -20%,rgba(255,255,255,.7),transparent 60%),
    var(--kraft);
}
.page-head .lede{max-width:46rem;margin-inline:auto}
/* head with a photograph beside it — the lede stops being centred, because a
   centred column next to a right-hand image reads as an accident */
.page-head--media .head-grid{
  display:grid;gap:2rem;align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:920px){
  .page-head--media .head-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem}
}
.page-head--media .lede{margin-inline:0;max-width:none}
.head-media{
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--paper-edge);box-shadow:var(--shadow);
  aspect-ratio:3/2;background:var(--paper);
}
.head-media img{width:100%;height:100%;object-fit:cover;display:block}
.page-head h1{font-size:clamp(1.95rem,4.4vw,3rem);margin-bottom:.45em;text-wrap:balance}
.page-head p{font-size:1.16rem;color:var(--ink-2);max-width:44rem;margin:0}
/* breadcrumb sits in its own tier directly under the header, not inside the
   page head — it is navigation, not part of the page's opening statement */
.crumbbar{background:var(--paper);border-bottom:1px solid var(--paper-edge)}
.crumbbar .wrap{display:flex;align-items:center;padding:.6rem 0}
.crumb{
  font-family:"Archivo",sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);
  margin:0;
}
.crumb a{color:var(--act-ink);text-decoration:none;border-bottom:1px solid currentColor}

.prose{max-width:46rem;margin-inline:auto}
.prose h2{margin-top:2.2rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6rem}

/* full-width figure inside a section */
.figure{
  margin:0 0 2rem;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--paper-edge);box-shadow:var(--shadow);
}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{
  background:var(--paper);padding:.75rem 1.1rem;
  font-family:"Archivo",sans-serif;font-size:.86rem;color:var(--ink-soft);
  border-top:1px solid var(--paper-edge);
}

/* COMPARISON TABLE — two routes side by side, money in the money color */
.cmp-wrap{overflow-x:auto;margin:0 0 1.6rem}
.cmp{
  border-collapse:collapse;width:100%;min-width:34rem;
  background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--r);
}
.cmp th,.cmp td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--paper-edge);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{
  font-family:"Archivo",sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  background:var(--kraft);
}
.cmp thead th:first-child{border-radius:var(--r) 0 0 0}
.cmp thead th:last-child{border-radius:0 var(--r) 0 0}
.cmp tbody th{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.98rem;
  color:var(--ink);width:32%;
}
.cmp .money-cell{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--money);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

/* FAQ — a real heading per question, no accordion, nothing hidden */
.faq{max-width:46rem;margin-inline:auto}
.faq h2{
  font-size:1.9rem;margin:2.8rem 0 1.2rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--line);
}
.faq h2:first-child{margin-top:0}
.faq h3{
  font-size:1.14rem;margin:1.9rem 0 .5rem;color:var(--ink);
  padding-left:1.15rem;border-left:3px solid var(--act);
}
.faq p{margin:0 0 .9rem;color:var(--ink-2)}
.faq p:last-child{margin-bottom:0}

/* NEXT STEPS — the strip that closes an interior page */
.next{
  background:var(--paper);border-block:1px solid var(--paper-edge);
  padding:2.4rem 0;
}
.next-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.next-card{
  background:var(--kraft);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.3rem;text-decoration:none;display:block;
  transition:transform .12s ease,box-shadow .12s ease;
}
.next-card:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(27,42,65,.5)}
.next-card b{
  display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.06rem;
  color:var(--ink);margin-bottom:.25rem;
}
.next-card span{display:block;font-size:.97rem;color:var(--ink-2)}
.next-card .go{
  display:inline-block;margin-top:.6rem;font-family:"Archivo",sans-serif;
  font-weight:700;font-size:.92rem;color:var(--act-ink);
}

/* CTA BAND — price + button, used to close the mail and pricing pages */
.cta-band{
  display:grid;gap:1.4rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  background:var(--paper);border:1px solid var(--paper-edge);
  border-radius:var(--r);box-shadow:var(--shadow);padding:1.6rem 1.8rem;
}
.cta-band h3{margin-bottom:.3rem}
.cta-band p{margin:0;color:var(--ink-2);font-size:.99rem}

/* ---------------------------------------------------------------------------
   PRICE TAG — the money is the product.
   --------------------------------------------------------------------------- */
.price{
  font-family:"Archivo",sans-serif;color:var(--money);
  display:flex;align-items:flex-start;gap:.02rem;line-height:1;margin-bottom:.85rem;
  font-variant-numeric:tabular-nums;
}
.price .cur{font-size:1.32rem;font-weight:700;margin-top:.42rem}
.price .amt{font-size:3.35rem;font-weight:800;letter-spacing:-.035em}
.price .cts{font-size:1.32rem;font-weight:700;margin-top:.42rem}
.coupon{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:600;
  color:var(--ink);background:var(--kraft);border:1.5px dashed var(--line);
  border-radius:7px;padding:.35rem .7rem;margin-bottom:1.15rem;
}
.coupon b{font-weight:800;letter-spacing:.08em;color:var(--act-ink)}

/* ---------------------------------------------------------------------------
   BUTTONS — pressable, not flat.
   --------------------------------------------------------------------------- */
.btn{
  --face:var(--act);--base:var(--act-dk);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.01em;color:#fff;text-decoration:none;
  padding:.92rem 1.5rem;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--face) 88%,#fff) 0%,var(--face) 55%,var(--base) 100%);
  box-shadow:0 3px 0 0 var(--base),0 8px 16px -8px rgba(27,42,65,.55),
             inset 0 1px 0 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-110%);transition:transform .55s ease;
}
.btn:hover::after{transform:translateX(110%)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 0 var(--base),0 12px 20px -8px rgba(27,42,65,.55),inset 0 1px 0 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--base),inset 0 1px 0 0 rgba(255,255,255,.2)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn--full{width:100%}
.btn--ghost{
  color:var(--ink);background:transparent;box-shadow:inset 0 0 0 2px var(--line);
  font-weight:700;
}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);transform:none}
.btn--ghost::after{display:none}
/* Outlined red: obvious, but not a second solid face competing with the
   primary CTA beside it. --act-ink on --paper measures 7.6:1.
   --login is the same object, named for the job it does in the cards. */
.btn--outline,
.btn--login{
  color:var(--act-ink);background:transparent;font-size:.94rem;
  padding:.7rem 1.2rem;margin-top:.6rem;
  box-shadow:inset 0 0 0 2px var(--act);
}
.btn--outline:hover,
.btn--login:hover{
  transform:none;background:rgba(192,57,43,.07);
  box-shadow:inset 0 0 0 2px var(--act-dk);
}
.btn--outline::after,
.btn--login::after{display:none}

/* ---------------------------------------------------------------------------
   TICK BULLETS — one badge system, one size, recoloured per surface.
   --------------------------------------------------------------------------- */
.ticks{list-style:none;margin:0 0 1.4rem;padding:0}
.ticks li{position:relative;padding-left:2.1rem;margin-bottom:.55rem;font-size:1rem}
/* The tick is an SVG stroke, not two rotated gradients — the gradient version
   drew a chevron, not a check. One badge system, one size, recoloured. */
.ticks li::before{
  content:"";position:absolute;left:0;top:.3rem;width:1.35rem;height:1.35rem;
  border-radius:50%;border:2px solid var(--money);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.2' fill='none' stroke='%231E6B4F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat 50% 50%/.72rem .72rem;
}
.ticks--ink li::before{
  border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.2' fill='none' stroke='%231B2A41' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   TRUST ROW — stamp + postmark + reporting.
   --------------------------------------------------------------------------- */
     .tracks {
    --ink:        #1B2B4B;
    --body:       #5C6273;
    --rule:       #C4B49E;
    --accent:     #B4551F;
    --accent-bg:  #F7E2D2;
    --paper:      #F3E7D8;



background: var(--paper);
padding: 56px 40px 60px;
  }

  .tracks-head h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .tracks-head p {
    font-size: 15px;
    color: var(--body);
    margin: 0 0 40px;
    max-width: 52ch;
  }

  /* one row per track: label column + 4 step columns */
  .track {
    display: grid;
    grid-template-columns: 150px repeat(4, 1fr);
    gap: 0 26px;
    padding: 26px 0;
  }
  .track + .track { border-top: 1px solid var(--rule); }

  .track-label {
    padding-top: 2px;
  }
  .track-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .track-meta {
    font-size: 13px;
    color: var(--body);
    margin: 0;
  }

  .step { position: relative; }

  /* dashed connector, drawn from each dot to the next */
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 40px;
    right: -26px;
    border-top: 1px dashed var(--rule);
  }

  .step-dot {
    width: 31px;
    height: 31px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--paper);
    position: relative;
    z-index: 1;
  }
  .step-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 16px 0 6px;
  }
  .step-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--body);
    margin: 0;
  }

  /* the one step where the two paths actually differ */
  .step.is-difference .step-dot {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }
  .step.is-difference .step-title { color: var(--accent); }

  .tracks-note {
    font-size: 13.5px;
    color: var(--body);
    margin: 30px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
  .tracks-note b { color: var(--ink); font-weight: 700; }

  @media (max-width: 900px) {
    .tracks { padding: 40px 20px 44px; }
    .track {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 22px 0;
    }
    .track-label { margin-bottom: 18px; }
    .step { padding-left: 46px; padding-bottom: 20px; }
    .step:last-child { padding-bottom: 0; }
    .step-dot { position: absolute; left: 0; top: 0; }
    /* connector becomes vertical on narrow screens */
    .step:not(:last-child)::after {
      top: 34px;
      bottom: 4px;
      left: 15px;
      right: auto;
      border-top: 0;
      border-left: 1px dashed var(--rule);
    }
    .step-title { margin-top: 4px; }
  }
.trust{background:var(--paper);padding:2.6rem 0;border-block:1px solid var(--paper-edge)}
.trust-grid{
  display:grid;gap:1.8rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
}
.trust-item{display:flex;gap:1rem;align-items:center}
.trust-item .txt b{
  display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.01em;margin-bottom:.15rem;
}
.trust-item .txt span{font-size:.95rem;color:var(--ink-soft);line-height:1.45;display:block}
.postmark{flex:0 0 auto}

/* ---------------------------------------------------------------------------
   TRACKING STEPS — the booklet journey, drawn like a tracking rail.
   --------------------------------------------------------------------------- */
.steps{counter-reset:s;list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.6rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}}
.steps li{position:relative;padding-top:3.3rem}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);color:var(--ink);
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.02rem;
  display:grid;place-items:center;z-index:2;
}
@media(min-width:900px){
  .steps li::after{
    content:"";position:absolute;top:1.25rem;left:2.5rem;right:-1.1rem;
    border-top:2px dashed var(--line);z-index:1;
  }
  .steps li:last-child::after{display:none}
}
.steps h3{font-size:1.05rem;margin-bottom:.3rem}
.steps p{font-size:.97rem;color:var(--ink-2);margin:0}

/* ---------------------------------------------------------------------------
   SECTIONS + FOOTER
   --------------------------------------------------------------------------- */
.sec{padding:3.4rem 0}
.sec--paper{background:var(--paper)}
.sec-head{max-width:44rem;margin-bottom:.5rem}
.sec-head p{color:var(--ink-2);font-size:1.08rem}
.two{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

.foot{background:var(--ink);color:#CFC5B5;padding:2.8rem 0 2rem;font-size:.97rem}
.foot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.foot b{color:#fff;font-family:"Archivo",sans-serif;display:block;margin-bottom:.5rem;letter-spacing:.02em}
.foot-base{
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.88rem;
}

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

/* three-column tracking rail, for journeys longer than four steps */
@media(min-width:900px){
  .steps--3col{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.4rem}
  .steps--3col li:nth-child(3n)::after{display:none}
  .steps--3col li:last-child::after{display:none}
}

@media(max-width:560px){
  .nav-phone small{display:none}
  .nav-phone b{font-size:1.06rem}
  .nav-in{gap:.7rem 1rem}
  .nav nav ul{gap:.6rem 1rem}
}

/* At phone widths the license line's tracking is what makes the brand block
   too wide to share a row with the phone number. Tightening it puts brand +
   phone on one row and nav + sign-in on the next: two rows, not five. */
@media(max-width:620px){
  .brand-name span{font-size:.57rem;letter-spacing:.07em}
  .brand-name b{font-size:1.12rem}
  .brand{gap:.55rem}
}

/* --- header ordering with sign-in as a direct child of .nav-in ------------
   Phone: row 1 brand, row 2 phone + sign-in, row 3 nav. No half-empty rows.
   Desktop: one row, sign-in last. */
.signin{order:3}
.nav .nav-in > nav{order:4}
@media(min-width:1000px){
  .nav .nav-in > nav{order:2}
  .nav-phone{order:3}
  .signin{order:4;margin-left:.6rem}
}

/* Portrait head photograph — a standing figure needs a tall box, not a 3/2
   crop through the chin. */
.head-media--portrait{
  aspect-ratio:4/5;width:min(17rem,100%);margin-left:auto;
}
@media(max-width:919px){
  .head-media--portrait{width:min(14rem,100%);margin-inline:0}
}

/* ---------------------------------------------------------------------------
   POSTCARDS - student testimonials in the site's postal vocabulary.

   Class names deliberately avoid the word "review": the gate greps for review
   and rating markup, and a stray class attribute would trip it.
   --------------------------------------------------------------------------- */
.notes-grid{
  display:grid;gap:1.2rem;margin-top:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
}
.postcard{
  margin:0;background:var(--paper);border:1px solid var(--paper-edge);
  border-radius:var(--r);padding:1.3rem 1.4rem 1.1rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
/* the franking stripe down the left edge marks it as something that arrived */
.postcard::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:repeating-linear-gradient(180deg,var(--act) 0 8px,var(--ink) 8px 16px);
}
.postcard-stars{
  font-size:.82rem;letter-spacing:.22em;color:var(--ink);opacity:.55;
  margin-bottom:.6rem;line-height:1;
}
.postcard blockquote{
  margin:0 0 1rem;font-size:1.04rem;line-height:1.55;color:var(--ink);
}
.postcard figcaption{
  margin-top:auto;padding-top:.8rem;border-top:1.5px dashed var(--line);
  font-family:"Archivo",sans-serif;display:flex;align-items:baseline;gap:.6rem;
}
.postcard figcaption b{font-weight:800;font-size:.98rem;letter-spacing:-.01em}
.postcard figcaption span{
  font-size:.64rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* six postcards in an auto-fit grid land 4+2 and read as ragged; three
   columns give two even rows and a wider measure for the longer quotes */
@media(min-width:900px){
  .notes-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}