/* ==========================================================================
   MTBS - Medical Tattooing Billing Services
   Shared stylesheet. Tokens sampled from the live Duda site (2026-08-18).
   ========================================================================== */
@import url('fonts.css');

/* Any class that sets a display value outranks the bare [hidden] attribute, so
   hiding an element in JS silently did nothing. That shipped three separate
   bugs here (the quiz showed all five steps, the Send button appeared on step
   one, the account page asked for a password that did not exist), so make
   [hidden] win once, globally, instead of patching each new component. */
[hidden]{display:none !important}

:root{
  /* Brand palette, taken from the live site's own CSS */
  --coral:#E35750;        /* H1, nav links, primary button, footer */
  --coral-dark:#C7433D;   /* hover */
  --orange:#E67E53;       /* H2 */
  --blush:#F0D5D1;        /* top bar, hero band */
  --tan:#BCA577;          /* feature band */
  --tan-dark:#A08C63;
  --brown:#463939;
  --navy:#34394D;
  --ink:#333333;
  --body:#666666;         /* body copy */
  --muted:#999999;
  --line:#E4E4E4;
  --bg:#FFFFFF;
  --bg-soft:#F7F7F7;
  --on-coral:#F7F7F7;     /* button text */

  /* Type.
     NOTE: the live Duda site declares "Source Sans Pro" for body copy but never
     loads it, so every visitor sees the browser's default serif (Times).
     --font-body below restores the declared intent. To reproduce the live site
     exactly instead, set --font-body to Georgia, 'Times New Roman', serif. */
  --font-head:'Darker Grotesque',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1160px;
  --gap:clamp(1rem,3vw,2.5rem);
  --radius:15px;          /* live site button radius */
  --shadow:0 2px 14px rgba(70,57,57,.10);
  --header-h:124px;       /* actual rendered height; logo box below reserves it */
  --topbar-h:34px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--font-body);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:900;margin:0 0 .5em;line-height:1.1}
h1{font-size:clamp(2.2rem,4.4vw,3rem);color:var(--coral)}
h2{font-size:clamp(1.5rem,2.4vw,1.7rem);color:var(--orange);line-height:1.5}
h3{font-size:1.375rem;color:var(--body);line-height:1.5}
h4{font-size:1.15rem;color:var(--brown)}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin-bottom:.45em}
strong{color:var(--brown);font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding:clamp(2.5rem,6vw,4.5rem) 0}
.section--soft{background:var(--bg-soft)}
.section--blush{background:var(--blush)}
.section--tan{background:var(--tan);color:#fff}
.section--tan h2,.section--tan h3{color:#fff}
.center{text-align:center}
.grid{display:grid;gap:var(--gap)}
@media(min-width:760px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-block;padding:.65em 1.9em;border-radius:var(--radius);
  background:var(--coral);color:var(--on-coral);border:1px solid var(--coral);
  font-family:var(--font-body);font-size:1rem;line-height:1.5;
  cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--coral-dark);border-color:var(--coral-dark);color:#fff;text-decoration:none}
.btn--ghost{background:transparent;color:var(--coral)}
.btn--ghost:hover{background:var(--coral);color:var(--on-coral)}
.btn--tan{background:var(--tan);border-color:var(--tan)}
.btn--tan:hover{background:var(--tan-dark);border-color:var(--tan-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.5rem 0}

/* Header ----------------------------------------------------------------- */
.topbar{background:var(--blush);color:var(--coral);font-size:.9rem;min-height:var(--topbar-h);display:flex;align-items:center}
.topbar .wrap{display:flex;justify-content:flex-end;gap:.6rem;align-items:center;flex-wrap:wrap}
.topbar a{color:var(--coral)}
.topbar .sep{color:var(--coral);opacity:.6}

.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.site-header .logo{flex:0 0 auto}
.site-header .logo img{width:186px;height:123px;object-fit:contain} /* explicit box = no CLS */

.nav{display:flex;align-items:center;gap:1.15rem}
.nav a{color:var(--coral);font-size:1rem;letter-spacing:.03em}
.nav .has-sub{position:relative}
.nav .has-sub>button{
  background:none;border:0;color:var(--coral);font:inherit;font-size:1rem;
  letter-spacing:.03em;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;padding:0;
}
.nav .has-sub>button{padding:.55rem 0}
/* The submenu used to sit .55rem below the button. That gap was a dead zone:
   moving the pointer toward the menu dropped hover and it closed. The menu now
   starts flush and uses padding for the visual offset, so the pointer never
   leaves a hoverable area. */
.nav .sub{
  position:absolute;left:-.6rem;top:100%;min-width:280px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
  padding:.55rem 0;display:none;z-index:60;margin-top:.55rem;
}
.nav .has-sub{padding-bottom:.55rem;margin-bottom:-.55rem}
/* Invisible bridge across the visual offset, so the pointer stays inside a
   hoverable area the whole way from the button to the first link. */
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.75rem}
.nav .sub a{white-space:nowrap}
.nav .has-sub[aria-expanded="true"] .sub{display:block}
.nav .sub a{display:block;padding:.62rem 1.2rem;color:var(--body);font-size:.92rem;line-height:1.3}
.nav .sub a:hover,.nav .sub a:focus-visible{color:var(--coral);background:var(--bg-soft);text-decoration:none}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--coral)}
.nav-toggle svg{width:30px;height:30px;display:block}

@media(max-width:1080px){
  :root{--header-h:104px}
  .site-header .logo img{width:140px;height:93px}
  .nav-toggle{display:block}
  /* Anchored to the header itself, not a hard-coded height, so the panel can
     never drift if the logo or padding changes. */
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:.5rem 1.25rem 1.5rem;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);display:none;max-height:calc(100dvh - 100%);overflow-y:auto;
  }
  .nav[data-open="true"]{display:flex}
  .nav>a,.nav .has-sub>button{padding:.85rem 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
  .nav .sub{position:static;display:none;border:0;box-shadow:none;padding:.2rem 0 .6rem 1rem;min-width:0}
  .nav .has-sub[aria-expanded="true"] .sub{display:block}
}

/* Hero ------------------------------------------------------------------- */
.hero{background:var(--blush);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding:clamp(2.5rem,7vw,5rem) 0;max-width:min(100% - 2.5rem,var(--wrap))}
.hero h1{margin-bottom:.15em}
.hero .kicker{color:var(--orange);font-family:var(--font-head);font-weight:900;font-size:1.25rem;margin:0 0 1.2rem}
.hero__media{position:absolute;inset:0;z-index:1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero--split .wrap{width:min(100% - 2.5rem,var(--wrap))}
@media(min-width:900px){.hero--split .hero__copy{max-width:52%}}

/* Cards ------------------------------------------------------------------ */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.6rem}
.card h3{color:var(--brown);margin-top:0}
.card--flat{border:0;padding:0}

/* Numbered process list (home page "The Billing Process") ----------------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.9rem}
.steps .n{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--coral);
  color:var(--coral);display:grid;place-items:center;font-family:var(--font-head);font-weight:900;font-size:1.2rem;
}
.steps .body{background:var(--coral);color:#fff;border-radius:var(--radius);padding:.85rem 1.2rem;flex:1}
.steps li:nth-child(even) .body{background:var(--blush);color:var(--brown)}

/* Footer ----------------------------------------------------------------- */
.site-footer{background:var(--coral);color:#fff;padding:3rem 0 0;margin-top:4rem}
.site-footer a{color:#fff}
.site-footer h4{color:#fff;font-family:var(--font-head);font-size:1.05rem;margin:0 0 .8rem}
.site-footer .cols{display:grid;gap:2rem}
@media(min-width:820px){.site-footer .cols{grid-template-columns:1.2fr .8fr 1fr;align-items:start}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.45em}
.site-footer .logo img{width:190px;height:126px;object-fit:contain;opacity:.95}
.site-footer .legal{
  border-top:1px solid rgba(255,255,255,.25);margin-top:2.5rem;padding:1.1rem 0;
  font-size:.85rem;text-align:center;opacity:.9;
}

/* Accessibility ---------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:100;background:#fff;color:var(--coral);padding:.6rem 1rem;border-radius:6px}
:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Page components
   ========================================================================== */
.eyebrow{font-family:var(--font-head);font-weight:900;color:var(--orange);margin:0 0 .3rem;font-size:1.05rem}
.eyebrow a{color:var(--orange)}
.note{color:var(--muted);font-size:.95rem}

/* Tables (manual) */
.table-wrap{overflow-x:auto;margin:0 0 1.4rem}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.97rem}
th,td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{background:var(--bg-soft);font-family:var(--font-head);font-weight:900;color:var(--brown)}
td:nth-child(n+2){text-align:right}
th:nth-child(n+2){text-align:right}

/* Manual --------------------------------------------------------------- */
.manual-head{padding:2.2rem 0}
.manual-head h1{margin:0}
.manual-layout{display:grid;gap:2.5rem;padding:2.5rem 0 1rem}
@media(min-width:1000px){.manual-layout{grid-template-columns:264px 1fr;align-items:start}}
.manual-nav ol{list-style:none;margin:0;padding:0;position:sticky;top:calc(var(--header-h) + 1rem)}
.manual-nav li{margin:0}
.manual-nav a{display:block;padding:.5rem .7rem;border-radius:8px;color:var(--body);font-size:.92rem;line-height:1.35}
.manual-nav a:hover{background:var(--bg-soft);text-decoration:none}
.manual-nav li.active a{background:var(--blush);color:var(--brown)}
.manual-nav .n{display:block;font-family:var(--font-head);font-weight:900;color:var(--coral);font-size:.85rem}
.manual-body{min-width:0}
.manual-body .video{aspect-ratio:16/9;background:var(--bg-soft);border-radius:12px;overflow:hidden;margin-bottom:2rem}
.manual-body .video iframe{width:100%;height:100%;border:0;display:block}
.manual-content h2{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--coral);font-size:1.55rem}
.manual-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.manual-content h3{color:var(--brown);margin-top:1.6rem;font-size:1.15rem}
.manual-content ul,.manual-content ol{padding-left:1.25em}
.pager{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;margin:3rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.manual-index{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media(min-width:700px){.manual-index{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.manual-index{grid-template-columns:repeat(3,1fr)}}
.manual-index a{display:block;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:12px;color:var(--brown)}
.manual-index a:hover{border-color:var(--coral);text-decoration:none}
.manual-index .n{display:block;font-family:var(--font-head);font-weight:900;color:var(--coral)}
.manual-index .t{display:block;font-family:var(--font-head);font-weight:900;font-size:1.15rem;line-height:1.2;margin:.15rem 0 .35rem}
.manual-index .m{display:block;font-size:.85rem;color:var(--muted)}

/* Members gate */
.gate{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:2rem 1.5rem;margin-bottom:2rem}
.gate__inner{width:auto;padding:0}
.gate h2{color:var(--coral);margin-top:0}
.gate__form{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 .8rem}
.gate__form input{flex:1 1 260px;padding:.65em .9em;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:1rem}
.gate__alt{font-size:.92rem;color:var(--muted);margin:0}

/* States */
.state-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem .9rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.state-list a{display:block;padding:.35rem 0}
.state-list--big{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));font-size:1.05rem}

/* Artist directory */
.dir-filters{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:2rem}
.dir-filters input,.dir-filters select{padding:.6em .9em;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:1rem;background:#fff}
.dir-filters input{flex:1 1 280px}
.dir-count{margin:0;color:var(--muted);font-size:.92rem}
.artist-grid{display:grid;gap:1.2rem}
@media(min-width:700px){.artist-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.artist-grid{grid-template-columns:repeat(3,1fr)}}
.artist{border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem}
.artist h3{margin:0 0 .2rem;color:var(--brown);font-size:1.1rem}
.artist__where{margin:0 0 .6rem;color:var(--orange);font-size:.9rem;font-family:var(--font-head);font-weight:900}
.artist__desc{font-size:.94rem;margin:0 0 .7rem}
.artist__links{margin:0;font-size:.92rem}
.dir-empty{padding:2rem 0;color:var(--muted)}
.video__locked{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:1rem}
.video__locked p{margin:0}
.embed{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.embed iframe{display:block;width:100%;border:0}
.prose{max-width:74ch}
.prose h2{color:var(--coral);margin-top:2.2rem;font-size:1.4rem}
.prose h3{margin-top:1.4rem}

/* Forms ------------------------------------------------------------------ */
.form-wrap{max-width:760px}
.wes-form{display:grid;gap:.2rem 1rem;grid-template-columns:1fr}
@media(min-width:640px){.wes-form{grid-template-columns:1fr 1fr}}
.fld{margin:0 0 1rem;grid-column:1/-1;display:flex;flex-direction:column;gap:.35rem}
@media(min-width:640px){.fld--half{grid-column:auto}}
.fld label,.fld legend{font-family:var(--font-head);font-weight:900;color:var(--brown);font-size:1rem}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:1rem;padding:.6em .8em;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--blush);outline-offset:1px;border-color:var(--coral)}
.fld span[aria-hidden]{color:var(--coral)}
fieldset.fld{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
fieldset.fld legend{padding:0 .4rem}
.radio{display:inline-flex;align-items:center;gap:.4rem;margin:.3rem 1.2rem .3rem 0;font-family:var(--font-body);font-weight:400;color:var(--body)}
.radio input{width:auto}
.fld--submit{margin-top:.4rem}
.form-note{grid-column:1/-1;font-size:.9rem;color:var(--muted);margin:.2rem 0 0}
.form-status{grid-column:1/-1;margin:.6rem 0 0;font-size:.95rem}
.form-status--error{color:#B3261E;font-weight:600}
.form-status:empty{display:none}

/* Quiz cards */
.quiz{border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.5rem;background:#fff}
.quiz__count{font-size:.85rem;color:var(--muted);margin:0 0 .4rem;grid-column:1/-1}
.quiz__step{grid-column:1/-1;display:grid;gap:0 1rem;grid-template-columns:1fr}
@media(min-width:640px){.quiz__step{grid-template-columns:1fr 1fr}}
.quiz__step h3{grid-column:1/-1;margin:0 0 .8rem;color:var(--coral)}
.quiz__nav{grid-column:1/-1;display:flex;gap:.7rem;justify-content:flex-end;margin-top:.6rem}
.quiz:not(.quiz--js) .quiz__nav [data-quiz-next],.quiz:not(.quiz--js) .quiz__nav [data-quiz-prev]{display:none}
.gate__sent{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem;margin:1.2rem 0 .8rem;color:var(--brown)}

/* ==========================================================================
   Layout components used to match the original page designs
   ========================================================================== */

/* Photo hero: full-bleed image with the copy overlaid on the left */
.hero-photo{position:relative;background:var(--blush);isolation:isolate}
.hero-photo__img{position:absolute;inset:0;z-index:-1}
.hero-photo__img img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.15) 62%,rgba(255,255,255,0) 78%);
}
.hero-photo .wrap{position:relative;padding:clamp(3rem,8vw,6.5rem) 0;min-height:min(52vw,460px);display:flex;flex-direction:column;justify-content:center}
.hero-photo__copy{max-width:min(100%,34rem)}
.hero-photo h1{margin:0 0 .1em}
.hero-photo .kicker{color:var(--orange);font-family:var(--font-head);font-weight:900;font-size:1.2rem;margin:0 0 1.3rem}
@media(max-width:700px){
  .hero-photo__img img{object-position:78% center}
  .hero-photo::after{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 58%,rgba(255,255,255,.55) 100%)}
}

/* Text beside media */
.split{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-text{grid-template-columns:1.25fr 1fr}
  .split--wide-media{grid-template-columns:1fr 1.25fr}
  .split--flip .split__media{order:-1}
}
.split__media img{width:100%;height:auto;border-radius:10px;display:block}
.split__copy>:first-child{margin-top:0}
.split__copy>:last-child{margin-bottom:0}

/* Two feature columns, centred, as on the home page */
.duo{display:grid;gap:clamp(1.5rem,4vw,3.5rem);text-align:center}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.duo h3{color:var(--brown);letter-spacing:.06em;font-size:1.05rem;text-transform:uppercase}
.duo .btn{margin-top:.6rem}

/* Full-bleed centred lead-in */
.lead{max-width:60rem;margin-inline:auto;text-align:center}
.lead h2{color:var(--coral);letter-spacing:.02em}
.lead--left{text-align:left;margin-inline:0}

/* Framed figure (the billing-process graphic) */
.figure-plain{margin:1.8rem auto 0;max-width:56rem}
.figure-plain img{width:100%;height:auto;display:block}

/* Tan conversion band: copy left, form card right */
.band-split{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){.band-split{grid-template-columns:1fr 1.1fr}}
.band-split .wes-form,.band-split .quiz{background:#fff;border-radius:12px}
.band-split__copy h2{color:#fff}
.band-split__copy p{color:rgba(255,255,255,.94)}
.fig-grid{display:grid;gap:1.2rem;margin-top:1.4rem}
@media(min-width:700px){.fig-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.fig-grid img{width:100%;height:auto;border-radius:10px;display:block}
.prose-block{max-width:74ch}
.prose-block h2,.lead--left h2{color:var(--coral)}
/* Inner-page hero band: shorter than the home hero */
.hero-photo--inner .wrap{min-height:min(26vw,260px);padding:clamp(2.2rem,5vw,3.6rem) 0}
.hero-photo--inner h1{margin:0}
.hero-photo--inner .eyebrow{margin-bottom:.2rem}

/* ==========================================================================
   The Billing Process. Was a flat PNG on the old site; this is the same
   design as real, selectable, indexable content.
   ========================================================================== */
.bp-section{padding-top:clamp(1.5rem,4vw,3rem)}
.bp{max-width:62rem;margin-inline:auto;position:relative}
.bp__head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.5rem,4vw,2.6rem)}
.bp__head h2{
  margin:0;color:var(--coral);font-size:clamp(1.6rem,3.6vw,2.4rem);
  letter-spacing:.045em;text-transform:uppercase;line-height:1.05;
}
.bp__logo{width:clamp(94px,11vw,150px);height:auto;flex:0 0 auto}

.bp__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.9rem,2.2vw,1.5rem);counter-reset:bp}

.bp__item{
  position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(.7rem,2vw,1.2rem);padding:0;
}
/* the brush-stroke bar */
.bp__text{
  margin:0;padding:clamp(.85rem,2vw,1.15rem) clamp(1.1rem,2.6vw,1.75rem);
  font-family:var(--font-head);font-weight:900;font-size:clamp(1rem,1.55vw,1.18rem);
  line-height:1.32;letter-spacing:.005em;
  border-radius:16px 22px 18px 24px / 22px 16px 24px 18px;   /* hand-drawn edge */
  transition:transform .18s ease, box-shadow .18s ease;
}
.bp__item--solid .bp__text{background:var(--coral);color:#fff}
.bp__item--soft  .bp__text{background:var(--blush);color:var(--brown)}

/* outlined step number, overlapping the bar like the original */
.bp__num{
  position:relative;z-index:2;flex:0 0 auto;
  width:clamp(38px,4.6vw,54px);height:clamp(38px,4.6vw,54px);
  display:grid;place-items:center;border-radius:50%;
  border:1.6px solid var(--brown);background:#fff;color:var(--brown);
  font-family:var(--font-head);font-weight:900;font-size:clamp(1rem,1.7vw,1.3rem);
  margin-right:calc(-1 * clamp(.7rem,2vw,1.2rem) - 6px);
}

.bp__heart{
  position:absolute;width:clamp(34px,4vw,52px);height:auto;color:#F3A9B8;
  pointer-events:none;z-index:1;
}
.bp__item:nth-child(2) .bp__heart{left:6%;bottom:-1.35rem;transform:rotate(-12deg)}
.bp__item:nth-child(3) .bp__heart{right:22%;top:-1.5rem;transform:rotate(8deg)}

@media(hover:hover){
  .bp__item:hover .bp__text{transform:translateX(4px);box-shadow:0 6px 20px rgba(70,57,57,.13)}
}

/* Reveal on scroll. Everything is visible by default, so the content is never
   dependent on JS or on the observer firing. */
.bp--anim .bp__item{opacity:0;transform:translateY(14px)}
.bp--anim .bp__item.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i) * 55ms)}

@media(max-width:560px){
  .bp__item{grid-template-columns:auto 1fr;align-items:start}
  .bp__num{margin-top:.35rem}
  .bp__heart{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bp--anim .bp__item{opacity:1;transform:none;transition:none}
  .bp__item:hover .bp__text{transform:none}
}
/* Section heading that opens a page, a touch larger than a mid-page h2 */
.section:first-of-type .prose-block>h2:first-child,
.prose-block>h2:first-child{font-size:clamp(1.6rem,2.7vw,2rem)}
.prose-block .eyebrow,.lead .eyebrow,.split__copy .eyebrow{margin-top:-.15rem}
/* Members button in the header nav.
   .nav a (0,1,1) outranks .btn (0,1,0), which painted the label coral on a
   coral background and made it look like an empty pill. */
.nav a.btn--nav{color:var(--on-coral)}
.nav a.btn--nav:hover{color:#fff;text-decoration:none}
.btn--nav{
  padding:.42em 1.15em;font-size:.95rem;line-height:1.4;white-space:nowrap;
  border-radius:999px;margin-left:.35rem;
}
@media(max-width:980px){
  .btn--nav{margin:.9rem 0 .2rem;align-self:flex-start;padding:.55em 1.4em}
}

/* Blog -------------------------------------------------------------------- */
.post-grid{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
@media(min-width:720px){.post-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.post-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.post-card__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.post-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.post-card:hover .post-card__img img{transform:scale(1.03)}
.post-card__body{padding:1.2rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.post-card__meta{margin:0 0 .3rem;color:var(--muted);font-size:.85rem}
.post-card h2{font-size:1.2rem;line-height:1.2;margin:0 0 .5rem;color:var(--coral)}
.post-card h2 a{color:inherit}
.post-card h2 a:hover{text-decoration:underline}
.post-card p{font-size:.95rem;margin:0 0 1rem}
.post-card__more{margin-top:auto;font-family:var(--font-head);font-weight:900;color:var(--coral)}

.post .wrap{max-width:74ch}
.post h1{margin-bottom:.25rem}
.post__meta{color:var(--muted);font-size:.92rem;margin:0 0 1.6rem}
.post__hero{margin:0 0 1.8rem}
.post__hero img{width:100%;height:auto;border-radius:12px;display:block}
.post__body h2{color:var(--coral);font-size:1.45rem;margin-top:2rem}
.post__body h3{color:var(--brown);margin-top:1.5rem}
.post__body a{text-decoration:underline}
.post__back{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
/* Sign-in feedback banner */
.signin-note{
  margin:0;padding:.9rem 1.2rem;font-size:1rem;text-align:center;
  font-family:var(--font-body);
}
.signin-note--warn{background:#FDECEA;color:#8C2F27;border-bottom:1px solid #F3C5BF}
.signin-note--ok{background:var(--blush);color:var(--brown);border-bottom:1px solid #E3BEB8}

/* Provider resource cards */
.rc-grid{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem);margin-top:1.6rem}
@media(min-width:640px){.rc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.rc-grid{grid-template-columns:repeat(3,1fr)}}
.rc{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.rc__thumb{display:block;aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.rc__thumb img{width:100%;height:100%;object-fit:contain;object-position:center;padding:.6rem;display:block}
.rc__body{padding:1rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.1rem;flex:1}
.rc__body h3{margin:0 0 .2rem;color:var(--brown);font-size:1.08rem;line-height:1.25}
.rc__meta{margin:0 0 .35rem;color:var(--muted);font-size:.86rem}
.rc__body p{font-size:.94rem;margin:0 0 1rem}
.rc__cta{margin-top:auto;align-self:flex-start;font-size:.92rem;padding:.5em 1.2em}
/* Google sign-in block on /login */
.gsi{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin:0 0 1.6rem}
.gsi__note{margin:0;color:var(--muted);font-size:.9rem}
.gsi-msg{margin:.2rem 0 0;font-size:.95rem}
.gsi-msg--error{color:#B3261E;font-weight:600}
.gsi-msg:empty{display:none}
.login-or{display:flex;align-items:center;gap:.9rem;color:var(--muted);font-size:.88rem;margin:0 0 1.2rem}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* Password forms on /login */
.login-pw{margin:0 0 .4rem}
.login-pw .fld{margin-bottom:.8rem}
.login-pw .fld--submit{margin-top:0}
.gate .wes-form{background:transparent}
.form-status--ok{color:#1E6B45;font-weight:600}
/* Text button that reads as a link, used for "Forgot your password?" */
.linkish{
  background:none;border:0;padding:0;margin-left:1rem;cursor:pointer;
  font:inherit;font-size:.95rem;color:var(--coral);text-decoration:underline;
}
.linkish:hover{color:var(--coral-dark)}
.linkish[disabled]{opacity:.6;cursor:default}
.fld--submit{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}

/* ==========================================================================
   Sign in, account menu and profile management
   ========================================================================== */

/* --- the sign-in page ---------------------------------------------------- */
.signin{
  display:flex;justify-content:center;
  padding:3.5rem 1.25rem 4.5rem;
  background:linear-gradient(180deg,var(--blush) 0,var(--blush) 190px,var(--bg-soft) 190px,var(--bg-soft) 100%);
}
.signin__card{
  width:100%;max-width:29rem;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:2.25rem 2rem 2rem;
  box-shadow:0 12px 34px rgba(52,57,77,.10);
}
.signin__head{text-align:center;margin-bottom:1.75rem}
.signin__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:.9rem;
  border-radius:50%;background:var(--blush);color:var(--coral);
}
.signin__mark svg{width:24px;height:24px}
.signin__mark--ok{background:#E4F1E6;color:#3F7D46}
.signin__head h1{margin:0 0 .3rem;font-size:1.85rem;line-height:1.15}
.signin__head p{margin:0;color:var(--body);font-size:.95rem}

.signin .gsi{margin:0}
.signin__card .login-or{margin:1.5rem 0 1.25rem}
.login-or span{white-space:nowrap}

.signin .wes-form .fld{margin-bottom:.95rem}
.signin .wes-form label{
  display:block;margin-bottom:.35rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.signin .wes-form input{width:100%}
.btn--block{display:block;width:100%;text-align:center}
.signin__forgot{grid-column:1/-1;margin:.75rem 0 0;text-align:center}

/* The email-link route is a fallback, so it reads as a quieter inset panel
   rather than a third equal-weight option. */
.signin__link{
  margin-top:1.75rem;padding:1.25rem 1.1rem;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
}
.signin__link-head{margin:0 0 .35rem;font-weight:700;color:var(--ink);font-size:.95rem}
.signin__link-copy{margin:0 0 .9rem;font-size:.86rem;line-height:1.55;color:var(--body)}
.signin__link .gate__form{display:block;margin:0}
.signin__link .gate__form input{width:100%;margin-bottom:.6rem}
.signin__foot{
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);
  text-align:center;font-size:.86rem;color:var(--body);
}
.signin__actions{display:grid;gap:.6rem}
.linkish{
  background:none;border:0;margin:0;padding:0;font:inherit;font-size:.86rem;
  color:var(--coral);text-decoration:underline;cursor:pointer;
}
.linkish:hover{color:var(--coral-dark)}
@media (max-width:480px){
  .signin{padding:2rem .9rem 3rem}
  .signin__card{padding:1.75rem 1.25rem 1.5rem}
}

/* --- the header account menu -------------------------------------------- */
.acct{position:relative;display:inline-flex}
.acct__btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--coral);color:var(--on-coral);
  border:0;border-radius:999px;padding:.45em .95em .45em .45em;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
}
.acct__btn:hover{background:var(--coral-dark);color:#fff}
.acct__avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:50%;
  background:rgba(255,255,255,.24);font-size:.72rem;letter-spacing:.02em;
}
.acct__btn svg{transition:transform .18s ease}
.acct[data-open="true"] .acct__btn svg{transform:rotate(180deg)}
.acct__menu{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:60;
  min-width:16.5rem;padding:.4rem;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(52,57,77,.16);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.acct[data-open="true"] .acct__menu{opacity:1;visibility:visible;transform:none}
.acct__who{
  margin:0;padding:.6rem .75rem .7rem;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:.15rem;line-height:1.3;
}
.acct__who span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.acct__who strong{font-size:.86rem;color:var(--ink);overflow-wrap:anywhere;font-weight:600}
.nav .acct__menu a{
  display:block;padding:.6rem .75rem;margin:.12rem 0 0;
  border-radius:8px;color:var(--ink);font-size:.9rem;text-decoration:none;
}
.nav .acct__menu a:hover{background:var(--bg-soft);color:var(--coral)}
.nav .acct__menu a.acct__out{
  margin-top:.25rem;border-top:1px solid var(--line);
  border-radius:0 0 8px 8px;color:var(--body);
}
@media (max-width:1080px){
  .acct{display:block;width:100%;margin:.9rem 0 .2rem}
  .acct__btn{width:100%;justify-content:flex-start;border-radius:8px}
  /* On the mobile drawer there is nothing to overlay, so the menu just opens
     in flow. Absolute positioning here would hang it off the drawer edge. */
  .acct__menu{
    position:static;min-width:0;margin-top:.5rem;box-shadow:none;
    display:none;opacity:1;visibility:visible;transform:none;
  }
  .acct[data-open="true"] .acct__menu{display:block}
}

/* --- the account page ---------------------------------------------------- */
.acct-loading{margin:0;padding:2rem 0;text-align:center;color:var(--muted)}
.acct-card{padding:1.75rem 1.5rem}
.acct-card__sub{margin:-.35rem 0 1.35rem;font-size:.88rem;line-height:1.6;color:var(--body)}
.acct-dl{margin:0;display:grid;gap:.9rem}
.acct-dl>div{
  display:grid;grid-template-columns:11rem 1fr;gap:.75rem;align-items:baseline;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.acct-dl>div:last-child{padding-bottom:0;border-bottom:0}
.acct-dl dt{
  margin:0;font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.acct-dl dd{margin:0;color:var(--ink);word-break:break-word}
.acct-banner{
  margin-bottom:1.5rem;padding:.9rem 1.1rem;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);
}
.acct-banner[data-kind="good"]{background:#E9F4EB;border-color:#BEDCC4;color:#2F6B39}
.acct-banner[data-kind="bad"]{background:#FBE9E8;border-color:#F0C6C3;color:#A8332C}
.acct-card .wes-form .fld{margin-bottom:1rem}
.acct-card .wes-form label{
  display:block;margin-bottom:.35rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.acct-card .wes-form input{width:100%;max-width:24rem}
@media (max-width:560px){
  .acct-dl>div{grid-template-columns:1fr;gap:.25rem}
}