/* Resources Daily — my.resourcesdaily.com
   Charcoal + red on cool institutional paper. Mono carries the data. */

:root{
  --ink:#1B1F23;
  --charcoal:#2D3238;
  --slate:#5C6873;
  --mute:#8A96A3;
  --rule:#DCE3E9;
  --paper:#EEF2F5;
  --card:#FFFFFF;
  --red:#E8393C;
  --red-deep:#B4262A;
  --wash:#FAFCFD;

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gut:clamp(18px,4vw,40px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px;}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--card);}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;}
.masthead__logo img{height:24px;width:auto;}
.masthead__stamp{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
@media(max-width:560px){ .masthead__stamp{display:none;} }

/* ---------- article ---------- */
.wrap{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:minmax(0,1fr);padding-block:clamp(26px,4vw,44px) 20px;}
@media(min-width:960px){ .wrap{grid-template-columns:minmax(0,1fr) 320px;align-items:start;} }

/* Article header. With a photo it becomes a tinted band that bleeds past the
   text column; without one it stays flat, so a missing image degrades quietly. */
.art__head{position:relative;}
.art__head--img{
  isolation:isolate;padding:22px 22px 24px;margin:-4px -22px 0;
  border-radius:2px;overflow:hidden;
}
.art__head--img::before{
  content:"";position:absolute;inset:-20px;z-index:-1;
  background-image:var(--bg);background-size:cover;background-position:center;
  opacity:1;filter:saturate(.95);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,.5) 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,.5) 92%,transparent 100%);
}
.art__head--img::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Vertical only. A diagonal scrim bleached the left column, which is exactly
     where the headline sits, so the photo only survived on the right. */
  background:linear-gradient(180deg,
    rgba(238,242,245,.4) 0%, rgba(238,242,245,.44) 68%,
    rgba(238,242,245,.82) 91%, rgba(238,242,245,1) 100%);
}
@media(max-width:620px){ .art__head--img{padding:16px 16px 18px;margin:-4px -16px 0;} }

.crumb{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin:0 0 16px;
}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--charcoal);}
.crumb span{padding:0 6px;}

.art__title{
  margin:10px 0 0;font-weight:800;color:var(--ink);
  font-size:clamp(1.95rem,4.4vw,3rem);line-height:1.06;letter-spacing:-.032em;
}
.art__dek{margin:16px 0 0;font-size:clamp(1rem,1.5vw,1.14rem);color:var(--slate);max-width:62ch;}
.art__by{
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
}
.art__by span + span{position:relative;padding-left:13px;}
.art__by span + span::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--rule);
}

/* ---------- CTA above the fold ---------- */
.cta{
  margin:24px 0 0;background:var(--card);
  border:1px solid var(--rule);border-top:3px solid var(--red);border-radius:2px;
}
.cta__in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:20px;}
.cta__num{flex:0 0 auto;}
.cta__value{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(1.85rem,4vw,2.3rem);line-height:1;letter-spacing:-.04em;color:var(--ink);
}
.cta__unit{display:block;margin-top:7px;font-size:.78rem;color:var(--slate);max-width:26ch;}
.cta__copy{flex:1 1 220px;min-width:0;}
.cta__head{margin:0;font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.cta__sub{margin:6px 0 0;font-size:.86rem;color:var(--slate);}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.005em;
  padding:14px 24px;border:0;border-radius:2px;cursor:pointer;white-space:nowrap;
  transition:background .16s ease,transform .16s ease;
}
.btn:hover{background:var(--red-deep);transform:translateY(-1px);}
.btn__arrow{transition:transform .16s ease;}
.btn:hover .btn__arrow{transform:translateX(3px);}
.cta__fine{
  margin:0;padding:11px 20px;border-top:1px solid var(--rule);background:var(--wash);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
}

/* ---------- body copy ---------- */
.body{margin-top:clamp(30px,4vw,44px);max-width:70ch;}
.body h2{
  margin:38px 0 0;font-size:clamp(1.22rem,2.3vw,1.55rem);font-weight:800;
  letter-spacing:-.022em;color:var(--ink);line-height:1.22;
}
.body h2:first-child{margin-top:0;}
.body h3{margin:26px 0 0;font-size:1.03rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.body p{margin:14px 0 0;color:var(--charcoal);}
.body p.lead{font-size:1.06rem;color:var(--slate);}
.body ul{margin:16px 0 0;padding:0;list-style:none;}
.body ul li{position:relative;padding-left:22px;margin-top:9px;color:var(--charcoal);}
.body ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:2px;background:var(--red);
}
.body strong{font-weight:600;color:var(--ink);}

.callout{
  margin:26px 0 0;padding:18px 20px;background:var(--card);
  border:1px solid var(--rule);border-left:3px solid var(--charcoal);border-radius:2px;
}
.callout p{margin:0;font-size:.92rem;color:var(--slate);}
.callout strong{color:var(--ink);}

/* mid-article CTA */
.cta--mid{margin:34px 0 0;}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;max-width:70ch;}
.faq__title{margin:0 0 6px;font-size:clamp(1.22rem,2.3vw,1.55rem);font-weight:800;letter-spacing:-.022em;color:var(--ink);}
.faq details{
  border-bottom:1px solid var(--rule);padding:15px 0;
}
.faq summary{
  cursor:pointer;font-weight:600;color:var(--ink);font-size:.98rem;
  list-style:none;display:flex;gap:12px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";margin-left:auto;font-family:var(--mono);color:var(--red);
  font-size:1.15rem;line-height:1;flex:0 0 auto;
}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:11px 0 0;color:var(--slate);font-size:.92rem;}

/* ---------- sidebar ---------- */
.rail{display:grid;gap:16px;}
@media(min-width:960px){ .rail{position:sticky;top:22px;} }
.panel{background:var(--card);border:1px solid var(--rule);border-radius:2px;overflow:hidden;}
.panel__head{
  padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--wash);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);
}
.panel__body{padding:16px;}
.facts{margin:0;}
.facts div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);}
.facts div:last-child{border-bottom:0;padding-bottom:0;}
.facts dt{
  flex:0 0 96px;font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);padding-top:2px;
}
.facts dd{margin:0;flex:1;font-size:.87rem;color:var(--ink);font-weight:500;}

.more{list-style:none;margin:0;padding:0;}
.more li{border-bottom:1px solid var(--rule);}
.more li:last-child{border-bottom:0;}
.more a{
  display:flex;gap:10px;align-items:baseline;padding:11px 0;
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.35;
  transition:color .15s ease;
}
.more a:hover{color:var(--red-deep);}
.more a::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--rule);margin-top:.42em;transition:background .15s ease;
}
.more a:hover::before{background:var(--red);}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);background:var(--card);padding-block:32px 42px;margin-top:clamp(34px,5vw,60px);}
.foot__note{margin:0;max-width:76ch;font-size:.79rem;line-height:1.62;color:var(--slate);}
.foot__note strong{color:var(--charcoal);font-weight:600;}
.foot__base{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
}
.foot__base a{text-decoration:none;}
.foot__base a:hover{color:var(--charcoal);}

/* ---------- directory (hub + /resources) ---------- */
.hero{padding:clamp(40px,6vw,78px) 0 clamp(24px,3.5vw,38px);}
.hero__title{
  margin:14px 0 0;font-weight:800;color:var(--ink);
  font-size:clamp(2.2rem,6vw,4.1rem);line-height:1.03;letter-spacing:-.035em;max-width:15ch;
}
.hero__title em{font-style:normal;color:var(--red);}
.hero__lede{margin:20px 0 0;max-width:56ch;font-size:clamp(1rem,1.6vw,1.14rem);color:var(--slate);}

.triage{
  position:sticky;top:0;z-index:20;
  background:rgba(238,242,245,.94);backdrop-filter:blur(8px);
  border-block:1px solid var(--rule);
}
.triage__in{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-block:13px;}
.search{position:relative;flex:1 1 240px;min-width:0;}
.search__field{
  width:100%;appearance:none;font-family:var(--sans);font-size:.94rem;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:11px 38px 11px 13px;
}
.search__field::placeholder{color:var(--mute);}
.search__field:focus{border-color:var(--charcoal);outline:none;box-shadow:0 0 0 3px rgba(45,50,56,.12);}
.search__hint{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.66rem;color:var(--mute);
  border:1px solid var(--rule);border-radius:3px;padding:1px 6px;pointer-events:none;
}
.search__field:focus + .search__hint{opacity:0;}

.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  font-family:var(--sans);font-size:.81rem;font-weight:600;color:var(--slate);
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  padding:9px 13px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{border-color:var(--charcoal);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
.tally{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin-left:auto;white-space:nowrap;
}
@media(max-width:760px){ .tally{margin-left:0;width:100%;} }

.stack{padding-block:clamp(28px,4.5vw,50px) 34px;}
.group{margin-bottom:clamp(32px,5vw,52px);}
.group[hidden]{display:none;}
.group__head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:11px;margin-bottom:20px;border-bottom:2px solid var(--charcoal);
}
.group__name{margin:0;font-size:clamp(1.05rem,2vw,1.28rem);font-weight:800;letter-spacing:-.015em;color:var(--ink);}
.group__count{font-family:var(--mono);font-size:.7rem;color:var(--mute);margin-left:auto;white-space:nowrap;}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));}

.card{display:flex;}
.card[hidden]{display:none;}
.card__link{
  display:flex;flex-direction:column;width:100%;background:var(--card);
  border:1px solid var(--rule);border-radius:2px;text-decoration:none;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.card__link:hover{border-color:var(--charcoal);transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(27,31,35,.4);}
.card__link:hover .card__title{color:var(--red-deep);}

.ledger{padding:84px 18px 15px;border-top:3px solid var(--red);position:relative;overflow:hidden;}
/* Photo sits behind the number as texture, not as a thumbnail. Desaturated and
   faded out downward so any type baked into the artwork reads as grain rather
   than competing with the headline underneath. */
/* Photo reads as the subject, not as wallpaper. A scrim sweeping in from the
   left keeps the number on clean ground while the right side of the frame
   stays legible, so the image earns its place instead of muddying the card. */
.ledger::before{
  content:"";position:absolute;inset:0;
  background-image:var(--bg);background-size:cover;background-position:center;
  opacity:1;filter:saturate(.95);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.42) 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.42) 86%,transparent 100%);
  transition:transform .5s ease;
}
.ledger::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.12) 0%, rgba(255,255,255,.18) 36%,
    rgba(255,255,255,.78) 60%, rgba(255,255,255,1) 84%);
}
.card__link:hover .ledger::before{transform:scale(1.045);}
.ledger__value,.ledger__label{position:relative;z-index:1;}
.ledger__value{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(1.85rem,3.6vw,2.3rem);line-height:1;letter-spacing:-.04em;color:var(--ink);
}
.ledger__label{display:block;margin-top:8px;max-width:30ch;font-size:.78rem;line-height:1.45;color:var(--slate);}

.card__body{padding:13px 18px 18px;flex:1;border-top:1px solid var(--rule);margin:15px 0 0;}
.card__title{margin:0;font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--ink);transition:color .18s ease;}
.card__desc{margin:9px 0 0;font-size:.86rem;line-height:1.56;color:var(--slate);}

.card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;
  padding:11px 18px;border-top:1px solid var(--rule);background:var(--wash);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);
}
.card__meta span + span:not(.card__go){position:relative;padding-left:10px;}
.card__meta span + span:not(.card__go)::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--rule);
}
.card__go{margin-left:auto;font-size:.92rem;line-height:1;color:var(--charcoal);transition:transform .18s ease,color .18s ease;}
.card__link:hover .card__go{color:var(--red);transform:translateX(4px);}

.empty{display:none;padding:52px 20px;text-align:center;background:var(--card);border:1px dashed var(--rule);border-radius:2px;}
.empty[data-on="1"]{display:block;}
.empty__title{margin:0 0 8px;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.empty__body{margin:0 0 18px;color:var(--slate);font-size:.9rem;}
.empty__reset{
  font-family:var(--sans);font-size:.85rem;font-weight:600;background:var(--charcoal);
  color:#fff;border:0;border-radius:2px;padding:11px 20px;cursor:pointer;
}
.empty__reset:hover{background:var(--ink);}

@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.card{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards;}

/* ---------- SMS traffic: phone-first ----------
   Nearly all inbound is a tap from a text message, so on small screens the
   CTA goes full width for thumb reach and every control clears 44px. */
@media(max-width:620px){
  .cta__in{gap:14px;padding:18px 16px;}
  .cta__num{width:100%;}
  .cta__copy{flex:1 1 100%;}
  .btn{width:100%;justify-content:center;padding:16px 22px;font-size:1rem;}
  .cta__fine{padding:11px 16px;font-size:.62rem;}
  .chip{padding:11px 15px;}
  .search__field{padding:13px 38px 13px 13px;font-size:16px;} /* 16px stops iOS zoom-on-focus */
  .ledger{padding:72px 16px 14px;}
  .card__body{padding:12px 16px 16px;}
  .card__meta{padding:11px 16px;}
  .panel__body{padding:14px;}
  .facts dt{flex:0 0 84px;}
  .hero{padding:30px 0 22px;}
  .body{margin-top:26px;}
  .body h2{margin-top:30px;}
}
@media(max-width:400px){
  .facts div{flex-direction:column;gap:3px;}
  .facts dt{flex:none;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .btn:hover{transform:none;}
  .card__link:hover{transform:none;}
}

.foot__credits{
  margin:0 0 14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);
}
.foot__credits a{text-decoration:none;border-bottom:1px solid var(--rule);}
.foot__credits a:hover{color:var(--charcoal);}

/* Text sitting over the hero photo needs stronger colour than it does on flat
   paper — the muted greys vanish against the image. */
.art__head--img .crumb{color:var(--charcoal);font-weight:600;}
.art__head--img .crumb a:hover{color:var(--red-deep);}
.art__head--img .art__by{color:var(--slate);border-top-color:rgba(45,50,56,.2);}
.art__head--img .art__dek{color:#3B4650;}

/* ---------- conversion furniture ---------- */
.cta__urgent{
  margin:0;padding:11px 20px;border-top:1px solid rgba(232,57,60,.28);
  background:rgba(232,57,60,.07);color:var(--red-deep);
  font-size:.83rem;font-weight:600;line-height:1.45;
}
.cta__urgent::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:middle;}

.worth{
  margin:16px 0 0;background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--charcoal);border-radius:2px;padding:16px 20px 18px;
}
.worth__head{
  margin:0 0 10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);
}
.worth__list{margin:0;padding:0;list-style:none;}
.worth__list li{
  display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.worth__list li:last-child{border-bottom:0;padding-bottom:0;}
.worth__list strong{flex:0 0 168px;font-size:.92rem;font-weight:600;color:var(--ink);}
.worth__list span{flex:1;min-width:200px;font-size:.86rem;color:var(--slate);}
@media(max-width:620px){ .worth__list strong{flex:1 0 100%;} .worth__list span{min-width:0;} }

.signup{
  background:var(--charcoal);color:#fff;border-radius:2px;padding:20px;
  border-top:3px solid var(--red);
}
.signup__eyebrow{
  margin:0 0 8px;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:#9AA7B4;
}
.signup__head{margin:0;font-size:1.06rem;font-weight:800;letter-spacing:-.018em;color:#fff;line-height:1.25;}
.signup__sub{margin:8px 0 14px;font-size:.86rem;color:#C3CCD5;line-height:1.5;}
.signup__btn{width:100%;justify-content:center;}
.signup__fine{
  margin:10px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:#8794A1;text-align:center;
}
.signup--wide{
  display:grid;gap:6px 28px;align-items:center;padding:24px 26px;margin-bottom:34px;
  grid-template-columns:minmax(0,1fr) auto;
}
.signup--wide .signup__eyebrow{grid-column:1;}
.signup--wide .signup__head{grid-column:1;font-size:1.3rem;}
.signup--wide .signup__sub{grid-column:1;margin-bottom:0;max-width:60ch;}
.signup--wide .signup__btn{grid-column:2;grid-row:1/4;width:auto;align-self:center;}
.signup--wide .signup__fine{grid-column:2;grid-row:4;margin-top:8px;}
@media(max-width:720px){
  .signup--wide{grid-template-columns:minmax(0,1fr);}
  .signup--wide .signup__btn{grid-column:1;grid-row:auto;width:100%;margin-top:14px;}
  .signup--wide .signup__fine{grid-column:1;grid-row:auto;}
}

/* Sticky thumb-reach bar for SMS traffic. Phones only. */
.sticky{display:none;}
@media(max-width:860px){
  .sticky{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--rule);box-shadow:0 -6px 22px -12px rgba(27,31,35,.5);
    padding:10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  }
  .sticky__in{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;}
  .sticky__copy{min-width:0;flex:0 1 auto;}
  .sticky__val{display:block;font-family:var(--mono);font-weight:600;font-size:1.12rem;line-height:1.1;letter-spacing:-.03em;color:var(--ink);}
  .sticky__lbl{display:block;margin-top:2px;font-size:.68rem;color:var(--slate);}
  .sticky__btn{flex:1 1 auto;justify-content:center;padding:14px 16px;font-size:.92rem;white-space:normal;}
  .foot{padding-bottom:96px;}
}

/* ---------- Bright Horizon offer wall ----------
   Two placements, two very different creative shapes:
     .bhm-buttons - bare CTA links, restyled into a ranked list
     .bhm-cards   - 3-column logo/copy/CTA cards, left on their own grid
   Both use .bhm-creative-button for the CTA, so every row rule below is
   scoped to .bhm-buttons. Scoping it globally rebuilt the card layout into
   orphaned boxes with a duplicated arrow. */
.wall{padding-block:clamp(26px,4vw,42px) 0;}
.wall--cards{padding-top:clamp(22px,3vw,34px);padding-bottom:4px;}
.wall__head{margin-bottom:20px;}
.wall__eyebrow{
  display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-deep);
}
.wall__dot{
  width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(232,57,60,.55);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(232,57,60,.5);}
  70%{box-shadow:0 0 0 9px rgba(232,57,60,0);}
  100%{box-shadow:0 0 0 0 rgba(232,57,60,0);}
}
.wall__title{
  margin:0;font-size:clamp(1.45rem,3vw,2.05rem);font-weight:800;
  letter-spacing:-.028em;color:var(--ink);line-height:1.1;
}
.wall__sub{margin:10px 0 0;font-size:.95rem;color:var(--slate);max-width:56ch;}

/* ===== placement 1: ranked rows ===== */
.bhm-buttons .bhm-container-offers{counter-reset:bo;}
.bhm-buttons .bhm-container-offers,
.bhm-buttons .bhm-offer-wall{display:grid!important;gap:9px;}
.bhm-buttons .bhm-creative-container{
  counter-increment:bo;
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;
}
.bhm-buttons .bhm-creative-cta{width:100%;margin:0!important;padding:0!important;}
.bhm-buttons .bhm-creative-button{
  display:flex!important;align-items:center;gap:16px;
  width:100%;min-height:68px;padding:16px 18px!important;
  background:var(--card)!important;color:var(--ink)!important;
  border:1px solid var(--rule)!important;border-left:3px solid var(--red)!important;
  border-radius:2px!important;
  font-family:var(--sans)!important;font-size:1.01rem!important;font-weight:600!important;
  letter-spacing:-.012em!important;line-height:1.32!important;
  text-align:left!important;text-decoration:none!important;text-transform:none!important;
  justify-content:flex-start!important;
  transition:transform .16s ease,box-shadow .16s ease;
}
.bhm-buttons .bhm-creative-button::before{
  content:counter(bo,decimal-leading-zero);
  flex:0 0 auto;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--mute);
}
.bhm-buttons .bhm-creative-button::after{
  content:"Check →";
  flex:0 0 auto;margin-left:auto;
  background:var(--red);color:#fff;border-radius:2px;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  padding:9px 15px;white-space:nowrap;
  transition:background .16s ease,transform .16s ease;
}
.bhm-buttons .bhm-creative-button:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(27,31,35,.5);}
.bhm-buttons .bhm-creative-button:hover::after{background:var(--red-deep);transform:translateX(3px);}

/* ===== placement 2: logo/copy/CTA cards - keep their grid, restyle in place ===== */
.bhm-cards .bhm-container-offers,
.bhm-cards .bhm-offer-wall{display:grid;gap:12px;}
.bhm-cards .bhm-creative-container{
  background:var(--card)!important;border:1px solid var(--rule)!important;
  border-left:3px solid var(--red)!important;border-radius:2px!important;
  padding:18px 20px!important;margin:0!important;box-shadow:none!important;
}
.bhm-cards .bhm-creative-headline{
  font-family:var(--sans)!important;font-size:1.06rem!important;font-weight:700!important;
  letter-spacing:-.014em;color:var(--ink)!important;line-height:1.3!important;
}
.bhm-cards .bhm-creative-text,
.bhm-cards .bhm-creative-text li{font-size:.88rem!important;color:var(--slate)!important;line-height:1.6!important;}
.bhm-cards .bhm-creative-text strong{color:var(--ink)!important;}
.bhm-cards .bhm-creative-image img{max-width:150px;border-radius:2px;}
.bhm-cards .bhm-creative-button{
  display:inline-flex!important;align-items:center;justify-content:center;
  background:var(--red)!important;color:#fff!important;
  border:0!important;border-radius:2px!important;
  font-family:var(--sans)!important;font-weight:600!important;font-size:.95rem!important;
  padding:13px 24px!important;text-decoration:none!important;white-space:nowrap;
  transition:background .16s ease;
}
.bhm-cards .bhm-creative-button:hover{background:var(--red-deep)!important;}
.bhm-cards .bhm-creative-rank{
  font-family:var(--mono)!important;font-size:.68rem!important;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)!important;
}

@media(max-width:620px){
  .bhm-buttons .bhm-creative-button{flex-wrap:wrap;gap:10px 12px;min-height:0;padding:15px!important;font-size:.96rem!important;}
  .bhm-buttons .bhm-creative-button::after{width:100%;margin-left:0;justify-content:center;text-align:center;padding:12px 15px;}
  .bhm-buttons .bhm-creative-button::before{order:-1;}
  .bhm-cards .bhm-creative-container{padding:15px!important;}
  .bhm-cards .bhm-creative-button{width:100%;}
}
@media(prefers-reduced-motion:reduce){ .wall__dot{animation:none;} }

/* Logo cells wrap their image in the same .bhm-creative-button class as the
   CTA, which painted a red block behind every advertiser logo. */
.bhm-cards .bhm-creative-image a,
.bhm-cards .bhm-creative-image .bhm-creative-button{
  background:transparent!important;padding:0!important;border:0!important;
  display:inline-block!important;
}
.bhm-cards .bhm-creative-image img{background:#fff;padding:4px;}