:root {
    --bg: #fffaf4;
    --surface: #ffffff;
    --ink: #232323;
    --muted: #6d6d6d;
    --line: #e8dfd5;
    --accent: #ff7a59;
    --accent-dark: #da5638;
    --soft: #fff0e9;
    --success: #18794e;
    --danger: #b42318;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background-color: #d9dcff;
    background-image: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)), url('/images/picknpeek-background.png');
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a { color: inherit; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.site-header {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 900; text-decoration: none; letter-spacing: .04em; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
nav { display: flex; gap: 20px; }
nav a { text-decoration: none; font-weight: 650; font-size: .95rem; }
.cart-link { display: inline-flex; align-items: center; gap: 6px; }
.cart-count { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: white; text-align: center; font-size: .75rem; }
.flash { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.flash-success { background: #e5f5ec; color: var(--success); }
.flash-error { background: #fde9e7; color: var(--danger); }

.hero { padding: 42px 0 36px; background: linear-gradient(135deg, #fff3e9, #fffafd); }
.hero h1 { font-size: clamp(1.75rem, 4vw, 2.8rem); max-width: 900px; line-height: .98; margin: 8px 0 12px; }
.hero p { max-width: 680px; color: var(--muted); font-size: .95rem; line-height: 1.45; }

.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 850; color: var(--accent-dark); }
.section { padding: 56px 0; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.section-heading h1, .section-heading h2 { margin: 6px 0; }
.section-heading p { color: var(--muted); max-width: 720px; }

.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }

.card, .panel, .pick-card, .choice {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(60,40,20,.04);
}
.card { padding: 22px; }
.card form { margin-top: 16px; }
.product-card {
    position: relative;
    display: flex;
    overflow: hidden;
    border: 2px solid rgba(20, 50, 105, .72);
    box-shadow: 0 9px 22px rgba(20, 50, 105, .22), 0 0 0 1px rgba(255,255,255,.72);
}
.product-card-content, .pick-card-content { position: relative; z-index: 1; }
.product-card-content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; }
.product-card-content .card-row { margin-top: auto; padding-top: 8px; width: 100%; flex-wrap: wrap; gap: 6px 10px; }
#catalog > .grid, #builder-products > .grid { grid-auto-rows: 1fr; gap: 12px; }
.product-card, .pick-card { min-width: 0; min-height: 220px; height: auto; overflow-wrap: anywhere; }
.product-card { padding: 14px; }
.product-card h3, .pick-card h3 { font-size: 1rem; line-height: 1.25; margin: 7px 0 5px; }
.product-card p { min-height: 0; margin: 0 0 8px; font-size: .82rem; line-height: 1.4; }
.product-card .tag, .pick-card .tag { max-width: calc(100% - 90px); padding: 3px 7px; font-size: .68rem; }
.product-card .price, .pick-card .price { font-size: .9rem; }
.pick-card .muted { margin-bottom: 6px; font-size: .75rem; }
.product-card .product-icon { position: absolute; top: 0; right: 0; font-size: 1.4rem; }
.product-image-layer { position: absolute; inset: 0; z-index: 0; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: .48; cursor: pointer; }
.product-card:has(.product-image-layer) .product-card-content {
    color: #000000;
    text-shadow: 0 2px 3px rgb(255, 255, 255);
}
.product-card:has(.product-image-layer) h3,
.product-card:has(.product-image-layer) p,
.product-card:has(.product-image-layer) .price,
.product-card:has(.product-image-layer) .muted { color: #000000; }
.product-image-layer:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.image-count { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--muted); font-size: .75rem; }
.magnifier-button { position: absolute; z-index: 3; top: 10px; right: 70px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.card h3, .pick-card h3 { margin: 8px 0; }
.card p { color: var(--muted); min-height: 48px; line-height: 1.5; }
.card-row, .selected-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.product-icon { font-size: 2rem; }
.tag { display: inline-block; background: var(--soft); border-radius: 999px; padding: 5px 9px; font-size: .72rem; font-weight: 750; }
.price { font-weight: 850; }
.muted { color: var(--muted); font-size: .9rem; }
.notice { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--soft); color: var(--accent-dark); font-size: .9rem; line-height: 1.45; }

.button {
    display: inline-block;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.button.primary { background: var(--accent); color: white; }
.button.primary:hover { background: var(--accent-dark); }
.button.secondary { background: #f4efe9; color: var(--ink); }
.gallery-button { border: 0; padding: 0; background: transparent; color: var(--accent-dark); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 750; text-align: left; }
.image-gallery-dialog { width: min(1100px, calc(100% - 32px)); max-height: calc(100% - 32px); border: 0; border-radius: 18px; padding: 24px; }
.image-gallery-dialog::backdrop { background: rgba(35,35,35,.62); }
.gallery-close { display: block; margin-left: auto; border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; }
.image-lightbox { display: flex; align-items: center; justify-content: center; gap: 18px; }
.image-gallery-full { display: block; max-width: min(78vw, 900px); max-height: 76vh; width: auto; height: auto; object-fit: contain; }
.gallery-arrow { width: 42px; height: 56px; border: 0; background: transparent; color: #000; font-size: 3rem; line-height: 1; cursor: pointer; }
.gallery-position { margin-top: 12px; text-align: center; color: var(--muted); font-size: .9rem; }
.full-button { width: 100%; margin-top: 12px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.cart-line { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line-header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.cart-line-items { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: .88rem; }
.cart-line-actions { display: flex; align-items: center; gap: 10px; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; }
.quantity-input { width: 70px; }
.link-button { border: 0; background: transparent; color: var(--danger); cursor: pointer; font: inherit; padding: 0; }
.unavailable { color: var(--danger); font-size: .88rem; font-weight: 700; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.checkout-summary { position: sticky; top: 88px; }

.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.panel { padding: 22px; margin-bottom: 20px; }
.summary { position: sticky; top: 88px; }
.box-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(20, 50, 105, .12);
}
.choice:has(input:checked) {
    outline: 2px solid var(--accent);
}
.choice input { width: auto; }

.pick-card { position: relative; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: end; gap: 8px; overflow: hidden; }
.pick-card-content { align-self: start; min-width: 0; }
.pick-card-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; min-height: 52px; }
.pick-card-controls > .colour-picker { flex: 1 1 120px; min-width: 0; }
.pick-card-controls > .qty-control { margin-left: auto; gap: 6px; }
.pick-card-controls .colour-picker select { padding: 7px 5px; font-size: .8rem; }
.qty-control { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.qty-control button {
    width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
    background: white; font-size: 1.2rem; cursor: pointer;
}

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid label { display: grid; gap: 7px; font-weight: 700; font-size: .9rem; }
.form-grid .full { grid-column: 1 / -1; }
input, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 11px 12px;
    font: inherit;
    background: white;
}
select { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; font: inherit; background: white; }
.field-hint { color: var(--muted); font-size: .82rem; font-weight: 500; }
.address-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px !important; }
.address-check input { width: auto; }
.selected-list { display: grid; gap: 10px; margin: 18px 0; }
.selected-row { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.selected-row.total { font-size: 1.08rem; border-bottom: 0; padding-top: 6px; }
.quote { margin-top: 14px; display: grid; gap: 9px; }
.message { margin-top: 14px; line-height: 1.4; }
.error { color: var(--danger); }
.success { color: var(--success); font-weight: 750; }

.site-footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--muted); margin-top: 30px; }

@media (max-width: 850px) {
    .grid.three, .grid.two, .builder-layout, .box-size-grid { grid-template-columns: 1fr; }
    .summary { position: static; }
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    nav { gap: 10px; font-size: .85rem; }
    .brand img { width: 36px; height: 36px; }
    .image-lightbox { gap: 4px; }
    .image-gallery-full { max-width: 72vw; }
}

/* Homepage illustrations stay separate from the full-page artwork. */
.home-shell { width: min(1400px, calc(100% - 64px)); }
.home-section { padding: 14px 0; }
.home-section .section-heading { margin-bottom: 12px; }
.home-hero { position: relative; overflow: hidden; padding: 16px 0; background: radial-gradient(ellipse at 85% 40%, #eaf2fc 0, transparent 48%), linear-gradient(120deg, #fff3e9, #fffaf6 60%, #f2f5fc); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); align-items: center; gap: 36px; }
.hero-copy { position: relative; z-index: 1; padding: 10px 0; }
.home-hero h1 { font-size: clamp(2.4rem, 3.8vw, 3.5rem); max-width: 1000px; line-height: 1.1; letter-spacing: -.035em; margin: 14px 0; }
.home-hero p { font-size: 1.05rem; max-width: 850px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.hero-shop-link, .product-builder-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #345a82; border-radius: 10px; background: #edf4fc; color: #244d78; font-weight: 750; text-decoration: none; text-shadow: none; }
.hero-shop-link { padding: 12px 18px; font-size: .86rem; }
.product-builder-link { margin-left: auto; padding: 8px 10px; min-height: 34px; font-size: .75rem; }
.hero-shop-link:hover, .product-builder-link:hover { background: #dceafa; border-color: #244d78; }
.hero-shop-link:focus-visible, .product-builder-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero-mascot { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; }
.hero-mascot img { display: block; width: 310px; max-width: 100%; height: auto; margin: auto; animation: peek-float 5s ease-in-out infinite; }
.mascot-caption { position: absolute; bottom: -10px; display: inline-block; color: #456184; font-size: .78rem; font-weight: 750; letter-spacing: .035em; padding-bottom: 12px; }
.hero-sidekick { position: absolute; width: 90px; height: auto; left: max(0px, calc((100% - 1630px) / 2)); bottom: 20px; transform: rotate(-15deg); animation: peek-sidekick 6s ease-in-out infinite; pointer-events: none; }
.ready-made-section { scroll-margin-top: 100px; }
.ready-made-section .section-heading > div { padding: 7px 14px; border-radius: 14px; background: rgba(255,250,244,.92); }
.ready-made-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 6px 10px; padding: 14px 18px; min-height: 0; background-repeat: no-repeat; background-position: right bottom; background-size: auto 100%; border-color: rgba(74,87,115,.17); box-shadow: 0 8px 24px rgba(41,62,91,.08); transition: transform .2s ease, box-shadow .2s ease; }
.ready-made-card--mini { background-color: #fff6ec; background-image: url('/images/box-mini.svg'); }
.ready-made-card--happy { background-color: #f0f8ff; background-image: url('/images/box-happy.svg'); }
.ready-made-card--big { background-color: #f7f3ff; background-image: url('/images/box-big.svg'); }
.box-edition { grid-column: 1 / -1; justify-self: start; align-self: flex-start; margin-bottom: 0; border: 1px solid rgba(55,75,105,.15); border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.8); color: #405777; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ready-made-card h3 { grid-column: 1 / -1; margin: 2px 0; color: #243a54; font-size: 1.16rem; }
.ready-made-card p { grid-column: 1 / -1; color: #526174; margin: 0 0 4px; min-height: 0; font-size: .88rem; max-width: 100%; }
.ready-made-card .price { margin-top: 0; justify-self: start; padding: 5px 8px; margin-left: -8px; border-radius: 7px; background: rgba(255,255,255,.85); }
.ready-made-card form { margin: 0; }
.ready-made-card .button { padding: 10px 14px; font-size: .88rem; }
.home-hero .button.primary, .ready-made-card .button.primary, .builder-button { background: #bd482d; color: #fff; }
.home-hero .button.primary:hover, .ready-made-card .button.primary:hover, .button.builder-button:hover { background: #a83b23; }
a:focus-visible, button:focus-visible { outline: 3px solid #325e94; outline-offset: 4px; }
@keyframes peek-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes peek-sidekick { 0%, 100% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-5px) rotate(-11deg); } }
@media (hover: hover) { .ready-made-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(41,62,91,.13); } }
@media (max-width: 1640px) { .hero-sidekick { display: none; } }
@media (max-width: 850px) {
    .hero-layout { grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr); gap: 12px; }
    .home-hero { padding: 14px 0; }
    .home-shell { width: calc(100% - 32px); }
    .home-section.section { padding: 14px 0; }
    .ready-made-card { min-height: 0; }
    .hero-mascot { height: 190px; }
    .hero-mascot img { width: 220px; }
    .section { padding: 36px 0; }
}
@media (max-width: 560px) {
    .hero-layout { grid-template-columns: 1fr; gap: 0; }
    .hero-copy { padding-bottom: 0; }
    .hero-mascot { height: 140px; margin-top: 12px; }
    .hero-mascot img { width: 155px; }
    .mascot-caption { padding-bottom: 0; }
    .home-hero h1 { font-size: 2.1rem; }
    .hero-actions { gap: 18px; }
    .header-inner { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px 0; }
    nav { justify-content: center; flex-wrap: wrap; gap: 16px; }
    nav a { font-size: .85rem; }
    .section-heading { align-items: start; flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-mascot img, .hero-sidekick { animation: none; }
    .ready-made-card { transition: none; }
    .ready-made-card:hover { transform: none; }
}

/* Smaller mascot accents keep task pages focused on their forms. */
.page-heading { align-items: center; flex-wrap: nowrap; }
.page-heading > div { min-width: 0; }
.page-mascot { flex: 0 0 auto; object-fit: contain; height: auto; }
.page-heading--build .page-mascot { width: 150px; }
.page-heading--cart .page-mascot { width: 120px; }
.page-heading--checkout .page-mascot { width: 96px; }
@media (max-width: 560px) {
    .page-heading { gap: 8px; }
    .page-heading .page-mascot { width: 72px; }
    .page-heading h1 { font-size: 1.6rem; }
}

.catalog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.catalog-pagination .button { font-size: .85rem; }
.catalog-pagination [aria-disabled="true"] { opacity: .5; cursor: default; }
.pagination-position { color: var(--ink); background: rgba(255,255,255,.94); padding: 8px 12px; border-radius: 10px; font-size: .85rem; }
#catalog, #builder-products { scroll-margin-top: 110px; }
#builder-products[aria-busy="true"] .catalog-pagination { opacity: .6; cursor: progress; }

.cart-reservation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #fff0df; color: #703d24; border: 1px solid #edc4a4; font-size: .9rem; }
.cart-reservation[hidden] { display: none; }
.cart-reservation strong { font-variant-numeric: tabular-nums; }
.cart-reservation a { font-weight: 750; }
.stock-unavailable { display: inline-block; color: #a33027; background: #fff0e9; border-radius: 8px; padding: 4px 7px; font-size: .8rem; font-weight: 750; }
button:disabled { opacity: .55; cursor: not-allowed; }

.colour-picker { display: grid; gap: 4px; position: relative; z-index: 2; font-size: .8rem; font-weight: 700; color: #243a54; }
.colour-picker-control { display: flex; align-items: center; gap: 7px; }
.colour-dot { flex: 0 0 15px; height: 15px; border: 1px solid #8a98ac; border-radius: 50%; background: #d8dde5; }
.colour-picker select { min-width: 0; padding: 7px 9px; font-size: .85rem; }
.product-card.has-colours .product-card-content { pointer-events: auto; }
.ready-made-card form:has(.colour-picker) { grid-column: 1 / -1; display: grid; gap: 10px; }
#builder-products [id^="product-"] { scroll-margin-top: 120px; }

.colour-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: .75rem; font-weight: 700; color: #243a54; }
.colour-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

#box-builder { scroll-margin-top: 90px; }
.selected-row:has([data-pending-product]) { flex-wrap: wrap; }
.selected-row [data-pending-product] { flex-basis: 100%; }

/* Peek's guide reuses the cached SVG; only transforms animate, once per visit into view. */
.how-it-works { margin-top: 32px; margin-bottom: 24px; padding: 32px 24px 24px; border: 1px solid #e6daca; border-radius: 26px; background: linear-gradient(125deg, #fff8ee, #f0f6ff); color: #243a54; scroll-margin-top: 100px; }
.journey-heading { text-align: center; }
.journey-heading h2 { margin: 8px 0; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.025em; }
.journey-heading p { margin: 0; color: #526174; font-size: .9rem; }
.journey-trail { position: relative; margin-top: 24px; }
.journey-path { position: absolute; top: 86px; left: 4%; width: 92%; height: 100px; color: #a5bed4; pointer-events: none; }
.journey-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.journey-step { text-align: center; min-width: 0; }
.peek-speech { position: relative; display: flex; align-items: center; justify-content: center; min-height: 66px; padding: 12px; border: 2px solid #d5e2ef; border-radius: 19px 19px 19px 5px; background: #fff; font-size: .86rem; font-weight: 750; }
.peek-speech::after { content: ''; position: absolute; left: 40%; bottom: -9px; width: 14px; height: 14px; background: #fff; border-right: 2px solid #d5e2ef; border-bottom: 2px solid #d5e2ef; transform: rotate(45deg); }
.journey-mascot { position: relative; width: 108px; margin: 16px auto 10px; }
.journey-mascot img { display: block; width: 108px; height: 96px; }
.journey-number { position: absolute; right: -3px; bottom: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid #fff8ee; border-radius: 50%; background: #bd482d; color: #fff; font-size: .75rem; font-weight: 850; }
.journey-step h3 { margin: 0 0 7px; font-size: 1rem; }
.journey-step p { margin: 0 auto; max-width: 250px; color: #526174; font-size: .83rem; line-height: 1.5; }
.journey-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed #c8d6e4; font-size: .88rem; font-weight: 650; }
.journey-footer .button { background: #bd482d; font-size: .85rem; }
.journey-in-view .journey-mascot img { animation: peek-hello 1.4s ease-in-out both; }
.journey-in-view .journey-step:nth-child(2) img { animation-delay: .25s; }
.journey-in-view .journey-step:nth-child(3) img { animation-delay: .5s; }
.journey-in-view .journey-step:nth-child(4) img { animation-delay: .75s; }
@keyframes peek-hello { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-5px) rotate(-5deg); } 65% { transform: translateY(-3px) rotate(4deg); } }
@media (max-width: 850px) {
    .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
    .journey-path { display: none; }
}
@media (max-width: 560px) {
    .header-inner { justify-content: space-between; }
    .header-inner nav { width: 100%; justify-content: flex-end; gap: 14px; }
    .how-it-works { padding: 24px 18px; }
    .journey-steps { grid-template-columns: 1fr; gap: 24px; }
    .journey-step { position: relative; padding-left: 30px; border-left: 2px dashed #a5bed4; }
    .journey-number { right: auto; left: -9px; }
    .journey-step p { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .journey-in-view .journey-mascot img { animation: none; }
}

.mascot-companion { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.mascot-companion--page { flex: 0 1 370px; }
.mascot-bubble { position: relative; flex: 1; min-width: 150px; max-width: 235px; padding: 14px 16px 10px; border: 2px solid #b9cde2; border-radius: 24px 24px 5px 24px; background: #fffdf8; color: #244d78; box-shadow: 0 5px 0 #dce7f2; }
.mascot-bubble::after { content: ''; position: absolute; right: -10px; top: 55%; width: 16px; height: 16px; background: #fffdf8; border-top: 2px solid #b9cde2; border-right: 2px solid #b9cde2; transform: rotate(45deg); }
.mascot-speaker { font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; color: #bd482d; }
.mascot-bubble [data-mascot-line] { margin: 7px 0 8px; min-height: 5.6em; font-size: .88rem; line-height: 1.4; font-weight: 650; color: #244d78; }
.mascot-talk-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.mascot-talk-controls[hidden] { display: none; }
.mascot-talk-controls button { border: 0; background: transparent; color: #345a82; padding: 5px 0; font: inherit; font-size: .68rem; font-weight: 750; cursor: pointer; }
.talking-mascot { flex: 0 0 auto; width: 130px; height: auto; max-width: 42%; }
.mascot-companion--shop .talking-mascot { width: 240px; }
.hero-layout:has(.mascot-companion) { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); gap: 24px; }
@media (max-width: 850px) {
    .hero-layout:has(.mascot-companion) { grid-template-columns: 1fr; }
    .mascot-companion--shop { justify-content: center; }
    .page-heading:has(.mascot-companion) { flex-wrap: wrap; }
    .mascot-companion--page { flex-basis: 100%; justify-content: flex-end; }
}
@media (max-width: 560px) {
    .mascot-bubble { min-width: 0; padding: 12px; }
    .mascot-companion--shop .talking-mascot { width: 150px; }
    .mascot-companion--page .talking-mascot { width: 100px; }
    .mascot-bubble [data-mascot-line] { font-size: .82rem; }
}