@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,SOFT,WONK,wght@9..144,0..100,0..1,500;9..144,0..100,0..1,600;9..144,0..100,0..1,700&display=swap');

:root {
  --ink: #171813;
  --ink-soft: #34362F;
  --paper: #F5F1E8;
  --paper-deep: #E9E1D3;
  --cream: #FFFDF8;
  --wine: #75263B;
  --wine-deep: #4A1324;
  --tomato: #D9543E;
  --citron: #D7FC52;
  --citron-muted: #BBE44A;
  --sage: #A9B9A2;
  --line: rgba(23, 24, 19, .15);
  --line-light: rgba(255, 253, 248, .20);
  --display: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
  --container: min(1240px, calc(100vw - 64px));
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 46px;
  --shadow-soft: 0 20px 55px rgba(37, 22, 16, .14);
  --shadow-deep: 0 32px 80px rgba(20, 10, 15, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--citron); color: var(--ink); }

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.nav { width: var(--container); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,253,248,.24); color: var(--cream); }
.brand { display: flex; align-items: center; gap: 9px; min-width: max-content; }
.brand svg { width: 27px; height: 27px; }
.brand-word { font-weight: 700; font-size: 18px; letter-spacing: -.065em; }
.brand-word small { font: 500 9px/1 var(--mono); letter-spacing: .06em; margin-left: 3px; vertical-align: 2px; opacity: .8; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { opacity: .82; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.nav-actions .login { opacity: .78; }
.menu-button { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; padding: 14px 20px; font-weight: 600; font-size: 14px; line-height: 1; transition: transform .2s, background .2s, border .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { color: var(--ink); background: var(--citron); }
.button-light:hover { background: #e3ff83; }
.button-outline-light { border-color: rgba(255,255,255,.55); color: var(--cream); }
.button-ink { color: var(--cream); background: var(--ink); }
.button-ink:hover { background: var(--wine); }
.button-wine { color: var(--cream); background: var(--wine); }
.button-wine:hover { background: var(--wine-deep); }
.text-link { display: inline-flex; gap: 9px; align-items: center; font-weight: 600; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }

.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: .075em; font: 500 10px/1.2 var(--mono); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--citron); }
.eyebrow::before { width: 7px; height: 7px; background: var(--citron); border-radius: 50%; content: ''; }
.section-kicker { color: var(--wine); }
.section-kicker.light { color: var(--citron); }
.section-number { font: 500 11px/1 var(--mono); color: var(--wine); }

.hero { min-height: 910px; overflow: hidden; position: relative; color: var(--cream); background: var(--ink); isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 87% 9%, rgba(117,38,59,.72), transparent 27%), radial-gradient(circle at 10% 95%, rgba(104,129,39,.28), transparent 26%), linear-gradient(115deg, #171813 0%, #22231d 48%, #332127 100%); }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .13; pointer-events: none; background-image: url("/assets/site/noise.png"); background-size: 256px 256px; mix-blend-mode: screen; }
.hero-inner { width: var(--container); margin: auto; padding: 159px 0 0; position: relative; }
.hero-copy { position: relative; z-index: 2; width: min(690px, 59%); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 24px 0 22px; font-family: var(--display); font-size: clamp(53px, 6.5vw, 98px); font-weight: 600; font-variation-settings: 'opsz' 120, 'SOFT' 28, 'WONK' 0; letter-spacing: -.072em; line-height: .93; max-width: 11ch; }
.hero h1 em { font-weight: 500; color: var(--citron); font-style: italic; }
.hero-copy > p { color: rgba(255,253,248,.76); max-width: 510px; font-size: 18px; line-height: 1.52; }
.hero-cta { display: flex; gap: 10px; padding-top: 14px; }
.hero-meta { display: flex; gap: 21px; margin-top: 42px; font: 10px/1.4 var(--mono); letter-spacing: .02em; color: rgba(255,253,248,.64); }
.hero-meta > span { display: flex; align-items: center; gap: 7px; }
.hero-meta b { display: inline-block; width: 6px; height: 6px; background: var(--citron); border-radius: 50%; }
.hero-visual { position: absolute; z-index: 1; right: -91px; top: 156px; width: min(61vw, 850px); }
.hero-browser { border-radius: 17px 17px 10px 10px; overflow: hidden; background: #fbfaf5; box-shadow: var(--shadow-deep); border: 1px solid rgba(255,255,255,.24); transform: rotate(2.7deg); position: relative; }
.browser-top { height: 30px; padding: 0 14px; display: flex; align-items: center; gap: 6px; background: #262722; }
.browser-top span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.42); }
.browser-top i { display: block; margin-left: 8px; width: 150px; height: 12px; border-radius: 99px; background: rgba(255,255,255,.1); }
.hero-browser img { width: 100%; }
.hero-phone { position: absolute; z-index: 2; width: 185px; right: 6px; bottom: -128px; transform: rotate(-7deg); padding: 8px; background: #111; border: 3px solid #4e4c48; border-radius: 29px; box-shadow: 0 25px 45px rgba(0,0,0,.48); }
.hero-phone::before { content: ''; position: absolute; width: 74px; height: 16px; border-radius: 0 0 13px 13px; background: #111; top: 0; left: calc(50% - 37px); z-index: 2; }
.hero-phone img { border-radius: 20px; }
.hero-caption { position: absolute; top: 80px; right: 105px; padding: 10px 12px; color: var(--ink); background: var(--citron); border-radius: 4px; transform: rotate(-4deg); font: 500 10px/1.25 var(--mono); box-shadow: 5px 5px 0 var(--wine); }
.hero-stamp { position: absolute; z-index: 4; right: 110px; bottom: -52px; width: 116px; height: 116px; display: grid; place-items: center; text-align: center; border: 1px solid rgba(255,253,248,.6); border-radius: 50%; color: var(--cream); background: var(--wine); transform: rotate(14deg); font: 500 10px/1.18 var(--mono); letter-spacing: .04em; }
.hero-stamp b { display: block; font: 600 20px/1 var(--display); letter-spacing: -.06em; }

.proof-bar { position: relative; z-index: 3; width: var(--container); margin: -1px auto 0; color: var(--ink); display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; background: var(--citron); border-radius: 16px 16px 0 0; overflow: hidden; }
.proof-bar > div { min-height: 95px; padding: 19px 23px; border-right: 1px solid rgba(23,24,19,.18); }
.proof-bar > div:last-child { border: 0; }
.proof-label { display: block; color: rgba(23,24,19,.68); font: 500 9px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.proof-value { font: 600 18px/1 var(--display); letter-spacing: -.035em; }
.proof-value small { font: 400 12px/1.2 var(--sans); letter-spacing: 0; }

.intro { padding: 144px 0 122px; background: var(--paper); }
.two-col-heading { width: var(--container); margin: auto; display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; }
.two-col-heading h2 { font: 600 clamp(42px, 5vw, 70px)/.97 var(--display); letter-spacing: -.064em; max-width: 12ch; }
.two-col-heading .lead { align-self: end; max-width: 545px; padding-bottom: 9px; color: var(--ink-soft); font-size: 20px; line-height: 1.5; }
.two-col-heading .lead strong { color: var(--wine); font-weight: 600; }
.problem-grid { width: var(--container); margin: 75px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.problem-card { min-height: 242px; padding: 26px 27px; position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); overflow: hidden; }
.problem-card:nth-child(2), .problem-card:nth-child(5) { background: #DFD8C8; }
.problem-card:nth-child(3) { background: var(--wine); color: var(--cream); border-color: transparent; }
.problem-card:nth-child(3) .section-number, .problem-card:nth-child(3) p { color: rgba(255,253,248,.68); }
.problem-card:nth-child(6) { background: var(--ink); color: var(--cream); border-color: transparent; }
.problem-card:nth-child(6) .section-number, .problem-card:nth-child(6) p { color: rgba(255,253,248,.68); }
.problem-card .symbol { position: absolute; bottom: 4px; right: 16px; color: rgba(23,24,19,.07); font: 500 100px/1 var(--display); letter-spacing: -.1em; }
.problem-card:nth-child(3) .symbol, .problem-card:nth-child(6) .symbol { color: rgba(255,253,248,.1); }
.problem-card h3 { position: relative; z-index: 1; margin: 45px 0 10px; font-size: 20px; letter-spacing: -.045em; line-height: 1; }
.problem-card p { position: relative; z-index: 1; margin-bottom: 0; color: #5B5C55; font-size: 14px; line-height: 1.45; max-width: 31ch; }

.real-places { padding: 98px 0 112px; overflow: hidden; background: #E1D9CB; }
.place-head { width: var(--container); margin: auto; display: flex; justify-content: space-between; gap: 50px; align-items: end; }
.place-head h2 { max-width: 12ch; margin: 16px 0 0; font: 600 clamp(38px, 4.7vw, 66px)/.96 var(--display); letter-spacing: -.065em; }
.place-head p { max-width: 350px; margin: 0 0 3px; font-size: 15px; color: var(--ink-soft); }
.photo-rail { display: flex; gap: 18px; margin-top: 44px; padding: 12px 32px 24px max(32px, calc((100vw - min(1240px, calc(100vw - 64px))) / 2)); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.photo-rail .venue-card { flex: 0 0 auto; scroll-snap-align: start; }
.photo-rail::-webkit-scrollbar { height: 6px; }
.photo-rail::-webkit-scrollbar-thumb { background: rgba(23,24,19,.25); border-radius: 3px; }
.photo-rail::-webkit-scrollbar-track { background: rgba(23,24,19,.06); }
.venue-card { width: 302px; height: 360px; position: relative; overflow: hidden; background: var(--ink); border-radius: 15px; box-shadow: 9px 10px 0 rgba(117,38,59,.42); }
.venue-card:nth-child(2) { transform: translateY(23px); }
.venue-card:nth-child(3) { transform: translateY(-10px); }
.venue-card:nth-child(4) { transform: translateY(14px); }
.venue-card img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .4s; }
.venue-card:hover img { transform: scale(1.05); }
.venue-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 39%, rgba(23,24,19,.84)); }
.venue-card figcaption { position: absolute; z-index: 1; left: 18px; bottom: 17px; color: var(--cream); }
.venue-card figcaption strong { display: block; font: 600 24px/1 var(--display); letter-spacing: -.055em; }
.venue-card figcaption span { display: block; margin-top: 6px; color: rgba(255,253,248,.7); font: 10px/1 var(--mono); letter-spacing: .03em; }

.product-section { padding: 142px 0; position: relative; overflow: hidden; background: var(--cream); }
.product-section::before { position: absolute; top: 300px; right: -12vw; width: 44vw; height: 44vw; border: 1px solid rgba(117,38,59,.13); border-radius: 50%; content: ''; }
.product-heading { width: var(--container); margin: auto; }
.product-heading h2 { max-width: 12ch; margin: 18px 0 0; font: 600 clamp(44px,5.2vw,74px)/.94 var(--display); letter-spacing: -.068em; }
.product-heading h2 em { color: var(--wine); font-weight: 500; }
.product-heading p { max-width: 536px; margin: 26px 0 0; color: var(--ink-soft); font-size: 17px; }
.product-feature { width: var(--container); margin: 86px auto 0; display: grid; align-items: center; grid-template-columns: .87fr 1.13fr; gap: 90px; }
.product-feature.reverse { grid-template-columns: 1.13fr .87fr; margin-top: 138px; }
.product-feature.reverse .feature-copy { order: 2; }
.product-feature.reverse .screen-cluster { order: 1; }
.feature-copy { max-width: 410px; }
.feature-copy h3 { margin: 18px 0 17px; font: 600 clamp(31px, 3.5vw, 46px)/.98 var(--display); letter-spacing: -.06em; }
.feature-copy p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.feature-points { list-style: none; padding: 0; margin: 28px 0; border-top: 1px solid var(--line); }
.feature-points li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; font-size: 14px; font-weight: 500; }
.feature-points b { color: var(--wine); font: 500 11px/1.4 var(--mono); }
.screen-cluster { position: relative; }
.screen-main { position: relative; z-index: 1; border-radius: 15px; overflow: hidden; border: 1px solid rgba(23,24,19,.16); box-shadow: var(--shadow-soft); background: var(--cream); }
.screen-bar { height: 30px; padding: 0 14px; display: flex; align-items: center; gap: 5px; background: var(--ink); }
.screen-bar span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.screen-main img { width: 100%; }
.screen-deco { position: absolute; z-index: 0; width: 80%; height: 85%; left: -31px; bottom: -30px; border: 1px solid var(--wine); border-radius: 15px; }
.sticker { position: absolute; z-index: 3; display: grid; place-items: center; width: 108px; height: 108px; padding: 12px; text-align: center; color: var(--ink); background: var(--citron); border-radius: 50%; font: 500 9px/1.23 var(--mono); letter-spacing: .02em; box-shadow: 6px 6px 0 var(--wine); transform: rotate(-10deg); }
.sticker strong { font: 600 19px/1 var(--display); letter-spacing: -.055em; }
.tracker-sticker { top: -30px; left: -43px; }
.phone-stack { position: relative; min-height: 555px; display: flex; align-items: center; justify-content: center; }
.phone-stack::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: var(--citron); filter: blur(0); }
.phone-shell { position: relative; z-index: 2; height: 530px; padding: 8px; border-radius: 37px; background: #1C1D1A; border: 3px solid #50504b; box-shadow: var(--shadow-deep); transform: rotate(4.5deg); }
.phone-shell::before { content: ''; position: absolute; top: 1px; left: calc(50% - 48px); width: 96px; height: 20px; border-radius: 0 0 14px 14px; background: #1C1D1A; z-index: 3; }
.phone-shell img { height: 100%; border-radius: 27px; }
.phone-side-card { position: absolute; z-index: 1; right: -13px; bottom: 20px; width: 225px; padding: 18px; color: var(--cream); background: var(--wine); border-radius: var(--radius-sm); transform: rotate(-8deg); box-shadow: 7px 7px 0 var(--ink); }
.phone-side-card span { display: block; opacity: .7; font: 10px/1 var(--mono); }
.phone-side-card b { display: block; margin-top: 8px; font: 500 23px/.98 var(--display); letter-spacing: -.05em; }

.capability-section { padding: 132px 0 122px; color: var(--cream); background: var(--wine); position: relative; overflow: hidden; }
.capability-section::after { position: absolute; right: -15vw; top: -10vw; width: 58vw; height: 58vw; content: ''; border: 1px solid rgba(255,253,248,.13); border-radius: 50%; }
.capability-head { position: relative; z-index: 1; width: var(--container); margin: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.capability-head h2 { margin: 17px 0 0; max-width: 11ch; font: 600 clamp(43px, 5vw, 70px)/.95 var(--display); letter-spacing: -.067em; }
.capability-head p { align-self: end; max-width: 490px; color: rgba(255,253,248,.75); font-size: 18px; }
.capability-grid { position: relative; z-index: 1; width: var(--container); margin: 75px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.capability { min-height: 244px; padding: 24px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.capability .cap-num { font: 500 10px/1 var(--mono); color: var(--citron); }
.capability h3 { margin: 50px 0 12px; font: 600 23px/1 var(--display); letter-spacing: -.052em; }
.capability p { max-width: 27ch; margin: 0; color: rgba(255,253,248,.78); font-size: 13.5px; line-height: 1.55; }

.roles { padding: 137px 0; background: var(--paper); }
.roles-top { width: var(--container); margin: auto; display: flex; gap: 45px; justify-content: space-between; align-items: end; }
.roles-top h2 { margin: 16px 0 0; max-width: 12ch; font: 600 clamp(43px, 4.8vw, 67px)/.95 var(--display); letter-spacing: -.067em; }
.roles-top p { max-width: 345px; margin: 0 0 5px; color: var(--ink-soft); }
.role-list { width: var(--container); margin: 69px auto 0; }
.role { padding: 28px 0 29px; display: grid; align-items: center; grid-template-columns: 100px 1fr .8fr auto; gap: 28px; border-top: 1px solid var(--line); transition: padding .25s, background .25s; }
.role:last-child { border-bottom: 1px solid var(--line); }
.role:hover { padding-left: 18px; padding-right: 18px; background: var(--cream); }
.role-index { color: var(--wine); font: 500 11px/1 var(--mono); }
.role h3 { margin: 0; font: 600 clamp(25px, 2.6vw, 37px)/1 var(--display); letter-spacing: -.06em; }
.role p { max-width: 360px; margin: 0; color: var(--ink-soft); font-size: 14px; }
.arrow-link { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--ink); border-radius: 50%; font-size: 19px; transition: background .2s, color .2s; }
.role:hover .arrow-link { color: var(--ink); background: var(--citron); }

.testimonial { padding: 124px 0; background: var(--ink); color: var(--cream); }
.quote-wrap { width: min(940px, var(--container)); margin: auto; position: relative; }
.quote-mark { position: absolute; top: -69px; left: -4px; color: var(--citron); font: 700 160px/.7 var(--display); }
blockquote { position: relative; margin: 0; padding: 0; font: 500 clamp(35px,4.3vw,61px)/1.02 var(--display); letter-spacing: -.062em; }
.quote-source { display: flex; gap: 16px; align-items: center; margin-top: 45px; }
.source-monogram { display: grid; place-items: center; width: 40px; height: 40px; background: var(--citron); color: var(--ink); border-radius: 50%; font: 700 12px/1 var(--mono); }
.quote-source strong, .quote-source span { display: block; }
.quote-source strong { font-size: 13px; }
.quote-source span { color: rgba(255,253,248,.56); font-size: 12px; }

.final-cta { padding: 133px 0 0; background: var(--citron); overflow: hidden; }
.cta-panel { width: var(--container); margin: auto; position: relative; min-height: 500px; padding: 63px 63px 55px; overflow: hidden; color: var(--cream); background: var(--wine); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.cta-panel::after { content: 'C'; position: absolute; right: -45px; bottom: -130px; color: rgba(255,253,248,.08); font: 700 500px/.8 var(--display); letter-spacing: -.17em; }
.cta-panel h2 { position: relative; z-index: 1; max-width: 10ch; margin: 17px 0 20px; font: 600 clamp(46px, 5.3vw, 75px)/.93 var(--display); letter-spacing: -.07em; }
.cta-panel p { position: relative; z-index: 1; max-width: 490px; margin: 0 0 30px; color: rgba(255,253,248,.76); font-size: 17px; }
.cta-actions { position: relative; z-index: 1; display: flex; gap: 10px; }
.site-footer { color: rgba(255,253,248,.69); background: var(--wine); }
.footer-inner { width: var(--container); min-height: 108px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,253,248,.2); font-size: 12px; }
.footer-inner .brand { color: var(--cream); }
.footer-links { display: flex; gap: 20px; }

/* Story page */
.story-header { color: var(--ink); position: relative; }
.story-header .nav { color: var(--ink); border-bottom-color: var(--line); }
.story-header .nav-actions .button { color: var(--cream); background: var(--ink); }
.story-hero { padding: 118px 0 75px; background: var(--paper); overflow: hidden; }
.story-crumb { width: var(--container); margin: 0 auto 64px; font: 500 11px/1 var(--mono); color: var(--wine); letter-spacing: .04em; }
.story-hero-grid { width: var(--container); margin: auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: end; }
.story-hero h1 { margin: 18px 0 23px; max-width: 10ch; font: 600 clamp(50px,5.7vw,82px)/.93 var(--display); letter-spacing: -.072em; }
.story-hero .hero-deck { max-width: 440px; margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.52; }
.story-visual { position: relative; }
.story-visual .screen-main { transform: rotate(2deg); }
.story-chip { position: absolute; z-index: 2; left: -29px; bottom: 50px; max-width: 200px; padding: 13px 15px; color: var(--cream); background: var(--ink); box-shadow: 5px 5px 0 var(--citron); transform: rotate(-5deg); font: 500 10px/1.35 var(--mono); }
.story-chip b { color: var(--citron); }
.story-marker { width: var(--container); margin: 72px auto 0; display: flex; padding-top: 19px; border-top: 1px solid var(--line); justify-content: space-between; font: 500 10px/1 var(--mono); color: var(--ink-soft); }
.story-marker b { color: var(--wine); font-weight: 500; }
.story-body { padding: 115px 0 132px; background: var(--cream); }
.story-layout { width: var(--container); margin: auto; display: grid; grid-template-columns: 220px 1fr; gap: 100px; }
.story-aside { align-self: start; position: sticky; top: 25px; }
.story-aside span { color: var(--wine); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.story-aside p { margin: 14px 0 0; font: 500 21px/1.05 var(--display); letter-spacing: -.05em; }
.story-chapters { max-width: 720px; }
.chapter { padding: 0 0 77px; margin-bottom: 72px; border-bottom: 1px solid var(--line); }
.chapter:last-child { margin-bottom: 0; }
.chapter h2 { margin: 15px 0 26px; font: 600 clamp(39px,4vw,56px)/.96 var(--display); letter-spacing: -.065em; }
.chapter p { max-width: 650px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.chapter p + p { margin-top: 19px; }
.story-stat { display: grid; grid-template-columns: .7fr 1.3fr; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.story-stat-num { display: flex; align-items: end; padding: 26px; color: var(--cream); background: var(--wine); font: 600 68px/.8 var(--display); letter-spacing: -.08em; }
.story-stat-copy { padding: 26px; background: var(--paper); }
.story-stat-copy b { display: block; font: 600 19px/1 var(--display); letter-spacing: -.04em; }
.story-stat-copy p { margin: 12px 0 0; font-size: 14px; }
.story-callout { margin-top: 70px; padding: 34px; color: var(--cream); background: var(--ink); border-radius: var(--radius-md); }
.story-callout span { color: var(--citron); font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.story-callout h3 { max-width: 16ch; margin: 14px 0 14px; font: 500 34px/.98 var(--display); letter-spacing: -.06em; }
.story-callout p { max-width: 535px; margin-bottom: 0; color: rgba(255,253,248,.7); font-size: 15px; }
.story-cta { padding: 90px 0; color: var(--cream); background: var(--wine); }
.story-cta-inner { width: var(--container); margin: auto; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.story-cta h2 { max-width: 11ch; margin: 17px 0 0; font: 600 clamp(44px,5vw,68px)/.95 var(--display); letter-spacing: -.07em; }

@media (max-width: 900px) {
  :root { --container: min(100% - 40px, 1240px); }
  .nav { height: 72px; }
  .nav-links, .nav-actions .login { display: none; }
  .nav-actions { gap: 10px; }
  .nav-actions .button { padding: 11px 15px; font-size: 12px; }
  .menu-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: inherit; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
  .hero { min-height: 880px; }
  .hero-inner { padding-top: 132px; }
  .hero-copy { width: 100%; }
  .hero h1 { max-width: 11ch; }
  .hero-visual { top: 526px; right: -49px; width: 85vw; }
  .hero-phone { width: 134px; right: 0; bottom: -34px; }
  .hero-stamp { right: 14px; bottom: -77px; width: 96px; height: 96px; }
  .proof-bar { grid-template-columns: 1fr 1fr; }
  .proof-bar > div:nth-child(2) { border-right: 0; }
  .proof-bar > div:nth-child(-n+2) { border-bottom: 1px solid rgba(23,24,19,.18); }
  .two-col-heading, .capability-head, .story-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .two-col-heading .lead { padding: 0; }
  .problem-grid, .capability-grid { grid-template-columns: 1fr 1fr; }
  .place-head, .roles-top { display: block; }
  .place-head p, .roles-top p { margin-top: 26px; }
  .product-feature, .product-feature.reverse { grid-template-columns: 1fr; gap: 53px; }
  .product-feature.reverse .feature-copy, .product-feature.reverse .screen-cluster { order: unset; }
  .phone-stack { min-height: 500px; }
  .capability-head p { margin: 0; }
  .role { grid-template-columns: 55px 1fr auto; gap: 15px; }
  .role p { display: none; }
  .cta-panel { padding: 48px 40px; }
  .story-hero { padding-top: 98px; }
  .story-crumb { margin-bottom: 43px; }
  .story-hero-grid { gap: 50px; }
  .story-layout { grid-template-columns: 1fr; gap: 55px; }
  .story-aside { position: static; max-width: 350px; }
  .story-cta-inner { display: block; }
  .story-cta .button { margin-top: 30px; }
}

@media (max-width: 560px) {
  :root { --container: calc(100vw - 32px); }
  .brand-word { font-size: 17px; }
  .hero { min-height: 760px; }
  .hero-inner { padding-top: 116px; }
  .hero h1 { margin-top: 19px; font-size: 51px; }
  .hero-copy > p { font-size: 16px; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .button { flex: 1 0 auto; padding: 13px 13px; font-size: 12px; }
  .hero-meta { display: none; }
  .hero-visual { top: 458px; width: 118vw; right: -68px; }
  .hero-browser { border-radius: 11px 11px 6px 6px; }
  .browser-top { height: 19px; padding: 0 8px; }
  .browser-top span { width: 4px; height: 4px; }
  .browser-top i { height: 7px; width: 75px; }
  .hero-phone { width: 96px; border-radius: 21px; padding: 4px; border-width: 2px; bottom: -19px; }
  .hero-phone img { border-radius: 15px; }
  .hero-phone::before { width: 44px; height: 9px; left: calc(50% - 22px); border-radius: 0 0 8px 8px; }
  .hero-caption { display: none; }
  .hero-stamp { display: none; }
  .proof-bar { width: 100%; border-radius: 0; }
  .proof-bar > div { min-height: 81px; padding: 16px; }
  .proof-value { font-size: 15px; }
  .intro, .product-section, .roles { padding: 88px 0; }
  .two-col-heading h2, .place-head h2, .product-heading h2, .capability-head h2, .roles-top h2 { font-size: 42px; }
  .two-col-heading .lead { font-size: 17px; }
  .problem-grid { grid-template-columns: 1fr; margin-top: 47px; }
  .problem-card { min-height: 201px; }
  .real-places { padding: 77px 0 88px; }
  .photo-rail { margin-top: 42px; gap: 14px; padding-left: 16px; }
  .venue-card { width: 248px; height: 303px; }
  .product-feature, .product-feature.reverse { margin-top: 62px; gap: 38px; }
  .product-feature.reverse { margin-top: 95px; }
  .feature-copy h3 { font-size: 36px; }
  .tracker-sticker { width: 80px; height: 80px; left: -7px; top: -25px; font-size: 8px; box-shadow: 4px 4px 0 var(--wine); }
  .tracker-sticker strong { font-size: 14px; }
  .phone-stack { min-height: 410px; }
  .phone-stack::before { width: 302px; height: 302px; }
  .phone-shell { height: 390px; border-radius: 29px; }
  .phone-shell img { border-radius: 21px; }
  .phone-shell::before { width: 70px; height: 14px; left: calc(50% - 35px); }
  .phone-side-card { right: 1px; bottom: 0; width: 175px; padding: 13px; }
  .capability-section { padding: 88px 0; }
  .capability-head p { font-size: 16px; }
  .capability-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .capability { min-height: 194px; }
  .capability h3 { margin-top: 36px; }
  .role-list { margin-top: 48px; }
  .role { grid-template-columns: 36px 1fr auto; padding: 22px 0; }
  .role h3 { font-size: 29px; }
  .testimonial { padding: 96px 0; }
  .quote-mark { top: -45px; font-size: 112px; }
  blockquote { font-size: 36px; }
  .final-cta { padding-top: 50px; }
  .cta-panel { width: 100%; padding: 46px 16px; border-radius: 26px 26px 0 0; }
  .cta-panel h2 { font-size: 46px; }
  .footer-inner { min-height: 148px; padding: 30px 0; align-items: flex-start; flex-direction: column; }
  .footer-links { gap: 14px; }
  .story-hero { padding-top: 95px; padding-bottom: 47px; }
  .story-crumb { margin-bottom: 33px; }
  .story-hero h1 { font-size: 52px; }
  .story-hero .hero-deck { font-size: 16px; }
  .story-chip { left: 0; bottom: 18px; }
  .story-marker { margin-top: 48px; overflow: hidden; gap: 25px; line-height: 1.3; }
  .story-body { padding: 77px 0 85px; }
  .story-layout { gap: 43px; }
  .story-aside p { font-size: 20px; }
  .chapter { padding-bottom: 55px; margin-bottom: 55px; }
  .chapter h2 { font-size: 42px; }
  .chapter p { font-size: 17px; }
  .story-stat { grid-template-columns: 1fr; }
  .story-stat-num { min-height: 121px; padding: 20px; font-size: 70px; }
  .story-callout { margin-top: 49px; padding: 25px; }
  .story-cta { padding: 73px 0; }
  .story-cta h2 { font-size: 46px; }
}

/* === Production additions (2026-10-31): nav dropdowns, mobile menu, wine story variant ===
   The design handoff's nav had plain anchors; production keeps every page reachable
   via dropdowns. Trigger carries an invisible padding bridge so diagonal mouse
   paths don't drop the hover. */
.nav-menu { position: relative; padding-bottom: 16px; margin-bottom: -16px; }
.nav-menu > a { cursor: pointer; }
.nav-drop { display: none; position: absolute; top: 100%; left: -14px; min-width: 250px; padding: 8px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); z-index: 60; }
.nav-menu:hover .nav-drop, .nav-menu:focus-within .nav-drop { display: block; }
.nav-drop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 500; opacity: 1; }
.nav-drop a:hover { background: var(--paper); }
.nav-drop a small { display: block; margin-top: 2px; color: rgba(23,24,19,.55); font: 400 10px/1.3 var(--sans); }
/* Mobile menu toggle (design left the + button unwired) */
@media (max-width: 900px) {
  body.nav-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 18px; background: var(--ink); border-bottom: 1px solid var(--line-light); }
  body.nav-open .nav-links a, body.nav-open .nav-menu > a { padding: 12px 4px; font-size: 15px; }
  body.nav-open .nav-menu { padding-bottom: 0; margin-bottom: 0; }
  body.nav-open .nav-drop { position: static; display: block; margin: 0 0 6px 10px; background: transparent; border: 0; box-shadow: none; padding: 0; }
  body.nav-open .nav-drop a { color: rgba(255,253,248,.85); padding: 7px 10px; }
  body.nav-open .nav-drop a small { color: rgba(255,253,248,.45); }
  body.nav-open .story-header .nav-links a { color: var(--cream); }
}
/* Premium story pages: wine hero surface (expansion map: 'private intelligence briefing') */
.story-hero.wine { background: var(--wine); color: var(--cream); }
.story-hero.wine .section-kicker { color: var(--citron); }
.story-hero.wine .hero-deck { color: rgba(255,253,248,.76); }
.story-hero.wine .story-crumb { color: var(--citron); }
.story-hero.wine .story-marker { border-top-color: var(--line-light); color: rgba(255,253,248,.7); }
.story-hero.wine .story-marker b { color: var(--citron); }
.story-hero.wine .story-chip { box-shadow: 5px 5px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:hover, .role:hover .arrow-link { transform: none; }
}
/* Story h1 accent spans (design uses italic wine on paper, citron on wine hero) */
.story-hero h1 .accent { font-style: italic; font-weight: 500; color: var(--wine); }
.story-hero.wine h1 .accent { color: var(--citron); }
/* Story pages: header sits over paper/wine hero, needs height room */
.story-header { position: absolute; }

/* Hero collision fix (2026-10-31): the headline's "drinks" overlapped the
   tilted browser frame at EVERY desktop width — the design was calibrated
   on an ultra-wide render. Probed live: these values hold a 13–81px gap
   from 1000px to 2560px. Mobile rules (≤900px) unchanged below. */
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(48px, 5.5vw, 84px); }
  .hero-visual { width: min(56vw, 700px); right: -40px; top: 170px; }
}

/* Who-it's-for quick picker (2026-10-31): self-identification strip right
   under the citron proof bar, routing to the three persona stories. */
.who-strip { width: var(--container); margin: 42px auto 0; display: grid; grid-template-columns: auto 1fr 1fr 1fr; align-items: center; gap: 14px; }
.who-strip .who-label { font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wine); }
.who-strip a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 22px; font: 600 clamp(16px, 1.6vw, 21px)/1.1 var(--display); letter-spacing: -.04em; color: var(--cream); background: var(--ink); border: 1px solid var(--ink); border-radius: 14px; box-shadow: 6px 8px 0 rgba(23,24,19,.14); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.who-strip a span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--ink); background: var(--citron); transition: transform .2s; }
.who-strip a:hover { background: var(--wine); border-color: var(--wine); transform: translateY(-3px); box-shadow: 8px 12px 0 rgba(23,24,19,.18); }
.who-strip a:hover span { transform: translate(2px, -2px); }
@media (max-width: 700px) {
  .who-strip { grid-template-columns: 1fr; margin-top: 28px; }
}

/* Design-bot review 2026-10-31, items 3+4:
   Proof line under the hero CTA + tighter persona-strip → problem rhythm. */
.hero-proof { margin: 18px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .03em; color: rgba(255,253,248,.6); }
.intro { padding-top: 92px; }
@media (max-width: 900px) { .intro { padding-top: 70px; } }

/* Pricing section (2026-10-31): £300 setup / £40 per user per month. */
.pricing { padding: 120px 0 110px; background: var(--paper-deep); }
.pricing-head { width: var(--container); margin: auto; display: flex; justify-content: space-between; align-items: end; gap: 45px; }
.pricing-head h2 { margin: 16px 0 0; max-width: 12ch; font: 600 clamp(42px, 4.8vw, 66px)/.95 var(--display); letter-spacing: -.066em; }
.pricing-head h2 em { color: var(--wine); font-weight: 500; }
.pricing-head p { max-width: 350px; margin: 0 0 5px; color: var(--ink-soft); font-size: 15px; }
.pricing-grid { width: var(--container); margin: 62px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-card { min-height: 260px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); }
.price-card.dark { background: var(--ink); color: var(--cream); border-color: transparent; }
.price-card.wine { background: var(--wine); color: var(--cream); border-color: transparent; }
.price-label { font: 500 10px/1 var(--mono); letter-spacing: .07em; color: var(--wine); }
.price-card.dark .price-label, .price-card.wine .price-label { color: var(--citron); }
.price-num { margin: auto 0 14px; font: 600 clamp(56px, 5.4vw, 78px)/.9 var(--display); letter-spacing: -.06em; }
.price-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 30ch; }
.price-card.dark p, .price-card.wine p { color: rgba(255,253,248,.78); }
.pricing-example { width: var(--container); margin: 34px auto 0; font: 500 15px/1.5 var(--sans); color: var(--ink-soft); }
.pricing-example b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .pricing-head { display: block; }
  .pricing-head p { margin-top: 24px; }
  .pricing-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .price-card { min-height: 200px; }
  .pricing { padding: 80px 0; }
}

/* Story hero alignment fix (2026-10-31): the grid was align-items:end, so
   the headline sank to the bottom edge of the tall screenshot and the
   wording sat "too low down" on every story page. Align to the top so the
   headline leads, and tighten the crumb gap. */
.story-hero-grid { align-items: start; }
.story-crumb { margin-bottom: 44px; }
.story-hero { padding-top: 110px; }
@media (max-width: 900px) { .story-hero { padding-top: 96px; } .story-crumb { margin-bottom: 34px; } }

/* Consistent dark menu bar everywhere (2026-10-31): the story-header
   variant rendered ink text on the hero surface — dark-on-dark on wine
   premium pages. Menu is now a solid ink bar with cream text on every
   page, matching the homepage. */
.site-header { background: var(--ink); }
.story-header .nav { color: var(--cream); border-bottom-color: var(--line-light); }
.story-header .nav-actions .button { background: var(--citron); color: var(--ink); }
.story-header .nav-links a:hover { color: var(--cream); }

/* Portal gallery (2026-10-31): brand-owner page shows the portal section
   by section with demo-data captures. */
.story-gallery { width: var(--container); margin: 90px auto 0; }
.story-gallery > .g-head { margin-bottom: 46px; }
.story-gallery .g-head h2 { margin: 15px 0 0; max-width: 16ch; font: 600 clamp(34px, 4vw, 52px)/.96 var(--display); letter-spacing: -.06em; }
.g-item { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; padding: 44px 0; border-top: 1px solid var(--line); }
.g-item .g-label { font: 500 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--wine); text-transform: uppercase; }
.g-item .g-label b { display: block; margin-top: 10px; font: 500 20px/1.1 var(--display); letter-spacing: -.04em; color: var(--ink); text-transform: none; }
.g-item .g-shot { border-radius: 15px; overflow: hidden; border: 1px solid rgba(23,24,19,.16); box-shadow: var(--shadow-soft); background: var(--cream); }
.g-item .g-shot .screen-bar { height: 26px; }
.g-item .g-shot img { width: 100%; display: block; }
.g-item p.g-cap { margin: 12px 0 0; color: var(--ink-soft); font-size: 14px; max-width: 60ch; }
@media (max-width: 900px) {
  .g-item { grid-template-columns: 1fr; gap: 18px; padding: 34px 0; }
}

/* Phone-frame gallery variant (2026-10-31): rep app captures are mobile. */
.g-item .g-shot.phone { max-width: 330px; margin: 0 auto; border-radius: 30px; border: 3px solid var(--ink); box-shadow: var(--shadow-soft); overflow: hidden; background: #0e0f0c; }
.g-item .g-shot.phone .screen-bar { display: none; }
.g-item .g-shot.phone img { border-radius: 26px; }
@media (max-width: 900px) {
  .g-item .g-shot.phone { max-width: 280px; }
}

/* App screens rail + lightbox (2026-10-31): real phone captures on the
   homepage, tap-to-zoom with caption. */
.app-screens { padding: 110px 0 90px; border-top: 1px solid var(--line); }
.app-rail { display: flex; gap: 34px; overflow-x: auto; scroll-snap-type: x proximity; padding: 20px 32px 26px max(32px, calc((100vw - min(1240px, calc(100vw - 64px))) / 2)); scrollbar-width: thin; scrollbar-color: var(--wine) transparent; }
.app-rail::-webkit-scrollbar { height: 6px; }
.app-rail::-webkit-scrollbar-thumb { background: var(--wine); border-radius: 3px; }
.app-screen { flex: 0 0 auto; scroll-snap-align: start; width: 216px; margin: 0; cursor: zoom-in; transition: transform .25s ease; }
.app-screen:hover { transform: translateY(-8px); }
.app-screen img { width: 100%; display: block; border-radius: 26px; border: 3px solid var(--ink); box-shadow: 12px 18px 40px rgba(23,24,19,.22); background: #0e0f0c; }
.app-screen figcaption { margin-top: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--wine); }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(14,15,12,.88); backdrop-filter: blur(8px); padding: 40px 20px; opacity: 0; transition: opacity .25s ease; }
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(420px, 92vw); text-align: center; }
.lightbox img { width: 100%; max-height: 76vh; object-fit: contain; border-radius: 28px; border: 3px solid var(--cream); box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: scale(.94); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); }
.lightbox.open img { transform: scale(1); }
.lightbox figcaption { margin-top: 20px; color: var(--cream); font: 400 16px/1.55 var(--body); max-width: 42ch; margin-left: auto; margin-right: auto; }
/* Wide (desktop) shots: don't shrink-to-fit — show near full width and
   let the overlay scroll so the UI stays legible. */
.lightbox.wide { display: block; overflow-y: auto; padding: 6vh 3vw 8vh; }
.lightbox.wide figure { max-width: min(1120px, 94vw); margin: 0 auto; }
.lightbox.wide img { max-height: none; object-fit: initial; border-radius: 14px; }
.lightbox-close { position: fixed; top: 26px; right: 30px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,253,248,.4); background: rgba(14,15,12,.6); color: var(--cream); font-size: 26px; cursor: pointer; }
.lightbox-close:hover { background: var(--citron); color: var(--ink); border-color: var(--citron); }
@media (max-width: 900px) {
  .app-screens { padding: 70px 0 60px; }
  .app-screen { width: 178px; }
}

/* Interactive hero (2026-10-31): every hero screen zooms to the lightbox;
   a second phone (Products) joins the composition on the left. */
.hero-visual .zoomable { cursor: zoom-in; }
.hero-visual .zoomable:focus-visible { outline: 2px solid var(--citron); outline-offset: 4px; }
.hero-phone-2 { width: 160px; left: 18px; right: auto; bottom: -64px; transform: rotate(6deg); z-index: 3; }
.hero-browser.zoomable { transition: transform .25s ease; }
.hero-browser.zoomable:hover { transform: translateY(-6px); }
.hero-phone.zoomable { transition: transform .25s ease; }
.hero-phone.zoomable:hover { transform: rotate(-7deg) translateY(-8px); }
.hero-phone-2.zoomable:hover { transform: rotate(6deg) translateY(-8px); }
@media (max-width: 1440px) {
  .hero-phone-2 { left: 8px; width: 148px; }
}
@media (max-width: 1100px) {
  .hero-phone-2 { display: none; }
}

/* Triptych hero (2026-10-31, design-bot handoff): centered copy over three
   photographic audience routes; product proof moves to the live-product
   stage directly below. */
.hero-triptych { min-height: auto; padding-bottom: 76px; }
.hero-triptych .hero-inner { padding-top: 145px; }
.hero-copy-centered { width: min(820px, 100%); margin: 0 auto; text-align: center; }
.hero-copy-centered .eyebrow { justify-content: center; }
.hero-triptych h1 { max-width: 14ch; margin: 24px auto 22px; font-size: clamp(50px, 5.6vw, 82px); letter-spacing: -.028em; line-height: 1.02; }
.hero-copy-centered > p { margin-right: auto; margin-left: auto; max-width: 810px; }
.hero-copy-centered .hero-cta { justify-content: center; }
.audience-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 57px; width: var(--container); margin-left: auto; margin-right: auto; }
.audience-card { position: relative; min-height: 445px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; color: var(--cream); border: 1px solid rgba(255,253,248,.24); border-radius: 18px; background: #23231f; box-shadow: 0 20px 45px rgba(0,0,0,.22); transition: transform .3s ease, border-color .3s ease; }
.audience-card:hover { transform: translateY(-7px); border-color: var(--citron); }
.audience-card:nth-child(2) { transform: translateY(22px); }
.audience-card:nth-child(2):hover { transform: translateY(15px); }
.audience-card:nth-child(3) { transform: translateY(6px); }
.audience-card:nth-child(3):hover { transform: translateY(-1px); }
.audience-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform .6s ease, filter .4s ease; }
.audience-card:hover img { transform: scale(1.055); filter: saturate(1) contrast(1.04); }
.card-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(18,18,14,.77) 0%, rgba(18,18,14,.08) 37%, rgba(18,18,14,.86) 100%); }
.card-top { display: flex; align-items: center; gap: 8px; padding: 18px; font: 500 10px/1 var(--mono); letter-spacing: .05em; }
.card-top span { color: var(--citron); }
.card-top b { margin-left: auto; display: grid; place-items: center; width: 27px; height: 27px; color: var(--ink); border-radius: 50%; background: var(--citron); font: 500 15px/1 var(--sans); }
.card-bottom { display: block; padding: 0 21px 22px; }
.card-bottom strong { display: block; max-width: 14ch; font: 500 clamp(27px, 2.5vw, 35px)/.98 var(--display); letter-spacing: -.06em; }
.card-bottom small { display: block; max-width: 31ch; margin-top: 12px; color: rgba(255,253,248,.76); font-size: 13px; line-height: 1.37; }

/* Live-product stage: the real screens, right under the hero. */
.live-product { padding: 136px 0 90px; overflow: hidden; background: var(--paper); }
.live-product-head { width: var(--container); margin: auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 78px; align-items: end; }
.live-product-head h2 { max-width: 11ch; margin: 17px 0 0; font: 600 clamp(43px, 5.2vw, 73px)/.95 var(--display); letter-spacing: -.068em; }
.live-product-head h2 em { color: var(--wine); font-weight: 500; }
.live-product-intro { max-width: 475px; padding-bottom: 8px; }
.live-product-intro p { margin-bottom: 24px; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.live-product-stage { width: var(--container); min-height: 640px; margin: 64px auto 0; position: relative; overflow: hidden; border-radius: 26px; background: linear-gradient(126deg, #20211b 0%, #2d2529 69%, #522033 100%); }
.live-product-stage::before { content: ''; position: absolute; width: 51vw; height: 51vw; left: -14vw; bottom: -26vw; border: 1px solid rgba(215,252,82,.28); border-radius: 50%; }
.live-browser { position: absolute; z-index: 1; top: 80px; left: 8%; width: 76%; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 16px 16px 9px 9px; background: var(--cream); box-shadow: var(--shadow-deep, 0 30px 80px rgba(0,0,0,.5)); transform: rotate(-1.6deg); cursor: zoom-in; transition: transform .25s ease; }
.live-browser:hover { transform: rotate(-1.6deg) translateY(-6px); }
.live-browser img { width: 100%; }
.live-phone { position: absolute; z-index: 3; right: 8%; bottom: -46px; width: 192px; padding: 8px; overflow: hidden; border: 3px solid #565650; border-radius: 29px; background: #111; box-shadow: 0 25px 45px rgba(0,0,0,.5); transform: rotate(6deg); cursor: zoom-in; transition: transform .25s ease; }
.live-phone:hover { transform: rotate(6deg) translateY(-8px); }
.live-phone::before { content: ''; position: absolute; z-index: 2; top: 0; left: calc(50% - 37px); width: 74px; height: 16px; border-radius: 0 0 13px 13px; background: #111; }
.live-phone img { border-radius: 20px; width: 100%; }
.live-phone-2 { right: auto; left: 3.5%; bottom: -30px; width: 168px; transform: rotate(-6deg); z-index: 4; }
.live-phone-2:hover { transform: rotate(-6deg) translateY(-8px); }
.live-product-stage .zoomable:focus-visible { outline: 2px solid var(--citron); outline-offset: 4px; }
.live-note { position: absolute; z-index: 4; top: 31px; right: 6%; min-width: 152px; padding: 12px 13px; color: var(--ink); background: var(--citron); box-shadow: 5px 5px 0 var(--wine); transform: rotate(3deg); }
.live-note span, .live-note small { display: block; font: 500 9px/1.3 var(--mono); letter-spacing: .03em; }
.live-note b { display: block; margin: 7px 0 5px; font: 600 25px/.95 var(--display); letter-spacing: -.06em; }

@media (max-width: 900px) {
  .hero-copy-centered > p { margin-right: 0; margin-left: 0; }
  .audience-triptych { margin-top: 46px; }
  .audience-card { min-height: 367px; }
  .live-product-head { grid-template-columns: 1fr; gap: 25px; }
  .live-product-intro { padding: 0; }
  .live-product-stage { min-height: 560px; }
  .live-browser { top: 70px; left: 7%; width: 82%; }
  .live-phone { right: 6%; width: 154px; }
  .live-phone-2 { width: 138px; }
  .live-note { right: 6%; }
}
@media (max-width: 560px) {
  .hero-triptych { padding-bottom: 38px; }
  .hero-triptych .hero-inner { padding-top: 113px; }
  .hero-triptych h1 { max-width: 10ch; font-size: 51px; }
  .hero-triptych .hero-cta .button { flex: 0 1 auto; }
  .audience-triptych { width: calc(100% + 32px); margin-top: 37px; margin-left: -16px; display: grid; grid-auto-flow: column; grid-auto-columns: 78vw; grid-template-columns: none; gap: 12px; padding: 0 16px 13px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .audience-triptych::-webkit-scrollbar { display: none; }
  .audience-card, .audience-card:nth-child(2), .audience-card:nth-child(3) { min-height: 357px; transform: none; scroll-snap-align: start; }
  .audience-card:hover, .audience-card:nth-child(2):hover { transform: none; }
  .live-product { padding-top: 86px; }
  .live-product-head h2 { font-size: 45px; }
  .live-product-intro p { font-size: 16px; }
  .live-product-stage { width: 100%; min-height: 470px; margin-top: 44px; border-radius: 0; }
  .live-browser { top: 67px; left: 4%; width: 91%; border-radius: 10px 10px 5px 5px; }
  .live-browser .browser-top { height: 19px; padding: 0 8px; }
  .live-phone { right: 4%; bottom: -22px; width: 105px; padding: 4px; border-width: 2px; border-radius: 21px; }
  .live-phone img { border-radius: 15px; }
  .live-phone::before { left: calc(50% - 22px); width: 44px; height: 9px; border-radius: 0 0 8px 8px; }
  .live-phone-2 { display: none; }
  .live-note { top: 26px; right: 16px; min-width: 128px; padding: 9px 10px; }
  .live-note b { font-size: 20px; }
}

/* Story hero caption variant (2026-10-31): replaces the LIVE PRODUCT chip
   when the screenshot is demo data — describes what the screen proves. */
.story-cap { margin-top: 18px; max-width: 46ch; color: var(--ink-soft); font: 400 14px/1.55 var(--body); }
.story-cap::before { content: 'ABOUT THIS SCREEN'; display: block; margin-bottom: 7px; color: var(--wine); font: 500 9px/1 var(--mono); letter-spacing: .08em; }

/* Hero sub break is desktop-only; mobile wraps naturally. */
@media (max-width: 700px) { .sub-br { display: none; } }

/* ── Photography components (v2 preview, 2026-10-31) ─────────────── */
/* Full-bleed editorial photo band: ink-graded image, Fraunces pull-line.
   Used on story pages between the hero marker and the body chapters. */
.photo-band { position: relative; width: min(100%, 1440px); margin: 0 auto; overflow: hidden; border-radius: 0; isolation: isolate; }
.photo-band img { display: block; width: 100%; height: clamp(340px, 46vw, 560px); object-fit: cover; object-position: center 62%; filter: saturate(.86) contrast(1.04); }
.photo-band::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(23,24,19,.78) 0%, rgba(23,24,19,.42) 38%, rgba(23,24,19,.08) 68%),
              linear-gradient(to top, rgba(23,24,19,.45), transparent 42%); }
.photo-band figcaption { position: absolute; z-index: 2; left: clamp(24px, 6vw, 80px); bottom: clamp(28px, 5vw, 60px); max-width: 480px; color: var(--cream); }
.photo-band .pb-kicker { display: block; margin-bottom: 12px; color: var(--citron); font: 500 10px/1 var(--mono); letter-spacing: .09em; }
.photo-band figcaption p { margin: 0; font: 500 clamp(21px, 2.6vw, 31px)/1.18 var(--display); letter-spacing: -.018em; text-wrap: balance; }
@media (max-width: 700px) {
  .photo-band img { height: 380px; }
  .photo-band figcaption { left: 20px; right: 20px; bottom: 24px; }
}

/* Portrait photo inside the story aside, under the pull text. */
.aside-photo { display: block; width: 100%; margin-top: 26px; border-radius: 10px; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.9) contrast(1.03); box-shadow: 0 16px 38px rgba(23,24,19,.28); }

/* Chapter photography (v2 preview): desktop splits text left /
   portrait photo right; mobile stacks photo above the text. */
.chapter-split { display: grid; grid-template-columns: 1fr minmax(230px, 300px); gap: 38px; align-items: center; }
.chapter-split .chapter-text { min-width: 0; }
.chapter-photo { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; margin: 0; filter: saturate(.88) contrast(1.04); box-shadow: 0 18px 42px rgba(23,24,19,.20); }
@media (max-width: 900px) {
  .chapter-split { grid-template-columns: 1fr; gap: 18px; }
  .chapter-split .chapter-photo { order: -1; max-height: 380px; }
}

/* Story video block (2026-11-01): usage film between hero and chapters. */
.story-video { width: min(960px, calc(100% - 48px)); margin: 0 auto 64px; }
.story-video .sv-head { max-width: 720px; margin-bottom: 22px; }
.story-video .sv-head h2 { margin: 10px 0 0; font: 600 clamp(30px,3.4vw,46px)/1.02 var(--display); letter-spacing: -.05em; }
.sv-embed { position: relative; aspect-ratio: 16 / 9; background: #0d0d0d; }
.sv-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }