/* Hallmark · macrostructure: Split Studio · tone: assured · anchor hue: Kinlu orange
 * Genre: modern-minimal · theme: studied-DNA (source: approved Kinlu Predict + user reference)
 * H2: 7/5, owl, negative-space · N1b: 3 anchors, no dropdown · Ft5: statement
 * Audience: ecommerce operators · action: guided access / choose experience
 * pre-emit critique: P5 H4 E4 S5 R4 V4 · motion: GSAP entrance, selective scroll reveals, interruptible walkthrough
 * contrast: pass (139 rendered pairs, minimum 5.18:1) · nav: N1b · footer: Ft5
 * mobile: verified 320/375/414/768 · enrichment: E5 owned owl, static
 * exceptions: dominant owl / illustrative inset surfaces retained per approved brand reference. */
@import url('/tokens.css');
:root { --color-paper: #FAFAFA; --color-surface: #FAFAFA; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/geist-latin.woff2') format('woff2'); }
html, body { overflow-x: clip; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, figure, dl { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; font-style: normal; letter-spacing: -.04em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.04; max-width: 10ch; }
h2 { font-size: var(--text-marketing-section); line-height: 1.1; }
h3 { font-size: var(--text-xl); line-height: 1.2; }
h4 { font-size: var(--text-lg); line-height: 1.25; }
p { font-size: var(--text-base); line-height: 1.65; color: var(--color-muted); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:active, button:active, summary:active { opacity: .8; }
button:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
main:focus { outline: none; }
section { scroll-margin-top: var(--space-lg); }
[hidden] { display: none !important; }
.wrap { width: min(calc(100% - 2 * var(--space-md)), var(--width-marketing)); margin-inline: auto; }
.small { font-size: var(--text-sm); }
.skip { position: absolute; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); transform: translateY(-200%); background: var(--color-paper); padding: var(--space-sm); z-index: 200; }
.skip:focus { transform: none; }
.nav { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); position: relative; }
.brand { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.035em; min-height: 44px; display: inline-flex; align-items: center; }
.nav-links { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-actions > .primary { display: none; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); border: 1px solid var(--color-rule-2); white-space: nowrap; font-weight: 500; font-size: var(--text-sm); transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.button:active { transform: translateY(1px); }
.menu-toggle { border: 1px solid var(--color-rule-2); background: var(--color-paper); border-radius: var(--radius-input); min-width: 68px; min-height: 44px; font-size: var(--text-sm); }
.mobile-nav { position: absolute; inset: 84px 0 auto; z-index: 100; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-sm); box-shadow: var(--shadow-card); }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; padding-inline: var(--space-sm); white-space: nowrap; font-size: var(--text-sm); }
.hero { display: grid; gap: var(--space-md); padding-block: var(--space-xl) var(--space-2xl); align-items: center; }
.category { margin-bottom: var(--space-md); color: var(--color-ink); font-size: var(--text-sm); }
.lede { font-size: var(--text-md); max-width: 45ch; margin-block: var(--space-md) var(--space-lg); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; min-height: 44px; font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 5px; }
.hero-note { margin-top: var(--space-md); }
.owl { width: 100%; max-width: 540px; justify-self: center; }
.owl img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: contain; }
.owl figcaption { display: flex; align-items: center; justify-content: center; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.intro { display: grid; gap: var(--space-md); padding-block: var(--space-lg); border-block: 1px solid var(--color-rule); }
.intro p { font-size: var(--text-sm); }
.intro strong { color: var(--color-ink); font-weight: 500; }
.experiences { padding-top: var(--space-2xl); }
.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.section-head > p { max-width: 44ch; font-size: var(--text-md); }
.split { display: grid; gap: var(--space-xl); align-items: center; }
.split + .split { margin-top: var(--space-2xl); }
.product-name { font-size: var(--text-sm); margin-bottom: var(--space-md); color: var(--color-accent-text); }
.product-copy h3 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin-bottom: var(--space-md); }
.product-copy > p:not(.product-name) { max-width: 48ch; }
.benefits { margin-block: var(--space-lg) var(--space-md); display: grid; gap: var(--space-xs); }
.benefits div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); line-height: 1.6; }
.benefits dt { color: var(--color-muted); }.benefits dd { margin: 0; }
.product-link { color: var(--color-accent-text); }
.canvas { background: var(--color-marketing-peach); color: var(--color-ink); padding: var(--space-md); border-radius: var(--radius-panel); }
.canvas p { color: var(--color-muted); }
.visual-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.visual-label span { color: var(--color-muted); }
.question-bubble { background: var(--color-paper); color: var(--color-ink); padding: var(--space-md); border-radius: var(--radius-card); line-height: 1.5; max-width: 34ch; margin-inline-start: auto; }
.mission { padding-top: var(--space-lg); }
.mission h4 { margin-top: var(--space-xs); }
.mission-steps { list-style: none; padding: 0; margin-block: var(--space-md); display: grid; gap: var(--space-xs); font-size: var(--text-sm); line-height: 1.6; }
.mission-steps span { margin-inline-end: var(--space-xs); }
.output { border-top: 1px solid var(--color-rule-2); padding-top: var(--space-md); display: grid; gap: var(--space-xs); font-size: var(--text-sm); }.output > span { color: var(--color-muted); }.output strong { font-weight: 500; }
.visual-note { margin-top: var(--space-lg); }
.predict-visual { background: var(--color-marketing-canvas); }
.library h4 { margin-top: var(--space-xs); }.library > p { font-size: var(--text-sm); }
.model-evidence { margin-block: var(--space-lg); }.model-evidence div { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 1.5; }.model-evidence dt { color: var(--color-muted); }.model-evidence dd { margin: 0; }
.prediction-example { background: var(--color-marketing-peach); color: var(--color-ink); padding: var(--space-md); border-radius: var(--radius-input); display: grid; gap: var(--space-xs); }.prediction-example span, .prediction-example p { font-size: var(--text-sm); }.prediction-example strong { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.025em; }
.predict .product-copy { grid-row: 1; }
.experience-note { margin-top: var(--space-xl); max-width: 74ch; }
.workflow { padding-top: var(--space-3xl); }
.workflow-grid { display: grid; gap: var(--space-xl); }.tabs { display: flex; gap: var(--space-sm); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-lg); }
.tabs button { border: none; border-bottom: 2px solid transparent; background: none; padding: var(--space-xs) 0; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; min-height: 48px; }
.tabs button[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.journey-panel h3 { margin-bottom: var(--space-md); max-width: 22ch; }.journey-panel > p { max-width: 48ch; }.journey-panel .small { margin-top: var(--space-lg); }
.journey-panel + .journey-panel { margin-top: var(--space-lg); }
.journey-output { background: var(--color-marketing-canvas); color: var(--color-ink); border-radius: var(--radius-panel); padding: var(--space-lg); }.journey-output h3 { margin-top: var(--space-xs); }.journey-output ol { margin: var(--space-lg) 0 0; padding: 0; list-style-position: inside; display: grid; gap: var(--space-md); }.journey-output li { font-size: var(--text-sm); }.journey-output strong { font-weight: 500; }.journey-output li span { display: block; margin-top: var(--space-2xs); color: var(--color-muted); line-height: 1.6; }
.usecases { padding-top: var(--space-3xl); }.case-list { border-top: 1px solid var(--color-rule); }.case-list article { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }.case-list h3 { font-size: var(--text-md); letter-spacing: -.025em; }.case-list p { max-width: 53ch; }.case-list > article > span { color: var(--color-muted); max-width: 26ch; line-height: 1.6; }
.clarity { display: grid; gap: var(--space-xl); padding-block: var(--space-3xl); }.clarity > div > p { margin-top: var(--space-md); }
.faq details { border-bottom: 1px solid var(--color-rule); }.faq details:first-child { border-top: 1px solid var(--color-rule); }.faq summary { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; padding-block: var(--space-md); min-height: 64px; cursor: pointer; font-size: var(--text-sm); line-height: 1.5; font-weight: 500; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary > span { flex-shrink: 0; font-size: var(--text-lg); font-weight: 400; }.faq details[open] summary > span { transform: rotate(45deg); }.faq details p { padding-bottom: var(--space-md); font-size: var(--text-sm); max-width: 60ch; }
.footer { background: var(--color-marketing-band); color: var(--color-ink); padding-block: var(--space-2xl) var(--space-lg); }.footer-call { display: grid; gap: var(--space-xl); }.footer-call h2 { font-size: clamp(2.25rem, 4.8vw, 4rem); line-height: 1.08; }.footer-call p { font-size: var(--text-sm); margin-top: var(--space-md); }.footer-products { display: grid; margin-top: var(--space-sm); }.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); }.footer-meta .brand { color: var(--color-ink); }.footer-meta a:not(.brand) { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
@media (hover: hover) { .button:hover { opacity: .88; }.text-link:hover { text-decoration-color: currentColor; }.nav-links a:hover, .mobile-nav a:hover, .menu-toggle:hover { color: var(--color-accent-text); }.tabs button:hover { color: var(--color-ink); }.faq summary:hover { color: var(--color-accent-text); } }
@media (min-width: 40rem) { .wrap { width: min(calc(100% - 2 * var(--space-xl)), var(--width-marketing)); }.nav-actions > .primary { display: inline-flex; }.hero { padding-block: var(--space-2xl); }.hero h1 { max-width: 13ch; }.owl { max-width: 410px; }.intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.intro > a { grid-column: 1 / -1; }.canvas { padding: var(--space-lg); }.model-evidence div { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); } }
@media (min-width: 60rem) { .nav-links { display: flex; gap: var(--space-lg); }.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); white-space: nowrap; }.menu-toggle { display: none; }.mobile-nav { display: none !important; }.hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }.hero h1 { max-width: 10ch; }.owl { max-width: 540px; justify-self: end; }.intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; align-items: center; gap: var(--space-xl); }.intro > a { grid-column: auto; }.experiences { padding-top: var(--space-3xl); }.section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-2xl); }.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }.split + .split { margin-top: var(--space-3xl); }.predict .product-copy { grid-row: auto; }.canvas { padding: var(--space-lg); }.workflow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }.journey-output { padding: var(--space-xl); }.journey-panel { min-height: 250px; }.case-list article { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr); gap: var(--space-xl); }.clarity { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-2xl); }.footer-call { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: center; gap: var(--space-2xl); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }.button:active { transform: none; } }
@media (max-width: 22.5rem) { h1 { font-size: 2.25rem; max-width: 12ch; }.lede { font-size: var(--text-base); } }
.journey-output li { border-inline-start: 2px solid transparent; padding-inline-start: var(--space-sm); transition: border-color var(--dur-short) var(--ease-out); }
.journey-output li[aria-current="step"] { border-inline-start-color: var(--color-accent); }
.faq summary > span { transition: transform var(--dur-short) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .faq summary > span, .journey-output li { transition: none; } }
.walkthrough-heading { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: space-between; }
.walkthrough-play { border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); padding: var(--space-xs) var(--space-sm); min-height: 44px; font-size: var(--text-sm); white-space: nowrap; }
.walkthrough-play[aria-pressed="true"] { border-color: var(--color-accent-text); }
.walkthrough-stage { margin-top: var(--space-lg); min-height: 340px; display: grid; overflow: clip; }
.walkthrough-frame { grid-area: 1 / 1; min-width: 0; align-self: start; }
.owl { position: relative; }
.owl-video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: var(--radius-panel); background: var(--color-paper); }
.walkthrough-frame > .small:last-child { margin-top: var(--space-sm); }
.sample-table { margin-top: var(--space-sm); font-size: var(--text-sm); }
.sample-table > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-sm); border-bottom: 1px solid var(--color-rule-2); padding-block: var(--space-sm); line-height: 1.5; }
.sample-table strong { font-weight: 500; }
.segment-stack { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.segment-stack > div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: var(--space-xs); font-size: var(--text-sm); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-input); }
.segment-stack strong { font-weight: 500; }
.segment-line { grid-column: 2; height: 3px; background: var(--color-accent); color: var(--color-accent-ink); transform-origin: left; }
.report-preview { display: grid; gap: var(--space-sm); padding: var(--space-md); margin-top: var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.report-preview strong { font-weight: 600; }.report-preview > div { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.button, .walkthrough-play { transition: transform var(--dur-micro) var(--ease-out); }
.button:active, .walkthrough-play:active { transform: scale(.97); }
.text-link > span { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .button:hover { opacity: 1; transform: translateY(-2px); }.walkthrough-play:hover { background: var(--color-marketing-peach); color: var(--color-ink); }.text-link:hover > span { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .button:active, .walkthrough-play:active, .button:hover, .text-link:hover > span { transform: none; }.button, .walkthrough-play, .text-link > span { transition: none; } }
@media (max-width: 39.99rem) { .journey-output { padding: var(--space-md); }.walkthrough-stage { min-height: 400px; } }