:root {
  color-scheme: light;
  --paper: #faf5ea;
  --ink: #143421;
  --evergreen: #0d3827;
  --cranberry: #d41616;
  --dark-red: #771630;
  --gold: #a7802d;
  --rule: #bc9a4d;
  --muted: #425449;
  --type-heading: "p22-festiva", Georgia, "Times New Roman", serif;
  --type-body: "archer-pro", "Source Sans Pro", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--type-body);
  display: flex;
  flex-direction: column;
}
.page-shell {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4.2vw, 68px);
  flex: 1;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--cranberry); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip { position: absolute; z-index: 3; top: 14px; left: 14px; transform: translateY(-200%); background: white; padding: 10px; }
.skip:focus { transform: none; }
/* Header: matches the main site's navigation (ghost-elfling-theme, festive.css sections 05 and 07) */
.mast {
  position: relative;
  z-index: 2;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(-45deg, #dc2121, var(--cranberry), #b81313, #b81313);
  background-size: 400% 400%;
  animation: np-gradient 15s ease infinite;
}
@keyframes np-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.mast-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1200px;
  height: 50px;
  margin-inline: auto;
  padding-inline: 20px;
}
.mast-logo { display: block; flex-shrink: 0; height: 20px; }
.mast-logo img { display: block; width: auto; height: 100%; max-width: 150px; }
/* Right-hand pill button, styled like the main site's "Support us" button (festive.css .np-support-button) */
.mast-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 4px 14px 4px 10px;
  border: 1.5px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .12);
  color: white;
  font: 700 1rem/1.4 var(--type-body);
  letter-spacing: .3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.mast a:hover { color: inherit; }
.mast .mast-button:hover, .mast .mast-button:focus-visible { background-color: white; color: var(--cranberry); }
.mast a:focus-visible { outline-color: white; }
.mast-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A string of fairy lights hanging just under the header */
.np-lights {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  background: url("/assets/lights.svg") repeat-x center top;
}
.np-lights::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("/assets/lights-glow.svg") repeat-x center top;
  mix-blend-mode: screen;
  animation: np-twinkle 2.6s ease-in-out infinite alternate;
}
@keyframes np-twinkle {
  from { opacity: .15; }
  to { opacity: .9; }
}
@media (min-width: 48rem) {
  .mast-inner { height: 67px; gap: 35px; }
  .mast-logo { height: 25px; }
  .mast-button { font-size: 1.125rem; }
}
@media (min-width: 80rem) {
  .mast-inner { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mast, .np-lights::after { animation: none; }
  .np-lights::after { opacity: .6; }
  .mast-button { transition: none; }
}
.storefront { flex: 1 0 auto; }
.hero {
  display: grid;
  grid-template-columns: .91fr 1.09fr;
  gap: clamp(20px, 4.4vw, 70px);
  align-items: center;
  padding: clamp(28px, 3.6vw, 57px) 4px clamp(26px, 3vw, 49px);
}
.intro { padding-left: clamp(0px, 1.4vw, 24px); padding-bottom: 16px; }
h1, h2, p, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--type-heading); font-weight: 400; }
h1 { line-height: 1.04; }
.hero h1 { font-size: clamp(44px, 5.6vw, 88px); }
/* Keeps the heading on three lines: "A personalised / letter from / Santa" */
.hero h1 .line { display: block; }
.lede { font-size: clamp(17px, 1.84vw, 28px); line-height: 1.42; margin: 1.03em 0 .97em; max-width: 34ch; }
.price { display: flex; align-items: center; gap: clamp(10px, 2vw, 30px); margin-bottom: clamp(14px, 2.4vw, 34px); }
.price strong { color: var(--cranberry); font-size: clamp(33px, 4.05vw, 60px); line-height: 1.18; }
.price span { border-left: 1px solid var(--gold); padding-left: clamp(10px, 2vw, 30px); font-size: clamp(15px, 1.7vw, 25px); font-style: italic; }
.button {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--cranberry);
  color: white;
  font: 580 1.12rem/1.34 var(--type-body);
  padding: .65em 1.12em .76em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.hero .button { font-size: clamp(18px, 2.35vw, 32px); }
.button:hover { background: #a80f11; color: white; }
.button-secondary { background: transparent; border-color: var(--cranberry); color: var(--cranberry); }
.button-secondary:hover { background: #a80f11; border-color: #a80f11; color: white; }
.button:disabled { cursor: wait; opacity: .7; }
.preview-note { margin-top: .65rem; color: var(--muted); font: 500 .85rem/1.45 var(--type-body); }
.sample-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  aspect-ratio: 1.23;
  overflow: hidden;
  border-radius: 15px;
  background: var(--evergreen);
  background-image: radial-gradient(ellipse at center, #22523d, var(--evergreen) 76%);
}
.sample-panel img {
  display: block;
  position: absolute;
  height: 93%;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  transform: rotate(-4deg);
  box-shadow: 4px 9px 16px #071f17bd;
}
.sky { position: absolute; inset: 0; width: 100%; height: 100%; fill: #d5aa55; }
.sky .large-spark { stroke: #ddbd79; stroke-width: 1.4; }
.preview figcaption { text-align: center; font-size: clamp(17px, 1.6vw, 25px); margin: 8px 0 0; }
.steps {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: clamp(20px, 2.2vw, 34px) 0;
}
.step { display: flex; gap: clamp(12px, 1.5vw, 24px); padding: 2px clamp(14px, 2.3vw, 38px); }
.step + .step { border-left: 1px solid var(--rule); }
.step svg { color: var(--gold); flex: 0 0 clamp(34px, 4.8vw, 67px); align-self: start; }
.step h2 { font-size: clamp(18px, 2.2vw, 34px); line-height: 1.16; margin-bottom: .36em; }
.step p { font-size: clamp(14px, 1.25vw, 20px); line-height: 1.45; }
.foot {
  --footer-green: #173f35;
  position: relative;
  flex-shrink: 0;
  margin-top: 90px;
  background: var(--footer-green);
  color: #fbf6ea;
}
.np-village {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: 80px;
  color: var(--footer-green);
  pointer-events: none;
}
.np-village__snow {
  fill: none;
  stroke: #fbf6ea;
  stroke-width: 4px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.np-village__snow polyline { vector-effect: non-scaling-stroke; }
.np-village__window { fill: #ffd479; }
.foot-content { padding: 30px 20px 40px; text-align: center; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 25px;
  font-weight: 500;
}
.foot-links a { display: block; padding: 6px 10px; border-radius: 4px; text-decoration: none; }
.foot-links a:hover { background: rgb(0 0 0 / 10%); color: inherit; text-decoration: underline; }
.foot-links a:focus-visible { outline-color: #ffd479; }
.foot-copyright {
  margin-bottom: 20px;
  font: 400 1.25rem/1.7 var(--type-heading);
  letter-spacing: .3px;
}
@media (min-width: 48rem) {
  .np-village { height: 110px; }
  .foot-links { column-gap: 10px; }
  .foot-links a { padding-block: 8px; }
}
.inner { flex: 1 0 auto; }
.journey { max-width: 610px; padding: clamp(28px, 5vw, 62px) 0 clamp(42px, 6vw, 84px); margin: auto; }
.journey h1 { font-size: clamp(40px, 5.9vw, 69px); }
.journey p, .journey form, .journey dl { margin-top: 1.15rem; }
.back { display: inline-block; margin-bottom: 1.1rem; font-size: .96rem; }
.intro-text { font-size: 1.15rem; line-height: 1.62; color: var(--muted); }
.field { margin-top: 1.24rem; }
.field label { font-size: 1.05rem; font-weight: 650; display: block; margin: 0 0 .4rem; }
.field input {
  width: 100%;
  min-height: 50px;
  background: #fffdfa;
  border: 1px solid #887d60;
  border-radius: 6px;
  color: var(--ink);
  font: 1rem/1.38 var(--type-body);
  padding: 10px 12px;
}
.field input::placeholder { color: #62685d; opacity: 1; }
.field input[aria-invalid="true"] { border: 2px solid var(--cranberry); }
.field .field-error { color: var(--dark-red); margin-top: .35rem; font-size: .96rem; }
.journey .button { margin-top: .9rem; }
.muted { font-size: .95rem; line-height: 1.55; color: var(--muted); }
.errors { padding: .8rem 1rem; margin-top: 1.25rem; border-left: 3px solid var(--cranberry); background: #f8e7e7; color: var(--dark-red); }
.errors ul { margin: .55rem 0 0; padding-left: 1.2rem; }
.review > div { border-bottom: 1px solid #d6c6a4; padding: .68rem 0; }
.review dt { font-weight: 650; }
.review dd { margin: .3rem 0 0; text-align: start; overflow-wrap: anywhere; font: 1rem/1.44 var(--type-body); }
.pay-total { font-size: 1.13rem; }
.check { display: flex; align-items: start; gap: .7rem; line-height: 1.55; margin: .8rem 0; }
.check input { margin: .28em 0 0; flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--cranberry); }
.policy-paragraph { white-space: pre-line; line-height: 1.58; }
.order-reference { font-size: .86rem; overflow-wrap: anywhere; }
.order-reference code { font-family: ui-monospace, monospace; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 21px; padding: 27px 0 20px; }
  .intro { padding: 0; }
  .hero h1 { font-size: clamp(46px, 10vw, 72px); }
  .lede { margin: .76em 0; }
  .price { margin-bottom: .8rem; }
  .sample-panel { max-height: 470px; }
  .steps { grid-template-columns: 1fr; padding: 0; }
  .step { padding: 15px 4px; gap: 15px; }
  .step + .step { border-left: none; border-top: 1px solid #d9cbac; }
  .step h2 { font-size: 22px; }
  .step p { font-size: 16px; }
}
@media (max-width: 390px) {
  .hero .button { width: 100%; }
}