:root {
  --colour-primary: #9A4A2B;
  --colour-accent: #E9AC26;
  --colour-surface: #F9E8C3;
  --colour-surface-alt: #F2D086;
  --colour-ink: #303238;
  --colour-ink-soft: #5A544A;
  --colour-line: #BC9C5C;
  --colour-highlight: #F2D086;
  --colour-decor: #C86B45;
  --colour-focus: #1d4ed8;
  --colour-error: #b42318;
  --colour-error-surface: #fef3f2;
  --colour-success: #05603a;
  --colour-success-surface: #ecfdf3;
  --colour-demo: #7a2e0e;
  --colour-demo-surface: #fff4e5;
  --colour-deep: #303238;
  --colour-on-deep: #F9E8C3;
  --colour-on-primary: #ffffff;
  --colour-on-accent: #303238;
  --colour-on-deep-soft: #cdc0a4;
  --colour-deep-raised: #3e3f42;
  --colour-deep-line: #706c64;
  --size-xs: 0.8125rem;
  --size-sm: 0.9375rem;
  --size-base: 1.0625rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5rem;
  --size-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --size-3xl: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heading: 600;
  --tracking-heading: -0.01em;
  --font-heading: 'Aleo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-accent: 'Kalam', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-label: 'IBM Plex Mono', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --role-display-weight: 700;
  --role-display-tracking: -0.02em;
  --role-display-leading: 1.08;
  --role-display-case: none;
  --role-body-weight: 400;
  --role-accent-weight: 400;
  --role-accent-tracking: 0;
  --role-accent-case: none;
  --role-label-weight: 500;
  --role-label-tracking: 0.08em;
  --role-label-case: uppercase;
  --role-label-size: 0.8rem;
  --weight-heading: 700;
  --border-width: 2px;
  --radius-button: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.16);
  --layout-max: 72rem;
  --layout-narrow: 44rem;
  --layout-gutter: 1rem;
  --layout-gutter-wide: 2rem;
  --motion-duration: 600ms;
  --motion-duration-fast: 200ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@font-face {
  font-family: 'Aleo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/aleo-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/kalam-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
/* Private concept screens. Phone first. Every colour and font comes from the
   business's own brand colours and fonts in concept.json, through the token custom
   properties the build writes. No EDS colours, no gradients. The concept is carried
   by coded SVG illustration (system/illustrations/gift/) and type, never photos.
   Type roles, one job each: heading font for headlines, body font for reading,
   accent font (handwritten) for the tag lines only, label font for small labels.
   Motion lives only in the prefers-reduced-motion: no-preference block at the end,
   runs once and is over within five seconds. With reduced motion everything sits
   still in its final place. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--colour-surface);
  color: var(--colour-ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

/* Short screens keep the footer at the bottom. */
.pc { display: flex; flex-direction: column; min-height: 100vh; }
.pc main { flex: 1 0 auto; }

svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

h1, h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  letter-spacing: var(--role-display-tracking, var(--tracking-heading));
  line-height: var(--role-display-leading, var(--leading-tight));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--colour-primary); text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--colour-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.pc-wrap { width: 100%; max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--layout-gutter); }

/* Small labels: the label font, one job only. */
.pc-kicker {
  font-family: var(--font-label);
  font-size: var(--role-label-size, var(--size-xs));
  font-weight: var(--role-label-weight, var(--weight-bold));
  letter-spacing: var(--role-label-tracking, 0.08em);
  text-transform: var(--role-label-case, uppercase);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}

/* The handwritten face, for the tag lines only. */
.pc-hand {
  font-family: var(--font-accent);
  font-weight: var(--role-accent-weight, 400);
  font-size: var(--size-xl);
  line-height: 1.2;
}

/* The label strip: on every screen, held at the top while the page scrolls. */
.pc-label {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--layout-gutter);
  background: var(--colour-ink);
  color: var(--colour-surface);
  border-bottom: 2px solid var(--colour-accent);
  font-size: var(--size-xs);
  line-height: var(--leading-snug);
}
.pc-label__text { margin: 0; font-weight: var(--weight-bold); max-width: none; }
.pc-label__nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.pc-label__nav a { color: inherit; padding-block: var(--space-1); }
.pc-label__nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.pc-label :focus-visible { outline-color: var(--colour-surface); }

/* The night stage: the deep colour as a flat sky. */
.pc-night { position: relative; background: var(--colour-deep); color: var(--colour-on-deep); overflow: hidden; }

/* The night sky: a faint honeycomb, snow and stars, fairy lights along the top. Behind
   the content, never over the words. */
.pc-sky { position: absolute; inset: 0; pointer-events: none; }
.pc-sky .illo { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-sky .pc-sky__lights { top: 0; bottom: auto; height: 5.5rem; }
.pc-night > .pc-wrap, .pc-night > .pc-menu, .pc-ribbon__bow.illo { position: relative; z-index: 1; }

/* Illustration colour classes, from tokens only. */
.illo .illo-line, .illo .illo-soft-stroke, .illo .illo-gold-stroke, .illo .illo-wire, .illo .illo-ribbon-edge { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.illo .illo-line { stroke: var(--colour-ink); }
.illo .illo-soft-stroke { stroke: var(--colour-ink); stroke-opacity: 0.35; }
.illo .illo-gold-stroke { stroke: var(--colour-accent); }
.illo .illo-ribbon-edge { stroke: var(--colour-ink); stroke-opacity: 0.35; stroke-width: 1.5; }
.illo .illo-fill { fill: var(--colour-surface-alt); }
.illo .illo-paper { fill: var(--colour-surface); }
.illo .illo-soft { fill: var(--colour-line); }
.illo .illo-gold { fill: var(--colour-accent); stroke: none; }
.illo .illo-gold.illo-line { stroke: var(--colour-ink); }
.illo .illo-ribbon { fill: var(--colour-decor); }
.illo .illo-glow { fill: var(--colour-accent); opacity: 0.55; }
.illo .illo-glow--card { opacity: 0.3; }
.illo .illo-wire { stroke: var(--colour-line); stroke-width: 2; }
.illo .illo-cap { fill: var(--colour-line); }
.illo .illo-bulb { fill: var(--colour-accent); }
.illo .illo-bulb--cream { fill: var(--colour-on-deep); }
.illo .illo-flake { fill: var(--colour-on-deep); opacity: 0.75; }
.illo .illo-flake--far { opacity: 0.4; }
.illo .illo-flake--gold { fill: var(--colour-accent); }
.illo .illo-comb { fill: none; stroke: var(--colour-accent); stroke-width: 1.25; opacity: 0.09; }
.illo .illo-card-edge { stroke-width: 5; }
.illo .illo-card-inset { stroke-width: 1.5; }
.illo .illo-string { display: none; stroke-width: 2; }
.pc-art--tagged .illo-string { display: inline; }
.illo .illo-label { fill: var(--colour-ink); stroke: none; }
.illo .illo-label--name { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 28px; letter-spacing: -0.01em; }
.illo .illo-label--kind { font-family: var(--font-label); font-weight: var(--role-label-weight, 500); font-size: 16px; letter-spacing: 0.2em; text-transform: uppercase; }
.pc-art--long .illo-label--name { font-size: 21px; }

/* Hero: the card is the hero. On a phone it comes first, above the headline; on a wide
   screen it takes half the width beside the words. */
.pc-hero { padding-block: var(--space-8) var(--space-8); }
.pc-hero__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
.pc-hero__art { position: relative; margin: 0 auto; padding-bottom: calc(var(--space-8) + var(--space-4)); width: 100%; max-width: 40rem; }
.pc-hero__art .illo { width: 100%; height: auto; overflow: visible; }
.pc-hero__text .pc-kicker { color: var(--colour-accent); }
/* A soft halo of the night behind the words, so snow never sits inside the letters. */
.pc-hero__text > .pc-kicker, .pc-hero__headline, .pc-hero__apart, .pc-action__number { text-shadow: 0 0 6px var(--colour-deep), 0 0 14px var(--colour-deep), 0 0 24px var(--colour-deep); }
.pc-hero__headline { font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem); max-width: 14ch; color: var(--colour-on-deep); }
.pc-hero__apart { font-size: var(--size-lg); color: var(--colour-on-deep-soft); margin-bottom: var(--space-6); }

/* A gift tag: a card with a punched hole and a string. */
.pc-tag {
  position: relative;
  background: var(--colour-surface);
  color: var(--colour-ink);
  border: var(--border-width) solid var(--colour-ink);
  border-radius: var(--radius-md);
}
.pc-tag::before {
  content: "";
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--colour-ink);
  background: var(--colour-deep);
}
.pc-tag::after {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--colour-accent);
}

/* The voice tag hangs from the end of the string drawn from the bow (432, 398 in the
   drawing's 460 by 380 view from 80, 100), over the envelope, clear of the words on the card. */
.pc-tag--voice {
  position: absolute;
  left: 76.5%;
  top: 78.4%;
  width: 46%;
  max-width: 11.5rem;
  margin: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  transform: translate(-50%, -0.95rem) rotate(-6deg);
  transform-origin: 50% 0.95rem;
  text-align: center;
  z-index: 1;
}
.pc-tag--voice .pc-hand { font-size: clamp(1rem, 0.85rem + 0.8vw, 1.375rem); }
.pc-tag--voice::before { top: 0.5rem; left: 50%; margin-left: -0.4375rem; }
.pc-tag--voice::after { content: none; }

/* The offer is a ticket: notched corners, a punched hole with its string, and a
   perforated line. Same words. */
.pc-offer { position: relative; max-width: 32rem; margin: var(--space-6) 0 var(--space-6); transform: rotate(-1.5deg); }
.pc-offer__body {
  position: relative;
  background: var(--colour-surface);
  color: var(--colour-ink);
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-7) + var(--space-2));
  clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);
}
.pc-offer__body::before { content: ""; position: absolute; left: 3rem; top: var(--space-3); bottom: var(--space-3); border-left: 2px dashed var(--colour-line); }
.pc-offer::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 1.1rem;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.4375rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--colour-ink);
  background: var(--colour-deep);
}
.pc-offer::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 1.47rem;
  bottom: calc(50% + 0.4rem);
  width: 2px;
  height: 3.5rem;
  background: var(--colour-accent);
  transform: rotate(-28deg);
  transform-origin: 50% 100%;
}
.pc-offer__idea { font-size: var(--size-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.pc-offer__confirm { font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--colour-ink-soft); }

/* Display only: the button never links, so the number sits beside it as plain text. */
.pc-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  background: var(--colour-primary);
  color: var(--colour-on-primary);
  font-weight: var(--weight-bold);
}
.pc-night .pc-button { background: var(--colour-accent); color: var(--colour-on-accent); }
.pc-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); max-width: none; }
.pc-action__number { font-size: var(--size-lg); font-weight: var(--weight-bold); color: var(--colour-ink); }
.pc-night .pc-action__number { color: var(--colour-on-deep); }

/* The ribbon band: the turn into the next scene. Snow carries on across it. */
.pc-ribbon {
  position: relative;
  height: 3.75rem;
  background: var(--colour-decor);
  border-block: 3px double var(--colour-accent);
}
.pc-ribbon .pc-sky { overflow: hidden; }
.pc-ribbon .pc-sky .pc-sky__comb, .pc-ribbon .illo-fall--far { display: none; }
.pc-ribbon__bow.illo { position: absolute; left: 50%; top: 50%; width: 8rem; height: auto; transform: translate(-50%, -42%); overflow: visible; }

/* Review: one gift tag hanging at a slight angle from the ribbon, in the same night. */
.pc-review { padding-block: var(--space-8) var(--space-8); }
.pc-tag--review { max-width: 38rem; margin-inline: auto; padding: var(--space-7) var(--space-5) var(--space-6); transform: rotate(1.5deg); transform-origin: 50% 0; }
.pc-tag--review::before { top: var(--space-4); left: 50%; margin-left: -0.4375rem; }
.pc-tag--review::after { bottom: calc(100% - var(--space-4)); left: 50%; height: calc(var(--space-8) + var(--space-4)); }
.pc-review__title { color: var(--colour-ink-soft); text-align: center; }
.pc-review__tagline { color: var(--colour-primary); text-align: center; margin-inline: auto; margin-bottom: var(--space-3); }
.pc-review__stars { display: flex; justify-content: center; gap: var(--space-1); margin-bottom: var(--space-4); color: var(--colour-primary); max-width: none; }
.pc-review__stars svg { fill: currentColor; stroke: none; }
.pc-review__quote { margin: 0 0 var(--space-5); }
.pc-review__quote p { font-size: var(--size-xl); line-height: var(--leading-snug); margin-inline: auto; text-align: center; max-width: 30ch; }
.pc-review__by { font-weight: var(--weight-bold); text-align: center; margin-inline: auto; margin-bottom: var(--space-2); }
.pc-review__context { color: var(--colour-ink-soft); font-size: var(--size-sm); text-align: center; margin-inline: auto; }

/* Sample post: a plain feed card with a thin border, no shadow. */
.pc-post { padding-block: var(--space-7) var(--space-8); }
.pc-post__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.pc-post__note { color: var(--colour-ink-soft); margin-bottom: var(--space-6); }
.pc-post__card { max-width: 30rem; border: 1px solid var(--colour-line); border-radius: var(--radius-md); background: var(--colour-surface); overflow: hidden; }
.pc-post__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); font-weight: var(--weight-bold); }
.pc-post__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--colour-deep);
  color: var(--colour-accent);
  font-family: var(--font-heading);
}
.pc-post__image { aspect-ratio: 1 / 1; border-block: 1px solid var(--colour-line); }
.pc-post__image > .illo { position: relative; z-index: 1; width: 100%; height: 100%; padding-top: 2.5rem; }
.pc-post__image .pc-sky__lights { height: 3.5rem; }
.pc-post__body { padding: var(--space-4); }
.pc-post__tags { color: var(--colour-primary); font-weight: var(--weight-bold); }

/* What next: the outline as a menu card on the night sky. */
.pc-next { padding-block: var(--space-9) var(--space-8); }
.pc-menu {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  background: var(--colour-surface);
  color: var(--colour-ink);
  border: var(--border-width) solid var(--colour-accent);
  outline: 1px solid var(--colour-accent);
  outline-offset: -0.625rem;
  border-radius: var(--radius-sm);
}
.pc-menu__kicker { color: var(--colour-primary); text-align: center; margin-inline: auto; }
.pc-menu__intro { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); text-align: center; margin-inline: auto; margin-bottom: var(--space-6); }
.pc-menu__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.pc-menu__item { display: flex; align-items: baseline; gap: var(--space-2); padding-block: var(--space-2); }
.pc-menu__text { flex: 0 1 auto; }
.pc-menu__leader { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted var(--colour-line); transform: translateY(-0.3em); }
.pc-menu__item svg { flex: none; width: 0.875rem; height: 0.875rem; fill: var(--colour-decor); stroke: none; }
.pc-menu__closing { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--size-lg); text-align: center; margin-inline: auto; }

/* Worth: the calculator as a light card on the night sky. Every figure is a slider with
   its value shown large beside its label (label font, tabular numbers). The results are
   tiles: one per stream on the deep colour, then the total, the biggest number on the
   screen, in the accent colour, with the caveat straight under it. On a phone a slim
   total bar holds to the bottom of the screen while the sliders scroll (see below).
   overflow: clip (not hidden) on the section so the tiles can stay in view on a
   desktop. */
.pc-worth { padding-block: var(--space-8) var(--space-8); overflow: clip; }
.pc-calc {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  background: var(--colour-surface);
  color: var(--colour-ink);
  border: var(--border-width) solid var(--colour-accent);
  outline: 1px solid var(--colour-accent);
  outline-offset: -0.625rem;
  border-radius: var(--radius-sm);
}
.pc-calc__head { text-align: center; margin-bottom: var(--space-6); }
.pc-calc__kicker { color: var(--colour-primary); margin-inline: auto; }
.pc-calc__title { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); margin-inline: auto; margin-bottom: var(--space-3); }
.pc-calc__notes { color: var(--colour-ink-soft); margin-inline: auto; max-width: 46ch; }
.pc-calc__grid { display: grid; gap: var(--space-6); }
.pc-calc__grid > * { min-width: 0; }
.pc-calc__sliders { display: grid; gap: var(--space-6); }
.pc-calc__stream { display: grid; gap: var(--space-5); }
.pc-calc__stream + .pc-calc__stream { padding-top: var(--space-5); border-top: 2px dotted var(--colour-line); }
.pc-calc__name { font-size: var(--size-xl); margin: 0; }
.pc-calc__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.pc-calc__top label { font-weight: var(--weight-bold); }
.pc-calc__value {
  flex: none;
  font-family: var(--font-label);
  font-weight: var(--role-label-weight, var(--weight-bold));
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--colour-primary);
}
/* The slider: a dark track, filled in the primary colour up to a round thumb that is
   large enough for a thumb, drawn the same in every browser. The track and fill are
   drawn behind the slider; the script sets --pc-fill (0 to 1) as it moves. */
.pc-calc__track { position: relative; }
.pc-calc__track::before, .pc-calc__fill { content: ""; position: absolute; left: 0; top: 50%; height: 0.375rem; margin-top: -0.1875rem; border-radius: var(--radius-pill); pointer-events: none; }
.pc-calc__track::before { right: 0; background: var(--colour-ink-soft); }
.pc-calc__fill { width: calc(0.875rem + var(--pc-fill, 0) * (100% - 1.75rem)); background: var(--colour-primary); }
.pc-calc__slider { position: relative; display: block; width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pc-calc__slider:disabled { cursor: default; }
.pc-calc__slider:focus { outline: none; }
.pc-calc__slider:focus-visible { outline: 3px solid var(--colour-focus); outline-offset: 2px; }
.pc-calc__slider::-webkit-slider-runnable-track { height: 0.375rem; background: transparent; }
.pc-calc__slider::-moz-range-track { height: 0.375rem; background: transparent; }
.pc-calc__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.75rem; height: 1.75rem; margin-top: -0.6875rem; border-radius: 50%; background: var(--colour-primary); border: 3px solid var(--colour-surface); box-shadow: 0 0 0 2px var(--colour-primary); }
.pc-calc__slider::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--colour-primary); border: 3px solid var(--colour-surface); box-shadow: 0 0 0 2px var(--colour-primary); }
.pc-calc__note { font-size: var(--size-sm); color: var(--colour-ink-soft); margin: var(--space-1) 0 0; }
.pc-calc__results { align-self: start; }
.pc-calc__tiles { display: grid; gap: var(--space-3); }
.pc-calc__tile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; max-width: none; padding: var(--space-4); background: var(--colour-deep); color: var(--colour-on-deep); border-radius: var(--radius-sm); }
.pc-calc__tile-name {
  font-family: var(--font-label);
  font-size: var(--role-label-size, var(--size-xs));
  font-weight: var(--role-label-weight, var(--weight-bold));
  letter-spacing: var(--role-label-tracking, 0.08em);
  text-transform: var(--role-label-case, uppercase);
  line-height: var(--leading-snug);
  color: var(--colour-on-deep-soft);
}
.pc-calc__tile-value { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pc-calc__tile--total { flex-direction: column; align-items: flex-start; gap: var(--space-1); background: var(--colour-accent); color: var(--colour-on-accent); padding-block: var(--space-5); }
.pc-calc__tile--total .pc-calc__tile-name { color: var(--colour-on-accent); }
.pc-calc__tile--total .pc-calc__tile-value { font-size: clamp(2.75rem, 2rem + 3.5vw, 4rem); }
.pc-calc__caveat { font-weight: var(--weight-bold); margin: var(--space-3) 0 0; }

/* The phone's total bar: slim, the same total as the tile. It is sticky at the end of
   the page's main part, so it holds to the bottom of the screen while the sliders
   scroll, and at the end of the page it takes its own room (its full height) above the
   footer instead of covering it. That room does the job of bottom padding, and it also
   draws in the right place in full-length screenshots. */
.pc-calc__bar { position: sticky; bottom: 0; z-index: 9; min-height: 3.75rem; display: flex; align-items: center; background: var(--colour-deep); color: var(--colour-on-deep); border-top: 2px solid var(--colour-accent); }
.pc-calc__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pc-calc__bar-caveat { font-size: var(--size-sm); line-height: var(--leading-snug); color: var(--colour-on-deep-soft); }
.pc-calc__bar-total { flex: none; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--size-xl); font-variant-numeric: tabular-nums; color: var(--colour-accent); white-space: nowrap; }

/* The footer steps out of the night onto their pale gold. */
.pc-footer { background: var(--colour-surface-alt); color: var(--colour-ink); padding-block: var(--space-6); font-size: var(--size-sm); }
.pc-footer__name { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--size-lg); margin-bottom: var(--space-2); }
.pc-footer__line { color: var(--colour-ink-soft); }

@media (min-width: 56rem) {
  .pc-wrap { padding-inline: var(--layout-gutter-wide); }
  .pc-label { padding-inline: var(--layout-gutter-wide); }
  .pc-hero { padding-block: var(--space-9) var(--space-9); }
  .pc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .pc-hero__text { order: -1; }
  .pc-review, .pc-post { padding-block: var(--space-9); }
  .pc-menu, .pc-calc { padding: var(--space-8) var(--space-7); }
  .pc-calc__bar { display: none; }
  .pc-calc { max-width: 68rem; }
  .pc-calc__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .pc-calc__results { position: sticky; top: 6rem; }
}

/* Middle widths (a tablet, or a laptop with a side panel): one column, with the card
   kept to a size that leaves the headline close behind it. */
@media (min-width: 37.5rem) and (max-width: 55.99rem) {
  .pc-hero__art { max-width: 30rem; }
}

/* The signature interaction: only the card slides once a little further out of its
   envelope and the voice tag swings into place. Snow, stars and lights are drawn still.
   Every first frame is readable too, in case the motion never runs: the card text
   starts clear of the envelope and the tag starts visible. Over within three seconds. */
@media (prefers-reduced-motion: no-preference) {
  .pc-art--hero .illo-slide { animation: pc-slide-out 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  .pc-tag--voice { animation: pc-swing 1.6s ease-out 1.2s both; }
}

@keyframes pc-slide-out {
  from { transform: translateY(28px); }
  to { transform: translateY(0); }
}
@keyframes pc-swing {
  from { transform: translate(-50%, -0.95rem) rotate(-14deg); }
  to { transform: translate(-50%, -0.95rem) rotate(-6deg); }
}