/* Landing-only presentation; document pages continue to use style.css. */
.marketing { --panel: #F4F4F2; --ink: #0B0B0B; --ease: cubic-bezier(.23,1,.32,1); }
.marketing [hidden] { display: none !important; }
.marketing button, .marketing input { font: inherit; }
.marketing button, .marketing summary { -webkit-tap-highlight-color: transparent; }
.marketing button { cursor: pointer; color: var(--ink); }
.marketing button:focus-visible, .marketing input:focus-visible, .marketing summary:focus-visible, .marketing a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.marketing img { display: block; object-fit: contain; max-width: 100%; }
.marketing svg { flex-shrink: 0; }
.marketing .content-width { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.marketing .stage-width { width: min(1000px, 100%); margin-inline: auto; }
.marketing .section-pad { padding-block: 128px; }
.marketing .overline { font-size: 11px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.marketing h2 { font-size: 48px; line-height: 50px; letter-spacing: -.03em; }
.marketing h3 { font-size: 26px; line-height: 30px; letter-spacing: -.025em; }
.marketing .site-header { position: sticky; top: 0; z-index: 20; width: 100%; padding: 0 32px; height: 64px; min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; background: var(--panel); border-bottom: 1px solid transparent; transition: background 180ms, border-color 180ms; }
.marketing .site-header.is-scrolled { background: #fff; border-color: var(--hairline); }
.marketing .site-header .wordmark { width: 160px; }
.marketing .landing-nav { display: flex; gap: 32px; }
.marketing .landing-nav a { font-size: 13px; font-weight: 700; }
.marketing .app-cta { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 56px; padding: 14px 24px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 120ms, transform 120ms var(--ease); }
.marketing .app-cta:hover { background: #303030; }
.marketing .app-cta:active { transform: scale(.97); }
.marketing .app-cta span { font-size: 20px; font-weight: 600; }
.marketing .menu-toggle { display: none; }
.marketing section[id] { scroll-margin-top: 64px; }
@media (min-width: 1024px) { html { scroll-snap-type: y proximity; scroll-padding-top: 64px; } .phone-stage { scroll-snap-align: center; } }
.landing-hero { position: relative; isolation: isolate; background: var(--panel); min-height: calc(100svh - 64px); display: flex; align-items: center; justify-content: center; padding: 100px 24px 120px; }
.hero-center { position: relative; z-index: 2; text-align: center; width: min(820px, 100%); }
.marketing .hero-eyebrow { color: #5B5B57; margin-bottom: 28px; }
.marketing .landing-hero h1 { font-size: 72px; line-height: 72px; letter-spacing: -.04em; margin: 0; }
.hero-lead { font-size: 18px; line-height: 28px; color: var(--muted); margin-top: 24px; }
.example-explorer { width: min(640px, 100%); margin: 30px auto 24px; }
.example-search label { display: block; font-size: 12px; line-height: 20px; text-align: left; padding-left: 22px; margin-bottom: 9px; }
.example-search label span { color: var(--muted); }
.search-capsule { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; height: 82px; border: 1px solid #DDDDD8; padding: 8px; background: #ffffffad; border-radius: 999px; box-shadow: inset 0 1px 2px #fff; }
.search-input-wrap { min-width: 0; display: flex; gap: 12px; align-items: center; background: #fff; padding-inline: 20px 8px; border-radius: 999px; }
.search-input-wrap svg { fill: none; stroke: #7A7A73; stroke-width: 1.6; }
.search-input-wrap input { width: 100%; min-width: 0; border: 0; color: var(--ink); background: transparent; height: 100%; font-size: 16px; padding: 0; border-radius: 4px; }
.search-input-wrap input::placeholder { color: #75756F; opacity: 1; }
.search-capsule button { border: 1px solid var(--hairline); background: #fff; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.search-capsule button:hover { background: #E8E8E2; }
.search-capsule button svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.release-status { color: var(--muted); font-size: 12px; line-height: 20px; margin-top: 14px; }
.hero-example-note { max-width: 360px; margin: 8px auto 0; color: var(--muted); font-size: 11px; line-height: 17px; }
.search-results { margin-top: 12px; padding: 12px 18px; text-align: left; background: #fff; border: 1px solid var(--hairline); border-radius: 20px; }
.search-result { display: flex; align-items: center; gap: 12px; padding-block: 7px; border-bottom: 1px solid var(--hairline); }
.search-result > span { flex: 1; }
.search-result strong, .search-result small { display: block; }
.search-result strong { font-size: 14px; }
.search-result small { color: var(--muted); font-size: 11px; }
.search-result a { font-size: 12px; min-height: 44px; display: flex; align-items: center; }
#search-status { font-size: 12px; color: var(--muted); margin-top: 12px; }
.text-button { border: 0; background: transparent; font-size: 12px !important; min-height: 44px; padding: 0 8px; text-decoration: underline; }
.static-examples { font-size: 13px; display: grid; gap: 12px; }
.bottle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bottle-tile { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--r, 0deg)); position: absolute; width: 160px; height: 180px; display: grid; place-items: center; background: #EAEAE5; border: 1px solid #E1E1DC; border-radius: 20px; }
.bottle-tile img { width: auto; height: 132px; }
.bottle-one { top: 4%; left: 8%; --r: -8deg; background: #EDE9DF; }
.bottle-two { top: 7%; right: 7%; width: 142px; height: 158px; --r: 7deg; background: #E1E4E2; }
.bottle-two img { height: 116px; }
.bottle-three { top: 46%; left: 1%; width: 120px; height: 142px; --r: 6deg; background: #EBE0DD; }
.bottle-three img { height: 106px; }
.bottle-four { top: 47%; right: 1%; width: 124px; height: 148px; --r: -7deg; background: #E2E6DD; }
.bottle-four img { height: 112px; }
.bottle-five { bottom: 8%; left: 10%; width: 138px; height: 156px; --r: 5deg; background: #DEE5E8; }
.bottle-five img { height: 120px; }
.bottle-six { bottom: 7%; right: 10%; width: 152px; height: 168px; --r: -6deg; background: #EDE6D8; }
.bottle-six img { height: 128px; }
.bottle-field .bottle-tile { background: #fff; }
.center-heading { text-align: center; }
.center-heading h2 { margin-top: 20px; }
.center-heading > p:last-child { font-size: 18px; line-height: 28px; color: var(--muted); margin-top: 22px; }
.phone-stage { position: relative; margin-top: 54px; border-radius: 24px; background: var(--panel); display: grid; grid-template-columns: 1fr 340px 1fr; align-items: center; padding: 32px 32px 24px; }
.phone-figure { grid-column: 2; position: relative; width: 340px; }
.phone { background: #fff; border: 7px solid #171717; outline: 1px solid #646460; outline-offset: -3px; border-radius: 50px; padding: 12px 13px 9px; width: 340px; box-shadow: 0 26px 48px #22222218, 0 2px 5px #0002; overflow: hidden; }
.phone-status { display: flex; position: relative; align-items: center; justify-content: space-between; padding: 0 12px; height: 30px; font-size: 11px; }
.phone-island { position: absolute; background: #111; width: 90px; height: 25px; left: 50%; transform: translateX(-50%); top: -3px; border-radius: 999px; }
.phone-nav { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px 7px; font-size: 12px; }
.phone-nav span:first-child, .phone-nav span:last-child { font-size: 27px; font-weight: 600; }
.phone-bottle { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; display: grid; place-items: center; height: 182px; }
.phone-bottle img { width: auto; height: 155px; }
.phone-copy { padding: 16px 4px 2px; }
.phone-brand { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.marketing .phone-copy h3 { font-size: 25px; line-height: 28px; margin-top: 3px; }
.phone-meta { color: var(--muted); font-size: 11px; margin-top: 5px; }
.phone-price { margin-top: 16px; display: grid; }
.phone-price .overline { font-size: 9px; }
.phone-price > strong { font-size: 40px; line-height: 46px; font-weight: 800; letter-spacing: -.04em; }
.good-price { color: var(--green); font-size: 14px; font-weight: 700; }
.phone-price .good-price { font-size: 10px; }
.phone-price .good-price > span { color: var(--muted); font-size: 9px; }
.phone-meter { border: 1px solid var(--hairline); padding: 10px; margin-top: 15px; border-radius: 10px; }
.phone-meter > div { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 9px; }
.phone-meter .verdict { min-height: 22px; font-size: 9px; padding: 2px 8px; }
.value-bar { display: block; width: 100%; height: 20px; margin-block: 8px; overflow: visible; }
.value-bar rect { fill: #D5E3DA; }
.value-bar circle { fill: #fff; stroke: var(--green); stroke-width: 1; }
.phone-store { display: flex; justify-content: space-between; gap: 8px; background: var(--green-soft); color: var(--green); font-size: 10px; margin-top: 11px; padding: 12px 9px; border-radius: 8px; }
.phone-home { width: 100px; height: 4px; background: #111; border-radius: 999px; margin: 17px auto 0; }
.phone-figure figcaption { font-size: 10px; margin-top: 12px; }
.phone-figure { zoom: var(--phone-zoom, 1); }
.stage-note { font-size: 15px; line-height: 24px; color: var(--muted); align-self: center; margin-bottom: 80px; padding-left: 12px; }
.note-line { display: block; height: 1px; width: 40px; background: #A5A59B; margin-bottom: 22px; }
.verdict-callout { position: absolute; left: calc(50% + 190px); top: 50%; transform: translateY(-50%); width: 250px; padding: 26px; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; box-shadow: 0 8px 32px #0B0B0B14; }
.verdict-callout .overline { font-size: 9px; letter-spacing: .08em; }
.marketing .verdict-callout h3 { font-size: 24px; line-height: 28px; margin-top: 10px; }
.verdict-callout > p:not(.overline) { margin-top: 14px; }
.verdict-callout > p:not(.overline) { font-size: 12px; line-height: 19px; color: var(--muted); }
.example-tag { display: block; margin-top: 18px; font-size: 9px; color: var(--muted); }
.stage-corner { position: absolute; bottom: 28px; right: 28px; font-size: 8px; letter-spacing: .1em; color: var(--muted); }
.stage-caption { text-align: center; margin-top: 36px; }
.stage-caption p { color: var(--muted); font-size: 16px; line-height: 26px; margin-bottom: 24px; }
.market-section { position: relative; background: var(--ink); color: #fff; }
.marketing.motion-ok .market-section { height: 260vh; }
.market-sticky { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 56px; padding-block: 112px; overflow: hidden; }
.marketing.motion-ok .market-sticky { position: sticky; top: 64px; height: calc(100vh - 64px); min-height: 560px; padding-block: 40px; }
.marketing .market-copy h2 { color: #fff; }
.market-copy p { color: #A3A39C; font-size: 18px; line-height: 28px; margin-top: 16px; max-width: 440px; }
.market-tape { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 36px; }
.tape-row { position: relative; display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; will-change: transform; }
.tape-item { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 8px 30px; border-left: 1px solid #2B2B29; font-size: clamp(22px, 3.2vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tape-row:not([data-row="1"]) .tape-item { font-size: clamp(15px, 2vw, 28px); color: #8E8E87; }
.tape-name { text-transform: uppercase; }
.tape-move { font-size: .6em; font-weight: 700; letter-spacing: .03em; }
.tape-move.down { color: #3FBF8A; }
.tape-move.up, .tape-move.flat { color: #77776F; }
.tape-row[data-row="1"] .tape-item { min-width: var(--cell, 0px); justify-content: center; }
.tape-row[data-row="1"] .tape-item:not(.tape-featured) { opacity: calc(1 - var(--settled, 1) * .6); }
.marketing.motion-ok .tape-row[data-row="1"] { transition: transform 340ms var(--ease); }
.marketing.timer-motion .tape-row[data-row="1"] { transition: none; }
.marketing.motion-ok .tape-row[data-row="1"] .tape-item { opacity: .38; transition: opacity 240ms var(--ease); }
.marketing.motion-ok .tape-row[data-row="1"] .tape-item.is-framed { opacity: 1; }
.marketing:not(.motion-ok) .tape-featured, .marketing:not(.motion-ok) .tape-featured + .tape-item, .is-framed, .is-framed + .tape-item { border-left-color: transparent; }
.tape-featured .verdict { font-size: 13px; letter-spacing: 0; opacity: var(--settled, 1); translate: 0 calc((1 - var(--settled, 1)) * 8px); }
.tape-slot { display: none; position: absolute; grid-row: 2 / 3; grid-column: 1 / 2; top: -8px; bottom: -8px; left: 50%; transform: translateX(-50%); border: 2px solid #8E8E87; border-radius: 16px; pointer-events: none; }
.tape-slot::before { content: "TODAY"; position: absolute; left: 14px; top: -21px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #8E8E87; }
.has-js .tape-slot { display: block; }
.market-landed { color: #A3A39C; font-size: 14px; line-height: 22px; }
.market-landed span { color: #fff; font-weight: 700; }
.market-landed small { font-size: 11px; }
.marketing [data-pending] { opacity: 0; }
.marketing.motion-ok .chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.marketing.motion-ok .chart-area, .marketing.motion-ok .chart-end { opacity: 0; }
.marketing.motion-ok .is-drawn .chart-line { stroke-dashoffset: 0; }
.marketing.motion-ok .is-drawn .chart-area { opacity: .65; }
.marketing.motion-ok .is-drawn .chart-end { opacity: 1; }
.marketing .feature-section { padding-top: 128px; }
.section-intro { margin-bottom: 44px; }
.section-intro h2 { margin-top: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.demo-card { border: 1px solid var(--hairline); border-radius: 24px; overflow: hidden; min-width: 0; }
.demo-stage { height: 340px; position: relative; background: var(--panel); overflow: hidden; }
.demo-label { position: absolute; left: 24px; top: 22px; font-size: 9px; letter-spacing: .1em; color: var(--muted); z-index: 2; }
.bottle-choices { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 72px 20px 0; }
.static-watch-bottles { display: flex; justify-content: center; gap: 14px; padding: 72px 20px 0; }
.static-watch-bottles img { width: 25%; max-width: 90px; height: 120px; }
.has-js .static-watch-bottles { display: none; }
.bottle-choice { display: grid; justify-items: center; position: relative; background: #fff; border: 1px solid #E6E6DF; border-radius: 12px; padding: 12px 8px 10px; width: 118px; min-width: 0; transition: transform 150ms var(--ease), border-color 150ms; }
.bottle-choice img { height: 112px; width: auto; }
.bottle-choice > span:last-child { font-size: 9px; margin-top: 7px; }
.choice-heart { position: absolute; right: 7px; top: 4px; font-size: 20px; }
.bottle-choice[aria-pressed="true"] { border-color: var(--ink); }
.bottle-choice:hover { transform: translateY(-4px); }
.watch-dock { position: absolute; bottom: 27px; left: 32px; right: 32px; display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid #E2E2DB; border-radius: 14px; background: #fff; }
.dock-heart { font-size: 25px; }
.watch-dock > div { flex: 1; min-width: 0; }
.watch-dock strong { font-size: 11px; }
.watch-dock p { font-size: 9px; line-height: 15px; color: var(--muted); }
.watch-dock img { height: 44px; width: 32px; }
.demo-copy { position: relative; padding: 32px; }
.demo-copy h3 { margin-top: 13px; }
.demo-copy > p { font-size: 14px; color: var(--muted); line-height: 23px; margin-top: 20px; }
.replay-button { position: absolute; right: 26px; top: 30px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); background: #fff; border-radius: 999px; min-height: 44px; padding: 7px 11px; font-size: 16px !important; }
.replay-button span { font-size: 10px; }
.alert-stage { background: #ECEEE9; }
.alert-phone { position: absolute; width: 240px; height: 390px; top: 52px; left: calc(50% - 120px); background: #DDDED4; border: 5px solid #222; border-radius: 35px; transform: rotate(-6deg); text-align: center; padding: 17px; }
.mini-island { background: #222; display: block; width: 67px; height: 17px; border-radius: 999px; margin: -9px auto 15px; }
.lock-time { display: block; font-size: 58px; line-height: 1; letter-spacing: -.04em; font-weight: 700; color: #5C6257; }
.lock-date { display: block; font-size: 11px; margin-top: 5px; color: #5C6257; }
.lock-bottle { padding-top: 20px; }
.lock-bottle img { margin: auto; }
.alert-notification { position: absolute; top: 174px; left: 8%; width: 84%; background: #FFFFFFF5; border: 1px solid #fff; border-radius: 17px; padding: 19px; box-shadow: 0 8px 32px #0B0B0B14; }
.notification-top { display: flex; gap: 9px; align-items: center; font-size: 9px; letter-spacing: .06em; color: var(--muted); }
.notification-top > span:last-child { margin-left: auto; font-size: 9px; }
.notification-top img { border-radius: 6px; }
.alert-notification h4 { font-size: 14px; margin: 12px 0 5px; font-weight: 800; }
.alert-notification p { font-size: 12px; line-height: 19px; }
.perspective-section { background: #F8F8F6; border-block: 1px solid var(--hairline); }
.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 58px; }
.split-heading h2 { margin-top: 17px; }
.split-heading > p { color: var(--muted); font-size: 18px; line-height: 28px; max-width: 320px; justify-self: end; padding-bottom: 3px; }
.price-stage { position: relative; min-height: 400px; display: grid; grid-template-columns: minmax(0,1fr) 316px; align-items: start; padding-block: 22px; }
.chart-panel { min-width: 0; margin-right: -64px; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; padding: 30px 96px 25px 32px; }
.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marketing .chart-heading h3 { margin-top: 9px; font-size: 22px; }
.chart-heading .overline { font-size: 9px; }
.period-pill { border: 1px solid var(--hairline); border-radius: 999px; font-size: 10px; padding: 5px 12px; white-space: nowrap; }
.plot { display: flex; align-items: stretch; gap: 15px; margin-top: 34px; }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--muted); padding-block: 9px 17px; }
.marketing .history-chart { width: 100%; min-width: 0; height: auto; overflow: visible; flex-shrink: 1; }
.chart-grid { stroke: #EBEBE6; stroke-width: 1; fill: none; }
.chart-area { fill: #E6F2EC; opacity: .65; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-end { fill: var(--green); stroke: white; stroke-width: 3; }
.chart-dates { display: flex; justify-content: space-between; padding-left: 39px; color: var(--muted); font-size: 10px; margin-top: 8px; }
.chart-footnote { margin-top: 28px; font-size: 10px; color: var(--muted); }
.price-summary { width: 316px; position: relative; margin-top: 58px; background: #fff; border: 1px solid #E0E0D9; border-radius: 20px; padding: 25px; box-shadow: 0 8px 32px #0B0B0B14; }
.summary-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--hairline); margin: -5px 0 20px; padding-bottom: 13px; }
.summary-header .overline { font-size: 9px; }
.summary-price { display: block; font-size: 46px; line-height: 52px; font-weight: 800; letter-spacing: -.04em; }
.summary-previous { color: var(--muted); font-size: 10px; margin-top: 4px; }
.summary-meter { margin-top: 26px; }
.summary-meter .overline { font-size: 9px; }
.meter-labels { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--muted); }
.meter-labels b { color: var(--ink); margin-left: 4px; }
.summary-verdict { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 11px; }
.example-note { font-size: 9px; color: var(--muted); margin-top: 17px; }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.support-card { border: 1px solid var(--hairline); border-radius: 24px; padding: 28px; min-width: 0; }
.support-card > .overline { font-size: 9px; }
.marketing .support-card h3 { font-size: 22px; line-height: 27px; margin-top: 25px; }
.support-card > p { color: var(--muted); font-size: 14px; line-height: 23px; margin-top: 13px; }
.small-example { display: block; color: var(--muted); font-size: 9px; margin-top: 20px; }
.store-comparison { height: 200px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.store-row { display: flex; gap: 8px; align-items: center; padding: 10px 8px; border-radius: 8px; }
.store-row.lowest { background: var(--green-soft); }
.store-monogram { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #D5D7CE; flex-shrink: 0; font-size: 10px; }
.store-row > span:nth-child(2) { flex: 1; font-size: 9px; line-height: 15px; }
.store-row small { display: block; font-size: 8px; color: var(--muted); }
.store-row > strong { font-size: 11px; white-space: nowrap; }
.store-row.lowest > strong { color: var(--green); }
.size-example { height: 200px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.condition-display { display: flex; align-items: center; padding: 4px; border-radius: 999px; background: var(--panel); width: 160px; align-self: center; font-size: 11px; }
.condition-display > span { padding: 7px 0; text-align: center; flex: 1; border-radius: 999px; }
.selected-option { color: #fff; background: var(--ink); }
.size-display { display: flex; gap: 7px; }
.size-display > span { position: relative; flex: 1; border: 1px solid var(--hairline); border-radius: 9px; padding: 12px; text-align: center; font-size: 20px; font-weight: 800; }
.size-display small { font-size: 9px; display: block; font-weight: 600; }
.size-display b { position: absolute; top: 3px; right: 6px; font-size: 9px; }
.size-example > p { text-align: center; color: var(--muted); font-size: 9px; }
.notes-example { height: 200px; position: relative; display: grid; place-items: center; }
.notes-example > img { margin-top: 3px; }
.note-orbit { position: absolute; font-size: 10px; border: 1px solid #DEDED6; border-radius: 999px; padding: 6px 11px; background: var(--panel); }
.note-bergamot { top: 36px; left: 0; transform: rotate(-7deg); }
.note-iris { top: 76px; right: 0; transform: rotate(5deg); }
.note-cedar { bottom: 31px; left: 10px; transform: rotate(-4deg); }
.notes-caption { font-size: 7px; color: var(--muted); position: absolute; bottom: 7px; letter-spacing: .04em; }
.marketing .faq-section { padding-top: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; }
.faq-heading h2 { margin-top: 17px; }
.faq-heading > p:last-child { color: var(--muted); font-size: 14px; line-height: 24px; margin-top: 25px; }
.faq-heading a { color: var(--ink); min-height: 44px; display: inline-flex; gap: 16px; align-items: center; }
.faq-items { border-top: 1px solid var(--hairline); }
.faq-items details { border-bottom: 1px solid var(--hairline); }
.faq-items summary { list-style: none; cursor: pointer; display: flex; gap: 14px; justify-content: space-between; align-items: center; font-size: 15px; line-height: 23px; font-weight: 700; padding: 23px 0; }
.faq-items summary::-webkit-details-marker { display: none; }
.faq-items summary > span { font-size: 23px; font-weight: 600; transition: transform 150ms; }
.faq-items details[open] summary > span { transform: rotate(45deg); }
.faq-items details > p { color: var(--muted); font-size: 14px; line-height: 24px; padding: 0 25px 24px 0; }
.marketing .closing-section { background: var(--panel); text-align: center; overflow: hidden; padding-bottom: 0; }
.closing-inner { position: relative; padding-inline: 20px; }
.closing-icon { margin: auto auto 29px; border-radius: 17px; box-shadow: 0 5px 12px #0B0B0B0A; }
.closing-inner h2 { margin-top: 19px; }
.closing-inner > p:not(.overline) { font-size: 16px; line-height: 26px; color: var(--muted); margin-top: 22px; }
.closing-inner .app-cta { margin-top: 28px; }
.closing-inner .release-status { display: block; font-size: 14px; margin-top: 18px; }
.closing-bottles { display: flex; justify-content: center; align-items: end; gap: 42px; margin-top: 64px; margin-bottom: -24px; }
.closing-bottles img:first-child { transform: rotate(-8deg); }
.closing-bottles img:last-child { transform: rotate(8deg); }
.marketing .site-footer { padding-block: 44px; background: #fff; }
.marketing .site-footer .wrap { width: min(1280px, calc(100% - 96px)); }
.marketing .footer-nav a { font-size: 12px; }
.marketing .footer-top .wordmark { width: 190px; }
.flying-bottle { position: fixed; top: 0; left: 0; width: 100px; height: 132px; z-index: 30; pointer-events: none; transform-origin: top left; }
@media (max-width: 1200px) and (min-width: 768px) {
  .bottle-one { left: 4%; } .bottle-two { right: 4%; }
  .bottle-three, .bottle-four { display: none; }
  .support-card { padding: 22px; }
  .support-grid { gap: 18px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .marketing .content-width, .marketing .site-footer .wrap { width: calc(100% - 64px); }
  .marketing .section-pad { padding-block: 96px; }
  .marketing .faq-section { padding-top: 0; }
  .marketing .feature-section { padding-top: 96px; }
  .marketing .landing-hero h1 { font-size: 56px; line-height: 58px; }
  .bottle-one, .bottle-two { width: 105px; height: 118px; top: 0; }
  .bottle-one img, .bottle-two img { height: 88px; }
  .bottle-five, .bottle-six { bottom: 8%; width: 100px; height: 116px; }
  .bottle-five img, .bottle-six img { height: 85px; }
  .phone-stage { display: flex; flex-direction: column; gap: 28px; padding: 60px 24px 32px; }
  .stage-note { display: none; }
  .verdict-callout { position: relative; inset: auto; transform: none; width: 340px; padding: 24px; }
  .stage-corner { display: none; }
  .marketing .verdict-callout h3 { font-size: 21px; line-height: 25px; }
  .phone-figure, .phone { width: 320px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .support-card > div { grid-column: 2; grid-row: 1 / 5; }
  .marketing .support-card h3 { margin-top: 18px; }
  .faq-section { gap: 35px !important; }
  .marketing .faq-heading h2 { font-size: 40px; line-height: 43px; }
  .price-stage { grid-template-columns: 1fr; gap: 20px; }
  .price-summary { width: 340px; margin: 0 0 0 auto; padding: 24px; }
  .chart-panel { padding: 25px; margin-right: 0; }
  .chart-heading { display: block; }
  .period-pill { display: inline-block; margin-top: 12px; }
  .bottle-choices { gap: 7px; padding-inline: 12px; }
  .bottle-choice { padding-inline: 5px; }
  .bottle-choice img { height: 100px; }
  .watch-dock { left: 16px; right: 16px; }
  .demo-copy { padding: 26px; }
  .replay-button { right: 20px; top: 21px; }
  .replay-button span { display: none; }
  .demo-copy .overline { font-size: 10px; }
}
@media (max-width: 767px) {
  .marketing .content-width, .marketing .site-footer .wrap { width: calc(100% - 40px); }
  .marketing .section-pad { padding-block: 64px; }
  .marketing h2 { font-size: 34px; line-height: 37px; }
  .marketing h3 { font-size: 24px; line-height: 28px; }
  .marketing .site-header { height: 68px; min-height: 68px; padding-inline: 20px; grid-template-columns: 1fr auto auto; gap: 8px; }
  .marketing .site-header .wordmark { width: 145px; }
  .marketing .landing-nav { display: none; }
  .marketing .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #DDDDD6; border-radius: 50%; background: transparent; }
  .menu-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
  .marketing .menu-open .landing-nav { display: flex; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 20px; gap: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--hairline); }
  .marketing .menu-open .menu-toggle svg { transform: rotate(90deg); }
  .marketing section[id] { scroll-margin-top: 68px; }
  .marketing .market-sticky { padding-block: 72px; gap: 40px; }
  .marketing.motion-ok .market-sticky { top: 68px; height: calc(100vh - 68px); min-height: 480px; padding-block: 28px; }
  .market-copy p { font-size: 16px; line-height: 25px; }
  .tape-item { padding-inline: 18px; gap: 10px; }
  .landing-hero { min-height: calc(100svh - 68px); padding: 112px 20px 120px; }
  .marketing .landing-hero h1 { font-size: 44px; line-height: 46px; }
  .marketing .hero-eyebrow { font-size: 9px; letter-spacing: .09em; margin-bottom: 20px; }
  .hero-lead { font-size: 16px; line-height: 25px; margin-top: 19px; }
  .desktop-break { display: none; }
  .example-explorer { margin-top: 25px; margin-bottom: 22px; }
  .example-search label { font-size: 11px; padding-left: 16px; }
  .search-capsule { height: 66px; grid-template-columns: minmax(0,1fr) 48px; padding: 8px; gap: 6px; }
  .search-capsule button { width: 48px; height: 48px; }
  .search-input-wrap { padding-inline: 12px 4px; gap: 8px; }
  .search-input-wrap input { font-size: 14px; }
  .search-input-wrap svg { width: 17px; }
  .bottle-tile { border-radius: 12px; }
  .bottle-one { left: 8%; top: 12px; width: 70px; height: 82px; --r: -8deg; }
  .bottle-one img { height: 64px; }
  .bottle-two { right: 8%; top: 18px; width: 64px; height: 74px; }
  .bottle-two img { height: 55px; }
  .bottle-three, .bottle-four, .bottle-five { display: none; }
  .bottle-six { right: 9%; bottom: 70px; width: 62px; height: 68px; }
  .bottle-six img { height: 50px; }
  .center-heading > p:last-child { font-size: 16px; line-height: 25px; margin-top: 18px; }
  .center-heading h2 { margin-top: 15px; }
  .phone-stage { margin-top: 36px; padding: 55px 16px 24px; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
  .stage-note, .stage-corner { display: none; }
  .phone-figure, .phone { width: 260px; }
  .phone { border-width: 6px; border-radius: 39px; padding: 9px 10px 7px; }
  .phone-status { font-size: 9px; padding-inline: 8px; height: 25px; }
  .phone-island { width: 70px; height: 20px; }
  .phone-nav { padding-top: 9px; font-size: 10px; }
  .phone-bottle { height: 145px; }
  .phone-bottle img { height: 125px; }
  .phone-copy { padding-top: 12px; }
  .marketing .phone-copy h3 { font-size: 22px; line-height: 25px; }
  .phone-meta { font-size: 9px; }
  .phone-price { margin-top: 12px; }
  .phone-price > strong { font-size: 34px; line-height: 40px; }
  .phone-price .good-price { font-size: 9px; }
  .phone-price .good-price > span { font-size: 8px; }
  .phone-meter { margin-top: 12px; padding: 9px; }
  .phone-store { font-size: 8px; padding: 10px 7px; }
  .verdict-callout { position: relative; inset: auto; transform: none; width: 100%; max-width: 300px; padding: 22px; }
  .verdict-callout .overline { font-size: 8px; max-width: 180px; }
  .marketing .verdict-callout h3 { font-size: 22px; line-height: 25px; }
  .verdict-callout > p:not(.overline) br { display: none; }
  .stage-caption { margin-top: 26px; }
  .stage-caption p { font-size: 14px; line-height: 23px; }
  .marketing .feature-section { padding-top: 64px; }
  .section-intro { margin-bottom: 30px; }
  .feature-grid { grid-template-columns: 1fr; gap: 20px; }
  .demo-stage { height: 300px; }
  .bottle-choices { gap: 8px; padding: 61px 16px 0; }
  .bottle-choice { width: 95px; padding: 10px 5px 8px; }
  .bottle-choice img { height: 91px; }
  .bottle-choice > span:last-child { font-size: 8px; }
  .choice-heart { font-size: 18px; }
  .watch-dock { left: 20px; right: 20px; bottom: 22px; gap: 9px; padding: 10px 12px; }
  .watch-dock p { font-size: 8px; }
  .demo-copy { padding: 24px; }
  .demo-copy > p { margin-top: 16px; }
  .replay-button { top: 20px; right: 20px; }
  .replay-button span { display: none; }
  .demo-copy .overline { font-size: 10px; }
  .alert-phone { top: 43px; }
  .alert-notification { top: 150px; left: 6%; width: 88%; padding: 17px; }
  .split-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .split-heading > p { justify-self: start; max-width: 100%; font-size: 16px; line-height: 25px; }
  .price-stage { padding: 0; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
  .chart-panel { padding: 24px 20px; margin-right: 0; }
  .chart-heading { display: block; }
  .marketing .chart-heading h3 { font-size: 20px; line-height: 25px; }
  .period-pill { display: inline-block; margin-top: 12px; }
  .plot { margin-top: 22px; gap: 10px; }
  .chart-axis { font-size: 8px; padding-block: 5px 8px; }
  .chart-dates { font-size: 8px; padding-left: 28px; }
  .chart-footnote { font-size: 9px; margin-top: 22px; }
  .price-summary { position: static; width: 100%; padding: 24px; margin-top: 0; }
  .support-grid { grid-template-columns: 1fr; gap: 20px; }
  .support-card { padding: 24px; }
  .store-row > span:nth-child(2) { font-size: 11px; }
  .store-row > strong { font-size: 13px; }
  .store-row small { font-size: 9px; }
  .marketing .support-card h3 { font-size: 24px; }
  .marketing .faq-section { padding-top: 0; grid-template-columns: 1fr; gap: 32px; }
  .faq-items summary { font-size: 14px; padding-block: 20px; }
  .closing-icon { width: 64px; height: 64px; }
  .closing-inner > .overline { font-size: 9px; }
  .closing-inner > p:not(.overline) { font-size: 14px; }
  .closing-bottles { gap: 14px; margin-top: 38px; padding-inline: 18px; }
  .closing-bottles img { width: 80px; height: 110px; }
  .closing-bottles img:nth-child(2) { width: 100px; height: 135px; }
  .marketing .site-footer { padding-block: 30px; }
}
@media (max-width: 359px) {
  .marketing .landing-hero h1 { font-size: 38px; line-height: 40px; }
  .marketing .site-header .wordmark { width: 108px; }
  .marketing .hero-eyebrow { font-size: 8px; }
  .hero-lead { font-size: 15px; }
  .landing-hero { padding-top: 108px; padding-bottom: 125px; }
  .search-input-wrap { padding-left: 9px; }
  .search-input-wrap input { font-size: 12px; }
  .search-input-wrap svg { display: none; }
  .example-search label { font-size: 10px; }
  .phone-figure, .phone { width: 240px; }
  .phone-stage { padding-inline: 12px; }
  .bottle-choices { padding-inline: 12px; gap: 6px; }
  .bottle-choice img { height: 80px; }
  .watch-dock { left: 12px; right: 12px; }
  .demo-copy .overline { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing *, .marketing *::before, .marketing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .marketing .app-cta:active, .marketing .bottle-choice:hover { transform: none; }
  .marketing .chart-line { stroke-dasharray: none; }
}