/* pen2post design system.
   White canvas, near-black ink, heavy tight grotesque headings, black pill
   buttons, bright rounded colour blocks. Shared by every page except the
   landing page, which has its own sheet (landing.css) in the same language. */

:root {
  /* Colour */
  --paper: #ffffff;
  --paper-deep: #f3f2ee;
  --card: #ffffff;
  --ink: #0b0b0b;
  --ink-soft: #5c5c5c;
  --ink-faint: #8f8f8f;
  --rule: #e6e5e0;
  --rule-strong: #c9c8c2;
  --gold: #001666; /* accent for small text and links: deep navy */
  --gold-soft: #ffcee3; /* accent tint: pink */
  --pink: #ffcee3;
  --orange: #ffae00;
  --green: #31c431;
  --navy: #001666;
  --blush: #ffe3ee;
  --rose: #b5523b;
  --sage: #187a18;
  --sage-soft: #e1f6e1;
  --amber: #7a5200;
  --amber-soft: #fff0c9;
  --danger: #a3261a;
  --danger-soft: #fde0dc;
  --focus: #001666;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-ui: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape and depth */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.07);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.08), 0 18px 44px rgba(0, 0, 0, 0.18);

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;

  --content: 760px;
  --wide: 1080px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

img,
canvas {
  max-width: 100%;
  display: block;
}

a {
  color: var(--ink);
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Typography ---------- */

.display,
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.12;
  margin: 0 0 var(--s3);
}

h1 {
  font-size: clamp(36px, 7vw, 56px);
}

h2 {
  font-size: clamp(28px, 5vw, 36px);
}

h3 {
  font-size: 24px;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 var(--s2);
}

.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 56ch;
}

.muted {
  color: var(--ink-soft);
}

.small {
  font-size: 14px;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
}

p {
  margin: 0 0 var(--s4);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-deep);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) max(var(--s4), env(safe-area-inset-right)) var(--s3) max(var(--s4), env(safe-area-inset-left));
  max-width: var(--wide);
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.logo {
  height: 52px;
  width: auto;
  display: block;
}

.brand-tag {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  padding-top: 6px;
}

.footer-mark {
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  margin-right: 4px;
}

@media (max-width: 480px) {
  .logo {
    height: 40px;
  }
}

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--s4) var(--s8);
}

.wrap-wide {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--s4) var(--s8);
}

.hero {
  text-align: center;
  padding: var(--s6) 0 var(--s5);
}

.hero .lede {
  margin: 0 auto;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s6) 0;
}

.ornament {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--gold);
  justify-content: center;
  margin: var(--s4) 0;
}

.ornament::before,
.ornament::after {
  content: '';
  height: 1px;
  width: 48px;
  background: var(--rule-strong);
}

.site-footer {
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  padding: var(--s6) var(--s4);
  border-top: 1px solid var(--rule);
}

/* ---------- Surfaces ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
}

@media (min-width: 640px) {
  .card {
    padding: var(--s6);
  }
}

.panel {
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: var(--s4);
}

.notice {
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: 15px;
  margin: var(--s3) 0;
  border: 1px solid transparent;
}

.notice-info {
  background: var(--gold-soft);
  border-color: #e3d2b5;
}

.notice-ok {
  background: var(--sage-soft);
  border-color: #cddccb;
}

.notice-warn {
  background: var(--amber-soft);
  border-color: #ead8ad;
}

.notice-error {
  background: var(--danger-soft);
  border-color: #ecc6bd;
  color: #6e2418;
}

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s5);
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn:hover {
  background: #000;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--paper-deep);
}

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
}

.btn-gold:hover {
  background: #2bb32b;
}

.btn-small {
  min-height: 36px;
  padding: 0 var(--s4);
  font-size: 13px;
}

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

.btn-row.spread {
  justify-content: space-between;
}

.btn-upload {
  width: 100%;
  min-height: 160px;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--rule-strong);
  background: var(--card);
  color: var(--ink);
  flex-direction: column;
  font-size: 18px;
  font-family: var(--font-display);
  letter-spacing: 0;
}

.btn-upload:hover {
  background: #fafaf7;
  border-color: var(--gold);
  box-shadow: none;
}

.btn-upload .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 24px;
  color: var(--gold);
}

/* ---------- Forms ---------- */

.field {
  display: block;
  margin-bottom: var(--s4);
}

.field > span,
.label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
  font-weight: 500;
}

.input,
select.input,
textarea.input {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.input:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 111, 181, 0.15);
}

.input[aria-invalid='true'] {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: var(--s1);
}

.grid-2 {
  display: grid;
  gap: 0 var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.range {
  display: grid;
  grid-template-columns: 96px 1fr 44px;
  align-items: center;
  gap: var(--s3);
  font-size: 14px;
  margin-bottom: var(--s2);
}

.range input {
  width: 100%;
  accent-color: var(--ink);
}

.range output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  cursor: pointer;
  user-select: none;
}

.toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
}

/* Choice tiles (delivery options) */
.choices {
  display: grid;
  gap: var(--s3);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.choice input {
  accent-color: var(--ink);
  width: 20px;
  height: 20px;
}

.choice .choice-body {
  flex: 1;
}

.choice .price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

/* ---------- Progress ---------- */

.progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.progress li {
  counter-increment: step;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding-top: var(--s3);
  border-top: 3px solid var(--rule);
  font-weight: 500;
}

.progress li::before {
  content: counter(step) '. ';
}

.progress li.done {
  color: var(--ink-soft);
  border-top-color: var(--gold);
}

.progress li.current {
  color: var(--ink);
  border-top-color: var(--ink);
}

@media (max-width: 420px) {
  .progress li {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}

/* ---------- Postcard surfaces ---------- */

.postcard {
  position: relative;
  aspect-ratio: var(--card-ratio, 148 / 105); /* follows the destination country's card shape */
  background: #fff;
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.postcard canvas,
.postcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postcard-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--s3);
}

.preview-stack {
  display: grid;
  gap: var(--s6);
  margin: var(--s5) 0;
}

@media (min-width: 720px) {
  .preview-stack {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }
}

.stamp-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 2px;
}

/* Hero postcard decoration */
.hero-cards {
  position: relative;
  height: 200px;
  max-width: 420px;
  margin: var(--s5) auto 0;
}

.hero-cards .postcard {
  position: absolute;
  width: 62%;
  left: 19%;
  top: 10px;
}

.hero-cards .postcard:nth-child(1) {
  transform: rotate(-7deg) translateX(-22%);
}

.hero-cards .postcard:nth-child(2) {
  transform: rotate(5deg) translateX(20%);
}

.hero-cards .postcard:nth-child(3) {
  transform: rotate(-1deg);
}

/* ---------- Editor ---------- */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin: var(--s4) 0;
}

.compare figure {
  margin: 0;
}

.compare figcaption {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--s2);
  text-align: center;
}

.frame {
  position: relative;
  background: var(--paper-deep);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 160px;
}

.frame canvas {
  max-height: 360px;
  width: auto;
}

.checker {
  background-color: #fff;
  background-image: linear-gradient(45deg, #f1ece3 25%, transparent 25%), linear-gradient(-45deg, #f1ece3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1ece3 75%), linear-gradient(-45deg, transparent 75%, #f1ece3 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.crop-stage {
  position: relative;
  touch-action: none;
  user-select: none;
  margin: var(--s3) 0;
}

.crop-stage canvas {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--radius);
}

.crop-handle {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: grab;
  touch-action: none;
}

.back-stage {
  position: relative;
  touch-action: none;
  user-select: none;
}

.back-stage canvas {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
  cursor: move;
}

.tip {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  font-size: 15px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Front choice and own-photo editor ---------- */

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--paper-deep);
  border-radius: 999px;
  margin-bottom: var(--s5);
}

.segmented-3 {
  grid-template-columns: 1fr 1fr 1.5fr;
}

/* One short line under each vintage poster. */
.dest-vintage .name {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmented label {
  position: relative;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.segmented input:checked + span {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.extra-price {
  font-style: normal;
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
}

.btn-upload-compact {
  min-height: 120px;
}

.front-stage {
  position: relative;
  margin: var(--s4) 0;
}

/* Dashed trim line: 3 mm bleed on a 154 x 111 mm print. */
.trim-guide {
  display: none;
  position: absolute;
  inset: 2.7% 1.95%;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  outline: 1px dashed rgba(0, 0, 0, 0.55);
  pointer-events: none;
  border-radius: 2px;
}

.front-stage.is-editable .trim-guide {
  display: block;
}

.front-stage.is-editable canvas {
  cursor: grab;
  touch-action: none;
}

.front-stage.is-editable canvas:active {
  cursor: grabbing;
}

/* ---------- Destination picker ---------- */

.search {
  position: relative;
}

.search .input {
  padding-left: 44px;
  font-size: 17px;
}

.search::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
}

.search::after {
  content: '';
  position: absolute;
  left: 29px;
  top: 30px;
  width: 7px;
  height: 2px;
  background: var(--ink-soft);
  transform: rotate(45deg);
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin: var(--s4) 0;
}

@media (min-width: 640px) {
  .dest-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
  }
}

.dest {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.dest .thumb {
  aspect-ratio: 148 / 105;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, box-shadow 0.15s;
}

.dest .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dest:hover .thumb {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.dest[aria-pressed='true'] .thumb {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.dest .name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-top: var(--s2);
  line-height: 1.2;
}

.dest .country {
  font-size: 13px;
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  border: 1px solid var(--rule-strong);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}

.chip[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.image-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s3);
}

/* ---------- Step sections ---------- */

.step {
  animation: rise 0.25s ease-out;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.step-head {
  margin-bottom: var(--s5);
}

.step-nav {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.summary td {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}

.summary td:last-child {
  text-align: right;
}

.summary tr.total td {
  border-bottom: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  padding-top: var(--s3);
}

/* ---------- Admin ---------- */

.status-list {
  display: grid;
  gap: var(--s3);
}

.status-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (max-width: 480px) {
  .status-row {
    grid-template-columns: 14px 1fr;
  }

  .status-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.dot.green {
  background: var(--sage);
}

.dot.amber {
  background: var(--amber);
}

.dot.red {
  background: var(--danger);
}

.wizard {
  counter-reset: wstep;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s4);
}

.wizard > li {
  counter-increment: wstep;
  position: relative;
  padding-left: 52px;
}

.wizard > li::before {
  content: counter(wstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.wizard ol,
.wizard ul {
  padding-left: 20px;
}

.wizard li li {
  margin-bottom: var(--s1);
}

.copy-row {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--s2) 0;
}

.copy-row code {
  font-size: 14px;
  padding: 6px 10px;
  word-break: break-all;
}

.claim-code {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.08em;
  background: #fff;
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  word-break: break-all;
}

.key-block {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  margin-top: var(--s5);
}

.key-block:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.key-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-content: space-between;
  flex-wrap: wrap;
}

.key-head h3 {
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-weight: 500;
}

.badge.green {
  background: var(--sage-soft);
  color: #2f4c35;
}

.badge.amber {
  background: var(--amber-soft);
  color: #6f4f12;
}

.badge.red {
  background: var(--danger-soft);
  color: #7a2a1d;
}

details.howto {
  margin: var(--s3) 0;
  font-size: 15px;
}

details.howto summary {
  cursor: pointer;
  color: var(--ink-soft);
}

details.howto ol {
  margin: var(--s2) 0;
  padding-left: 20px;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

table.data th,
table.data td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.data th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.tabs {
  display: flex;
  gap: var(--s2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
  overflow-x: auto;
}

.tabs button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  padding: var(--s3) var(--s3);
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.tabs button[aria-selected='true'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s5);
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--shadow-lift);
  z-index: 50;
  max-width: calc(100vw - 32px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Small phones ---------- */

@media (max-width: 480px) {
  .wrap,
  .wrap-wide {
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
  }

  .card {
    padding: var(--s5) var(--s4);
    border-radius: var(--radius);
  }

  .hero {
    padding-top: var(--s4);
  }

  .hero-cards {
    height: 170px;
  }

  .lede {
    font-size: 17px;
  }

  /* Primary action on top, full width, easy to reach with a thumb. */
  .step-nav.btn-row.spread {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .step-nav .btn {
    width: 100%;
  }

  /* Sliders get the full row. */
  .range {
    grid-template-columns: 1fr auto;
    row-gap: var(--s1);
  }

  .range input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .choice {
    padding: var(--s3);
  }

  .choice .price {
    font-size: 20px;
  }

  .segmented span {
    font-size: 14px;
    padding: 6px 8px;
  }

  .stamp-tag {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
  }

  /* Admin key rows: input on its own line, buttons below. */
  .key-row {
    flex-wrap: wrap !important;
  }

  .key-row .input {
    flex: 1 1 100%;
  }

  .copy-row code {
    font-size: 13px;
  }

  .claim-code {
    font-size: 17px;
  }

  .wizard > li {
    padding-left: 44px;
  }

  .wizard > li::before {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .preview-stack {
    gap: var(--s5);
  }
}

@media (max-width: 360px) {
  .progress li {
    font-size: 9px;
    letter-spacing: 0.02em;
  }

  .compare {
    gap: var(--s2);
  }

  .logo {
    height: 36px;
  }
}

/* ---------- Landing page ---------- */

/* Stays at the top while the page scrolls. The shadow paints the bar edge to edge. */
.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper), 0 1px 0 100vmax var(--rule);
  clip-path: inset(0 -100vmax -1px);
}

.site-header-sticky .btn {
  flex: none;
}

/* ---------- Step 1 controls ---------- */

.upload-choices {
  display: grid;
  gap: var(--s3);
}

@media (min-width: 560px) {
  .upload-choices {
    grid-template-columns: 1fr 1fr;
  }
}

/* The four points between the corners. Slightly smaller than the corner handles. */
.crop-handle-side {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

#reset-btn svg {
  flex: none;
}

.adjust details + details {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.adjust summary {
  cursor: pointer;
}

/* ---------- Sliders: large handles that are easy to grab with a thumb ---------- */

.range input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  height: 44px; /* the whole row is the touch target, not only the thin track */
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.range input[type='range']::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--rule-strong);
}

.range input[type='range']::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--rule-strong);
}

.range input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -12px; /* centres the handle on the 8px track */
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.range input[type='range']::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.range input[type='range']:focus-visible {
  outline: none;
}

.range input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--focus);
}

.range input[type='range']:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--focus);
}

/* ---------- Before and After: two frames of the same size ---------- */

.compare .frame {
  aspect-ratio: var(--photo-ratio, 4 / 3);
  min-height: 0;
}

.compare .frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* The cleaned note sits on plain white, with a little room around it. */
.frame-after {
  background: #fff;
  border: 1px solid var(--rule);
}

.compare .frame-after canvas {
  inset: var(--s3);
  width: calc(100% - 2 * var(--s3));
  height: calc(100% - 2 * var(--s3));
}

/* Icons inside buttons never shrink or wrap away from their label. */
.btn svg {
  flex: none;
}

/* ---------- Text box with a clear button inside it ---------- */

.text-field {
  position: relative;
}

.text-field .input {
  padding-right: 52px;
}

.text-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
}

.text-clear:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

/* ---------- White border on the front of the card ----------
   The printer adds a white border round the front picture. Every preview of the
   front shows it: about 5 mm on a 148 x 105 mm card. */

.postcard-front canvas,
.postcard-front img {
  position: absolute;
  top: 4.76%;
  left: 3.38%;
  width: 93.24%;
  height: 90.48%;
}

/* The trim line sits inside the border, on the picture itself. */
.front-stage .trim-guide {
  inset: 7.2% 5.2%;
}

/* ============================================================
   pen2post look: type, buttons and labels.
   ============================================================ */

body {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.display,
h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

h1 em,
h2 em {
  font-style: normal;
  background: var(--pink);
  padding: 0 0.14em;
  border-radius: 0.16em;
}

/* Header: round postmark and the name. */
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.045em;
}

.logo {
  height: 52px;
}

.brand-tag {
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--orange);
  padding: 4px 10px;
  border-radius: 999px;
}

@media (max-width: 420px) {
  .brand {
    font-size: 19px;
  }
}

/* Small labels: sentence case, no wide tracking. */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-deep);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: var(--s3);
}

.field > span,
.label,
.postcard-label,
.compare figcaption {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
}

.lede {
  letter-spacing: -0.02em;
}

/* Buttons: black pills that lift on hover. */
.btn {
  border-width: 2px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.16);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

.btn-secondary {
  background: #fff;
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--paper-deep);
  box-shadow: none;
  transform: none;
}

.btn-small {
  box-shadow: none;
}

/* The final send button. */
.btn-gold {
  background: var(--green);
  border-color: var(--ink);
  color: var(--ink);
  min-height: 56px;
  font-size: 18px;
}

.btn-gold:hover {
  color: var(--ink);
}

.btn-upload {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  border-width: 2px;
  box-shadow: none;
}

.btn-upload:hover {
  border-color: var(--ink);
  transform: none;
}

.btn-upload .icon {
  background: var(--pink);
  color: var(--ink);
}

/* Progress: bold labels, green for finished steps. */
.progress li {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  border-top-width: 4px;
}

.progress li.done {
  border-top-color: var(--green);
}

@media (max-width: 420px) {
  .progress li {
    font-size: 12px;
    letter-spacing: -0.02em;
  }
}

.dest .name {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.extra-price {
  color: var(--ink-soft);
}

.summary .total td {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.site-footer {
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Terms, privacy and refunds pages ---------- */

.legal h2 {
  font-size: 24px;
  margin-top: var(--s6);
}

.legal h2:first-child {
  margin-top: 0;
}

.legal li {
  margin-bottom: var(--s2);
}

/* ---------- Design step: collapsible Adjust and Add Text ---------- */

/* When the Adjust section is not shown, the next section has no divider above it. */
.adjust details[hidden] + details {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Rotate, Fit and Change always share one row. */
.btn-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
}

.btn-row-3 .btn {
  min-width: 0;
  padding: 0 6px;
  gap: 5px;
  font-size: 14px;
}

.btn-row-3 .btn svg {
  width: 14px;
  height: 14px;
}

/* "My own photo +price" stays on one or two tidy lines. */
.segmented .extra-price {
  white-space: nowrap;
}

.segmented .extra-price span {
  display: inline;
  min-height: 0;
  padding: 0;
}

/* Step headings fit on one line on a phone. */
.step-head h2 {
  font-size: clamp(18px, 5.8vw, 34px);
}

/* ---------- Footer: brand, tagline, links, stacked and centred ---------- */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.footer-brand .footer-mark {
  margin: 0;
}

.footer-tag {
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 22px;
  margin-top: 8px;
}

.footer-links a {
  font-weight: 600;
}

@media (max-width: 360px) {
  .btn-row-3 .btn {
    font-size: 13px;
    gap: 4px;
    padding: 0 4px;
  }
}

/* ---------- Discount codes ---------- */

.link-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--ink);
}

.code-input {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code-input::placeholder {
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

.code-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: #2f4c35;
  vertical-align: 1px;
}

/* Checkout: the code box under the price lines. */
.discount-box {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

.discount-box .link-btn {
  min-height: 32px;
}

.discount-entry-row {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s2);
}

.discount-entry-row .input {
  flex: 1;
  min-width: 0;
}

.discount-entry-row .btn {
  min-height: 48px;
  flex: none;
}

.discount-msg {
  margin: var(--s2) 0 0;
  font-size: 14px;
  color: var(--danger);
}

.discount-msg.ok {
  color: var(--sage);
  font-weight: 500;
}

.summary tr.discount-line td {
  color: var(--sage);
  font-weight: 500;
}

.summary tr.discount-line .link-btn {
  font-size: 13px;
  font-weight: 400;
  margin-left: 6px;
}

/* Admin: the form and the list of codes. */
.field > span.hint {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  margin: var(--s1) 0 0;
  text-transform: none;
  letter-spacing: 0;
}

.discount-form {
  margin: var(--s4) 0;
}

.discount-form .segmented {
  background: #fff;
  border: 1px solid var(--rule);
  max-width: 360px;
}

.discount-form .segmented input:checked + span {
  background: var(--ink);
  color: #fff;
}

.discount-code-row,
.discount-value-row {
  flex-wrap: wrap;
  margin: 0;
}

.discount-code-row .input {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.affix {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 140px;
}

.affix .input {
  text-align: right;
  padding-right: 36px;
  font-variant-numeric: tabular-nums;
}

.affix-mark {
  position: absolute;
  color: var(--ink-soft);
  pointer-events: none;
}

#discount-affix-pre {
  left: 14px;
}

#discount-affix-post {
  right: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  appearance: none;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
}

.chip:hover {
  background: var(--paper-deep);
}

.chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.discount-tools {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 var(--s3);
}

.discount-tools-row {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr 1fr;
}

.discount-tools-row .input {
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
}

.discount-tools-row input {
  grid-column: 1 / -1;
}

/* One compact line per code, so hundreds stay readable. */
/* The whole admin dashboard uses the wide page, so every tab is the same width. */
.wrap:has(#dash:not([hidden])) {
  max-width: var(--wide);
}

.discount-list {
  border-top: 1px solid var(--rule);
}

.discount-head,
.discount-item {
  display: grid;
  grid-template-columns: 150px 88px minmax(80px, 1fr) 72px 128px 92px 32px;
  align-items: center;
  gap: 0 var(--s3);
  padding: 0 var(--s2);
}

.discount-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 6px;
  white-space: nowrap;
}

.discount-item {
  min-height: 44px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}

.discount-item:hover {
  background: var(--paper-deep);
}

.discount-item.dim > :not(.row-menu):not(.badge) {
  opacity: 0.55;
}

.discount-code {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: copy;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discount-code:hover {
  text-decoration: underline;
}

.discount-deal {
  font-weight: 600;
  white-space: nowrap;
}

.discount-name,
.discount-when {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discount-uses {
  display: grid;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.discount-item .badge {
  justify-self: start;
  font-size: 11px;
  padding: 2px 8px;
}

.meter {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
  max-width: 64px;
}

.meter > i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}

.row-menu {
  position: relative;
  justify-self: end;
}

.row-menu summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ink-soft);
  user-select: none;
}

.row-menu summary:hover {
  background: #fff;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.row-menu summary::-webkit-details-marker {
  display: none;
}

.row-menu[open] summary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.row-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 150px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  display: grid;
}

.menu-item {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
}

.menu-item:hover {
  background: var(--paper-deep);
}

.menu-item.danger {
  color: var(--danger);
}

/* Phones: two short lines per code. */
@media (max-width: 719px) {
  .discount-head {
    display: none;
  }

  .discount-item {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--s2);
    padding: 8px var(--s1);
  }

  .discount-code {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
  }

  .discount-item .badge {
    order: 2;
  }

  .row-menu {
    order: 3;
  }

  /* Everything after this starts the second line. */
  .discount-item::before {
    content: '';
    order: 4;
    flex-basis: 100%;
  }

  .discount-deal,
  .discount-name,
  .discount-uses,
  .discount-when {
    order: 5;
    font-size: 13px;
  }

  .discount-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
  }

  .discount-uses .meter {
    display: none;
  }

  .discount-uses::after {
    content: ' used';
    color: var(--ink-soft);
  }

  .discount-uses {
    display: inline;
  }

  /* Finger-sized targets, and 16px inputs so iOS does not zoom the page. */
  .row-menu summary {
    width: 40px;
    height: 40px;
    margin: -4px -4px -4px 0;
  }

  .menu-item {
    min-height: 44px;
    font-size: 16px;
    padding: 10px 14px;
  }

  .row-menu-list {
    min-width: 190px;
  }

  .discount-tools-row .input {
    font-size: 16px;
    min-height: 44px;
  }

  .discount-tools .chip {
    min-height: 40px;
  }
}

@media (min-width: 720px) {
  .discount-tools-row {
    grid-template-columns: minmax(200px, 1fr) 170px 170px;
  }

  .discount-tools-row input {
    grid-column: auto;
  }
}

.discount-empty {
  text-align: center;
  padding: var(--s6) var(--s4);
  color: var(--ink-soft);
}

/* ---------- The pen2post wordmark in the header (same drawing as the landing page) ---------- */

/* The "pen" is handwriting and the "post" is print, joined by a postmark of a 2. */
.p2p-logo {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.055em;
}

.p2p-pen {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-weight: 600;
  font-size: 1.28em;
  letter-spacing: -0.02em;
  color: #1f46d6;
  transform: rotate(-4deg);
}

/* The cancellation waves spill out of the stamp and run behind "post". */
.p2p-mark {
  flex: none;
  width: 0.94em;
  height: 0.94em;
  margin: 0 0.05em 0 0.08em;
  overflow: visible;
  stroke: var(--ink);
}

.p2p-waves {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.36;
}

.p2p-dot {
  fill: var(--ink);
  stroke: none;
}

.p2p-mark text {
  fill: var(--ink);
  stroke: none;
  font-size: 60px;
  letter-spacing: 0;
}

.p2p-post {
  position: relative;
}

@media (max-width: 420px) {
  .p2p-logo {
    font-size: 28px;
  }
}

/* Keeps the Admin tag clear of the cancellation waves. */
.p2p-logo + .brand-tag {
  margin-left: 18px;
}