/* This sheet is loaded only at phone widths. Desktop styles remain authoritative. */
:root { scroll-padding-top: 106px; }
body { -webkit-text-size-adjust: 100%; }
.section-wrap { padding-inline: clamp(20px, 5.5vw, 32px); }
section[id], #story { scroll-margin-top: 106px; }
.site-header {
  top: max(8px, env(safe-area-inset-top)); margin: 10px 10px 0;
  border: 1px solid #fffdf9bb; border-radius: 24px;
  background: linear-gradient(125deg, #fffdf990, #e9dfcf45), #f4f0e9d9;
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #bca98a26, 0 6px 24px #493a2410;
}
.site-header.is-scrolled { border-color: #fffdf9b3; background: linear-gradient(125deg, #fffdf98c, #e9dfcf55), #f4f0e9d6; }
.header-inner { height: 68px; padding: 0 12px; gap: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; }
.framework-wordmark { min-width: 0; font-size: 12.5px; line-height: 1.35; gap: 7px; margin: 0; }
.framework-wordmark img { width: 28px; height: 28px; flex-shrink: 0; }
.framework-wordmark > span { min-width: 0; max-width: 146px; }
.framework-wordmark sup { font-size: 7px; }
.header-inner .framework-wordmark small, .client-link small {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.client-link { font-size: 11px; line-height: 1.4; display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 3px; }
.client-link > span { font-size: 16px; }
.menu-toggle { order: 3; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: linear-gradient(135deg, #fffdf9bd, #e7dcca73); border: 1px solid #fffdf9d9; box-shadow: inset 0 1px 0 #fff, 0 2px 8px #493a240a; }
.menu-toggle span { width: 20px; }
.site-header nav {
  display: flex; top: calc(100% + 8px); left: 0; right: 0;
  padding: 14px; border: 1px solid #fffdf9d9; border-radius: 24px;
  background: linear-gradient(135deg, #fffdf982, #e8dccb45), #f4f0e9f0;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 #fff, 0 16px 40px #493a2421;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.985);
  transform-origin: top right; transition: opacity .2s, transform .25s cubic-bezier(.22,1,.36,1), visibility .2s;
}
.site-header nav[data-open=true] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.site-header nav a { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 15px; border-radius: 14px; }
.site-header nav a[aria-current] { background: #e4d8c882; }
.site-header nav a:after { display: none; }
.reading-track { inset: auto 22px -1px; height: 2px; border-radius: 2px; }
.hero { padding-top: 38px; gap: 27px; padding-bottom: 34px; }
.hero h1 { font-size: clamp(33px, 8.7vw, 58px); line-height: 1.16; letter-spacing: -.055em; }
.hero h1 > span { white-space: normal; font-size: .78em; }
.hero .eyebrow, .eyebrow { font-size: 10px; letter-spacing: .12em; }
.hero .eyebrow { gap: 9px; margin-bottom: 21px; }
.hero-intro { font-size: 20px; line-height: 1.6; }
.body-copy, .hero .body-copy, .why-columns p, .product-tour .split-heading > .body-copy,
.tour-intro > .body-copy, .role-copy > p:not(.eyebrow), .getting-started .body-copy,
.onboarding-steps p, .about-copy .body-copy, .faq .body-copy { font-size: 15px; line-height: 1.8; }
.hero-buttons { gap: 12px 20px; margin-top: 24px; }
.button { min-height: 50px; font-size: 13px; border-radius: 16px; padding: 14px 19px; }
.hero-buttons .inline-link, .inline-link, .getting-started .inline-link, .about-copy .inline-link { font-size: 13px; min-height: 48px; }
.hero-note { font-size: 11px; line-height: 1.7; }
.hero-product { border-radius: 22px; border-color: #fffdf9d1; box-shadow: inset 0 1px 0 #fff, 0 14px 35px #493a241a; }
.product-topline { padding: 14px; font-size: 11px; gap: 7px; }
.hero-product .screen-open img, .tour-screen .screen-open, .tour-screen .screen-open img {
  height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: top;
}
.hero-product figcaption { padding: 12px 14px; font-size: 10px; line-height: 1.6; flex-wrap: wrap; gap: 4px 12px; }
.screen-open { position: relative; }
.hero-product .screen-open:after, .tour-screen .screen-open:after {
  content: 'Tap to explore ↗'; position: absolute; right: 10px; bottom: 10px;
  padding: 8px 11px; font-size: 11px; font-weight: 650; border-radius: 99px;
  background: #fffdf9ee; color: var(--ink); border: 1px solid #fff; box-shadow: 0 2px 10px #493a241f;
  pointer-events: none;
}
.hero-caption { align-items: center; gap: 12px; }
.hero-caption p, .hero-caption a { font-size: 11px; line-height: 1.6; }
.hero-caption a { min-height: 44px; gap: 7px; }
.principle-strip p { font-size: 13px; line-height: 1.7; }
.principle-strip div { font-size: 11px; line-height: 1.7; gap: 6px 12px; }
.section-number { font-size: 11px; }
.why, .product-tour, .getting-started { padding-block: 48px; }
.why-columns { gap: 25px; }
.why-columns h3 { font-size: 23px; max-width: none; }
.complement-note p { font-size: 13px; line-height: 1.8; }
.story-shell, .tour-screen { border: 1px solid #fffdf9dd; border-radius: 23px; box-shadow: inset 0 1px 0 #fff, 0 12px 30px #493a2414; }
.story-topline { padding: 17px; gap: 8px; background: linear-gradient(125deg, #fffdf9b3, #e8dcca4d); }
.demo-label { font-size: 9px; line-height: 1.6; letter-spacing: .06em; }
.story-brand { font-size: 9px; letter-spacing: .06em; }
.story-tabs { background: #eee6dbb3; }
.story-tabs button { padding: 14px 9px; min-height: 76px; gap: 5px; }
.story-tabs strong { font-size: 11px; }
.story-tabs button > span { font-size: 10px; }
.story-tabs button[aria-selected=true] { background: linear-gradient(135deg, #fffdf9e6, #e3d5c2b3); box-shadow: inset 0 1px 0 #fff; }
.mobile-story-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px 0; }
.mobile-story-progress > span { font-size: 11px; color: var(--muted); }
.mobile-story-progress > div { display: flex; align-items: center; gap: 5px; }
.mobile-story-progress i { width: 6px; height: 6px; border-radius: 99px; background: #c9bba9; transition: width .25s, background .25s; }
.mobile-story-progress i.is-current { width: 22px; background: #8b7253; }
.story-panel { padding: 24px 18px; min-height: 0; gap: 22px; touch-action: pan-y pinch-zoom; }
.story-explanation h3 { font-size: 28px; }
.story-explanation .eyebrow, .role-copy .eyebrow { font-size: 10px; }
.story-explanation > p:not(.eyebrow) { font-size: 14px; line-height: 1.8; }
.story-explanation .story-role { font-size: 12px!important; line-height: 1.75; }
.story-scene { min-height: 0; padding: 19px; border-radius: 17px; background: linear-gradient(145deg, #fffdf9, #f0e9df); }
.scene-heading { align-items: flex-start; }
.scene-heading strong { font-size: 13px; line-height: 1.5; }
.scene-heading small { font-size: 10px; line-height: 1.6; }
.avatar { width: 32px; height: 32px; font-size: 12px; }
.status-badge { font-size: 10px; margin-left: 0; padding: 5px 8px; }
.sample-totals span, .sample-field > span { font-size: 11px; }
.sample-field p { font-size: 14px; line-height: 1.8; }
.sample-quote { font-size: 19px!important; }
.scene-action-title { font-size: 19px; }
.action-meta, .outcome-marker { font-size: 12px; line-height: 1.7; }
.story-controls { padding: 16px; gap: 12px; flex-wrap: wrap; }
.story-controls > span { font-size: 11px; max-width: none; line-height: 1.6; }
.story-controls > div { margin-left: auto; gap: 8px; }
.round-control { width: 46px; height: 46px; }
.story-next { min-height: 46px; padding: 12px 14px; font-size: 12px; border-radius: 15px; }
.story-disclosure { padding: 16px 18px; font-size: 11px; line-height: 1.8; }
.tour-intro { margin-top: 48px; }
.role-switch { display: flex; width: 100%; max-width: 350px; gap: 4px; padding: 5px; margin-bottom: 24px; }
.role-switch button { width: calc(50% - 2px); min-height: 46px; font-size: 14px; }
.role-switch-surface { width: calc(50% - 7px); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.role-switch[data-selected=associate] .role-switch-surface { transform: translateX(calc(100% + 4px)); }
.role-copy { min-height: 0; }
.role-copy h3 { font-size: 28px; }
.role-copy li { font-size: 14px; line-height: 1.8; }
.role-copy .role-boundary { font-size: 12px!important; }
.tour-toolbar { padding: 10px 12px; gap: 7px; background: linear-gradient(135deg, #fffdf9c2, #e8dcca4d); }
.view-options { gap: 2px; }
.view-options button { min-height: 44px; font-size: 12px; padding: 9px 10px; border-radius: 12px; }
.text-button { min-height: 44px; font-size: 12px; }
.tour-caption { min-height: 0; padding: 17px; font-size: 13px; line-height: 1.8; }
.image-disclosure { font-size: 11px; line-height: 1.8; }
.privacy-note { border-radius: 18px; padding: 19px 17px; }
.privacy-note p { font-size: 12px; line-height: 1.8; }
.plan-card { padding: 25px 22px; border-radius: 23px; border-color: #fffdf9cc; background: linear-gradient(135deg, #fffdf9d9, #ede4d6c2); box-shadow: inset 0 1px 0 #fff, 0 12px 30px #493a240d; }
.plan-topline { flex-wrap: wrap; gap: 8px; }
.plan-topline .eyebrow { font-size: 10px; }
.plan-topline > span { font-size: 9px; }
.plan-card .plan-intro, .plan-card li { font-size: 14px; line-height: 1.8; }
.plan-scope > strong, .plan-footer strong { font-size: 13px; line-height: 1.7; }
.plan-scope > p, .plan-footer p, .plan-footer p > span { font-size: 12px; line-height: 1.8; }
.onboarding-intro { scroll-margin-top: 106px; }
.intro-contact { font-size: 14px; }
.onboarding-steps h3 { font-size: 21px; }
.onboarding-steps > li > span { font-size: 12px; }
.subscription-details > div { gap: 22px; }
.subscription-details > div > p { font-size: 13px; line-height: 1.8; }
.subscription-details strong { font-size: 14px; }
.terms-note { font-size: 12px; line-height: 1.8; }
.brief-promo > div > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
.brief-preview { padding: 23px; border-radius: 20px; }
.brief-preview > span, .brief-preview p, .brief-preview dt { font-size: 11px; line-height: 1.8; }
.about-copy .large-copy { font-size: 21px; }
.about-symbol span { font-size: 10px; }
summary { font-size: 15px; line-height: 1.7; padding-block: 22px; }
details p { font-size: 14px; line-height: 1.8; }
.access-band { margin-inline: 10px; padding: 32px 23px; border-radius: 25px; }
.access-band p:last-child { font-size: 14px; line-height: 1.7; }
.access-band .eyebrow { font-size: 10px; }
.access-band .button { width: 100%; font-size: 13px; }
.site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.footer-links { font-size: 12px; gap: 6px 20px; }
.site-footer > p { font-size: 11px; line-height: 1.8; }
.site-footer .wordmark small { font-size: 7px; }
#screen-dialog { width: calc(100% - 20px); max-width: 720px; border-radius: 23px; border-color: #fffdf9d9; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
#screen-dialog[open] { display: flex; flex-direction: column; }
#screen-dialog::backdrop { background: #28231bbd; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dialog-bar { flex-shrink: 0; position: static; padding: 9px 16px; background: linear-gradient(135deg, #fffdf9e6, #ece2d3e6); }
.dialog-bar h2 { font-size: 14px; line-height: 1.5; }
.dialog-close { font-size: 13px; min-height: 48px; min-width: 72px; padding: 10px 0 10px 12px; }
.mobile-image-tools { flex-shrink: 0; padding: 9px 16px 12px; border-bottom: 1px solid var(--line); }
.mobile-image-tools > div { display: flex; gap: 6px; }
.mobile-image-tools button { min-height: 44px; padding: 10px 15px; border-radius: 99px; background: #e8dfd1; font-size: 12px; }
.mobile-image-tools button[aria-pressed=true] { background: #39332b; color: #fffdf9; box-shadow: inset 0 1px 0 #ffffff3d; }
.mobile-image-tools p { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
#screen-dialog .dialog-image-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#screen-dialog .dialog-image-wrap img { width: 100%; min-width: 0; max-width: none; height: auto; }
#screen-dialog.is-detail .dialog-image-wrap img { width: max(100%, 1000px); }
.dialog-disclosure { flex-shrink: 0; font-size: 10px; line-height: 1.7; margin: 12px 15px max(12px, env(safe-area-inset-bottom)); }
.button, .menu-toggle, .role-switch button, .view-options button, .round-control, .story-next, .mobile-image-tools button { -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.22,1,.36,1), background .2s, box-shadow .2s; }
.button:active, .menu-toggle:active, .round-control:active, .story-next:active, .mobile-image-tools button:active { transform: scale(.97); box-shadow: inset 0 1px 5px #493a241a; }
.motion-ready .reveal { transition-duration: .4s; transition-delay: 0s; transform: translateY(8px); }
.motion-ready .reveal.is-visible { transform: none; }
.entrance-opening .entrance-door-left, .entrance-opening .entrance-door-right { animation-duration: 650ms; animation-delay: 70ms; }
.entrance-opening .boutique-entrance { animation-duration: 800ms; }
.entrance-opening .hero { animation-duration: 180ms; animation-delay: 280ms; }
[hidden] { display: none!important; }
@media (max-width: 360px) {
  .header-inner { padding-inline: 9px; gap: 5px; }
  .framework-wordmark { font-size: 11.5px; gap: 6px; }
  .framework-wordmark img { width: 25px; height: 25px; }
  .client-link { font-size: 10px; }
  .story-topline { flex-wrap: wrap; gap: 7px 12px; }
  .story-tabs button { padding-inline: 7px; }
  .story-tabs strong { font-size: 10px; }
  .story-controls > div { width: 100%; justify-content: space-between; }
  .subscription-details > div { grid-template-columns: 1fr; }
  .tour-toolbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none!important; transition: none!important; }
  .button:active, .menu-toggle:active, .round-control:active, .story-next:active, .mobile-image-tools button:active { transform: none; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header.is-scrolled, .site-header nav, .menu-toggle, .role-switch, .story-shell, .plan-card { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #screen-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header.is-scrolled, .site-header nav, .role-switch { background: var(--paper); }
}