/* =====================================================================
   ALIGNED PRACTICE  ·  the public website
   Second pass. The first one was tasteful and forgettable.

   The idea now: this page is a printed rubric card. Deep teal ground
   like the cover of something, cream paper floating on it, gold used
   once and meant. Type does the work, not decoration.

   Two rules kept me honest.
   1. Boldness spends in one place: the hero. Everything after it is
      quiet, generous, and lets the reading happen.
   2. Every structural device encodes something true. The numerals are
      the four levels of the rubric, which is the actual product. They
      are not a decorative counter.
   ===================================================================== */

:root{
  /* Warm neutrals, biased toward the teal rather than pure gray, so
     nothing reads as unconsidered default. */
  --paper:#fffdf8; --cream:#f6f3ea; --sunk:#ece7da; --edge:#e0dacb;
  --ink:#12100e; --body:#12100e; --mute:#3f3d39; --faint:#5c5a55;

  --deep:#1e3239;          /* the hero ground */
  --deep-2:#16262c;        /* deeper still, for the footer band */
  /* #344f58 is the logo teal. The site and the app had both drifted to
     #2f4a53; correcting one and not the other would have left the two
     halves of the product a shade apart. */
  --teal:#344f58; --teal-ink:#27424b;
  --onDeep:#e8efef;        /* body text on the deep ground */
  --onDeep-mute:#a9c2c8;

  --gold:#d1ba52; --gold-soft:#f5edc8; --gold-ink:#584b10; --gold-deep:#b09a35;
  --peach:#e2a06c; --peach-soft:#fae3cd; --peach-ink:#7a4415;
  --peri:#cfdef0; --peri-soft:#e7eef8; --peri-ink:#2a4759;

  --display:'Playfair Display',Georgia,serif;
  --ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --doc:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:8px; --r-lg:14px;
  --lift:0 2px 4px rgba(15,32,38,.06), 0 22px 50px rgba(15,32,38,.14);
  --lift-sm:0 1px 2px rgba(15,32,38,.05), 0 8px 22px rgba(15,32,38,.07);
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}   /* the header is sticky, so anchors need clearance */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--body);
  font-family:var(--ui);font-size:17.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
.narrow{max-width:700px}
.mid{max-width:940px}

/* ---- type scale --------------------------------------------------- */
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;
  text-wrap:balance}
h1{font-size:clamp(40px,5.4vw,66px);line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.3vw,46px);line-height:1.1;letter-spacing:-.015em}
h3{font-size:23px;line-height:1.22;letter-spacing:-.008em}
h4{font-family:var(--ui);font-size:17px;font-weight:700;color:var(--ink);
  margin:0;line-height:1.4}
h1 em,h2 em,h3 em{font-style:italic;font-weight:700}
p{margin:0 0 18px}
a{color:var(--teal-ink)}
strong{color:var(--ink);font-weight:700}

.label{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.lede{font-family:var(--ui);font-size:20px;line-height:1.62;color:var(--body);font-weight:400}
.small{font-size:16px;color:var(--body)}

/* ---- header -------------------------------------------------------- */
.top{background:var(--deep);position:sticky;top:0;z-index:40}
.topin{max-width:var(--wrap);margin:0 auto;padding:15px 30px;
  display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand .bars{display:flex;align-items:flex-end;gap:3px;height:23px}
.brand .bars i{width:6px;border-radius:1px;display:block}
.brand .bars i:nth-child(1){height:36%;background:#6d93a0}
.brand .bars i:nth-child(2){height:58%;background:var(--gold)}
.brand .bars i:nth-child(3){height:79%;background:var(--peach)}
.brand .bars i:nth-child(4){height:100%;background:#e8efef}
.brand span{font-family:var(--display);font-size:21px;font-weight:700;color:#f2f6f5}
.brand span em{font-style:italic;color:var(--gold)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{font-size:15px;font-weight:500;color:#bdd2d6;text-decoration:none;
  padding:8px 13px;border-radius:var(--r);transition:color .13s,background .13s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.nav a.signin{background:var(--gold);color:#332d08;font-weight:700;padding:9px 19px}
.nav a.signin:hover{background:#e2cd6a;color:#332d08}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* ---- buttons -------------------------------------------------------- */
.btn{display:inline-block;font-family:var(--ui);font-size:16.5px;font-weight:600;
  text-decoration:none;padding:15px 28px;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;
  transition:background .14s,border-color .14s,color .14s,transform .14s}
.btn.big{font-size:17px;padding:16px 26px}
.btn.gold{background:var(--gold);color:#332d08}
.btn.gold:hover{background:#e2cd6a;transform:translateY(-1px)}
.btn.solid{background:var(--deep);color:#f2f6f5}
.btn.solid:hover{background:var(--deep-2);transform:translateY(-1px)}
.btn.ghostLight{background:transparent;border-color:rgba(232,239,239,.34);color:#dfe9ea}
.btn.ghostLight:hover{border-color:#dfe9ea;background:rgba(255,255,255,.06)}
.btn.line{background:transparent;border-color:#c6bfad;color:var(--teal-ink)}
.btn.line:hover{border-color:var(--teal);background:var(--paper)}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---- THE HERO -------------------------------------------------------
   Warm and open, not dark. The deep teal is saved for the header, one
   band in the middle, and the closing invitation, so the page has
   rhythm without ever feeling like software marketing at you.
   --------------------------------------------------------------------- */
.hero{background:linear-gradient(176deg,#fdfbf4 0%,var(--cream) 58%,var(--cream) 100%);
  padding:78px 0 86px;position:relative;overflow:hidden}
/* Barely-there horizontal rule grid. Gives the ground the tooth of ruled
   paper, which is what a clinician actually writes goals on. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(47,74,83,.028) 1px,transparent 1px);
  background-size:100% 36px}
.hero .wrap{position:relative}
.hero .grid{display:grid;grid-template-columns:0.99fr 1.01fr;gap:46px;align-items:center}
/* A grid item's automatic minimum size is its content's min-content width,
   and .rubcard.compact table.rub sets min-width:520px. On a phone that
   inflated the single hero column to 520px, and .hero clips its overflow,
   so the headline, the lede and the waitlist card were all sliced off at
   the right edge with no way to scroll to them. min-width:0 lets the
   column shrink; the table then scrolls inside .rubscroll, which is
   exactly what that element exists for. */
.hero .grid > *{min-width:0}
.rubcard,.rubcard > header,.rubcard > footer{min-width:0}
.hero .label{color:var(--gold-ink)}
.hero h1{color:var(--ink)}
.hero h1 em{color:var(--teal)}
.hero .lede{color:var(--body);margin:26px 0 0;max-width:48ch;font-size:20px}
.hero .btnrow{margin-top:34px}
.hero .fineprint{margin-top:24px;font-size:15px;color:var(--mute)}

/* The old goal, being replaced. Small, gray, struck through in peach. */
.was{margin:0 0 20px;padding:0 0 0 18px;border-left:2px solid var(--edge)}
.was .label{color:var(--faint);margin-bottom:7px;font-size:10px}
.was q{quotes:none;display:block;font-family:var(--ui);font-size:15px;line-height:1.5;
  color:#71756e;text-decoration:line-through;
  text-decoration-color:rgba(226,160,108,.9);text-decoration-thickness:1.5px}

/* ---- the opt-in block ---------------------------------------------------
   Sits inside the hero, under the lede, in place of the old button row. It
   is a card rather than a bare button so the eye lands on it, and it is
   built to survive whatever markup an email platform's embed drops inside
   .formfallback.
   -------------------------------------------------------------------------- */
.optin{background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-lg);
  box-shadow:var(--lift-sm);padding:28px 30px 26px;margin-top:32px;max-width:560px}
.optin .optinlead{margin:0 0 20px;font-size:17px;line-height:1.6;color:var(--body)}
.optin .fineprint{margin:16px 0 0;font-size:14.5px;color:var(--mute)}
.formfallback .btn{width:100%;text-align:center}

/* Whatever the embed brings with it, keep it inside the card and on-brand. */
.optin form{margin:0}
.optin input[type=email],.optin input[type=text]{width:100%;font-family:var(--ui);
  font-size:16.5px;color:var(--ink);background:var(--cream);
  border:1.5px solid var(--edge);border-radius:var(--r);padding:14px 16px;
  margin-bottom:12px;box-sizing:border-box}
.optin input::placeholder{color:var(--faint)}
.optin input:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
.optin button,.optin input[type=submit]{width:100%;font-family:var(--ui);font-size:17px;
  font-weight:700;color:#332d08;background:var(--gold);border:0;border-radius:var(--r);
  padding:16px 26px;cursor:pointer;transition:background .14s}
.optin button:hover,.optin input[type=submit]:hover{background:#e2cd6a}
.optin img{max-width:100%;height:auto}

/* ---- the waitlist modal -------------------------------------------------
   Our own dialog, holding Flodesk's INLINE form. Deliberately not Flodesk's
   popup: their popup fires on a timer and cannot be opened by a click, and
   the click-to-open tricks floating around depend on their private class
   names. This owns the open/close behavior and lets Flodesk own the form.
   -------------------------------------------------------------------------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:24px}
.modal .scrim{position:absolute;inset:0;background:rgba(18,16,14,.62);
  backdrop-filter:blur(2px)}
/* Wide, because the Flodesk form inside is a two-column landscape layout
   and a narrow box breaks its headline mid-word. Padding is zero so the
   form's own margins govern and it looks like it was designed for this
   space rather than pasted into it. */
.modal .sheet{position:relative;background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--lift);width:100%;max-width:940px;max-height:90vh;overflow-y:auto;
  padding:0}
/* The close button floats over whatever the form draws, so it carries its
   own background rather than relying on what is behind it. */
.modal .x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,253,248,.92);border:1px solid var(--edge);border-radius:50%;
  cursor:pointer;font-size:22px;line-height:1;color:var(--mute);
  box-shadow:0 1px 3px rgba(15,32,38,.12)}
.modal .x:hover{background:var(--sunk);color:var(--ink)}
.modal .sheet > div{border-radius:var(--r-lg);overflow:hidden}
/* Safety net. Flodesk's form is responsive on its own, but this stops any
   embed from pushing a sideways scrollbar into the dialog on a phone. */
.modal .sheet{overflow-x:hidden}
.modal .sheet img{max-width:100%;height:auto}
@media (max-width:760px){ .modal{padding:12px} .modal .sheet{max-height:94vh} }
body.locked{overflow:hidden}

/* ---- credibility strip, straight under the hero ---------------------- */
.proof{background:var(--paper);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);padding:26px 0}
.proofin{display:flex;flex-wrap:wrap;gap:14px 52px;align-items:baseline;
  justify-content:center;text-align:center}
.proof b{font-family:var(--display);font-size:27px;color:var(--teal);font-weight:700;
  font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.proof span{font-size:14px;color:var(--mute);display:block;margin-top:3px}
.proof div{min-width:130px}

/* ---- the compact matrix, for inside the hero column -------------------
   Same rubric, same four levels, tuned to survive a narrower measure.
   Cell text is written short enough that no row wraps past three lines.
   --------------------------------------------------------------------- */
.rubcard.compact > header{padding:18px 20px 16px}
.rubcard.compact .goalsent{font-size:15px;line-height:1.5}
.rubcard.compact table.rub{min-width:520px;font-size:11.8px;line-height:1.36}
.rubcard.compact table.rub th,
.rubcard.compact table.rub td{padding:8px 10px}
.rubcard.compact table.rub thead th{font-size:9.5px;letter-spacing:.06em}
.rubcard.compact table.rub thead th b{font-size:15px;margin-bottom:1px}
.rubcard.compact table.rub tbody th{font-size:11.8px}
.rubcard.compact table.rub thead th:nth-child(1){width:21%}
.rubcard.compact table.rub thead th:nth-child(n+2){width:19.75%}
.rubcard.compact > footer{padding:11px 20px;font-size:12.5px;gap:4px 14px}

/* ---- THE PICKER -------------------------------------------------------
   The whole hero hangs off this control, so it is built to look like an
   invitation rather than a form field. Native select underneath, because
   a custom dropdown on a phone is worse in every way that matters.
   --------------------------------------------------------------------- */
.picker{background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:22px 26px 24px;box-shadow:var(--lift-sm);max-width:640px;margin-top:34px}
.picker label{display:block;font-family:var(--display);font-size:22px;font-weight:700;
  color:var(--ink);margin-bottom:14px;letter-spacing:-.01em}
.selwrap{position:relative}
.selwrap::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  margin-top:-6px;border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:rotate(45deg);pointer-events:none}
.picker select{appearance:none;-webkit-appearance:none;width:100%;
  font-family:var(--ui);font-size:17.5px;font-weight:600;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--edge);border-radius:var(--r);
  padding:15px 48px 15px 18px;cursor:pointer;line-height:1.3}
.picker select:hover{border-color:#c6bfad}
.picker select:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
.picker .hint{margin:12px 0 0;font-size:14.5px;color:var(--mute)}

.demoline{margin:36px 0 4px;font-family:var(--display);font-size:clamp(21px,2.6vw,28px);
  line-height:1.3;color:var(--ink);letter-spacing:-.012em;max-width:30ch}
.demoline em{font-style:italic;color:var(--teal)}

.goalsent{margin:0;font-family:var(--ui);font-size:16px;line-height:1.6;color:var(--ink)}
.goalsent b{font-weight:600;color:var(--teal-ink)}

/* ---- THE RUBRIC MATRIX ------------------------------------------------
   The actual artifact: five skills down the side, four named levels
   across the top. Showing it whole is the entire pitch, because an SLP
   understands the product the moment she reads one cell.
   --------------------------------------------------------------------- */
.rubwrap{margin-top:52px}
.rubcard{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--lift);
  overflow:hidden}
.rubcard > header{padding:22px 28px 20px;border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,#fffefa,#fdfaf2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.rubcard > header h3{font-size:21px;margin:0}
.rubcard > header .said{font-size:14.5px;color:var(--mute);margin:0}
.rubscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.rub{border-collapse:collapse;width:100%;min-width:880px;
  font-size:13.5px;line-height:1.42}
table.rub th,table.rub td{padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid #f0ece1}
table.rub thead th{font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  border-bottom:1px solid var(--edge);color:var(--ink)}
table.rub thead th:nth-child(1){background:var(--sunk);width:17%}
table.rub thead th:nth-child(2){background:#e4ecf5;width:20.75%}
table.rub thead th:nth-child(3){background:var(--gold-soft);width:20.75%}
table.rub thead th:nth-child(4){background:var(--peach-soft);width:20.75%}
table.rub thead th:nth-child(5){background:#dbe6e8;width:20.75%}
table.rub thead th b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:3px;
  font-variant-numeric:tabular-nums}
table.rub thead th:nth-child(2) b{color:#4a6f92}
table.rub thead th:nth-child(3) b{color:var(--gold-ink)}
table.rub thead th:nth-child(4) b{color:var(--peach-ink)}
table.rub thead th:nth-child(5) b{color:var(--teal)}
table.rub tbody th{font-weight:700;color:var(--ink);background:#faf7ef;
  font-size:13.5px;letter-spacing:0;text-transform:none;font-family:var(--ui)}
table.rub tbody td{color:var(--body)}
table.rub tbody tr:last-child th,table.rub tbody tr:last-child td{border-bottom:0}
.rubcard > footer{padding:15px 28px;border-top:1px solid var(--edge);
  background:#fbf8f0;font-size:14.5px;color:var(--mute);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.rubcard > footer strong{color:var(--ink)}
.swipe{display:none;font-size:13px;color:var(--faint);margin:10px 0 0;text-align:center}
@media (max-width:940px){ .swipe{display:block} .rubwrap{margin-top:38px} }

/* The rubric card. This is the hero image and it is real content. */
.card-rubric{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--lift);
  overflow:hidden}
.card-rubric > header{padding:22px 26px 20px;border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,#fffefa,#fdfaf2)}
.card-rubric > header .label{margin-bottom:9px;color:var(--gold-ink)}
.card-rubric > header p{margin:0;font-family:var(--ui);font-size:16px;line-height:1.55;
  color:var(--ink)}
.card-rubric ol{list-style:none;margin:0;padding:0;counter-reset:lvl}
.card-rubric li{display:grid;grid-template-columns:44px 1fr;gap:16px;
  padding:16px 26px;align-items:baseline}
.card-rubric li + li{border-top:1px solid #f0ece1}
.card-rubric li b{font-family:var(--display);font-size:29px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;text-align:right}
.card-rubric li:nth-child(1) b{color:#b9c9d9}
.card-rubric li:nth-child(2) b{color:var(--gold)}
.card-rubric li:nth-child(3) b{color:var(--peach)}
.card-rubric li:nth-child(4) b{color:var(--teal)}
.card-rubric li:nth-child(4){background:#fbf9f2}
.card-rubric li span{font-size:16px;line-height:1.5;color:var(--body)}
.card-rubric li:nth-child(4) span{color:var(--ink);font-weight:500}
.card-rubric > footer{padding:15px 26px;border-top:1px solid var(--edge);
  background:#fbf8f0;font-size:14px;color:var(--mute)}

/* ---- sections -------------------------------------------------------- */
section{padding:104px 0}
section.tight{padding:68px 0}
section.paper{background:var(--paper)}
section.deep{background:var(--deep-2);color:var(--onDeep)}
section.deep h2,section.deep h3{color:#fdfcf7}
section.deep h2 em{color:var(--gold)}
section.deep .label{color:var(--gold)}
section.deep a{color:var(--gold)}
.shead{margin-bottom:48px;max-width:36ch}
.shead.wide{max-width:52ch}
.shead p{margin:18px 0 0;color:var(--body);font-size:18.5px;max-width:56ch;line-height:1.66}
section.deep .shead p{color:var(--onDeep-mute)}

/* ---- the confession block, the emotional center of the page ---------- */
.confess{max-width:30ch;margin:0 auto;text-align:center}
.confess p{font-family:var(--display);font-size:clamp(27px,4vw,44px);line-height:1.22;
  color:#fdfcf7;margin:0 0 20px;letter-spacing:-.015em}
.confess p em{font-style:italic;color:var(--gold)}
.confess .after{font-family:var(--ui);font-size:18px;line-height:1.66;
  color:var(--onDeep-mute);max-width:44ch;margin:30px auto 0;letter-spacing:0}

/* ---- cards ----------------------------------------------------------- */
.cards{display:grid;gap:24px}
.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.c3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card{background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:34px 34px 36px}
section.paper .card{background:var(--cream);border-color:var(--edge)}
.card h3,.card h4{margin-bottom:10px}
.card p:last-child{margin-bottom:0}

/* ---- numbered steps. The numerals are the rubric levels. ------------- */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:104px 1fr;gap:42px;padding:46px 0}
.step + .step{border-top:1px solid var(--edge)}
.step .n{font-family:var(--display);font-size:64px;font-weight:700;line-height:.85;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.step:nth-child(1) .n{color:#b9c9d9}
.step:nth-child(2) .n{color:var(--gold)}
.step:nth-child(3) .n{color:var(--peach)}
.step:nth-child(4) .n{color:var(--teal)}
.step h3{margin-bottom:12px}
.step p:last-child{margin-bottom:0}

/* ---- photographs --------------------------------------------------------
   Real photographs only. Nothing here is generated and nothing here is
   stock, so every slot is built to wait patiently until a real file arrives.

   The trick: the panel itself carries the ruled-paper texture from the hero,
   and the photograph rides on an inner <i> as a background image. A file
   that is not there yet leaves a designed cream panel rather than a broken
   image icon, so the page never looks half-finished in front of a visitor.
   -------------------------------------------------------------------------- */
.photo{position:relative;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--lift-sm);background-color:#e9e3d5;
  background-image:linear-gradient(rgba(47,74,83,.05) 1px,transparent 1px);
  background-size:100% 22px}
.photo i{position:absolute;inset:0;display:block;
  background-size:cover;background-position:center}
.photo.wide{aspect-ratio:16/7}
.photo.tall{aspect-ratio:4/5}
.photo.square{aspect-ratio:1/1}

.photoband{display:grid;grid-template-columns:0.86fr 1.14fr;gap:56px;align-items:center}
.photoband.flip .photo{order:2}
.photoband h3{margin-bottom:14px}
.photoband p:last-child{margin-bottom:0}
.photocap{margin:15px 0 0;font-size:14.5px;color:var(--mute);max-width:46ch}

/* ---- the comparison, for the rubric argument ----------------------------
   Deliberately unequal. The left card is sunk and gray, because that is what
   a percentage feels like. The right one sits up on paper with gold marks.
   -------------------------------------------------------------------------- */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:24px}
.vs > div{border-radius:var(--r-lg);padding:32px 34px 34px;border:1px solid var(--edge)}
.vs .flat{background:var(--sunk);border-color:#d4cdbc}
.vs .rich{background:var(--paper);border-color:#e5d7a5;box-shadow:var(--lift-sm)}
.vs h4{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--faint);margin-bottom:18px}
.vs .rich h4{color:var(--gold-ink)}
.vs ul{list-style:none;margin:0;padding:0}
.vs li{position:relative;padding-left:27px;margin-bottom:13px;
  font-size:16.5px;line-height:1.55;color:var(--body)}
.vs li:last-child{margin-bottom:0}
.vs .flat li::before{content:"";position:absolute;left:0;top:12px;
  width:13px;height:2px;background:#a49c88}
.vs .rich li::before{content:"";position:absolute;left:0;top:8px;
  width:12px;height:12px;border-radius:2px;background:var(--gold)}

/* ---- the recognition section -------------------------------------------
   Deliberately not a bulleted list. Varied length, hanging gold rules, set
   larger than body copy, because the reader is meant to feel described
   rather than itemised.
   -------------------------------------------------------------------------- */
.recog{max-width:38em}
.recog p{position:relative;padding-left:30px;margin:0 0 26px;
  font-size:20px;line-height:1.6;color:var(--body)}
.recog p::before{content:"";position:absolute;left:0;top:14px;
  width:16px;height:2px;background:var(--gold)}
.recog .bridge{padding-left:30px;font-family:var(--display);font-size:25px;
  line-height:1.35;color:var(--ink);margin-top:38px;letter-spacing:-.01em}
.recog .bridge::before{display:none}

/* ---- the highlight reel ------------------------------------------------- */
.reel{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:6px 46px;margin-top:8px}
.reel li{position:relative;list-style:none;padding-left:34px;margin:0 0 20px;
  font-size:18px;line-height:1.55;color:var(--body)}
.reel li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;
  border-radius:3px;background:var(--gold)}
.reel{padding:0}

/* ---- who it is right for ------------------------------------------------ */
.forwho{background:var(--paper);border:1px solid var(--edge);
  border-radius:var(--r-lg);padding:40px 44px;box-shadow:var(--lift-sm)}
.forwho ul{list-style:none;margin:0 0 30px;padding:0}
.forwho li{position:relative;padding-left:34px;margin-bottom:18px;
  font-size:17.5px;line-height:1.55}
.forwho li:last-child{margin-bottom:0}
.forwho li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;border:3px solid var(--teal)}
.forwho .affirm{margin:30px 0 0;padding-top:26px;border-top:1px solid var(--edge);
  font-family:var(--display);font-size:22px;line-height:1.4;color:var(--ink)}

/* ---- what is inside ----------------------------------------------------- */
.inside{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.inside > div{border-top:3px solid var(--edge);padding-top:22px}
.inside > div:nth-child(1){border-top-color:#b9c9d9}
.inside > div:nth-child(2){border-top-color:var(--gold)}
.inside > div:nth-child(3){border-top-color:var(--peach)}
.inside > div:nth-child(4){border-top-color:var(--teal)}
.inside > div:nth-child(5){border-top-color:#c3b0d4}
.inside h4{margin-bottom:9px;font-size:17.5px}
.inside p{margin:0;font-size:16.5px;line-height:1.58}

/* ---- for the fence sitters ---------------------------------------------- */
.fence{display:flex;flex-direction:column;gap:0}
.fence > div{padding:30px 0}
.fence > div + div{border-top:1px solid var(--edge)}
.fence .q{font-family:var(--display);font-size:23px;line-height:1.3;
  color:var(--ink);margin:0 0 12px;letter-spacing:-.008em}
.fence p:last-child{margin:0;max-width:62ch}

/* ---- the final appeal, a letter ----------------------------------------- */
.letter{background:var(--paper);border:1px solid var(--edge);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:52px 56px;max-width:720px;margin:0 auto}
.letter p{font-size:18px;line-height:1.72;color:var(--body)}
.letter p:last-of-type{margin-bottom:0}
.letter .sign{font-family:var(--display);font-style:italic;font-weight:700;
  font-size:32px;color:var(--teal);margin:30px 0 4px;line-height:1}
.letter .who{font-size:15px;color:var(--mute);margin:0}

/* ---- a slim reassurance band, for things that need saying exactly once -- */
.slim{background:var(--peri-soft);border:1px solid #c3d5e8;
  border-radius:var(--r-lg);padding:42px 46px}
.slim h3{margin-bottom:13px}
.slim p{margin:0 0 15px;max-width:66ch}
.slim p:last-child{margin-bottom:0}

/* ---- lists ------------------------------------------------------------ */
ul.ticks{list-style:none;margin:0;padding:0}
ul.ticks li{position:relative;padding-left:32px;margin-bottom:14px;line-height:1.55}
ul.ticks li::before{content:"";position:absolute;left:0;top:10px;width:13px;height:13px;
  border-radius:2px;background:var(--gold)}

/* ---- callouts ---------------------------------------------------------- */
.note{border-radius:var(--r-lg);padding:26px 30px;margin:30px 0}
.note.warm{background:var(--peach-soft);border:1px solid #eec8a4}
.note.cool{background:var(--peri-soft);border:1px solid #bed3e8}
.note h4{margin-bottom:9px}
.note p:last-child{margin-bottom:0}

/* ---- final call to action ---------------------------------------------- */
.cta{background:var(--deep);color:var(--onDeep);border-radius:20px;padding:60px 52px;
  text-align:center;box-shadow:var(--lift)}
.cta h2{color:#fdfcf7;margin-bottom:16px}
.cta h2 em{color:var(--gold)}
.cta p{max-width:52ch;margin:0 auto 32px;color:#dbe8ea;font-size:18.5px;line-height:1.66}
.cta .btnrow{justify-content:center}
.cta .fineprint{margin:26px 0 0;font-size:14.5px;color:var(--onDeep-mute)}

/* ---- table -------------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r);
  background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15.5px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid #f0ece1;vertical-align:top}
th{background:var(--sunk);color:var(--ink);font-weight:700;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}

/* Key/value spec table, for the district page. Row labels are labels rather
   than column headings, so they lose the uppercase treatment. Stacks on a
   phone, because a reviewer will open this on one. */
table.kv{min-width:0}
table.kv th{width:31%;background:var(--sunk);font-size:15px;letter-spacing:0;
  text-transform:none;font-weight:700;vertical-align:top;line-height:1.5}
table.kv td{font-size:15.5px;line-height:1.55}
@media (max-width:600px){
  table.kv,table.kv tbody,table.kv tr,table.kv th,table.kv td{display:block;width:auto}
  table.kv tr{border-bottom:1px solid #f0ece1}
  table.kv tr:last-child{border-bottom:0}
  table.kv th{border-bottom:0;padding:14px 16px 3px}
  table.kv td{padding:0 16px 14px}
}

/* ---- plain lists, for reference pages that should read as documents ---- */
ul.plainlist{margin:0 0 20px;padding-left:22px}
ul.plainlist li{margin-bottom:11px;line-height:1.6}
ol.numlist{margin:0 0 20px;padding-left:24px}
ol.numlist li{margin-bottom:11px;line-height:1.6}
.footnote{font-size:14.5px;color:var(--mute);margin-top:26px}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--deep-2);color:var(--onDeep-mute);padding:56px 0 66px}
.footin{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between}
.foot .brand{margin-bottom:16px}
.foot p{font-size:15px;color:var(--onDeep-mute);max-width:34ch;margin:0}
.footnav{display:flex;flex-wrap:wrap;gap:44px}
.footnav div{min-width:132px}
.footnav h4{font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:#7d9aa1;margin-bottom:14px}
.footnav a{display:block;font-size:15.5px;color:#cfdedf;text-decoration:none;
  margin-bottom:10px}
.footnav a:hover{color:#fff;text-decoration:underline}
.legal{margin-top:44px;padding-top:26px;border-top:1px solid rgba(232,239,239,.13);
  font-size:13.5px;color:#7d9aa1;max-width:70ch}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:940px){
  .hero .grid{grid-template-columns:1fr;gap:46px}
  .hero{padding:64px 0 72px}
  section{padding:64px 0}
  .step{grid-template-columns:1fr;gap:10px}
  .step .n{font-size:44px}
  .cta{padding:44px 30px}
  .photoband{grid-template-columns:1fr;gap:34px}
  .photoband.flip .photo{order:0}
  .photo.tall{aspect-ratio:5/4}
  .slim{padding:32px 28px}
  .vs > div{padding:26px 26px 28px}
}
@media (max-width:620px){
  .topin{flex-wrap:wrap;gap:0 12px;padding:13px 20px 0;
    justify-content:space-between;row-gap:9px;position:relative}
  .brand span:last-child{font-size:19px}
  .nav{margin-left:0;order:3;width:100%;gap:2px;
    border-top:1px solid rgba(255,255,255,.12);padding:6px 0 7px}
  .nav a{padding:6px 10px;font-size:14px}
  .nav a.signin{order:-1;position:absolute;right:20px;top:12px;padding:8px 16px;font-size:14px}
}
@media (max-width:560px){
  body{font-size:17px}
  /* The longest function name runs under the chevron at this width. */
  .picker{padding:19px 20px 21px}
  .picker label{font-size:20px}
  .picker select{font-size:16px;padding:14px 42px 14px 15px}
  .selwrap::after{right:17px}
  .wrap{padding:0 22px}
  .card{padding:26px}
  .card-rubric li{grid-template-columns:34px 1fr;gap:13px;padding:14px 20px}
  .card-rubric li b{font-size:24px}
  .card-rubric > header{padding:19px 20px 17px}
  .card-rubric > footer{padding:13px 20px}
}