:root { --motion-ease: cubic-bezier(.22,1,.36,1); --motion-fast: 220ms; --motion-enter: 700ms; }
/* Navigation keeps its place and shows where you are in the page. */
.site-header { background: #f5f3eff2; backdrop-filter: blur(14px); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 5px 24px #11111105; }
.reading-progress { position: absolute; bottom: -1px; inset-inline: 0; height: 2px; overflow: hidden; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--orange); transform: translateX(-100%); }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ''; position: absolute; height: 2px; bottom: 1px; inset-inline: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion-ease); }
.desktop-nav a[aria-current="location"]::after { transform: scaleX(1); }
.button, .text-link, .theme-controls button { transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), box-shadow .3s, transform .3s var(--motion-ease); }
.button > span, .text-link > span, .back-to-top > span { display: inline-block; transition: transform .3s var(--motion-ease); }
@media (hover: hover) {
  .button:hover > span { transform: translate(3px,-3px); }
  .text-link:hover > span { transform: translateX(4px); }
  .button:hover { box-shadow: 0 5px 13px #11111112; }
  .back-to-top:hover > span { transform: translateY(-3px); }
  .theme-controls button:not(:disabled):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
.button:active, .theme-controls button:not(:disabled):active { transform: scale(.98); }
/* A fixed line box lets the headline roll without shifting the page. */
.word-window { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .06em .12em; margin-block: -.06em -.12em; max-width: 100%; }
.changing-word { display: block; white-space: nowrap; transition: none; }
.hero { padding-top: 64px; }
.hero-copy { color: #5a574f; }
.film-preview { perspective: 1200px; }
.film-cover { transform: scale(.96); transform-origin: center; border-radius: 10px; box-shadow: 0 20px 55px -35px #1114; }
.play-circle { box-shadow: 0 12px 26px #1112; transition: background .25s, box-shadow .3s; }
.play-circle::after { content: ''; position: absolute; inset: -9px; border: 1px solid #ff3b1f70; border-radius: 50%; opacity: 0; }
.film-is-visible .play-circle::after { animation: play-breathe 5.5s ease-out infinite; }
@keyframes play-breathe { 0%, 20%, 100% { opacity: 0; transform: scale(.91); } 30% { opacity: .5; transform: scale(1); } 65% { opacity: 0; transform: scale(1.25); } }
.film-cover:focus-visible { outline-offset: 7px; }
/* Reveal content once, and never hide a keyboard target. */
.motion-reveal { transition: opacity var(--motion-enter) var(--motion-ease), transform var(--motion-enter) var(--motion-ease); }
.motion-reveal.motion-pending { opacity: 0; transform: translateY(20px); }
.motion-reveal:focus-within { opacity: 1; transform: none; }
/* Real colour choices are part of the product story. */
.looks { padding-bottom: 39px; }
.theme-stage { position: relative; overflow: hidden; border-radius: 8px; padding: 25px 24px; transition: background .65s, border-color .4s; }
.phone-frame { position: relative; width: 218px; max-width: 100%; aspect-ratio: 780 / 1688; overflow: hidden; border: 5px solid #262520; border-radius: 28px; background: #171610; box-shadow: 0 18px 24px -15px #1117; transition: transform .55s var(--motion-ease), box-shadow .55s; }
.theme-stage .phone-frame img { width: 100%; height: 100%; max-width: none; aspect-ratio: 780 / 1688; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.phone-frame .theme-screen-next { position: absolute; inset: 0; }
.theme-card.is-colour-changing .phone-frame { box-shadow: 0 20px 30px -13px #1118; }
@media (hover: hover) { .theme-card:hover .phone-frame { transform: translateY(-4px); box-shadow: 0 24px 27px -17px #1118; } }
.palette-picker { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 8px; padding-top: 9px; }
.palette-options { display: flex; align-items: center; gap: 1px; }
.palette-swatch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; position: relative; }
.palette-swatch > span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--swatch); transition: transform .3s var(--motion-ease); }
.palette-swatch::after { content: ''; position: absolute; inset: 8px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(.7); transition: transform .3s var(--motion-ease), opacity .25s; }
.palette-swatch[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.palette-swatch:hover > span { transform: scale(1.12); }
.palette-name { color: #57534b; font: 11px var(--mono); }
.palette-indigo { --swatch: #4f46e5; }.palette-emerald { --swatch: #0e9f6e; }.palette-graphite { --swatch: #3f4159; }
.palette-ember { --swatch: #ff3b1f; }.palette-ultramarine { --swatch: #2f3be0; }.palette-ink { --swatch: #111; }
.palette-garden { --swatch: #4a6b4f; }.palette-plum { --swatch: #6b4a63; }.palette-slate { --swatch: #4a5a6b; }
.theme-card[data-palette="emerald"] .theme-stage { background: #dbe4dd; }
.theme-card[data-palette="graphite"] .theme-stage { background: #dcdddf; }
.theme-card[data-palette="ultramarine"] .theme-stage { background: #dcdeeb; }
.theme-card[data-palette="ink"] .theme-stage { background: #dcd9d3; }
.theme-card[data-palette="plum"] .theme-stage { background: #e7dfe5; }
.theme-card[data-palette="slate"] .theme-stage { background: #dce1e5; }
.theme-bottom { margin-top: 15px; }
/* Supporting sections settle into place and respond to intent. */
.principle-icon { color: var(--accent-text); }
.principles { gap: 60px; }
.principles article { padding-block: 8px; }
.price-card { transition: transform .35s var(--motion-ease), box-shadow .35s, border-color .35s; position: relative; }
.price-plus { background: #fffdf8; }
.price-plus .plan-label { border-color: #e6baa8; color: #a8331d; background: #fff4ea; }
@media (hover: hover) { .price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -25px #1114; } }
.price-card:focus-within { border-color: #878075; }
.price-plus:focus-within { border-color: var(--orange); }
.faq details { overflow: hidden; }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--accent-text); }
.faq summary span { transition: transform .25s var(--motion-ease); }
.faq details p { color: #5a574f; }
.closing { position: relative; overflow: hidden; }
.closing h2 span { position: relative; display: inline-block; padding-bottom: .14em; }
.closing h2 span::after { content: ''; position: absolute; left: 1px; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--motion-ease) .25s; }
.closing.is-in-view h2 span::after { transform: scaleX(1); }
.footer-tools { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.page-motion-toggle, .back-to-top { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; font-size: 11px; color: var(--muted); border: none; background: none; padding: 0; }
.page-motion-toggle[hidden] { display: none; }
.page-motion-toggle svg { width: 15px; height: 15px; }
[data-motion-toggle] .motion-play-icon, [data-motion-toggle].is-paused .motion-pause-icon { display: none; }
[data-motion-toggle].is-paused .motion-play-icon { display: block; }
.page-motion-toggle:hover, .back-to-top:hover { color: var(--ink); }
.mobile-menu[open] nav { animation: menu-enter .3s var(--motion-ease) both; transform-origin: top; }
@keyframes menu-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
dialog[open] { animation: dialog-enter .3s var(--motion-ease); }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after, .motion-suspended .rhythm-timeline *, .motion-suspended .rhythm-timeline *::before, .motion-suspended .rhythm-timeline *::after, .motion-suspended .play-circle::after { animation-play-state: paused !important; }
.motion-paused dialog[open], .motion-paused .mobile-menu[open] nav { animation: none !important; }
.motion-paused .motion-reveal { transition: none; opacity: 1; transform: none; }
.motion-paused .film-cover { transform: none !important; }
@media (max-width:950px) {
  .theme-stage { padding: 20px 17px; }
  .phone-frame { border-radius: 23px; border-width: 4px; }
  .palette-picker { flex-wrap: wrap; gap: 0 6px; }
  .palette-options { gap: 0; }
  .palette-swatch { width: 44px; height: 44px; }
  .palette-name { font-size: 10px; }
  .principles { gap: 32px; }
}
@media (max-width:700px) {
  .hero { padding-top: 43px; }
  .film-cover { border-radius: 7px; transform: none !important; }
  .play-circle::after { inset: -6px; }
  .theme-track { padding-top: 3px; padding-bottom: 4px; }
  .theme-stage { padding: 23px 21px; }
  .phone-frame { width: 250px; border-radius: 27px; border-width: 5px; }
  .palette-picker { flex-wrap: nowrap; padding-top: 8px; }
  .palette-swatch { width: 44px; }
  .palette-name { font-size: 11px; }
  .theme-bottom p { max-width: 185px; }
  .principles { gap: 20px; }
  .footer-tools { justify-content: space-between; gap: 20px; margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 7px; }
  .site-footer small { margin-top: 15px; }
  .motion-reveal.motion-pending { transform: translateY(12px); }
}
@media (max-width:360px) { .theme-bottom p { max-width: 139px; } .phone-frame { border-radius: 24px; } }
@media (prefers-reduced-motion:reduce) {
  .film-cover, .motion-reveal.motion-pending { transform: none; opacity: 1; }
  .closing h2 span::after { transform: scaleX(1); }
  [data-motion-toggle] { display: none; }
}