/* Skin Resonance site, design system 2 (October 2026).
   Brings the site in line with the app (v113 onwards): DM Sans for text, DM Mono for small labels,
   Cormorant Garamond for headings, flat surfaces with thin rules, one accent per section,
   and the clay of the app's player. All fonts are served from /fonts, no third-party calls. */

@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500 900;font-display:swap;src:url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-display:swap;src:url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500 700;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500 700;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}

:root{
  --paper:#F6F1E9; --paper-2:#EFE6DA; --card:#FFFDFA; --sand:#E9DCCB;
  --ink:#2E2420; --ink-2:#4D403A; --muted:#75675F; --line:rgba(46,36,32,.12); --line-2:rgba(46,36,32,.2);
  --sage:#899A7C; --sage-deep:#5F7254; --clay:#B17259; --clay-text:#9A5A42; --buy:#BC6543; --buy-hover:#A5512F;
  --deep:#3A2A24; --deep-text:#F4EAE0; --deep-muted:#C4B3A6; --glow:#B5C4A6;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
}

/* the shared header and footer still carry inline styles; on pages using this sheet, their type follows the system */
body.sr2{font-family:var(--sans);background:var(--paper);color:var(--ink)}
body.sr2 [style*="Mulish"]{font-family:var(--sans) !important}
body.sr2 header a,body.sr2 footer a,body.sr2 footer p,body.sr2 footer span{font-family:var(--sans) !important}
body.sr2 header a[data-cta]{font-weight:500 !important}
body.sr2 footer [style*="text-transform:uppercase"]{font-family:var(--mono) !important;font-weight:400 !important;letter-spacing:.14em !important}

/* ---------- building blocks ---------- */
.h2-page section{position:relative}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.band{padding:clamp(72px,9vw,120px) 0}
.band.tint{background:var(--paper-2)}
.band.tight{padding:clamp(56px,7vw,88px) 0}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);margin:0 0 16px}
.eyebrow.mark{display:inline-flex;align-items:center;gap:12px}
.eyebrow.mark::after{content:"";width:28px;height:9px;background:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M1 4.5C3.5 1 5.5 1 8 4.5S12.5 8 15 4.5 19.5 1 22 4.5 24.5 6.5 25 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M1 4.5C3.5 1 5.5 1 8 4.5S12.5 8 15 4.5 19.5 1 22 4.5 24.5 6.5 25 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.h-xl,.h-l,.h-m{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;letter-spacing:-.005em}
.h-xl{font-size:clamp(42px,5.6vw,72px);line-height:1.03}
.h-l{font-size:clamp(32px,3.8vw,48px);line-height:1.08}
.h-m{font-size:clamp(23px,2.2vw,28px);line-height:1.18}
.h-xl em,.h-l em,.h-m em{font-style:italic;font-weight:400;color:var(--clay-text)}
.lede{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.65;color:var(--ink-2);margin:18px 0 0;max-width:640px}
.body{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.small{font-size:13.5px;line-height:1.6;color:var(--muted)}
.mono{font-family:var(--mono);letter-spacing:.06em}
.head{max-width:680px;margin:0 0 clamp(36px,4vw,52px)}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .lede{margin-left:auto;margin-right:auto}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.link{color:var(--clay-text);text-decoration:none;border-bottom:1px solid rgba(154,90,66,.35);padding-bottom:1px;font-weight:500}
.link:hover{border-bottom-color:var(--clay-text)}
.more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--clay-text);text-decoration:none}
.more::after{content:"→";transition:transform .2s}
.more:hover::after{transform:translateX(3px)}

/* buttons: the buy button keeps the brand terracotta; everything else is the app's quieter pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:15px;text-decoration:none;border-radius:999px;padding:14px 26px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn.buy{background:var(--buy);color:#FFF8F1}
.btn.buy:hover{background:var(--buy-hover)}
.btn.sage{background:var(--sage-deep);color:#FFFFFF}
.btn.sage:hover{background:#4F6146}
.btn.ghost{border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.cream{background:var(--deep-text);color:var(--deep)}
.btn.cream:hover{background:#FFF8F1}
.btn.ghost-light{border-color:rgba(244,234,224,.35);color:var(--deep-text)}
.btn.ghost-light:hover{border-color:var(--deep-text)}
.btn svg{width:14px;height:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* phones */
.phone{width:min(290px,78vw);background:linear-gradient(145deg,#edeff2 0%,#c6c8cd 28%,#f1f3f5 52%,#c2c4c9 76%,#e2e4e8 100%);border-radius:46px;padding:10px;box-shadow:0 46px 90px -40px rgba(30,18,12,.7),0 2px 6px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.45)}
.phone>div{background:#0a0a0c;border-radius:38px;padding:3px}
.phone>div>div{border-radius:35px;overflow:hidden;aspect-ratio:9/19.5;background:#F6EEE4}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- hero: the app's evening clay ---------- */
.hero{background:radial-gradient(ellipse 60% 70% at 72% 40%,rgba(177,114,89,.38),transparent 70%),radial-gradient(ellipse 70% 60% at 0% 110%,rgba(137,154,124,.18),transparent 70%),linear-gradient(160deg,#4A3229 0%,#3A2A24 50%,#2F221D 100%);color:var(--deep-text);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 74% 44%,transparent 0 33px,rgba(244,234,224,.05) 33px 34px);-webkit-mask-image:radial-gradient(circle at 74% 44%,#000 0,#000 22%,transparent 60%);mask-image:radial-gradient(circle at 74% 44%,#000 0,#000 22%,transparent 60%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center;padding-top:clamp(56px,9vw,112px);padding-bottom:clamp(64px,9vw,112px)}
.hero .eyebrow{color:var(--deep-muted);border:1px solid rgba(244,234,224,.22);border-radius:999px;padding:7px 14px}
.hero .h-xl{color:#FBF6EF}
.hero .h-xl em{color:#E3A585}
.hero .lede{color:rgba(244,234,224,.86)}
.hero .btns{margin-top:34px}
.hero .note{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:13.5px;color:var(--deep-muted)}
.hero .note::before{content:"";width:24px;height:8px;background:var(--glow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M1 4.5C3.5 1 5.5 1 8 4.5S12.5 8 15 4.5 19.5 1 22 4.5 24.5 6.5 25 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M1 4.5C3.5 1 5.5 1 8 4.5S12.5 8 15 4.5 19.5 1 22 4.5 24.5 6.5 25 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hero .phone{justify-self:center}
.facts{border-bottom:1px solid var(--line)}
.facts ul{list-style:none;margin:0 auto;padding:18px 26px;max-width:var(--wrap);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts li{display:inline}
.facts li+li::before{content:"·";color:var(--clay);margin:0 14px 0 0;opacity:.8}

/* ---------- science ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;display:block}
.pull{font-family:var(--serif);font-size:clamp(20px,1.9vw,23px);line-height:1.4;color:var(--ink);border-left:2px solid var(--clay);padding-left:20px;margin:26px 0}
.sources{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.sources em{font-style:italic;color:var(--ink-2)}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.step{text-align:left}
.step .shot{display:flex;justify-content:center;margin:0 0 22px}
.step .shot img{display:block;width:min(100%,250px);height:auto}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--clay-text)}
.step h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.2;margin:8px 0 10px;color:var(--ink)}
.step p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-2)}

/* ---------- routine cards, as in the app ---------- */
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:22px 22px 20px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
a.rcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.rcard .meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rcard .meta .dur{color:var(--clay-text)}
.rcard h3{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2;margin:14px 0 6px;color:var(--ink)}
.rcard p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--ink-2);flex:1}
.strip{display:flex;height:5px;border-radius:3px;overflow:hidden;gap:2px}
.strip span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}
.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:0}
.rcard .read{margin-top:14px;font-size:13px;font-weight:500;color:var(--clay-text)}
.rcard.add{border-style:dashed;background:transparent;justify-content:center}
.rcard.add h3 em{font-style:italic;color:var(--clay-text)}
.row-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}

/* ---------- two levels ---------- */
.levels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.level img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;margin-bottom:24px}
.level h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,32px);margin:6px 0 10px}
.level>p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0 0 18px}
.ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ticks li{padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2);position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:1.6px solid var(--sage-deep);border-bottom:1.6px solid var(--sage-deep);transform:rotate(-45deg)}

/* ---------- everything inside ---------- */
.inside{display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,6vw,80px);align-items:start}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,48px)}
.feat{display:grid;grid-template-columns:28px 1fr;gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.feat svg{grid-row:span 2;width:22px;height:22px;stroke:var(--sage-deep);margin-top:3px}
.feat h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.2;margin:0;color:var(--ink)}
.feat p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- price, on clay ---------- */
.price{background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(177,114,89,.32),transparent 70%),linear-gradient(170deg,#45302A 0%,#3A2A24 55%,#2F221D 100%);color:var(--deep-text);text-align:center}
.price .eyebrow{color:var(--glow)}
.price .amount{font-family:var(--serif);font-weight:500;font-size:clamp(72px,10vw,112px);line-height:1;color:#FBF6EF;margin:10px 0 4px}
.price .amount em{font-style:italic;font-weight:400;font-size:.3em;color:var(--deep-muted);margin-left:8px}
.price .sub{color:var(--deep-muted);font-size:14px;margin:0 0 20px}
.price .h-m{color:#FBF6EF}
.price .lede{color:rgba(244,234,224,.82);margin:12px auto 30px}
.price ul{list-style:none;margin:0 auto 34px;padding:0;max-width:620px;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;text-align:left}
.price li{padding:11px 0 11px 26px;border-top:1px solid rgba(244,234,224,.14);font-size:14.5px;color:rgba(244,234,224,.9);position:relative}
.price li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:1.6px solid var(--glow);border-bottom:1.6px solid var(--glow);transform:rotate(-45deg)}
.price .fine{font-size:13px;color:var(--deep-muted);margin:20px 0 0}
.price .fine a{color:var(--deep-text)}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:center;max-width:860px;margin:0 auto}
.founder img{width:clamp(110px,14vw,150px);height:clamp(110px,14vw,150px);border-radius:50%;object-fit:cover;object-position:center 15%}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,23px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:1.5px solid var(--clay-text);border-bottom:1.5px solid var(--clay-text);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{margin:0 0 22px;font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:700px}

/* ---------- journal ---------- */
.jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.jcard{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.jcard img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:6px;display:block;margin-bottom:16px;transition:opacity .2s}
.jcard:hover img{opacity:.92}
.jcard .eyebrow{margin:0 0 8px;font-size:10.5px}
.jcard h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.22;margin:0 0 8px;color:var(--ink)}
.jcard p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- notify ---------- */
.notify{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center}
.notify form{display:flex;gap:10px;flex-wrap:wrap}
.notify input{flex:1 1 240px;min-width:0;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:13px 20px}
.notify input:focus-visible,.btn:focus-visible,.rcard:focus-visible,.jcard:focus-visible,.faq summary:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .copy{animation:rise .8s ease both}
.hero .phone{animation:rise 1s ease both .12s}
@media (prefers-reduced-motion:reduce){.hero .copy,.hero .phone{animation:none}a.rcard:hover{transform:none}}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .hero .wrap,.split,.inside,.levels,.notify{grid-template-columns:1fr}
  .hero .phone{margin-top:8px}
  .steps{grid-template-columns:1fr;gap:44px}
  .feats{grid-template-columns:1fr}
  .inside .phone{display:none}
  .jcards{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr;text-align:center;justify-items:center}
  .price ul{grid-template-columns:1fr}
  /* routine cards scroll sideways on phones, like a shelf */
  .rcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -26px;padding:0 26px 8px;scrollbar-width:none}
  .rcards::-webkit-scrollbar{display:none}
  .rcard{flex:0 0 78%;scroll-snap-align:start}
  .split img{aspect-ratio:16/11}
}

/* the sample player's info panel follows the system on these pages */
body.sr2 .srp-info{font-family:var(--sans)}
body.sr2 .srp-eyebrow{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;color:var(--clay-text)}
body.sr2 .srp-h{font-family:var(--serif);font-weight:500}
body.sr2 .srp-list button{font-family:var(--sans)}
body.sr2 .srp-list .t b{font-weight:500}
body.sr2 .srp-list .n{font-family:var(--mono);font-weight:400}
@media (max-width:640px){.facts ul{flex-direction:column;align-items:center;gap:7px;text-align:center}.facts li+li::before{display:none}}
body.sr2 header a:not([data-cta]){font-weight:500 !important}


/* ================= site-wide layer (v25) =================
   The older pages are built from inline styles. On every page that loads this sheet these rules bring them
   into the same system as the home page without retyping them: app fonts, mono labels, flat sand instead of
   gradients, no watermark words or wave dividers, quieter buttons, thin-rule FAQs, clay instead of sage bands. */
body.sr2 [style*="Cormorant"]{font-family:var(--serif) !important}
body.sr2 .sci-tab{font-family:var(--sans) !important;font-weight:500 !important}
body.sr2 main [style*="text-transform:uppercase"]:not(a):not(button){font-family:var(--mono) !important;font-weight:400 !important;letter-spacing:.14em !important}
body.sr2 main span[style*="text-transform:uppercase"][style*="background:#F5E4D8"]{background:transparent !important;border:1px solid var(--line-2);color:var(--clay-text) !important}
/* watermark words, wave dividers and the small squiggle separators */
body.sr2 [aria-hidden="true"][style*="position:absolute"][style*="font-size:clamp("]{display:none !important}
body.sr2 .divider{display:none !important}
body.sr2 svg[width="260"][height="34"]{display:none !important}
/* flat sand instead of the gradient bands */
body.sr2 [style*="linear-gradient(180deg,#F1E6D8 0%,#EADAC0 100%)"]{background:var(--paper-2) !important}
body.sr2 [style*="background:#F1E6D8"]{background:var(--paper-2) !important}
/* the sage call-to-action band becomes the app's clay */
body.sr2 section[style*="#5F6E52 0%,#4B5840 100%"]{background:radial-gradient(ellipse 60% 90% at 50% 0%,rgba(177,114,89,.32),transparent 70%),linear-gradient(170deg,#45302A 0%,#3A2A24 55%,#2F221D 100%) !important}
body.sr2 section[style*="#5F6E52 0%,#4B5840 100%"] a[style*="background:#BC6543"]{background:var(--deep-text) !important;color:var(--deep) !important}
/* buttons: medium weight, as in the app */
body.sr2 main a[style*="border-radius:100px"],body.sr2 main button[style*="border-radius:100px"]{font-weight:500 !important;font-family:var(--sans) !important}
/* cards and pictures: the app's softer 6px corners */
body.sr2 main [style*="border-radius:14px"],body.sr2 main [style*="border-radius:16px"],body.sr2 main [style*="border-radius:18px"],body.sr2 main [style*="border-radius:22px"],body.sr2 main [style*="border-radius:24px"],body.sr2 main [style*="border-radius:12px"]{border-radius:6px !important}
/* FAQs as thin-ruled rows, like the home page */
body.sr2 main details[style*="background:#FBF8F2"]{background:transparent !important;border:0 !important;border-bottom:1px solid var(--line) !important;border-radius:0 !important;padding:2px 0 !important}
body.sr2 main details[style*="background:#FBF8F2"] summary span{color:var(--clay-text) !important;font-weight:300 !important}
body.sr2 main div[style*="display:grid;gap:12px"]:has(> details){gap:0 !important;border-top:1px solid var(--line)}

/* the full list on /routines stays a grid on phones */
@media (max-width:900px){.rcards.all{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0}.rcards.all .rcard{flex:none}}
@media (min-width:901px) and (max-width:1100px){.rcards{grid-template-columns:repeat(2,1fr)}}

/* ---------- the ticker, calmer (v25): continues the hero's clay, low contrast, slow, pauses on hover,
   and stands still (wrapped) for anyone who has asked their device to reduce motion ---------- */
.ticker{background:#2F221D;border-top:1px solid rgba(244,234,224,.08);overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,#2F221D,rgba(47,34,29,0))}
.ticker::after{right:0;background:linear-gradient(270deg,#2F221D,rgba(47,34,29,0))}
.ticker-track{display:flex;width:max-content;animation:tick 90s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{list-style:none;margin:0;padding:15px 0;display:flex;flex:none}
.ticker li{display:flex;align-items:center;white-space:nowrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-muted)}
.ticker li::after{content:"";width:24px;height:8px;margin:0 30px;background:var(--glow);opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M1 4.5C3.5 1 5.5 1 8 4.5S12.5 8 15 4.5 19.5 1 22 4.5 24.5 6.5 25 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M1 4.5C3.5 1 5.5 1 8 4.5S12.5 8 15 4.5 19.5 1 22 4.5 24.5 6.5 25 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto;display:block}
  .ticker ul{flex-wrap:wrap;justify-content:center;gap:8px 0;padding:14px 26px;flex:none;width:100%;box-sizing:border-box}
  .ticker ul[aria-hidden="true"]{display:none}
  .ticker li{white-space:normal;text-align:center;padding:0 14px;line-height:1.6}
  .ticker li::after{display:none}
  .ticker::before,.ticker::after{display:none}
}

/* ---------- depth (v25): one slow wave edge in and out of the clay, and elements that straddle section edges,
   as on the Bravest Path site. Used at three moments on the home page only, so each one reads as designed. ---------- */
.edge{line-height:0;position:relative;z-index:1}
.edge svg{display:block;width:100%;height:clamp(34px,4.5vw,64px)}
.edge-down{background:var(--paper);margin-top:-1px}
.edge-down path{fill:#2F221D}
.edge-up{background:var(--paper-2);margin-bottom:-1px}
.edge-up path{fill:#45302A}
/* how it works: the sand stops part-way down the phones, so they sit across the edge */
.how-overlap{background:linear-gradient(to bottom,var(--paper-2) 0,var(--paper-2) calc(100% - var(--cut,480px)),var(--paper) calc(100% - var(--cut,480px)))}
.how-overlap .step .shot img{filter:drop-shadow(0 26px 34px rgba(46,36,32,.16))}
/* price: the clay band carries the offer, and the card with the details hangs over its lower edge */
.price-wrap{background:var(--paper)}
.price-wrap .price{padding-bottom:clamp(150px,16vw,200px);background:linear-gradient(180deg,#45302A 0%,#3A2A24 55%,#2F221D 100%)}
.price-card{position:relative;z-index:2;max-width:760px;margin:clamp(-170px,-14vw,-130px) auto 0;background:var(--card);border-radius:8px;padding:clamp(28px,4vw,44px);text-align:center;box-shadow:0 40px 70px -40px rgba(46,36,32,.45),0 2px 6px rgba(46,36,32,.06)}
.price-card ul{list-style:none;margin:0 auto 30px;padding:0;max-width:620px;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;text-align:left}
.price-card li{padding:11px 0 11px 26px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2);position:relative}
.price-card li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:1.6px solid var(--sage-deep);border-bottom:1.6px solid var(--sage-deep);transform:rotate(-45deg)}
.price-card .fine{font-size:13px;color:var(--muted);margin:18px 0 0}
.price-card .fine a{color:var(--clay-text)}
#about.band{padding-top:clamp(64px,8vw,104px)}
@media (max-width:900px){
  .how-overlap{background:var(--paper-2)}
  .price-card ul{grid-template-columns:1fr}
}

.routines-foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px;text-align:center}
.routines-foot .small{margin:0;max-width:560px}

/* the free sample sits on soft sage, entered by a gentle wave, so it reads as its own moment after the steps */
.edge-sage{background:var(--paper);margin-bottom:-1px}
.edge-sage path{fill:#E2E7D9}
.try-band{background:#E2E7D9;padding-top:clamp(40px,5vw,64px)}
.try-band .eyebrow{color:var(--sage-deep)}
.how-overlap{padding-bottom:clamp(40px,5vw,64px)}