/* My Name Changed - site styles */

:root {
  --parchment: #F7F4EF;
  --paper: #FFFDF9;
  --petrol: #2F4B4A;
  --granite: #426564;
  --green: #729D83;
  --green-tint: #E2ECE5;
  --copper: #C4573A;
  --copper-dark: #A9472D;
  --copper-tint: #F3D6CB;
  --warm-grey: #D1CDC6;
  --charcoal: #2A2A2A;
  --yellow: #F5B83D;
  --yellow-tint: #F8E7BE;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); }
a:hover { color: var(--copper-dark); }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--petrol);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-optical-sizing: auto;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h3 { font-size: 1.375rem; line-height: 1.2; }
p { margin: 0 0 1em; }
em { font-style: italic; }
h1 em, h2 em { color: var(--copper); font-weight: 500; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 8px; background: var(--petrol); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1.1875rem; line-height: 1.2;
  padding: 0.85em 1.4em; border-radius: 999px; text-decoration: none;
  border: 2px solid var(--petrol);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-copper { background: var(--copper); color: #fff; box-shadow: 4px 4px 0 var(--petrol); }
.btn-copper:hover { color: #fff; background: var(--copper-dark); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--petrol); }
.btn-copper:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--petrol); }
.btn-outline { background: transparent; color: var(--parchment); border-color: var(--parchment); }
.btn-outline:hover { background: var(--parchment); color: var(--petrol); }
.btn-small { font-size: 1rem; padding: 0.6em 1.1em; box-shadow: 3px 3px 0 var(--petrol); }
.btn-large { font-size: 1.3rem; padding: 0.95em 1.8em; }

.text-link {
  font-weight: 700; color: var(--petrol); text-decoration: underline;
  text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.text-link:hover { color: var(--copper-dark); }
.more { margin-top: 1.5rem; }

/* Hand-drawn bits */
.note {
  font-family: var(--font-hand); font-weight: 600; color: var(--copper);
  font-size: 1.6rem; line-height: 1.05; margin: 0;
}
.arrow, .scribble-underline, .strike, .tick { overflow: visible; }
.arrow path, .scribble-underline path, .strike path, .tick path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .draw path {
    stroke-dasharray: 400; stroke-dashoffset: 400;
    animation: draw .9s ease-out forwards;
  }
  .scribble-underline path { animation-delay: .35s; }
  .arrow-me path { animation-delay: .9s; }
  .arrow-me path + path { animation-delay: 1.4s; }
  .strike path { animation-delay: 1.5s; animation-duration: .5s; }
  .tick path { animation-delay: 1.9s; animation-duration: .4s; }
  .note-me { opacity: 0; animation: fade .4s ease-out .7s forwards; }
  .new-name { opacity: 0; animation: fade .4s ease-out 1.75s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 239, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--warm-grey);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand img { width: 128px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.site-nav ul a { text-decoration: none; font-weight: 500; color: var(--charcoal); font-size: 1rem; }
.site-nav ul a:hover { color: var(--copper-dark); }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 2px solid var(--petrol); border-radius: 12px;
    background: var(--paper); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 20px; height: 2.5px; background: var(--petrol); border-radius: 2px; position: relative;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -7px; }
  .nav-toggle-bars::after { top: 7px; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: transform .2s ease, background-color .2s ease, top .2s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--parchment); border-bottom: 1px solid var(--warm-grey);
    flex-direction: column; align-items: flex-start; gap: 20px;
    padding: 20px var(--gutter) 28px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 14px; }
  .site-nav ul a { font-size: 1.15rem; }
}

/* Hero */
.hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero h1 {
  font-size: clamp(3rem, 7.4vw, 6rem); line-height: 0.98; letter-spacing: -0.03em;
  font-weight: 650; margin-bottom: 0.4em;
}
.hero-em { position: relative; display: block; width: fit-content; white-space: nowrap; }
.scribble-underline {
  position: absolute; left: 0; right: 0; bottom: -0.12em; width: 100%; height: 0.22em;
}
.scribble-underline path { stroke: var(--green); stroke-width: 5; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); max-width: 34em; }
.price-line { font-size: 1.15rem; }
.price-line strong { color: var(--copper-dark); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: 28px 0 24px; }
.hero-trust { font-size: 0.95rem; color: var(--granite); max-width: 34em; }

.hero-photo { position: relative; max-width: 440px; justify-self: center; width: 100%; margin-top: 70px; }
.print {
  margin: 0; background: #fff; padding: 12px 12px 14px; border-radius: 6px;
  box-shadow: 0 1px 0 var(--warm-grey), 0 18px 40px -18px rgba(47, 75, 74, .45);
  transform: rotate(2deg);
}
.print img { border-radius: 3px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.note-me { position: absolute; top: -118px; right: -20px; transform: rotate(3deg); text-align: left; line-height: 1.1; }
.arrow-me { position: absolute; top: -65px; left: calc(48% - 20px); width: 150px; height: 94px; }
.arrow-me path { stroke: var(--copper); stroke-width: 3.5; }
.name-card {
  position: absolute; left: -48px; bottom: -22px;
  background: var(--paper); border: 2px solid var(--petrol); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--petrol);
  padding: 12px 18px 12px; transform: rotate(-4deg);
  display: grid; gap: 2px; min-width: 210px;
}
.name-card-label { font-size: 0.75rem; font-weight: 700; color: var(--granite); }
.old-name { position: relative; font-family: var(--font-display); font-size: 1.4rem; color: var(--charcoal); justify-self: start; }
.strike { position: absolute; left: -6px; right: -6px; top: 30%; width: calc(100% + 12px); height: 0.7em; }
.strike path { stroke: var(--copper); stroke-width: 4; }
.new-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.85rem; color: var(--green); line-height: 1; display: inline-flex; align-items: center; gap: 6px; }
.new-name { color: #4F7F63; }
.tick { width: 26px; height: 22px; }
.tick path { stroke: #4F7F63; stroke-width: 4; }

@media (max-width: 1240px) and (min-width: 901px) {
  .note-me { right: -8px; top: -118px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 360px; margin-top: 120px; }
  .note-me { right: -16px; top: -100px; font-size: 1.4rem; }
  .arrow-me { top: -52px; left: calc(48% - 15px); width: 120px; height: 75px; }
  .name-card { left: -12px; bottom: -40px; min-width: 0; }
  .hero-photo { margin-bottom: 44px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 3.1rem; }
  .hero-em { white-space: normal; }
  .hero-photo { max-width: 300px; }
}

/* Section heads */
.section-head { max-width: 40rem; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { font-size: 1.15rem; }

/* Reasons */
.reasons { padding: 0 0 var(--section); }
.stickers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 12px; max-width: 980px; }
.stickers li {
  font-family: var(--font-display); font-weight: 550; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  padding: 0.5em 1em; border-radius: 999px; border: 2px solid var(--petrol);
  box-shadow: 3px 3px 0 var(--petrol); background: var(--paper); color: var(--petrol);
}
.stickers li:nth-child(6n+1) { background: var(--copper-tint); transform: rotate(-2deg); }
.stickers li:nth-child(6n+2) { background: var(--green-tint); transform: rotate(1.5deg); }
.stickers li:nth-child(6n+3) { background: var(--petrol); color: var(--parchment); transform: rotate(-1deg); }
.stickers li:nth-child(6n+4) { background: var(--yellow-tint); transform: rotate(2deg); }
.stickers li:nth-child(6n+5) { background: var(--paper); transform: rotate(-1.5deg); }
.stickers li:nth-child(6n+6) { background: var(--copper); color: #fff; font-weight: 700; transform: rotate(1deg); }
.stickers li.sticker-last { position: relative; background: var(--copper); color: #fff; font-weight: 700; transform: rotate(-2deg); }
.note-choose {
  position: absolute; left: calc(100% + 40px); top: 50%; transform: translateY(-50%) rotate(-3deg);
  white-space: nowrap; color: var(--copper); font-family: var(--font-hand); font-size: 1.7rem; font-weight: 700;
}
.note-choose::before {
  content: ''; position: absolute; right: calc(100% + 8px); top: 50%; width: 20px; height: 2.5px;
  background: var(--copper); border-radius: 2px;
}
@media (max-width: 700px) {
  .stickers { gap: 10px 8px; }
  .stickers li { font-size: 0.98rem; padding: 0.45em 0.85em; box-shadow: 2px 2px 0 var(--petrol); }
  .stickers { position: relative; margin-bottom: 64px; }
  .stickers li.sticker-last { position: static; transform: none; }
  .note-choose { font-size: 1.45rem; left: 4px; top: calc(100% + 16px); transform: rotate(-3deg); }
  .note-choose::before { display: none; }
}

/* How it works */
.how { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.bits { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.bit { border-radius: 24px; padding: clamp(24px, 3.5vw, 40px); min-width: 0; }
.bit h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 0.7em; }
.bit-yours { position: relative; background: var(--paper); border: 2px solid var(--petrol); box-shadow: 5px 5px 0 var(--petrol); align-self: start; }
.bit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.bit-list li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.bit-list img { width: 72px; height: 72px; }
.bit-list strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--petrol); line-height: 1.2; margin-bottom: 2px; }
.bit-list span { display: block; font-size: 0.98rem; }
.bit-fine { margin: 22px 0 0; padding-top: 18px; border-top: 1px dashed var(--warm-grey); font-size: 0.95rem; color: var(--granite); }
.note-thatsit { position: absolute; right: 22px; bottom: -48px; transform: rotate(-4deg); font-size: 1.8rem; }
.bit-ours { background: var(--petrol); color: var(--parchment); }
.bit-ours h3 { color: var(--parchment); margin: 0; }
.bit-ours-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bit-ours-head img { width: 72px; height: 72px; }
.bit-ours .ticks { margin: 0; gap: 14px; font-size: 1.08rem; }
.how .fine { margin-top: 3.5rem; }
@media (max-width: 860px) {
  .bits { grid-template-columns: 1fr; }
  .bit-yours { margin-bottom: 44px; }
  .note-thatsit { bottom: -46px; right: 16px; }
}
.fine { margin-top: 2rem; color: var(--granite); font-size: 0.98rem; max-width: 40rem; }

/* Organisations */
.orgs { background: var(--green-tint); padding: var(--section) 0; }
.org-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.org-grid li { display: grid; grid-template-columns: 104px 1fr; column-gap: 18px; align-items: center; }
.org-grid img { grid-row: span 2; width: 104px; height: 104px; }
.org-grid h3 { margin: 0 0 4px; align-self: end; }
.org-grid p { margin: 0; align-self: start; font-size: 0.98rem; color: var(--charcoal); }
.not-yet { margin-top: 48px; padding: 20px 24px; border-left: 4px solid var(--copper); background: var(--paper); border-radius: 0 10px 10px 0; max-width: 46rem; }
.not-yet p { margin: 0; }
@media (max-width: 960px) { .org-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .org-grid { grid-template-columns: 1fr; gap: 20px; }
  .org-grid li { grid-template-columns: 80px 1fr; }
  .org-grid img { width: 80px; height: 80px; }
}

/* Compare */
.compare { padding: var(--section) 0; }
.compare-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare-table th, .compare-table td { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--warm-grey); }
.compare-table thead th { font-family: var(--font-display); font-size: 1.05rem; color: var(--petrol); font-weight: 600; vertical-align: bottom; line-height: 1.2; }
.compare-table tbody th { text-align: left; font-weight: 500; color: var(--charcoal); padding-left: 0; }
.compare-table td { color: var(--granite); }
.compare-table .us { background: var(--copper-tint); color: var(--copper-dark); font-weight: 700; }
.compare-table thead .us { border-radius: 14px 14px 0 0; color: var(--copper-dark); }
.compare-table tbody tr:last-child .us { border-radius: 0 0 14px 14px; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .compare-table { font-size: 0.9rem; }
  .compare-table th, .compare-table td { padding: 12px 6px; }
  .compare-table thead th { font-size: 0.9rem; }
}

/* Price */
.price { background: var(--petrol); color: var(--parchment); padding: var(--section) 0; }
.price h2, .price h3, .price h4 { color: var(--parchment); }
.price a:not(.btn) { color: var(--parchment); text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.big-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: 0.2em 0 0.6em; }
.big-price .amount { font-family: var(--font-display); font-size: clamp(5rem, 12vw, 8.5rem); font-weight: 700; line-height: 0.9; color: var(--parchment); letter-spacing: -0.04em; }
.big-price .per { font-size: 1.2rem; color: var(--copper-tint); }
.ticks { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.5 3.5L16 8' fill='none' stroke='%232F4B4A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.no-extras { font-family: var(--font-hand); font-size: 1.7rem; color: var(--yellow); margin: 0; }
.ways { display: grid; gap: 16px; }
.ways-title { font-size: 1.25rem; margin-bottom: 4px; }
.way { background: var(--granite); border-radius: 18px; padding: 22px 24px; }
.way h4 { font-size: 1.5rem; margin-bottom: 0.25em; }
.way p { color: #E8EEEA; }
.way .btn { margin-top: 2px; }
.way .btn-copper { box-shadow: 4px 4px 0 var(--charcoal); border-color: var(--charcoal); }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

/* Founder */
.founder { padding: var(--section) 0; }
.founder-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.founder-photo { position: relative; max-width: 360px; justify-self: center; width: 100%; }
.founder-photo img { transform: rotate(-3deg); filter: drop-shadow(0 18px 24px rgba(47, 75, 74, .28)); }
.founder > .wrap > .founder-photo { display: flex; flex-direction: column; align-items: center; }
.sloth-tag { display: flex; align-items: flex-start; align-self: stretch; margin-top: -40px; padding-left: 2%; position: relative; z-index: 1; }
.note-sloths { margin: 26px 0 0; transform: rotate(-4deg); color: var(--copper); white-space: nowrap; }
.arrow-sloths { width: 120px; height: 85px; flex: none; margin-left: -58px; }
@media (min-width: 901px) { .sloth-tag { transform: translate(-22px, 14px); } }
.arrow-sloths path { stroke: var(--copper); stroke-width: 3.5; }
.founder-copy p { font-size: 1.15rem; max-width: 34em; }
@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo { max-width: 300px; }
}

/* FAQ */
.faq { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-list details { border-bottom: 1px solid var(--warm-grey); }
.faq-list details:first-child { border-top: 1px solid var(--warm-grey); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--petrol); line-height: 1.25;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; background: var(--copper-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23A9472D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 20px; max-width: 38em; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* Final CTA */
.final { padding: var(--section) 0 calc(var(--section) + 12px); text-align: center; }
.final h2 { font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -0.03em; }
.final p { font-size: 1.2rem; }
.final-action { position: relative; display: inline-block; margin-top: 18px; }
.note-goon { white-space: nowrap; position: absolute; right: calc(100% + 88px); top: -36px; font-size: 2rem; transform: rotate(-6deg); color: var(--copper); }
.arrow-goon { position: absolute; right: calc(100% + 6px); top: -8px; width: 72px; height: 48px; }
.arrow-goon path { stroke: var(--copper); stroke-width: 3.5; }
@media (max-width: 600px) {
  .final-action { margin-top: 48px; }
  .note-goon { right: auto; left: -4px; top: -40px; font-size: 1.6rem; }
  .arrow-goon { display: none; }
}

/* Footer */
.site-footer { background: var(--petrol); color: #DCE5E0; padding: 64px 0 40px; font-size: 0.98rem; }
.site-footer a { color: var(--parchment); text-decoration: none; }
.site-footer a:hover { color: var(--copper-tint); text-decoration: underline; }
.footer-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.footer-brand img { width: 150px; margin-bottom: 18px; }
.footer-brand p { max-width: 26em; }
.socials { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.site-footer .socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--parchment); color: var(--petrol); text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.site-footer .socials a:hover, .site-footer .socials a:focus-visible { text-decoration: none; background: var(--copper); color: #fff; transform: translateY(-2px); }
.socials svg { display: block; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-cols h2 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--copper-tint); margin-bottom: 14px; letter-spacing: 0; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-facts { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--granite); font-size: 0.88rem; color: #BFCDC6; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols a[href^="mailto"] { word-break: break-all; }
}

/* ---------- /start ---------- */
.start-wrap { max-width: 900px; }
.start-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 40px); }
.start-title {
  font-size: clamp(2.9rem, 7vw, 5rem); line-height: 0.98; letter-spacing: -0.03em;
  font-weight: 650; margin-bottom: 0.45em;
}
.start-title .line { display: block; }
.start-title .hero-em { display: block; }
.start-hero .lede { margin-bottom: 1.4rem; }
.price-strong { color: var(--copper-dark); }

.chips { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1rem; color: var(--petrol); line-height: 1.25;
  padding: 0.6em 1em; border-radius: 999px; border: 2px solid var(--petrol);
  box-shadow: 3px 3px 0 var(--petrol); background: var(--paper);
}
.chip svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip a { color: inherit; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.chip-copper { background: var(--copper-tint); transform: rotate(-1.5deg); }
.chip-green { background: var(--green-tint); transform: rotate(1deg); }
.chip-yellow { background: var(--yellow-tint); transform: rotate(-0.5deg); }

.wrong-page { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 1rem; color: var(--granite); }

.start-form { padding: 0 0 clamp(48px, 7vw, 88px); }
.before {
  border: 2px dashed var(--warm-grey); border-radius: 18px;
  padding: 22px 24px 18px; margin-bottom: 28px; background: rgba(255, 253, 249, 0.6);
}
.before-title { font-size: 1.35rem; margin: 0; }
.before summary { list-style: none; cursor: pointer; position: relative; padding-right: 40px; margin-bottom: 0.8em; }
.before:not([open]) summary { margin-bottom: 4px; }
.before summary::-webkit-details-marker { display: none; }
.before summary::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; background: var(--copper-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23A9472D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: transform .2s ease;
}
.before[open] summary::after { transform: rotate(45deg); }
.before .ticks { margin-bottom: 0.9em; gap: 10px; }
.before-fine { margin: 0; font-size: 0.95rem; color: var(--granite); }

.form-card {
  background: #fff; border: 2px solid var(--petrol); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--petrol);
  padding: clamp(8px, 2vw, 20px);
  min-height: 520px;
}
.form-card-fit { min-height: 0; }
.after-pay { margin: 26px 0 0; font-size: 1.05rem; }

.data-card { margin-top: 28px; padding: 22px 24px; border-left: 4px solid var(--green); background: var(--paper); border-radius: 0 14px 14px 0; }
.data-card > p { margin: 0 0 18px; }
.trust-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust-strip li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.35; color: var(--granite); }
.trust-strip svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--petrol); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-strip a { color: var(--petrol); font-weight: 700; }

.start-help { background: var(--paper); border-top: 1px solid var(--warm-grey); padding: clamp(48px, 7vw, 88px) 0; }
.help-grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.help-photo { margin: 0; }
.help-photo img { transform: rotate(-3deg); filter: drop-shadow(0 14px 20px rgba(47, 75, 74, .25)); }
.help-copy h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.help-copy p { font-size: 1.1rem; }
.help-trust { color: var(--granite); margin-bottom: 0; }
.note-legs { display: block; margin-top: 8px; font-size: 1.75rem; transform: rotate(-2deg); transform-origin: left; }

@media (max-width: 760px) {
  .trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .chips { flex-direction: column; align-items: flex-start; }
  .before { padding: 16px 18px 12px; margin-bottom: 20px; }
  .before-title { font-size: 1.15rem; }
  .wrong-page { flex-direction: column; }
  .help-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .help-photo { max-width: 200px; }
  .form-card { border-radius: 16px; box-shadow: 4px 4px 0 var(--petrol); padding: 4px; }
}
@media (max-width: 380px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* ---------- /gifting ---------- */
.gift-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.gift-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.gift-title {
  font-size: clamp(3rem, 7.2vw, 5.75rem); line-height: 0.98; letter-spacing: -0.03em;
  font-weight: 650; margin-bottom: 0.4em;
}
.gift-title .line { display: block; }
.gift-title .hero-em { display: block; }
.gift-prices { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 1.4rem 0 0.6rem; }
.gift-price {
  display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--petrol);
  padding: 0.45em 1em; border: 2px solid var(--petrol); border-radius: 999px; background: var(--paper);
  box-shadow: 3px 3px 0 var(--petrol);
}
.gift-price strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--copper-dark); line-height: 1; }
.gift-price:first-child { background: var(--copper-tint); transform: rotate(-1.5deg); }
.gift-price:last-child { background: var(--green-tint); transform: rotate(1deg); }
.gift-includes { color: var(--granite); font-size: 1.02rem; }

/* Voucher illustration */
.voucher-scene { position: relative; width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 1 / 1.02; margin: 120px 0 110px; }
.envelope {
  position: absolute; right: 0; top: 4%; width: 72%; aspect-ratio: 229 / 162;
  background: #EFE6D6; border: 2px solid var(--petrol); border-radius: 6px;
  box-shadow: 0 18px 32px -20px rgba(47, 75, 74, .5); transform: rotate(7deg); overflow: hidden;
}
.envelope-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: linear-gradient(to bottom right, transparent 49.4%, rgba(47,75,74,.35) 50%, transparent 50.8%),
              linear-gradient(to bottom left, transparent 49.4%, rgba(47,75,74,.35) 50%, transparent 50.8%);
}
.envelope-line { position: absolute; left: 30%; width: 44%; height: 2px; background: rgba(47,75,74,.18); bottom: 30%; }
.envelope-line.short { width: 28%; bottom: 20%; }
.voucher {
  position: absolute; left: 0; bottom: 4%; width: 70%; aspect-ratio: 148 / 210;
  background: #FBF4E6;
  background-image: radial-gradient(rgba(120, 90, 50, .06) 1px, transparent 1px);
  background-size: 5px 5px;
  border: 2px solid var(--petrol); border-radius: 6px;
  box-shadow: 6px 6px 0 var(--petrol);
  transform: rotate(-4deg);
  padding: 9% 9% 8%; display: flex; flex-direction: column; gap: 6%;
}
.voucher-logo { width: 46%; }
.voucher-for { font-family: var(--font-display); font-style: italic; color: var(--copper); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; margin: 8% 0 0; }
.voucher-msg { font-family: var(--font-hand); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.15; color: var(--charcoal); margin: 0; }
.voucher-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.voucher-code {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  color: var(--petrol); border: 2px dashed var(--copper); border-radius: 8px; padding: 0.35em 0.6em; background: #fff;
}
.voucher-qr {
  width: 26%; aspect-ratio: 1; border-radius: 4px; background:
    conic-gradient(var(--petrol) 25%, transparent 0 50%, var(--petrol) 0 75%, transparent 0) 0 0 / 22% 22%;
  border: 3px solid var(--petrol); outline: 2px solid #fff; outline-offset: -5px;
}
.note-code { position: absolute; left: -4px; top: calc(96% + 60px); transform: rotate(-3deg); }
.arrow-code { position: absolute; left: calc(6% + 6px); top: calc(96% - 2px); width: 50px; height: 60px; }
.note-env { position: absolute; right: -8px; top: calc(9% - 122px); transform: rotate(4deg); text-align: right; }
.arrow-env { position: absolute; left: calc(84% - 14px); top: calc(9% - 58px); width: 50px; height: 60px; }
.arrow-code path, .arrow-env path { stroke: var(--copper); stroke-width: 3.5; }
@media (prefers-reduced-motion: no-preference) {
  .arrow-code path, .arrow-env path { animation-delay: .9s; }
  .arrow-code path + path, .arrow-env path + path { animation-delay: 1.4s; }
  .note-code, .note-env { opacity: 0; animation: fade .4s ease-out .7s forwards; }
}

@media (max-width: 900px) {
  .gift-hero-grid { grid-template-columns: 1fr; }
  .voucher-scene { max-width: 360px; margin: 120px 0 110px; }
}
@media (max-width: 420px) {
  .gift-title { font-size: 3.1rem; }
  .gift-title .hero-em { white-space: normal; }
  .voucher-scene { max-width: 300px; }
  .note-code, .note-env { font-size: 1.35rem; }
}

/* What's in the envelope */
.gift-box { padding: 0 0 var(--section); }
.gift-box-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.box-item {
  display: grid; gap: 4px; padding: 20px 24px; border-radius: 18px; border: 2px solid var(--petrol);
  box-shadow: 4px 4px 0 var(--petrol); background: var(--paper);
}
.box-item strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--petrol); line-height: 1.2; }
.box-copper { background: var(--copper-tint); transform: rotate(-0.8deg); }
.box-green { background: var(--green-tint); transform: rotate(0.6deg); }
.box-yellow { background: var(--yellow-tint); transform: rotate(-0.4deg); }
@media (max-width: 900px) { .gift-box-grid { grid-template-columns: 1fr; } }

/* Why they'll love it */
.gift-why { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.why-grid img { width: 80px; height: 80px; margin-bottom: 14px; }
.why-grid h3 { margin-bottom: 0.4em; }
.why-grid p { margin: 0; }
.why-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.why-feature-card { position: relative; border-radius: 24px; padding: clamp(24px, 3.5vw, 36px); }
.why-feature-card h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.why-feature-card p:last-of-type { margin-bottom: 0; }
.why-names { background: var(--paper); border: 2px solid var(--petrol); box-shadow: 5px 5px 0 var(--petrol); }
.why-backup { background: var(--petrol); color: var(--parchment); }
.why-backup h3 { color: var(--parchment); }
.mashup { font-family: var(--font-hand); font-weight: 700; font-size: 1.5em; color: var(--copper); line-height: 1; }
.note-holiday { position: absolute; right: 24px; bottom: -40px; color: var(--copper); transform: rotate(-4deg); font-size: 1.7rem; }
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
  .why-grid li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; }
  .why-grid img { grid-row: span 2; width: 72px; height: 72px; margin: 0; }
  .why-feature { grid-template-columns: 1fr; }
}

/* How they use it */
.gift-use { padding: var(--section) 0; }
.gift-use-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.use-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.use-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; }
.use-num {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff;
  background: var(--copper); border: 2px solid var(--petrol); box-shadow: 3px 3px 0 var(--petrol);
}
.use-steps li:nth-child(2) .use-num { background: var(--green); }
.use-steps li:nth-child(3) .use-num { background: var(--petrol); }
.use-steps strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--petrol); line-height: 1.2; }
.use-steps span:not(.use-num) { display: block; }
@media (max-width: 900px) { .gift-use-grid { grid-template-columns: 1fr; } }

/* Two people + good for */
.gift-two { background: var(--green-tint); padding: var(--section) 0; }
.gift-two-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.two-card { background: var(--petrol); color: var(--parchment); border-radius: 24px; padding: clamp(28px, 4vw, 44px); }
.two-card h2 { color: var(--parchment); font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.two-price { font-size: 1.2rem; color: var(--copper-tint); }
.two-price strong { font-family: var(--font-display); font-size: 3rem; color: var(--parchment); margin-right: 6px; }
.two-card .btn-copper { box-shadow: 4px 4px 0 var(--charcoal); border-color: var(--charcoal); }
.good-for { position: relative; }
.good-for-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.good-for .stickers { max-width: 420px; }
.note-putoff { margin-top: 24px; transform: rotate(-3deg); font-size: 1.7rem; }
@media (max-width: 900px) { .gift-two-grid { grid-template-columns: 1fr; } }

.final-trust { margin-top: 28px; color: var(--granite); font-size: 1rem !important; }
.gift-final em { white-space: nowrap; }

/* ---------- /save-the-name ---------- */
.stn-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.stn-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }

/* Save the Date card illustration */
.std-scene { position: relative; width: 100%; max-width: 400px; justify-self: center; aspect-ratio: 1 / 1.12; margin: 130px 0 130px; }
.std-card {
  position: absolute; left: 12%; top: 0; width: 76%; aspect-ratio: 148 / 210;
  background: linear-gradient(160deg, #FFFBF3 0%, #F8EEDD 100%);
  border: 2px solid var(--petrol); border-radius: 6px;
  box-shadow: 6px 6px 0 var(--petrol);
  transform: rotate(-3deg); z-index: 1;
  padding: 13% 10% 9%; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.std-card::before {
  content: ''; position: absolute; inset: 5.5%; border: 1.5px solid var(--copper); border-radius: 3px; pointer-events: none;
}
.std-card::after {
  content: ''; position: absolute; inset: calc(5.5% + 5px); border: 1px solid rgba(196, 87, 58, .4); border-radius: 2px; pointer-events: none;
}
.std-envelope {
  position: absolute; left: -2%; top: 10%; width: 64%; aspect-ratio: 162 / 114;
  background: var(--copper); border: 2px solid var(--petrol); border-radius: 6px;
  transform: rotate(-11deg); overflow: hidden;
}
.std-envelope::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background: linear-gradient(to bottom right, transparent 49.3%, rgba(47,75,74,.45) 50%, transparent 50.9%),
              linear-gradient(to bottom left, transparent 49.3%, rgba(47,75,74,.45) 50%, transparent 50.9%);
}
.std-tape {
  position: absolute; top: -14px; left: 50%; width: 38%; height: 28px; margin-left: -19%;
  background: #F7CB6E; transform: rotate(4deg); border-radius: 2px; z-index: 2;
}
.std-card > * { position: relative; z-index: 1; }
.std-card > .std-tape { position: absolute; }
.std-kicker {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--petrol); font-size: clamp(0.8rem, 1.5vw, 0.95rem); margin: 0;
}
.std-big {
  font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--copper);
  font-size: clamp(3.4rem, 7vw, 4.6rem); line-height: 0.95; margin: 2% 0 0; letter-spacing: -0.02em;
}
.std-dots { display: flex; gap: 8px; margin: 7% 0; }
.std-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.std-dots i:nth-child(2) { background: var(--copper); }
.std-dots i:nth-child(3) { background: var(--yellow); }
.std-old { position: relative; font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--charcoal); margin: 0; }
.std-old .strike { position: absolute; left: -8px; right: -8px; top: 32%; width: calc(100% + 16px); height: 0.7em; }
.std-new { font-family: var(--font-hand); font-weight: 700; color: #4F7F63; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.05; margin: 4% 0 0; }
.std-foot { margin-top: auto; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.std-valid {
  white-space: nowrap; font-weight: 700; font-size: clamp(0.75rem, 1.3vw, 0.88rem); letter-spacing: 0.04em; color: var(--petrol);
  border: 2px dashed var(--copper); border-radius: 8px; padding: 0.35em 0.6em; background: #fff;
}
.std-stamp {
  width: 31%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 3px double var(--green); color: #4F7F63; background: var(--green-tint);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(0.62rem, 1.1vw, 0.75rem); line-height: 1.15;
  transform: rotate(-12deg);
}
.note-decide { position: absolute; right: -10px; top: -122px; transform: rotate(4deg); text-align: right; }
.arrow-decide { position: absolute; left: calc(80% - 14px); top: -60px; width: 50px; height: 60px; }
.note-locked { position: absolute; right: -6px; top: calc(97% + 62px); transform: rotate(-3deg); text-align: right; }
.arrow-locked { position: absolute; left: calc(74% - 40px); top: calc(97% - 2px); width: 50px; height: 60px; }
.arrow-decide path, .arrow-locked path { stroke: var(--copper); stroke-width: 3.5; }
@media (prefers-reduced-motion: no-preference) {
  .arrow-decide path, .arrow-locked path { animation-delay: .9s; }
  .arrow-decide path + path, .arrow-locked path + path { animation-delay: 1.4s; }
  .note-decide, .note-locked { opacity: 0; animation: fade .4s ease-out .7s forwards; }
  .std-old .strike path { animation-delay: 1.2s; }
}
@media (max-width: 900px) {
  .stn-hero-grid { grid-template-columns: 1fr; }
  .std-scene { max-width: 340px; }
}
@media (max-width: 420px) {
  .std-scene { max-width: 280px; }
  .std-big { font-size: 2.9rem; }
  .std-dots { margin: 5% 0; }
  .std-new { font-size: 1.2rem; }
  .std-valid { white-space: nowrap; font-size: 0.7rem; padding: 0.3em 0.45em; }
  .std-stamp { font-size: 0.55rem; width: 29%; }
  .note-decide, .note-locked { font-size: 1.35rem; }
}

/* Honest bit + two options */
.stn-honest { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.stn-honest .section-head { max-width: 46rem; }
.stn-options { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.stn-option { border-radius: 24px; padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; align-items: flex-start; }
.stn-option h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 0.4em; }
.stn-option-tag { font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--copper); margin-bottom: 10px; transform: rotate(-2deg); }
.stn-option-pay { background: var(--petrol); color: var(--parchment); }
.stn-option-pay h3 { color: var(--parchment); }
.stn-option-pay .stn-option-tag { color: var(--copper-tint); }
.stn-option-pay .btn-copper { box-shadow: 4px 4px 0 var(--charcoal); border-color: var(--charcoal); margin-top: 8px; }
@media (min-width: 861px) { .stn-option-pay { align-self: start; position: sticky; top: 110px; } }
.stn-option-remind { background: var(--paper); border: 2px solid var(--petrol); box-shadow: 5px 5px 0 var(--petrol); }
.stn-remind-form { min-height: 0; align-self: stretch; width: 100%; margin-top: 8px; margin-bottom: -12px; }
.form-placeholder {
  width: 100%; margin-top: auto; padding: 18px 20px; border-radius: 14px;
  border: 2px dashed var(--copper); background: repeating-linear-gradient(-45deg, #FFFDF9 0 12px, #FBEDE6 12px 24px);
}
.form-placeholder p { margin: 0 0 6px; }
.form-placeholder-label { display: inline-block; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--copper); padding: 3px 10px; border-radius: 999px; }
.form-placeholder-fine { font-size: 0.92rem; color: var(--granite); margin-bottom: 0 !important; }
@media (max-width: 860px) { .stn-options { grid-template-columns: 1fr; } }

/* Why now */
.stn-why { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); }
.stn-title { font-size: clamp(2.4rem, 4.9vw, 3.9rem); }
@media (max-width: 900px) { .stn-title { font-size: clamp(2.4rem, 8.4vw, 3.9rem); } }
.stn-title .line, .stn-title .hero-em { white-space: nowrap; }
.reason-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.reason-grid .box-item { align-content: start; }
.reason-grid .box-item:nth-child(4) { transform: rotate(0.5deg); }
@media (max-width: 760px) { .reason-grid { grid-template-columns: 1fr; } }

.stn-feature { margin-top: clamp(40px, 5vw, 56px); }

/* Two people + note from Anna */
.stn-note { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; }
.stn-note p { font-size: 1.15rem; }
.note-anna { font-size: 2rem; transform: rotate(-3deg); transform-origin: left; }
@media (max-width: 520px) {
  .stn-note { grid-template-columns: 1fr; justify-items: start; }
  .stn-note .help-photo { max-width: 170px; }
}

/* ---------- Legal pages (/terms, /privacy, /data-ethics, /free-fix-promise) ---------- */
.legal-wrap { max-width: 820px; }
.legal-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); }
.legal-title {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem); line-height: 1; letter-spacing: -0.03em;
  font-weight: 650; margin-bottom: 0.4em;
}
.legal-title .line, .legal-title .hero-em { display: block; }
.legal-hero .lede { font-size: 1.15rem; max-width: 40rem; }
.legal-tabs { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.legal-tabs a {
  display: inline-block; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: var(--petrol);
  padding: 0.45em 0.95em; border-radius: 999px; border: 2px solid var(--petrol); background: var(--paper);
}
.legal-tabs a:hover { background: var(--green-tint); color: var(--petrol); }
.legal-tabs a[aria-current="page"] { background: var(--petrol); color: var(--parchment); }

.legal-toc {
  margin: 0 0 clamp(28px, 4vw, 44px); padding: 20px 24px; border: 2px dashed var(--warm-grey);
  border-radius: 18px; background: rgba(255, 253, 249, 0.6);
}
.legal-toc h2 { font-size: 1.2rem; margin-bottom: 0.7em; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.legal-toc li { margin: 0 0 6px; break-inside: avoid; font-size: 0.98rem; }
.legal-toc li span { font-family: var(--font-hand); font-weight: 700; color: var(--copper); font-size: 1.2rem; margin-right: 6px; }
.legal-toc a { color: var(--petrol); text-decoration-color: var(--copper); text-underline-offset: 3px; }
@media (max-width: 560px) { .legal-toc ol { columns: 1; } }

.legal-body { padding: 0 0 var(--section); }
.legal-section { padding: clamp(24px, 3vw, 34px) 0; border-top: 1px solid var(--warm-grey); scroll-margin-top: 100px; }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-num { font-family: var(--font-hand); font-weight: 700; color: var(--copper); font-size: 1.9rem; line-height: 1; margin: 0 0 4px; transform: rotate(-3deg); transform-origin: left; display: inline-block; }
.legal-section h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 0.55em; }
.legal-section p:last-child, .legal-section ul:last-child { margin-bottom: 0; }
.legal-list { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; }
.legal-list li { position: relative; padding-left: 26px; }
.legal-list li::before {
  content: ''; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--copper);
}
.legal-callout { margin: 1.2em 0 0; padding: 18px 22px; border-left: 4px solid var(--green); background: var(--paper); border-radius: 0 14px 14px 0; }
.legal-facts { margin: clamp(32px, 4vw, 48px) 0 0; padding: 22px 24px; border-radius: 18px; background: var(--green-tint); font-size: 0.98rem; }
.legal-facts p { margin: 0 0 4px; }
.legal-facts p:last-child { margin: 0; }
.legal-facts a { font-weight: 700; }

/* Free-Fix Promise */
.ff-cards { list-style: none; margin: 0 0 clamp(36px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ff-cards .box-item p { margin: 0; }
@media (max-width: 860px) { .ff-cards { grid-template-columns: 1fr; } }

/* /what-happens-next and /upload */
.next-steps { padding: 0 0 var(--section); }
.next-steps h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.next-steps .use-steps { margin-bottom: clamp(36px, 5vw, 56px); }
.next-steps .use-steps li { align-items: start; }
.next-steps .use-num { margin-top: 2px; }
.next-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 28px); }
.next-card { border-radius: 22px; padding: clamp(22px, 3vw, 32px); }
.next-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.next-card p:last-child { margin-bottom: 0; }
.next-card-yours { background: var(--paper); border: 2px solid var(--petrol); box-shadow: 5px 5px 0 var(--petrol); }
.next-card-email { background: var(--petrol); color: var(--parchment); }
.next-card-email h3 { color: var(--parchment); }
.next-card-email a { color: var(--parchment); text-decoration-color: var(--copper-tint); }
.note-kettle { display: block; margin-top: 10px; font-size: 1.7rem; transform: rotate(-2deg); transform-origin: left; }
@media (max-width: 760px) { .next-cards { grid-template-columns: 1fr; } }
.title-long .line, .title-long .hero-em { white-space: nowrap; }
@media (max-width: 600px) { .start-title.title-long { font-size: 10.4vw; } }
.next-deedpoll { margin: 0 0 clamp(28px, 4vw, 40px); padding: 20px 24px; border-left: 4px solid var(--copper); background: var(--copper-tint); border-radius: 0 14px 14px 0; }
.next-deedpoll h3 { font-size: 1.35rem; margin-bottom: 0.35em; }
.next-deedpoll p { margin: 0; }

/* ---------- /whats-included ---------- */
.wi-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.wi-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.wi-title .line, .wi-title .hero-em { white-space: nowrap; }

/* Receipt illustration */
.receipt-scene { --rp: 26px; position: relative; width: 100%; max-width: 420px; justify-self: center; padding: 24px 0 20px; }
.receipt {
  position: relative; width: 72%; background: var(--paper);
  border: 2px solid var(--petrol); border-radius: 6px; box-shadow: 6px 6px 0 var(--petrol);
  padding: 30px var(--rp) 22px; transform: rotate(2deg);
}
.receipt::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 40%; height: 28px; margin-left: -20%;
  background: #F7CB6E; transform: rotate(-4deg); border-radius: 2px;
}
.receipt-head { font-family: var(--font-display); font-weight: 650; color: var(--petrol); font-size: 1.25rem; text-align: center; margin: 0; line-height: 1.1; }
.receipt-sub { text-align: center; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; font-weight: 700; color: var(--granite); margin: 4px 0 14px; }
.receipt-lines { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--warm-grey); }
.receipt-lines li span:last-child { color: #4F7F63; font-weight: 700; }
.receipt-lines li:nth-child(3n+2) span:last-child { color: var(--copper-dark); }
.receipt-total {
  position: relative; display: flex; justify-content: space-between; margin: 12px 0 0; padding-top: 10px;
  border-top: 2px dashed var(--petrol); font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--petrol);
}
.receipt-total span:nth-child(2) { color: var(--copper-dark); }
.receipt-thanks { font-family: var(--font-hand); font-weight: 700; color: var(--copper); font-size: 1.4rem; text-align: center; margin: 12px 0 0; transform: rotate(-2deg); }
.receipt-total .note-extras { position: absolute; left: calc(100% + var(--rp) + 22px); top: 44px; transform: rotate(4deg); white-space: nowrap; font-weight: 600; color: var(--copper); }
.arrow-extras { position: absolute; left: calc(100% + var(--rp) - 4px); top: -2px; width: 64px; height: 46px; }
.arrow-extras path { stroke: var(--copper); stroke-width: 3.5; }
@media (max-width: 900px) {
  .wi-hero-grid { grid-template-columns: 1fr; }
  .receipt-scene { max-width: 380px; }
}
@media (max-width: 480px) {
  .receipt-scene { --rp: 18px; }
  .receipt { width: 74%; padding-top: 26px; }
  .receipt-lines { font-size: 0.82rem; }
  .receipt-total .note-extras { font-size: 1.3rem; left: calc(100% + var(--rp) + 14px); top: 36px; }
  .arrow-extras { width: 50px; height: 36px; }
}

.wi-also { border-bottom: 1px solid var(--warm-grey); }
.wi-feature { margin-top: 0; }
.wi-crosses { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wi-crosses li {
  position: relative; padding: 0.35em 0.9em; border-radius: 999px; background: var(--parchment);
  border: 1.5px solid var(--warm-grey); color: var(--granite); font-weight: 600;
}
.wi-human .founder-photo { display: flex; flex-direction: column; align-items: center; }
.wi-photo { background: #fff; padding: 10px 10px 34px; border-radius: 2px; }
.wi-photo-note { margin: 18px 0 0; text-align: center; transform: rotate(-2deg); }

/* ---------- /about ---------- */
.about-hero .about-title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.about-title .line, .about-title .hero-em { display: block; white-space: nowrap; }
.about-hero .note-me { top: -140px; right: -12px; }
.about-hero .about-hero-photo { margin-top: 110px; }
@media (max-width: 900px) { .about-hero .about-title { font-size: clamp(2.2rem, 8.4vw, 4.2rem); } }
@media (max-width: 900px) { .about-hero .about-hero-photo { margin-top: 160px; } .about-hero .note-me { top: -140px; } }
@media (max-width: 600px) { .about-hero .note-me { font-size: 1.3rem; right: -6px; top: -126px; } }
.about-kicker { font-family: var(--font-hand); font-weight: 700; color: var(--copper); font-size: 1.7rem; line-height: 1; margin: 0 0 10px; transform: rotate(-2deg); transform-origin: left; display: inline-block; }

/* Name timeline */
.about-names { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.name-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: none; }
.nl-item {
  position: relative; display: grid; gap: 6px; align-content: start;
  padding: 22px 22px 20px; border-radius: 18px; border: 2px solid var(--petrol);
  box-shadow: 4px 4px 0 var(--petrol); background: var(--parchment);
}
.nl-copper { background: var(--copper-tint); transform: rotate(-0.8deg); }
.nl-green { background: var(--green-tint); transform: rotate(0.6deg); }
.nl-yellow { background: var(--yellow-tint); transform: rotate(-0.4deg); }
.nl-now { background: var(--petrol); color: var(--parchment); transform: rotate(0.8deg); }
.nl-next { background: transparent; border-style: dashed; box-shadow: none; color: var(--granite); }
.nl-num {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff;
  background: var(--copper); border: 2px solid var(--petrol);
}
.nl-now .nl-num { background: var(--green); border-color: var(--parchment); }
.nl-next .nl-num { background: var(--warm-grey); color: var(--petrol); border-style: dashed; }
.nl-name { position: relative; justify-self: start; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2rem); color: var(--petrol); line-height: 1.1; display: inline-flex; align-items: center; gap: 8px; }
.nl-name .strike { position: absolute; left: -6px; right: -6px; top: 32%; width: calc(100% + 12px); height: 0.6em; }
.nl-now .nl-name { color: var(--parchment); }
.nl-now .tick path { stroke: var(--green); }
.nl-next .nl-name { color: var(--granite); }
.nl-note { font-size: 1rem; }
.nl-next .nl-note { font-family: var(--font-hand); font-weight: 700; color: var(--copper); font-size: 1.5rem; line-height: 1.1; }
.about-heritage { margin-top: clamp(36px, 5vw, 56px); max-width: 44rem; padding: 22px 26px; border-left: 4px solid var(--copper); background: var(--parchment); border-radius: 0 14px 14px 0; }
.about-heritage p:last-child { margin: 0; font-size: 1.15rem; }
@media (max-width: 900px) { .name-line { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .name-line { grid-template-columns: 1fr; gap: 16px; } }

/* Story */
.about-story { padding: var(--section) 0; }
.about-story-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-prose { position: relative; }
.about-prose p { font-size: 1.15rem; max-width: 36em; }
.about-prose strong { color: var(--petrol); }
.about-note-passport { font-size: 1.8rem; transform: rotate(-3deg); transform-origin: left; display: inline-block; margin-top: 4px; }
@media (max-width: 900px) { .about-story-grid { grid-template-columns: 1fr; } .about-story .section-head { margin-bottom: 0; } }

/* Engineer */
.about-eng { background: var(--green-tint); padding: var(--section) 0; }
.about-eng-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-eng p { font-size: 1.1rem; max-width: 36em; }
.about-cv { position: sticky; top: 110px; }
.about-cv-list { flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 900px) {
  .about-eng-grid { grid-template-columns: 1fr; }
  .about-cv { position: static; }
  .about-cv-list { flex-direction: row; }
}

/* Done this before */
.about-before { padding-bottom: var(--section); }

/* Believe */
.about-believe { background: var(--petrol); color: var(--parchment); padding: var(--section) 0; }
.about-believe h2, .about-believe h3 { color: var(--parchment); }
.about-believe h2 em { color: var(--copper-tint); }
.about-believe .section-head p { color: #DCE5E0; }
.believe-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.believe-card { background: var(--granite); border-radius: 22px; padding: clamp(24px, 3vw, 34px); }
.believe-card:nth-child(2) { background: var(--copper); }
.believe-num { font-family: var(--font-hand); font-weight: 700; font-size: 2rem; color: var(--yellow); line-height: 1; display: block; margin-bottom: 10px; }
.believe-card h3 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
.believe-card p { margin: 0; color: #F1F4F2; }
.about-believe .text-link { color: var(--parchment); }
.about-believe .text-link:hover { color: var(--copper-tint); }
@media (max-width: 900px) { .believe-grid { grid-template-columns: 1fr; } }

/* Off the clock */
.about-off { padding: var(--section) 0; }
.off-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.5vw, 44px); align-items: start; }
.off-card h3 { margin: 22px 0 0.35em; }
.off-card p { margin: 0; }
.print-tilt { transform: rotate(-2deg); }
.print-tilt-r { transform: rotate(2deg); }
.off-card .print img { aspect-ratio: 4 / 5; }
.off-photo-placeholder { aspect-ratio: 4 / 5; display: grid; align-content: center; text-align: center; transform: rotate(1.5deg); }
@media (max-width: 1000px) { .off-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .off-grid { grid-template-columns: 1fr; gap: 40px; } .off-card { max-width: 380px; } }

/* Just me */
.about-me { background: var(--paper); border-top: 1px solid var(--warm-grey); padding: var(--section) 0; }
.about-me h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.about-me > .wrap > p { font-size: 1.12rem; }
.about-final-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 10px; }
.about-off .section-head { max-width: 52rem; }
.about-final-title .line { display: block; }
.about-before .founder-photo { display: flex; flex-direction: column; align-items: center; }
.arrow-last { width: 46px; height: 56px; margin-top: -30px; position: relative; z-index: 1; }
.arrow-last path { stroke: var(--copper); stroke-width: 3.5; }
.note-last { margin-top: 4px; transform: rotate(-3deg); color: var(--copper); white-space: nowrap; }

/* ---------- /how-it-works ---------- */
.hiw-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.hiw-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.hiw-title { font-size: clamp(3rem, 6.4vw, 5.4rem); }
.hiw-title .line, .hiw-title .hero-em { white-space: nowrap; }
@media (max-width: 900px) { .hiw-title { font-size: clamp(2.3rem, 10.4vw, 4.6rem); } }

/* To-do list illustration */
.todo-scene { position: relative; width: 100%; max-width: 440px; justify-self: center; padding: 24px 0 20px; }
.todo {
  position: relative; width: 74%; background: var(--paper);
  border: 2px solid var(--petrol); border-radius: 8px; box-shadow: 6px 6px 0 var(--petrol);
  padding: 30px 24px 22px; transform: rotate(-2deg);
}
.todo::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 40%; height: 28px; margin-left: -20%;
  background: #F7CB6E; transform: rotate(3deg); border-radius: 2px;
}
.todo-head { font-family: var(--font-display); font-weight: 650; color: var(--petrol); font-size: 1.3rem; margin: 0 0 12px; line-height: 1.1; }
.todo-lines { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.todo-lines li { padding: 6px 0; border-bottom: 1px dashed var(--warm-grey); line-height: 1.3; }
.todo-lines li:last-child { border-bottom: 0; }
.done-me span { position: relative; color: var(--granite); }
.done-me .strike { top: 25%; }
.yours { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--petrol); }
.yours .box { flex: none; width: 20px; height: 20px; border: 2px solid var(--petrol); border-radius: 4px; position: relative; }
.yours .tick { position: absolute; left: -2px; top: -8px; width: 24px; height: 22px; }
.todo-lines li.yours:first-of-type, .todo-lines .done-me + .yours { margin-top: 6px; padding-top: 12px; border-top: 2px dashed var(--petrol); }
.arrow-todo { position: absolute; left: calc(74% + 6px); top: 30%; width: 60px; height: 52px; }
.arrow-todo path { stroke: var(--copper); stroke-width: 3.5; }
.note-todo { position: absolute; left: calc(74% + 24px); top: calc(30% - 62px); transform: rotate(5deg); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .done-me .strike path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw .5s ease-out forwards; }
  .done-me:nth-child(1) .strike path { animation-delay: .4s; }
  .done-me:nth-child(2) .strike path { animation-delay: .6s; }
  .done-me:nth-child(3) .strike path { animation-delay: .8s; }
  .done-me:nth-child(4) .strike path { animation-delay: 1s; }
  .done-me:nth-child(5) .strike path { animation-delay: 1.2s; }
  .done-me:nth-child(6) .strike path { animation-delay: 1.4s; }
  .arrow-todo path { animation-delay: 1.6s; }
  .note-todo { opacity: 0; animation: fade .4s ease-out 1.5s forwards; }
}
@media (max-width: 900px) {
  .hiw-hero-grid { grid-template-columns: 1fr; }
  .todo-scene { max-width: 400px; margin-top: 30px; }
}
@media (max-width: 480px) {
  .todo { width: 72%; padding: 26px 16px 18px; }
  .todo-lines { font-size: 0.82rem; }
  .todo-head { font-size: 1.15rem; }
  .note-todo { font-size: 1.3rem; left: calc(72% + 12px); top: calc(30% - 52px); }
  .arrow-todo { left: calc(72% + 2px); width: 46px; height: 40px; }
}

/* Short version */
.hiw-short { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hiw-short li { position: relative; }
.hiw-short img { width: 88px; height: 88px; margin-bottom: 14px; }
.hiw-num { position: absolute; left: 76px; top: -6px; font-family: var(--font-hand); font-weight: 700; font-size: 2.4rem; color: var(--copper); line-height: 1; }
.hiw-short h3 { margin-bottom: 0.4em; }
.hiw-short p { margin: 0; }
@media (max-width: 860px) {
  .hiw-short { grid-template-columns: 1fr; gap: 26px; }
  .hiw-short li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; }
  .hiw-short img { grid-row: span 2; width: 72px; height: 72px; margin: 0; }
  .hiw-num { left: 58px; top: -10px; font-size: 2rem; }
}

/* Routes */
.hiw-routes { padding: var(--section) 0; }
.hiw-route-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hiw-route-grid .box-item { align-content: start; gap: 8px; padding: 24px 26px; }
.hiw-route-grid .box-item:nth-child(3) { transform: rotate(0.5deg); }
.hiw-route-tag { font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--copper); }
.hiw-routes .fine { margin-top: 2.5rem; }
@media (max-width: 900px) { .hiw-route-grid { grid-template-columns: 1fr; } }

/* Full journey */
.hiw-journey { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.journey { list-style: none; margin: 0; padding: 0; max-width: 46rem; position: relative; }
.journey::before { content: ''; position: absolute; left: 27px; top: 20px; bottom: 20px; border-left: 3px dashed var(--warm-grey); }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 30px; }
.step:last-child { padding-bottom: 0; }
.step-num {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-hand); font-weight: 700; font-size: 2rem; line-height: 1;
}
.step-you .step-num { background: var(--copper); color: #fff; box-shadow: 3px 3px 0 var(--petrol); }
.step-me .step-num { background: var(--petrol); color: var(--parchment); }
.step-body { border-radius: 18px; padding: 18px 22px; }
.step-you .step-body { background: var(--paper); border: 2px solid var(--petrol); box-shadow: 4px 4px 0 var(--petrol); }
.step-me .step-body { background: var(--green-tint); }
.step-maybe .step-body { border-style: dashed; box-shadow: none; }
.step-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.step-you .step-tag { color: var(--copper-dark); }
.step-me .step-tag { color: var(--granite); }
.step-if { text-transform: none; letter-spacing: 0; font-weight: 600; }
.step h3 { margin-bottom: 0.3em; }
.step p { margin: 0; }
.journey-done { max-width: 46rem; margin: 26px 0 0 78px; }
.journey-done .note { font-size: 2rem; display: inline-block; transform: rotate(-3deg); }
@media (max-width: 560px) {
  .journey::before { left: 21px; }
  .step { grid-template-columns: 44px 1fr; gap: 14px; }
  .step-num { width: 44px; height: 44px; font-size: 1.7rem; }
  .step-body { padding: 16px 18px; }
  .journey-done { margin-left: 58px; }
  .journey-done .note { font-size: 1.5rem; white-space: nowrap; }
}

/* DVLA pack */
.hiw-dvla { background: var(--green-tint); padding: var(--section) 0; }
.hiw-dvla-icon { width: 104px; height: 104px; margin-bottom: 12px; }
.hiw-dvla-cards { margin-top: 0; }
.hiw-dvla-cards .ticks { margin-bottom: 1em; }
.hiw-dvla-cards .why-names .ticks { margin-bottom: 0; }
.hiw-dvla-fine { margin-top: 2.5rem; }

.hiw-never { border-bottom: 1px solid var(--warm-grey); }

/* ---------- /faqs ---------- */
.faq-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); }
.faq-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.faq-title { font-size: clamp(3rem, 6.2vw, 5.4rem); }
.faq-title .line, .faq-title .hero-em { white-space: nowrap; }
.faq-updated { font-size: 0.95rem; color: var(--granite); margin: 0; }
@media (max-width: 900px) {
  .faq-hero-grid { grid-template-columns: 1fr; }
  .faq-title { font-size: clamp(2.2rem, 9.6vw, 4.4rem); }
}

/* Message thread illustration */
.dm-scene { position: relative; width: 100%; max-width: 420px; justify-self: center; padding-top: 74px; }
.dm {
  display: grid; gap: 12px; background: var(--paper); border: 2px solid var(--petrol); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--petrol); padding: 24px 20px; transform: rotate(1.5deg);
}
.dm p { margin: 0; max-width: 82%; padding: 10px 16px; line-height: 1.25; }
.dm-q {
  justify-self: start; background: var(--green-tint); color: var(--petrol); font-weight: 700;
  border-radius: 18px 18px 18px 4px; font-size: 1rem;
}
.dm-a {
  justify-self: end; background: var(--copper); color: #fff;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.55rem; line-height: 1.05;
  border-radius: 18px 18px 4px 18px; transform: rotate(-1.5deg); white-space: nowrap; max-width: none;
}
.dm-a + .dm-q { margin-top: 6px; }
.note-dm { position: absolute; left: 0; top: 0; transform: rotate(-4deg); white-space: nowrap; }
.arrow-dm { position: absolute; left: 168px; top: 4px; width: 48px; height: 58px; }
.arrow-dm path { stroke: var(--copper); stroke-width: 3.5; }
@media (prefers-reduced-motion: no-preference) {
  .dm p { opacity: 0; animation: fade .35s ease-out forwards; }
  .dm p:nth-child(1) { animation-delay: .2s; }
  .dm p:nth-child(2) { animation-delay: .7s; }
  .dm p:nth-child(3) { animation-delay: 1.2s; }
  .dm p:nth-child(4) { animation-delay: 1.7s; }
  .arrow-dm path { animation-delay: 2s; }
  .note-dm { opacity: 0; animation: fade .4s ease-out 1.9s forwards; }
}
@media (max-width: 900px) { .dm-scene { max-width: 380px; } }
@media (max-width: 480px) {
  .dm { padding: 20px 14px; }
  .dm p { max-width: 88%; }
  .dm-a { font-size: 1.35rem; }
  .note-dm { font-size: 1.35rem; }
  .arrow-dm { left: 140px; }
}

/* Topic chips */
.faq-topics { padding: 0 0 clamp(16px, 3vw, 32px); }
.faq-topics .chips { margin: 0; }
@media (max-width: 600px) {
  .faq-topics .chips {
    flex-direction: row; align-items: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 12px;
  }
  .faq-topics .chips::-webkit-scrollbar { display: none; }
  .faq-topics .chip { white-space: nowrap; font-size: 0.95rem; }
}
.chip-link { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.chip-link:hover { color: var(--copper-dark); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--petrol); }

/* Question groups */
.faq-group { padding: clamp(40px, 6vw, 72px) 0; scroll-margin-top: 72px; }
.faq-group:nth-child(even) { background: var(--paper); border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.faq-group-inner { max-width: calc(48rem + 2 * var(--gutter)); }
.faq-group h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.faq-group-intro { font-size: 1.15rem; margin-bottom: 1.4rem; }
.faq-group .faq-list details p { max-width: none; }

.faq-help { text-align: center; }
.faq-help-inner { max-width: calc(40rem + 2 * var(--gutter)); }
.faq-help h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.faq-help p { font-size: 1.1rem; }

/* ---------- /divorce ---------- */
.dv-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.dv-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.dv-title .line, .dv-title .hero-em { white-space: nowrap; }
.dv-chips { margin-top: 1.2rem; }

/* Name card illustration */
.dv-scene { display: flex; justify-content: center; padding: 30px 0 10px; }
.dv-wrap { position: relative; margin-right: 130px; }
.dv-card {
  position: relative; background: var(--paper);
  border: 2px solid var(--petrol); border-radius: 10px; box-shadow: 6px 6px 0 var(--petrol);
  padding: 30px 30px 26px; transform: rotate(-2deg);
}
.dv-card::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 40%; height: 28px; margin-left: -20%;
  background: #F7CB6E; transform: rotate(-3deg); border-radius: 2px;
}
.dv-card-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--granite); margin: 0 0 4px; }
.dv-old { position: relative; display: inline-block; font-family: var(--font-display); font-size: 1.45rem; color: var(--granite); margin: 0 0 14px; }
.dv-old .strike { position: absolute; left: -6px; top: 30%; width: calc(100% + 12px); height: 0.7em; }
.dv-old .strike path { stroke: var(--copper); stroke-width: 3.5; }
.dv-next { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; line-height: 1; color: #4F7F63; margin: 0 0 10px; padding-top: 14px; border-top: 2px dashed var(--petrol); }
.dv-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dv-options li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--petrol); font-size: 1rem; line-height: 1.25; white-space: nowrap; }
.dv-options .box { flex: none; width: 22px; height: 22px; border: 2px solid var(--petrol); border-radius: 5px; background: #fff; }
.dv-heart {
  position: absolute; right: -16px; top: -18px; width: 40px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-8-4.6-8-10.4A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 8 2.5c0 5.8-8 10.4-8 10.4z' fill='%23C4573A' stroke='%232F4B4A' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(12deg);
}
.dv-spark { position: absolute; width: 16px; height: 16px; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.dv-spark-1 { left: -14px; bottom: 34px; }
.dv-spark-2 { left: -4px; bottom: 12px; width: 10px; height: 10px; background: var(--green); }
/* Arrow: tip sits on the card edge level with the two options. Note sits clear above the arrow's tail. */
.arrow-dv { position: absolute; left: calc(100% + 10px); bottom: 30px; width: 60px; height: 52px; }
.arrow-dv path { stroke: var(--copper); stroke-width: 3.5; }
.note-dv { position: absolute; left: calc(100% + 40px); bottom: 98px; transform: rotate(5deg); white-space: nowrap; font-size: 1.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .dv-old .strike path { animation-delay: .5s; animation-duration: .5s; }
  .arrow-dv path { animation-delay: 1.3s; }
  .arrow-dv path + path { animation-delay: 1.7s; }
  .note-dv { opacity: 0; animation: fade .4s ease-out 1.1s forwards; }
}
@media (max-width: 900px) {
  .dv-hero-grid { grid-template-columns: 1fr; }
  .dv-title { font-size: clamp(3rem, 14vw, 5.75rem); }
}
@media (max-width: 480px) {
  .dv-scene { justify-content: flex-start; padding-left: 10px; }
  .dv-wrap { margin-right: 110px; }
  .dv-card { padding: 26px 18px 20px; }
  .dv-old { font-size: 1.2rem; }
  .dv-next { font-size: 1.45rem; }
  .dv-options li { font-size: 0.88rem; gap: 9px; }
  .dv-options .box { width: 19px; height: 19px; }
  .arrow-dv { left: calc(100% + 8px); bottom: 24px; width: 46px; height: 40px; }
  .note-dv { font-size: 1.4rem; left: calc(100% + 28px); bottom: 76px; }
}

/* The hug */
.dv-hug { background: var(--petrol); color: var(--parchment); padding: var(--section) 0; }
.dv-hug-inner { max-width: 44rem; }
.dv-hug h2 { color: var(--parchment); }
.dv-hug h2 em { color: var(--copper-tint); }
.dv-hug p { font-size: 1.15rem; }
.dv-hug a { color: var(--parchment); text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dv-hug a:hover { color: var(--copper-tint); }
.dv-sign { color: var(--copper-tint); font-size: 2.1rem; transform: rotate(-3deg); transform-origin: left; margin-top: 0.4rem; }

/* Good to know + deed poll */
.dv-know { background: var(--paper); border-bottom: 1px solid var(--warm-grey); }
.dv-deed .section-head { max-width: 40rem; }
.dv-deed-cards { margin-top: 0; }
.dv-crosses { margin-bottom: 1em; }
.dv-crosses li::before {
  background: var(--copper-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8' fill='none' stroke='%232F4B4A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.dv-how { background: var(--parchment); }
.dv-ticks { margin-bottom: 0; }
.dv-deed-cards .why-backup p { margin-bottom: 1em; }
.dv-deed-cards .why-backup .ticks li::before { background-color: var(--green); }
.dv-done { color: var(--copper-tint); font-size: 2rem; margin-top: 1.4rem !important; transform: rotate(-3deg); transform-origin: left; }
.dv-deed .section-head { max-width: 44rem; }
.dv-deed .section-head strong { color: var(--petrol); }

/* ---------- /why-people-change-their-name ---------- */
.wr-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.wr-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.wr-title .line, .wr-title .hero-em { white-space: nowrap; }

/* Name sticker illustration. Everything inside .wr-wrap is placed in px so the
   arrow and note stay tied to the stickers; the whole scene scales with --s. */
.wr-scene { --s: 1; position: relative; width: calc(390px * var(--s)); height: calc(420px * var(--s)); justify-self: center; }
.wr-wrap { position: absolute; left: 0; top: 0; width: 390px; height: 420px; transform: scale(var(--s)); transform-origin: 0 0; }
.wr-tag {
  position: absolute; width: 240px; border: 2px solid var(--petrol); border-radius: 14px;
  background: #fff; box-shadow: 5px 5px 0 var(--petrol); overflow: hidden;
}
.wr-band {
  margin: 0; padding: 8px 16px 9px; color: #fff; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; line-height: 1.1;
}
.wr-band span { display: block; font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wr-body { padding: 12px 18px 14px; }
.wr-old { position: relative; display: inline-block; margin: 0; font-family: var(--font-display); font-size: 19px; color: var(--granite); line-height: 1.2; }
.wr-old .strike { position: absolute; left: -5px; top: 30%; width: calc(100% + 10px); height: 0.7em; }
.wr-old .strike path { stroke: var(--copper); stroke-width: 3.5; }
.wr-new { margin: 2px 0 0; font-family: var(--font-hand); font-weight: 700; font-size: 34px; line-height: 1; color: var(--copper); white-space: nowrap; }
.wr-tag-1 { left: 0; top: 10px; transform: rotate(-6deg); }
.wr-tag-1 .wr-band { background: var(--green); }
.wr-tag-2 { left: 146px; top: 132px; transform: rotate(5deg); }
.wr-tag-2 .wr-band { background: var(--petrol); }
.wr-tag-3 { left: 26px; top: 268px; transform: rotate(-2deg); }
.wr-tag-3 .wr-band { background: var(--copper); }
.wr-spark { position: absolute; width: 18px; height: 18px; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.wr-spark-1 { left: 292px; top: 318px; }
.wr-spark-2 { left: 316px; top: 302px; width: 11px; height: 11px; background: var(--green); }
/* Note sits in the empty top-right corner; arrow runs from under it down to the top edge of sticker 2. */
.note-wr { position: absolute; left: 272px; top: 0; transform: rotate(4deg); white-space: nowrap; font-size: 27px; line-height: 1; }
.arrow-wr { position: absolute; left: 292px; top: 82px; width: 36px; height: 56px; }
.arrow-wr path { stroke: var(--copper); stroke-width: 3.5; }
@media (prefers-reduced-motion: no-preference) {
  .wr-tag-1 .strike path { animation-delay: .5s; animation-duration: .5s; }
  .wr-tag-2 .strike path { animation-delay: .8s; animation-duration: .5s; }
  .wr-tag-3 .strike path { animation-delay: 1.1s; animation-duration: .5s; }
  .wr-new { opacity: 0; animation: fade .4s ease-out forwards; }
  .wr-tag-1 .wr-new { animation-delay: .9s; }
  .wr-tag-2 .wr-new { animation-delay: 1.2s; }
  .wr-tag-3 .wr-new { animation-delay: 1.5s; }
  .note-wr { opacity: 0; animation: fade .4s ease-out 1.7s forwards; }
  .arrow-wr path { animation-delay: 1.9s; }
  .arrow-wr path + path { animation-delay: 2.3s; }
}
@media (max-width: 900px) {
  .wr-hero-grid { grid-template-columns: 1fr; }
  .wr-title { font-size: clamp(3rem, 14vw, 5.75rem); }
}
@media (max-width: 480px) { .wr-scene { --s: 0.84; justify-self: start; } }
@media (max-width: 370px) { .wr-scene { --s: 0.76; } }

/* Proof key */
.wr-key { background: var(--paper); padding: var(--section) 0; border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.wr-key-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; }
.wr-key-grid .box-item { align-content: start; gap: 8px; padding: 24px 26px; }
@media (max-width: 760px) { .wr-key-grid { grid-template-columns: 1fr; } }

.wr-proof {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 700; color: var(--petrol); line-height: 1.2;
  padding: 0.35em 0.8em; border-radius: 999px; border: 1.5px solid var(--petrol);
}
.wr-proof::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wr-proof-cert { background: var(--green-tint); }
.wr-proof-cert::before { background: var(--green); }
.wr-proof-deed { background: var(--copper-tint); }
.wr-proof-deed::before { background: var(--copper); }

/* Jump links */
.wr-topics { padding: clamp(40px, 6vw, 64px) 0 0; }

/* Reason groups */
.wr-group { padding: clamp(48px, 7vw, 88px) 0; scroll-margin-top: 72px; }
.wr-group + .wr-group { border-top: 1px solid var(--warm-grey); }
.wr-group .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.wr-group .hiw-route-tag { display: block; margin-bottom: 6px; }
.wr-group h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.wr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wr-card {
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 22px 24px;
  background: var(--paper); border: 2px solid var(--petrol); border-radius: 18px; box-shadow: 4px 4px 0 var(--petrol);
}
.wr-card h3 { font-size: 1.25rem; margin: 0; }
.wr-card p { margin: 0 0 6px; }
.wr-card .mashup { font-size: 1.35em; display: block; margin-bottom: 4px; }
.wr-card-warm { background: var(--copper-tint); }
.wr-group .fine { margin-top: 1.8rem; }
@media (max-width: 960px) { .wr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .wr-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Anna */
.wr-me p a { font-weight: 700; }

/* ---------- Proof check calculator (ProofCheck.astro, reusable) ---------- */
.pc {
  position: relative; background: var(--paper); border: 2px solid var(--petrol); border-radius: 24px;
  box-shadow: 6px 6px 0 var(--petrol); padding: clamp(20px, 3vw, 32px);
}
.pc-form { display: grid; gap: 22px; }
.pc-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.pc-q legend {
  display: flex; gap: 10px; align-items: baseline; padding: 0; margin-bottom: 12px;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--petrol); line-height: 1.25;
}
.pc-num { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; color: var(--copper); line-height: 1; flex: none; }
.pc-hint { margin: -6px 0 10px; font-size: 0.95rem; color: var(--granite); }
.pc-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-opts-stack { flex-direction: column; align-items: stretch; }
.pc-opt { position: relative; cursor: pointer; }
.pc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-opt span {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0.55em 1.05em; border: 2px solid var(--petrol); border-radius: 14px; background: #fff;
  font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--charcoal);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pc-opt span::before {
  content: ''; flex: none; width: 20px; height: 20px; border: 2px solid var(--petrol); border-radius: 50%; background: #fff;
}
.pc-opt input[type="checkbox"] + span::before { border-radius: 6px; }
.pc-opt:hover span { background: var(--parchment); }
.pc-opt input:checked + span { background: var(--green-tint); box-shadow: 3px 3px 0 var(--petrol); transform: translate(-1px, -1px); }
.pc-opt input:checked + span::before {
  background: var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.pc-opt input:focus-visible + span { outline: 3px solid var(--copper); outline-offset: 3px; }
.pc-aside { margin: 12px 0 0; font-size: 0.98rem; }

.pc-result { margin-top: 24px; padding-top: 22px; border-top: 2px dashed var(--warm-grey); }
.pc-waiting { margin: 0; font-family: var(--font-hand); font-weight: 600; font-size: 1.5rem; color: var(--granite); line-height: 1.15; }
.pc-answer { display: grid; justify-items: start; gap: 2px; border-radius: 18px; padding: 20px 22px; }
.pc-answer-cert { background: var(--green-tint); }
.pc-answer-deed { background: var(--copper-tint); }
.pc-answer h3 { margin: 10px 0 8px; font-size: clamp(1.45rem, 2.4vw, 1.75rem); }
.pc-answer p { margin: 0 0 0.7em; }
.pc-answer p:last-child { margin-bottom: 0; }
.pc-bonus strong { color: var(--petrol); }
.pc-ticks { margin: 4px 0 0.9em; gap: 8px; }
.pc-small { font-size: 0.95rem; }
.pc-next { margin-top: 18px; }
.pc-next > p { margin: 0 0 14px; }
.pc-next > p.pc-small { margin: 16px 0 0; }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pc-reset {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--granite);
  text-decoration: underline; text-decoration-color: var(--warm-grey); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.pc-reset:hover { color: var(--copper-dark); }
@media (prefers-reduced-motion: no-preference) {
  .pc-q:not([hidden]), .pc-answer:not([hidden]), .pc-next:not([hidden]) { animation: pc-in .25s ease-out; }
}
@keyframes pc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .pc-opts { flex-direction: column; align-items: stretch; }
  .pc-actions .btn { width: 100%; }
}

/* ---------- /what-proof-do-i-need ---------- */
.wp-hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.wp-hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.wp-hero-copy { padding-top: clamp(0px, 3vw, 40px); }
.wp-short { font-weight: 600; color: var(--petrol); max-width: 30em; }
.wp-chips { margin-top: 1.4rem; }
/* Note sits in its own row above the calculator card, right-aligned, so it never covers the card. */
.wp-calc-wrap { position: relative; padding-top: 44px; }
.note-wp { position: absolute; right: 28px; top: 0; transform: rotate(3deg); font-size: 1.9rem; white-space: nowrap; }
.wp-cards { margin-top: 0; }
.wp-cards .wr-proof { margin-bottom: 14px; }
.wp-cards .why-backup .wr-proof { color: var(--petrol); }
.wp-cards .ticks { margin-bottom: 1em; }
.wp-cards .why-backup .ticks { margin-bottom: 0; }
.wp-done { color: var(--copper-tint); font-size: 2rem; margin-top: 1.4rem !important; transform: rotate(-3deg); transform-origin: left; }
.wp-how .fine a { white-space: normal; }
@media (max-width: 900px) {
  .wp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .wp-hero-copy { padding-top: 0; }
}
@media (max-width: 420px) {
  .note-wp { right: 12px; font-size: 1.7rem; }
}
.pc [hidden] { display: none !important; }
.pc-answer h3 em { color: var(--copper-dark); font-weight: 500; }

/* /what-proof-do-i-need: snags + what's a deed poll */
.wp-snags { background: var(--paper); border-bottom: 1px solid var(--warm-grey); }
.wp-deed { padding: var(--section) 0; }
.wp-deed-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.wp-deed-copy p { max-width: 34em; }
.wp-deed-copy strong { color: var(--petrol); }
/* Paper illustration: note, paper and sparkles all placed inside one fixed-size wrapper. */
.wp-paper-scene { justify-self: center; }
.wp-paper-wrap { position: relative; width: 320px; padding-top: 58px; }
.note-paper { position: absolute; right: 0; top: 0; transform: rotate(3deg); font-size: 1.8rem; white-space: nowrap; }
.wp-paper {
  position: relative; width: 300px; height: 380px; padding: 30px 30px 26px; transform: rotate(-2.5deg);
  background: #FBF6EC; border: 2px solid var(--petrol); border-radius: 6px; box-shadow: 6px 6px 0 var(--petrol);
  background-image: radial-gradient(rgba(66,101,100,0.06) 1px, transparent 1px); background-size: 6px 6px;
}
.wp-paper-title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--petrol); letter-spacing: 0.02em; }
.wp-paper-sub { margin: 2px 0 22px; text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--granite); }
.wp-line { display: block; height: 7px; border-radius: 4px; background: var(--warm-grey); margin-bottom: 12px; }
.wp-line-short { width: 62%; }
.wp-sigs { position: absolute; left: 30px; right: 30px; bottom: 34px; display: flex; gap: 22px; }
.wp-sigs span { flex: 1; border-bottom: 2px solid var(--petrol); height: 28px; }
.wp-seal {
  position: absolute; right: 22px; bottom: 82px; width: 74px; height: 74px; border-radius: 50%;
  background: var(--copper); box-shadow: inset 0 0 0 5px var(--copper-dark), inset 0 0 0 8px #E9967E, 2px 3px 0 rgba(47,75,74,0.35);
  transform: rotate(12deg);
}
.wp-seal::after {
  content: ''; position: absolute; inset: 22px; background: #F7D9CE;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.wp-spark-1 { left: -18px; top: 120px; }
.wp-spark-2 { left: -6px; top: 146px; width: 10px; height: 10px; background: var(--green); }
@media (max-width: 900px) {
  .wp-deed-grid { grid-template-columns: 1fr; }
  .wp-paper-scene { margin-top: 8px; }
}
@media (max-width: 380px) {
  .wp-paper-scene { transform: scale(0.88); transform-origin: top center; margin-bottom: -40px; }
}

/* ---------- Blog guides (/change-name-after-marriage and future posts, gd- classes) ---------- */
.gd-hero .gd-title { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.gd-title .line, .gd-title .hero-em { display: block; white-space: nowrap; }
.gd-eyebrow { font-size: 0.95rem; font-weight: 700; color: var(--granite); margin-bottom: 1rem; }
.gd-eyebrow a { color: var(--copper-dark); }
.gd-eyebrow span { margin: 0 4px; color: var(--warm-grey); }
.gd-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; max-width: 34em; }
.gd-byline img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--petrol); flex: none; }
.gd-byline p { margin: 0; font-size: 0.98rem; line-height: 1.45; }
.gd-byline span { color: var(--granite); font-size: 0.9rem; }
.gd-hero .note-me { top: -140px; right: -12px; }
.gd-hero .gd-hero-photo { margin-top: 110px; }
.gd-hero .new-name { white-space: nowrap; }
@media (max-width: 900px) {
  .gd-hero .gd-title { font-size: clamp(2.2rem, 9vw, 4.2rem); }
  .gd-hero .gd-hero-photo { margin-top: 160px; }
  .gd-hero .note-me { top: -140px; }
}
@media (max-width: 600px) { .gd-hero .note-me { font-size: 1.3rem; right: -6px; top: -126px; } }

.gd-short-wrap { padding: 0 0 clamp(40px, 6vw, 72px); }
.gd-short {
  position: relative; max-width: 52rem; background: var(--paper); border: 2px solid var(--petrol);
  border-radius: 24px; box-shadow: 6px 6px 0 var(--petrol); padding: clamp(24px, 4vw, 44px);
}
.gd-short h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.gd-short ol { margin: 0; padding: 0; list-style: none; counter-reset: gd; display: grid; gap: 14px; }
.gd-short li { counter-increment: gd; position: relative; padding-left: 44px; font-size: 1.08rem; }
.gd-short li::before {
  content: counter(gd); position: absolute; left: 0; top: -0.15em;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--copper);
}
.gd-short li strong { color: var(--petrol); }
.gd-short-note { position: absolute; right: 28px; bottom: calc(100% + 6px); transform: rotate(3deg); white-space: nowrap; }
.gd-short-wrap { padding-top: 28px; }

.gd-topics { padding-bottom: 0; }
.gd-section { padding: clamp(56px, 8vw, 104px) 0; scroll-margin-top: 72px; }
.gd-section .section-head .hiw-route-tag { display: block; margin-bottom: 6px; }
.gd-section h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.gd-paper { background: var(--paper); border-top: 1px solid var(--warm-grey); border-bottom: 1px solid var(--warm-grey); }
.gd-proof-none { background: var(--paper); }
.gd-proof-none::before { background: var(--warm-grey); }

.gd-proof-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.gd-proof-grid .section-head p { font-size: 1.08rem; }
.gd-proof-grid .section-head .fine { margin-top: 0.5rem; }
@media (max-width: 900px) { .gd-proof-grid { grid-template-columns: 1fr; } }

.gd-order-grid .box-item { gap: 8px; }

.gd-mine-key {
  display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--copper-dark);
  background: var(--copper-tint); border-radius: 999px; padding: 0.1em 0.65em; white-space: nowrap;
}
.gd-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.gd-list { grid-template-rows: auto; }
.gd-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd-list li { position: relative; padding-left: 28px; font-size: 0.98rem; line-height: 1.4; }
.gd-list li::before {
  content: ''; position: absolute; left: 0; top: 0.15em; width: 16px; height: 16px;
  border: 2px solid var(--petrol); border-radius: 4px; background: #fff;
}
.gd-list li.gd-mine::before {
  background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-color: var(--copper-dark);
}
.gd-list li.gd-mine::after {
  content: 'I do this'; display: inline-block; margin-left: 8px; font-size: 0.75rem; font-weight: 700;
  color: var(--copper-dark); background: var(--copper-tint); border-radius: 999px; padding: 0.05em 0.6em; vertical-align: 1px;
}
@media (max-width: 960px) { .gd-lists { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .gd-lists { grid-template-columns: 1fr; gap: 16px; } }

.gd-two { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.gd-two .section-head .fine { margin-top: 0.5rem; }
.gd-ticks { gap: 16px; margin: 0; font-size: 1.05rem; }
.gd-ticks strong { color: var(--petrol); }
.gd-callout { margin-top: 28px; padding: 20px 24px; border-left: 4px solid var(--copper); background: var(--copper-tint); border-radius: 0 14px 14px 0; }
.gd-callout p { margin: 0; }
@media (max-width: 900px) { .gd-two { grid-template-columns: 1fr; } }

/* Four cards in a row, then two, then one (/how-to-change-your-name-uk) */
.wr-grid.gd-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1060px) { .wr-grid.gd-four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .wr-grid.gd-four { grid-template-columns: 1fr; } }

.gd-costs { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.gd-costs th, .gd-costs td { text-align: left; vertical-align: top; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--warm-grey); }
.gd-costs tr:first-child th, .gd-costs tr:first-child td { border-top: 1px solid var(--warm-grey); }
.gd-costs th { font-family: var(--font-display); font-weight: 600; color: var(--petrol); width: 45%; }
.gd-costs td { color: var(--charcoal); }
@media (max-width: 520px) {
  .gd-costs th, .gd-costs td { display: block; width: auto; padding: 0; border: 0; }
  .gd-costs th { padding-top: 14px; }
  .gd-costs td { padding: 2px 0 14px; border-bottom: 1px solid var(--warm-grey); }
  .gd-costs tr:first-child th { border-top: 1px solid var(--warm-grey); }
  .gd-costs tr:first-child td { border-top: 0; }
}

.gd-shortcut-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: 28px 0 8px; }
.gd-shortcut .btn-copper { box-shadow: 4px 4px 0 var(--charcoal); border-color: var(--charcoal); color: #fff; }

/* ---------- /blog ---------- */
.blog-hero { padding-bottom: clamp(32px, 5vw, 56px); }
.blog-title .line, .blog-title .hero-em { white-space: nowrap; }
@media (max-width: 600px) { .gift-title.blog-title { font-size: 10.6vw; } }
.blog-list-wrap { padding: 0 0 var(--section); }
.blog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; max-width: 920px; }
.blog-card a {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 3vw, 36px); align-items: center;
  text-decoration: none; color: inherit; background: var(--paper); border: 2px solid var(--petrol);
  border-radius: 24px; box-shadow: 6px 6px 0 var(--petrol); padding: clamp(18px, 2.5vw, 26px);
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-card a:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--petrol); color: inherit; }
.blog-card img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transform: rotate(-2deg); }
.blog-card h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 10px; }
.blog-card p { margin: 0 0 10px; }
.blog-card-meta { color: var(--granite); font-size: 0.92rem; }
@media (max-width: 640px) {
  .blog-card a { grid-template-columns: 1fr; }
  .blog-card img { max-width: 220px; }
}

/* Homepage launch line (founder section) */
.founder-copy .founder-launch { margin-top: 1.4rem; padding: 16px 20px; background: var(--paper); border-left: 4px solid var(--copper); border-radius: 0 14px 14px 0; font-size: 1.05rem; }
.founder-launch .note { display: block; margin-top: 6px; font-size: 1.7rem; transform: rotate(-2deg); transform-origin: left; }
.gd-nowrap { white-space: nowrap; }
.gd-shortcut .dv-sign { margin-top: 1.4rem; }
@media (max-width: 900px) { .gd-two { gap: 0; } .gd-proof-grid .section-head { margin-bottom: 8px; } }

.gd-starting { margin: -12px 0 32px; max-width: 46rem; background: var(--yellow-tint); border-left-color: var(--yellow); }
.gd-list-cta { align-content: start; gap: 12px; }
.gd-list-cta h3 { font-size: 1.35rem; }
.gd-list-cta .btn { justify-self: start; }
.gd-list-cta .text-link { justify-self: start; }
@media (max-width: 960px) and (min-width: 621px) { .gd-list-cta { grid-column: span 2; } }
.gd-ticks li.gd-warn { background: var(--copper-tint); border-radius: 12px; padding: 12px 14px 12px 48px; margin-left: -14px; }
.gd-ticks li.gd-warn::before {
  left: 14px; top: 14px; background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 5.5v7' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='16.5' r='1.5' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.gd-callout .btn { margin-top: 16px; }
.gd-callout p.gd-callout-link { margin-top: 14px; }
.gd-tip { position: relative; margin-top: 28px; padding: 18px 22px; border: 2px dashed var(--green); border-radius: 16px; background: var(--paper); transform: rotate(-0.6deg); }
.gd-tip .note { font-size: 1.6rem; margin-bottom: 6px; color: #4F7F63; }
.gd-tip p:last-child { margin: 0; }
.gd-newhere { margin-top: 28px; max-width: 52rem; padding: 18px 22px; border-left: 4px solid var(--green); background: var(--green-tint); border-radius: 0 14px 14px 0; }
.gd-newhere p { margin: 0 0 10px; }
.gd-newhere-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.gd-when { margin-top: clamp(40px, 5vw, 56px); }
.gd-when h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.gd-when > p { max-width: 40rem; }
.gd-when .box-item { gap: 8px; padding: 22px 24px; align-content: start; }
.gd-rent { margin: 24px 0 0; max-width: 46rem; }
.gd-starting { margin: 32px 0 0; }
.gd-next { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.gd-next-card { grid-template-rows: auto; align-content: start; gap: 12px; }
.gd-next-card h3 { font-size: 1.35rem; }
.gd-next-card .btn, .gd-next-card .text-link { justify-self: start; }
.gd-next-check { background: var(--green-tint); }
@media (max-width: 760px) { .gd-next { grid-template-columns: 1fr; } }

/* ---------- /checklist (web app, generated by tools/make-checklist.py) ---------- */
.ck-wrap { max-width: calc(52rem + 2 * var(--gutter)); }
.ck-hero { padding: clamp(36px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); }
.ck-title .line, .ck-title .hero-em { white-space: nowrap; }
@media (max-width: 600px) { .gift-title.ck-title { font-size: 10.4vw; } }
.ck-hero .chips { margin-bottom: 1.4rem; }
@media (max-width: 600px) { .ck-hero .chips { flex-direction: row; flex-wrap: wrap; } }

.ck-progress { background: var(--paper); border: 2px solid var(--petrol); border-radius: 20px; box-shadow: 5px 5px 0 var(--petrol); padding: 18px 20px; }
.ck-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ck-progress-text { margin: 0; font-size: 1.1rem; }
.ck-progress-text strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--copper-dark); }
.ck-cheer { font-size: 1.5rem; margin: 0; }
.ck-bar { height: 12px; background: var(--parchment); border: 1.5px solid var(--petrol); border-radius: 999px; overflow: hidden; margin: 10px 0 14px; }
.ck-bar span { display: block; height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .3s ease; }
.ck-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-tool {
  font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--petrol); background: #fff;
  border: 2px solid var(--petrol); border-radius: 999px; padding: 0.45em 1em; cursor: pointer;
}
.ck-tool:hover { background: var(--green-tint); }
.ck-tool[aria-pressed="true"] { background: var(--petrol); color: var(--parchment); }
.ck-install-help { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--warm-grey); font-size: 0.98rem; }
.ck-install-help p { margin: 0 0 6px; }

.ck-mine-wrap { padding: clamp(20px, 3vw, 32px) 0; }
.ck-rest { padding: clamp(20px, 3vw, 32px) 0 var(--section); }
.ck-rest-head { margin: 12px 0 18px; }
.ck-rest-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.3em; }

.ck-group { background: var(--paper); border: 2px solid var(--petrol); border-radius: 20px; box-shadow: 4px 4px 0 var(--petrol); padding: 18px 20px 10px; margin-bottom: 18px; }
.ck-group-mine { background: var(--copper-tint); }
.ck-group-own { background: var(--green-tint); padding-bottom: 18px; }
.ck-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.ck-group-head h2 { font-size: 1.35rem; margin: 0; }
.ck-count { font-weight: 700; font-size: 0.9rem; color: var(--granite); font-variant-numeric: tabular-nums; }
.ck-list { list-style: none; margin: 0; padding: 0; }
.ck-item { position: relative; border-top: 1px dashed var(--warm-grey); }
.ck-item:first-child { border-top: 0; }
.ck-item label { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 11px 0; cursor: pointer; min-height: 48px; }
.ck-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-box { width: 26px; height: 26px; border: 2px solid var(--petrol); border-radius: 8px; background: #fff; margin-top: 1px; transition: background-color .15s ease, transform .15s ease; }
.ck-item input:checked + .ck-box {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M6.5 13.5l4.5 4.5L19.5 8' fill='none' stroke='%232F4B4A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat;
  transform: rotate(-4deg);
}
.ck-item input:focus-visible + .ck-box { outline: 3px solid var(--copper); outline-offset: 3px; }
.ck-text { display: grid; gap: 1px; }
.ck-label { font-weight: 600; line-height: 1.35; }
.ck-note { font-size: 0.88rem; color: var(--granite); line-height: 1.35; }
.ck-item.is-done .ck-label { text-decoration: line-through; text-decoration-color: var(--copper); text-decoration-thickness: 2px; color: var(--granite); }
.ck-hiding .ck-item.is-done { display: none; }
.ck-own label { padding-right: 40px; }
.ck-remove { position: absolute; right: 0; top: 8px; width: 34px; height: 34px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--granite); cursor: pointer; border-radius: 8px; }
.ck-remove:hover { color: var(--copper-dark); background: var(--paper); }

.ck-mine-cta { display: grid; justify-items: start; gap: 12px; margin: 10px 0 8px; padding-top: 14px; border-top: 2px solid var(--petrol); }
.ck-mine-cta p { margin: 0; }

.ck-add { display: flex; gap: 10px; margin-top: 10px; }
.ck-add input { flex: 1; min-width: 0; font: inherit; padding: 0.6em 0.9em; border: 2px solid var(--petrol); border-radius: 12px; background: #fff; }
.ck-reset-wrap { margin: 8px 0 0; text-align: center; }
.ck-reset { font: inherit; font-size: 0.95rem; color: var(--granite); background: none; border: 0; text-decoration: underline; cursor: pointer; }

.ck-help h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.ck-help p { font-size: 1.1rem; max-width: 40rem; }
.ck-sign { font-size: 2rem; transform: rotate(-3deg); transform-origin: left; }
.ck-item { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.ck-actions { display: flex; align-items: center; gap: 4px; padding-top: 8px; }
.ck-how { font-size: 0.85rem; font-weight: 700; color: var(--petrol); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 3px; padding: 4px 6px; }
.ck-hide-one { width: 34px; height: 34px; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--warm-grey); cursor: pointer; border-radius: 8px; }
.ck-hide-one:hover, .ck-hide-one:focus-visible { color: var(--copper-dark); background: var(--parchment); }
.ck-item.is-hidden { display: none; }
.ck-group.is-empty { display: none; }
.ck-soon { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 700; color: var(--copper-dark); background: #fff; border: 1.5px solid var(--copper); border-radius: 999px; padding: 0.05em 0.55em; vertical-align: 2px; white-space: nowrap; }
.ck-hint { margin: 12px 0 0; font-size: 0.92rem; color: var(--granite); }
.ck-own { grid-template-columns: 1fr; }
.ck-own label { padding-right: 40px; }

/* Cookie banner */
.cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  width: min(420px, calc(100% - 32px));
  background: var(--paper); color: var(--charcoal);
  border: 2px solid var(--petrol); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--petrol);
  padding: 22px 22px 20px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.cookie.is-in { opacity: 1; transform: none; }
.cookie-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.cookie-title { font-size: 1.75rem; margin: 0; }
.cookie-text { font-size: 0.98rem; line-height: 1.5; margin: 0 0 16px; }
.cookie-text a { color: var(--petrol); text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.cookie-note {
  margin: 0; white-space: nowrap;
  font-family: var(--font-hand); font-size: 1.35rem; font-weight: 700; color: var(--copper);
  transform: rotate(-4deg);
}
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-btn {
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: 0.75em 0.9em; border-radius: 999px; border: 2px solid var(--petrol);
  cursor: pointer; box-shadow: 3px 3px 0 var(--petrol);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cookie-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--petrol); }
.cookie-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--petrol); }
.cookie-yes { background: var(--copper); color: #fff; }
.cookie-yes:hover { background: var(--copper-dark); }
.cookie-no { background: var(--parchment); color: var(--petrol); }
.cookie-no:hover { background: #fff; }
@media (max-width: 520px) {
  .cookie { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px 18px 18px; }
  .cookie-title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }

.footer-linkbtn { font: inherit; color: var(--parchment); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer-linkbtn:hover { color: var(--copper-tint); text-decoration: underline; }
.legal-section .footer-linkbtn { color: var(--petrol); font-weight: 600; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 404 */
.nf { padding: clamp(48px, 8vw, 104px) 0 var(--section); }
.nf-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.nf h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
.nf h1 .line { display: block; }
.nf .lede { font-size: 1.2rem; max-width: 30rem; }
.nf-actions { display: grid; justify-items: start; gap: 14px; margin: 26px 0 34px; }
.nf-links-title { font-family: var(--font-hand); font-size: 1.6rem; color: var(--copper); margin: 0 0 6px; transform: rotate(-2deg); transform-origin: left; }
.nf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nf-links a { display: inline-block; text-decoration: none; font-weight: 700; color: var(--petrol); background: var(--paper); border: 2px solid var(--petrol); border-radius: 999px; padding: 0.4em 0.95em; font-size: 0.98rem; }
.nf-links a:hover { background: var(--green-tint); color: var(--petrol); }
.nf-wrap { position: relative; justify-self: center; width: min(360px, 100%); padding-top: 70px; }
.nf-card { background: var(--paper); border: 2px solid var(--petrol); border-radius: 20px; box-shadow: 6px 6px 0 var(--petrol); padding: 22px 24px; transform: rotate(-2deg); }
.nf-card-label { font-size: 0.8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); margin: 0 0 4px; }
.nf-old { font-family: var(--font-display); font-size: 1.7rem; color: var(--granite); margin: 0 0 16px; text-decoration: line-through; text-decoration-color: var(--copper); text-decoration-thickness: 3px; }
.nf-new { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: var(--petrol); margin: 0; line-height: 1; }
.nf-note { position: absolute; top: 0; right: 4px; margin: 0; font-family: var(--font-hand); font-size: 1.6rem; color: var(--copper); transform: rotate(4deg); }
.nf-arrow { position: absolute; top: 34px; right: 70px; width: 44px; height: 44px; overflow: visible; z-index: 2; }
.nf-arrow path { fill: none; stroke: var(--copper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .nf-grid { grid-template-columns: 1fr; }
  .nf-wrap { order: -1; width: min(300px, 100%); }
}

/* ---------- /free-deed-poll (generator in src/components/DeedPollMaker.astro, dp- classes) ---------- */
.dp-who { font-size: 0.98rem; color: var(--granite); max-width: 30em; }
.dp [hidden] { display: none !important; }
.dp-form { display: grid; gap: 18px; }
.dp-field label {
  display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--petrol); line-height: 1.25;
}
.dp-optional { font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: var(--granite); }
.dp-hint { margin: 0 0 8px; font-size: 0.93rem; color: var(--granite); }
.dp-field input, .dp-field textarea, .dp-field select {
  display: block; width: 100%; min-height: 50px; padding: 0.6em 0.85em;
  font: inherit; font-size: 1.05rem; color: var(--charcoal); background: #fff;
  border: 2px solid var(--petrol); border-radius: 14px; -webkit-appearance: none; appearance: none;
}
.dp-field textarea { resize: vertical; min-height: 92px; line-height: 1.4; }
.dp-field select {
  padding-right: 2.6em; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%232F4B4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.85em center / 18px no-repeat;
}
.dp-field input:focus, .dp-field textarea:focus, .dp-field select:focus { outline: 3px solid var(--copper); outline-offset: 2px; }
.dp-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--copper-tint); color: var(--copper-dark); font-weight: 700; }
.dp-make { width: 100%; margin-top: 4px; }
.dp-private { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.95rem; color: var(--granite); }
.dp-private svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.dp-result-title { margin: 0 0 6px; font-size: clamp(1.6rem, 2.6vw, 2rem); outline: none; }
.dp-result-title em { color: var(--copper-dark); font-weight: 500; }
.dp-result-lede { margin: 0 0 16px; }
.dp-chars { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--yellow-tint); font-size: 0.95rem; }
.dp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dp-btn-plain { background: #fff; color: var(--petrol); box-shadow: 4px 4px 0 var(--petrol); font-size: 1.05rem; }
.dp-actions .btn-copper { font-size: 1.05rem; }
.dp-btn-plain:hover { background: var(--parchment); color: var(--petrol); transform: translate(-1px, -1px); }
.dp-edit { margin-top: 16px; }
@media (max-width: 480px) { .dp-actions .btn { width: 100%; } }

/* The sheet: an SVG of the A4 page, drawn from the same layout as the PDF. */
.dp-frame { border: 2px solid var(--petrol); border-radius: 6px; box-shadow: 4px 4px 0 var(--petrol); background: #fff; overflow: hidden; }
.dp-sheet svg { display: block; width: 100%; height: auto; }

/* PSA */
.dp-psa { background: var(--petrol); color: var(--parchment); padding: var(--section) 0; }
.dp-psa h2 { color: #fff; }
.dp-psa h2 em { color: var(--copper-tint); }
.dp-psa-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.dp-psa-copy p { max-width: 34em; font-size: 1.12rem; }
.dp-sign { font-family: var(--font-hand); font-size: 2rem; color: var(--copper-tint); margin-top: 0.4rem; }
.dp-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.dp-option {
  display: grid; gap: 4px; justify-items: start; padding: 20px 24px; border-radius: 18px;
  background: var(--paper); color: var(--charcoal); border: 2px solid var(--parchment); box-shadow: 4px 4px 0 var(--green);
}
.dp-option strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--petrol); line-height: 1.2; }
.dp-option .text-link { margin-top: 6px; }
.dp-option-copper { background: var(--copper-tint); box-shadow: 4px 4px 0 var(--copper); }
.dp-price { font-family: var(--font-hand); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--copper); }
@media (max-width: 900px) { .dp-psa-grid { grid-template-columns: 1fr; } }

/* How to sign it */
.dp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dp-steps .box-item { align-content: start; gap: 8px; padding: 24px 22px; }
.dp-steps .box-item:nth-child(4) { transform: rotate(0.7deg); }
.dp-used { margin-top: 2.2rem; font-family: var(--font-hand); font-weight: 600; font-size: 1.6rem; color: var(--copper); line-height: 1.15; max-width: 32em; }
@media (max-width: 1080px) { .dp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .dp-steps { grid-template-columns: 1fr; } }

/* Print: only the deed poll, full A4, nothing else from the page. */
@media print {
  @page { size: A4; margin: 0; }
  body:has(.dp-sheet:not(:empty)) { background: #fff !important; }
  body:has(.dp-sheet:not(:empty)) > *:not(main),
  body:has(.dp-sheet:not(:empty)) main > section:not(.dp-hero),
  body:has(.dp-sheet:not(:empty)) .dp-hero .wp-hero-copy,
  body:has(.dp-sheet:not(:empty)) .dp-tool > .note,
  body:has(.dp-sheet:not(:empty)) .dp-result > *:not(.dp-frame) { display: none !important; }
  body:has(.dp-sheet:not(:empty)) .dp-hero,
  body:has(.dp-sheet:not(:empty)) .dp-hero .wrap,
  body:has(.dp-sheet:not(:empty)) .wp-hero-grid,
  body:has(.dp-sheet:not(:empty)) .dp-tool,
  body:has(.dp-sheet:not(:empty)) .dp { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; max-width: none !important; }
  body:has(.dp-sheet:not(:empty)) .dp-frame { width: 210mm; border: 0; box-shadow: none; border-radius: 0; }
  body:has(.dp-sheet:not(:empty)) .dp-sheet svg { width: 210mm; height: 296mm; }
}
/* Hero headline: two lines at every width (the generator column leaves less room than other heroes). */
.dp-hero .gift-title { font-size: clamp(2.5rem, 5.2vw, 4.4rem); }
.dp-hero .gift-title .line, .dp-hero .gift-title .hero-em { white-space: nowrap; }
@media (max-width: 900px) { .dp-hero .gift-title { font-size: clamp(2.5rem, 9vw, 4.4rem); } }
.dp { scroll-margin-top: 90px; }

/* /free-deed-poll price comparison */
.dp-compare { padding: var(--section) 0; }
.dp-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; }
.dp-compare-card { position: relative; padding: 26px 28px; border-radius: 18px; background: var(--paper); border: 2px solid var(--warm-grey); }
.dp-compare-card h3 { margin: 0 0 14px; font-size: 1.35rem; color: var(--granite); }
.dp-compare-me { border-color: var(--petrol); box-shadow: 5px 5px 0 var(--copper); }
.dp-compare-me h3 { color: var(--petrol); }
.dp-compare-list { margin: 0; display: grid; }
.dp-compare-list > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 10px 0; border-top: 1px dashed var(--warm-grey); }
.dp-compare-list dt { font-weight: 500; }
.dp-compare-list dd { margin: 0; font-weight: 700; color: var(--petrol); text-align: right; max-width: 13em; }
.dp-compare-card:not(.dp-compare-me) dd { color: var(--granite); }
.dp-compare-total { margin: 8px 0 0; padding-top: 12px; border-top: 2px solid var(--warm-grey); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--granite); }
.dp-compare-me .dp-compare-total { border-top-color: var(--petrol); color: var(--copper); }
.dp-compare-note { margin: 14px 0 0; font-size: 1.5rem; transform: rotate(-2deg); }
.dp-compare-fine { margin: 20px 0 0; font-size: 0.9rem; color: var(--granite); }
@media (max-width: 760px) { .dp-compare-grid { grid-template-columns: 1fr; } .dp-compare-card { padding: 22px 20px; } }

/* /free-deed-poll transitioning block */
.dp-trans { background: var(--paper); border-top: 2px dashed var(--warm-grey); border-bottom: 2px dashed var(--warm-grey); }
.dp-trans .box-item:nth-child(4) { transform: rotate(-0.6deg); }