/* OD-LAYOUT-PRIMITIVES v1 - structure only: display, flex/grid, overflow, wrapping, ratio. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack { display:flex; flex-direction:column; gap:var(--od-gap,8px); }
  .od-row { display:flex; align-items:center; gap:var(--od-gap,8px); }
  .od-row-top { display:flex; align-items:flex-start; gap:var(--od-gap,8px); }
  .od-cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--od-gap,8px); }
  .od-fill { flex:1 1 0; min-width:0; }
  .od-fixed { flex:none; }
  .od-grid { display:grid; gap:var(--od-gap,12px); grid-template-columns:repeat(var(--od-cols,3),minmax(0,1fr)); }
  .od-stat,.od-field,.od-cell { display:grid; gap:var(--od-gap,2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display:block; }
  .od-tile { display:grid; grid-template-rows:auto 1fr; }
  :where(.od-tile) > :where(*) { display:block; }
  .od-media { display:block; width:100%; height:auto; aspect-ratio:var(--od-ratio,auto); }
  .od-media-cover { object-fit:cover; }
  .od-truncate { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .od-clamp-2,.od-clamp-3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
  .od-clamp-2 { -webkit-line-clamp:2; }
  .od-clamp-3 { -webkit-line-clamp:3; }
  .od-lines-2 { min-height:calc(2 * 1.4em); }
  .od-nowrap { white-space:nowrap; }
  .od-keep { word-break:keep-all; overflow-wrap:anywhere; }
  .od-screen { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
  .od-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
  .od-rail { display:flex; gap:var(--od-gap,8px); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-inline:var(--od-rail-pad,16px); scroll-padding-inline:var(--od-rail-pad,16px); }
  .od-rail::-webkit-scrollbar { display:none; }
  :where(.od-rail) > :where(*) { flex:none; scroll-snap-align:start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end:var(--od-rail-pad,16px); }
  .od-spacer { flex:none; visibility:hidden; pointer-events:none; }
  .od-touch { min-width:44px; min-height:44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

@font-face {
  font-family:'Bowlby One SC';
  src:url('assets/fonts/BowlbyOneSC-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root {
  --ink:#004030;
  --ink-on-green:#00382a;
  --green:#42b54f;
  --paper:#fff;
  --surface:#e5e5e5;
  --line:#b5c6bf;
  --display:'Bowlby One SC','Arial Black',sans-serif;
  --body:'New Hero',Arial,Helvetica,sans-serif;
  --text-sm:1rem;
  --text-body:1.125rem;
  --text-lead:clamp(1.5rem,2.25vw,2rem);
  --text-display:clamp(2rem,3.6vw,3.5rem);
  --text-hero:clamp(2.5rem,6.5vw,6.5rem);
  --line-body:1.6;
  --line-display:1.12;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-10:80px;
  --space-12:96px;
  --space-16:128px;
  --gutter:clamp(16px,3.4vw,48px);
  --width:1440px;
  --radius-hero:32px;
  --radius-panel:24px;
  --radius-button:12px;
  --duration:200ms;
  --entrance:320ms;
  --exit:160ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --focus-width:3px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--space-3); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:var(--text-body); line-height:var(--line-body); -webkit-font-smoothing:antialiased; }
button,input,summary { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
a { color:inherit; text-underline-offset:.25em; text-decoration-thickness:1px; }
a,button,summary { touch-action:manipulation; }
img { max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
button { color:inherit; }
button:disabled { cursor:default; }
[hidden] { display:none!important; }
:focus-visible { outline:var(--focus-width) solid var(--ink); outline-offset:4px; box-shadow:0 0 0 4px var(--paper); }
:target { scroll-margin-top:var(--space-3); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; z-index:20; top:var(--space-2); left:var(--space-2); transform:translateY(-200%); padding:var(--space-2) var(--space-3); background:var(--ink); color:var(--paper); border-radius:var(--radius-button); }
.skip-link:focus { transform:translateY(0); }
.wrap { width:min(var(--width),calc(100% - var(--gutter) * 2)); margin-inline:auto; }
.section { padding-block:var(--space-12); }
.display { font-family:var(--display); font-weight:400; font-size:var(--text-display); line-height:var(--line-display); text-transform:uppercase; letter-spacing:-.02em; }
.eyebrow { display:block; font-size:var(--text-sm); line-height:1.5; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:56px; padding:var(--space-2) var(--space-3); border:2px solid transparent; border-radius:var(--radius-button); background:var(--green); color:var(--ink-on-green); font-family:var(--display); font-size:var(--text-sm); font-weight:400; line-height:1.4; text-decoration:none; text-align:center; transition:transform var(--duration) var(--ease-out),background var(--duration) var(--ease-out); }
.button svg { flex:none; width:24px; height:24px; }
.button-dark { background:var(--ink); color:var(--paper); }
.text-link { display:inline-flex; align-items:center; gap:var(--space-2); min-height:48px; font-weight:700; }
.text-link svg { width:24px; height:24px; flex:none; }
.site-header { padding-block:var(--space-4); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.brand { --brand-width:280px; display:block; flex:none; line-height:0; }
/* Supplied logos retain their original transparent artboards. These image windows remove only empty vertical space, keeping every part of the mark visible. SVG and PNG share identical geometry. */
.brand picture, .footer-brand picture { display:block; }
/* Size the visible artwork, compensating for transparent side margins in both original formats. */
.brand img { display:block; width:calc(var(--brand-width) * 1182 / 1019); height:auto; aspect-ratio:1182 / 184; object-fit:cover; object-position:50% 51.5%; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-4); }
.site-nav>a:not(.button) { display:inline-flex; align-items:center; min-height:48px; text-decoration:none; font-size:var(--text-sm); }
.site-nav>a[aria-current] { text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:3px; }
.menu-toggle { display:none; align-items:center; gap:var(--space-1); min-height:48px; background:var(--paper); border:1px solid var(--ink); border-radius:var(--radius-button); padding:var(--space-1) var(--space-2); font-weight:700; }
.menu-toggle svg { width:24px; height:24px; }
.campaign-hero { min-height:clamp(440px,40vw,608px); border-radius:var(--radius-hero); display:grid; align-items:center; background-color:var(--ink); background-image:linear-gradient(90deg,rgba(0,32,24,.6),rgba(0,32,24,.07) 43%,rgba(0,32,24,.07) 55%,rgba(0,32,24,.58)),url('assets/images/cardboard-hero.webp'); background-position:center,center 51%; background-size:cover; color:var(--paper); padding:var(--space-6); }
.hero-title { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr); align-items:center; gap:var(--space-2); font-family:var(--display); font-size:var(--text-hero); font-weight:400; line-height:1.03; letter-spacing:-.035em; text-transform:uppercase; }
.hero-title>span { display:block; text-align:center; }
.hero-title>span:last-child { grid-column:3; }
.hero-title .line { display:block; }
.hero-caption { padding:var(--space-4) var(--space-3) 0; text-align:center; font-size:var(--text-lead); line-height:1.4; }
.underline { display:inline-block; position:relative; }
.underline::after { content:''; display:block; height:5px; width:100%; background:var(--green); border-radius:50% 20% 35% 30%; transform:rotate(-1deg); transform-origin:left; animation:underline-in var(--entrance) var(--ease-out) both; }
.opening-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2) var(--space-4); padding-top:var(--space-3); }
.intro-label { font-size:var(--text-sm); }
.section-top { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-8); align-items:end; margin-bottom:var(--space-6); }
.section-top .display { max-width:19ch; }
.section-top p { max-width:56ch; }
.section-top .eyebrow { margin-bottom:var(--space-2); }
.learning-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--space-8); }
.learning-photo { border-radius:var(--radius-panel); }
.photo-caption { padding-top:var(--space-2); font-size:var(--text-sm); }
.learning-intro { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); padding-bottom:var(--space-2); }
.learning-intro>p { font-size:var(--text-sm); font-weight:700; }
.small-control { display:inline-flex; align-items:center; min-height:44px; padding:var(--space-1); border:0; border-radius:var(--space-1); background:transparent; text-decoration:underline; text-underline-offset:.25em; font-size:var(--text-sm); }
.habit { border-top:1px solid var(--line); }
.habit:last-of-type { border-bottom:1px solid var(--line); }
.habit summary { display:grid; grid-template-columns:48px minmax(0,1fr) 32px; gap:var(--space-2); align-items:center; padding:var(--space-3) var(--space-1); list-style:none; min-height:96px; }
.habit summary::-webkit-details-marker { display:none; }
.habit summary::marker { content:''; }
.habit-number { display:grid; place-items:center; width:48px; height:48px; background:var(--green); color:var(--ink-on-green); border-radius:50%; font-family:var(--display); font-size:var(--text-sm); }
.habit-label { display:block; font-size:clamp(1.25rem,2vw,1.75rem); font-weight:700; line-height:1.3; }
.plus { display:grid; place-items:center; width:32px; height:32px; font-size:2rem; line-height:1; transition:transform var(--duration) var(--ease-out); }
.habit[open] .plus { transform:rotate(45deg); }
.habit-content { padding:0 var(--space-6) var(--space-4) var(--space-8); }
.habit-content p+p { margin-top:var(--space-2); }
.habit-content strong { font-weight:700; }
.habit-content .note { font-size:var(--text-sm); }
.habit[open] summary { color:var(--ink); }
.learning-footer { margin-top:var(--space-3); font-size:var(--text-sm); }
.why { text-align:center; padding-block:var(--space-8) var(--space-12); }
.why .eyebrow { margin-bottom:var(--space-3); }
.why h2 { font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.35; max-width:42ch; margin-inline:auto; }
.why>p { max-width:68ch; margin:var(--space-3) auto 0; }
.why-detail { max-width:68ch; margin:var(--space-3) auto 0; text-align:left; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-detail summary { padding:var(--space-2); font-weight:700; }
.why-detail p { padding:0 var(--space-2) var(--space-3); }
.rinse-stage { background:var(--ink); color:var(--paper); padding:var(--space-10) var(--gutter) var(--space-6); }
.rinse-inner { max-width:var(--width); margin-inline:auto; }
.rinse-picture { min-height:clamp(360px,35vw,536px); display:grid; align-items:center; padding:var(--space-6); border-radius:var(--radius-panel); background-image:linear-gradient(90deg,rgba(0,32,24,.64),rgba(0,32,24,.1) 43%,rgba(0,32,24,.1) 54%,rgba(0,32,24,.64)),url('assets/images/rinse-hero.webp'); background-size:cover; background-position:center,center 56%; }
.rinse-title { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.2fr); gap:var(--space-2); align-items:center; font-size:clamp(2rem,4.9vw,5rem); line-height:1.08; }
.rinse-title>span { display:block; text-align:center; }
.rinse-title>span:last-child { grid-column:3; }
.rinse-title .line { display:block; }
.rinse-caption { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-4) 0 0; }
.rinse-caption p { font-size:1.25rem; }
.rinse-caption .text-link { color:var(--paper); }
.rinse-stage :focus-visible { outline-color:var(--paper); box-shadow:0 0 0 4px var(--ink); }
.examples-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:var(--space-4); margin-bottom:var(--space-5); }
.examples-head .display { max-width:25ch; }
.examples-head .eyebrow { margin-bottom:var(--space-2); }
.rail-controls { display:flex; align-items:center; gap:var(--space-1); }
.rail-status { display:block; margin-right:var(--space-2); font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.round-control { display:grid; place-items:center; flex:none; width:56px; height:56px; background:var(--green); color:var(--ink-on-green); border:2px solid transparent; border-radius:50%; transition:transform var(--duration) var(--ease-out); }
.round-control svg { width:24px; height:24px; }
.round-control:disabled { background:var(--surface); color:var(--ink); border-color:var(--line); }
.examples-rail { --od-gap:var(--space-3); --od-rail-pad:0px; padding:var(--space-1); margin:calc(var(--space-1) * -1); align-items:stretch; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--ink) var(--surface); }
.example { flex:0 0 calc((100% - var(--space-6)) / 3); min-width:0; display:flex; flex-direction:column; border-radius:var(--radius-panel); background:var(--surface); }
.example-copy { padding:var(--space-4); flex:1 1 auto; }
.example-number { display:block; font-size:var(--text-sm); letter-spacing:.08em; margin-bottom:var(--space-3); }
.example h3 { font-size:1.5rem; line-height:1.2; font-weight:700; margin-bottom:var(--space-2); }
.example p { font-size:var(--text-body); line-height:1.5; }
.example>.od-media { border-radius:var(--radius-panel); }
.example-photo-frame { display:flex; justify-content:center; align-items:center; padding:0 var(--space-4) var(--space-4); }
.example-photo-frame img { width:min(65%,240px); height:auto; border-radius:var(--radius-button); }

.aerosol-statement { padding:var(--space-4); margin-top:var(--space-4); font-family:var(--display); font-size:clamp(2rem,3vw,3rem); line-height:1.2; text-transform:uppercase; }
.aerosol-statement>span { display:block; }
.example-footer { padding:0 var(--space-4) var(--space-4); font-size:var(--text-sm); }
.guidance-wrap { padding-bottom:var(--space-12); }
.guidance { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-2); align-items:start; }
.guidance-copy { align-self:stretch; background:var(--green); color:var(--ink-on-green); border-radius:var(--radius-panel); display:flex; flex-direction:column; padding:var(--space-4); }
.guidance-copy .display { font-size:clamp(1.75rem,2.65vw,2.75rem); max-width:12ch; }
.guidance-copy .lead { font-size:1.375rem; font-weight:700; line-height:1.3; margin-top:var(--space-2); }
.guidance-copy p:not(.lead) { margin-top:var(--space-2); }
.guidance-action { margin-top:auto; padding-top:var(--space-4); }
.guidance img { border-radius:var(--radius-panel); }
.closing { position:relative; z-index:1; padding:0 var(--gutter) var(--space-10); border-radius:0 0 var(--space-6) var(--space-6); background:var(--paper); text-align:center; }
.closing .display { max-width:29ch; margin-inline:auto; font-size:clamp(1.75rem,3.5vw,3rem); }
.site-footer { background:var(--ink); color:var(--paper); }
.footer-inner { padding-block:var(--space-8) var(--space-4); text-align:center; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2) var(--space-4); margin-bottom:var(--space-6); }
.footer-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-sm); }
.footer-brand { --footer-logo-width:256px; display:inline-block; max-width:100%; line-height:0; }
.footer-brand img { display:block; width:calc(var(--footer-logo-width) * 1182 / 838); max-width:100%; height:auto; aspect-ratio:1182 / 360; object-fit:cover; object-position:50% 49.6%; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-3); margin-top:var(--space-6); padding-top:var(--space-3); border-top:1px solid rgba(255,255,255,.35); font-size:var(--text-sm); }
.footer-bottom a { display:inline-flex; align-items:center; gap:var(--space-1); min-height:44px; }
.site-footer :focus-visible { outline-color:var(--paper); box-shadow:0 0 0 4px var(--ink); }
@keyframes underline-in { from { transform:scaleX(.05) rotate(-1deg); } to { transform:scaleX(1) rotate(-1deg); } }
@media (hover:hover) {
  .button:hover { transform:translateY(-2px); background:var(--ink); color:var(--paper); }
  .button-dark:hover { background:var(--paper); color:var(--ink); border-color:var(--ink); }
  .site-nav>a:not(.button):hover,.footer-nav a:hover { text-decoration:underline; text-decoration-thickness:2px; }
  .text-link:hover { text-decoration-thickness:3px; }
  .habit summary:hover { background:var(--surface); }
  .small-control:hover { background:var(--surface); }
  .round-control:not(:disabled):hover { transform:translateY(-2px); background:var(--ink); color:var(--paper); }
}
@media (min-width:1440px) { .hero-title { font-size:6.5rem; } }
@media (max-width:1023px) {
  .site-header { padding-block:var(--space-3); }
  .brand { --brand-width:240px; }
  .header-inner { flex-wrap:wrap; }
  .site-nav { gap:var(--space-3); }
  .site-nav .button { padding-inline:var(--space-2); }
  .section { padding-block:var(--space-8); }
  .section-top { gap:var(--space-4); }
  .learning-layout { gap:var(--space-4); }
  .campaign-hero { padding:var(--space-3); min-height:440px; }
  .hero-title { grid-template-columns:minmax(0,1fr) minmax(0,.5fr) minmax(0,1fr); }
  .rinse-picture { padding:var(--space-3); }
  .rinse-title { grid-template-columns:minmax(0,1fr) minmax(0,.4fr) minmax(0,1fr); }
  .example { flex-basis:calc((100% - var(--space-3)) / 2); }
  .guidance { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:center; }
  .guidance-copy { padding:var(--space-3); }
  .guidance-copy .display { font-size:2rem; }
  .guidance-wrap { padding-bottom:var(--space-8); }
}
@media (max-width:900px) {
  .js .menu-toggle { display:inline-flex; }
  .site-nav { width:100%; flex-wrap:wrap; justify-content:flex-start; }
  .js .site-nav { display:none; }
  .js .site-nav.is-open { display:flex; }
  .header-inner { gap:var(--space-3); }
}
@media (max-width:767px) {
  :root { --gutter:24px; --radius-hero:24px; --text-display:clamp(2rem,7.3vw,3rem); }
  .site-header { padding-block:var(--space-3); }
  .brand { --brand-width:208px; }
  .menu-toggle { padding-inline:var(--space-1); gap:4px; }
  .menu-toggle .menu-word { font-size:var(--text-sm); }
  .site-nav { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); padding-top:var(--space-1); }
  .site-nav .button { width:100%; }
  .campaign-hero { min-height:496px; padding:var(--space-4) var(--space-3); background-position:center,53% center; background-image:linear-gradient(180deg,rgba(0,32,24,.63),rgba(0,32,24,.04) 46%,rgba(0,32,24,.67)),url('assets/images/cardboard-hero.webp'); }
  .hero-title { min-height:432px; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; align-items:start; font-size:clamp(2.5rem,10.5vw,4.5rem); gap:var(--space-4); }
  .hero-title>span:first-child { text-align:left; }
  .hero-title>span:last-child { grid-column:1; grid-row:3; text-align:right; }
  .hero-caption { padding:var(--space-3) 0 0; font-size:1.5rem; }
  .opening-actions { gap:var(--space-1); padding-top:var(--space-2); }
  .opening-actions .intro-label { width:100%; }
  .section-top { grid-template-columns:1fr; gap:var(--space-3); margin-bottom:var(--space-4); }
  .section-top .display { max-width:19ch; }
  .learning-layout { grid-template-columns:1fr; gap:var(--space-4); }
  .learning-photo { width:100%; }
  .habit summary { padding-block:var(--space-3); grid-template-columns:40px minmax(0,1fr) 32px; min-height:88px; gap:var(--space-2); }
  .habit-number { width:40px; height:40px; }
  .habit-content { padding-left:var(--space-1); padding-right:var(--space-1); }
  .why { padding-block:var(--space-4) var(--space-8); }
  .rinse-stage { padding:var(--space-5) var(--gutter) var(--space-4); }
  .rinse-picture { min-height:456px; padding:var(--space-3); background-position:center,48% center; background-image:linear-gradient(180deg,rgba(0,32,24,.65),rgba(0,32,24,.05) 48%,rgba(0,32,24,.68)),url('assets/images/rinse-hero.webp'); }
  .rinse-title { min-height:400px; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; font-size:clamp(2rem,8.2vw,3.5rem); }
  .rinse-title>span:first-child { text-align:left; }
  .rinse-title>span:last-child { grid-column:1; grid-row:3; text-align:right; }
  .rinse-caption { display:block; }
  .rinse-caption .text-link { margin-top:var(--space-2); }
  .rail-controls { display:none; }
  .examples-head { margin-bottom:var(--space-4); }
  .examples-rail { display:grid; grid-template-columns:1fr; overflow:visible; gap:var(--space-3); scroll-snap-type:none; }
  .example { width:100%; }
  .example-copy { padding:var(--space-3); }
  .example-number { margin-bottom:var(--space-2); }
  .aerosol-statement { margin-top:0; padding:var(--space-3); font-size:2.5rem; }
  .example-footer { padding-inline:var(--space-3); }
  .guidance { grid-template-columns:1fr; gap:var(--space-2); }
  .guidance-copy { padding:var(--space-4); }
  .guidance-copy .display { max-width:15ch; font-size:var(--text-display); }
  .guidance-action { padding-top:var(--space-4); }
  .closing { padding-bottom:var(--space-8); border-radius:0 0 var(--space-4) var(--space-4); }
  .footer-inner { padding-top:var(--space-6); }
  .footer-brand { --footer-logo-width:200px; }
  .footer-bottom { justify-content:center; }
}
@media (max-width:374px) {
  :root { --gutter:16px; }
  .brand { --brand-width:184px; }
  .menu-word { display:none; }
  .campaign-hero { padding-inline:var(--space-2); }
  .hero-title { font-size:2.5rem; }
  .guidance-copy { padding:var(--space-3); }
  .button { padding-inline:var(--space-2); }
}
@media (prefers-reduced-motion:reduce) {
  html,.examples-rail { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
@media (forced-colors:active) {
  .button,.round-control,.habit-number { border:2px solid ButtonText; }
  .campaign-hero,.rinse-picture { background-image:none; color:CanvasText; border:2px solid CanvasText; }
  :focus-visible { outline:3px solid Highlight; box-shadow:none; }
}