:root {
    --paper: #f8f4ec;
    --ink: #242424;
    --orange: #fc651b;
    --line: #ded8cd;
    --muted: #625d55;
    font-family: Arial,Helvetica,sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none
}

/* One type scale for every page on a phone. Page titles were running 54 / 50 / 46 / 45 / 37
   across home, cart, checkout, info and product, and section headings 38 / 40 / 42 / 43,
   so the same kind of heading changed size depending on which page you were on.
   Everything below points at these three, and nothing on mobile sets a heading size
   independently. Desktop keeps its own larger, fluid sizes untouched. */
@media (max-width: 760px) {
    :root {
        --title: 40px;
        --heading: 30px;
        --subheading: 20px
    }
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    cursor: pointer
}

header {
    height: 88px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    position: relative;
    z-index: 10
}

.brand img {
    width: 123px;
    display: block;
    mix-blend-mode: multiply
}

nav {
    display: flex;
    gap: 40px;
    font-size: 14px
}

.intro {
    min-height: calc(100svh - 88px);
    max-height: 1100px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 65px 5% 80px;
    overflow: hidden
}

.intro-copy {
    z-index: 2;
    align-self: center
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 700;
    margin: 0 0 30px
}

h1 {
    font-size: clamp(72px,7.7vw,126px);
    line-height: .95;
    letter-spacing: -.075em;
    margin: 0 0 30px;
    font-weight: 700
}

em {
    font-style: normal;
    color: var(--orange)
}

.lead {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 33px
}

.primary {
    display: inline-flex;
    align-items: center;
    gap: 34px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 40px;
    padding: 20px 26px;
    font-size: 14px;
    transition: transform .2s
}

.primary:hover,.buy:hover {
    transform: translateY(-3px)
}

.hero-art {
    position: relative;
    min-height: 530px;
    align-self: center;
    display: grid;
    place-items: center
}

.hero-word {
    position: absolute;
    font-size: 15vw;
    letter-spacing: -.1em;
    color: #e9e2d6;
    transform: rotate(-90deg);
    right: -110px;
    font-weight: 700;
    z-index: 0
}

.pack-window {
    position: relative;
    width: 345px;
    height: 510px;
    overflow: hidden;
    z-index: 1
}

.pack-window img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain
}

.hero-art>.pack-window {
    transform: rotate(-9deg);
    filter: drop-shadow(15px 23px 18px #68513124)
}

.orbit {
    position: absolute;
    border: 1px solid #d9cbb8;
    border-radius: 50%;
    width: 540px;
    height: 380px;
    transform: rotate(-35deg)
}

.orbit-two {
    transform: rotate(35deg);
    height: 460px;
    width: 430px
}

/* An outlined token rather than a solid sticker, to sit with the page's thin rings. */
.hero-sticker {
    position: absolute;
    z-index: 3;
    right: 6%;
    top: 8%;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px #6851311a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: rotate(12deg)
}

.hero-sticker strong {
    display: flex;
    align-items: baseline;
    font-size: 40px;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--orange)
}

.hero-sticker strong i {
    font-size: .5em;
    font-style: normal;
    letter-spacing: 0
}

.hero-sticker span {
    font: 9px/1.45 monospace;
    letter-spacing: .14em;
    text-align: center;
    color: var(--muted)
}

.pack-caption {
    position: absolute;
    bottom: -34px;
    font: 12px monospace;
    letter-spacing: .08em
}

.intro-bottom {
    position: absolute;
    bottom: 25px;
    left: 5%;
    right: 5%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted)
}

.gummy {
    background: radial-gradient(ellipse at 35% 25%,#ffca67 0,transparent 35%),linear-gradient(145deg,#ffab22,#fa6d0d 65%,#d74408);
    border-radius: 30%;
    box-shadow: inset 0 0 0 7px #ffc36866,inset -15px -18px 24px #bd380b33,0 22px 24px #9c480c25;
    position: absolute
}

.mini-gummy {
    width: 88px;
    height: 88px;
    bottom: 55px;
    left: 25px;
    transform: rotate(28deg);
    z-index: 3
}

.story {
    position: relative;
    border-top: 1px solid var(--line)
}

.stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    pointer-events: none;
    background: var(--paper);
    margin-bottom: -100svh;
    /* Own layer, so the visuals inside can never paint over the chapter copy. */
    z-index: 1
}

.stage-grid {
    position: absolute;
    left: 57%;
    top: 17%;
    width: 44vw;
    height: 44vw;
    border: 1px solid var(--line);
    border-radius: 50%
}

.stage-grid:after {
    content: '';
    position: absolute;
    inset: 12%;
    border: 1px solid var(--line);
    border-radius: 50%
}

.stage-number {
    position: absolute;
    right: 5%;
    top: 5%;
    font-size: 14px;
    font-family: monospace;
    color: var(--muted)
}

.chapters {
    position: relative;
    z-index: 2
}

.chapter {
    min-height: 145svh;
    display: flex;
    align-items: center;
    padding: 0 6%;
    pointer-events: none
}

/* Kept under 41% so the copy column always clears .moments, which starts at 47%.
   At 45% it ran under the visuals on any window the max-width cap didn't reach. */
.chapter>div {
    width: 40%;
    max-width: 580px;
    pointer-events: auto
}

.chapter-label {
    font: 12px monospace;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 0 0 30px
}

h2 {
    font-size: clamp(43px,4.8vw,76px);
    line-height: 1.02;
    letter-spacing: -.065em;
    margin: 0 0 28px
}

.chapter p:not(.chapter-label) {
    font-size: 18px;
    line-height: 1.65;
    max-width: 405px
}

.benefits {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px
}

.benefits span {
    border: 1px solid #b8afa0;
    border-radius: 30px;
    padding: 10px 17px;
    font-size: 13px
}

/* Sits to the lower left of the ring so it never lands on top of the powder or the bowl. */
.traveller {
    width: 132px;
    height: 132px;
    left: 52%;
    top: 58%;
    transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 6
}

/* Transparent cutouts: shown standalone like the hero pack, not framed in a card. */
.clutter,.format-shot {
    position: absolute;
    margin: 0;
    opacity: 0;
    z-index: 4;
    filter: drop-shadow(15px 23px 18px #68513124)
}

.clutter img,.format-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

/* Centred on .stage-grid, whose centre is (57% + 22vw, 17% + 22vw).
   Each is offset back by half its own size; heights follow the images' own ratios. */
.clutter {
    width: 42vw;
    height: 27.3vw;
    left: calc(57% + 1vw);
    top: calc(17% + 8.35vw)
}

.format-shot {
    width: 32vw;
    height: 32vw;
    left: calc(57% + 6vw);
    top: calc(17% + 6vw)
}

/* Carries the hero's gummy across into the story. Both .intro and .stage clip their
   overflow, so this sits outside them and is placed in viewport coordinates. */
.flying-gummy {
    position: fixed;
    left: 0;
    top: 0;
    width: 88px;
    height: 88px;
    opacity: 0;
    pointer-events: none;
    z-index: 5
}

.moments {
    position: absolute;
    left: 47%;
    top: 6%;
    width: 51%;
    height: 88%
}

.moment {
    position: absolute;
    z-index: 4;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--line);
    box-shadow: 12px 20px 26px #473b3129;
    opacity: 0
}

.moment img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Scattered so the four never overlap; --rot is read back by the scroll script. */
/* Sized in vw, not pixels: two columns must always fit inside .moments (52vw), so fixed
   widths collide as soon as the window narrows. Heights hold the images' 3:2 ratio. */
.moment-one {
    left: 0;
    top: 0;
    width: 23vw;
    height: 15.3vw;
    --rot: -4deg
}

.moment-two {
    right: 1.5vw;
    bottom: 0;
    width: 22vw;
    height: 14.7vw;
    --rot: 3deg
}

.moment-three {
    left: 1vw;
    bottom: 7%;
    width: 21.5vw;
    height: 14.3vw;
    --rot: 2.5deg
}

.moment-four {
    right: 0;
    top: 5%;
    width: 20.5vw;
    height: 13.7vw;
    --rot: -3deg
}

.moment figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px 18px;
    background: linear-gradient(180deg,transparent,#1c140c80 75%);
    color: #f8f4ec;
    font: 14px/1.4 -apple-system,sans-serif
}

.moment figcaption span {
    display: block;
    font: 11px monospace;
    letter-spacing: .12em;
    opacity: .8;
    margin-bottom: 3px
}

.transition {
    height: 80svh
}

.story-pack {
    position: absolute;
    left: 63%;
    top: 20%;
    opacity: 0;
    transform: translateY(150px)
}

.skip {
    position: absolute;
    bottom: 20px;
    right: 5%;
    font-size: 13px;
    z-index: 3;
    text-decoration: underline;
    text-underline-offset: 5px
}

.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 100px 6%;
    gap: 7%;
    background: #eee7db;
    border-top: 1px solid #d7cec0;
    align-items: center
}

.product-visual {
    display: grid;
    place-items: center;
    position: relative;
    min-height: 550px
}

.product-ring {
    position: absolute;
    width: 460px;
    height: 460px;
    border: 1px solid #caba9f;
    border-radius: 50%
}

.product-copy h2 {
    font-size: clamp(44px,4.3vw,68px)
}

.product-description {
    font-size: 18px;
    line-height: 1.6
}

.buy {
    display: flex;
    justify-content: space-between;
    background: var(--orange);
    border: none;
    width: 100%;
    padding: 22px 25px;
    border-radius: 40px;
    transition: transform .2s;
    color: var(--ink);
    font-weight: 700
}

.product details {
    margin-top: 28px;
    font-size: 14px;
    border-bottom: 1px solid #cfc3b1;
    padding: 10px 0 20px
}

.product summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between
}

.product details p {
    line-height: 1.6;
    color: var(--muted)
}

footer {
    padding: 50px 6%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

footer img {
    width: 130px;
    mix-blend-mode: multiply
}

footer p {
    font-size: 17px
}

footer a {
    font-size: 13px
}

dialog {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    padding: 55px;
    max-width: 530px;
    width: 90%;
    border-radius: 8px
}

dialog::backdrop {
    background: #24242477;
    backdrop-filter: blur(5px)
}

dialog h2 {
    font-size: 58px
}

dialog p {
    line-height: 1.6
}

.close {
    position: absolute;
    right: 20px;
    top: 15px;
    border: 0;
    background: transparent;
    font-size: 30px
}

:focus-visible {
    outline: 3px solid #9b3808;
    outline-offset: 6px
}

@media(max-width: 760px) {
    header {
        height:74px;
        padding: 0 6%
    }

    .brand img {
        width: 100px
    }

    nav {
        display: none
    }

    .intro {
        /* minmax(0,…) not 1fr: the hero art's min-content is wider than the phone's
           padding box, and a bare 1fr would let it push the column past the screen. */
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 6% 65px;
        max-height: none
    }

    .intro-copy {
        align-self: start
    }

    .eyebrow {
        font-size: 11px;
        margin-bottom: 22px
    }

    h1 {
        font-size: 76px
    }

    .lead {
        font-size: 17px;
        margin: 20px 0
    }

    .hero-art {
        min-height: 420px;
        margin-top: 25px
    }

    .hero-art>.pack-window {
        transform: scale(.75) rotate(-8deg);
        transform-origin: center
    }

    .pack-window {
        flex-shrink: 0
    }

    .hero-art .pack-window {
        margin: -45px 0
    }

    .orbit {
        width: 320px;
        height: 280px
    }

    .orbit-two {
        width: 280px;
        height: 350px
    }

    .hero-word {
        font-size: 160px;
        right: -70px
    }

    .hero-sticker {
        width: 104px;
        height: 104px;
        right: 0;
        top: 10%;
        gap: 5px
    }

    .hero-sticker strong {
        font-size: 32px
    }

    .hero-sticker span {
        font-size: 8px
    }

    .mini-gummy {
        width: 66px;
        height: 66px;
        left: 0;
        bottom: 40px
    }

    .pack-caption {
        bottom: -2px;
        font-size: 10px
    }

    .intro-bottom {
        font-size: 10px
    }

    .stage-grid {
        width: 90vw;
        height: 90vw;
        left: 17%;
        top: 49%
    }

    .chapter {
        min-height: 135svh;
        align-items: flex-start;
        padding: 100px 7% 0
    }

    .chapter>div {
        width: 100%;
        max-width: 100%
    }

    .chapter h2 {
        font-size: 45px;
        max-width: 400px
    }

    .chapter p:not(.chapter-label) {
        font-size: 16px;
        line-height: 1.5;
        max-width: 340px
    }

    .chapter-label {
        font-size: 10px;
        margin-bottom: 20px
    }

    .benefits {
        margin-top: 18px
    }

    .benefits span {
        padding: 8px 13px;
        font-size: 12px
    }

    /* Narrow screens stack copy over the stage, so the gummy sits below the imagery
       rather than in the text block. That leaves it a ~122px band between the bottom of
       the powder and the bottom of the stage, and it spins, so a square of this side
       sweeps a circle 1.4x as wide. 54px keeps the whole sweep inside the band; the
       script also damps its bob on mobile for the same reason. */
    /* Sized against the stage height, not a fixed px: the gummy has to fit the band between
       the bottom of the powder and the bottom of the stage, and that band shrinks with the
       screen. It also spins, so a square of this side sweeps a circle 1.4x as wide -- that
       sweep, not the side, is what has to fit. The script damps its bob on mobile too. */
    .traveller {
        left: 50%;
        top: 93%;
        width: min(54px, 6.6svh);
        height: min(54px, 6.6svh)
    }

    /* Capped against the stage height as well as its width. Phones vary far more in height
       than in width, and sized in vw alone the bowl ran past the bottom of the stage on a
       667px-tall phone. Each cap keeps the image's aspect ratio (58:58, 72:46.9), and the
       img inside is object-fit: contain, so a capped box just shows a smaller picture. */
    .format-shot {
        width: min(58vw, 30svh);
        height: min(58vw, 30svh);
        left: calc(17% + 16vw);
        top: calc(49% + 16vw)
    }

    .clutter {
        width: min(72vw, 34svh);
        height: min(46.9vw, 22.1svh);
        left: calc(17% + 9vw);
        top: calc(49% + 21.55vw)
    }

    .moments {
        left: 4%;
        top: 41%;
        height: 56%;
        width: 92%
    }

    .moment-one {
        left: 0;
        top: 0;
        width: 160px;
        height: 107px
    }

    .moment-two {
        right: 0;
        bottom: 0;
        width: 160px;
        height: 107px
    }

    .moment-three {
        left: 0;
        bottom: 28px;
        width: 160px;
        height: 107px
    }

    .moment-four {
        right: 0;
        top: 28px;
        width: 160px;
        height: 107px
    }

    .moment figcaption {
        font-size: 12px;
        padding: 12px 14px 14px
    }

    .moment figcaption span {
        font-size: 10px
    }

    .story-pack {
        left: 28%;
        top: 49%;
        transform-origin: top left
    }

    .transition {
        height: 46svh
    }

    .product {
        grid-template-columns: 1fr;
        padding: 40px 7% 60px;
        gap: 25px
    }

    .product-visual {
        min-height: 420px
    }

    .product-visual .pack-window {
        transform: scale(.78);
        margin: -55px 0
    }

    .product-ring {
        width: 320px;
        height: 320px
    }

    .product h2 {
        font-size: var(--heading)
    }

    footer {
        flex-wrap: wrap;
        gap: 25px;
        padding: 35px 7%
    }

    footer img {
        width: 100px
    }

    footer p {
        font-size: 14px
    }

    dialog {
        padding: 35px 25px
    }

    dialog h2 {
        font-size: var(--title)
    }

    .skip {
        font-size: 12px
    }
}

/* Landscape phones get the same treatment as reduced motion: the stage is sized in vw,
   so a wide-but-short viewport blows the scene out of its own 290px-tall box. Below this
   height it stops being sticky and lays the pieces out as a plain stacked flow instead. */
@media (prefers-reduced-motion: reduce), (max-height: 520px) {
    /* Beats the unscoped `.stage` height rule further down the file. */
    .story .stage {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 18px;
        height: auto;
        margin-bottom: 0;
        padding: 0 6% 50px;
        overflow: visible;
        pointer-events: auto
    }

    .stage-grid,.stage-number,.traveller {
        display: none
    }

    .moments {
        display: contents
    }

    .clutter,.format-shot,.moment,.story-pack {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        opacity: 1;
        transform: none;
        flex: 0 0 auto;
        width: 230px;
        height: 250px
    }

    .chapter {
        min-height: 70svh;
        padding-top: 60px;
        padding-bottom: 60px;
        align-items: center
    }

    .chapter>div {
        width: 100%;
        max-width: 650px
    }

    .transition {
        display: none
    }

    .chapter:nth-child(even) {
        background: #efe8dc
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none!important
    }
}

/* Commerce layer: extends the original JCKD visual system. */
[hidden] {
    display: none!important
}

.site-nav {
    position: sticky;
    top: 0;
    height: 80px;
    background: #f8f4ecf5;
    backdrop-filter: blur(12px)
}

.nav-actions {
    display: flex;
    gap: 25px;
    align-items: center
}

.nav-shop {
    font-size: 14px;
    border-bottom: 1px solid;
    padding: 7px 0
}

.cart-toggle {
    border: 0;
    background: none;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px
}

.cart-toggle svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5
}

.cart-count {
    font-size: 13px;
    min-width: 16px
}

.menu-toggle {
    display: none
}

.access-skip {
    position: fixed;
    left: 15px;
    top: -100px;
    background: var(--ink);
    color: var(--paper);
    z-index: 100;
    padding: 16px
}

.access-skip:focus {
    top: 10px
}

.hero-ctas {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap
}

.secondary {
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 6px
}

.intro {
    min-height: calc(100svh - 80px);
    padding-top: 40px
}

.story .chapter {
    min-height: 86svh
}

/* The stage stays pinned for the whole story, so a tall last chapter leaves a stretch
   of scrolling with only the pack on screen after its text has gone. */
.story .chapter:last-child {
    min-height: 44svh
}

.story .transition {
    height: 44svh
}

/* What the old routine actually costs you, before the pay-off line answers it. */
.routine-cost {
    display: block;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 330px
}

/* The pay-off line, set against the struck-through old routine above it. */
.routine-answer {
    display: block;
    margin-top: 20px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.04em;
    max-width: 380px
}

.routine-answer em {
    font-style: normal;
    color: var(--orange)
}

.routine-arrow {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--muted);
    margin-bottom: 10px
}

.routine-words {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.04em
}

.routine-words span {
    padding-bottom: 4px;
    border-bottom: 1px solid #d1bfa3
}

.text-cta {
    display: inline-block;
    margin-top: 15px;
    font-size: 14px;
    border-bottom: 1px solid;
    padding-bottom: 5px
}

/* Generous top padding keeps this section's content clear of the sticky stage above it,
   which overlaps the next screen because of its negative bottom margin. */
/* The stage stays stuck for a screen past the story (margin-bottom: -100svh), which drags
   this section up underneath it. The top padding is that stage's exit runway: it has to be
   deep enough that the last chapter's copy has scrolled away before this heading arrives,
   or the pack is forced to fade while chapter 04 is still being read. Sized in svh because
   the overlap it compensates for is itself a viewport height. */
.lifestyle-section {
    padding: 107svh 6% 90px
}

.lifestyle-section h2 {
    font-size: 52px
}

/* One continuous day, read left to right, rather than four labels floating apart. */
.day-rail {
    list-style: none;
    margin: 46px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0
}

.day-rail li {
    position: relative;
    padding: 30px 28px 0 0
}

/* The rail itself: one line across, with a marker per stop. */
.day-rail li::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid var(--line)
}

.day-rail li::after {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--orange)
}

.day-rail li:last-child::after {
    background: var(--ink)
}

.day-time {
    display: block;
    font: 12px monospace;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 12px
}

.day-rail h3 {
    font-size: 25px;
    letter-spacing: -.045em;
    margin: 0 0 8px;
    max-width: 170px
}

.day-rail p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 180px
}

.shop-section {
    padding: 90px 6%;
    background: #eee7db
}

.section-heading h2 {
    font-size: clamp(45px,4.6vw,70px)
}

.commerce-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8%;
    align-items: center
}

.product-name {
    font-size: clamp(35px,3.3vw,52px);
    letter-spacing: -.055em;
    line-height: 1.05;
    margin: 0 0 20px
}

.product-facts {
    display: flex;
    gap: 10px 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid #cfc3b1;
    padding: 10px 0 23px;
    font-size: 13px
}

.price-row {
    display: flex;
    gap: 14px;
    align-items: baseline;
    margin: 25px 0 14px
}

.price {
    font-size: 28px
}

.price-row>span:last-child {
    font-size: 13px;
    color: var(--muted)
}

.price-unset {
    font-size: 22px;
    font-weight: 700
}

.configuration-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 480px
}

/* Pre-launch stand-in for the buy controls (js/product.js -> COMING_SOON). */
.coming-soon {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 24px;
    margin: 28px 0 0;
    background: #fffdf8;
    max-width: 480px
}

.coming-soon-badge {
    display: inline-block;
    background: var(--orange);
    color: var(--paper);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 30px
}

.coming-soon p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted)
}

/* Nothing can reach the cart before launch, so the counter would sit at zero forever. */
body.pre-launch .cart-toggle {
    display: none
}

.purchase-controls {
    display: flex;
    gap: 14px;
    margin-top: 25px
}

.quantity-selector {
    display: flex;
    border: 1px solid #bfb4a1;
    border-radius: 3px;
    align-items: center;
    background: transparent;
    width: 132px;
    flex-shrink: 0;
    min-height: 53px
}

.quantity-selector button {
    border: 0;
    background: none;
    width: 38px;
    min-height: 48px;
    font-size: 23px;
    color: var(--ink)
}

.quantity-selector button:disabled {
    opacity: .3;
    cursor: default
}

.quantity-selector input {
    width: 50px;
    text-align: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 16px Arial;
    appearance: textfield;
    -moz-appearance: textfield
}

.quantity-selector input::-webkit-inner-spin-button,.quantity-selector input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.add-to-cart {
    flex: 1;
    background: var(--orange);
    color: var(--ink);
    border: 0;
    border-radius: 30px;
    padding: 15px 24px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    font-weight: 700
}

.buy-now {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--ink);
    background: none;
    padding: 18px 23px;
    border-radius: 30px;
    margin-top: 12px;
    color: var(--ink)
}

.buy-now:hover {
    background: var(--ink);
    color: var(--paper)
}

.test-note {
    font-size: 12px;
    line-height: 1.6;
    border-left: 2px solid var(--orange);
    padding-left: 12px;
    color: var(--muted);
    margin: 18px 0
}

.test-note strong {
    color: var(--ink)
}

.faq-section {
    padding: 100px 6%;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 10%
}

.faq-list details,.shop-bottom-faq details,.product-information details {
    border-bottom: 1px solid var(--line);
    padding: 12px 0
}

.faq-list summary,.shop-bottom-faq summary,.product-information summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    /* A one-line question is 23px tall; pad the row out to a comfortable tap target. */
    align-items: center;
    min-height: 44px
}

.faq-list summary::-webkit-details-marker,.shop-bottom-faq summary::-webkit-details-marker,.product-information summary::-webkit-details-marker {
    display: none
}

details p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted)
}

details[open] summary>span {
    transform: rotate(45deg)
}

.commerce-footer {
    border-top: 1px solid var(--line);
    align-items: flex-start;
    gap: 50px;
    padding: 55px 6%;
    flex-wrap: wrap
}

.commerce-footer p {
    font-size: 14px
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3,auto);
    gap: 18px 40px
}

.footer-links a {
    font-size: 13px
}

.route-container {
    padding: 55px 6% 100px;
    min-height: 65svh;
    max-width: 1440px;
    margin: auto
}

.route-container>h1,.checkout-heading h1 {
    font-size: clamp(50px,6vw,90px);
    margin: 35px 0 50px
}

.route-container .commerce-product {
    margin-top: 25px
}

.back-link {
    font-size: 14px;
    display: inline-block;
    margin-bottom: 20px
}

.product-information {
    max-width: 650px;
    margin: 30px 0 50px auto
}

.shop-bottom-faq {
    max-width: 800px;
    margin: 80px auto 0
}

.shop-bottom-faq h2 {
    font-size: 44px
}

.inner-page .product-visual {
    background: #eee7db;
    border-radius: 3px
}

.orange-period {
    color: var(--orange)
}

.cart-page-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8%
}

.cart-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
    align-items: start
}

.cart-thumb {
    width: 80px;
    height: 110px;
    position: relative;
    overflow: hidden;
    background: #ece5d9;
    flex-shrink: 0
}

.cart-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain
}

.cart-item-body>a {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    display: block
}

.cart-item-body p {
    font-size: 13px;
    color: var(--muted);
    margin: 7px 0
}

.cart-item>strong {
    font-size: 15px
}

.cart-item .quantity-selector {
    margin-top: 15px;
    min-height: 42px;
    width: 120px
}

.cart-item .quantity-selector button {
    min-height: 40px
}

.cart-item .quantity-selector input {
    width: 44px
}

.remove-item {
    display: block;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    border: 0;
    background: none;
    color: var(--muted);
    padding: 10px 0
}

.order-totals {
    margin: 20px 0
}

.order-totals>div {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    font-size: 14px;
    margin-bottom: 17px
}

.order-totals dd {
    margin: 0;
    font-weight: 700
}

.order-totals .total {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 25px;
    font-size: 20px
}

.checkout-link,.place-order {
    display: flex;
    justify-content: space-between;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    border-radius: 35px;
    padding: 19px 23px;
    font-size: 14px;
    width: 100%;
    align-items: center
}

.place-order:disabled {
    opacity: .6;
    cursor: wait
}

.fine-print {
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted)
}

.continue-shopping {
    background: none;
    border: 0;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    display: block;
    margin: 20px auto;
    font-size: 14px;
    padding: 10px
}

.empty-cart {
    text-align: center;
    padding: 55px 10px
}

.empty-cart h3 {
    font-size: 30px;
    letter-spacing: -.045em
}

.empty-cart p {
    font-size: 15px;
    color: var(--muted)
}

.empty-symbol {
    font-size: 48px!important;
    color: var(--orange)!important
}

.empty-cart .primary {
    margin-top: 20px
}

#cart-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 500px;
    max-width: 100%;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    padding: 30px;
    overflow: auto
}

#cart-drawer[open] {
    animation: drawer-in .22s ease-out
}

.drawer-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 22px
}

.drawer-heading h2 {
    font-size: 36px;
    margin: 0
}

.close-cart {
    background: none;
    border: 0;
    font-size: 30px;
    padding: 5px;
    color: var(--ink)
}

.drawer-bottom {
    margin-top: 35px
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 9%;
    align-items: start
}

.checkout-heading {
    max-width: 740px;
    margin-bottom: 40px
}

.checkout-heading h1 {
    margin: 20px 0
}

.checkout-grid h2 {
    font-size: 30px;
    margin: 0 0 30px
}

.checkout-summary {
    background: #eee7db;
    padding: 30px;
    position: sticky;
    top: 110px
}

.summary-product {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #d0c5b4;
    padding-bottom: 25px
}

.summary-product strong {
    font-size: 16px
}

.summary-product p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6
}

.field {
    margin-bottom: 22px
}

.field label {
    display: block;
    font-size: 14px;
    margin-bottom: 9px
}

.field input,.field textarea {
    width: 100%;
    border: 1px solid #bfb5a4;
    background: #faf7f0;
    padding: 14px;
    font: 16px/1.4 Arial;
    color: var(--ink);
    border-radius: 3px
}

.field small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px
}

.field input:user-invalid,.field textarea:user-invalid {
    border-color: #9b3808
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.pin-field {
    max-width: 230px
}

.form-error {
    color: #9b3808;
    background: #fc651b10;
    padding: 15px;
    font-size: 14px;
    border: 1px solid #9b3808
}

.confirmation {
    max-width: 950px
}

.confirmation>h1 {
    font-size: 110px;
    margin: 25px 0
}

.confirmation-lead {
    font-size: 22px
}

.test-receipt {
    border: 1px solid var(--line);
    padding: 35px;
    margin: 35px 0
}

.receipt-top {
    display: flex;
    gap: 25px;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 25px;
    flex-wrap: wrap
}

.receipt-top span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px
}

.receipt-top strong {
    font-size: 15px;
    overflow-wrap: anywhere
}

.receipt-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 25px
}

.receipt-item p {
    font-size: 14px;
    color: var(--muted)
}

.policy-page {
    max-width: 850px
}

.policy-page h1 {
    font-size: 64px
}

.policy-page p {
    font-size: 17px;
    line-height: 1.8
}

.policy-page a {
    display: inline-block
}

#toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%,20px);
    background: var(--ink);
    color: var(--paper);
    padding: 15px 23px;
    font-size: 14px;
    max-width: 90%;
    z-index: 50;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s,transform .2s
}

#toast.show {
    opacity: 1;
    transform: translate(-50%,0)
}

@keyframes drawer-in {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@media(max-width: 1000px) {
    .site-nav nav {
        gap:20px
    }

    .nav-actions {
        gap: 17px
    }

    .hero-art {
        transform: scale(.9)
    }

    .commerce-product {
        gap: 4%
    }

    .product-visual {
        min-width: 0
    }

    .product-ring {
        width: 350px;
        height: 350px
    }

    .product-visual .pack-window {
        transform: scale(.86)
    }

    .product-facts {
        font-size: 12px
    }

    .cart-item {
        gap: 13px;
        grid-template-columns: 75px 1fr auto
    }

    .cart-thumb {
        width: 70px
    }

    .checkout-grid {
        gap: 5%
    }
}

/* Tablets and small laptops. The story keeps its side-by-side layout here, but the copy
   column has to narrow: its 45% width is only reined in by max-width on wide screens, so
   at these sizes it ran under the visuals. */
@media(min-width: 761px) and (max-width: 1100px) {
    .chapter>div {
        width: 36%
    }

    .chapter h2 {
        font-size: 34px;
        letter-spacing: -.05em
    }

    .chapter p:not(.chapter-label),
    .routine-cost {
        font-size: 15px
    }

    .routine-words,
    .routine-answer {
        font-size: 19px
    }

    .moments {
        left: 44%;
        width: 54%
    }

    .moment-one {
        width: 25vw;
        height: 16.6vw
    }

    .moment-two {
        width: 24vw;
        height: 16vw
    }

    .moment-three {
        width: 23.5vw;
        height: 15.7vw
    }

    .moment-four {
        width: 23vw;
        height: 15.3vw
    }
}

@media(max-width: 760px) {
    .site-nav {
        height:70px;
        padding: 0 5%
    }

    .nav-shop {
        display: none
    }

    .nav-actions {
        gap: 12px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: none;
        border: 0;
        padding: 12px;
        /* The two bars are only 8px tall together; keep a 44px finger target around them. */
        min-width: 44px;
        min-height: 44px
    }

    .menu-toggle span {
        width: 22px;
        height: 1px;
        background: var(--ink)
    }

    #mobile-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--paper);
        z-index: 9;
        padding: 15px 6% 25px;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 0
    }

    #mobile-menu a {
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-size: 17px
    }

    .intro {
        padding: 22px 6% 34px
    }

    /* The whole hero -- copy and the full pack -- has to land inside one phone screen,
       so everything here is capped against the screen height as well as its width.
       Phones vary far more in height than in width, and a purely vw-sized headline
       pushed the pack below the fold on anything shorter than a 812px screen. */
    .intro-copy h1 {
        font-size: min(var(--title), 14.5vw, 7.4svh);
        margin-bottom: 14px
    }

    .intro-copy .lead {
        font-size: 15px;
        margin-bottom: 15px
    }

    .hero-ctas {
        gap: 18px
    }

    .primary {
        padding: 15px 20px
    }

    /* Must reserve the pack's ROTATED footprint. The pack is tilted 8deg, which makes it
       ~1.08x taller than its layout box; min-height: 0 let this row shrink below that and
       the pack spilled over the caption and the strip at the foot of the section. */
    .hero-art {
        transform: none;
        min-height: min(372px, 41svh);
        margin-top: 4px
    }

    /* Resize the window itself rather than scaling it down: the img inside is
       object-fit: contain, so the pack simply gets smaller and the element's layout
       box still matches what you see. Ratio held at 345:510, same as the desktop pack. */
    .hero-art>.pack-window {
        width: min(232px, 25.6svh);
        height: min(343px, 37.8svh);
        transform: rotate(-8deg)
    }

    .hero-sticker {
        right: 2%;
        top: 2%;
        width: min(108px, 12svh);
        height: min(108px, 12svh);
        gap: 4px
    }

    .hero-sticker strong {
        font-size: min(34px, 3.8svh)
    }

    .hero-sticker span {
        font-size: min(9px, 1.05svh)
    }

    .hero-word {
        right: -20px
    }

    .hero-art .mini-gummy {
        bottom: 30px;
        left: 0;
        width: min(72px, 8.6svh);
        height: min(72px, 8.6svh)
    }

    /* Hidden on phones only. Fitting the whole pack on one screen leaves no clear band
       under it, and the caption was landing across the tub -- where the same two facts
       (ORANGE FLAVOUR, 30 GUMMIES) are already printed on the pack itself. */
    .hero-art .pack-caption {
        display: none
    }

    .intro .eyebrow {
        font-size: 10px;
        letter-spacing: .09em;
        margin-bottom: 13px
    }

    .intro-bottom {
        bottom: 14px
    }

    .story .chapter {
        min-height: 88svh;
        padding-top: 90px
    }

    .story .chapter:last-child {
        min-height: 50svh
    }

    .chapter h2 {
        font-size: var(--heading)
    }

    .routine-words {
        font-size: 22px;
        gap: 8px
    }

    .routine-answer {
        font-size: 19px;
        margin-top: 16px
    }

    .story .transition {
        height: 46svh
    }

    .lifestyle-section {
        padding: 107svh 6% 60px
    }

    .lifestyle-section h2 {
        font-size: var(--heading)
    }

    .day-rail {
        grid-template-columns: 1fr;
        margin-top: 32px
    }

    .day-rail li {
        padding: 20px 0 24px 22px
    }

    /* Stacked on narrow screens, so the rail runs down the left instead of across. */
    .day-rail li::before {
        left: 4px;
        right: auto;
        top: 0;
        bottom: 0;
        border-top: 0;
        border-left: 1px solid var(--line)
    }

    .day-rail li:last-child::before {
        bottom: auto;
        height: 24px
    }

    .day-rail li::after {
        left: 0;
        top: 20px
    }

    .day-rail h3 {
        font-size: var(--subheading);
        max-width: none
    }

    .day-rail p {
        max-width: none
    }

    .shop-section {
        padding: 55px 6%
    }

    .section-heading h2 {
        font-size: var(--heading)
    }

    .commerce-product {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .product-visual {
        min-height: 365px;
        overflow: hidden
    }

    .product-visual .pack-window {
        transform: scale(.7);
        margin: -60px 0
    }

    .product-ring {
        width: 300px;
        height: 300px
    }

    /* Same class, two roles: it is the page title on the product page (h1) and a card
       heading inside the shop section on the home page (h3), where a title-sized name
       would outrank the section heading above it. */
    h1.product-name {
        font-size: var(--title)
    }

    h3.product-name {
        font-size: var(--heading)
    }

    .product-description {
        font-size: 16px
    }

    .product-copy .eyebrow {
        font-size: 11px
    }

    .price-row {
        margin-top: 20px
    }

    .price-unset {
        font-size: 21px
    }

    .purchase-controls {
        gap: 10px
    }

    .quantity-selector {
        width: 135px
    }

    .quantity-selector button {
        width: 40px
    }

    .quantity-selector input {
        width: 49px
    }

    .add-to-cart {
        padding: 15px 18px;
        font-size: 14px
    }

    .buy-now {
        font-size: 14px
    }

    .faq-section {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 60px 6%
    }

    .faq-section h2 {
        font-size: var(--heading)
    }

    .faq-list summary {
        font-size: 15px
    }

    .commerce-footer {
        gap: 25px;
        padding: 40px 6%
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 17px 25px;
        width: 100%
    }

    .footer-links a {
        font-size: 14px
    }

    .route-container {
        padding: 30px 6% 65px
    }

    .route-container>h1,.checkout-heading h1 {
        font-size: var(--title);
        margin: 25px 0 35px
    }

    .product-detail .commerce-product {
        margin-top: 5px
    }

    .product-information {
        margin-top: 25px
    }

    .cart-page-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .cart-item {
        grid-template-columns: 62px 1fr auto;
        gap: 12px
    }

    .cart-thumb {
        width: 60px;
        height: 90px
    }

    .cart-item>strong {
        font-size: 13px
    }

    .cart-item-body>a {
        font-size: 14px
    }

    .cart-item-body p {
        font-size: 12px
    }

    .cart-item .quantity-selector {
        width: 112px
    }

    .cart-item .quantity-selector input {
        width: 40px
    }

    .cart-item .quantity-selector button {
        width: 34px
    }

    #cart-drawer {
        padding: 24px 20px;
        width: 100%;
        max-width: 430px
    }

    .drawer-heading h2 {
        font-size: var(--title)
    }

    .checkout-grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 35px
    }

    .checkout-grid form,.checkout-summary {
        width: 100%
    }

    .checkout-summary {
        position: static;
        padding: 22px
    }

    .checkout-heading {
        margin-bottom: 28px
    }

    .checkout-heading h1 {
        font-size: var(--title)
    }

    .form-grid {
        gap: 15px
    }

    .checkout-grid h2 {
        font-size: var(--subheading)
    }

    .summary-product {
        gap: 14px
    }

    .field input,.field textarea {
        padding: 13px 11px
    }

    .test-receipt {
        padding: 22px
    }

    .confirmation>h1 {
        font-size: 85px
    }

    .confirmation-lead {
        font-size: 19px
    }

    .receipt-top {
        display: grid
    }

    .receipt-item {
        font-size: 14px
    }

    .policy-page h1 {
        font-size: var(--title)
    }

    .shop-bottom-faq {
        margin-top: 50px
    }

    .shop-bottom-faq h2 {
        font-size: var(--heading)
    }
}

@media(max-width: 360px) {
    .hero-ctas {
        gap:14px
    }

    .secondary {
        font-size: 12px
    }

    /* Same height cap as the wider phone rule above; a flat 59px here re-introduced the
       overflow this block is meant to relieve, because it wins on source order. */
    .intro-copy h1 {
        font-size: min(var(--title), 15.5vw, 7.2svh)
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    h1.product-name {
        font-size: var(--title)
    }

    h3.product-name {
        font-size: var(--heading)
    }

    .quantity-selector {
        width: 112px
    }

    .quantity-selector input {
        width: 42px
    }
}

@media (prefers-reduced-motion: reduce), (max-height: 520px) {
    .story .chapter {
        min-height: auto;
        padding: 60px 7%
    }

    .story .transition {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    #cart-drawer[open] {
        animation: none
    }

    #toast {
        transition: none
    }
}

.hero-sticker strong span {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit
}

.hero-word {
    opacity: .5
}

.stage {
    top: 70px;
    height: calc(100svh - 70px)
}

@media(min-width: 761px) {
    .stage {
        top:80px;
        height: calc(100svh - 80px)
    }
}

body:has(dialog[open]) {
    overflow: hidden
}