/* Order Kiln website (Sealing Wax). Built from the Figma file "Order Kiln website" (Home 4:2/4:90, Privacy 5:100,
   Terms 5:182) using only the tokens in tokens.css. Phone first; 900 px and wider gets the two-column layout. */
@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; border-radius: var(--radius); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--color-page); color: var(--color-text);
  font: 400 var(--text-md)/var(--leading-body) var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, p, dl, dd, ol, ul, figure, table { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--color-link); text-underline-offset: var(--border-underline-offset); }
:focus-visible { outline: var(--border-focus-width) solid var(--color-focus); outline-offset: var(--border-focus-offset); }

/* Read by screen readers, not shown (the tag's table caption). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Skip link: hidden until it has keyboard focus. */
.skip { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-8)); z-index: 2; display: inline-flex; align-items: center;
  min-height: var(--size-tap); padding-inline: var(--space-4); background: var(--color-action); color: var(--color-on-action); font-weight: 700; }
.skip:focus { top: var(--space-4); }

/* ---- Bands and the content column ---------------------------------------------------------------------------- */
.band { padding-block: var(--space-7); }
.band > .wrap { max-width: calc(var(--max-width) + 2 * var(--space-5)); margin-inline: auto; padding-inline: var(--gutter); }
.band-brand { background: var(--color-brand); color: var(--color-on-brand); }
.band-deep { background: var(--color-brand-deep); color: var(--color-on-brand-deep); }
.band-page { background: var(--color-page); color: var(--color-text); }
.band-brand :focus-visible, .band-deep :focus-visible, .skip:focus-visible { outline-color: var(--color-focus-on-brand); }
.band-brand a { color: var(--color-on-brand); }
.band-deep a { color: var(--color-on-brand-deep); }

/* Section title on the left, content on the right (stacked on phones). */
.split { display: grid; gap: var(--space-5); }
.section-title { font: 400 var(--text-2xl)/var(--leading-heading) var(--font-display); letter-spacing: var(--tracking-display); }
.band-page .section-title { color: var(--color-heading); }

/* ---- The one button -------------------------------------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: var(--size-control);
  padding: var(--space-1) calc(var(--space-5) - var(--border-strong)); border: var(--border-strong) solid transparent;
  background: var(--color-action); color: var(--color-on-action);
  font: 700 var(--text-md)/var(--leading-label) var(--font-body); text-decoration: none; transition: background-color var(--motion-hover); }
.band-brand .button, .band-deep .button { color: var(--color-on-action); }
.button:hover { background: var(--color-action-hover); }

/* ---- Opening band ---------------------------------------------------------------------------------------------- */
/* The hanging price tag's geometry comes from the Figma component "Price tag" (3:19) and its assets. */
.opening {
  --tag-width: 330px;          /* the component's frame */
  --tag-body-width: 300px;     /* tag-shape.svg */
  --tag-hang: 46px;            /* where the body starts below the string's top */
  --tag-string-left: 103.75px; /* string at x 105, its asset bleeding 1.25 px */
  --tag-string-bleed: 1.25px;  /* tag-string.svg runs past its 2.5 px stroke by half the stroke */
  --tag-hole-bleed: 3px;       /* tag-hole.svg is 20 px: the 14 px hole plus its 3 px ring */
  --tag-column: 400px;         /* the opening grid's tag column at 900 px and wider */
  padding-top: var(--space-6);
}
.masthead { padding-block: var(--space-5) 0; }
.logo { display: inline-flex; align-items: center; justify-self: start; min-height: var(--size-tap); }
.opening-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.copy { display: grid; gap: var(--space-4); align-content: start; }
.display { font: 400 var(--text-3xl)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-on-brand); }
.lede { color: var(--color-on-brand-muted); }
.note { font-size: var(--text-sm); line-height: var(--leading-small); color: var(--color-on-brand-muted); }

/* The hanging price tag (Figma component "Price tag", 3:19). */
.tag { position: relative; width: var(--tag-width); max-width: 100%; justify-self: center; color: var(--color-on-tag); }
.tag-string { position: absolute; top: calc(-1 * var(--tag-string-bleed)); left: var(--tag-string-left); }
.tag-body { position: relative; display: grid; gap: var(--space-2); width: var(--tag-body-width); max-width: 100%;
  margin: var(--tag-hang) auto 0; padding: var(--space-6) var(--space-5) var(--space-4); transform: rotate(-3deg); }
.tag-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.tag-hole { position: absolute; top: calc(var(--space-3) - var(--tag-hole-bleed)); left: 50%; transform: translateX(-50%); }
.tag-body > :not(img) { position: relative; }
.tag-item { font-size: var(--text-base); line-height: var(--leading-tag); font-weight: 700; }
.tag-count { font: 400 var(--text-2xl)/var(--leading-display) var(--font-display); }
.tag-lines { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-tag); font-variant-numeric: tabular-nums; }
.tag-lines td { padding: var(--space-2) 0; border-top: var(--border-hairline) solid var(--color-tag-rule); vertical-align: top; }
.tag-lines td + td { padding-left: var(--space-1); text-align: right; white-space: nowrap; }

/* Running text keeps to the measure at every width. */
.lede, .features, .steps-col, .invite { max-width: var(--measure); }
.feature dd, .steps li, .muted { text-wrap: pretty; }

/* ---- What it does (deep band) ---------------------------------------------------------------------------------- */
.features { display: grid; gap: var(--space-3); }
.feature { display: grid; gap: var(--space-1); }
.feature dt { font-weight: 700; color: var(--color-on-brand-deep); }
.feature dd { color: var(--color-on-brand-deep-muted); }

/* ---- How the AI part works (page) ----------------------------------------------------------------------------- */
.steps-col { display: grid; gap: var(--space-4); }
.steps { display: grid; gap: var(--space-4); padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: var(--text-2xl) 1fr; gap: var(--space-3); align-items: start; counter-increment: step; color: var(--color-text); }
.steps li::before { content: counter(step); font: 400 var(--text-2xl)/var(--leading-step) var(--font-display); color: var(--color-heading); }
.muted { font-size: var(--text-base); color: var(--color-text-muted); }

/* ---- Ask for an invite (brand) ---------------------------------------------------------------------------------- */
.invite { display: grid; gap: var(--space-4); }
.invite p:first-child { color: var(--color-on-brand-muted); }
.addr { color: var(--color-on-brand); }

/* ---- Footer (deep band) ------------------------------------------------------------------------------------------ */
.site-footer { padding-block: var(--space-4) var(--space-6); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); padding: 0; list-style: none;
  font-size: var(--text-sm); line-height: var(--leading-small); }
.footer-row a, .footer-row span { display: inline-flex; align-items: center; min-height: var(--size-tap); }
.footer-row span { color: var(--color-on-brand-deep-muted); }

/* ---- Privacy and Terms ------------------------------------------------------------------------------------------ */
.page-head { padding-top: var(--space-6); }
.page-title { display: grid; gap: var(--space-3); max-width: var(--measure); }
.page-title h1 { font: 400 var(--text-2xl)/var(--leading-heading) var(--font-display); letter-spacing: var(--tracking-display); }
.page-title p { color: var(--color-on-brand-muted); }
.prose { display: grid; gap: var(--space-6); max-width: var(--measure); }
.prose section { display: grid; gap: var(--space-3); }
.prose h2 { font: 400 var(--text-xl)/var(--leading-sub) var(--font-display); color: var(--color-heading); }
.prose .placeholder { color: var(--color-text-muted); }

/* ---- 900 px and wider --------------------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .band { padding-block: var(--space-8); }
  .masthead { padding-block: var(--space-5) 0; }
  .opening, .page-head { padding-top: var(--space-7); }
  .site-footer { padding-block: var(--space-4) var(--space-6); }
  .opening-grid { grid-template-columns: minmax(0, 1fr) var(--tag-column); gap: var(--space-8); }
  .display { font-size: var(--text-5xl); }
  .lede { font-size: var(--text-lg); line-height: var(--leading-lede); }
  .split { grid-template-columns: calc((var(--max-width) - var(--space-7)) / 3) 1fr; gap: var(--space-7); align-items: start; }
  .section-title, .page-title h1 { font-size: var(--text-3xl); }
  .prose > p:first-child { font-size: var(--text-lg); line-height: var(--leading-lede); }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }
/* Forced colours (Windows contrast themes): the logo keeps its crimson ground, or its cream letters vanish on white. */
@media (forced-colors: active) { .logo img { forced-color-adjust: none; background: var(--color-brand); } }