:root {
  color-scheme: light;
  --color-bg:#f5ead8;
  --color-surface:#ebddc5;
  --color-text:#201e1d;
  --color-accent:#c67139;
  --color-neutral-100:#f9f4ed;
  --color-neutral-800:#474238;
  --space-2:8.8px;
  --space-3:13.2px;
  --space-4:17.6px;
  --space-8:35.2px;
  --radius-lg:28px;
  --shadow-sm:0 1px 2px #2e2b2524;
  --shadow-md:0 3px 10px #2e2b2529;
  --shadow-lg:0 12px 32px #2e2b2538;
}
* {box-sizing:border-box}
body {margin:0;min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:Figtree,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
a:focus-visible,button:focus-visible {outline:2px solid var(--color-accent);outline-offset:3px}
.landing {max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,96px) clamp(16px,4vw,48px) var(--space-8)}
.landing-column {display:flex;flex-direction:column;gap:clamp(24px,3.5vw,40px);max-width:760px}
.landing-intro {display:flex;flex-direction:column;gap:var(--space-4)}
h1 {font-family:Caprasimo,Georgia,serif;font-weight:400;font-size:clamp(44px,6.4vw,84px);line-height:1.02;text-wrap:balance;margin:0 0 0 -.028em}
.landing-intro p {margin:0;font-size:clamp(19px,1.9vw,22px);line-height:1.5;max-width:42ch;text-wrap:pretty}
.demo-wrap {display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:380px}
.color-demo {appearance:none;display:block;padding:0;border:0;font:inherit;color:inherit;background:transparent;cursor:pointer;width:100%;aspect-ratio:4/3;perspective:1200px;border-radius:calc(2 * var(--radius-lg));text-align:left}
.demo-inner {display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform 1.6s cubic-bezier(.65,0,.35,1)}
.color-demo[data-flipped="true"] .demo-inner {transform:rotateY(180deg)}
.demo-face {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(2 * var(--radius-lg));overflow:hidden;box-shadow:var(--shadow-md)}
.demo-front {background:var(--color-surface)}
.demo-front img {display:block;width:100%;height:100%;object-fit:cover;object-position:56% 33%}
.demo-pointer {position:absolute;transform:translate(-50%,-50%)}
.demo-dot {display:block;width:clamp(40px,7vw,56px);aspect-ratio:1;border-radius:999px;border:4px solid var(--color-neutral-100);box-shadow:var(--shadow-lg)}
.demo-pointer-label {position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:var(--color-neutral-100);font-size:13px;font-weight:600;line-height:1.2;padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-md)}
.demo-pointer[data-label-below="true"] .demo-pointer-label {bottom:auto;top:calc(100% + 8px)}
.demo-subject {position:absolute;left:clamp(16px,4%,24px);bottom:clamp(16px,4%,24px);background:var(--color-neutral-100);font:400 20px/1 Caprasimo,Georgia,serif;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.demo-back {transform:rotateY(180deg);display:grid;grid-template-columns:1fr 1fr}
.demo-half {display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,7%,32px);gap:4px;min-width:0}
.demo-kicker {font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-neutral-800)}
.demo-kicker-actual {color:var(--color-text)}
.demo-color-name {font:400 clamp(22px,3vw,32px)/1.05 Caprasimo,Georgia,serif;color:var(--color-text)}
.landing-action {display:flex}
.landing-cta {display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:380px;background:oklch(.47 .13 250);color:var(--color-neutral-100);border-radius:999px;padding:22px 36px;font-size:20px;font-weight:700;line-height:1.3;text-decoration:none;box-shadow:var(--shadow-lg);transition:transform .15s ease,background .15s ease}
.landing-cta svg {flex:none}
.landing-cta:hover {background:oklch(.41 .13 250);transform:translateY(-2px)}
.landing-cta:active {background:oklch(.35 .12 250);transform:none}
.landing-benefits {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.landing-benefits li {display:flex;align-items:center;gap:var(--space-3);font-size:16px;font-weight:500;line-height:1.3;color:var(--color-neutral-800)}
.benefit-icon {width:32px;height:32px;flex:none;border-radius:999px;background:var(--color-surface);display:grid;place-items:center}
@media(prefers-reduced-motion:reduce) {.demo-inner,.landing-cta {transition:none}.landing-cta:hover {transform:none}}