@import 'tailwindcss';

:root {
  --cream: #fff9ee;
  --cream-deep: #f6eedc;
  --sky: #eaf7ff;
  --sky-2: #d5efff;
  --cobalt: #3768d8;
  --butter: #ffd84d;
  --petal: #ff6fae;
  --sage: #b9d9b2;
  --ink: #17181b;
  --muted: #59616b;
  --hairline: rgba(23, 24, 27, .14);
  --glass: rgba(255, 255, 255, .68);
  --sans: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --latin: "Space Grotesk", Inter, Arial, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
section { scroll-margin-top: 76px; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; padding: 0 clamp(20px, 4.5vw, 76px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 249, 238, .72); border-bottom: 1px solid rgba(23,24,27,.07);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.brand { font-family: var(--latin); font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.08em; }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); font-family: var(--latin), var(--sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.site-header nav a { transition: color 220ms var(--ease), transform 220ms var(--ease); }
.site-header nav a:hover { color: var(--cobalt); transform: translateY(-1px); }
.nav-cta { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 12px; background: var(--butter); }

.hero {
  min-height: 100svh; padding: 116px clamp(20px, 4.5vw, 76px) 40px;
  display: grid; grid-template-columns: minmax(390px, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 86px); align-items: center;
  background: linear-gradient(135deg, var(--cream) 0%, #fbfcff 48%, #ddf3ff 100%); overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; max-width: 690px; }
.eyebrow { margin: 0 0 20px; font-family: var(--latin); color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .12em; }
.eyebrow.blue { color: var(--cobalt); }
h1, h2, h3 { margin: 0; letter-spacing: -.045em; }
h1 { font-size: clamp(44px, 5.6vw, 72px); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(34px, 3.8vw, 48px); line-height: 1.16; font-weight: 700; }
h3 { font-size: 22px; line-height: 30px; }
.lead { max-width: 620px; margin: 28px 0 0; color: var(--muted); font-size: 20px; line-height: 1.6; }
.hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 22px; }
.button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 32px; border: 0; border-radius: 12px; font-size: 15px; line-height: 20px; font-weight: 700; transition: transform 220ms var(--ease), box-shadow 220ms ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(136,109,13,.14); }
.button.primary { background: var(--butter); }
.text-link { font-size: 15px; font-weight: 600; border-bottom: 1px solid currentColor; }
.stage-note { margin-top: 28px; color: rgba(89,97,107,.76); font-size: 14px; line-height: 22px; }

.hero-visual { position: relative; min-height: min(78vh, 760px); border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 68% 28%, #fff, var(--sky-2)); box-shadow: 0 28px 80px rgba(76,120,160,.16); }
.hero-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 45%); }
.hero-visual img { width: 100%; height: 100%; min-height: min(78vh, 760px); object-fit: cover; object-position: center; transition: transform 560ms var(--ease); }
.hero-visual:hover img { transform: scale(1.035) translate(4px, -3px); }
.hover-chip { position: absolute; left: 24px; top: 24px; z-index: 2; padding: 10px 13px; border: 1px solid rgba(255,255,255,.76); border-radius: 10px; color: var(--muted); background: var(--glass); backdrop-filter: blur(18px); font-family: var(--latin); font-size: 12px; letter-spacing: .08em; }
.focus-ring { position: absolute; right: 14%; bottom: 14%; z-index: 2; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; opacity: .78; transition: transform 420ms ease, opacity 420ms ease; }
.hero-visual:hover .focus-ring { transform: scale(1.18); opacity: .35; }

.section-shell { padding: clamp(100px, 11vw, 160px) clamp(20px, 4.5vw, 76px); }
.section-heading { max-width: 780px; margin-bottom: 64px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading > p:not(.eyebrow), .split-heading > p, .section-copy > p:not(.eyebrow) { max-width: 600px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 28px; }
.split-heading { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.pixel-label { font-family: var(--latin); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .1em; }

.product { min-height: 850px; display: grid; grid-template-columns: minmax(310px,.72fr) minmax(0,1.28fr); gap: clamp(50px, 8vw, 130px); align-items: center; background: linear-gradient(145deg, #fff9ee 0%, #f7fbff 44%, #d7efff 100%); }
.variant-tabs { margin-top: 42px; display: grid; border-top: 1px solid var(--hairline); }
.variant-tabs button { min-height: 64px; padding: 0 4px; display: flex; align-items: center; gap: 18px; color: var(--muted); border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; font-size: 15px; font-weight: 600; transition: padding 220ms ease, color 220ms ease, background 220ms ease; }
.variant-tabs button span { width: 32px; font-family: var(--latin); font-size: 12px; opacity: .55; }
.variant-tabs button[aria-selected="true"] { padding-left: 14px; color: var(--ink); background: rgba(255,255,255,.58); }
.variant-copy { min-height: 28px; font-size: 14px !important; }
.product-stage { position: relative; min-height: 610px; padding: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 28px; background: var(--glass); box-shadow: 0 30px 90px rgba(74,121,163,.13); backdrop-filter: blur(22px); overflow: hidden; }
.product-stage::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,77,.25), rgba(213,239,255,.06) 68%, transparent); }
.product-frame { position: relative; z-index: 2; width: min(620px, 100%); border-radius: 24px; overflow: hidden; box-shadow: 0 22px 55px rgba(90,72,47,.16); }
.product-frame img { width: 100%; transition: transform 420ms var(--ease); }
.product-frame:hover img { transform: scale(1.07); }
.magnifier { position: absolute; width: 128px; height: 128px; margin: -64px 0 0 -64px; pointer-events: none; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background-image: url('/images/v4/product-main.jpg'); background-size: 880px auto; box-shadow: 0 14px 35px rgba(65,69,77,.17); opacity: 0; transform: scale(.82); transition: opacity 220ms ease, transform 220ms ease; }
.product-frame:hover .magnifier { opacity: 1; transform: scale(1); }
.product-stage > p { position: absolute; left: 38px; bottom: 24px; margin: 0; color: var(--muted); font-size: 12px; }

.structure { background: linear-gradient(180deg, #fffdf8 0%, var(--cream-deep) 100%); }
.structure-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); gap: clamp(42px, 6vw, 90px); align-items: center; }
.structure-visual { position: relative; min-height: 540px; display: grid; place-items: center; border-radius: 26px; overflow: hidden; background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 26px 70px rgba(89,72,45,.1); }
.structure-visual img { width: 100%; height: 100%; object-fit: cover; }
.structure-marker { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--cobalt); border: 5px solid rgba(255,255,255,.8); font: 700 14px/1 var(--latin); box-shadow: 0 12px 28px rgba(55,104,216,.28); transition: left 300ms var(--ease), top 300ms var(--ease); }
.marker-1 { left: 24%; top: 30%; } .marker-2 { left: 47%; top: 44%; } .marker-3 { left: 66%; top: 56%; } .marker-4 { left: 79%; top: 70%; }
.structure-list { display: grid; }
.structure-list button { min-height: 90px; padding: 20px 0; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; gap: 4px 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid var(--hairline); text-align: left; }
.structure-list button > span { grid-row: 1 / 3; font: 600 12px/22px var(--latin); }
.structure-list strong { color: inherit; font-size: 16px; line-height: 24px; }
.structure-list small { color: var(--muted); font-size: 13px; line-height: 20px; }
.structure-list button[aria-selected="true"] { color: var(--ink); }
.structure-list button[aria-selected="true"] > span { color: var(--cobalt); }

.logic { color: #fff; background: linear-gradient(135deg, #2859c9, #4f7ee0 55%, #7ba7f0); }
.logic .eyebrow, .logic .split-heading > p { color: rgba(255,255,255,.72); }
.logic-track { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.logic-track button { min-height: 330px; padding: 34px; display: flex; flex-direction: column; align-items: flex-start; color: #fff; background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.22); text-align: left; transition: background 280ms ease, transform 280ms var(--ease); }
.logic-track button:last-child { border-right: 0; }
.logic-track button:hover, .logic-track button[aria-selected="true"] { background: rgba(255,255,255,.12); transform: translateY(-8px); }
.logic-track .step-number { font: 500 12px/18px var(--latin); opacity: .6; }
.logic-track .pixel-label { margin-top: auto; color: var(--butter); }
.logic-track strong { margin-top: 12px; font-size: 32px; line-height: 40px; }
.logic-track small { margin-top: 18px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 22px; }
.logic-note { display: flex; align-items: center; gap: 28px; padding-top: 28px; }
.logic-note span { padding: 7px 10px; color: var(--ink); background: var(--butter); font: 700 12px/18px var(--latin); }
.logic-note p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 22px; }

.diary { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr); gap: clamp(60px, 11vw, 170px); align-items: center; overflow: hidden; background: radial-gradient(circle at 78% 46%, rgba(255,216,77,.33), transparent 25%), linear-gradient(135deg, #fff9ee, #edf8ff 70%); }
.diary-copy { max-width: 580px; }
.diary-tabs { margin-top: 38px; display: flex; gap: 10px; }
.diary-tabs button { min-width: 84px; min-height: 44px; border: 1px solid var(--hairline); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.45); font-size: 14px; font-weight: 600; }
.diary-tabs button[aria-selected="true"] { color: #fff; border-color: var(--cobalt); background: var(--cobalt); }
.phone-stage { position: relative; min-height: 680px; display: grid; place-items: center; }
.phone-stage::before { content: ""; position: absolute; width: 580px; height: 580px; border-radius: 50%; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.75); backdrop-filter: blur(14px); }
.phone-shell { position: relative; z-index: 2; width: min(360px, 82vw); min-height: 610px; padding: 18px; border: 9px solid #22252b; border-radius: 42px; background: #fbfbf8; box-shadow: 0 35px 90px rgba(50,68,91,.2); }
.phone-top, .phone-footer { display: flex; align-items: center; justify-content: space-between; font: 700 12px/18px var(--latin); }
.pet-summary { margin-top: 28px; display: flex; gap: 12px; align-items: center; }
.pet-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--petal); font: 700 18px/1 var(--latin); }
.pet-summary div { display: grid; }
.pet-summary strong { font-size: 16px; line-height: 24px; }
.pet-summary small { color: var(--muted); font-size: 12px; line-height: 18px; }
.diary-card { margin-top: 26px; min-height: 390px; padding: 25px; border-radius: 26px; background: linear-gradient(160deg, #dff1ff, #fff 60%); border: 1px solid #fff; box-shadow: 0 20px 48px rgba(74,121,163,.13); }
.status-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #6dbb79; box-shadow: 0 0 0 7px rgba(109,187,121,.12); }
.diary-card > small { display: block; margin-top: 26px; color: var(--muted); font-size: 12px; }
.diary-card > strong { display: block; margin-top: 4px; font: 700 32px/40px var(--latin); }
.diary-card h3 { margin-top: 40px; }
.diary-card p { color: var(--muted); font-size: 14px; line-height: 22px; }
.mini-chart { height: 72px; margin-top: 22px; display: flex; align-items: end; gap: 7px; }
.mini-chart i { flex: 1; min-width: 8px; border-radius: 5px 5px 2px 2px; background: var(--cobalt); opacity: .72; }
.mini-chart i:nth-child(1) { height: 28%; } .mini-chart i:nth-child(2) { height: 52%; } .mini-chart i:nth-child(3) { height: 44%; } .mini-chart i:nth-child(4) { height: 78%; } .mini-chart i:nth-child(5) { height: 64%; } .mini-chart i:nth-child(6) { height: 88%; } .mini-chart i:nth-child(7) { height: 72%; }
.phone-footer { margin-top: 18px; padding: 0 8px; color: var(--muted); font-weight: 500; }
.ui-placeholder { position: absolute; z-index: 3; right: 4%; bottom: 6%; padding: 8px 10px; color: #fff; background: var(--petal); font: 700 12px/18px var(--latin); }

.diy { background: linear-gradient(180deg, #fffdf8, #f6f2e7); }
.diy-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.diy-preview { position: relative; min-height: 570px; padding: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.62); box-shadow: 0 28px 80px rgba(84,73,52,.1); }
.diy-preview::before { content: ""; position: absolute; left: -90px; top: -90px; width: 330px; height: 330px; border-radius: 50%; background: rgba(213,239,255,.7); }
.diy-preview img { position: relative; z-index: 2; width: min(760px,100%); border-radius: 22px; animation: reveal 440ms var(--ease); }
.diy-preview > span { position: absolute; left: 30px; bottom: 24px; z-index: 3; font: 700 12px/18px var(--latin); letter-spacing: .08em; }
.diy-loupe { position: absolute; z-index: 4; right: 8%; top: 12%; width: 135px; height: 135px; border-radius: 50%; border: 4px solid #fff; background-size: 760px auto; background-position: 51% 67%; box-shadow: 0 16px 40px rgba(39,40,43,.16); }
.diy-controls > p:not(.pixel-label) { margin-top: 28px; color: var(--muted); font-size: 14px; line-height: 22px; }
.diy-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.diy-grid button { position: relative; padding: 0; aspect-ratio: 1.2; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: #fff; }
.diy-grid button[aria-selected="true"] { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(55,104,216,.12); }
.diy-grid img { width: 100%; height: 100%; object-fit: cover; }
.diy-grid button span { position: absolute; right: 6px; bottom: 5px; padding: 2px 5px; color: #fff; background: rgba(23,24,27,.72); font: 600 10px/14px var(--latin); }
@keyframes reveal { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

.cocreate { display: grid; grid-template-columns: minmax(320px,.85fr) minmax(0,1.15fr); gap: clamp(60px, 10vw, 150px); align-items: center; background: linear-gradient(135deg, var(--sky), #fffdf8 58%, #fff1c7); }
.co-card { padding: clamp(32px,4vw,60px); border-radius: 28px; background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 26px 70px rgba(74,121,163,.11); backdrop-filter: blur(18px); }
.co-card p:not(.eyebrow) { margin: 24px 0 32px; color: var(--muted); font-size: 16px; line-height: 28px; }
.validation-route { display: grid; }
.validation-route div { position: relative; min-height: 136px; padding: 24px 24px 24px 84px; display: grid; border-bottom: 1px solid var(--hairline); }
.validation-route div::before { content: ""; position: absolute; left: 26px; top: 30px; width: 18px; height: 18px; border-radius: 50%; border: 5px solid rgba(55,104,216,.18); background: var(--cobalt); }
.validation-route div::after { content: ""; position: absolute; left: 39px; top: 53px; bottom: -31px; width: 1px; background: rgba(55,104,216,.25); }
.validation-route div:last-child::after { display: none; }
.validation-route span { color: var(--cobalt); font: 700 12px/18px var(--latin); letter-spacing: .08em; }
.validation-route strong { margin-top: 5px; font-size: 22px; line-height: 30px; }
.validation-route small { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 22px; }

.waitlist { min-height: 850px; display: grid; grid-template-columns: minmax(310px,.8fr) minmax(420px,1.2fr); gap: clamp(50px, 9vw, 140px); align-items: center; color: #fff; background: radial-gradient(circle at 70% 15%, rgba(255,216,77,.25), transparent 18%), linear-gradient(135deg, #1f4db7, #3768d8 54%, #628ce4); }
.waitlist .eyebrow, .waitlist-copy > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.waitlist-copy > p:not(.eyebrow) { max-width: 530px; margin-top: 24px; font-size: 16px; line-height: 28px; }
.form-panel { min-height: 580px; padding: clamp(28px,4vw,50px); display: grid; border-radius: 28px; color: var(--ink); background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 30px 90px rgba(23,44,94,.24); backdrop-filter: blur(24px); }
.form-panel form { display: grid; gap: 19px; }
.form-panel label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; line-height: 22px; }
.form-panel input, .form-panel select, .form-panel textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: rgba(255,255,255,.74); border: 1px solid var(--hairline); border-radius: 11px; outline: none; resize: vertical; }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(55,104,216,.1); }
.form-submit { width: 100%; margin-top: 4px; }
.form-panel form > small { color: var(--muted); font-size: 12px; line-height: 18px; text-align: center; }
.success { align-self: center; display: grid; justify-items: start; }
.success > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: #6dbb79; font-size: 25px; }
.success h3 { margin-top: 28px; }
.success p { max-width: 480px; color: var(--muted); font-size: 15px; line-height: 24px; }
.reset-button { margin-top: 20px; padding: 0; border: 0; background: transparent; }

footer { min-height: 170px; padding: 42px clamp(20px, 4.5vw, 76px); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 12px 40px; align-items: center; background: var(--ink); color: #fff; }
footer .brand { grid-row: 1 / 3; }
footer p { margin: 0; color: rgba(255,255,255,.65); font-size: 12px; line-height: 18px; }
footer > a:last-child { grid-row: 1 / 3; font-size: 14px; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }

@media (max-width: 980px) {
  .site-header nav a:not(.nav-cta) { display: none; }
  .hero, .product, .structure-layout, .diary, .diy-workspace, .cocreate, .waitlist { grid-template-columns: 1fr; }
  .hero { padding-top: 116px; }
  .hero-visual { min-height: 58vw; }
  .hero-visual img { min-height: 58vw; }
  .product-stage { min-height: 520px; }
  .structure-visual { min-height: 440px; }
  .phone-stage { min-height: 650px; }
  .logic-track button { padding: 25px; }
  .diy-controls { max-width: 680px; }
}

@media (max-width: 700px) {
  .split-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .logic-track { grid-template-columns: 1fr; }
  .logic-track button { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .logic-track button:last-child { border-bottom: 0; }
  .logic-track button:hover, .logic-track button[aria-selected="true"] { transform: none; }
  .diy-preview { min-height: 420px; padding: 20px; }
  .diy-loupe { width: 96px; height: 96px; }
  footer { grid-template-columns: 1fr; grid-template-rows: auto; }
  footer .brand, footer > a:last-child { grid-row: auto; }
}

@media (max-width: 560px) {
  .brand { font-size: 31px; }
  .nav-cta { font-size: 14px; }
  .hero { gap: 40px; }
  .lead { font-size: 17px; line-height: 28px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 74vw; border-radius: 20px; }
  .hero-visual img { min-height: 74vw; }
  .product-stage { min-height: 390px; padding: 20px; }
  .magnifier { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .structure-visual { min-height: 320px; }
  .structure-marker { width: 40px; height: 40px; }
  .phone-stage::before { width: 92vw; height: 92vw; }
  .diy-grid { grid-template-columns: repeat(2, 1fr); }
  .form-panel { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* CLASPAW V5 — locked editorial design system */
.v5-site {
  --v5-paper: #f4efe6;
  --v5-canvas: #fbf8f2;
  --v5-porcelain: #fffdfc;
  --v5-ink: #1e1c19;
  --v5-cocoa: #514a41;
  --v5-champagne: #c7a978;
  --v5-sage: #8e9a8b;
  --v5-ember: #e86143;
  --v5-line: #d9d1c4;
  --v5-sans: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--v5-ink);
  background: var(--v5-paper);
  font-family: var(--v5-sans);
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
.v5-site * { box-sizing: border-box; }
.v5-site section { scroll-margin-top: 80px; }
.v5-header {
  position: fixed; top: 18px; left: 50%; z-index: 30; width: min(calc(100% - 36px), 1080px); height: 64px;
  padding: 7px 8px 7px 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--v5-porcelain);
  background: rgba(20, 18, 16, .80); box-shadow: 0 18px 48px rgba(18,15,13,.18);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); transform: translateX(-50%);
}
.v5-brand {
  font: 650 clamp(32px, 3vw, 48px)/1 var(--v5-sans); letter-spacing: -.055em;
}
.v5-header nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); font: 600 13px/22px var(--v5-sans); letter-spacing: .04em; }
.v5-header nav a { position: relative; transition: color 240ms ease; }
.v5-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--v5-ember); transition: right 260ms ease; }
.v5-header nav a:hover { color: var(--v5-ember); }
.v5-header nav a:hover::after { right: 0; }
.v5-header-brand { justify-self: center; color: var(--v5-porcelain); font-size: clamp(26px, 2.3vw, 34px); letter-spacing: -.045em; }
.v5-nav-secondary { justify-self: end; display: flex; align-items: center; gap: 8px; }
.v5-nav-action { min-height: 48px; padding: 12px 20px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--v5-ink); background: var(--v5-porcelain); font-size: 12px; font-weight: 700; letter-spacing: .07em; transition: color 220ms ease, background 220ms ease; }
.v5-nav-action:hover { color: var(--v5-porcelain); background: var(--v5-ember); }
.v5-menu-dots { width: 48px; height: 48px; padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 50%; background: rgba(255,255,255,.12); transition: background 220ms ease, transform 220ms ease; }
.v5-menu-dots span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.v5-menu-dots:hover { background: var(--v5-ember); transform: rotate(8deg); }

@media (min-width: 721px) {
  .v5-header:not(.is-hero) { height: 54px; padding: 5px 6px 5px 24px; }
  .v5-header:not(.is-hero) .v5-nav-action { min-height: 42px; padding-block: 9px; }
  .v5-header:not(.is-hero) .v5-menu-dots { width: 42px; height: 42px; padding: 12px; }
}

.v5-hero {
  position: relative; min-height: 100svh; padding: 88px clamp(22px, 4vw, 68px) 34px;
  display: grid; grid-template-columns: minmax(380px, .78fr) minmax(0, 1.22fr); align-items: center;
  background:
    radial-gradient(circle at 58% 18%, rgba(199, 169, 120, .18), transparent 30%),
    linear-gradient(112deg, var(--v5-canvas) 0 44%, var(--v5-paper) 70%, #eae6dc 100%);
  overflow: hidden;
}
.v5-hero::before { content: ""; position: absolute; inset: 88px auto 0 39%; width: 1px; background: rgba(30,28,25,.1); }
.v5-hero-copy { position: relative; z-index: 4; max-width: 720px; padding: 8vh 7vw 6vh 0; }
.v5-kicker { margin: 0 0 28px; display: flex; align-items: center; gap: 12px; color: var(--v5-cocoa); font: 600 13px/20px var(--v5-sans); letter-spacing: .15em; }
.v5-kicker > span { width: 34px; height: 1px; background: var(--v5-ember); }
.v5-hero h1 { margin: 0; font: 700 clamp(54px, 6.8vw, 106px)/.96 var(--v5-sans); letter-spacing: -.07em; }
.v5-reveal { display: inline-flex; overflow: hidden; padding-bottom: .11em; }
.v5-reveal-letter { display: inline-block; opacity: 0; transform: translateY(.85em); transition: opacity 650ms ease, transform 800ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--letter-index) * 42ms + 120ms); }
.v5-reveal.is-visible .v5-reveal-letter { opacity: 1; transform: translateY(0); }
.v5-lead { max-width: 560px; margin: 32px 0 0; color: var(--v5-cocoa); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.8; }
.v5-actions { margin-top: 38px; display: flex; align-items: center; gap: 26px; }
.v5-button { min-height: 56px; padding: 0 24px; display: inline-flex; align-items: center; gap: 44px; color: var(--v5-porcelain); background: var(--v5-ink); font-size: 15px; font-weight: 650; transition: background 260ms ease, transform 260ms ease; }
.v5-button:hover { background: var(--v5-ember); transform: translateY(-2px); }
.v5-text-link { padding-block: 8px; border-bottom: 1px solid var(--v5-cocoa); color: var(--v5-cocoa); font-size: 15px; }
.v5-disclaimer { margin: 28px 0 0; color: rgba(81, 74, 65, .72); font-size: 14px; line-height: 22px; }
.v5-hero-media {
  position: relative; z-index: 2; height: calc(100svh - 122px); min-height: 620px; margin-left: -7vw;
  overflow: hidden; background: #eee8de;
}
.v5-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 32px 0 80px rgba(244,239,230,.44); }
.v5-hotspot { position: absolute; z-index: 5; padding: 0; border: 0; border-radius: 44%; background: transparent; cursor: pointer; }
.v5-site .v5-hotspot:focus-visible { outline: 0; }
.v5-hotspot::after { content: ""; position: absolute; right: 7%; top: 7%; width: 18px; height: 2px; background: var(--v5-ember); opacity: 0; }
.v5-hotspot:focus-visible::after { opacity: 1; }
.v5-dog-hotspot { left: 55%; top: 9%; width: 36%; height: 58%; }
.v5-cat-hotspot { left: 29%; top: 36%; width: 27%; height: 48%; }
.v5-hero-index { position: absolute; right: 20px; bottom: 18px; z-index: 5; color: var(--v5-cocoa); font: 600 10px/15px var(--v5-sans); letter-spacing: .14em; }

.v5-statement { min-height: 86svh; padding: clamp(110px, 14vw, 210px) clamp(22px, 8vw, 140px); display: flex; flex-direction: column; justify-content: center; background: var(--v5-ink); color: var(--v5-porcelain); }
.v5-statement > p { margin: 0 0 44px; color: var(--v5-champagne); font: 600 10px/16px var(--v5-sans); letter-spacing: .2em; }
.v5-statement h2 { max-width: 1100px; font: 600 clamp(44px, 6vw, 88px)/1.08 var(--v5-sans); letter-spacing: -.055em; }
.v5-statement h2 em { color: #bdb7ad; font-style: normal; font-weight: 500; }
.v5-statement-rule { margin-top: 80px; height: 1px; background: rgba(255,255,255,.18); }
.v5-statement-rule span { display: block; width: 18%; height: 1px; background: var(--v5-ember); }

.v5-product { position: relative; height: 430svh; background: var(--v5-canvas); outline: 0; }
.v5-product-sticky {
  position: sticky; top: 0; height: 100svh; padding: clamp(72px, 7vw, 112px) clamp(22px, 4vw, 68px);
  display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 6vw, 100px);
  align-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 72% 45%, rgba(199,169,120,.2), transparent 31%), linear-gradient(135deg, #fbf8f2, #eee7da);
}
.v5-product-dark-bridge { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--v5-ink); transition: opacity 180ms linear; }
.v5-product-copy { position: relative; z-index: 3; max-width: 600px; transition: color 320ms ease; }
.v5-product.is-dark .v5-product-copy { color: var(--v5-porcelain); }
.v5-product.is-dark .v5-kicker, .v5-product.is-dark .v5-product-intro, .v5-product.is-dark .v5-product-control { color: rgba(255,253,252,.68); }
.v5-product h2 { min-height: 2.18em; margin: 0; font: 700 clamp(42px, 4.4vw, 72px)/1.05 var(--v5-sans); letter-spacing: -.06em; }
.v5-product h2 > span { display: inline; }
.v5-product-intro { max-width: 520px; margin: 26px 0 0; color: var(--v5-cocoa); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.9; transition: color 320ms ease; }
.v5-moment { animation: v5-moment-in 720ms cubic-bezier(.16,1,.3,1); }
.v5-moment-meta { margin: 0 0 20px; display: flex; align-items: center; gap: 14px; font: 650 11px/17px var(--v5-sans); letter-spacing: .16em; }
.v5-moment-meta span { color: var(--v5-ember); }
.v5-series { margin: 0 0 14px; color: var(--v5-champagne); font: 650 10px/16px var(--v5-sans); letter-spacing: .14em; }
.v5-progress { width: min(420px, 100%); height: 1px; margin-top: 44px; background: rgba(81,74,65,.22); overflow: hidden; }
.v5-progress span { display: block; width: 100%; height: 1px; background: var(--v5-ember); transform-origin: left center; }
.v5-product-control { margin: 13px 0 0; color: rgba(81,74,65,.7); font: 650 10px/16px var(--v5-sans); letter-spacing: .14em; }
.v5-product-stage { position: relative; z-index: 2; width: 100%; height: min(78svh, 820px); min-height: 560px; display: grid; place-items: center; }
.v5-product-halo { position: absolute; width: min(64vw, 780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,253,252,.9), rgba(255,253,252,.16) 56%, transparent 72%); filter: blur(8px); }
.v5-product-frame {
  position: absolute; inset: 0; z-index: 2;
  background-image: url('/images/v5/collar-turntable-8.png');
  background-size: 400% 200%; background-repeat: no-repeat;
  mix-blend-mode: multiply; filter: saturate(.92) contrast(1.02);
  will-change: opacity; transform: translateZ(0);
}
.v5-product.is-dark .v5-product-frame { mix-blend-mode: normal; filter: brightness(.74) saturate(.72); }
.v5-frame-count { position: absolute; right: 8px; bottom: 2px; z-index: 3; margin: 0; color: var(--v5-cocoa); font: 650 11px/17px var(--v5-sans); letter-spacing: .14em; }
.v5-frame-count span { color: var(--v5-ember); }
@keyframes v5-moment-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.v5-next { min-height: 64svh; padding: clamp(100px, 12vw, 176px) clamp(22px, 8vw, 140px); display: grid; align-content: center; color: var(--v5-porcelain); background: linear-gradient(125deg, var(--v5-cocoa), var(--v5-ink)); }
.v5-next > p { margin: 0 0 24px; color: var(--v5-champagne); font: 600 10px/16px var(--v5-sans); letter-spacing: .18em; }
.v5-next h2 { margin: 0; font: 600 clamp(40px, 5vw, 72px)/1.1 var(--v5-sans); letter-spacing: -.055em; }
.v5-next > span { max-width: 680px; margin-top: 28px; color: rgba(255,253,252,.68); font-size: 15px; line-height: 1.8; }
.v5-next > a { width: max-content; margin-top: 60px; color: var(--v5-ember); font: 650 11px/18px var(--v5-sans); letter-spacing: .12em; }

.v5-site :focus-visible { outline: 2px solid var(--v5-ember); outline-offset: 5px; }
@media (max-width: 980px) {
  .v5-hero { grid-template-columns: 1fr; }
  .v5-hero { padding-top: 116px; }
  .v5-hero::before { display: none; }
  .v5-hero-copy { padding: 6vh 0 2vh; }
  .v5-hero-media { height: 62vw; min-height: 520px; margin: 20px 0 0; }
  .v5-product { height: 390svh; }
  .v5-product-sticky { padding-top: 54px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; align-items: start; }
  .v5-product-copy { max-width: 680px; }
  .v5-product-copy > .v5-kicker { margin-bottom: 14px; }
  .v5-product h2 { min-height: 0; font-size: clamp(38px, 6vw, 62px); }
  .v5-product-intro { margin-top: 14px; line-height: 1.7; }
  .v5-moment-meta { margin-bottom: 10px; }
  .v5-progress { margin-top: 20px; }
  .v5-product-stage { height: 100%; min-height: 340px; }
}
@media (max-width: 620px) {
  .v5-header { height: 72px; }
  .v5-header nav a:not(.v5-nav-action) { display: none; }
  .v5-hero { padding-top: 98px; }
  .v5-hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .v5-actions { align-items: flex-start; flex-direction: column; }
  .v5-hero-media { height: 112vw; min-height: 460px; margin-inline: -22px; }
  .v5-hero-image,
  .v5-hero-motion-layer { object-position: 64% center; }
  .v5-cat-hotspot { left: 16%; width: 38%; }
  .v5-dog-hotspot { left: 54%; width: 42%; }
  .v5-statement { min-height: 72svh; }
  .v5-product { height: 360svh; }
  .v5-product-sticky { padding: 42px 22px 20px; }
  .v5-product h2 { font-size: clamp(36px, 10vw, 48px); }
  .v5-product-intro { font-size: 13px; line-height: 1.65; }
  .v5-product-control { display: none; }
  .v5-product-stage { min-height: 300px; margin-inline: -12px; width: calc(100% + 24px); }
  .v5-frame-count { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .v5-reveal-letter { opacity: 1; transform: none; }
  .v5-moment { transition: none; animation: none; }
  .v5-product { height: auto; }
  .v5-product-sticky { position: relative; min-height: 100svh; }
}

/* CLASPAW V5 — complete narrative site */
.v5-title-line { display: block; }
.v5-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.v5-hero-image,
.v5-hero-motion-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% center;
  background: #eee8de;
}
.v5-hero-image { z-index: 1; }
.v5-hero-motion-layer {
  z-index: 2; opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 120ms ease-out;
}
.v5-hero-media { margin-left: 0; }
.v5-hero-media::after { z-index: 3; }
.v5-hotspot { z-index: 4; }
.v5-hero-index { z-index: 4; }
.v5-statement .v5-title-line:last-child { color: #bdb7ad; font-weight: 500; }

.v5-shell { padding: clamp(110px, 11vw, 176px) clamp(22px, 6vw, 104px); }
.v5-section-heading { max-width: 940px; margin-bottom: clamp(54px, 7vw, 96px); }
.v5-section-heading h2,
.v5-validation h2,
.v5-waitlist h2 { margin: 0; font: 650 clamp(44px, 5.7vw, 84px)/1.06 var(--v5-sans); letter-spacing: -.06em; }
.v5-section-heading > p:last-child,
.v5-heading-split > p,
.v5-validation-copy > p,
.v5-waitlist-copy > p { max-width: 620px; margin: 28px 0 0; color: var(--v5-cocoa); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.9; }
.v5-heading-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: clamp(48px, 8vw, 130px); align-items: end; }
.v5-heading-split > p { margin-bottom: 8px; }
.v5-boundary { max-width: 920px; margin: 42px 0 0; color: rgba(81,74,65,.72); font-size: 12px; line-height: 1.8; }

.v5-modules { background: var(--v5-paper); }
.v5-module-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.v5-module-visual {
  position: relative; min-height: min(64vw, 720px); display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(30,28,25,.1); background: radial-gradient(circle at 50% 38%, #fffdfc, #e9e1d4 70%);
}
.v5-module-visual img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; animation: v5-module-in 720ms cubic-bezier(.16,1,.3,1); }
.v5-module-visual > span { position: absolute; right: 20px; bottom: 16px; color: var(--v5-cocoa); font: 650 10px/16px var(--v5-sans); letter-spacing: .16em; }
.v5-module-tabs { display: grid; border-top: 1px solid var(--v5-line); }
.v5-module-tabs button {
  min-height: 118px; padding: 22px 10px; display: grid; grid-template-columns: 44px 1fr; align-content: center;
  border: 0; border-bottom: 1px solid var(--v5-line); color: var(--v5-cocoa); background: transparent; text-align: left;
  transition: padding 280ms ease, background 280ms ease, color 280ms ease;
}
.v5-module-tabs button > span { grid-row: 1 / 3; color: var(--v5-ember); font: 650 11px/18px var(--v5-sans); }
.v5-module-tabs button strong { font: 650 18px/28px var(--v5-sans); }
.v5-module-tabs button small { max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; line-height: 1.75; transition: max-height 320ms ease, opacity 260ms ease, margin 260ms ease; }
.v5-module-tabs button[aria-selected="true"] { padding-left: 22px; color: var(--v5-ink); background: rgba(255,253,252,.7); }
.v5-module-tabs button[aria-selected="true"] small { max-height: 72px; margin-top: 7px; opacity: .72; }
@keyframes v5-module-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.v5-logic { position: relative; height: 340svh; color: var(--v5-porcelain); background: var(--v5-ink); }
.v5-logic-sticky { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; }
.v5-logic-backgrounds,
.v5-logic-backgrounds figure,
.v5-logic-backgrounds img,
.v5-logic-scrim { position: absolute; inset: 0; }
.v5-logic-backgrounds { z-index: -3; background: #241914; }
.v5-logic-backgrounds figure { margin: 0; opacity: 0; transition: opacity 720ms cubic-bezier(.16,1,.3,1); }
.v5-logic-backgrounds figure.is-active { opacity: 1; }
.v5-logic-backgrounds img { width: 100%; height: 108%; object-fit: cover; object-position: center; will-change: transform, opacity; transition: transform 180ms linear; }
.v5-logic-backgrounds video { position: absolute; inset: 0; width: 100%; height: 108%; object-fit: cover; object-position: center; will-change: transform, opacity; transition: transform 180ms linear; }
.v5-logic-backgrounds figure.is-explain-motion { overflow: hidden; }
.v5-logic-backgrounds figure.is-explain-motion.is-active img { animation: v5-explain-camera 7s ease-in-out infinite alternate; }
.v5-explain-motion { position: absolute; inset: 0; pointer-events: none; }
.v5-explain-signal { position: absolute; left: 68%; top: 61%; width: 12px; height: 12px; border: 1px solid rgba(255,245,226,.82); border-radius: 50%; box-shadow: 0 0 0 8px rgba(229,111,81,.12); animation: v5-explain-signal 7s ease-in-out infinite; }
.v5-explain-signal i { position: absolute; inset: 50%; width: 10px; height: 10px; border: 1px solid rgba(255,245,226,.48); border-radius: 50%; transform: translate(-50%,-50%); animation: v5-explain-ring 7s ease-out infinite; }
.v5-explain-signal i:last-child { animation-delay: .55s; }
.v5-explain-path { position: absolute; left: 55.5%; top: 54%; width: 13%; height: 1px; overflow: hidden; background: linear-gradient(90deg, transparent, rgba(255,245,226,.75), transparent); transform: rotate(18deg) scaleX(0); transform-origin: right center; animation: v5-explain-path 7s cubic-bezier(.16,1,.3,1) infinite; }
.v5-explain-card { position: absolute; left: 45.5%; top: 41%; width: clamp(120px, 13vw, 200px); height: clamp(68px, 7vw, 104px); padding: 18px; display: grid; align-content: center; gap: 9px; border: 1px solid rgba(255,253,248,.42); border-radius: 14px; background: linear-gradient(135deg, rgba(255,248,238,.22), rgba(94,65,50,.18)); box-shadow: 0 18px 42px rgba(12,8,6,.22); backdrop-filter: blur(12px); opacity: 0; transform: translateY(12px) scale(.97); animation: v5-explain-card 7s cubic-bezier(.16,1,.3,1) infinite; }
.v5-explain-card i { display: block; height: 2px; border-radius: 999px; background: rgba(255,253,248,.72); }
.v5-explain-card i:nth-child(1) { width: 42%; }
.v5-explain-card i:nth-child(2) { width: 86%; opacity: .58; }
.v5-explain-card i:nth-child(3) { width: 64%; opacity: .42; }
.v5-logic-scrim { z-index: -2; background: linear-gradient(90deg, rgba(16,13,11,.88) 0%, rgba(16,13,11,.62) 42%, rgba(16,13,11,.18) 70%, rgba(16,13,11,.45) 100%), linear-gradient(0deg, rgba(16,13,11,.58), transparent 42%); }
.v5-logic-layout { height: 100%; padding: clamp(118px, 13vh, 154px) clamp(32px, 4.5vw, 82px) clamp(92px, 10vh, 118px); display: grid; grid-template-columns: minmax(320px, .9fr) minmax(310px, .55fr); gap: clamp(60px, 12vw, 220px); align-items: center; }
.v5-logic-copy { max-width: 620px; animation: v5-logic-copy-in 620ms cubic-bezier(.16,1,.3,1); }
.v5-logic-copy .v5-kicker { color: rgba(255,253,252,.72); }
.v5-logic-step-meta { margin: 0 0 16px; color: var(--v5-champagne); font: 650 11px/18px var(--v5-sans); letter-spacing: .16em; }
.v5-logic-copy h2 { margin: 0; font: 650 clamp(52px, 6vw, 88px)/1.02 var(--v5-sans); letter-spacing: -.06em; }
.v5-logic-copy > p:not(.v5-kicker):not(.v5-logic-step-meta) { max-width: 560px; margin: 26px 0 0; color: rgba(255,253,252,.82); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; }
.v5-logic-scroll-hint { display: block; margin-top: 54px; color: rgba(255,253,252,.46); font: 650 10px/18px var(--v5-sans); letter-spacing: .17em; }
.v5-logic-index { justify-self: end; width: min(100%, 380px); display: grid; gap: 4px; }
.v5-logic-index button { min-height: 58px; padding: 8px 2px 8px 24px; display: grid; grid-template-columns: 2px 1fr 28px; gap: 18px; align-items: center; border: 0; color: rgba(255,253,252,.5); background: transparent; text-align: left; transition: color 280ms ease, transform 280ms ease; }
.v5-logic-index button > span { width: 1px; height: 0; background: var(--v5-porcelain); transition: height 300ms ease; }
.v5-logic-index button strong { font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; }
.v5-logic-index button small { font-size: 13px; }
.v5-logic-index button[aria-selected="true"] { color: var(--v5-porcelain); transform: translateX(-8px); }
.v5-logic-index button[aria-selected="true"] > span { height: 28px; }
.v5-logic-boundary { position: absolute; left: clamp(32px, 4.5vw, 82px); right: clamp(32px, 4.5vw, 82px); bottom: 24px; margin: 0; color: rgba(255,253,252,.46); font-size: 11px; line-height: 1.7; }
@keyframes v5-logic-copy-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v5-explain-camera { from { transform: translate3d(0,0,0) scale(1.07); } to { transform: translate3d(-.8%,-.4%,0) scale(1.105); } }
@keyframes v5-explain-signal { 0%, 18%, 78%, 100% { opacity: 0; } 26%, 66% { opacity: 1; } }
@keyframes v5-explain-ring { 0%, 22% { opacity: 0; transform: translate(-50%,-50%) scale(.35); } 40% { opacity: .72; } 62%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(4.2); } }
@keyframes v5-explain-path { 0%, 31% { opacity: 0; transform: rotate(18deg) scaleX(0); } 43%, 68% { opacity: .8; transform: rotate(18deg) scaleX(1); } 80%, 100% { opacity: 0; transform: rotate(18deg) scaleX(1); } }
@keyframes v5-explain-card { 0%, 38% { opacity: 0; transform: translateY(12px) scale(.97); } 50%, 78% { opacity: 1; transform: translateY(0) scale(1); } 92%, 100% { opacity: 0; transform: translateY(-5px) scale(1); } }

.v5-app-bridge { position: relative; min-height: 75svh; overflow: hidden; color: var(--v5-porcelain); border-top: 1px solid rgba(255,253,252,.1); border-bottom: 0; background: radial-gradient(circle at 82% 18%, rgba(181,111,70,.17), transparent 34%), radial-gradient(circle at 8% 88%, rgba(112,83,68,.14), transparent 28%), linear-gradient(118deg, #211914 0%, #171310 68%); }
.v5-app-bridge::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: linear-gradient(90deg, transparent 0 4.45%, rgba(255,253,252,.12) 4.5% 4.55%, transparent 4.6% 100%); }
.v5-app-bridge-inner { position: relative; width: min(100%, 1760px); min-height: 75svh; margin: 0 auto; padding: clamp(86px, 12vh, 138px) clamp(32px, 4.5vw, 82px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.v5-app-bridge h2,
.v5-app-bridge h3 { max-width: 34ch; margin: 0; color: var(--v5-porcelain); font: 400 clamp(38px, 3.8vw, 60px)/1.08 var(--v5-sans); letter-spacing: -.045em; }
.v5-app-bridge h3 { margin-top: clamp(20px, 2.8vh, 32px); }
.v5-app-bridge .v5-reveal { width: 100%; display: flex; flex-wrap: wrap; overflow: visible; }
.v5-app-bridge .v5-reveal-letter { opacity: 1; color: rgba(255,253,252,.24); transform: none; transition: color 620ms cubic-bezier(.16,1,.3,1); }
.v5-app-bridge .v5-reveal.is-visible .v5-reveal-letter { color: var(--v5-porcelain); transform: none; }
.v5-app-bridge-primary .v5-reveal-letter { transition-delay: calc(var(--letter-index) * 70ms + 120ms); }
.v5-app-bridge-secondary .v5-reveal-letter { transition-delay: calc(var(--letter-index) * 55ms + 920ms); }
@media (max-width: 720px) {
  .v5-app-bridge-inner { min-height: 75svh; padding: clamp(88px, 13vh, 124px) 18px; }
  .v5-app-bridge h2,
  .v5-app-bridge h3 { max-width: 15ch; font-size: clamp(34px, 10.8vw, 44px); line-height: 1.12; letter-spacing: -.035em; }
}
@media (prefers-reduced-motion: reduce) {
  .v5-app-bridge .v5-reveal-letter { color: var(--v5-porcelain); transition: none; }
}

.v5-diary { position: relative; color: var(--v5-porcelain); background: #171310; }
.v5-diary-panel { position: relative; min-height: 100svh; padding: clamp(108px, 12vh, 138px) clamp(28px, 4.5vw, 82px) clamp(56px, 8vh, 86px); display: flex; align-items: center; isolation: isolate; border-top: 1px solid rgba(255,253,252,.13); background: radial-gradient(circle at 23% 48%, rgba(149,89,57,.15), transparent 36%), linear-gradient(118deg, #241c18, #171412 67%); }
.v5-diary-panel:first-child { border-top: 0; }
.v5-diary-panel::after { content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: #171310; opacity: 0; }
.v5-diary-panel-inner { position: relative; width: min(100%, 1760px); margin: 0 auto; display: grid; grid-template-columns: minmax(540px, 1.12fr) minmax(330px, .68fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.v5-diary.is-reveal-ready .v5-diary-panel::after { opacity: .76; transition: opacity 430ms cubic-bezier(.16,1,.3,1); }
.v5-diary.is-reveal-ready .v5-diary-panel-inner { opacity: 0; filter: blur(5px); transform: translateY(34px) scale(.994); transition: opacity 380ms ease-out 25ms, filter 440ms ease-out 25ms, transform 480ms cubic-bezier(.16,1,.3,1) 25ms; }
.v5-diary.is-reveal-ready .v5-diary-panel.is-visible::after { opacity: 0; }
.v5-diary.is-reveal-ready .v5-diary-panel.is-visible .v5-diary-panel-inner { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
.v5-diary-panel.scene-today .v5-diary-panel-inner,
.v5-diary-panel.scene-alerts .v5-diary-panel-inner { grid-template-columns: minmax(330px, .68fr) minmax(540px, 1.12fr); }
.v5-diary-panel.scene-today .v5-diary-visual,
.v5-diary-panel.scene-alerts .v5-diary-visual { grid-column: 2; grid-row: 1; }
.v5-diary-panel.scene-today .v5-diary-copy,
.v5-diary-panel.scene-alerts .v5-diary-copy { grid-column: 1; grid-row: 1; }
.v5-diary-visual { position: relative; z-index: 1; min-width: 0; height: min(68svh, 680px); min-height: 560px; overflow: visible; border: 1px solid rgba(210,205,199,.3); border-right-color: transparent; border-radius: clamp(22px, 2vw, 32px); background: #211c19; box-shadow: 0 30px 70px rgba(0,0,0,.24); }
.v5-diary-visual::after { content: ''; position: absolute; z-index: 3; top: -7%; right: clamp(-108px, -5.8vw, -64px); bottom: -7%; width: clamp(156px, 13vw, 224px); pointer-events: none; background: linear-gradient(90deg, rgba(33,28,25,0), rgba(27,22,19,.68) 48%, rgba(23,19,17,.16) 76%, rgba(23,19,17,0)); filter: blur(36px); opacity: .96; }
.v5-diary-photo { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: inherit; }
.v5-diary-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,12,10,.34), rgba(15,12,10,.02) 58%), linear-gradient(0deg, rgba(15,12,10,.5), transparent 54%); pointer-events: none; }
.v5-diary-photo > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.02); }
.v5-diary-panel-art::after { display: none; }
.v5-diary-panel-art > img { filter: none; }
@media (min-width: 769px) {
  .v5-diary-panel.scene-today .v5-diary-panel-art > img { object-position: 12% center; }
}
.v5-diary-panel.scene-alerts .v5-diary-visual { overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.v5-diary-panel.scene-alerts .v5-diary-visual::after { display: none; }
.v5-diary-panel.scene-alerts .v5-diary-photo { border-radius: 0; }
.v5-diary-panel.scene-alerts .v5-diary-panel-art > img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; transform: none; }
.v5-diary-summary-card,
.v5-diary-trend-card { position: absolute; left: clamp(18px, 4%, 38px); bottom: 52px; z-index: 2; width: min(58%, 470px); padding: clamp(18px, 2.2vw, 28px); border: 1px solid rgba(224,220,215,.42); border-radius: 22px; color: #fffdf9; background: rgba(31,27,24,.82); box-shadow: 0 18px 48px rgba(0,0,0,.26); backdrop-filter: blur(18px); }
.v5-diary-card-heading { padding-bottom: 16px; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.16); }
.v5-diary-card-heading span { color: rgba(255,253,249,.65); font-size: 11px; letter-spacing: .12em; }
.v5-diary-card-heading strong { font-size: 13px; font-weight: 560; }
.v5-diary-summary-card ul { margin: 0; padding: 0; list-style: none; }
.v5-diary-summary-card li { min-height: 68px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.11); }
.v5-diary-summary-card li:last-child { border-bottom: 0; }
.v5-diary-symbol { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; color: #f08a64; font-size: 16px; }
.v5-diary-summary-card li div { display: grid; gap: 3px; }
.v5-diary-summary-card li strong { font-size: 14px; font-weight: 560; }
.v5-diary-summary-card li small { color: rgba(255,253,249,.58); font-size: 11px; line-height: 1.5; }
.v5-diary-summary-card li b { color: rgba(255,253,249,.78); font-size: 11px; font-weight: 520; }
.v5-diary-full-screens { position: absolute; inset: 0; padding: 30px clamp(26px, 5vw, 66px) 48px; display: flex; justify-content: center; align-items: center; gap: clamp(18px, 2.2vw, 34px); background: radial-gradient(circle at 50% 47%, rgba(237,225,210,.13), transparent 56%); }
.v5-diary-full-screens figure { height: 100%; max-height: 590px; margin: 0; overflow: hidden; border: 1px solid rgba(199,196,191,.72); border-radius: 24px; background: #fbf8f3; box-shadow: 0 26px 52px rgba(0,0,0,.3); }
.v5-diary-full-screens img { width: auto; height: 100%; display: block; object-fit: contain; }
.v5-diary-trend-card { width: min(68%, 530px); }
.v5-diary-trend-card svg { width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.v5-diary-chart-grid { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 3 6; }
.v5-diary-chart-line-shadow { fill: none; stroke: rgba(0,0,0,.36); stroke-width: 8; }
.v5-diary-chart-line { fill: none; stroke: #f07855; stroke-width: 3.5; stroke-linecap: round; }
.v5-diary-chart-points { fill: #fffdf9; stroke: #f07855; stroke-width: 3; }
.v5-diary-chart-labels { fill: rgba(255,253,249,.6); font: 11px var(--v5-sans); }
.v5-diary-trend-card > p { margin: 5px 0 0; display: flex; justify-content: space-between; gap: 18px; color: rgba(255,253,249,.62); font-size: 11px; line-height: 1.5; }
.v5-diary-trend-card > p strong { color: #fffdf9; font-weight: 520; text-align: right; }
.v5-diary-visual-note { position: absolute; left: clamp(18px, 4%, 38px); right: clamp(18px, 4%, 38px); bottom: 18px; z-index: 4; margin: 0; display: flex; justify-content: space-between; color: rgba(255,253,252,.62); font: 600 9px/1.4 var(--v5-sans); letter-spacing: .12em; }
.v5-diary-copy { position: relative; z-index: 4; max-width: 540px; }
.v5-diary-scene-meta { margin: 0 0 22px; color: rgba(255,253,252,.62); font: 620 10px/1.5 var(--v5-sans); letter-spacing: .12em; }
.v5-diary-scene-meta span { color: var(--v5-ember); }
.v5-diary-copy h2 { max-width: 14ch; margin: 0; font: 500 clamp(36px, 3.2vw, 50px)/1.08 var(--v5-sans); letter-spacing: -.045em; }
.v5-diary-title-line { display: block; overflow: hidden; padding-bottom: .04em; }
.v5-diary-title-line > span { display: block; }
.v5-diary-copy > p:not(.v5-diary-scene-meta) { max-width: 560px; margin: 24px 0 0; color: rgba(255,253,252,.7); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.8; }
.v5-diary-facts { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.v5-diary-facts span { padding: 8px 10px; border: 1px solid rgba(255,253,252,.19); border-radius: 999px; color: rgba(255,253,252,.62); font-size: 10px; }
.v5-diary-boundary { margin: 0; padding: 20px clamp(28px, 4.5vw, 82px) 24px; border-top: 1px solid rgba(255,253,252,.13); color: rgba(255,253,252,.5); background: #171310; font-size: 10px; line-height: 1.7; text-align: center; }
@supports (animation-timeline: view()) {
  .v5-diary-panel { view-timeline-name: --v5-diary-panel; view-timeline-axis: block; }
  .v5-diary-panel-art { animation: v5-diary-visual-in 1ms cubic-bezier(.16,1,.3,1) both; animation-timeline: --v5-diary-panel; animation-range: entry 2% cover 36%; }
  .v5-diary-title-line > span { animation: v5-diary-title-in 1ms cubic-bezier(.16,1,.3,1) both; animation-timeline: --v5-diary-panel; animation-range: entry 8% cover 36%; }
  .v5-diary-title-line:nth-child(2) > span { animation-range: entry 13% cover 42%; }
  .v5-diary-copy > p:not(.v5-diary-scene-meta) { animation: v5-diary-copy-in 1ms ease-out both; animation-timeline: --v5-diary-panel; animation-range: entry 18% cover 48%; }
  .v5-diary-facts { animation: v5-diary-copy-in 1ms ease-out both; animation-timeline: --v5-diary-panel; animation-range: entry 24% cover 54%; }
}
@keyframes v5-diary-visual-in { from { opacity: .18; transform: translateY(44px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes v5-diary-title-in { from { opacity: 0; transform: translateY(108%); } to { opacity: 1; transform: translateY(0); } }
@keyframes v5-diary-copy-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .v5-diary.is-reveal-ready .v5-diary-panel::after { animation: none; opacity: 0; transition: none; }
  .v5-diary.is-reveal-ready .v5-diary-panel-inner { opacity: 1; filter: none; transform: none; transition: none; }
  .v5-diary-panel-art,
  .v5-diary-title-line > span,
  .v5-diary-copy > p:not(.v5-diary-scene-meta),
  .v5-diary-facts { animation: none; opacity: 1; transform: none; }
}

.v5-diy-intro { height: 155svh; min-height: 1080px; border-top: 1px solid rgba(23,19,16,.18); background: #f8f7f3; }
.v5-diy-intro-sticky { position: relative; height: 100%; min-height: inherit; overflow: hidden; color: var(--v5-ink); background: transparent; }
.v5-diy-intro-heading { position: absolute; left: 50%; top: clamp(136px, 16vh, 176px); z-index: 3; width: min(90vw, 1180px); text-align: center; opacity: var(--diy-intro-title-opacity, 1); transform: translate3d(-50%, var(--diy-intro-title-y, 0), 0); will-change: transform, opacity; }
.v5-diy-intro-heading .v5-kicker { margin: 0 0 clamp(18px, 2.4vh, 28px); color: var(--v5-cocoa); font-size: 10px; font-weight: 560; letter-spacing: .16em; }
.v5-diy-intro-heading h2 { margin: 0; font: 430 clamp(34px, 3.8vw, 56px)/1.02 var(--v5-sans); letter-spacing: -.055em; }
.v5-diy-intro-heading .v5-title-line { display: block; }
.v5-diy-intro-stage { position: absolute; left: clamp(18px, 3.6vw, 64px); right: clamp(18px, 3.6vw, 64px); top: clamp(320px, 38svh, 440px); bottom: clamp(96px, 12svh, 132px); z-index: 2; display: grid; place-items: center; isolation: isolate; overflow: hidden; opacity: var(--diy-intro-stage-opacity, 0); transform: translate3d(0, var(--diy-intro-stage-y, 16vh), 0); will-change: transform, opacity; }
.v5-diy-intro-stage::after { content: ''; position: absolute; inset: -2px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #f8f7f3 0, rgba(248,247,243,0) 8%, rgba(248,247,243,0) 92%, #f8f7f3 100%), linear-gradient(180deg, #f8f7f3 0, rgba(248,247,243,0) 10%, rgba(248,247,243,0) 88%, #f8f7f3 100%); }
.v5-diy-intro-stage img { width: 98vw; max-width: none; height: auto; max-height: none; display: block; object-fit: contain; object-position: center; mix-blend-mode: multiply; filter: saturate(.96) contrast(.98) brightness(1.01); -webkit-mask-image: linear-gradient(180deg, #000 0 94%, rgba(0,0,0,.72) 97%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 94%, rgba(0,0,0,.72) 97%, transparent 100%); }
.v5-diy-intro-prompt { position: absolute; left: clamp(28px, 5vw, 86px); right: clamp(28px, 5vw, 86px); bottom: clamp(18px, 3vh, 28px); z-index: 4; min-height: 84px; padding-top: 14px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; border-top: 0; color: var(--v5-cocoa); font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.v5-diy-intro-prompt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms ease; }
.v5-diy-intro-prompt:hover svg { transform: translateY(4px); }
.v5-diy-intro-prompt:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: 4px; }

.v5-diy { height: 100svh; min-height: 720px; outline: 0; background: #f8f7f3; }
.v5-diy:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: -4px; }
.v5-diy-sticky { position: relative; height: 100%; min-height: 720px; padding: clamp(92px, 10vh, 112px) clamp(22px, 4vw, 72px) clamp(20px, 3vh, 34px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.v5-diy-heading { position: relative; z-index: 8; max-width: 460px; }
.v5-diy-series { position: static; z-index: 7; display: flex; gap: 28px; align-items: flex-end; }
.v5-diy-series button { min-width: 112px; min-height: 44px; padding: 0 0 8px; display: grid; justify-items: start; gap: 4px; border: 0; border-bottom: 1px solid transparent; color: rgba(81,74,65,.56); background: transparent; font: 520 12px/1.2 var(--v5-sans); cursor: pointer; transition: color 220ms ease, border-color 220ms ease, opacity 220ms ease; }
.v5-diy-series button span { font-size: 8px; font-weight: 560; letter-spacing: .14em; opacity: .68; }
.v5-diy-series button[aria-selected="true"] { border-bottom-color: var(--v5-ink); color: var(--v5-ink); }
.v5-diy-series button:hover { color: var(--v5-ink); }
.v5-diy-series button:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: 2px; }
.v5-diy-gallery { position: relative; min-height: 0; isolation: isolate; touch-action: pan-y; perspective: 1500px; perspective-origin: 50% 45%; }
.v5-diy-gallery::before { content: ''; position: absolute; left: 50%; top: 45%; z-index: 0; width: min(51vw, 775px); aspect-ratio: 1.72; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.72) 0 27%, rgba(224,216,204,.1) 52%, transparent 72%); transform: translate(-50%, -50%) rotate(-7deg); pointer-events: none; }
.v5-diy-cards { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; }
.v5-diy-card { position: absolute; left: 50%; top: 45%; width: min(46.5vw, 706px); padding: 0; border: 0; background: transparent; opacity: var(--diy-opacity, 0); pointer-events: none; transform: translate3d(calc(-50% + var(--diy-x, 0vw)), calc(-50% + var(--diy-y, 0vh)), var(--diy-z, -560px)) rotateY(var(--diy-rotate-y, 0deg)) rotateZ(var(--diy-rotate-z, 0deg)) scale(var(--diy-scale, .5)); transform-origin: center; transform-style: preserve-3d; cursor: pointer; filter: blur(var(--diy-blur, 0)) saturate(var(--diy-saturation, 1)); will-change: transform, opacity, filter; transition: transform 620ms cubic-bezier(.22,.61,.36,1), opacity 360ms ease, filter 440ms ease; }
.v5-diy-card img { width: 100%; height: auto; display: block; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(52,44,34,.13)); }
.v5-diy-card[aria-hidden="false"] { pointer-events: auto; }
.v5-diy-card:focus-visible { outline: 3px solid var(--v5-ember); outline-offset: 4px; }
.v5-diy-caption { position: absolute; left: 50%; top: 76%; bottom: auto; z-index: 40; width: min(38vw, 520px); opacity: var(--diy-caption-reveal, 0); transform: translate(-50%, var(--diy-caption-y, 18px)); pointer-events: none; text-align: center; transition: opacity 110ms linear, transform 180ms cubic-bezier(.16,1,.3,1); }
.v5-diy-caption > p:first-child { margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--v5-cocoa); font: 650 10px/1.4 var(--v5-sans); letter-spacing: .1em; }
.v5-diy-caption > p:first-child span { color: var(--v5-ember); }
.v5-diy-caption h3 { margin: 10px 0 0; font: 650 clamp(28px, 3vw, 46px)/1.05 var(--v5-sans); letter-spacing: -.045em; }
.v5-diy-caption > p:last-child { max-width: 520px; margin: 14px auto 0; color: var(--v5-cocoa); font-size: 13px; line-height: 1.75; }
.v5-diy-footer { position: relative; z-index: 40; min-height: 52px; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.v5-diy-footer a { padding-bottom: 5px; border-bottom: 1px solid var(--v5-ink); font-size: 12px; font-weight: 650; white-space: nowrap; }
.v5-diy-nav { display: flex; gap: 10px; }
.v5-diy-nav button { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: #5d5d62; background: #e5e5e8; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.v5-diy-nav button:hover:not(:disabled) { color: #1d1d1f; background: #d7d7db; transform: scale(1.04); }
.v5-diy-nav button:active:not(:disabled) { transform: scale(.96); }
.v5-diy-nav button:disabled { color: #b6b6ba; background: #f0f0f2; cursor: default; }
.v5-diy-nav button:focus-visible { outline: 2px solid var(--v5-ink); outline-offset: 3px; }
.v5-diy-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.v5-validation { position: relative; min-height: 100svh; padding-top: clamp(104px, 12vh, 142px); padding-bottom: clamp(104px, 12vh, 142px); display: grid; grid-template-columns: minmax(380px, 1fr) minmax(500px, 1fr); gap: clamp(48px, 6vw, 104px); align-items: start; color: var(--v5-porcelain); background: linear-gradient(125deg, #514a41, #1e1c19); }
.v5-validation-copy { position: sticky; top: clamp(118px, 17vh, 168px); z-index: 2; align-self: start; height: max-content; max-width: 530px; opacity: 1; transform: none; }
.v5-validation.is-visible .v5-validation-copy { opacity: 1; transform: none; }
.v5-validation .v5-validation-copy h2 { max-width: 12ch; font: 480 clamp(34px, 3.2vw, 46px)/1.08 var(--v5-sans); letter-spacing: -.045em; text-wrap: balance; }
.v5-validation .v5-validation-copy h2 .v5-title-line { white-space: nowrap; }
.v5-validation-copy > p { max-width: 500px; margin-top: 32px; color: rgba(255,253,252,.68); font-size: clamp(12px, .95vw, 14px); line-height: 1.65; }
.v5-companion-features { display: grid; }
.v5-companion-features article { min-height: clamp(176px, 24svh, 250px); padding: clamp(36px, 5vh, 54px) 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 22px; align-content: center; align-items: center; opacity: 1; transform: translateY(12px); transition: transform 520ms cubic-bezier(.16,1,.3,1); }
.v5-companion-features article.is-active { transform: translateY(0); }
.v5-companion-features article > div { opacity: .34; transition: opacity 360ms ease; }
.v5-companion-features article.is-active > div { opacity: 1; }
.v5-companion-icon { width: 52px; height: 52px; display: grid; place-items: center; align-self: start; color: var(--v5-porcelain); }
.v5-companion-icon svg { width: 40px; height: 40px; display: block; }
.v5-companion-features h3 { margin: 0; color: var(--v5-porcelain); font: 520 clamp(17px, 1.35vw, 21px)/1.35 var(--v5-sans); letter-spacing: -.025em; }
.v5-companion-features p { max-width: 560px; margin: 7px 0 0; color: rgba(255,253,252,.6); font-size: clamp(12px, .95vw, 14px); line-height: 1.65; }
.v5-button-light { margin-top: 38px; color: var(--v5-ink); background: var(--v5-porcelain); }
.v5-roadmap { border-top: 1px solid rgba(255,255,255,.18); }
.v5-roadmap article { min-height: 170px; padding: 28px 6px; display: grid; grid-template-columns: 62px 1fr; border-bottom: 1px solid rgba(255,255,255,.18); }
.v5-roadmap article > span { grid-row: 1 / 3; color: var(--v5-ember); font: 650 10px/18px var(--v5-sans); letter-spacing: .16em; }
.v5-roadmap article > strong { font: 600 22px/30px var(--v5-sans); }
.v5-roadmap article > p { margin: 10px 0 0; color: rgba(255,253,252,.56); font-size: 13px; line-height: 1.75; }

.v5-vision { min-height: 100svh; padding: clamp(78px, 8.5vh, 90px) 0 clamp(16px, 1.8vh, 24px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #f7f5f0; }
.v5-vision-heading { margin: 0 clamp(22px, 10vw, 192px) clamp(18px, 2.2vh, 26px); display: grid; grid-template-columns: minmax(340px, .72fr) minmax(380px, 1fr); column-gap: clamp(42px, 6vw, 110px); align-items: end; }
.v5-vision-heading > .v5-kicker { grid-column: 1 / -1; margin-bottom: clamp(10px, 1.4vh, 16px); font-size: 11px; font-weight: 500; }
.v5-vision-heading h2 { max-width: 580px; margin: 0; font: 400 clamp(27px, 2.65vw, 40px)/1.1 var(--v5-sans); letter-spacing: -.04em; }
.v5-vision-heading > div { align-self: end; }
.v5-vision-heading > div > p:first-child { max-width: 620px; margin: 0; color: var(--v5-cocoa); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.72; }
.v5-vision-note { max-width: 620px; margin: 12px 0 0; color: rgba(81,74,65,.65); font-size: 11px; line-height: 1.55; }
.v5-vision-track {
  display: flex; gap: clamp(24px, 2.6vw, 46px); padding: 0 clamp(22px, 10vw, 192px) 6px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: clamp(22px, 10vw, 192px); scrollbar-width: none; overscroll-behavior-inline: contain;
}
.v5-vision-track::-webkit-scrollbar { display: none; }
.v5-vision-track:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: -2px; }
.v5-vision-card {
  flex: 0 0 min(43vw, 780px); min-width: 0; position: relative; overflow: hidden; scroll-snap-align: start; opacity: .32; cursor: pointer;
  border: 1px solid rgba(32,33,31,.1); border-radius: 16px; background: rgba(255,255,255,.72); transform: scale(.975); transform-origin: center; transition: opacity 420ms ease, transform 540ms cubic-bezier(.16,1,.3,1), border-color 240ms ease;
}
.v5-vision-card.is-active { opacity: 1; border-color: rgba(32,33,31,.22); transform: scale(1); }
.v5-vision-card:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: 3px; }
.v5-vision-card figure { width: 100%; aspect-ratio: 2.15 / 1; margin: 0; overflow: hidden; background: #ddd5ca; }
.v5-vision-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 46%; transform: scale(1.012); transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 420ms ease; filter: saturate(.68); }
.v5-vision-card.is-active img { transform: scale(1); filter: saturate(1); }
.v5-vision-card > div { padding: clamp(13px, 1.5vh, 17px) clamp(16px, 1.6vw, 24px) clamp(15px, 1.7vh, 19px); }
.v5-vision-card > div > p:first-child { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--v5-cocoa); font-size: 11px; font-weight: 500; letter-spacing: .07em; }
.v5-vision-card > div > p:first-child span { color: var(--v5-ember); }
.v5-vision-card h3 { max-width: 680px; margin: 7px 0 0; font: 400 clamp(16px, 1.22vw, 20px)/1.36 var(--v5-sans); letter-spacing: -.025em; }
.v5-vision-card > div > p:last-child { max-width: 680px; margin: 7px 0 0; color: var(--v5-cocoa); font-size: 11px; line-height: 1.58; }
.v5-vision-controls { margin: clamp(7px, 1vh, 11px) clamp(22px, 10vw, 192px) 0; display: flex; justify-content: flex-start; gap: 18px; align-items: center; }
.v5-vision-progress { display: flex; flex: 0 0 auto; inline-size: max-content; max-inline-size: 100%; gap: 10px; align-items: center; }
.v5-vision-progress > span { width: auto; flex: 0 0 52px; min-height: 24px; display: flex; align-items: center; transition: flex-basis 420ms cubic-bezier(.16,1,.3,1); }
.v5-vision-progress > span.is-active { width: auto; flex-basis: 150px; }
.v5-vision-progress > span i { width: 100%; height: 2px; position: relative; display: block; overflow: hidden; background: #d5d0c8; }
.v5-vision-progress > span i::after { content: ''; position: absolute; inset: 0; background: var(--v5-ink); transform: scaleX(0); transform-origin: left; }
.v5-vision-progress > span.is-active i::after { animation: v5-vision-progress 3s linear forwards; }
.v5-vision-count { flex: 0 0 auto; color: var(--v5-cocoa); font: 650 11px/1 var(--v5-sans); letter-spacing: .12em; white-space: nowrap; }
.v5-vision-boundary { max-width: 980px; margin: clamp(7px, 1vh, 12px) clamp(22px, 10vw, 192px) 0; color: rgba(81,74,65,.62); font-size: 10px; line-height: 1.5; }

@keyframes v5-vision-progress { to { transform: scaleX(1); } }

.v5-waitlist { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: clamp(54px, 9vw, 140px); align-items: start; background: var(--v5-paper); }
.v5-form-panel { padding: clamp(28px, 4vw, 54px); border: 1px solid var(--v5-line); background: rgba(255,253,252,.75); }
.v5-form-panel form { display: grid; gap: 22px; }
.v5-form-panel label { display: grid; gap: 9px; color: var(--v5-cocoa); font-size: 12px; font-weight: 650; }
.v5-form-panel input,
.v5-form-panel select { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--v5-line); border-radius: 0; color: var(--v5-ink); background: var(--v5-porcelain); outline: 0; }
.v5-form-panel textarea { width: 100%; min-height: 104px; padding: 13px 14px; resize: vertical; border: 1px solid var(--v5-line); border-radius: 0; color: var(--v5-ink); background: var(--v5-porcelain); outline: 0; line-height: 1.7; }
.v5-form-panel input:focus,
.v5-form-panel select:focus { border-color: var(--v5-ember); box-shadow: 0 0 0 2px rgba(232,97,67,.12); }
.v5-form-panel textarea:focus { border-color: var(--v5-ember); box-shadow: 0 0 0 2px rgba(232,97,67,.12); }
.v5-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v5-form-panel .v5-check { min-height: 44px; display: flex; grid-template-columns: none; align-items: center; gap: 12px; }
.v5-check input { width: 19px; height: 19px; accent-color: var(--v5-ember); }
.v5-form-panel .v5-button { width: 100%; justify-content: space-between; border: 0; }
.v5-form-panel form > small { color: rgba(81,74,65,.62); font-size: 11px; line-height: 1.7; }
.v5-success { min-height: 520px; display: grid; align-content: center; justify-items: start; }
.v5-success > span { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: var(--v5-sage); font-size: 22px; }
.v5-success h3 { margin: 28px 0 0; font: 650 32px/1.2 var(--v5-sans); }
.v5-success p { max-width: 480px; margin: 18px 0 0; color: var(--v5-cocoa); font-size: 14px; line-height: 1.8; }
.v5-success button { margin-top: 28px; padding: 0 0 6px; border: 0; border-bottom: 1px solid; background: transparent; }

.v5-footer { min-height: 290px; padding: 56px clamp(22px, 6vw, 104px); display: grid; grid-template-columns: auto minmax(160px,.6fr) minmax(260px,1fr) minmax(320px,1.3fr) auto; gap: clamp(24px, 3vw, 54px); align-items: start; color: var(--v5-porcelain); background: #141310; }
.v5-footer p { margin: 7px 0 0; color: rgba(255,253,252,.55); font-size: 11px; line-height: 1.75; }
.v5-footer > a:last-child { margin-top: 7px; color: var(--v5-ember); font-size: 11px; white-space: nowrap; }

@media (max-width: 980px) {
  .v5-header { width: calc(100% - 28px); padding-left: 22px; }
  .v5-nav-primary { gap: 18px !important; }
  .v5-nav-primary a:nth-child(3),
  .v5-nav-primary a:nth-child(4) { display: none; }
  .v5-heading-split,
  .v5-module-layout,
  .v5-validation,
  .v5-waitlist { grid-template-columns: 1fr; }
  .v5-validation { min-height: auto; gap: 52px; }
  .v5-validation-copy { position: static; max-width: 720px; }
  .v5-companion-features { max-width: 760px; }
  .v5-companion-features article { min-height: clamp(160px, 24svh, 220px); padding: 40px 0; }
  .v5-module-visual { min-height: 68vw; }
  .v5-diary-panel { min-height: auto; padding-block: 118px 78px; }
  .v5-diary-panel-inner { grid-template-columns: 1fr; gap: 42px; }
  .v5-diary-panel.scene-today .v5-diary-panel-inner,
  .v5-diary-panel.scene-alerts .v5-diary-panel-inner { grid-template-columns: 1fr; }
  .v5-diary-panel.scene-today .v5-diary-visual,
  .v5-diary-panel.scene-alerts .v5-diary-visual,
  .v5-diary-panel.scene-today .v5-diary-copy,
  .v5-diary-panel.scene-alerts .v5-diary-copy { grid-column: auto; grid-row: auto; }
  .v5-diary-visual { height: min(70svh, 680px); }
  .v5-diary-visual::after { display: none; }
  .v5-diary-copy { max-width: 720px; }
  .v5-diary-copy h2 { max-width: 13ch; font-size: clamp(36px, 6vw, 50px); }
  .v5-diy-card { width: min(56vw, 700px); }
  .v5-footer { grid-template-columns: 1fr 1fr; }
  .v5-logic-layout { grid-template-columns: 1fr minmax(260px, .55fr); gap: 44px; }
}

@media (max-width: 720px) {
  .v5-header { top: 10px; height: 58px; grid-template-columns: auto 1fr; padding: 5px 5px 5px 18px; }
  .v5-nav-primary { display: none !important; }
  .v5-header-brand { position: static; justify-self: start; font-size: 27px; }
  .v5-nav-secondary { grid-column: 2; }
  .v5-nav-action { min-height: 46px; padding-inline: 16px; font-size: 10px; }
  .v5-menu-dots { width: 46px; height: 46px; }
  .v5-logic { height: 300svh; }
  .v5-logic-sticky { min-height: 620px; }
  .v5-logic-layout { padding: 102px 22px 92px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 32px; }
  .v5-logic-copy { max-width: 540px; }
  .v5-logic-copy .v5-kicker { margin-bottom: 18px; }
  .v5-logic-copy h2 { font-size: clamp(44px, 13vw, 62px); }
  .v5-logic-copy > p:not(.v5-kicker):not(.v5-logic-step-meta) { margin-top: 16px; font-size: 15px; line-height: 1.7; }
  .v5-logic-scroll-hint { display: none; }
  .v5-logic-index { justify-self: auto; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.25); }
  .v5-logic-index button { min-height: 68px; padding: 14px 6px; grid-template-columns: 1fr; gap: 3px; border-bottom: 2px solid transparent; }
  .v5-logic-index button > span { display: none; }
  .v5-logic-index button strong { font-size: 14px; }
  .v5-logic-index button small { grid-row: 1; font-size: 10px; }
  .v5-logic-index button[aria-selected="true"] { border-bottom-color: var(--v5-ember); transform: none; }
  .v5-logic-boundary { left: 22px; right: 22px; bottom: 14px; font-size: 10px; }
  .v5-validation { gap: 40px; }
  .v5-validation .v5-validation-copy h2 { max-width: 12ch; font-size: clamp(26px, 7.2vw, 36px); }
  .v5-validation-copy > p { margin-top: 22px; font-size: 13px; line-height: 1.65; }
  .v5-companion-features article { min-height: 150px; padding: 38px 0; grid-template-columns: 50px minmax(0, 1fr); gap: 14px; }
  .v5-companion-icon { width: 46px; height: 46px; }
  .v5-companion-icon svg { width: 36px; height: 36px; }
  .v5-companion-features h3 { font-size: 17px; }
  .v5-companion-features p { margin-top: 5px; font-size: 13px; }
  .v5-diary-panel { padding: 96px 18px 64px; }
  .v5-diary-panel-inner { gap: 28px; }
  .v5-diary-visual { height: min(72svh, 600px); min-height: 520px; border-radius: 20px; }
  .v5-diary-summary-card,
  .v5-diary-trend-card { left: 14px; bottom: 46px; width: calc(100% - 28px); padding: 16px; border-radius: 16px; }
  .v5-diary-summary-card li { min-height: 62px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  .v5-diary-summary-card li small { font-size: 10px; }
  .v5-diary-photo > img { object-position: 58% center; }
  .v5-diary-trend-card svg { max-height: 220px; }
  .v5-diary-full-screens { position: relative; inset: auto; min-height: 0; padding: 24px 18px 42px; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .v5-diary-full-screens figure { width: min(78vw, 330px); height: auto; max-height: none; border-radius: 20px; }
  .v5-diary-full-screens img { width: 100%; height: auto; }
  .v5-diary-visual-note { left: 14px; right: 14px; bottom: 14px; font-size: 7px; }
  .v5-diary-copy { align-self: start; max-width: 620px; }
  .v5-diary-scene-meta { margin-bottom: 10px; }
  .v5-diary-copy h2 { max-width: 12ch; font-size: clamp(28px, 7.6vw, 38px); }
  .v5-diary-copy > p:not(.v5-diary-scene-meta) { margin-top: 12px; font-size: 14px; line-height: 1.68; }
  .v5-diary-facts { margin-top: 18px; display: flex; }
  .v5-diy-intro { height: 145svh; min-height: 900px; }
  .v5-diy-intro-sticky { position: relative; height: 100%; min-height: inherit; }
  .v5-diy-intro-heading { top: 116px; width: calc(100% - 36px); opacity: 1; transform: translateX(-50%); }
  .v5-diy-intro-heading .v5-kicker { margin-bottom: 18px; font-size: 8px; }
  .v5-diy-intro-heading h2 { font-size: clamp(25px, 7.4vw, 31px); line-height: 1.06; letter-spacing: -.045em; }
  .v5-diy-intro-stage { left: 0; right: 0; top: 30%; bottom: 112px; opacity: 1; transform: none; }
  .v5-diy-intro-stage img { width: 100%; max-width: none; height: auto; max-height: 100%; object-fit: contain; object-position: center; }
  .v5-diy-intro-prompt { left: 18px; right: 18px; bottom: 14px; font-size: clamp(20px, 6vw, 24px); }
  .v5-diy { height: auto; }
  .v5-diy-sticky { position: relative; height: auto; min-height: 0; padding: 92px 22px 72px; display: block; overflow: hidden; }
  .v5-diy-heading { max-width: 360px; }
  .v5-diy-gallery { min-height: 620px; margin-top: 24px; padding-top: 0; }
  .v5-diy-gallery::before { left: 50%; top: 30%; width: 118vw; }
  .v5-diy-series { position: static; width: 100%; gap: 20px; }
  .v5-diy-series button { min-width: 0; width: auto; flex: 1; min-height: 48px; }
  .v5-diy-cards { position: relative; height: min(68vw, 360px); }
  .v5-diy-card { display: none; }
  .v5-diy-card[data-active="true"] { position: absolute; left: 50%; top: 50%; width: min(104vw, 480px); display: block; opacity: 1; filter: none; transform: translate3d(-50%, -50%, 0) scale(.84); }
  .v5-diy-caption { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 8px; opacity: 1; transform: none; text-align: left; }
  .v5-diy-caption > p:first-child { justify-content: flex-start; }
  .v5-diy-caption > p:last-child { max-width: 520px; }
  .v5-diy-footer { margin-top: 26px; align-items: flex-end; gap: 16px; }
  .v5-diy-footer a { margin-right: auto; white-space: normal; }
  .v5-diy-nav { flex: 0 0 auto; }
  .v5-field-row { grid-template-columns: 1fr; }
  .v5-footer { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .v5-hero-image,
  .v5-hero-motion-layer { object-position: 64% center; }
  .v5-hero-media { margin-inline: -22px; }
  .v5-hero-media { margin-inline: -22px; }
  .v5-shell { padding-block: 92px; }
  .v5-section-heading h2,
  .v5-validation h2,
  .v5-waitlist h2 { font-size: clamp(38px, 11vw, 54px); }
  .v5-section-heading { margin-bottom: 48px; }
  .v5-module-visual { min-height: 92vw; margin-inline: -22px; }
  .v5-module-tabs button { min-height: 104px; }
  .v5-logic-detail { align-items: flex-start; flex-direction: column; gap: 8px; }
  .v5-diy-gallery { min-height: 590px; }
  .v5-diary-trend-card > p { flex-direction: column; gap: 4px; }
  .v5-diary-trend-card > p strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-module-visual img { animation: none; }
  .v5-logic-index button { transform: none !important; }
  .v5-diary-panel,
  .v5-diary-copy,
  .v5-diary-summary-card,
  .v5-diary-trend-card { animation: none; transition: none; }
  .v5-validation-copy,
  .v5-companion-features article { opacity: 1; transform: none; transition: none; }
  .v5-diy-intro { height: auto; min-height: 100svh; }
  .v5-diy-intro-sticky { position: relative; }
  .v5-diy-intro-heading { opacity: 1; transform: translateX(-50%); }
  .v5-diy-intro-stage { opacity: 1; transform: none; }
  .v5-diy-intro-prompt svg { transition: none; }
  .v5-diy { height: auto; }
  .v5-diy-sticky { position: relative; height: auto; min-height: 100svh; }
  .v5-diy-card { transition: none; }
  .v5-diy-caption { opacity: 1; transform: none; transition: none; }
  .v5-logic { height: auto; }
  .v5-logic-sticky { position: relative; min-height: 100svh; }
  .v5-logic-backgrounds figure { display: none; transition: none; }
  .v5-logic-backgrounds figure.is-active { display: block; }
  .v5-logic-backgrounds img { height: 100%; transform: none !important; transition: none; }
  .v5-logic-backgrounds figure.is-explain-motion.is-active img,
  .v5-explain-signal,
  .v5-explain-signal i,
  .v5-explain-path,
  .v5-explain-card { animation: none; }
  .v5-explain-motion { display: none; }
  .v5-logic-copy { animation: none; }
}

/* 2026-09-27 — unified sans typography and full-bleed home hero */
.v5-header {
  transition:
    top 420ms cubic-bezier(.16, 1, .3, 1),
    width 420ms cubic-bezier(.16, 1, .3, 1),
    height 420ms cubic-bezier(.16, 1, .3, 1),
    padding 420ms cubic-bezier(.16, 1, .3, 1),
    border-radius 420ms cubic-bezier(.16, 1, .3, 1),
    color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}
.v5-brand { display: inline-flex; align-items: center; justify-content: center; }
.v5-brand-logo { display: block; width: clamp(68px, 5.2vw, 82px); height: auto; }
.v5-brand-logo.is-compact { width: 42px; }
.v5-header .v5-brand-logo,
.v5-footer .v5-brand-logo { filter: invert(1) brightness(1.06); }
.v5-header-brand { min-width: 82px; }
.v5-header.is-hero {
  top: 0; width: 100%; max-width: none; height: 72px; padding: 0 clamp(28px, 4.6vw, 88px);
  border: 0; border-bottom: 1px solid rgba(30, 28, 25, .12); border-radius: 0; color: var(--v5-ink); background: rgba(255, 253, 252, .96);
  box-shadow: none; backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.v5-header.is-hero .v5-nav-primary { gap: clamp(24px, 2.4vw, 46px); }
.v5-header.is-hero .v5-header-brand { color: var(--v5-ink); }
.v5-header.is-hero .v5-brand-logo { width: clamp(70px, 4.6vw, 78px); filter: none; }
.v5-header.is-hero .v5-nav-action { min-height: 48px; padding-inline: 23px; color: var(--v5-porcelain); background: var(--v5-ink); }
.v5-header.is-hero .v5-nav-action:hover { color: var(--v5-porcelain); background: var(--v5-ember); }
.v5-header.is-hero .v5-menu-dots { width: 46px; height: 46px; color: var(--v5-ink); background: transparent; }
.v5-header.is-hero .v5-menu-dots:hover { color: var(--v5-porcelain); background: var(--v5-ink); }

.v5-hero {
  min-height: 100svh; padding: 78px 8px 8px; display: grid; grid-template-columns: 1fr; align-items: center;
  color: var(--v5-porcelain); background: var(--v5-porcelain); isolation: isolate;
}
.v5-hero::before { display: none; }
.v5-hero-copy {
  position: relative; z-index: 5; max-width: 620px; margin-left: clamp(40px, 4vw, 76px); padding: 0;
}
.v5-hero .v5-kicker,
.v5-hero .v5-lead,
.v5-hero .v5-disclaimer { color: rgba(255, 253, 252, .82); }
.v5-hero .v5-kicker { margin-bottom: 20px; }
.v5-hero h1 { font-size: clamp(40px, 4.6vw, 76px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.v5-hero .v5-lead { max-width: 530px; margin-top: 24px; }
.v5-hero .v5-actions { margin-top: 30px; gap: 12px; }
.v5-hero .v5-button,
.v5-hero .v5-text-link {
  min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px;
}
.v5-hero .v5-button { gap: 32px; color: var(--v5-ink); background: var(--v5-porcelain); }
.v5-hero .v5-button:hover { color: var(--v5-porcelain); background: var(--v5-ember); }
.v5-hero .v5-text-link { border: 1px solid rgba(255,255,255,.52); color: var(--v5-porcelain); background: rgba(255,255,255,.1); }
.v5-hero .v5-text-link:hover { border-color: var(--v5-porcelain); background: rgba(255,255,255,.18); }
.v5-hero .v5-disclaimer { margin-top: 22px; font-size: 12px; }
.v5-hero-media {
  position: absolute; inset: 78px 8px 8px; z-index: 1; height: auto; min-height: 0; margin: 0;
  border-radius: 16px; background: #30251f;
}
.v5-hero-media::after {
  background:
    linear-gradient(90deg, rgba(12,9,7,.82) 0%, rgba(12,9,7,.54) 32%, rgba(12,9,7,.12) 63%, rgba(12,9,7,.05) 100%),
    linear-gradient(0deg, rgba(12,9,7,.34), transparent 48%);
  box-shadow: none;
}
.v5-hero-index { color: rgba(255,253,252,.78); }
.v5-dog-motion-layer.is-active,
.v5-cat-motion-layer.is-active { opacity: 1; }

.v5-statement h2 { font-size: clamp(32px, 4vw, 58px); letter-spacing: -.045em; }
.v5-product h2 { font-size: clamp(30px, 3vw, 48px); letter-spacing: -.045em; }
.v5-next h2 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.04em; }
.v5-section-heading h2,
.v5-validation h2,
.v5-waitlist h2 { font-size: clamp(32px, 3.8vw, 56px); letter-spacing: -.045em; }
.v5-module-tabs button strong { font-size: 16px; }
.v5-logic-copy h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
.v5-roadmap article > strong { font-size: 18px; line-height: 1.45; }
.v5-success h3 { font-size: 25px; }

@media (max-width: 980px) {
  .v5-header.is-hero { width: 100%; padding: 0 24px; }
  .v5-hero { padding: 78px 8px 8px; }
  .v5-hero-copy { margin-left: clamp(30px, 5vw, 54px); padding: 0; }
  .v5-hero-media { inset: 78px 8px 8px; height: auto; min-height: 0; margin: 0; }
  .v5-product h2 { font-size: clamp(30px, 4.2vw, 44px); }
  .v5-vision-heading { grid-template-columns: 1fr; gap: 18px; }
  .v5-vision-heading > .v5-kicker { grid-column: auto; margin-bottom: 0; }
  .v5-vision-heading h2,
  .v5-vision-heading > div { max-width: 640px; }
}

@media (max-width: 720px) {
  .v5-header.is-hero {
    top: 0; width: 100%; height: 62px; padding: 0 10px 0 18px; grid-template-columns: auto 1fr;
    border-radius: 0;
  }
  .v5-header.is-hero .v5-header-brand { font-size: 22px; }
  .v5-header.is-hero .v5-brand-logo { width: 64px; }
  .v5-header.is-hero .v5-nav-action { min-height: 42px; padding-inline: 14px; }
  .v5-header.is-hero .v5-menu-dots { width: 42px; height: 42px; padding: 12px; }
  .v5-hero { min-height: 100svh; padding: 76px 6px 6px; }
  .v5-hero-copy { max-width: min(86vw, 410px); margin-left: 18px; padding: 0; }
  .v5-hero h1 { font-size: clamp(34px, 9.6vw, 46px); font-weight: 400; line-height: 1.06; letter-spacing: -.035em; }
  .v5-hero .v5-kicker { margin-bottom: 15px; font-size: 10px; }
  .v5-hero .v5-lead { max-width: 330px; margin-top: 18px; font-size: 16px; line-height: 1.55; }
  .v5-hero .v5-actions { margin-top: 22px; flex-direction: row; flex-wrap: wrap; gap: 9px; }
  .v5-hero .v5-button,
  .v5-hero .v5-text-link { min-height: 48px; padding-inline: 16px; font-size: 12px; }
  .v5-hero .v5-button { gap: 18px; }
  .v5-hero .v5-disclaimer { max-width: 300px; margin-top: 16px; font-size: 11px; line-height: 1.55; }
  .v5-hero-media { inset: 76px 6px 6px; height: auto; min-height: 0; margin: 0; border-radius: 12px; }
  .v5-hero-media::after { background: linear-gradient(90deg, rgba(12,9,7,.78), rgba(12,9,7,.28) 78%), linear-gradient(0deg, rgba(12,9,7,.38), transparent 52%); }
  .v5-logic-copy h2 { font-size: clamp(30px, 9vw, 40px); }
  .v5-vision { min-height: auto; padding-block: 88px 64px; }
  .v5-vision-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .v5-vision-heading > .v5-kicker { grid-column: auto; margin-bottom: 0; }
  .v5-vision-heading h2 { max-width: 520px; font-size: clamp(29px, 8.4vw, 38px); font-weight: 400; }
  .v5-vision-heading > div { max-width: 640px; }
  .v5-vision-card { flex-basis: calc(100vw - 28px); }
  .v5-vision-card figure { aspect-ratio: 1.78 / 1; }
  .v5-vision-card > div { padding-inline: 18px; }
  .v5-vision-controls { gap: 12px; }
  .v5-vision-progress { gap: 7px; }
  .v5-vision-progress > span { width: auto; flex-basis: 28px; }
  .v5-vision-progress > span.is-active { width: auto; flex-basis: 76px; }
}

@media (max-width: 620px) {
  .v5-hero-media { margin: 0; }
  .v5-hero-image,
  .v5-hero-motion-layer { object-position: 64% center; }
  .v5-section-heading h2,
  .v5-validation h2,
  .v5-waitlist h2 { font-size: clamp(30px, 8.5vw, 42px); }
  .v5-product h2 { font-size: clamp(29px, 8vw, 38px); }
}

@media (prefers-reduced-motion: reduce) {
  .v5-header { transition: none; }
  .v5-hero-motion-layer { display: none; }
  .v5-vision-track { scroll-behavior: auto; }
  .v5-vision-card,
  .v5-vision-card img { transition: none; transform: none; }
  .v5-vision-progress > span.is-active i::after { animation: none; transform: scaleX(1); }
  .v5-vision-progress > span { transition: none; }
}

/* 2026-10-02 — complete product / 1.3-screen horizontal story */
.v5-product-system {
  position: relative;
  z-index: 2;
  min-height: auto;
  padding: clamp(94px, 9svh, 118px) 0 clamp(104px, 12svh, 150px);
  scroll-margin-top: 72px;
  overflow: hidden;
  color: var(--v5-ink);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.92), transparent 38%),
    linear-gradient(180deg, #f6f5f3 0%, #f2f1ef 58%, #efeeec 100%);
}

@supports (animation-timeline: view()) {
  .v5-product-system {
    transform-origin: center top;
    will-change: transform, opacity, clip-path;
    animation: v5-product-page-reveal 1ms cubic-bezier(.16,1,.3,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}

@keyframes v5-product-page-reveal {
  from {
    opacity: .22;
    clip-path: inset(16svh 0 0 0);
    transform: translate3d(0, 12svh, 0) scale(.992);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v5-product-system {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}

.v5-product-system-heading {
  width: min(820px, calc(100% - 44px));
  margin: 0 auto clamp(32px, 3.8svh, 46px);
  text-align: center;
}

.v5-product-system-heading .v5-kicker {
  justify-content: center;
  margin-bottom: 22px;
  color: rgba(30,28,25,.48);
}

.v5-product-system-heading h2 {
  margin: 0;
  font: 400 clamp(42px, 4.25vw, 66px)/1.05 var(--v5-sans);
  letter-spacing: -.045em;
}

.v5-product-system-heading > p:last-child {
  max-width: 760px;
  margin: 22px auto 0;
  color: rgba(30,28,25,.52);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.65;
}

.v5-product-track {
  --product-card-width: min(42vw, 720px);
  display: flex;
  gap: clamp(18px, 1.8vw, 30px);
  width: 100%;
  padding: 0 max(22px, calc((100vw - var(--product-card-width)) / 2)) 8px;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}

.v5-product-track::-webkit-scrollbar { display: none; }
.v5-product-track:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: -2px; }

.v5-product-view {
  flex: 0 0 var(--product-card-width);
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  scroll-snap-align: center;
  opacity: .48;
  transform: scale(.955);
  cursor: pointer;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1), transform 520ms cubic-bezier(.16,1,.3,1);
}

.v5-product-view.is-active { opacity: 1; transform: scale(1); }
.v5-product-view:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: 5px; }

.v5-product-view-media {
  position: relative;
  aspect-ratio: 1.82 / 1;
  overflow: hidden;
  border-radius: clamp(22px, 2.2vw, 36px);
  background: #eee9e2;
}

.v5-product-view-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.v5-product-view figcaption {
  min-height: 44px;
  padding: 14px 6px 0;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  color: rgba(30,28,25,.46);
}

.v5-product-view figcaption > span {
  color: var(--v5-ember);
  font: 650 10px/1 var(--v5-sans);
  letter-spacing: .13em;
}

.v5-product-view figcaption strong { color: var(--v5-ink); font-size: 14px; font-weight: 600; }
.v5-product-view figcaption small { justify-self: end; font-size: 10px; letter-spacing: .14em; }

.v5-app-linkage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(220px, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 66px);
  padding: clamp(22px, 2.8vw, 42px) clamp(26px, 4vw, 58px);
  background: linear-gradient(135deg, #e8e2da 0%, #f8f4ee 52%, #ded7ce 100%);
}

.v5-app-linkage-glow {
  position: absolute;
  left: 8%;
  bottom: -20%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(232,97,67,.14);
  filter: blur(54px);
}

.v5-app-device {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(16vw, 190px);
  max-height: 330px;
  overflow: hidden;
  border: 7px solid #292826;
  border-radius: 32px;
  background: #fbf8f2;
  box-shadow: 0 28px 66px rgba(52,43,31,.2);
}

.v5-app-device img { width: 100%; height: auto; display: block; }
.v5-app-linkage-copy { position: relative; z-index: 1; max-width: 360px; }
.v5-app-linkage-copy > span { color: rgba(30,28,25,.48); font: 650 10px/1.4 var(--v5-sans); letter-spacing: .14em; }
.v5-app-linkage-copy strong { display: block; margin-top: 18px; font-size: clamp(26px, 2.7vw, 42px); line-height: 1.12; letter-spacing: -.045em; }
.v5-app-linkage-copy p { margin: 18px 0 0; color: rgba(30,28,25,.58); font-size: 14px; line-height: 1.72; }

.v5-product-track-hint {
  width: min(500px, calc(100% - 44px));
  margin: 6px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  color: rgba(30,28,25,.38);
  font-size: 12px;
  white-space: nowrap;
}

.v5-product-track-hint > span { height: 1px; background: rgba(30,28,25,.16); }

.v5-product-dots {
  min-height: 44px;
  margin: clamp(18px, 2.2svh, 28px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.v5-product-dots button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.v5-product-dots button::before {
  content: '';
  width: 22px;
  height: 2px;
  background: rgba(30,28,25,.2);
  transition: width 260ms ease, background 260ms ease;
}

.v5-product-dots button[aria-selected="true"]::before { width: 32px; background: var(--v5-ink); }
.v5-product-dots button:focus-visible { outline: 2px solid var(--v5-ember); outline-offset: -6px; }

.v5-product-benefits {
  --benefit-inline-padding: clamp(34px, 3.2vw, 50px);
  width: min(1240px, calc(100% - clamp(64px, 12vw, 220px)));
  margin: clamp(48px, 6svh, 78px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(30,28,25,.15);
}

.v5-product-benefits article {
  min-height: 230px;
  padding: 24px var(--benefit-inline-padding) 20px;
  text-align: center;
  border-right: 1px solid rgba(30,28,25,.13);
}

.v5-product-benefits article:first-child { padding-left: var(--benefit-inline-padding); }
.v5-product-benefits article:last-child { padding-right: var(--benefit-inline-padding); border-right: 0; }
.v5-product-benefits article > span { display: block; color: rgba(30,28,25,.18); font: 300 clamp(44px, 3.8vw, 62px)/1 var(--v5-sans); letter-spacing: -.045em; }
.v5-product-benefits h3 { margin: 26px 0 0; font-size: clamp(21px, 1.55vw, 26px); font-weight: 400; letter-spacing: -.025em; }
.v5-product-benefits p { margin: 20px 0 0; color: rgba(30,28,25,.55); font-size: 14px; line-height: 1.72; }
.v5-product-benefits p > span { display: block; }

.v5-product-system-boundary {
  width: min(1240px, calc(100% - clamp(64px, 12vw, 220px)));
  margin: 22px auto 0;
  color: rgba(30,28,25,.36);
  font-size: 10px;
  line-height: 1.6;
  text-align: right;
}

@media (max-width: 980px) {
  .v5-product-system { min-height: auto; padding: 98px 0 132px; }
  .v5-product-track { --product-card-width: min(64vw, 650px); }
  .v5-app-linkage { grid-template-columns: .7fr 1fr; }
  .v5-app-device { width: min(27vw, 220px); }
  .v5-product-benefits { width: calc(100% - 48px); }
  .v5-product-benefits article { padding-inline: 22px; }
}

@media (max-width: 720px) {
  .v5-product-system { min-height: auto; padding: 94px 0 126px; }
  .v5-product-system-heading { width: calc(100% - 36px); margin-bottom: 36px; }
  .v5-product-system-heading .v5-kicker { margin-bottom: 16px; }
  .v5-product-system-heading h2 { font-size: clamp(36px, 10vw, 48px); }
  .v5-product-system-heading > p:last-child { max-width: 31em; margin-top: 20px; font-size: 15px; line-height: 1.65; }
  .v5-product-track { --product-card-width: calc(100vw - 36px); gap: 12px; padding-inline: 18px; }
  .v5-product-view { opacity: .72; transform: none; }
  .v5-product-view.is-active { opacity: 1; }
  .v5-product-view-media { aspect-ratio: 1.25 / 1; border-radius: 20px; }
  .v5-product-view-media > img { object-fit: cover; }
  .v5-app-linkage { grid-template-columns: .78fr 1fr; gap: 18px; padding: 24px 20px; }
  .v5-app-device { width: min(34vw, 150px); border-width: 5px; border-radius: 22px; }
  .v5-app-linkage-copy > span { font-size: 8px; }
  .v5-app-linkage-copy strong { margin-top: 10px; font-size: clamp(22px, 6vw, 29px); }
  .v5-app-linkage-copy p { margin-top: 10px; font-size: 12px; line-height: 1.55; }
  .v5-product-track-hint { gap: 12px; font-size: 11px; }
  .v5-product-benefits { width: calc(100% - 36px); margin-top: 34px; grid-template-columns: 1fr; }
  .v5-product-benefits article,
  .v5-product-benefits article:first-child,
  .v5-product-benefits article:last-child { min-height: 0; padding: 28px 0 32px; border-right: 0; border-bottom: 1px solid rgba(30,28,25,.13); }
  .v5-product-benefits article:last-child { border-bottom: 0; }
  .v5-product-benefits article > span { font-size: 44px; }
  .v5-product-benefits h3 { margin-top: 18px; font-size: 23px; }
  .v5-product-benefits p { margin-top: 14px; font-size: 14px; }
  .v5-product-system-boundary { width: calc(100% - 36px); margin-top: 10px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-product-track { scroll-behavior: auto; }
  .v5-product-view,
  .v5-product-dots button::before { transition: none; }
  .v5-product-view { transform: none; }
}

.v5-brand-logo,.v5-header.is-hero .v5-brand-logo{width:132px;max-width:100%;height:auto}.v5-brand-logo.is-compact{width:100px}@media(max-width:600px){.v5-header.is-hero .v5-brand-logo{width:100px}}