:root{
  --blue:#0B3BD1;
  --blue-dark:#082B9B;
  --ink:#0A0E1A;
  --ink-60:#4A5163;
  --paper:#FFFFFF;
  --wash:#EEF2FD;
  --line:#D6DEEF;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:74rem;
  --gut:1.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:4.5rem; /* room for sticky call bar */
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-0.015em;margin:0}
p{margin:0 0 1rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- header ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--paper)}
.masthead .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.masthead img{width:158px}
@media (max-width:22.5rem){.masthead img{width:136px}}
.masthead-actions{margin-left:auto;display:flex;align-items:center;gap:1.25rem}
.masthead-tel{
  font-weight:600;font-size:1.0625rem;color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.masthead-tel:hover{color:var(--blue)}
@media (max-width:40rem){.masthead-tel{display:none}}

/* ---------- hero ---------- */
.hero{padding:4rem 0 3.25rem}
.hero .wrap{display:grid;gap:3rem}
@media (min-width:64rem){
  .hero .wrap{grid-template-columns:1fr 20rem;gap:4rem;align-items:center}
}
.hero-eyebrow{
  font-size:.9375rem;color:var(--ink-60);margin:0 0 1.5rem;
}
.hero h1{
  font-size:clamp(2.15rem,5.4vw,3.5rem);
  max-width:19ch;
  margin-bottom:1.5rem;
}
.hero-photo{display:block;order:-1;margin-bottom:.5rem}
@media (min-width:64rem){.hero-photo{order:0;margin-bottom:0}}
.hero h1 em{font-style:italic}
.hero-attrib{
  font-family:var(--serif);font-style:italic;font-size:1.0625rem;
  color:var(--ink-60);margin:0 0 2.25rem;
}
.hero-sub{font-size:1.125rem;max-width:46ch;color:var(--ink-60);margin-bottom:2rem}
.hero-sub strong{color:var(--ink);font-weight:600}

.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-weight:600;text-decoration:none;
  padding:.9375rem 1.5rem;border-radius:4px;border:1.5px solid var(--blue);
  min-height:48px;
}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--wash)}

/* ---------- triage board ---------- */
.board{border-top:1px solid var(--line);background:var(--wash);padding:3.5rem 0 4rem}
.board h2{font-size:clamp(1.6rem,3.6vw,2.2rem);max-width:30ch;margin-bottom:.75rem}
.board-note{color:var(--ink-60);max-width:52ch;margin-bottom:2.5rem}

.tier{margin-bottom:2.75rem}
.tier:last-child{margin-bottom:0}
.tier-when{
  font-family:var(--serif);font-style:italic;font-size:1.25rem;
  color:var(--blue);margin:0 0 .875rem;
  padding-bottom:.625rem;border-bottom:1.5px solid var(--blue);
}
.svc{
  display:grid;grid-template-columns:1fr auto;gap:.25rem 1.5rem;
  padding:1.125rem 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.tier .svc:last-child{border-bottom:0;padding-bottom:0}
.svc-name{font-family:var(--serif);font-size:1.3125rem;font-weight:600;margin:0}
.svc-name a{color:var(--ink);text-decoration:none}
.svc-name a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.svc-price{
  font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--ink);
}
.svc-desc{grid-column:1/-1;color:var(--ink-60);margin:.25rem 0 0;max-width:60ch;font-size:1rem}

/* ---------- teaching section ---------- */
.teach{padding:4rem 0}
.teach-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){
  .teach-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
}
.teach h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:1.25rem;max-width:26ch}
.teach p{color:var(--ink-60);max-width:56ch}
.panel{background:var(--ink);color:#fff;padding:2rem;border-radius:6px}
.panel h3{font-size:1.375rem;color:#fff;margin-bottom:1rem}
.panel ul{margin:0;padding-left:1.125rem;color:#C3CADB}
.panel li{margin-bottom:.5rem}
.panel li::marker{color:var(--blue)}
/* .teach p and .sec p are (0,1,1) and were outranking the single .panel-foot
   class, so this rendered in the dark body colour on the near-black panel -
   2.43:1, a clear failure. Scoped to .panel and lightened to AAA. */
.panel .panel-foot{
  margin:1.25rem 0 0;font-size:1rem;line-height:1.6;color:#B8C2D8;
}

/* ---------- provider ---------- */
.provider{background:var(--wash);border-top:1px solid var(--line);padding:4rem 0}
.provider-grid{display:grid;gap:2rem}
@media (min-width:56rem){.provider-grid{grid-template-columns:22rem 1fr;gap:3.5rem;align-items:start}}
.hero-photo,.provider-photo{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;
  border-radius:6px;background:var(--wash);
}
/* Phones get a shorter landscape crop - a portrait at full width pushes the
   headline and the phone number below the fold. */
.hero-photo{aspect-ratio:16/9;object-position:50% 18%;max-height:13rem}
@media (min-width:64rem){.hero-photo{aspect-ratio:4/5;max-height:none}}
.provider h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:1.25rem}
.provider p{color:var(--ink-60);max-width:58ch}
.creds{list-style:none;margin:1.75rem 0 0;padding:0;border-top:1px solid var(--line)}
.creds li{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9375rem;
}
.creds span:first-child{color:var(--ink-60)}
.creds span:last-child{font-weight:600;text-align:right}

/* ---------- quote ---------- */
.quote{padding:4.5rem 0;border-top:1px solid var(--line)}
.quote blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.25rem);
  line-height:1.24;letter-spacing:-0.015em;max-width:24ch;
}
.quote cite{
  display:block;margin-top:1.5rem;font-style:normal;font-size:1rem;color:var(--ink-60);
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#A8B2C7;padding:3.5rem 0 4rem;font-size:.9375rem}
.foot img{width:196px;margin-bottom:1.75rem}
.foot-grid{display:grid;gap:2.25rem}
@media (min-width:48rem){.foot-grid{grid-template-columns:repeat(3,1fr);gap:3rem}}
.foot h3{font-family:var(--sans);font-size:.9375rem;font-weight:600;color:#fff;margin:0 0 .875rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.5rem}
.foot a{color:#A8B2C7;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot address{font-style:normal;line-height:1.7}
.foot-legal{
  margin-top:3rem;padding-top:1.75rem;border-top:1px solid #222A3D;
  font-size:.875rem;color:#9AA5BD;max-width:70ch;
}

/* ---------- sticky call ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--blue);border-top:1px solid var(--blue-dark);
  display:flex;
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  color:#fff;text-decoration:none;font-weight:600;padding:1rem .75rem;min-height:56px;
}
.callbar a+a{border-left:1px solid rgba(255,255,255,.28)}
.callbar a:hover{background:var(--blue-dark)}
@media (min-width:48rem){
  .callbar{display:none}
  body{padding-bottom:0}
}

/* ==========================================================================
   Interior page components
   ========================================================================== */

.page-hero{padding:3.25rem 0 2.5rem;border-bottom:1px solid var(--line)}
.crumb{font-size:.9375rem;color:var(--ink-60);margin:0 0 1.25rem}
.crumb a{color:var(--ink-60);text-decoration:none}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.page-hero h1{font-size:clamp(2rem,5vw,3.25rem);max-width:20ch;margin-bottom:1.25rem}
.lede{font-size:1.1875rem;line-height:1.55;color:var(--ink-60);max-width:54ch;margin-bottom:2rem}
.lede strong{color:var(--ink);font-weight:600}

.facts{
  display:flex;flex-wrap:wrap;gap:0;margin:0 0 2rem;padding:0;list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.facts li{padding:1rem 2rem 1rem 0;margin-right:2rem;border-right:1px solid var(--line)}
.facts li:last-child{border-right:0;margin-right:0;padding-right:0}
.facts b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.1}
.facts span{font-size:.875rem;color:var(--ink-60)}

.sec{padding:3.5rem 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.sec-wash{background:var(--wash)}
.sec h2{font-size:clamp(1.55rem,3.4vw,2.1rem);max-width:26ch;margin-bottom:1.25rem}
.sec h3{font-size:1.25rem;margin:0 0 .5rem}
.sec p{color:var(--ink-60);max-width:58ch}
.sec p strong{color:var(--ink);font-weight:600}
.two-col{display:grid;gap:2.5rem}
@media (min-width:56rem){.two-col{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}

.menu-item{
  display:grid;grid-template-columns:1fr auto;gap:.25rem 1.5rem;
  padding:1.25rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.menu-item:last-child{border-bottom:0}
.menu-item h3{font-family:var(--serif);font-size:1.3125rem;margin:0}
.menu-item .price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-item p{grid-column:1/-1;margin:.25rem 0 0;font-size:1rem;max-width:60ch}

.checklist{list-style:none;margin:1.25rem 0 0;padding:0;max-width:52ch}
.checklist li{
  padding:.625rem 0 .625rem 1.5rem;border-bottom:1px solid var(--line);
  position:relative;color:var(--ink-60);
}
.checklist li::before{
  content:"";position:absolute;left:0;top:1.15rem;
  width:7px;height:7px;border-radius:50%;background:var(--blue);
}
.checklist li:last-child{border-bottom:0}

.callout{
  border-left:3px solid var(--blue);padding:.25rem 0 .25rem 1.5rem;
  margin:2rem 0;max-width:52ch;
}
.callout p{font-family:var(--serif);font-size:1.25rem;line-height:1.4;color:var(--ink);margin:0}
.callout cite{display:block;margin-top:.75rem;font-style:normal;font-size:.9375rem;color:var(--ink-60)}

.area-list{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.5rem 0 0;
}
.area-list li{
  border:1px solid var(--line);border-radius:999px;padding:.4375rem 1rem;
  font-size:.9375rem;background:var(--paper);
}
/* Linked pills: move the padding onto the anchor so the whole pill is the tap
   target, and drop the underline - the pill border already reads as a control.
   Browsers without :has() keep the padding on the li and the link still works,
   just with a smaller target. */
.area-list li:has(a){padding:0}
.area-list a{
  display:block;padding:.4375rem 1rem;border-radius:999px;
  color:var(--blue);text-decoration:none;
}
.area-list a:hover,.area-list a:focus-visible{background:var(--blue);color:#fff}

/* Second grouping inside the same block (the events pills under the cities).
   Needs .sec scoping: plain .area-sub (0,1,0) loses to .sec h3 (0,1,1), which
   was flattening the top margin to zero and gluing this heading to the pill
   row above it. The gap above (40px) must beat the gap to its own list (24px)
   or the heading reads as belonging to the wrong group. */
.sec .area-sub{
  font-family:var(--serif);font-size:1.1875rem;font-weight:600;
  margin:2.5rem 0 0;color:var(--ink);
}

.cta-band{background:var(--ink);color:#fff;padding:3.5rem 0}
.cta-band h2{color:#fff;font-size:clamp(1.55rem,3.4vw,2.1rem);max-width:22ch;margin-bottom:1rem}
.cta-band p{color:#A8B2C7;max-width:50ch;margin-bottom:2rem}
.cta-band .btn-solid{background:var(--blue);border-color:var(--blue)}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1)}

.faq{max-width:60ch}
.faq details{border-bottom:1px solid var(--line);padding:1.125rem 0}
.faq summary{
  font-family:var(--serif);font-size:1.1875rem;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-family:var(--sans);font-weight:400;font-size:1.375rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.875rem 0 0;font-size:1rem}

/* ==========================================================================
   Primary navigation
   Four silos only. City pages stay out — they're coverage, not destinations.
   ========================================================================== */

.mast-nav{display:none}
@media (min-width:60rem){
  .mast-nav{display:flex;gap:1.75rem;margin-left:2.5rem}
  .mast-nav a{
    color:var(--ink);text-decoration:none;font-size:1rem;font-weight:500;
    padding:.375rem 0;border-bottom:2px solid transparent;
  }
  .mast-nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
  .mast-nav a[aria-current="page"]{border-bottom-color:var(--blue)}
}

.mast-toggle{
  margin-left:auto;background:none;border:0;padding:.75rem;cursor:pointer;
  width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;gap:5px;
}
@media (min-width:60rem){.mast-toggle{display:none}}
.mast-toggle span{display:block;height:2px;background:var(--ink);border-radius:1px}
.mast-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mast-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mast-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mast-toggle span{transition:transform .2s ease,opacity .15s ease}
@media (prefers-reduced-motion:reduce){.mast-toggle span{transition:none}}

/* mobile panel — full screen, big targets, actions pinned low for thumb reach */
.mobile-nav{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;flex-direction:column;padding:1.5rem var(--gut) 2rem;overflow-y:auto;
}
.mobile-nav[hidden]{display:none}
@media (min-width:60rem){.mobile-nav{display:none!important}}
.mobile-nav-head{display:flex;align-items:center;min-height:3.25rem;margin-bottom:1.5rem}
.mobile-nav-head img{width:150px}
.mobile-nav-links{display:flex;flex-direction:column;margin-top:.5rem}
.mobile-nav-links a{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);
  text-decoration:none;padding:1rem 0;border-bottom:1px solid var(--line);
}
.mobile-nav-links a:hover,.mobile-nav-links a:focus-visible{color:var(--blue)}
.mobile-nav-sub{display:flex;flex-direction:column;margin-top:1.5rem}
.mobile-nav-sub a{
  color:var(--ink-60);text-decoration:none;padding:.5rem 0;font-size:1rem;
}
.mobile-nav-sub a:hover{color:var(--blue)}
.mobile-nav-actions{margin-top:auto;padding-top:2rem;display:grid;gap:.625rem}
body.nav-open{overflow:hidden}

/* ==========================================================================
   Measure — stop single-column prose stranding whitespace on wide screens
   ========================================================================== */

/* Every section's wrap uses the SAME page grid, so all content on a page lines
   up on one left edge. Readability comes from capping the TEXT MEASURE, not the
   container.

   The old rule capped the container at 56rem and then set two-column sections
   to max-width:none to let them breathe - which removed the cap entirely and
   sent them full-bleed. That put two different left edges on the same page. */
@media (min-width:64rem){
  .sec > .wrap > p,
  .sec > .wrap > .faq,
  .sec > .wrap > .menu-item,
  .sec > .wrap > ul:not(.facts):not(.area-list){max-width:64ch}
  .sec > .wrap > h2{max-width:30ch}
}

/* Mobile header: logo + hamburger only. Booking lives in the sticky bar
   and inside the panel, so the header button is redundant and crowds it. */
@media (max-width:60rem){
  .masthead-actions{display:none}
}

/* Narrow phones: the nowrap price was claiming its width first and wrapping
   the service name into a stub beside it. Stack them instead. */
@media (max-width:30rem){
  .svc,.menu-item{grid-template-columns:1fr;gap:.125rem}
  .svc-price,.menu-item .price{justify-self:start}
  .svc-desc{margin-top:.5rem}
}

/* The TRT trust block sits below the IV material now - single column, no panel. */
.teach-trt{border-top:1px solid var(--line);padding-top:3.25rem}
.teach-trt h2{max-width:32ch;margin-bottom:1.25rem}
.teach-trt p{color:var(--ink-60);max-width:62ch}
.teach-trt p + p{margin-top:1rem}

/* Phones: 4rem of hero padding above a photo left a dead band under the header. */
@media (max-width:63.99rem){
  .hero{padding:1.25rem 0 2.5rem}
  .hero .wrap{gap:1.75rem}
}

/* Storefront hours + address */
.hours{border-collapse:collapse;margin:0 0 1.5rem;width:100%;max-width:26rem}
.hours th,.hours td{text-align:left;padding:.625rem 0;border-bottom:1px solid var(--line);font-size:1rem}
.hours th{font-weight:500;color:var(--ink-60)}
.hours td{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.addr{font-style:normal;line-height:1.7;margin:0 0 .75rem}

/* ---------- quote form ---------- */
.form-intro{color:var(--ink-60);max-width:56ch;margin-bottom:2rem}
.quote-form{max-width:44rem}
.f-row{display:grid;gap:1.25rem}
@media (min-width:38rem){.f-row{grid-template-columns:1fr 1fr}}
.f{display:block;margin-bottom:1.25rem}
.f > span{display:block;font-weight:600;font-size:.9375rem;margin-bottom:.4375rem}
.f > span em{font-style:normal;font-weight:400;color:var(--ink-60)}
.f input,.f select,.f textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:4px;padding:.75rem .875rem;
  min-height:48px;
}
.f textarea{min-height:auto;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);
}
.f input:user-invalid,.f select:user-invalid{border-color:#B3261E}
.f-submit{margin-top:.5rem;width:100%}
@media (min-width:38rem){.f-submit{width:auto;min-width:14rem}}
.quote-status{margin:1rem 0 0;padding:.875rem 1rem;border-radius:4px;font-size:.9375rem}
.quote-status.is-ok{background:var(--wash);border-left:3px solid var(--blue);color:var(--ink)}
.quote-status.is-warn{background:#FDF3F2;border-left:3px solid #B3261E;color:var(--ink)}
.f-alt{margin:1.25rem 0 0;color:var(--ink-60);font-size:.9375rem}

/* Inline figure - landscape on phones so a portrait doesn't dominate the column */
.figure{margin:0 0 1.75rem}
.figure img{
  width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 18%;
  border-radius:6px;background:var(--line);
}
/* Landscape at every width. A portrait crop in a side column runs ~670px tall
   and leaves the text column beside it looking empty - measured 3.67:1 on the
   IV hub before this. */
@media (min-width:56rem){.figure img{aspect-ratio:3/2;object-position:50% 16%}}
.figure figcaption{
  margin-top:.75rem;font-size:.875rem;line-height:1.5;color:var(--ink-60);
}


/* ==========================================================================
   Vertical rhythm
   Two faults were compounding here:
   1. Section padding ranged from 2.5rem to 4.5rem with no pattern, so the gap
      between any two sections landed anywhere between 108px and 144px.
   2. The last element inside each wrap kept its own bottom margin (16px on a
      paragraph, 32px on a callout) and added it ON TOP of the section padding,
      which is what produced the dead band under the quote on the TRT pages.
   One padding value, and trailing margins stripped.
   ========================================================================== */
.hero,.board,.teach,.provider,.quote,.sec,.cta-band{padding-top:4rem;padding-bottom:4rem}
.page-hero{padding:3.25rem 0 3rem}
.teach-trt{padding-top:3.25rem}

main section > .wrap > *:last-child,
main section > .wrap > div > *:last-child{margin-bottom:0}


/* ==========================================================================
   Wide-screen section layout
   Capping the text measure at 64ch fixed the alignment problem but created a
   new one: on a 1600px screen a single-column section filled the left 58% of
   the row and left ~42% empty, which reads as unfinished rather than as a
   deliberate measure. Moving the heading into its own column fills the row,
   keeps the measure readable, and makes the whitespace look intended.

   Only kicks in past 75rem, where there is genuinely room for both columns,
   and only on sections that actually have a heading to put in column one.
   Two-column sections already fill the row and are excluded.
   ========================================================================== */
@media (min-width:75rem){
  .sec > .wrap:has(> h2):not(.two-col):not(.provider-grid):not(.teach-grid),
  .teach > .wrap:has(> h2):not(.two-col):not(.provider-grid):not(.teach-grid){
    display:grid;
    grid-template-columns:18rem 1fr;
    column-gap:4.5rem;
    align-items:start;
  }
  .sec > .wrap:has(> h2):not(.two-col):not(.provider-grid):not(.teach-grid) > h2,
  .teach > .wrap:has(> h2):not(.two-col):not(.provider-grid):not(.teach-grid) > h2{
    grid-column:1;margin:0;max-width:none;
  }
  .sec > .wrap:has(> h2):not(.two-col):not(.provider-grid):not(.teach-grid) > *:not(h2),
  .teach > .wrap:has(> h2):not(.two-col):not(.provider-grid):not(.teach-grid) > *:not(h2){
    grid-column:2;max-width:none;
  }
  /* Prose still needs a measure - it just gets it inside the wider column. */
  .sec > .wrap:has(> h2) > p,
  .teach > .wrap:has(> h2) > p{max-width:68ch}
}