/* Therapist Support — shared chrome for the static pages.
   Deliberately a separate stylesheet from the simulator's: these are content
   pages and should not wait on a 700 kB bundle to render. The tokens are the
   same values the simulator uses, copied rather than imported for that reason. */
:root{--pine:#2C6350;--deep:#15342B;--carbon:#141712;--gold:#C98B4B;--pop:#F6C560;
 --amber:#FFE3B8;--ink:#26241E;--muted:#7C766A;--line:#E7E2D6;--paper:#F4F0E6;--cream:#FBF9F3;}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;
 -webkit-font-smoothing:antialiased}
img{image-rendering:pixelated}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pw{max-width:1180px;margin:0 auto;padding:0 30px}

/* ---- masthead */
/* Header 06 - the bar is a green field and the chrome is a capsule floating on
   it, not a strip welded to the top. Everything inside is a GRID with equal
   columns, so nothing can push a sibling out at any width. */
.sitenav{background:linear-gradient(150deg,#16382B 0%,#2C6350 46%,#48A382 100%);
 box-shadow:none;position:sticky;top:0;z-index:40;padding:14px 22px 15px}
.sitenav-in{max-width:1180px;margin:0 auto;padding:10px 11px 10px 18px;position:relative;
 background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:22px;
 backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(10,30,22,.26);
 display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.sitenav-mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.sitenav-fig{width:28px;height:28px;flex:none;display:block}
.sitenav-wordmark{font-family:Fraunces,serif;font-size:15px;font-weight:700;color:#fff;
 letter-spacing:-.012em;line-height:1.15}
.sitenav-sub{display:block;font-family:Inter,sans-serif;font-size:8.5px;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px;
 white-space:nowrap}
/* the segmented control: three equal columns, never a flex overflow */
.sitenav-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
 background:rgba(0,0,0,.26);border-radius:999px;padding:3px;justify-self:center;
 width:100%;max-width:330px}
.sitenav-top{font:inherit;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.74);
 background:none;border:0;padding:7px 6px;border-radius:999px;cursor:pointer;
 min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 transition:background .15s,color .15s}
.sitenav-top:hover{background:rgba(255,255,255,.1);color:#fff}
.sitenav-top.on{background:#fff;color:#1E4436}
.sitenav-top.on:hover{background:#fff}
.sitenav-top:after{content:"\25BE";font-size:8.5px;margin-left:4px;opacity:.55}
.sitenav-top:focus-visible,.sitenav-mark:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
/* Newsletter ask, in the bar itself. The panel promo only appears once someone
   opens the menu; this is the one that is always on screen. */
.sitenav-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;
 background:var(--pop);color:#2A2010;font-size:12.5px;font-weight:700;
 padding:10px 17px;border-radius:999px;text-decoration:none;white-space:nowrap;
 min-height:38px;box-shadow:0 3px 0 rgba(140,96,18,.35)}
.sitenav-cta:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(140,96,18,.35)}
.sitenav-cta:hover{background:#FFD57A}
.sitenav-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sitenav-cta img{width:16px;height:16px;flex:none}
.sitenav-cta .long{display:inline}
.sitenav-cta .short{display:none}
/* ---- tablet ---- */
@media (max-width:1000px){
 .sitenav{padding:12px 16px 13px}
 .sitenav-in{gap:12px;padding-left:14px}
 .sitenav-links{max-width:none}
 .sitenav-top{font-size:12px;padding:7px 4px}
 .sitenav-cta{padding:10px 14px}
}
@media (max-width:860px){
 .sitenav-sub{display:none}
 .sitenav-wordmark{font-size:14px}
 .sitenav-fig{width:26px;height:26px}
 .sitenav-cta .long{display:none}
 .sitenav-cta .short{display:inline}
}
/* ---- phone: two rows in the SAME capsule, identity and action above,
   navigation full width beneath, which is also the order of importance ---- */
@media (max-width:640px){
 .sitenav{padding:10px 10px 11px}
 /* minmax(0,1fr), not auto: an `auto` column is floored at its content's
    min-content width, and the lockup's min-content width is set by the
    tagline, which is white-space:nowrap. That floor was 11px wider than the
    capsule's content box, so the segmented track underneath sat ON the
    capsule border instead of inside it. A 1fr column can shrink; the CTA
    column stays `auto` because it must never be cut. */
 .sitenav-in{grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"mark cta" "nav nav";
  gap:11px;padding:11px;border-radius:20px}
 .sitenav-mark{grid-area:mark;min-width:0}
 .sitenav-wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .sitenav-cta{grid-area:cta;justify-self:end}
 .sitenav-links{grid-area:nav;max-width:none;width:100%}
 .sitenav-top{font-size:12.5px;padding:9px 4px}
 /* The tagline stays hidden here, as it is from 860px down. Restoring it was
    what pushed the lockup past the capsule in the first place, and at 390px
    there is no width for it beside the newsletter button. */
 .navpanel{grid-template-columns:1fr;left:0;right:0}
}
/* ---- small phone: the button and the lockup cannot share a line either ---- */
@media (max-width:380px){
 .sitenav-in{grid-template-columns:1fr;grid-template-areas:"mark" "nav" "cta";gap:10px}
 .sitenav-cta{justify-self:stretch;width:100%}
 /* The chevron is decorative - the panel opens either way - and at this width it
    is the thing tipping each label into an ellipsis. Drop it rather than shrink
    type that is already at its floor. */
 .sitenav-top{font-size:11.5px;overflow:visible}
 .sitenav-top:after{display:none}
}
.navpanel{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;
 border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 54px rgba(20,30,25,.26);
 padding:20px;z-index:50;display:grid;grid-template-columns:repeat(3,1fr) 250px;gap:18px}
.navpanel[hidden]{display:none}
.np-col h5{margin:0 0 10px;font-size:9.5px;font-weight:800;letter-spacing:.12em;
 text-transform:uppercase;color:var(--gold)}
.np-col a{display:flex;gap:10px;align-items:flex-start;padding:8px 9px;border-radius:9px;
 text-decoration:none;color:var(--ink)}
.np-col a:hover,.np-col a.on{background:var(--paper)}
.np-col a img{width:22px;height:22px;flex:none;margin-top:1px}
.np-col b{display:block;font-size:13px;font-weight:700}
.np-col i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;
 line-height:1.45}
.np-promo{display:block;background:var(--carbon);border-radius:12px;padding:15px;
 text-align:center;text-decoration:none}
.np-promo img{width:76px;height:76px}
.np-promo b{display:block;font-family:Fraunces,serif;font-size:15px;color:#fff;margin-top:7px}
.np-promo p{margin:7px 0 11px;font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.7)}
.np-promo span{display:inline-block;background:var(--pop);color:#2A2010;font-weight:800;
 font-size:11.5px;padding:9px 14px;border-radius:9px}

/* ---- bands and sections */
.band{background:linear-gradient(135deg,#1E4436 0%,#2C6350 55%,#3F9577 100%);
 color:#EFF5F2;padding:44px 0 46px}
.band .pw{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
.bandart img{width:100%;height:auto;display:block;border-radius:10px}
.kick{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--pop);margin:0 0 10px}
/* SCOPED, for the same reason .lede is: rates.html appends this sheet after its
   own, so a bare h1{color:#fff} painted that article's headline white on cream.
   Every colour rule in this file must name the surface it belongs to. */
.band h1{font-family:Fraunces,serif;font-size:clamp(28px,3.4vw,40px);font-weight:600;
 letter-spacing:-.022em;line-height:1.1;margin:0 0 14px;color:#fff}
.band h1 em{font-style:normal;color:var(--pop)}
/* SCOPED to the band. Unscoped, this white-on-transparent rule leaked into
 rates.html - which appends page.css after its own sheet - and painted the
 article's opening paragraph 84% white on cream. Invisible, and only on the
 one page that is not generated from here. */
.band .lede{font-size:15.5px;line-height:1.72;color:rgba(255,255,255,.84);margin:0;
 max-width:58ch}
.band .lede b{color:#fff}
.who{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.who span{font-size:12.5px;font-weight:600;color:#EFF5F2;background:rgba(255,255,255,.12);
 border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px}
.sec{padding:44px 0}
.sec.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-family:Fraunces,serif;font-size:clamp(22px,2.4vw,27px);font-weight:600;margin:0 0 8px;
 letter-spacing:-.015em}
.grouplab{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;flex-wrap:wrap}
.grouplab h2{margin:0}
.grouplab span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:var(--gold)}
p.sub{font-size:14.5px;line-height:1.72;color:#4E4940;margin:0 0 20px;max-width:72ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px}
.sec.alt .card{background:var(--paper)}
.card img{width:32px;height:32px;margin-bottom:10px;display:block}
.card h3{font-family:Fraunces,serif;font-size:17px;margin:0 0 7px}
.card p{font-size:12.8px;line-height:1.65;color:#4E4940;margin:0}
.reflist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.ref{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
 border-radius:12px;padding:14px 16px}
.sec.alt .ref{background:var(--paper)}
.ref img{width:26px;height:26px;flex:none;margin-top:2px}
.ref b{display:block;font-size:13.5px;margin-bottom:3px}
.ref i{display:block;font-style:normal;font-size:12.3px;line-height:1.6;color:#4E4940}
.ref i a{color:var(--pine);font-weight:600}
.soon{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.1em;
 text-transform:uppercase;color:#8A6A2E;background:#FBEFD5;border:1px solid #E8D5A8;
 border-radius:20px;padding:2px 8px;margin-left:4px;vertical-align:1px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.sec.alt .fact{background:var(--cream)}
.fact em{display:block;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fact b{font-family:Fraunces,serif;font-size:19px;display:block}
.fact i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:5px;
 line-height:1.55}
.ctarow{margin:22px 0 0}
.btn{display:inline-block;background:var(--pine);color:#fff;font-weight:700;font-size:14px;
 padding:12px 22px;border-radius:11px;text-decoration:none}
.btn:hover{background:#25584A}
.btn.ghost{background:none;color:var(--pine);border:1.5px solid var(--pine)}
.btn.ghost:hover{background:#EEF5F1}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- newsletter */
.getlist{margin:20px 0 22px;padding:0;list-style:none}
.getlist li{display:flex;gap:11px;align-items:flex-start;font-size:13.8px;line-height:1.62;
 color:rgba(255,255,255,.84);margin-bottom:11px}
.getlist img{width:20px;height:20px;flex:none;margin-top:2px}
.getlist b{color:#fff}
.nlform{margin:0}
.nlrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nlform input[type=email]{flex:1;min-width:0;padding:12px 15px;border-radius:10px;
 border:1px solid var(--line);background:#FBF6E9;font:inherit;font-size:13.5px;color:var(--ink)}
/* min-width:220px on a flex child is a floor, not a hint: at 320px the field plus
   the button exceeded the viewport and pushed the whole page sideways. Below
   420px the row stacks instead. */
@media (max-width:420px){
 .nlrow{flex-direction:column;align-items:stretch}
 .nlform button{width:100%}
}
.nlform button{background:var(--pop);color:#2A2010;font-weight:800;font-size:13.5px;
 padding:12px 22px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap}
.nlform button:hover{background:#FFD57A}
.nlform input:focus-visible,.nlform button:focus-visible{outline:2px solid var(--pop);
 outline-offset:2px}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;max-width:62ch;cursor:pointer}
.consent input{width:16px;height:16px;flex:none;margin:1px 0 0;accent-color:var(--pop)}
.consent span{font-size:11.8px;line-height:1.55;color:rgba(255,255,255,.66)}
.nlmeta{font-size:11px;line-height:1.6;color:rgba(255,255,255,.46);margin:11px 0 0;max-width:62ch}
/* ---- submitted state
   The form posts by fetch and swaps itself for this, so nobody is thrown onto
   Formspree's own thanks page. Sized to the form it replaces so the band does
   not jump when it appears. */
.nlok{display:flex;gap:12px;align-items:flex-start;background:rgba(246,197,96,.09);
 border:1px solid rgba(246,197,96,.34);border-radius:13px;padding:15px 17px;
 animation:nlin .28s ease-out}
@keyframes nlin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nlok-tick{width:26px;height:26px;flex:none;border-radius:50%;background:var(--pop);
 color:#2A2010;font-size:15px;font-weight:800;line-height:26px;text-align:center}
.nlok b{display:block;font-family:Fraunces,serif;font-size:16px;color:#fff;margin-bottom:5px}
.nlok p{font-size:12.6px;line-height:1.62;color:rgba(255,255,255,.7);margin:0;max-width:52ch}
.nlok p + p{margin-top:7px;font-size:11.4px;color:rgba(255,255,255,.5)}
.nlerr{font-size:12px;line-height:1.6;color:#F0A79E;margin:10px 0 0}
.nlform button[aria-busy=true]{opacity:.65;cursor:progress}
/* Light-background variant, for the end-of-article ask on a cream section. */
.sec .nlok{background:rgba(63,149,119,.08);border-color:rgba(63,149,119,.3)}
.sec .nlok b{color:var(--ink)}
.sec .nlok p{color:#4E4940}
.sec .nlok p + p{color:var(--muted)}
.sec .consent span,.sec .nlmeta{color:#4E4940}

/* ---- issue sample */
.issue{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px 21px}
.sec.alt .issue{background:var(--cream)}
.issue-h{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);
 padding-bottom:12px;margin-bottom:13px;flex-wrap:wrap}
.issue-h img{width:26px;height:26px;flex:none}
.issue-h b{font-family:Fraunces,serif;font-size:15px}
.issue-h span{font-size:11px;color:var(--muted);margin-left:auto;
 font-family:'IBM Plex Mono',monospace}
.issue h3{font-family:Fraunces,serif;font-size:17px;margin:0 0 8px}
.issue p{font-size:13px;line-height:1.7;color:#4E4940;margin:0 0 13px}
.issue-row{display:flex;gap:10px;align-items:baseline;font-size:12.6px;color:#4E4940;
 padding:9px 0;border-top:1px dashed var(--line);line-height:1.55}
.issue-row b{font-family:'IBM Plex Mono',monospace;color:var(--gold);flex:none}

/* ---- footer */
.ftnl{background:var(--carbon);padding:30px 0 6px}
.ftin{max-width:1180px;margin:0 auto;padding:0 30px}
.ftroom{display:block;width:100%;max-width:440px;height:auto;margin:0 auto 22px}
.ftnl-row{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.ftnl-t{flex:1;min-width:300px}
.ftnl h2{font-family:Fraunces,serif;font-size:23px;color:#fff;margin:0 0 9px;line-height:1.24}
.ftnl h2 em{font-style:normal;color:var(--pop)}
.ftnl p{font-size:13.2px;line-height:1.66;color:rgba(255,255,255,.72);margin:0;max-width:52ch}
/* .ftnl p is (0,1,1) and beat .nlmeta at (0,1,0), so the fine print rendered at
   the same size and colour as the consent line above it and read as one run-on
   paragraph. Restate it at equal weight rather than reordering the sheet. */
.ftnl .nlmeta{font-size:11px;line-height:1.6;color:rgba(255,255,255,.44);
 margin:12px 0 0;max-width:60ch}
.ftnl .nlform{flex:1;min-width:min(320px,100%)}
/* min-width:320px is wider than a 320px viewport once .ftin's 18px padding is
   taken off, so the form sat 18px outside its own column and dragged the page
   sideways. min() lets it be the smaller of the two. */
/* .ftcols' 22px top margin escaped .sitefoot (no padding-top to contain it) and
   collapsed through, opening a cream stripe between the two dark bands. Hold the
   space on the parent instead. */
.sitefoot{background:var(--carbon);padding:22px 0 26px;margin:0}
.ftcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
 border-top:1px solid rgba(255,255,255,.1);padding:24px 0 6px;margin-top:0}
.ftcols h5{margin:0 0 12px;font-size:9.5px;font-weight:800;letter-spacing:.13em;
 text-transform:uppercase;color:var(--pop)}
.ftcols a{display:block;font-size:12.5px;color:rgba(255,255,255,.72);text-decoration:none;
 margin-bottom:9px}
.ftcols a:hover{color:#fff;text-decoration:underline}
.ftcols a.on{color:#fff;font-weight:600}
.ftcols a:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
.ftcols p{margin:0 0 9px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.5)}
.ftby{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.45);margin:12px 0 0;
 padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.ftby b{color:rgba(255,255,255,.78)}

/* ---- responsive */
@media (max-width:1000px){
  .navpanel{grid-template-columns:repeat(2,1fr)}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .band .pw{grid-template-columns:1fr}
  .bandart{max-width:420px}
}
@media (max-width:820px){
  .cards,.facts,.reflist,.ftcols{grid-template-columns:repeat(2,1fr)}
}
/* This block predates Header 06 and used to carry three masthead rules that
   sat AFTER the capsule's own breakpoints and therefore quietly beat them:
   .sitenav-in padding, .navpanel insets, and a .sitenav-sub{display:none} that
   cancelled the tagline the 640px block deliberately restores. The masthead
   now owns its own responsive behaviour above; only page-body rules remain. */
@media (max-width:620px){
  .pw,.ftin{padding:0 18px}
  .cards,.cards.four,.facts,.reflist,.ftcols{grid-template-columns:1fr}
  /* Kept from the old block: the 1000px rule above sets the panel to two
     columns and, being later in the sheet than the masthead's own 640px
     breakpoint, wins over it. Restate the single column here, next to the
     rule that beat it, rather than reordering the sheet. */
  .navpanel{grid-template-columns:1fr;max-height:70vh;overflow:auto}
}

/* ---- tools page */
.pill{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:5px 12px;
 border:1px solid}
.pill.live{color:#2C6350;background:#E6F1EB;border-color:#BEDDD0}
.pill.wip{color:#8A6A2E;background:#FBEFD5;border-color:#E8D5A8}
.pill.idea{color:#6C6558;background:#F1EDE2;border-color:#DFD8C7}
.tool{position:relative;background:#fff;border:1px solid var(--line);border-radius:15px;
 padding:18px 19px;display:flex;flex-direction:column}
.sec.alt .tool{background:var(--paper)}
.tool img{width:30px;height:30px;margin-bottom:9px}
.tool h3{font-family:Fraunces,serif;font-size:16px;margin:0 0 6px;padding-right:74px}
.tool p{font-size:12.6px;line-height:1.62;color:#4E4940;margin:0 0 12px}
.tool > .pill{position:absolute;top:15px;right:15px}
.tool a{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--pine);text-decoration:none}
.tool a:hover{text-decoration:underline}
/* featured slot: the tool being finished now, shown rather than described */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;background:#fff;
 border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin-top:18px}
.sec.alt .feat{background:var(--paper)}
.feat h3{font-family:Fraunces,serif;font-size:23px;margin:11px 0 9px;letter-spacing:-.015em}
.feat p{font-size:13.6px;line-height:1.72;color:#4E4940;margin:0 0 14px;max-width:52ch}
.feat ul{margin:0 0 18px;padding:0;list-style:none}
.feat li{font-size:12.9px;line-height:1.6;color:#4E4940;padding-left:19px;position:relative;
 margin-bottom:8px}
.feat li:before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:2px;
 background:var(--pine)}
.feat li b{color:var(--ink)}
.featshot{border:1px solid var(--line);border-radius:14px;overflow:hidden;
 box-shadow:0 18px 44px rgba(20,30,25,.13);background:#F1F0E8}
.featshot img{width:100%;height:auto;display:block;image-rendering:auto}
.featcap{font-size:11px;color:var(--muted);margin:9px 0 0;line-height:1.5;text-align:center}
@media (max-width:900px){.feat{grid-template-columns:1fr;gap:22px;padding:22px}}

/* ---- contact form */
/* The one form on the site that is not a single email field, so it gets its own
   controls rather than borrowing .nlform's. Same tokens, same focus ring. */
.cform{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px 24px;
 max-width:640px}
.sec.alt .cform{background:var(--paper)}
/* 170px clipped the longest option ("Something is broken") mid-word behind
   the chevron. Sized to the content, not to a round number. */
.cf-row{display:grid;grid-template-columns:232px minmax(0,1fr);gap:14px;margin:0 0 14px}
.cf-f{display:block;min-width:0}
.cf-f > span{display:block;font-size:10px;font-weight:800;letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.cf-f > span i{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;
 color:#A29A88;margin-left:5px}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{
 width:100%;min-width:0;font:inherit;font-size:14px;color:var(--ink);min-height:44px;
 background:var(--cream);border:1.5px solid #E4D9BE;border-radius:10px;padding:11px 13px}
.cform select{height:44px;padding:0 11px;font-family:Fraunces,serif;font-weight:600;font-size:15px}
.cform textarea{line-height:1.6;resize:vertical;min-height:132px}
.cform ::placeholder{color:#A8A091}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
 outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.cf-send{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:16px 0 0}
.cform button[type=submit]{background:var(--pine);color:#fff;font:inherit;font-size:14px;
 font-weight:700;border:0;border-radius:10px;padding:12px 22px;cursor:pointer;min-height:44px;
 box-shadow:0 3px 0 rgba(21,52,43,.35)}
.cform button[type=submit]:hover{background:#25584A}
.cform button[type=submit]:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(21,52,43,.35)}
.cform button[aria-busy=true]{opacity:.65;cursor:progress}
.cf-direct{font-size:12.4px;line-height:1.6;color:var(--muted);margin:0}
.cf-direct a{color:var(--pine);font-weight:700}
/* .consent is written for the dark newsletter band; on a light card it needs the
   dark text back. .sec .consent span already does this - restated here because
   the contact form also appears outside .sec on narrow pages. */
.cform .consent span{color:#4E4940}
.cform .nlmeta{color:#6E6857}
@media (max-width:620px){
  .cform{padding:18px 16px 20px}
  /* Two columns of 170px + 1fr is fine on a laptop and cramped on a phone: the
     select and the name field both lose more than they can spare. */
  .cf-row{grid-template-columns:1fr;gap:12px}
}

/* ---- what makes a report easy to act on */
.cfhelp{background:var(--paper);border:1px solid var(--line);border-radius:14px;
 padding:18px 20px;margin:0 0 22px;max-width:640px}
.sec.alt .cfhelp{background:var(--cream)}
.cfhelp h3{font-family:Fraunces,serif;font-size:15.5px;margin:0 0 11px}
.cfhelp ul{margin:0;padding:0;list-style:none}
.cfhelp li{font-size:12.8px;line-height:1.62;color:#4E4940;padding-left:19px;position:relative;
 margin:0 0 9px}
.cfhelp li:last-child{margin-bottom:0}
.cfhelp li:before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;
 border-radius:2px;background:var(--gold)}
.cfhelp li b{color:var(--ink)}

/* Contact page is now the form and nothing else, so the fine print carries the
   safety signpost on its own rather than as one of a pair of cards. */
.cf-fine{max-width:640px;margin:16px 0 0;font-size:12.4px;line-height:1.7;color:var(--muted)}
.cf-fine b{color:#B5483F;font-weight:800}