/* Switchbacks redesign (Oct 20 2026), loaded last on every page.
   Direction: full-bleed painted hero, calm editorial type, glass cards, gold accents in dark mode. */

:root{--rd-gold:#E9C784;--rd-gold-ink:#2A2414;--rd-glass:rgba(255,253,247,.78);--rd-glass-line:rgba(39,59,64,.12)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--rd-glass:rgba(22,40,49,.62);--rd-glass-line:rgba(233,226,208,.16)}}
:root[data-theme="dark"]{--rd-glass:rgba(22,40,49,.62);--rd-glass-line:rgba(233,226,208,.16)}

/* Dark mode: primary buttons are warm gold, as in the night scenes */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .button:not(.secondary){background:var(--rd-gold)!important;border-color:var(--rd-gold)!important;color:var(--rd-gold-ink)!important}}
:root[data-theme="dark"] .button:not(.secondary){background:var(--rd-gold)!important;border-color:var(--rd-gold)!important;color:var(--rd-gold-ink)!important}

/* ---------- Homepage hero: the painting is the page ---------- */
.hero.hero-v2{min-height:min(760px,92vh);display:flex;align-items:center}
.hero.hero-v2 .hero-scene{position:absolute;inset:0;z-index:-1}
.hero.hero-v2 .hero-scene>svg{display:none}
.hero.hero-v2 .hero-scene .scene{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important}
.hero.hero-v2 .hero-scene .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 58%}
.hero.hero-v2 .hero-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 94%,transparent) 36%,color-mix(in srgb,var(--paper) 55%,transparent) 50%,transparent 64%),linear-gradient(0deg,var(--paper) 0%,transparent 14%)}
.hero.hero-v2 .shell{display:block!important;min-height:0!important;width:100%;padding-top:70px;padding-bottom:90px}
.hero.hero-v2 .hero-copy{max-width:560px}
.hero.hero-v2 h1{font-size:clamp(44px,5.6vw,78px)!important;line-height:1.04!important;letter-spacing:-.025em;margin:14px 0 22px}
.hero.hero-v2 h1 em{font-style:normal;color:inherit}
.hero.hero-v2 .lede{max-width:42ch;font-size:17px;line-height:1.7}
.hero.hero-v2 .fine{display:none}
@media(max-width:760px){
  .hero.hero-v2{min-height:0;display:block}
  .hero.hero-v2 .hero-scene{position:relative;inset:auto;height:300px;z-index:0}
  .hero.hero-v2 .hero-scene::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 45%)}
  .hero.hero-v2 .shell{padding-top:0;padding-bottom:40px;margin-top:-56px;position:relative;z-index:1}
  .hero.hero-v2 h1{font-size:40px!important}
}

/* ---------- "A look inside": the app screens, now in their own section ---------- */
.look-inside{padding:90px 0}
.look-inside .look-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.look-inside .lede{max-width:44ch;margin:16px 0 22px}
.look-inside .hero-devices{position:relative;min-height:600px}
.look-inside .hero-sidenote{display:none}
@media(max-width:1100px){.look-inside .look-grid{grid-template-columns:1fr}.look-inside .hero-devices{min-height:560px}}
@media(max-width:760px){.look-inside{padding:56px 0}.look-inside .hero-devices{min-height:470px}}

/* ---------- The Path: six numbered areas ---------- */
.areas-grid.areas-numbered{counter-reset:area}
.areas-grid.areas-numbered .area-detail{counter-increment:area;background:var(--rd-glass)!important;border:1px solid var(--rd-glass-line)!important;border-radius:22px!important;box-shadow:0 14px 34px rgba(30,42,44,.06)}
.areas-grid.areas-numbered .area-detail h3::before{content:counter(area) ". ";color:var(--gold)}
.page-hero.path h1{letter-spacing:-.02em}

/* ---------- Cards across the site: softer, glassier ---------- */
.benefit,.process-card,.cairn-panel,.story-teaser{border-radius:24px!important}

/* The Path page heading sits on the painting like the hero: bigger, calmer */
.page-hero.path + .section .section-head h2{font-size:clamp(34px,3.6vw,52px)!important;line-height:1.08!important;letter-spacing:-.02em;max-width:16ch}
.page-hero.path + .section .section-head{min-height:220px!important;align-items:flex-end}
@media(max-width:760px){.page-hero.path + .section .section-head{min-height:0!important}.page-hero.path + .section .section-head h2{font-size:32px!important}}
.page-hero.path + .section .section-head h2{max-width:20ch}
@media(max-width:760px){.page-hero.path + .section .section-head::before{opacity:.38!important}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero.hero-v2 .hero-scene img{filter:brightness(1.2) saturate(1.08)}}
:root[data-theme="dark"] .hero.hero-v2 .hero-scene img{filter:brightness(1.2) saturate(1.08)}

/* v3 (Oct 20): each area's illustration sits in a round tinted badge, like the app's Path */
.areas-numbered .area-detail>svg.sb-illustration{width:68px!important;height:68px!important;padding:12px;border-radius:50%;box-sizing:border-box;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),transparent 62%),var(--v3-badge,#E8DCC8)}
.areas-numbered #heart{--v3-badge:#EBD3CB}.areas-numbered #kids{--v3-badge:#D9E1D3}.areas-numbered #legal{--v3-badge:#EBDCC3}
.areas-numbered #mind{--v3-badge:#D5DFE5}.areas-numbered #body{--v3-badge:#DFD8E8}.areas-numbered #spirit{--v3-badge:#E7DCC2}
@media(prefers-color-scheme:dark){
 .areas-numbered #heart{--v3-badge:#4A3A3C}.areas-numbered #kids{--v3-badge:#33473F}.areas-numbered #legal{--v3-badge:#4A4236}
 .areas-numbered #mind{--v3-badge:#2F4553}.areas-numbered #body{--v3-badge:#3D3A51}.areas-numbered #spirit{--v3-badge:#4A4434}
}
@media(max-width:700px){
 .areas-numbered{gap:12px!important}
 .areas-numbered .area-detail{display:grid!important;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;padding:18px!important}
 .areas-numbered .area-detail>svg.sb-illustration{grid-row:1/span 3;width:64px!important;height:64px!important;margin:0!important}
 .areas-numbered .area-detail h3{font-size:22px!important;margin:4px 0 2px!important}
 .areas-numbered .area-detail p{font-size:14.5px!important;line-height:1.55!important;margin:0!important}
 .areas-numbered .area-detail .text-link{margin-top:8px!important}
}