@font-face {
  font-family: "DynaPuff"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/combined/DynaPuff-700.ttf") format("truetype");
}
@font-face {
  font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/combined/Fredoka-700.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/combined/Nunito-400.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/combined/Nunito-800.ttf") format("truetype");
}


/* Selected Claude source styles, namespaced to preserve the Codex hero. */
.claude-scope {
  color-scheme: light;

  /* Fonts */
  --font-display: "DynaPuff", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-label:   "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body:    "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;

  /* Brand colours (exact SVG fills) */
  --pc-navy:   #0F2842;
  --pc-cream:  #F3F3EA;
  --pc-blue:   #00A3E3;
  --pc-orange: #FF7308;
  --pc-lime:   #74D011;
  --pc-pink:   #F3227C;

  /* Surfaces */
  --pc-hero:        #FCFCFC;
  --pc-white:       #FFFFFF;
  --pc-kraft:       #EFE4D3;
  --pc-kraft-deep:  #E3D3BC;
  --pc-kraft-edge:  #D0C0A0;
  --pc-lime-tint:   #E6F5D0;
  --pc-blue-tint:   #D9F0FA;
  --pc-orange-tint: #FFE6D1;
  --pc-pink-tint:   #FDDDEA;

  /* Derived inks (text only) */
  --pc-ink:       var(--pc-navy);
  --pc-ink-soft:  #3B4F66;
  --pc-pink-ink:  #A8124F;
  --pc-cream-soft:#D8D8CC;

  /* Type scale */
  --fs-hero:    min(clamp(2.5rem, 1.2rem + 2.6vw, 4.25rem), 7.2svh);
  --fs-hero-sm: clamp(2rem, 1.2rem + 3.6vw, 2.5rem);
  --fs-h2:      clamp(2rem, 1.35rem + 2.3vw, 3.5rem);
  --fs-chapter: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
  --fs-chapter-sm: clamp(1.5rem, 1.1rem + 2vw, 1.875rem);
  --fs-h3:      clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-price:   clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-label:   0.8125rem;
  --fs-button:  1rem;
  --fs-ticker:  clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --lh-tight: 0.98; --lh-heading: 1.05; --lh-body: 1.6;
  --track-label: 0.08em; --track-button: 0.04em;

  /* Spacing (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-pad-y: clamp(64px, 9vw, 128px);
  --gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right));
  --container: 1240px;
  --hero-container: 1920px;
  --measure: 62ch;

  /* Radii */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --r-wobble: 26px 20px 28px 18px / 20px 28px 18px 26px;

  /* Outlines */
  --line-thin: 2px solid var(--pc-navy);
  --line: 3px solid var(--pc-navy);
  --line-thick: 5px solid var(--pc-navy);
  --line-cut: 2px dashed var(--pc-navy);

  /* Hard shadows (never blurred) */
  --sh-sm: 3px 3px 0 var(--pc-navy);
  --sh-md: 5px 5px 0 var(--pc-navy);
  --sh-lg: 8px 8px 0 var(--pc-navy);

  /* Tilt */
  --tilt-a: -1.5deg; --tilt-b: 1deg; --tilt-c: 2deg;

  /* Motion */
  --dur-press: 120ms; --dur-fade: 200ms; --dur-pop: 280ms; --dur-menu: 240ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);

  /* Layout (CSS fallbacks; JS only rounds these to whole px) */
  --nav-h: calc(76px + env(safe-area-inset-top, 0px));
  --stripe-h: 6px;
  --shelf-min: 64px;
  --tap: 44px;
  --stage-h: calc(100svh - var(--nav-h));
  --canvas-w: min(calc((var(--stage-h) - 64px) * 4 / 3), 62vw, calc(100vw - 440px));
  --canvas-h: calc(var(--canvas-w) * 3 / 4);
  --shelf-h: calc(var(--stage-h) - var(--canvas-h));
  --travel: 5.2;
  --track-h: calc(var(--stage-h) + 1px + var(--travel) * 100svh);
  --o: 1; --y: 0px;

  /* Layers */
  --z-canvas: 1; --z-whiteout: 2; --z-pop: 3; --z-shelf: 4; --z-copy: 5;
  --z-sticky-cta: 40; --z-nav: 50; --z-menu: 60; --z-skip: 70;

  /* Shared paint (§7.9): kraft noise tile, four-colour box stripe */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stripe: #FF7308 0 22%, #F3F3EA 22% 26%, #00A3E3 26% 48%, #F3F3EA 48% 52%, #74D011 52% 74%, #F3F3EA 74% 78%, #F3227C 78% 100%;
  --pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 6.6c0-2 .6-3.4 2-4.3l1.5.9c-1 .9-1.4 2-1.4 3.4Z' fill='%2374D011' stroke='%230F2842' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cg fill='%23FF7308' stroke='%230F2842' stroke-width='1.6'%3E%3Cellipse cx='8' cy='14.6' rx='6' ry='7.4'/%3E%3Cellipse cx='16' cy='14.6' rx='6' ry='7.4'/%3E%3Cellipse cx='12' cy='14.6' rx='4.6' ry='7.9'/%3E%3C/g%3E%3Cpath d='M8.4 13.3l1.6-2.4 1.6 2.4ZM12.4 13.3l1.6-2.4 1.6 2.4ZM8.2 16.1c1.6 2.8 6 2.8 7.6 0-1.2.6-2.4.9-3.8.9s-2.6-.3-3.8-.9Z' fill='%230F2842'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230F2842' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cl-container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.cl-section { position: relative; padding-block: var(--section-pad-y); }

/* Type helpers */
.cl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .875rem/1.2 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase;
}
.cl-section-head .cl-eyebrow::before {
  content: ""; flex: none; width: 34px; height: 8px; border-radius: 4px; border: 2px solid var(--pc-navy);
  background: linear-gradient(90deg, var(--pc-orange) 25%, var(--pc-blue) 0 50%, var(--pc-lime) 0 75%, var(--pc-pink) 0);
}
.cl-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cl-section-title, .cl-hero-title { font-family: var(--font-display); font-weight: 700; }
.cl-section-title { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.cl-section-head { max-width: 50rem; margin-bottom: clamp(36px, 5vw, 64px); }
.cl-section-head .cl-section-title { margin-top: 14px; }
.cl-section-head .cl-lead { margin-top: 16px; }
.cl-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: var(--measure); }
.cl-label { font: 700 var(--fs-label)/1.2 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.cl-micro { font: 700 var(--fs-small)/1.45 var(--font-body); color: var(--pc-ink-soft); }
.cl-caption { font: italic 400 var(--fs-small)/1.5 var(--font-body); color: var(--pc-ink-soft); }
.cl-subtitle { font: 600 var(--fs-h3)/1.15 var(--font-display); }

/* Swash (§7.8): blue brush behind navy text */
.cl-swash { position: relative; z-index: 0; white-space: nowrap; padding: 0 .12em; margin-inline: .06em; }
.cl-swash::before {
  content: ""; position: absolute; inset: 12% -4% 4% -4%; z-index: -1; background: var(--pc-blue);
  clip-path: polygon(2% 20%, 97% 8%, 100% 30%, 95% 50%, 100% 72%, 96% 92%, 4% 96%, 0 75%, 4% 55%, 0 35%);
}
/* headings: the brush starts at the swash itself, so it never swallows the comma or full stop before it ("Crap, …") */
.cl-section-title .cl-swash::before { left: 0; }
/* compound words never break at their hyphen ("first-/box"): render.js wraps them in .nw */
.cl-nw { white-space: nowrap; }
@media (max-width: 639px) {
  /* narrow screens: let long swashes wrap; each line gets its own brush */
  .cl-swash {
    white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='2 30 97 18 100 38 95 56 100 74 96 90 4 94 0 76 4 58 0 42' fill='%2300A3E3'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  .cl-swash::before { display: none; }
}

/* ═══ 3. COMPONENTS ═══ */

/* Buttons (§7.4) */
.cl-btn {
  --btn-bg: var(--pc-orange); --btn-fg: var(--pc-navy); --btn-shc: var(--pc-navy); --off0: 5px; --off: var(--off0);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 3px solid var(--pc-navy); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--off) var(--off) 0 var(--btn-shc);
  font: 700 var(--fs-button)/1.1 var(--font-label); letter-spacing: var(--track-button); text-transform: uppercase;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, background-color var(--dur-press) ease-out;
}
.cl-btn-secondary { --btn-bg: var(--pc-hero); --off0: 3px; }
.cl-btn-dark { --btn-bg: var(--pc-navy); --btn-fg: var(--pc-cream); --btn-shc: rgba(252,252,252,.5); --off0: 4px; }
.cl-btn-on-navy { --btn-shc: var(--pc-cream); --off0: 3px; border: 2px solid var(--pc-cream); }
.cl-btn-sm { --off0: 3px; min-height: 40px; padding: 0 16px; border-width: 2px; font-size: .9375rem; }
.cl-btn-sm::after { content: ""; position: absolute; inset: -4px -2px; }
.cl-btn-block { display: flex; width: 100%; }
@media (max-width: 399px) { .cl-btn { white-space: normal; padding-inline: 18px; line-height: 1.2; } }
@media (hover: hover) {
  .cl-btn:hover { transform: translate(-1px, -1px); --off: calc(var(--off0) + 2px); }
  .cl-btn-secondary:hover { --btn-bg: var(--pc-cream); }
}
.cl-btn.cl-is-hover { transform: translate(-1px, -1px); --off: calc(var(--off0) + 2px); }
.cl-btn-secondary.cl-is-hover { --btn-bg: var(--pc-cream); }
.cl-btn:active, .cl-btn.cl-is-active { transform: translate(calc(var(--off0) - 1px), calc(var(--off0) - 1px)); --off: 1px; }
.cl-btn[disabled], .cl-btn[aria-disabled="true"], .cl-btn.cl-is-busy {
  --btn-bg: var(--pc-kraft-deep); --btn-fg: var(--pc-navy); box-shadow: none; transform: none; cursor: not-allowed;
}
.cl-btn.cl-is-busy { cursor: progress; }
.cl-btn-spinner { width: 22px; height: 22px; animation: pc-spin 1s linear infinite; }
@keyframes pc-spin { to { transform: rotate(1turn); } }

/* Chips, tags (§7.5) */
.cl-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: var(--line-thin); border-radius: var(--r-pill); background: var(--pc-cream); color: var(--pc-navy); box-shadow: var(--sh-sm);
  font: 700 var(--fs-label)/1.25 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
}
.cl-chip-planned, .cl-chip-price { background: var(--pc-lime); border-style: dashed; rotate: -3deg; }
.cl-chip-plan { background: var(--pc-blue); border-style: dashed; }
.cl-chip-prototype { background: var(--pc-pink-tint); border-color: var(--pc-pink); font-size: var(--fs-small); white-space: normal; }
.cl-chip-prelaunch { background: var(--pc-lime); border-color: var(--pc-cream); box-shadow: none; rotate: -3deg; }
.cl-chip-demo { background: var(--pc-navy); color: var(--pc-cream); box-shadow: none; }
.cl-chip-render { background: var(--pc-white); }
.cl-chip-spec { background: var(--pc-hero); white-space: normal; text-align: left; text-transform: none; }   /* "65 × 44.85 × 3.8 mm", never "MM" */
.cl-chip-reassure {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px;
  border: var(--line-thin); border-radius: var(--r-pill); background: var(--pc-cream); font: 800 .9375rem/1.3 var(--font-body);
}
.cl-chip-reassure .cl-doodle { width: 26px; height: 26px; }
.cl-tag {
  display: inline-block; padding: 4px 12px; border: var(--line-thin); border-radius: var(--r-pill);
  background: var(--pc-cream); color: var(--pc-navy); box-shadow: var(--sh-sm); rotate: -4deg;
  font: 700 var(--fs-label)/1.3 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
}
.cl-tag[data-colour="blue"] { background: var(--pc-blue); }
.cl-tag[data-colour="orange"] { background: var(--pc-orange); }
.cl-tag[data-colour="lime"] { background: var(--pc-lime); }

/* BOX 001 · HALLOWEEN sticker (hero ch01, Halloween scene, box summary card) */
.cl-hw-sticker {
  display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; min-height: 28px;
  padding: 3px 12px 3px 6px; border: 2px solid var(--pc-navy); border-radius: var(--r-pill);
  background: var(--pc-orange); color: var(--pc-navy); box-shadow: var(--sh-sm); rotate: -3deg;
  font: 700 var(--fs-label)/1.2 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
}
.cl-hw-sticker::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--pumpkin) center / contain no-repeat; }
.cl-hw-sticker::before { background-color: var(--pc-cream); border-radius: 50%; }
.cl-chip-ships { background: var(--pc-orange); border-style: dashed; rotate: -3deg; }

/* Pills */
.cl-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: var(--line-thin); border-radius: var(--r-pill); background: var(--pc-hero); box-shadow: var(--sh-sm);
  font: 600 .9375rem/1.25 var(--font-label);
}

/* Warning block (never tilted, no doodles) */
.cl-warning {
  display: flex; align-items: flex-start; gap: 12px; max-width: 40rem; padding: 12px 16px;
  border: var(--line); border-radius: var(--r-sm); background: var(--pc-cream); color: var(--pc-navy);
}
.cl-kraft .cl-warning { background: var(--pc-white); }
.cl-form-card .cl-warning { background: var(--pc-cream); }
.cl-warning-badge {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%;
  background: var(--pc-navy); color: var(--pc-cream); font: 700 1rem/1 var(--font-display);
}
.cl-warning-text { font: 700 .9375rem/1.45 var(--font-body); }
.cl-warning-text strong { font-weight: 800; }
.cl-warning-on-navy { background: transparent; color: var(--pc-cream); border: 2px solid var(--pc-cream); }
.cl-warning-on-navy .cl-warning-badge { background: var(--pc-cream); color: var(--pc-navy); }

/* Plasty + speech bubble */
.cl-plasty-say { display: flex; align-items: center; gap: 22px; }
.cl-plasty-mount { --plasty-w: 96px; flex: none; display: block; width: var(--plasty-w); aspect-ratio: 442 / 460; }
.cl-plasty-mount > svg, .cl-plasty-mount > img { display: block; width: 100%; height: 100%; }
.cl-bubble {
  --bubble-bg: var(--pc-cream);
  position: relative; max-width: 22rem; padding: 12px 18px; border: var(--line); border-radius: var(--r-wobble);
  background: var(--bubble-bg); color: var(--pc-navy); box-shadow: var(--sh-sm); font: 800 1rem/1.4 var(--font-body);
}
.cl-bubble::before, .cl-bubble::after { content: ""; position: absolute; top: 50%; border-style: solid; border-color: transparent; }
.cl-bubble::before { left: -16px; margin-top: -11px; border-width: 11px 16px 11px 0; border-right-color: var(--pc-navy); }
.cl-bubble::after { left: -10px; margin-top: -7px; border-width: 7px 11px 7px 0; border-right-color: var(--bubble-bg); }
.cl-proof .cl-bubble, .cl-faq .cl-bubble, .cl-mat .cl-bubble, .cl-how .cl-bubble { --bubble-bg: var(--pc-white); }

/* Section textures and edges (§7.9) */
.cl-kraft { background-color: var(--pc-kraft); background-image: var(--noise); }
.cl-mat {
  background-color: var(--pc-cream);
  background-image:
    linear-gradient(rgba(15,40,66,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(15,40,66,.14) 1px, transparent 1px),
    linear-gradient(rgba(15,40,66,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,40,66,.07) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.cl-on-navy { background-color: var(--pc-navy); color: var(--pc-cream); }
.cl-edge-corrugated { position: relative; }
.cl-edge-corrugated::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: radial-gradient(circle at 7px 12px, var(--pc-kraft) 7px, transparent 7.5px) 0 0 / 14px 12px repeat-x;
}
.cl-edge-wavy::before {
  content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 28V14C20 2 40 2 60 14S100 26 120 14V28Z' fill='%230F2842'/%3E%3C/svg%3E") 0 0 / 120px 28px repeat-x;
}

/* ═══ 4. GLOBAL CHROME ═══ */

/* Nav (§7.3) */
.cl-site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: var(--pc-navy); color: var(--pc-cream); padding-top: env(safe-area-inset-top); }
.cl-nav-bar {
  display: flex; align-items: center; gap: 14px; height: 70px;
  padding-inline: max(clamp(16px, 3vw, 40px), env(safe-area-inset-left)) max(clamp(16px, 3vw, 40px), env(safe-area-inset-right));
}
.cl-nav-logo { display: flex; align-items: center; flex: none; min-height: 44px; border-radius: 12px; }
.cl-nav-logo img { display: block; width: 104px; height: 60px; }
.cl-nav-links { margin-left: auto; }
.cl-nav-list { display: flex; align-items: center; gap: 2px; }
.cl-nav-link {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--pc-cream); text-decoration: none; font: 700 .9375rem/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase;
}
.cl-nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 3px; border-radius: 2px;
  background: var(--pc-lime); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fade) var(--ease-out);
}
.cl-nav-link:hover::after, .cl-nav-link[aria-current="true"]::after { transform: scaleX(1); }
.cl-nav-cta { min-height: 44px; margin-left: 10px; }
.cl-nav-cta-compact { min-height: 44px; padding: 0 16px; font-size: .875rem; margin-left: auto; }
.cl-nav-burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.cl-nav-burger-bar { display: block; width: 26px; height: 4px; border-radius: 2px; background: var(--pc-orange); }
.cl-nav-burger-bar:nth-child(2) { background: var(--pc-blue); }
.cl-nav-burger-bar:nth-child(3) { background: var(--pc-lime); }
.cl-nav-stripe { height: var(--stripe-h); background: var(--pc-navy); overflow: hidden; }
.cl-nav-stripe-fill {
  height: 100%; transform-origin: left; transform: scaleX(var(--progress, 1));
  /* one unbroken stripe (owner QA 13 Sep 2026): no navy gaps between the four colours */
  background: linear-gradient(90deg, #FF7308 0 25%, #00A3E3 25% 50%, #74D011 50% 75%, #F3227C 75% 100%);
}
@media (min-width: 1024px) { .cl-nav-cta-compact, .cl-nav-burger { display: none; } }
@media (min-width: 1024px) and (max-width: 1239px) {
  /* five links + CTA: tighten so the bar never wraps or overflows */
  .cl-nav-bar { gap: 10px; }
  .cl-nav-link { padding: 0 8px; font-size: .875rem; letter-spacing: .03em; }
  .cl-nav-link::after { left: 8px; right: 8px; }
  .cl-nav-cta { margin-left: 4px; padding: 0 18px; font-size: .9375rem; }
}
@media (min-width: 1024px) and (max-width: 1119px) { .cl-chip-prelaunch { padding-inline: 8px; font-size: .75rem; } .cl-nav-logo img { width: 94px; height: 54px; } }
@media (max-width: 1023px) {
  .cl-nav-bar { height: 62px; gap: 8px; }
  .cl-nav-logo img { width: 94px; height: 54px; }
  .cl-chip-prelaunch, .cl-nav-links, .cl-nav-cta { display: none; }
}
@media (max-width: 339px) { .cl-nav-cta-compact { display: none; } .cl-nav-burger { margin-left: auto; } }

/* Mobile menu (§7.3) */
.cl-site-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; gap: 22px;
  padding: calc(var(--nav-h) + 16px) var(--gutter) max(24px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform var(--dur-menu) var(--ease-out);
}
.cl-site-menu.cl-is-open { transform: none; }
.cl-site-menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--nav-h) - var(--stripe-h)); height: var(--stripe-h); background: linear-gradient(90deg, #FF7308 0 25%, #00A3E3 25% 50%, #74D011 50% 75%, #F3227C 75% 100%); }
.cl-menu-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 9px); right: max(clamp(16px, 3vw, 40px), env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.cl-menu-close-bar { position: absolute; left: 9px; top: 20px; width: 26px; height: 4px; border-radius: 2px; background: var(--pc-cream); rotate: 45deg; }
.cl-menu-close-bar + .cl-menu-close-bar { rotate: -45deg; }
/* the brand stays visible while the full-screen menu is open (TPL 02 §1): same spot as the nav logo */
.cl-menu-logo { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 4px); left: max(clamp(16px, 3vw, 40px), env(safe-area-inset-left)); }
.cl-menu-links { display: flex; flex-direction: column; }
.cl-menu-link {
  display: flex; align-items: center; gap: 14px; min-height: 60px; border-bottom: 2px solid rgba(243,243,234,.14);
  color: var(--pc-cream); text-decoration: none; font: 700 1.75rem/1.1 var(--font-display);
}
.cl-menu-star { width: 26px; height: 26px; }
.cl-menu-links > li:nth-child(4n+1) .cl-menu-star { --d: var(--pc-orange); }
.cl-menu-links > li:nth-child(4n+2) .cl-menu-star { --d: var(--pc-blue); }
.cl-menu-links > li:nth-child(4n+3) .cl-menu-star { --d: var(--pc-lime); }
.cl-menu-links > li:nth-child(4n) .cl-menu-star { --d: var(--pc-pink); }
.cl-menu-cta { min-height: 52px; margin-top: 6px; }
.cl-menu-micro { margin-top: -10px; color: var(--pc-cream-soft); font-size: var(--fs-small); text-align: center; }
.cl-menu-plasty { margin-top: auto; padding-top: 8px; }

/* Box 001: the Halloween box (owner change 13 Sep 2026). Navy night ground, orange pumpkins, lime slime.
   Brand palette only; the float animation runs only without reduced motion. */
.cl-halloween { overflow: hidden; overflow: clip; padding-top: calc(var(--section-pad-y) + 16px); }
.cl-halloween::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 32px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='32'%3E%3Cpath d='M0 0H160V9c-7 0-9 2.2-10 7.4-1.4 7.2-9.2 7.2-10.6 0C138.4 11.2 136.4 9 129 9H100c-6.4 0-8.4 3.4-9.4 10.6-1.2 8.8-10.4 8.8-11.6 0C78 12.4 76 9 69.6 9H47c-6 0-7.6 2.2-8.6 6.2-1.2 4.6-7.4 4.6-8.6 0C28.8 11.2 27.2 9 21 9H0Z' fill='%2374D011'/%3E%3Cpath d='M0 1.5H160' stroke='%230F2842' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 160px 32px repeat-x;
}
.cl-halloween::after {
  content: ""; position: absolute; top: 0; right: 0; width: 55%; height: 70%; pointer-events: none;
  background: radial-gradient(rgba(243,243,234,.16) 1.5px, transparent 1.7px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(225deg, #000, transparent 60%); mask-image: linear-gradient(225deg, #000, transparent 60%);
}
.cl-halloween > .cl-container { position: relative; z-index: 1; }
.cl-halloween-grid { display: grid; gap: 40px; }
.cl-halloween-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cl-halloween-text > * { max-width: 100%; }   /* text spacing / narrow columns: nothing slides under the scene */
.cl-halloween .cl-section-head { margin-bottom: 26px; }
.cl-halloween .cl-eyebrow { color: var(--pc-lime); }
.cl-halloween .cl-section-head .cl-eyebrow::before { border-color: var(--pc-cream); }
.cl-halloween .cl-chip-ships { box-shadow: 3px 3px 0 var(--pc-cream); }
.cl-halloween .cl-lead { color: var(--pc-cream); }
/* Navy text on a navy ground: the brush covers the full glyph height. It's a per-line background (not ::before)
   at every width, so "the Halloween box." can wrap in a narrow column or with WCAG text spacing and still has a brush. */
.cl-halloween .cl-swash {
  display: inline-block; max-width: 100%; vertical-align: top;
  color: var(--pc-navy); white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='1 4 98 0 100 26 96 50 100 76 97 100 3 97 0 76 3 52 0 28' fill='%23FF7308'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cl-halloween .cl-swash::before { display: none; }
.cl-hw-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.cl-hw-chip {
  padding: 6px 14px; background: var(--pc-cream); box-shadow: 3px 3px 0 var(--pc-blue);
  font: 700 .9375rem/1.25 var(--font-label); letter-spacing: .01em; text-transform: none; white-space: normal;
}
.cl-hw-chip:nth-child(1) { background: var(--pc-orange); box-shadow: 3px 3px 0 var(--pc-cream); rotate: -2deg; }
.cl-hw-chip:nth-child(2) { background: var(--pc-lime); box-shadow: 0 0 0 5px rgba(116,208,17,.25), 3px 3px 0 var(--pc-cream); rotate: 1.5deg; }
.cl-hw-note { margin-top: 24px; padding-left: 14px; border-left: 4px solid var(--pc-lime); max-width: 50ch; color: var(--pc-cream-soft); font: 700 .9375rem/1.5 var(--font-body); }
.cl-hw-cta { margin-top: 28px; }
.cl-halloween .cl-btn-primary { --btn-shc: var(--pc-lime); border-color: var(--pc-cream); }

/* the doodle scene */
.cl-hw-scene { position: relative; width: 100%; max-width: 620px; margin: 0; justify-self: center; aspect-ratio: 6 / 5; }
.cl-hw-sky {
  position: absolute; inset: 0 0 7% 0; overflow: hidden; border: 3px solid var(--pc-cream); border-radius: 44px 44px 28px 28px;
  background:
    radial-gradient(circle at 50% 70%, rgba(0,163,227,.36), rgba(0,163,227,.1) 45%, rgba(0,163,227,0) 70%),
    radial-gradient(rgba(243,243,234,.55) 1.3px, transparent 1.8px) 9px 7px / 34px 34px,
    var(--pc-navy);
  box-shadow: 8px 8px 0 var(--pc-blue);
}
.cl-hw-sky .cl-doodle, .cl-hw-float, .cl-hw-pumpkins .cl-doodle { position: absolute; height: auto; aspect-ratio: 1; }
.cl-hw-float > .cl-doodle { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; }
.cl-hw-web { top: 0; left: 0; width: 26%; }   /* hangs from the rounded corner; the sky clips its outer threads */
.cl-hw-moon { top: 7%; right: 8%; width: 16%; }
.cl-hw-star { width: 4.5%; }
.cl-hw-star-1 { top: 31%; left: 31%; rotate: 12deg; }
.cl-hw-star-2 { top: 11%; left: 60%; width: 4%; rotate: -10deg; }
.cl-hw-star-3 { top: 45%; right: 26%; width: 3.5%; }
.cl-hw-star-4 { top: 27%; right: 4%; width: 3.2%; }
.cl-hw-float[class*="hw-bat"] { aspect-ratio: 8 / 5; --ds: var(--pc-cream); }
.cl-hw-float[class*="hw-bat"] > .cl-doodle { aspect-ratio: 8 / 5; }
.cl-hw-bat-1 { top: 23%; left: 7%; width: 16%; rotate: -10deg; }
.cl-hw-bat-2 { top: 8%; left: 38%; width: 12%; rotate: 8deg; }
.cl-hw-bat-3 { top: 26%; right: 30%; width: 9%; rotate: -4deg; }
.cl-hw-ghost-1 { top: 33%; right: 4%; width: 17%; rotate: 8deg; }
.cl-hw-ghost-2 { top: 47%; left: 3%; width: 13%; rotate: -10deg; }
.cl-hw-glow::before {
  content: ""; position: absolute; inset: -40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(116,208,17,.6) 0, rgba(116,208,17,.26) 36%, rgba(116,208,17,0) 66%);
}
.cl-hw-slime { position: absolute; left: -2px; right: -2px; bottom: -2px; width: calc(100% + 4px); height: 25%; }
.cl-hw-box {
  position: absolute; left: 50%; bottom: 13%; z-index: 2; width: 58%; translate: -50% 0; rotate: -3deg;
  filter: drop-shadow(6px 7px 0 rgba(15,40,66,.85));
}
.cl-halloween-sticker { position: absolute; z-index: 3; left: 24%; top: 34%; rotate: -6deg; box-shadow: 3px 3px 0 var(--pc-cream); }
.cl-hw-pumpkins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cl-hw-pumpkin-1 { left: 3%; bottom: 1%; width: 20%; rotate: -8deg; }
.cl-hw-pumpkin-2 { right: 4%; bottom: 3%; width: 16%; rotate: 7deg; }
.cl-hw-pumpkin-3 { left: 25%; bottom: 0; width: 10%; rotate: 4deg; }
.cl-halloween-plasty { justify-self: start; position: relative; z-index: 4; }
.cl-halloween-plasty .cl-plasty-mount { --plasty-w: 88px; padding: 8px; border-radius: 50%; background: var(--pc-cream); box-shadow: 4px 4px 0 var(--pc-orange); box-sizing: content-box; }
.cl-halloween-plasty .cl-plasty-mount:not([data-plasty-mounted]) { visibility: hidden; }   /* no JS: no empty disc */
@media (max-width: 639px) {
  .cl-hw-sky { border-radius: 32px 32px 22px 22px; box-shadow: 6px 6px 0 var(--pc-blue); }
  .cl-halloween-sticker { top: 31%; left: 18%; }
}
@media (min-width: 1024px) {
  .cl-halloween-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
  .cl-halloween-text { grid-row: 1 / span 2; }
  .cl-hw-scene { grid-column: 2; }
  .cl-halloween-plasty { grid-column: 2; justify-self: start; margin: -84px 0 0 -28px; }   /* anchored on the scene's bottom-left corner */
}
/* Plays twice (under 5 s) each time the scene comes into view (fx.js toggles .is-playing), then rests: nothing loops (§7.10 rule 4, WCAG 2.2.2) */
@media (prefers-reduced-motion: no-preference) {
  .cl-hw-scene.cl-is-playing .cl-hw-float { animation: pc-hw-float 2.4s ease-in-out 2; }
  .cl-hw-scene.cl-is-playing .cl-hw-bat-2 { animation-duration: 2.1s; animation-delay: -.5s; }
  .cl-hw-scene.cl-is-playing .cl-hw-bat-3 { animation-duration: 2.5s; animation-delay: -1s; }
  .cl-hw-scene.cl-is-playing .cl-hw-ghost-1 { animation-duration: 2.5s; animation-delay: -.3s; }
  .cl-hw-scene.cl-is-playing .cl-hw-ghost-2 { animation-duration: 2.2s; animation-delay: -1.2s; }
  .cl-hw-scene.cl-is-playing .cl-hw-glow::before { animation: pc-hw-glow 1.9s ease-in-out 2; }
}
@keyframes pc-hw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes pc-hw-glow { 0%, 100% { opacity: .7; scale: .94; } 50% { opacity: 1; scale: 1.04; } }

/* "Coming up" drop calendar: sticker tickets */
.cl-drops { margin-top: clamp(56px, 7vw, 96px); }
.cl-drops-title { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: var(--fs-h3); }
.cl-drops-title::before { content: ""; flex: none; width: 34px; height: 8px; border-radius: 4px; border: 2px solid var(--pc-cream); background: linear-gradient(90deg, var(--pc-orange) 34%, var(--pc-lime) 0 67%, var(--pc-pink) 0); }
.cl-drop-list { display: grid; gap: 26px; }
.cl-drop-card { position: relative; filter: drop-shadow(5px 5px 0 var(--pc-blue)); }
.cl-drop-card[data-current="true"] { filter: drop-shadow(5px 5px 0 var(--pc-lime)); rotate: -1.5deg; }
.cl-drop-card:nth-of-type(3) { rotate: 1deg; }
.cl-drop-ticket {
  --stub: 92px;
  display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); height: 100%; min-height: 116px;
  background: var(--pc-cream); color: var(--pc-navy); border-radius: var(--r-md);
  -webkit-mask: radial-gradient(circle 11px at var(--stub) 0, #0000 96%, #000) 0 0 / 100% 51% no-repeat, radial-gradient(circle 11px at var(--stub) 100%, #0000 96%, #000) 0 100% / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at var(--stub) 0, #0000 96%, #000) 0 0 / 100% 51% no-repeat, radial-gradient(circle 11px at var(--stub) 100%, #0000 96%, #000) 0 100% / 100% 51% no-repeat;
}
.cl-drop-card[data-current="true"] .cl-drop-ticket { background: var(--pc-orange); }
.cl-drop-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px;
  border-right: 3px dashed rgba(15,40,66,.45);
}
.cl-drop-doodle { width: 46px; height: 46px; }
.cl-drop-box { font: 700 var(--fs-label)/1.1 var(--font-label); letter-spacing: var(--track-label); white-space: nowrap; }
.cl-drop-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px 16px 20px; }
.cl-drop-name { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); line-height: 1.05; }
.cl-drop-line { font: 700 .9375rem/1.4 var(--font-body); }
.cl-drop-tag {
  position: absolute; top: -14px; right: 16px; z-index: 1; padding: 4px 12px; rotate: 4deg;
  background: var(--pc-lime); color: var(--pc-navy); border: 2px solid var(--pc-navy); border-radius: var(--r-pill);
  font: 700 var(--fs-label)/1.2 var(--font-label); letter-spacing: var(--track-label);
}
.cl-drops-caption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; text-align: center; color: var(--pc-cream); font: 800 var(--fs-body)/1.4 var(--font-body); }
.cl-drops-caption::before, .cl-drops-caption::after { content: ""; flex: none; width: 28px; height: 3px; border-radius: 2px; background: var(--pc-lime); }
@media (min-width: 768px) {
  .cl-drop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .cl-drop-ticket { --stub: 84px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cl-drop-ticket { grid-template-columns: 1fr; grid-template-rows: auto 1fr; --stub: 0px; mask: none; -webkit-mask: none; }
  .cl-drop-stub { flex-direction: row; justify-content: flex-start; padding: 14px 16px 10px; border-right: 0; border-bottom: 3px dashed rgba(15,40,66,.45); }
  .cl-drop-doodle { width: 36px; height: 36px; }
  .cl-drop-body { padding: 12px 16px 16px; }
}

/* Subscribe now (§6.2) */
.cl-subscribe { overflow-x: clip; padding-top: clamp(104px, 11vw, 150px); }
.cl-subscribe::before, .cl-subscribe::after {
  content: ""; position: absolute; top: 0; width: 44%; height: 56px; background: var(--pc-kraft-deep); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.cl-subscribe::before { left: 0; }
.cl-subscribe::after { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%); }
.cl-subscribe-tape {
  position: absolute; left: -5%; right: -5%; top: 30px; z-index: 2; padding: 10px 0; overflow: hidden;
  background: var(--pc-blue); border-block: 3px solid var(--pc-navy); rotate: -1.5deg; text-align: center; white-space: nowrap;
  font: 700 clamp(.875rem, .8rem + .4vw, 1.125rem)/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase;
}
.cl-subscribe-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; }
.cl-subscribe-aside { display: contents; }
.cl-subscribe-head { grid-column: 1; grid-row: 1; }
.cl-subscribe-box { grid-column: 2; grid-row: 1; align-self: start; width: 160px; margin-top: 18px; }
#cl-subscribe-card { grid-column: 1 / -1; grid-row: 2; margin-top: 32px; }
.cl-subscribe-next { grid-column: 1 / -1; grid-row: 3; margin-top: 40px; }
.cl-subscribe-plasty { grid-column: 1 / -1; grid-row: 4; margin-top: 28px; }
.cl-subscribe-head .cl-section-title { margin-top: 10px; }
.cl-subscribe-head .cl-subtitle { margin-top: 8px; }
.cl-subscribe-head .cl-lead { margin-top: 14px; }
.cl-reassure-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cl-subscribe-box img { display: block; width: 100%; rotate: 4deg; filter: drop-shadow(6px 6px 0 #0F2842); }
.cl-box-sticker {
  width: max-content; max-width: 100%; margin: -10px auto 0; position: relative; padding: 4px 10px;
  background: var(--pc-cream); border: var(--line-thin); border-radius: var(--r-pill); box-shadow: var(--sh-sm); rotate: -3deg;
  font: 700 var(--fs-label)/1.25 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.cl-next-title { font-size: var(--fs-h3); margin-bottom: 16px; }
.cl-next-steps { display: grid; gap: 14px; counter-reset: next; }
.cl-next-step { position: relative; min-height: 40px; padding: 6px 0 0 56px; font-weight: 700; counter-increment: next; }
.cl-next-step::before {
  content: counter(next); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px;
  border: var(--line); border-radius: 50%; background: var(--pc-orange); box-shadow: var(--sh-sm); font: 700 1.125rem/1 var(--font-display);
}
.cl-next-step:nth-child(2)::before { background: var(--pc-blue); }
.cl-next-step:nth-child(3)::before { background: var(--pc-lime); }
@media (max-width: 767px) {
  .cl-subscribe-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; }
  .cl-subscribe-head { grid-column: 1 / -1; }
  .cl-subscribe-box { grid-column: 1; grid-row: 4; width: 96px; margin-top: 28px; align-self: center; }
  .cl-subscribe-plasty { grid-column: 2; grid-row: 4; align-self: center; }
  .cl-subscribe-plasty .cl-plasty-mount { --plasty-w: 64px; }
  .cl-subscribe-plasty.cl-plasty-say { gap: 18px; }
  .cl-box-sticker { display: none; }
  #cl-subscribe-card { margin-inline: calc(var(--gutter) * -1 + 16px); }
}
@media (min-width: 768px) {
  .cl-subscribe {
    background-image: linear-gradient(180deg, var(--stripe)), linear-gradient(180deg, var(--stripe)), var(--noise);
    background-position: 0 0, 100% 0, 0 0; background-size: 10px 100%, 10px 100%, auto; background-repeat: no-repeat, no-repeat, repeat;
  }
}
@media (min-width: 1024px) {
  .cl-subscribe-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .cl-subscribe-aside { display: block; grid-column: 1 / span 5; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 24px); }
  #cl-subscribe-card { grid-column: 6 / -1; grid-row: 1; margin-top: 0; }
  .cl-subscribe-box { width: min(100%, 360px); margin: 36px 0 0 12px; }
  .cl-subscribe-box .cl-box-sticker { margin-top: -18px; }
  .cl-subscribe-next, .cl-subscribe-plasty { margin-top: 36px; }
}

/* Form card: the packing slip (never tilted) */
.cl-form-card {
  position: relative; padding: clamp(20px, 3vw, 40px); background: var(--pc-white);
  border: var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.cl-form-card::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: -6px; height: 12px;
  background: radial-gradient(circle, var(--pc-kraft-deep) 4px, transparent 4.5px) 0 0 / 16px 12px repeat-x;
}
.cl-demo-banner {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; padding: 14px 16px;
  background: var(--pc-blue-tint); border: var(--line-cut); border-radius: var(--r-md);
}
.cl-demo-banner-icon { width: 28px; height: 28px; margin-top: 1px; }
.cl-demo-banner-text { font-size: .9375rem; line-height: 1.5; }
.cl-demo-banner-text .cl-chip { margin-right: 4px; vertical-align: 1px; }
.cl-demo-banner-text strong { font-weight: 800; }
.cl-error-summary, .cl-form-alert {
  margin-bottom: 24px; padding: 16px 20px; background: var(--pc-pink-tint); border: var(--line); border-radius: var(--r-md);
}
.cl-error-summary-title, .cl-form-alert-title { font-size: 1.25rem; }
.cl-error-summary-list { margin-top: 8px; display: grid; gap: 4px; }
.cl-error-summary-list a { font-weight: 800; }
.cl-form-alert { margin: 24px 0 0; }
.cl-form-alert-body { margin-top: 6px; }
.cl-form-alert-retry { margin-top: 14px; }
.cl-form-alert-extra { margin-top: 10px; font-size: var(--fs-small); }
.cl-subscribe-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-subscribe-form > fieldset + fieldset { margin-top: 32px; padding-top: 28px; border-top: 2px dashed rgba(15,40,66,.35); }
.cl-fs-legend { float: left; width: 100%; margin: 0 0 18px; padding: 0; font: 700 var(--fs-h3)/1.15 var(--font-display); }
.cl-fs-legend + *, .cl-checks > legend + * { clear: both; }
.cl-req, .cl-opt { font: 700 var(--fs-small)/1.3 var(--font-body); color: var(--pc-ink-soft); white-space: nowrap; }
.cl-fs-legend .cl-req, .cl-fs-legend .cl-opt { font-size: .9375rem; }

/* Box summary card: the one box, not a form field (owner change 13 Sep 2026) */
.cl-box-summary {
  position: relative; margin: 6px 0 32px; padding: 20px clamp(16px, 2.4vw, 26px) 22px;
  background-color: var(--pc-kraft); background-image: var(--noise); border: 2px dashed var(--pc-navy); border-radius: var(--r-lg);
  container-type: inline-size;
}
.cl-box-summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cl-box-summary-sticker { rotate: 4deg; }
.cl-box-summary-main { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.cl-box-summary-thumb { flex: none; width: clamp(84px, 22%, 128px); rotate: -5deg; filter: drop-shadow(4px 4px 0 var(--pc-navy)); }
.cl-box-summary-name { font-size: var(--fs-h3); line-height: 1.1; }
.cl-box-summary-ages { margin-top: 10px; line-height: 1; }
.cl-box-summary-price { margin-top: 18px; padding: 14px 0; border-block: 2px dashed rgba(15,40,66,.3); }
.cl-box-summary-beta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--font-display); }
.cl-box-summary-beta .cl-chip { rotate: -3deg; }
.cl-box-summary-then { margin-top: 6px; font: 800 1rem/1.4 var(--font-body); }
.cl-box-summary-includes { display: grid; gap: 8px 18px; margin-top: 16px; }
.cl-box-summary-includes li { display: flex; align-items: flex-start; gap: 9px; font: 700 .9375rem/1.4 var(--font-body); }
.cl-box-summary-includes .cl-doodle { width: 22px; height: 22px; margin-top: -1px; }
.cl-box-summary-ships {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin-top: 18px; padding: 5px 16px 5px 6px;
  background: var(--pc-navy); color: var(--pc-cream); border-radius: var(--r-pill); font: 700 .9375rem/1.3 var(--font-label); letter-spacing: .02em;
}
.cl-box-summary-ships .cl-doodle { width: 30px; height: 30px; }
.cl-box-summary-fine { display: grid; gap: 12px; margin-top: 18px; }
@container (min-width: 470px) { .cl-box-summary-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-terms-line { font-size: var(--fs-small); color: var(--pc-ink-soft); }


/* Adapt the imported sections to the combined site's unchanged hero geometry. */
.cl-section { --section-pad-y: clamp(32px, 4vw, 56px); }
.updates-section { padding-block: clamp(32px, 4vw, 56px); }
.updates-section h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.15; margin-block: 16px !important; }
.updates-section .newsletter-signup > p { margin-bottom: 16px; }
.updates-section .newsletter-signup .cl-btn { background: var(--pc-orange); border-color: var(--pc-navy); }
.claude-scope { font: 400 1.0625rem/1.6 var(--font-body); color: var(--pc-navy); }
.claude-scope.cl-on-navy { color: var(--pc-cream); }
.claude-scope :is(h2,h3,h4) { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: normal; }
.claude-scope :is(ul,ol) { list-style: none; padding: 0; margin: 0; }
.claude-scope figure { margin: 0; }
:where(.claude-scope .cl-doodle) { width: 1.5em; height: 1.5em; flex: none; }
.claude-scope .cl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.claude-scope a:focus-visible, .claude-scope button:focus-visible { outline: 3px solid var(--pc-blue); outline-offset: 5px; }
.claude-scope.cl-on-navy :focus-visible { outline-color: var(--pc-cream); }
.cl-site-nav { height: var(--header-height); padding-top: 0; }
.cl-site-nav .cl-nav-bar { height: calc(var(--header-height) - 6px); }
.cl-site-nav .cl-chip-prelaunch { white-space: nowrap; }
.cl-site-nav .cl-nav-link { font-size: .875rem; padding-inline: 10px; letter-spacing: .02em; }
.cl-site-nav .cl-nav-cta { font-size: .9375rem; padding-inline: 20px; }
.cl-combined-menu { background: var(--pc-navy); color: var(--pc-cream); border: 0; }
.cl-combined-menu nav a { font-family: var(--font-display); letter-spacing: normal; }
.cl-combined-menu .button-dark { background: var(--pc-orange); color: var(--pc-navy); border-radius: 999px; border: 2px solid var(--pc-cream); box-shadow: 3px 3px var(--pc-cream); }
.cl-combined-menu .icon-button { background: var(--pc-cream); color: var(--pc-navy); }
.cl-halloween .cl-lead { margin-top: 16px; }
.cl-halloween .cl-section-title { margin-top: 14px; }
.cl-halloween .cl-hw-note { margin-top: 24px; }
.cl-halloween .cl-drops { scroll-margin-top: calc(var(--header-height) + 30px); }
.cl-halloween .cl-drops-title { margin-bottom: 26px; }
.cl-halloween .cl-drop-name { font-size: 1.2rem; }
.cl-halloween .cl-hw-scene .cl-doodle { height: auto; }
.cl-halloween .cl-hw-scene .cl-hw-web { width: 26%; }
.cl-halloween .cl-hw-scene .cl-hw-moon { width: 16%; }
.cl-halloween .cl-hw-float > .cl-doodle { width: 100%; }
.cl-subscribe .cl-reassure-chips { margin-top: 20px; }
.cl-subscribe .cl-subscribe-box { margin-top: 18px; }
.cl-subscribe .cl-next-title { margin-bottom: 16px; }
.cl-subscribe .cl-box-summary-includes { margin-top: 16px; }
.cl-subscribe .cl-box-summary-name { line-height: 1.15; }
.cl-subscribe .cl-box-summary-ages { margin-top: 10px; }
.cl-subscribe .cl-box-summary-then { margin-top: 8px; }
.cl-subscribe .cl-subscription-terms { margin-top: 18px; }
.cl-subscribe .cl-include-tick { flex: 0 0 22px; font-size: 1.15rem; line-height: 1.2; font-weight: 800; }
.cl-checkout-panel { display: grid; gap: 16px; }
.cl-checkout-panel h3 { font-size: 1.6rem; line-height: 1.15; }
.cl-checkout-panel .cl-btn { margin-top: 6px; }
.cl-checkout-panel .cl-terms-line a { text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.cl-checkout-security { text-align: center; font-size: .875rem; font-weight: 800; }
.inline-checkout { min-width: 0; }
.inline-checkout iframe { display: block; width: 100%; min-width: 0; border: 0; background: transparent; color-scheme: light; }
.inline-checkout > p a { text-decoration: underline; }
.cl-delivered-offer { margin-top: 28px; border: 3px solid var(--pc-navy); border-radius: 20px; overflow: hidden; background: var(--pc-white); box-shadow: 5px 5px var(--pc-navy); }
.cl-delivery-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 18px; background: var(--pc-lime); border-bottom: 3px solid var(--pc-navy); font: 700 clamp(18px, 1.7vw, 24px)/1.2 var(--font-label); letter-spacing: .03em; }
.cl-delivery-banner span { font-size: 13px; }
.cl-delivered-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; padding: 20px 20px 8px; }
.cl-delivered-price strong { font: 700 clamp(44px, 4.5vw, 64px)/1 var(--font-display); letter-spacing: -.03em; }
.cl-delivered-price > span { font: 800 16px/1.2 var(--font-body); }
.cl-delivered-terms { padding: 4px 20px 20px; font-size: 16px; line-height: 1.5; }
@media (min-width: 1024px) {
  .cl-subscribe .cl-subscribe-box { margin: 36px 0 0 12px; }
  .cl-subscribe .cl-subscribe-aside { position: static; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .cl-site-nav .cl-chip-prelaunch { display: none; } }
@media (max-width: 767px) {
  .cl-subscribe .cl-subscribe-box { margin-top: 28px; }
  .cl-subscribe .cl-bubble { padding: 10px 12px; font-size: .875rem; }
  .cl-subscribe .cl-subscribe-plasty { gap: 12px; }
  .cl-subscribe .cl-box-summary-main { gap: 10px; }
}

/* Claude footer with oversized PLASTIC lettering cropped at the page edge. */
.cl-site-footer {
  position: relative; display: flex; flex-direction: column;
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: 0;
}
.cl-site-footer > .cl-container { flex: none; }
.cl-footer-top { display: grid; gap: 40px; }
.cl-footer-tagline { font: 700 var(--fs-h3)/1.15 var(--font-display); max-width: 14ch; }
.cl-footer-cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.cl-footer-col-title { font: 700 var(--fs-label)/1.3 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--pc-lime); margin-bottom: 6px; }
.cl-footer-link { display: flex; align-items: center; min-height: 44px; color: var(--pc-cream); text-decoration: none; font: 700 1rem/1.3 var(--font-body); }
.cl-footer-link:hover { text-decoration: underline 2px; text-underline-offset: 4px; text-decoration-color: var(--pc-orange); }
.cl-footer-social { margin-top: 4px; }
.cl-footer-bottom { display: grid; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 2px solid rgba(243,243,234,.18); }
.cl-footer-status { display: grid; gap: 6px; }
.cl-footer-status-line { font-size: var(--fs-small); color: var(--pc-cream-soft); max-width: 72ch; }
.cl-footer-legal { font: 700 var(--fs-small)/1.4 var(--font-label); letter-spacing: .04em; }
.cl-footer-contact { font-size: var(--fs-small); }
.cl-footer-wordmark { flex: none; display: block; margin-top: 16px; aspect-ratio: 6.35 / 1; overflow: hidden; }
.cl-footer-wordmark img { display: block; width: 100%; height: auto; margin: 0; }
@media (min-width: 340px) {
  .cl-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .cl-footer-col:first-child { grid-row: span 2; }
}
@media (max-width: 1023px) { .cl-footer-top { gap: 28px; } .cl-footer-cols { row-gap: 20px; } }
@media (min-width: 1024px) {
  .cl-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); align-items: start; column-gap: 40px; }
  .cl-footer-cols { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .cl-footer-col:first-child { grid-row: auto; }
  .cl-footer-col:first-child .cl-footer-links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 32px; }
  .cl-footer-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 48px; align-items: start; }
  .cl-footer-bottom > .cl-warning { grid-row: 1 / span 3; }
}
/* No sticky-bar reserve under the footer: nav.js hides the bar whenever the footer is on screen. */


.cl-site-footer .cl-footer-col-title { margin-bottom: 6px; font-family: var(--font-label); font-size: .875rem; line-height: 1.3; letter-spacing: .08em; }
.cl-site-footer .cl-footer-tagline { font-size: clamp(28px, 3vw, 44px); max-width: 14ch; }
.cl-site-footer .cl-footer-contact a { text-underline-offset: 4px; }
@media (max-width: 599px) { .cl-site-footer .cl-footer-cols { grid-template-columns: 1fr 1fr; column-gap: 20px; } .cl-site-footer .cl-footer-col:last-child { grid-column: 1 / -1; } }

/* Shared support-page layout; public content, accounts and checkout keep their behaviour. */
:root { --header-height: 88px; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-padding-top: 110px; }
body.pc-secondary { margin: 0; padding-top: var(--header-height); background: #f3f3ea; color: #0f2842; font: 400 17px/1.65 Nunito,Arial,sans-serif; }
.pc-secondary a { color: inherit; }
.pc-secondary .cl-site-nav { display: block; padding: 0; margin: 0; border: 0; }
.pc-secondary .cl-site-nav :is(ul,li,span) { margin-block: 0; }
.pc-secondary :is(.cl-site-nav,.cl-site-footer) ul { list-style: none; padding: 0; }
.pc-secondary :is(.cl-site-nav,.cl-site-footer) li { margin: 0; }
.pc-secondary :is(.cl-site-nav,.cl-site-footer) li::before { content: none; }
.pc-secondary .cl-site-nav nav { font-size: inherit; }
.pc-secondary .cl-site-nav a { letter-spacing: normal; }
.pc-secondary .cl-site-nav .cl-btn { color: #0f2842; }
.pc-secondary .cl-nav-logo img { max-width: none; }
.pc-secondary .cl-site-footer { text-align: left; padding-inline: 0; margin: 0; letter-spacing: normal; }
.pc-secondary .cl-site-footer :is(p,h2) { margin: 0; }
.pc-secondary .cl-site-footer a { padding: 0; }
.pc-secondary .cl-footer-cols { margin: 0; max-width: none; }
.pc-secondary .cl-site-footer .cl-footer-col-title { margin-bottom: 6px; }
.pc-secondary .cl-footer-wordmark { text-decoration: none; }
.pc-secondary .cl-site-footer nav { font-size: inherit; }
.pc-secondary .cl-warning p { line-height: 1.5; }
.pc-secondary .cl-footer-contact { overflow-wrap: anywhere; }
.pc-secondary main { width: min(100% - 2 * clamp(20px,5vw,72px), 1240px); padding: 0; margin: clamp(32px,4vw,56px) auto; min-width: 0; }
.pc-secondary.pc-policy main, .pc-secondary main.account-main, .pc-secondary main.manage { max-width: 880px; }
.pc-secondary main :is(h1,h2,h3), .pc-secondary main .price { font-family: DynaPuff,Arial,sans-serif; letter-spacing: normal; color: #0f2842; }
.pc-secondary main h1 { font-size: clamp(32px,4vw,56px); line-height: 1.12; margin: 12px 0 24px; }
.pc-secondary main h2 { font-size: clamp(22px,2.3vw,30px); line-height: 1.2; }
.pc-secondary main h3 { font-size: 21px; line-height: 1.3; }
.pc-secondary main :is(p,li) { overflow-wrap: anywhere; }
.pc-secondary main .eyebrow { font: 700 14px/1.3 Fredoka,Arial,sans-serif; letter-spacing: .08em; }
.pc-secondary main :is(.small,.meta,.note) { font-size: 14px; color: #3b4f66; }
.pc-secondary main .intro { font-size: 20px; }
.pc-secondary main :is(.panel,.notice,.dispatch) { border: 2px solid #0f2842; border-radius: 20px; box-shadow: 4px 4px #0f2842; padding: clamp(20px,3vw,32px); }
.pc-secondary main .panel { background: white; }
.pc-secondary main .notice { background: #d9f0fa; }
.pc-secondary main .dispatch { background: #efe4d3; }
.pc-secondary main :is(input,select,textarea) { font: inherit; font-size: 16px; color: #0f2842; border: 2px solid #82909b; border-radius: 9px; }
.pc-secondary main label { font-size: 16px; font-weight: 800; }
.pc-secondary main .consent { font-size: 14px; }
.pc-secondary main :is(.button,button:not(.secondary)) { background: #ff7308; color: #0f2842; border: 2px solid #0f2842; border-radius: 99px; box-shadow: 3px 3px #0f2842; font: 700 17px/1.3 Fredoka,Arial,sans-serif; min-height: 48px; }
.pc-secondary main .cancel-confirm .button { background: #853634; color: white; }
.pc-secondary main .secondary { font-family: Nunito,Arial,sans-serif; }
.pc-secondary main .account-nav a { border: 2px solid #0f2842; background: #fff; }
.pc-secondary main :focus-visible { outline: 3px solid #00a3e3; outline-offset: 3px; }
.pc-secondary main [id] { scroll-margin-top: 110px; }
.pc-secondary-menu { display: none; margin-left: 0; }
.pc-secondary-menu > summary { list-style: none; }
.pc-secondary-menu > summary::-webkit-details-marker { display: none; }
.pc-mobile-nav { position: absolute; top: 88px; right: 0; left: 0; background: #0f2842; padding: 16px 24px 24px; border-bottom: 3px solid #ff7308; max-height: calc(100svh - 88px); overflow-y: auto; }
.pc-mobile-nav .cl-nav-link { font-size: 18px; min-height: 52px; }
@media (max-width: 1023px) { .pc-secondary-menu { display: block; } .pc-secondary .pc-mobile-nav { display: block; } }
@media (max-width: 599px) { .pc-secondary main { grid-template-columns: 1fr; gap: 28px; } .pc-secondary main aside { position: static; } .pc-secondary main .account-intro { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .pc-secondary *, .pc-secondary *::after { transition: none !important; } }