:root {
  color-scheme: light;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 450;
  --background: #f5f4ef;
  --text: #202b26;
  --muted: #606f5c;
  --line: #dcded5;
  --accent: #246b52;
  --surface: #fffefa;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; background: var(--background); }
body { margin: 0; color: var(--text); background: linear-gradient(180deg, #faf9f5 0, #f5f4ef 1000px); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }
button:focus-visible, a:focus-visible, .studio:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
::selection { background: #c7ddc9; color: #203d2a; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-shell { max-width: 1550px; margin: 0 auto; padding: 0 5.4%; }
.page-enter-pending .page-shell { opacity: 0; }
.page-entering .page-shell { animation: page-arrive 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.page-enter-pending [data-page-reveal] { opacity: 0; transform: translateY(24px); }
.page-entering [data-page-reveal] { animation: content-arrive 1.15s cubic-bezier(.25, .1, .25, 1) var(--entry-delay, 0ms) both; }
@keyframes page-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes content-arrive {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.header { height: 100px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 34px; letter-spacing: -2.5px; font-weight: 750; display: inline-flex; align-items: center; }
.brand-mark { width: 31px; height: 38px; display: grid; place-items: center; margin-right: 10px; border: 1px solid #94a99a; background: #e9eee5; border-radius: 9px; }
.brand-mark svg { width: 24px; height: 24px; color: var(--accent); }
.header-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 650; color: #52604f; }
.header-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.header-nav [aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.skip-link { position: fixed; left: 20px; top: 15px; z-index: 20; padding: 12px 18px; border-radius: 9px; color: #fff; background: var(--accent); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.showcase { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 35px; padding: 52px 0 45px; }
.intro { padding: 24px 0 0; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #526b4f; font-size: 12px; line-height: 1.6; font-weight: 700; margin: 0 0 24px; }
.eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
h1 { font-size: clamp(46px, 4.6vw, 72px); line-height: 1.08; font-weight: 800; letter-spacing: -.045em; margin: 0; }
h1 > span { display: block; color: #607d51; }
.intro-copy { margin: 23px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.how-link { display: flex; align-items: center; gap: 12px; width: fit-content; color: var(--accent); font-size: 13px; font-weight: 750; margin-top: 18px; }
.how-link svg { width: 14px; height: 14px; }
.how-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.configuration { max-width: 430px; }
.control-label { font-size: 14px; line-height: 1.5; color: #2d3e30; font-weight: 750; }
.platforms { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 27px; }
.platform { border: 1px solid #d8ddd2; background: #fffefa; border-radius: 11px; color: #52604f; padding: 11px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 650; min-height: 46px; transition: border-color .2s; box-shadow: 0 2px 2px #263c2303; }
.platform svg { width: 16px; height: 16px; }
.platform:hover { border-color: #829c84; }
.platform[aria-pressed="true"] { border-color: #819e84; background: #e6ecdf; color: #263d2c; box-shadow: inset 0 0 0 1px #819e8422; }
.platform[data-platform="instagram"] svg { color: #b94a7c; }
.finish-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 360px; }
.finishes { display: flex; align-items: center; gap: 12px; margin-top: 15px; min-height: 46px; }
.finish { padding: 4px; background: transparent; width: 46px; height: 46px; border: 1px solid transparent; border-radius: 50%; position: relative; display: grid; place-items: center; transition: border-color .2s; }
.finish::before { content: ""; display: block; width: 34px; height: 34px; border: 1px solid #24392829; border-radius: 50%; background: var(--swatch); box-shadow: 0 2px 3px #263c2314; }
.finish[aria-pressed="true"] { border-color: #45694c; }
.finish:hover { border-color: #a1b39a; }
.finish svg { position: absolute; width: 13px; height: 13px; stroke-width: 2; color: var(--check-color, #fff); }
.product { min-width: 0; align-self: center; position: relative; padding: 20px 22px 23px; border: 1px solid #e1e4da; border-radius: 25px; background: #edeee7; box-shadow: inset 0 1px 0 #fff, 0 16px 40px #4a584a05; }
.studio-heading { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.studio-heading > span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; line-height: 1.5; color: #52694d; }
.studio-heading i { width: 4px; height: 4px; border-radius: 50%; background: #67845d; }
.studio { --card-rotation-x: 0deg; --card-rotation-y: 0deg; height: 465px; position: relative; isolation: isolate; touch-action: pan-y; overflow: clip; }
.studio::before { content: ""; position: absolute; inset: 12% 0 9%; background-image: radial-gradient(#a6b29e60 .7px, transparent .7px); background-size: 19px 19px; pointer-events: none; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
.floor-ring { position: absolute; left: 50%; top: 86%; border: 1px solid #a7b39d36; border-radius: 50%; width: 90%; height: 72px; transform: translate(-50%, -50%); pointer-events: none; }
.ring-two { width: 67%; height: 48px; opacity: .65; }
.card-shadow { position: absolute; left: 50%; top: 81%; width: 59%; height: 32px; background: #68735f35; filter: blur(13px); border-radius: 50%; transform: translateX(-50%); opacity: 1; pointer-events: none; }
.deck { position: absolute; inset: 0; perspective: 1500px; transform-style: preserve-3d; }
.card-slot { --card-size: clamp(270px, 28vw, 395px); --card-radius: 30px; position: absolute; width: var(--card-size); aspect-ratio: 1; left: 50%; top: 47%; padding: 0; border: 0; border-radius: var(--card-radius); background: transparent; color: inherit; appearance: none; cursor: pointer; transform-style: preserve-3d; opacity: 1; transform: translate(-50%, -50%) translateZ(38px); -webkit-user-select: none; user-select: none; }
.card-slot.is-active { z-index: 4; visibility: visible; opacity: 1; transform: translate(-50%, -50%) translateZ(38px); }
.card-slot.is-flipped { touch-action: manipulation; }
.card-idle { position: absolute; inset: 0; transform-style: preserve-3d; animation: card-idle-tilt 7.5s ease-in-out infinite; }
.is-exploring .card-idle, .is-switching .card-idle, .is-turning .card-idle, .is-peeling .card-idle { animation-play-state: paused; }
.card-slot.is-flipped:hover .card-idle { animation-play-state: paused; }
@keyframes card-idle-tilt {
  0%, 100% { transform: rotateX(3.5deg) rotateY(-10.5deg); }
  33% { transform: rotateX(-6deg) rotateY(4.5deg); }
  66% { transform: rotateX(5.5deg) rotateY(10.5deg); }
}
.card-motion { position: absolute; inset: 0; transform-style: preserve-3d; transform: scale(1); }
.is-morphing .card-motion { animation: material-settle .64s cubic-bezier(.4, 0, .2, 1); }
@keyframes material-settle {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(.985); }
}
.card-body { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s ease; }
.is-active .card-body { transform: rotateX(var(--card-rotation-x)) rotateY(var(--card-rotation-y)); }
.is-exploring .is-active .card-body { transition: transform .12s ease-out; }
.card-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.card-slot.is-flipped .card-flip { transform: rotateY(180deg); }
.card-back { position: absolute; inset: 0; padding: 2px; border-radius: var(--card-radius); overflow: hidden; background: #d6d3c9; transform: translateZ(-5px) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 0 0 1px #c2c0b4, 0 13px 23px #22262b22, 0 3px 5px #22262b12; pointer-events: none; }
.card-slot.is-flipped .card-back { pointer-events: auto; cursor: pointer; }
.card-back img { width: 100%; height: 100%; display: block; border-radius: calc(var(--card-radius) - 2px); object-fit: cover; -webkit-user-drag: none; }
.peel-area { --peel-leg: 12%; --peel-x: 88%; --peel-y: 12%; --peel-reveal: 0; position: absolute; inset: 2px; overflow: hidden; border-radius: calc(var(--card-radius) - 2px); background: radial-gradient(ellipse at 76% 18%, #303432, #0a0c0b 58%, #050605); container-type: inline-size; }
.adhesive-fluid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.peel-message { position: absolute; left: 55%; top: 7%; z-index: 1; width: 36%; display: flex; flex-direction: column; gap: 4px; text-align: left; color: #0f3d2e; opacity: var(--peel-reveal); pointer-events: none; }
.peel-message::before { content: ""; position: absolute; inset: -6px -6px; z-index: -1; border: 1px solid #f3ead77a; border-radius: 9px; background: #f3ead7f5; box-shadow: 0 4px 13px #00000024; }
.peel-message-title { font-size: 16px; font-size: clamp(13px, 5cqi, 20px); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; white-space: pre-line; }
.peel-message-copy { color: #101010; font-size: 10px; font-size: clamp(9.5px, 2.8cqi, 11px); font-weight: 600; letter-spacing: -.025em; line-height: 1.36; white-space: pre-line; }
.peel-liner { position: absolute; inset: 0; z-index: 2; background: #f3ead7; clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 0 100%); }
.peel-liner img { pointer-events: none; }
.peel-liner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent calc(100% - var(--peel-leg) / 2 - 2%), #00000015 calc(100% - var(--peel-leg) / 2 - .3%), #fffaf04d calc(100% - var(--peel-leg) / 2), transparent calc(100% - var(--peel-leg) / 2 + .4%)); pointer-events: none; }
.peel-fold { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.peel-fold-paper { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; pointer-events: none; }
.is-peeling .card-slot { cursor: pointer; }
[data-design] { --card-frame: linear-gradient(135deg, #68717d, #343c47); --card-frame-edge: #49515c; }
[data-design="google-white"] { --card-frame: linear-gradient(135deg, #a8ceff, #367fed 65%, #2162c5); --card-frame-edge: #3876cc; }
[data-design="google-black"] { --card-frame: linear-gradient(135deg, #254478, #377cea 58%, #172b4c); --card-frame-edge: #254e8b; }
[data-design="google-blue"] { --card-frame: linear-gradient(135deg, #5aa6ff, #0963e4 58%, #0744a3); --card-frame-edge: #1455ae; }
[data-design="instagram-white"] { --card-frame: linear-gradient(135deg, #9464dd, #e8549a 53%, #ff9958); --card-frame-edge: #b3488a; }
[data-design="instagram-black"] { --card-frame: linear-gradient(135deg, #6a32c8, #d32983 52%, #ed6b2b); --card-frame-edge: #92397c; }
[data-design="instagram-gradient"] { --card-frame: linear-gradient(135deg, #652ee8, #ec3188 50%, #ffa51e); --card-frame-edge: #ad388a; }
[data-design="menu-black"] { --card-frame: linear-gradient(135deg, #606b7a, #303a49 55%, #1c2532); --card-frame-edge: #394351; }
.card-edge { position: absolute; inset: 0; border-radius: var(--card-radius); background: var(--card-frame-edge); border: 1px solid var(--card-frame-edge); transform: translateZ(calc(var(--layer) * -1px)); transition: background-color .64s ease, border-color .64s ease; pointer-events: none; }
.card-face { position: absolute; inset: 0; border-radius: var(--card-radius); overflow: hidden; transform: translateZ(1px); backface-visibility: hidden; box-shadow: 0 0 0 1px var(--card-frame-edge), 0 13px 23px #22262b22, 0 3px 5px #22262b12; transition: box-shadow .64s ease; pointer-events: none; }
.card-material { position: absolute; inset: 0; z-index: 0; padding: 2px; border-radius: inherit; background: var(--card-frame); opacity: 1; }
.card-material.is-incoming { z-index: 1; opacity: 0; transition: opacity .64s cubic-bezier(.25, .1, .25, 1); will-change: opacity; }
.card-material.is-incoming.is-revealed { opacity: 1; }
.card-face img { width: 100%; height: 100%; display: block; border-radius: calc(var(--card-radius) - 2px); object-fit: contain; -webkit-user-drag: none; }
.product-navigation { display: flex; align-items: center; justify-content: center; margin: 12px auto 0; gap: 18px; }
.arrow { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 1px solid #cbd3c2; background: #f9faf4; display: grid; place-items: center; color: #496040; transition: border-color .2s; }
.arrow svg { width: 18px; height: 18px; }
.arrow.previous svg { transform: rotate(180deg); }
.arrow:hover { border-color: #708566; }
.arrow:active { transform: scale(.95); }
.backing-action { min-height: 40px; padding: 9px 15px; border: 1px solid #0f3d2e40; border-radius: 999px; background: var(--surface); color: #0f3d2e; font-size: 12px; font-weight: 800; line-height: 1.4; transition: background-color .2s, border-color .2s; }
.backing-action:hover { background: #0f3d2e0b; border-color: #0f3d2e; }
.backing-action[hidden] { display: none; }

.how-section, .purpose-section { border-top: 1px solid var(--line); padding: 80px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 65px; }
.section-kicker { font-size: 13px; font-weight: 750; margin: 0 0 20px; color: var(--accent); }
.how-copy h1, .how-copy h2, .purpose-intro h2 { font-size: clamp(32px, 3.3vw, 50px); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; margin: 0; }
.how-copy h1 em, .how-copy h2 em, .purpose-intro h2 em { font-family: inherit; font-style: normal; font-weight: 800; color: #607d51; }
.detail-section { border-top: 0; padding-top: 60px; }
.detail-section .how-copy h1 { font-size: clamp(40px, 4vw, 60px); }
.detail-next { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 36px; margin: 0 0 60px; border: 1px solid #dce3d3; border-radius: 21px; background: #ebeee3; }
.detail-next .section-kicker { margin-bottom: 9px; }
.detail-next h2 { margin: 0; font-size: clamp(25px, 2.6vw, 34px); letter-spacing: -.04em; line-height: 1.25; }
.primary-link { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 14px 21px; border: 1px solid #246b52; border-radius: 11px; color: #fffefa; background: #246b52; font-size: 14px; font-weight: 750; line-height: 1.4; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.primary-link svg { width: 17px; height: 17px; }
.primary-link:hover { background: #1d5743; border-color: #1d5743; }
.setup-status { color: #246b52; font-size: 13px; line-height: 1.7; margin: 16px 0 0; }
.setup-status:empty { display: none; }
.section-intro { margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 410px; }
.steps { list-style: none; padding: 0; margin: 31px 0 0; max-width: 465px; }
.steps li { display: flex; gap: 19px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border: 0; padding-bottom: 0; }
.step-icon { border: 1px solid #cbd5c1; background: #e7eede; border-radius: 13px; width: 42px; height: 45px; flex: 0 0 42px; display: grid; place-items: center; color: #42683e; }
.step-icon svg { width: 23px; height: 23px; stroke-width: 1.7; }
.steps h3 { font-size: 18px; font-weight: 750; line-height: 1.4; margin: 1px 0 9px; letter-spacing: -.35px; }
.steps p { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0; }
.purpose-section { padding-bottom: 85px; }
.purpose { display: flex; gap: 20px; border-bottom: 1px solid var(--line); padding: 25px 0; }
.purpose:first-child { padding-top: 0; }
.purpose:last-child { border: 0; padding-bottom: 0; }
.purpose-icon { width: 43px; height: 47px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: #fffefa; border: 1px solid #e0e4d9; }
.purpose-icon svg { width: 21px; height: 21px; }
.purpose-instagram { background: #f4e4e8; color: #ae547c; border-color: #eed9e2; }
.purpose-menu { background: #e6ebdc; color: #638443; border-color: #d9e2cb; }
.purpose-platform { color: #66745e !important; font-size: 11px !important; font-weight: 700; letter-spacing: .35px; margin: 2px 0 9px !important; }
.purpose h3 { font-size: 20px; line-height: 1.4; font-weight: 750; letter-spacing: -.5px; margin: 0 0 11px; }
.purpose p { font-size: 15px; color: var(--muted); line-height: 1.75; margin: 0; max-width: 420px; }
.purpose button { background: none; padding: 0; border: 0; color: #3a6c36; margin-top: 14px; min-height: 36px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 750; }
.purpose button svg { width: 13px; height: 13px; }
.purpose button:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); min-height: 75px; }
.footer > span:first-child { font-size: 13px; color: #66745e; }
.footer > span:last-child { font-size: 12px; font-weight: 650; color: #66745e; display: flex; align-items: center; gap: 8px; }
.footer svg { width: 15px; height: 15px; }
.noscript { padding: 20px; text-align: center; color: #59674e; }

@media (min-width: 1450px) {
  .showcase { padding-top: 65px; padding-bottom: 65px; }
  .studio { height: 495px; }
}
@media (max-width: 1100px) {
  .page-shell { padding: 0 4%; }
  .showcase { gap: 28px; padding-top: 35px; }
  h1 { font-size: clamp(40px, 4.7vw, 53px); }
  .eyebrow { font-size: 12px; }
  .platform { font-size: 13px; padding: 11px 10px; gap: 7px; }
  .platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configuration { max-width: none; }
  .product { padding: 17px 16px 23px; }
  .studio { height: 455px; }
  .card-slot { --card-size: min(325px, calc(100% - 44px)); }
  .how-section, .purpose-section { gap: 40px; }
    }
@media (max-width: 800px) {
  .page-shell { padding: 0 6%; }
  .header { height: auto; min-height: 122px; flex-wrap: wrap; gap: 8px 18px; padding: 17px 0 12px; }
  .header-nav { display: flex; order: 3; justify-content: space-between; width: 100%; gap: 18px; font-size: 13px; }
  .header-nav a { display: flex; align-items: center; min-height: 38px; }
        .detail-next { padding: 27px; margin-bottom: 45px; }
  .showcase { grid-template-columns: 1fr; padding-top: 35px; padding-bottom: 30px; gap: 30px; }
  .intro { padding-top: 0; display: block; }
  .eyebrow { font-size: 12px; margin-bottom: 20px; }
  h1 { font-size: clamp(44px, 7.5vw, 60px); }
  h1 > span { display: inline; }
  .intro-copy { margin-bottom: 0; font-size: 16px; max-width: 510px; }
  .configuration { padding-top: 0; margin-top: 28px; max-width: none; }
    .platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 25px; }
  .platform { min-height: 46px; padding: 11px 8px; }
  .finish-heading { align-items: center; flex-direction: row; gap: 12px; max-width: 430px; }
  .finishes { margin-top: 9px; }
  .product { padding: 19px 22px 24px; }
  .studio { height: 465px; }
  .card-slot { --card-size: min(355px, calc(100% - 52px)); }
  .how-section, .purpose-section { padding: 50px 0; gap: 30px; }
  .how-section { grid-template-columns: 1fr; }
  .how-copy { display: block; }
  .steps { margin-top: 28px; max-width: 600px; }
  .steps li { padding: 21px 0; gap: 18px; }
  .steps h3 { font-size: 18px; }
  .steps p { font-size: 15px; }
          .purpose-section { grid-template-columns: 1fr; gap: 32px; }
  .purpose-intro { max-width: 470px; }
    .purpose { padding: 23px 0; }
  .purpose p { max-width: 490px; }
}
@media (max-width: 520px) {
  .header { height: auto; min-height: 119px; }
  .brand { font-size: 29px; }
  .brand-mark { width: 27px; height: 33px; margin-right: 8px; }
  .brand-mark svg { width: 22px; height: 22px; }
  .header-nav { display: flex; gap: 12px; font-size: 12px; }
      .detail-next { flex-direction: column; align-items: flex-start; padding: 24px; gap: 23px; margin-bottom: 35px; }
  .detail-next .primary-link { width: 100%; }
            .showcase { display: flex; flex-direction: column; padding-top: 30px; gap: 0; }
  .intro { display: contents; }
  .eyebrow { order: 0; font-size: 12px; margin: 0 0 18px; }
  h1 { order: 1; font-size: clamp(40px, 10.6vw, 55px); line-height: 1.1; }
  h1 > span { display: inline; }
  .intro-copy { order: 2; font-size: 16px; margin: 20px 0 0; line-height: 1.75; }
  .intro-copy br { display: none; }
  .how-link { font-size: 13px; margin-top: 16px; }
  .product { order: 4; width: 100%; margin-top: 26px; padding: 17px 14px 20px; border-radius: 20px; }
  .studio-heading { flex-wrap: wrap; gap: 4px 12px; }
  .studio-heading > span { font-size: 12px; }
  .studio { height: 365px; margin: 0 -14px; overflow: clip; }
  .card-slot { --card-size: clamp(224px, 68vw, 310px); --card-radius: 23px; }
  .card-slot.is-active { transform: translate(-50%, -50%) translateZ(25px); }
  .floor-ring { top: 86%; height: 55px; }
  .ring-two { height: 37px; }
  .card-shadow { top: 81%; }
  .arrow { width: 44px; height: 44px; }
  .configuration { order: 3; margin-top: 29px; padding-top: 24px; border-top: 1px solid var(--line); }
  .control-label { font-size: 14px; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 24px; }
  .platform { min-height: 48px; justify-content: center; padding: 12px 10px; font-size: 14px; gap: 9px; }
  .platform svg { width: 17px; height: 17px; }
  .finish-heading { flex-direction: row; align-items: center; max-width: none; }
  .finishes { margin-top: 13px; }
  .how-section, .purpose-section { padding: 40px 0; }
  .how-copy { display: block; }
  .section-kicker { font-size: 13px; margin-bottom: 18px; }
  .how-copy h1, .how-copy h2, .purpose-intro h2 { font-size: clamp(30px, 7.8vw, 40px); }
  .detail-section .how-copy h1 { font-size: clamp(36px, 9.2vw, 46px); }
  .section-intro { font-size: 16px; margin-top: 20px; }
  .steps { margin-top: 25px; }
  .steps li { padding: 22px 0; margin: 0; gap: 15px; }
  .steps h3 { font-size: 17px; }
  .steps p { font-size: 15px; }
                                        .purpose { gap: 15px; padding: 24px 0; }
  .purpose-icon { width: 37px; height: 42px; border-radius: 10px; }
  .purpose h3 { font-size: 19px; }
  .purpose p { font-size: 15px; }
  .purpose button { font-size: 13px; min-height: 44px; }
  .footer { align-items: flex-start; justify-content: center; flex-direction: column; min-height: 85px; gap: 8px; }
  .footer > span:first-child { font-size: 12px; }
  .footer > span:last-child { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .page-entering .page-shell, .page-entering [data-page-reveal], .is-morphing .card-motion { animation: none; }
  .card-idle { animation: none; transform: none; }
  .page-enter-pending .page-shell, .page-enter-pending [data-page-reveal] { opacity: 1; transform: none; }
}