/* The roll-up's pressure illustration, adapted to the homepage. */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
.hero-copy { min-width: 0; }
.hero .eyebrow { font-size: 10px; letter-spacing: .09em; }
.hero h1 { font-size: clamp(48px, 5.3vw, 74px); }
.hero h1 span { color: var(--ink); }
.hero-words { display: grid; text-wrap: nowrap; }
.hero-word { grid-area: 1 / 1; visibility: hidden; }
.hero-word.is-active, .hero-word.is-leaving { visibility: visible; }
.hero-word-line { display: table; background: linear-gradient(transparent 12%, var(--lime) 12%, var(--lime) 92%, transparent 92%); transform-origin: left center; }
.hero-motion { display: flex; align-items: center; gap: 9px; min-height: 28px; margin-top: 12px; padding: 2px 0; border: 0; background: transparent; font-size: 11px; color: var(--muted); }
.hero-motion:hover { color: var(--ink); }
.hero-motion span { width: 12px; text-align: center; }
.hero-motion + .hero-sub { margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
    .hero-word.is-entering .hero-word-line { animation: pressure-in .6s cubic-bezier(.16, 1, .3, 1) .14s both; }
    .hero-word.is-leaving .hero-word-line { animation: pressure-out .28s cubic-bezier(.4, 0, 1, 1) both; }
    .hero-word.is-entering .hero-word-line + .hero-word-line { animation-delay: .21s; }
    .hero-word.is-leaving .hero-word-line + .hero-word-line { animation-delay: .04s; }
    @keyframes pressure-in {
        from { opacity: 0; transform: translate(12px, 24%) skewY(2deg); }
        to { opacity: 1; transform: none; }
    }
    @keyframes pressure-out {
        from { opacity: 1; transform: none; }
        to { opacity: 0; transform: translate(-8px, -18%) skewY(-2deg); }
    }
}
.hero-sub { max-width: 440px; font-size: 21px; line-height: 1.5; color: var(--ink); }
.hero-bridge { max-width: 425px; margin-top: 16px; font-size: 16px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 15px; font-size: 11px; color: var(--muted); }
.pressure-visual { min-width: 0; }
.pressure-art { display: block; width: 100%; height: auto; fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .pressure-breakout, .pressure-above, .pressure-below { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
    .pressure-visual:hover .pressure-breakout { transform: translate(5px, -14px); }
    .pressure-visual:hover .pressure-above { transform: translateY(7px); }
    .pressure-visual:hover .pressure-below { transform: translateY(-7px); }
}
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 20px; }
    .hero-copy { max-width: 620px; }
    .hero h1 { max-width: 610px; font-size: 68px; }
    .pressure-visual { width: min(100%, 550px); justify-self: center; }
}
@media (max-width: 600px) {
    .hero h1 { font-size: clamp(42px, 11.3vw, 65px); }
    .hero-sub { font-size: 19px; }
    .hero-bridge { font-size: 15px; }
    .hero .eyebrow { font-size: 9px; letter-spacing: .045em; }
    .hero .eyebrow::before { flex-shrink: 0; }
    .hero-actions { gap: 9px; margin-top: 24px; }
    .hero-actions .btn { font-size: 13px; padding: 12px 13px; gap: 8px; }
    .hero-note { max-width: 290px; }
    .hero-grid { gap: 14px; }
}

/* Product evidence: one connected story, then four distinct decision examples. */
.story-symbols { position: absolute; pointer-events: none; }
.solution { padding: 78px 0; background: #eef2e7; border-top: 1px solid var(--line); }
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.solution-copy h2 { font-size: clamp(38px, 4.3vw, 60px); margin-top: 22px; letter-spacing: -.055em; }
.solution-copy > p:not(.eyebrow) { max-width: 470px; margin-top: 22px; font-size: 17px; color: var(--muted); }
.solution-copy > p:nth-of-type(2) { color: var(--ink); }
.solution-copy .text-link { margin-top: 25px; }
.product-story { min-width: 0; background: #fafbf7; border: 1px solid #c6d1ba; border-radius: 4px; box-shadow: 9px 9px 0 #dfe7d5; }
.product-story-heading { display: flex; justify-content: space-between; gap: 16px; padding: 16px 25px; border-bottom: 1px solid #d7dfce; font-size: 12px; color: var(--muted); }
.product-story-heading > span:last-child { font-size: 20px; line-height: 1; color: var(--green); }
.product-story-item { display: flex; gap: 28px; align-items: center; padding: 27px 25px; }
.story-object { display: grid; place-items: center; width: 105px; height: 122px; flex-shrink: 0; background: #e2eccf; border-radius: 50% 50% 5px 5px; }
.story-object svg { width: 70px; height: 85px; fill: #f8f9f5; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transform: rotate(-7deg); }
.story-overline { font-size: 12px; color: var(--muted); }
.product-story-item h3 { font-size: 29px; margin-top: 7px; }
.product-story-item p { font-size: 12px; color: var(--muted); margin-top: 9px; }
.product-readings { margin: 0 25px; }
.product-readings > div { display: grid; grid-template-columns: 135px 1fr; gap: 10px 20px; border-top: 1px solid #d7dfce; padding: 15px 0; align-items: baseline; }
.product-readings dt { font-size: 12px; font-weight: 500; }
.product-readings dt span { display: inline-block; margin-right: 13px; color: var(--muted); font-size: 11px; }
.product-readings dd { margin: 0; font-size: 12px; color: var(--muted); }
.product-readings dd strong { display: block; font-size: 23px; line-height: 1.3; font-weight: 500; color: var(--ink); letter-spacing: -.04em; }
.product-reading--stock dd strong { color: #925035; }
.product-readings .product-reading-question { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--ink); }
.product-reading-question > span { color: var(--muted); }
.product-story-decision { display: flex; align-items: center; gap: 16px; padding: 18px 25px; background: var(--lime); }
.product-story-decision > span { font-size: 32px; }
.product-story-decision p { font-size: 12px; }
.product-story-decision strong { display: block; font-weight: 600; }
.product-story figcaption { font-size: 11px; color: var(--muted); padding: 12px 25px; }
.capabilities { padding: 88px 0 0; background: #fff; }
.capability-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.capability-heading h2 { font-size: clamp(38px, 4.3vw, 58px); margin-top: 18px; letter-spacing: -.055em; }
.capability-heading > p { font-size: 16px; max-width: 380px; color: var(--muted); }
.capability-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.capability-nav a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 15px 0; border-block: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.capability-nav a > span:first-child { font-size: 11px; color: var(--muted); }
.capability-nav a > span:last-child { margin-left: auto; color: var(--green); }
.capability-nav a:hover { border-color: var(--green); color: var(--green); }
.capability { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 80px; padding: 78px 0; }
.capability + .capability { border-top: 1px solid var(--line); }
.capability--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.capability--reverse .capability-copy { order: 2; }
.capability-index { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--green); font-weight: 500; }
.capability-index > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #bacbb2; border-radius: 50%; font-size: 12px; }
.capability-copy h3 { font-size: clamp(31px, 3.1vw, 43px); line-height: 1.12; margin-top: 20px; letter-spacing: -.045em; }
.capability-copy > p:not(.capability-index) { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.capability-facts { list-style: none; padding: 0; margin: 22px 0; font-size: 14px; }
.capability-facts li { position: relative; padding-left: 19px; margin-top: 11px; line-height: 1.65; }
.capability-facts li::before { content: ""; position: absolute; width: 5px; height: 5px; top: .64em; left: 1px; background: #65845a; }
.capability-decision { padding-left: 16px; border-left: 2px solid #a8c184; }
.capability-decision > span { color: var(--green); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.capability-decision p { font-size: 14px; margin-top: 5px; }
.capability-copy .text-link { margin-top: 23px; }
.evidence { min-width: 0; background: #f6f7f2; border: 1px solid #d6ded1; border-radius: 10px; overflow: hidden; }
.evidence-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 15px; padding: 18px 24px; border-bottom: 1px solid #d6ded1; font-size: 12px; font-weight: 500; }
.evidence-heading > span:last-child { font-size: 12px; font-weight: 400; color: var(--muted); }
.evidence figcaption { padding: 15px 24px; border-top: 1px solid #d6ded1; color: var(--muted); font-size: 11px; line-height: 1.6; }
/* A return headline opens into the economics beneath it. */
.return-reading { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #203a2e; color: #f5f8ef; padding: 25px 30px; }
.return-reading > p > strong { display: block; font-size: 70px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.return-reading strong > span { font-size: 39px; margin-left: 5px; color: var(--lime); }
.return-reading > p > span { display: block; margin-top: 9px; font-size: 12px; color: #c6d8bf; }
.return-reading > div { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.margin-reading { padding: 26px 30px; background: #fffdf8; }
.margin-reading-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.margin-reading-heading > span { font-size: 15px; max-width: 145px; }
.margin-reading-heading > strong { color: #99482e; font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.evidence--margin[data-positive="true"] .margin-reading-heading > strong { color: var(--green); }
.money-row + .money-row { margin-top: 16px; }
.money-row > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 7px; }
.money-row strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.money-track { height: 13px; background: #ebece4; }
.money-fill { display: block; width: 100%; height: 100%; transform: scaleX(var(--fill)); transform-origin: left; }
.money-fill--margin { background: #66845a; }
.money-fill--ads { background: repeating-linear-gradient(120deg, #a95c3e, #a95c3e 4px, #c48363 4px, #c48363 6px); }
.margin-input { margin-top: 27px; padding-top: 20px; border-top: 1px dashed #cccfc0; }
.margin-input label { display: flex; justify-content: space-between; gap: 15px; font-size: 12px; }
.margin-input output { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.margin-input input { display: block; width: 100%; height: 28px; margin: 8px 0 2px; accent-color: var(--green); cursor: pointer; }
.margin-input p { font-size: 12px; color: var(--muted); }
.margin-verdict { font-size: 12px; margin-top: 20px; min-height: 2em; }
/* Availability through day seven, followed by an estimated stockout without replenishment. */
.evidence--stock { background: #f8f8f2; }
.stock-feature { margin: 24px; padding: 23px; background: #edf2e4; border: 1px solid #ccd8bc; border-radius: 6px; }
.stock-feature-heading { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px; }
.stock-object { width: 38px; height: 49px; fill: #dce6cc; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stock-feature-heading p { font-size: 13px; margin-top: 5px; }
.stock-feature-heading p strong { font-weight: 500; }
.stock-cover { text-align: center; }
.stock-cover > strong { display: block; font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.stock-cover > span { font-size: 12px; }
.stock-timeline-label { margin-top: 24px; font-size: 12px; color: var(--muted); }
.stock-days { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.stock-days > span { display: grid; padding-top: 10px; border-top: 1px solid #adc09a; }
.stock-days i { display: grid; place-items: center; height: 28px; background: #d6e5c8; border: 1px solid #8eaa7c; border-radius: 2px; color: #365723; font-size: 14px; font-style: normal; }
.stock-days .stock-day--empty { border-top-color: #c78f7e; }
.stock-day--empty i { background: #f7e1db; border-color: #b85540; color: #963e2e; }
.stock-timeline-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 12px; font-size: 12px; color: #365723; }
.stock-timeline-key strong { color: #963e2e; font-weight: 500; }
.stock-next { font-size: 12px; margin-top: 20px; }
.stock-next > span { margin-right: 8px; color: var(--green); font-size: 19px; }
.stock-contrast { padding: 0 24px 12px; }
.stock-contrast > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 15px; align-items: center; padding: 17px 0; border-top: 1px solid var(--line); }
.stock-contrast .stock-object { width: 29px; height: 35px; fill: #e9e5d6; }
.stock-contrast p strong { display: block; font-size: 12px; font-weight: 500; }
.stock-contrast p span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.stock-contrast p:last-child { text-align: right; }
/* A seasonal curve connects the buying window, peak sales and remaining stock. */
.evidence--demand { background: #f6f7f0; }
.season-chart { padding: 24px 26px 19px; background: #203a2e; color: #f5f8ef; }
.season-chart-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.season-chart-heading p { font-size: 27px; line-height: 1.15; letter-spacing: -.035em; }
.season-chart-heading strong { font-weight: 500; color: var(--lime); }
.season-product { width: 49px; height: 61px; margin-right: 5px; fill: #3e5740; stroke: #d8ef91; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transform: rotate(8deg); }
.season-chart-key { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-top: 25px; font-size: 11px; color: #c6d8bf; }
.season-chart-key i { display: inline-block; width: 13px; margin: 0 5px 3px 0; border-top: 2px solid var(--lime); }
.season-plot { position: relative; margin-top: 23px; }
.season-peak { position: absolute; top: -11px; left: 54%; font-size: 11px; color: var(--lime); white-space: nowrap; }
.season-curve { display: block; width: 100%; overflow: visible; }
.season-grid { stroke: #6b836d; stroke-opacity: .3; stroke-dasharray: 3 5; }
.season-window { fill: #d8ef91; opacity: 0; }
.season-line { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; }
.season-markers circle { fill: #203a2e; stroke: var(--lime); stroke-width: 2.5; }
[data-season="prepare"] .season-window--prepare, [data-season="peak"] .season-window--peak, [data-season="clear"] .season-window--clear { opacity: .1; }
[data-season="prepare"] .season-marker--prepare, [data-season="peak"] .season-marker--peak, [data-season="clear"] .season-marker--clear { fill: var(--lime); stroke-width: 5; }
.season-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); text-align: center; font-size: 11px; color: #c6d8bf; }
.season-windows { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 11px; font-size: 10px; text-align: center; line-height: 1.4; }
.season-windows span { padding-top: 5px; border-top: 2px solid #8ba482; color: #c6d8bf; }
.season-windows span:nth-child(1) { grid-column: 3 / 6; }
.season-windows span:nth-child(2) { grid-column: 6 / 9; border-color: var(--lime); color: var(--lime); }
.season-windows span:nth-child(3) { grid-column: 9 / 11; border-color: #e9b597; color: #e9b597; }
.season-controls { padding: 17px 24px 0; }
.season-controls > p { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 11px; color: var(--muted); }
.season-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.season-choices button { position: relative; text-align: left; padding: 11px 10px; border: 1px solid #c9d4bf; border-radius: 4px; background: transparent; line-height: 1.5; }
.season-choices button > span:first-child { display: block; font-size: 11px; color: var(--muted); }
.season-choices strong { display: block; font-size: 12px; font-weight: 600; }
.season-choices button > span:last-child { position: absolute; right: 9px; top: 8px; color: var(--green); font-size: 15px; }
.season-choices button:hover { background: #e8eddf; border-color: #789565; }
.season-choices button[aria-pressed="true"] { background: #e1ebcc; border-color: #64804e; box-shadow: inset 0 -2px #64804e; }
.season-choices button:focus-visible { outline-offset: 2px; }
.season-details { padding: 23px 24px; }
.season-detail { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 12px; }
.season-detail + .season-detail { margin-top: 24px; }
.season-controls:not([hidden]) + .season-details .season-detail { margin-top: 0; }
.season-step { font-size: 12px; color: var(--green); border-top: 2px solid #89a36d; padding-top: 6px; }
.season-detail-period { font-size: 11px; color: var(--muted); }
.season-detail h4 { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; margin: 7px 0 10px; }
.season-detail h4 + p { font-size: 12px; line-height: 1.75; color: var(--muted); }
.season-question { margin-top: 13px; padding-top: 11px; border-top: 1px solid #d6ded1; font-size: 12px; font-weight: 500; }
/* A pairing with an explicit denominator, followed by the observed basket values. */
.evidence--basket { background: #f8f5ed; }
.pairing-feature { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 12px; padding: 32px 28px 22px; }
.pairing-product { text-align: center; }
.pairing-product svg { display: block; width: 85px; height: 98px; margin: 0 auto 14px; fill: #e1e8cb; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pairing-product:last-child svg { fill: #eee0b8; }
.pairing-product > span { font-size: 12px; }
.pairing-link { text-align: center; padding-bottom: 25px; }
.pairing-link > strong { font-size: 38px; font-weight: 500; letter-spacing: -.05em; }
.pairing-link > span { display: block; font-size: 12px; color: var(--muted); }
.pairing-link i { position: relative; display: block; border-top: 1px solid #ad9c73; margin-top: 13px; }
.pairing-link i::before, .pairing-link i::after { content: ""; position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #ad9c73; }
.pairing-link i::before { left: 0; }
.pairing-link i::after { right: 0; }
.pairing-orders { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 28px; padding: 13px 10px; background: #ece6d1; font-size: 12px; }
.pairing-orders strong { font-weight: 600; }
.pairing-other { padding: 8px 28px 20px; }
.pairing-other > div { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #dfddcf; font-size: 12px; }
.pairing-other strong { font-weight: 500; }
.pairing-other strong > span { color: var(--muted); }
.basket-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; padding: 18px 28px 26px; }
.basket-values > span { font-size: 29px; color: #807047; }
.basket-values p:last-child { text-align: right; }
.basket-values p > span { display: block; font-size: 12px; color: var(--muted); }
.basket-values strong { display: block; font-size: 41px; font-weight: 500; letter-spacing: -.05em; line-height: 1.4; }
.capability-footer { display: flex; justify-content: space-between; align-items: center; gap: 50px; border-top: 1px solid var(--line); padding: 27px 0 45px; }
.capability-footer > p { max-width: 690px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.capability-footer p a { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .season-window { transition: opacity .25s ease; }
    .evidence.is-revealed .season-line { animation: season-draw 1.2s cubic-bezier(.2,.7,.3,1) both; }
    @keyframes season-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
    .money-fill { transition: transform .35s ease; }
    .product-story.is-revealed .story-object svg { animation: story-lift .7s cubic-bezier(.2,.7,.3,1) both; }
    .evidence.is-revealed .stock-days > span { animation: evidence-arrive .5s ease-out calc(var(--day) * .07s) both; }
    .evidence.is-revealed .pairing-link i { animation: pairing-connect .7s ease-out both; }
    @keyframes story-lift { from { transform: rotate(-12deg) translateY(8px); } to { transform: rotate(-7deg); } }
    @keyframes evidence-arrive { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    @keyframes pairing-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (max-width: 1100px) {
    .solution-grid, .capability { gap: 42px; }
    .capability-nav { gap: 17px; }
    .capability-nav a { font-size: 12px; gap: 8px; }
    .product-readings > div { grid-template-columns: 110px 1fr; column-gap: 12px; }
    .stock-feature { padding: 17px; margin: 20px; }
    .stock-feature-heading { gap: 9px; grid-template-columns: 34px minmax(0, 1fr) auto; }
    .stock-contrast > div { gap: 10px; }
}
@media (max-width: 800px) {
    .solution { padding: 56px 0; }
    .solution-grid { grid-template-columns: 1fr; gap: 35px; }
    .solution-copy { max-width: 580px; }
    .solution-copy > p:not(.eyebrow) { max-width: 570px; }
    .product-story { width: 100%; max-width: 600px; justify-self: center; }
    .capabilities { padding-top: 56px; }
    .capability-heading { display: block; }
    .capability-heading > p { max-width: 500px; margin-top: 23px; }
    .capability-nav { grid-template-columns: 1fr 1fr; gap: 0 25px; margin-top: 30px; }
    .capability-nav a:nth-child(n+3) { border-top: 0; }
    .capability { grid-template-columns: 1fr; gap: 32px; padding: 55px 0; }
    .capability--reverse .capability-copy { order: 0; }
    .capability-copy { max-width: 600px; }
    .capability-copy h3 { font-size: 38px; }
    .evidence { width: 100%; max-width: 600px; justify-self: center; }
    .stock-feature { padding: 23px; margin: 24px; }
    .capability-footer { display: block; padding-bottom: 32px; }
    .capability-footer > .text-link { margin-top: 16px; }
}
@media (max-width: 480px) {
    .solution { padding-block: 44px; }
    .solution-copy .eyebrow { font-size: 12px; letter-spacing: .055em; }
    .solution-copy h2 { font-size: 39px; }
    .solution-copy > p:not(.eyebrow) { font-size: 15px; margin-top: 19px; }
    .product-story { box-shadow: 5px 5px 0 #dfe7d5; }
    .product-story-heading { padding: 14px 18px; font-size: 12px; }
    .product-story-item { padding: 22px 18px; gap: 19px; }
    .story-object { width: 75px; height: 101px; }
    .story-object svg { width: 58px; height: 75px; }
    .product-story-item h3 { font-size: 25px; }
    .product-readings { margin-inline: 18px; }
    .product-readings > div { grid-template-columns: 105px 1fr; }
    .product-readings dt span { margin-right: 8px; }
    .product-readings dd strong { font-size: 22px; }
    .product-story-decision { padding: 15px 18px; gap: 10px; }
    .product-story figcaption { padding: 12px 18px; }
    .capability-heading h2 { font-size: 40px; }
    .capability-heading > p { font-size: 15px; }
    .capability-nav { gap: 0 17px; }
    .capability-nav a { gap: 7px; min-height: 62px; line-height: 1.5; }
    .capability-nav a > span:last-child { display: none; }
    .capability { padding-block: 44px; }
    .capability-copy h3 { font-size: 33px; }
    .capability-copy > p:not(.capability-index) { font-size: 15px; }
    .capability-facts { font-size: 13px; }
    .capability-decision p { font-size: 13px; }
    .evidence-heading { padding: 15px 18px; }
    .evidence figcaption { padding: 14px 18px; }
    .return-reading { padding: 23px 20px; gap: 15px; }
    .return-reading > div { font-size: 12px; }
    .return-reading > p > strong { font-size: 58px; }
    .margin-reading { padding: 23px 20px; }
    .margin-reading-heading > strong { font-size: 41px; }
    .margin-reading-heading > span { font-size: 13px; }
    .stock-feature { margin: 18px 14px; padding: 16px 12px; }
    .stock-feature-heading { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; }
    .stock-feature-heading .stock-object { width: 27px; height: 41px; }
    .stock-feature-heading p { font-size: 12px; }
    .stock-cover > strong { font-size: 46px; }
    .stock-timeline-label { margin-top: 20px; }
    .stock-days { gap: 6px; }
    .stock-days i { height: 24px; }
    .stock-contrast { padding: 0 18px 10px; }
    .stock-contrast > div { grid-template-columns: 30px 1fr; gap: 7px 14px; }
    .stock-contrast p:last-child { grid-column: 2; text-align: left; }
    .season-chart { padding: 22px 16px 18px; }
    .season-chart-heading p { font-size: 25px; }
    .season-chart-key { margin-top: 21px; }
    .season-controls { padding: 16px 14px 0; }
    .season-choices { gap: 5px; }
    .season-choices button { padding: 10px 7px; }
    .season-choices button > span:last-child { display: none; }
    .season-details { padding: 22px 16px; }
    .season-detail { grid-template-columns: 23px minmax(0, 1fr); gap: 9px; }
    .season-detail h4 { font-size: 18px; }
    .pairing-feature { padding: 24px 16px 18px; gap: 8px; }
    .pairing-product svg { width: 62px; height: 78px; }
    .pairing-link > strong { font-size: 31px; }
    .pairing-orders { margin-inline: 18px; }
    .pairing-other { padding-inline: 18px; }
    .basket-values { padding: 10px 18px 22px; gap: 10px; }
    .basket-values strong { font-size: 36px; }
}

/* Shopping follows the product walkthrough: one catalog, three decisions. */
.shopping { background: var(--ink); color: var(--paper); }
.shopping .eyebrow { color: var(--lime); }
.shopping .shopping-heading { gap: 36px; }
.shopping .shopping-heading h2 { max-width: 710px; font-size: clamp(34px, 3.6vw, 48px); }
.shopping .shopping-heading > p { max-width: 315px; color: #bfd0c2; font-size: 14px; }
.shopping-playbook { border: 1px solid #496052; border-radius: 12px; background: #20382e; overflow: hidden; }
.playbook-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 26px; border-bottom: 1px solid #496052; }
.playbook-heading strong { font-size: 13px; font-weight: 500; }
.playbook-heading > span { color: #bfd0c2; font-size: 11px; }
.shopping-move { --move-color: #d8ef91; display: grid; grid-template-columns: 1fr 1.35fr .7fr; gap: 30px; align-items: center; padding: 27px 26px; }
.shopping-move + .shopping-move { border-top: 1px solid #40574a; }
.shopping-move--protect { --move-color: #edb89e; }
.shopping-move--test { --move-color: #b7c9ed; }
.shopping-direction { display: flex; align-items: center; gap: 15px; }
.shopping-symbol { display: grid; place-items: center; width: 37px; height: 37px; flex-shrink: 0; border: 1px solid #65796a; border-radius: 50%; font-size: 24px; font-weight: 400; color: var(--move-color); }
.shopping-direction h3 { font-size: 29px; color: var(--move-color); letter-spacing: -.03em; }
.shopping-direction h3 > span { display: block; margin-top: 7px; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #d1ddcf; }
.shopping-move > p { max-width: 400px; color: #d1ddcf; font-size: 13px; line-height: 1.7; }
.shopping-label { justify-self: end; }
.shopping-label > span { display: block; margin-bottom: 7px; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; color: #bfd0c2; }
.shopping-label > strong { display: inline-block; padding: 7px 11px; border: 1px solid #65796a; border-radius: 5px; color: var(--move-color); font-size: 12px; font-weight: 500; }
.playbook-output { padding: 19px 26px; border-top: 1px solid #496052; background: #1b3027; }
.output-path { display: flex; flex-wrap: wrap; gap: 8px 13px; align-items: center; font-size: 12px; font-weight: 500; }
.output-path > span { color: #b6caac; }
.playbook-output > p { margin-top: 5px; font-size: 11px; color: #bfd0c2; }
.shopping-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; margin-top: 35px; }
.shopping-controls h3 { font-size: 16px; line-height: 1.35; letter-spacing: -.015em; }
.shopping-controls p { margin-top: 10px; font-size: 12px; line-height: 1.75; color: #bfd0c2; }
.shopping-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; border-top: 1px solid #496052; margin-top: 30px; padding-top: 26px; }
.shopping-footer > p { font-size: 12px; color: #bfd0c2; }
.shopping-footer > p a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
#how-it-works .feed-callout { border-top: 1px solid var(--line); margin-top: 44px; }

@media (max-width: 1100px) {
    .shopping-move { grid-template-columns: 1fr 1.1fr .75fr; gap: 22px; }
    .shopping-direction { gap: 10px; }
    .shopping-controls { gap: 25px; }
}
@media (max-width: 800px) {
    .shopping .shopping-heading { display: block; }
    .shopping .shopping-heading > p { max-width: 530px; margin-top: 20px; }
    .shopping-move { grid-template-columns: 1fr auto; gap: 14px 26px; }
    .shopping-direction { grid-column: 1; grid-row: 1; }
    .shopping-label { grid-column: 2; grid-row: 1; }
    .shopping-move > p { grid-column: 1 / -1; max-width: none; }
    .shopping-controls { gap: 22px; }
}
@media (max-width: 600px) {
    .shopping .shopping-heading h2 { font-size: 34px; }
    .shopping .shopping-heading h2 br { display: none; }
    .playbook-heading { flex-wrap: wrap; gap: 4px 12px; padding: 16px; }
    .playbook-heading strong { font-size: 12px; }
    .playbook-heading > span { font-size: 10px; }
    .shopping-move { padding: 22px 16px; gap: 15px 12px; }
    .shopping-symbol { width: 27px; height: 27px; font-size: 18px; }
    .shopping-direction { gap: 9px; }
    .shopping-direction h3 { font-size: 25px; }
    .shopping-direction h3 > span { font-size: 10px; }
    .shopping-move > p { font-size: 13px; }
    .shopping-label > strong { padding: 6px 8px; font-size: 10px; }
    .shopping-label > span { font-size: 8px; }
    .playbook-output { padding: 18px 16px; }
    .output-path { display: block; font-size: 11px; line-height: 2; }
    .output-path > span { margin-inline: 4px; }
    .playbook-output > p { margin-top: 9px; font-size: 10px; }
    .shopping-controls { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
    .shopping-controls p { margin-top: 6px; font-size: 13px; }
    .shopping-footer { display: block; margin-top: 25px; padding-top: 22px; }
    .shopping-footer .btn { margin-top: 19px; width: 100%; font-size: 14px; }
    #how-it-works .feed-callout { margin-top: 32px; }
}