/* ==========================================================================
   Modern kitchen editorial
   Type: Young Serif (display) + Hanken Grotesk (text) + Reenie Beanie (the pen on the card only)
   Colour: enamel white, cast iron, tomato, olive, butter.
   ========================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("fonts/young-serif-latin-400-normal.6ba68b99.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-wght-normal.e9201edd.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Reenie Beanie";
  src: url("fonts/reenie-beanie-latin-400-normal.14fc872b.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* palette */
  --paper:   #FCFAF6;   /* enamel */
  --paper-2: #F3EEE5;   /* inset surfaces */
  --ink:     #231F1D;   /* cast iron */
  --muted:   #5E564F;
  --line:    rgba(35, 31, 29, .18);
  --tomato:  #B8341C;
  --tomato-solid: #B8341C;  /* fills that carry white text; same in both schemes */
  --olive:   #4A5628;
  --butter:  #F6D77F;

  /* colour-blocked sections: bg / text / soft text */
  --blk-tomato-bg: #B8341C;  --blk-tomato-fg: #FFFFFF;
  --blk-olive-bg:  #4A5628;  --blk-olive-fg:  #FFFFFF;  --blk-olive-hi: #F6D77F;
  --blk-butter-bg: #F6D77F;  --blk-butter-fg: #231F1D;  --blk-butter-soft: #4A4036;
  --blk-iron-bg:   #231F1D;  --blk-iron-fg:   #F3EEE6;  --blk-iron-soft: #BDB3A8;

  --ring: var(--ink);

  /* type */
  --serif: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pen:   "Reenie Beanie", "Bradley Hand", cursive;

  /* layout */
  --gut: clamp(1.25rem, 4.5vw, 3.5rem);
  --max: 82rem;
  --gap: clamp(1rem, 2.4vw, 2rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --radius: .75rem;
  --radius-lg: 1.25rem;
  --radius-sm: .375rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #1B1816;
    --paper-2: #26211E;
    --ink:     #F3EEE6;
    --muted:   #B3A99E;
    --line:    rgba(243, 238, 230, .2);
    --tomato:  #F0765C;
    --olive:   #C9D69A;
    --butter:  #E8C25E;
    --blk-olive-bg: #2D3818;
    --blk-butter-bg: #E8C25E;
    --blk-iron-bg: #0F0D0C;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem)/1.62 var(--sans);
  font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .16em; }

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

.skip {
  position: absolute; left: var(--gut); top: -4rem; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; border-radius: var(--radius-sm);
}
.skip:focus { top: .75rem; }

.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }

/* ---------- type ---------- */
.display, h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.2rem + 6.2vw, 5.9rem); line-height: .98; letter-spacing: -.022em; }
h2 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.018em; }
h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); line-height: 1.12; }
.lede { font-size: clamp(1.18rem, 1.08rem + .5vw, 1.4rem); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
p { text-wrap: pretty; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.site-header { padding-block: 1.25rem; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; } /* wraps rather than overflows if the real name is long */
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 400 clamp(1rem, 4.8vw, 1.65rem)/1.2 var(--serif); letter-spacing: -.02em; text-decoration: none;
  white-space: nowrap; max-width: 100%;
}
.wordmark svg { width: 1.9rem; height: 1.9rem; flex: none; }
.wordmark:hover { text-decoration: none; }
.nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); font-weight: 560; font-size: .98rem; }
.nav a { text-decoration: none; padding-block: .5rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 .12em no-repeat; }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% .12em; }
.nav .nav__extra { display: none; }
@media (min-width: 40rem) { .nav .nav__extra { display: inline; } }
@media (prefers-reduced-motion: no-preference) { .nav a { transition: background-size .2s ease; } }

/* ---------- buttons & badge ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .7rem 1.6rem; border-radius: .5rem;
  font: 600 1.05rem/1.2 var(--sans); text-decoration: none; border: 2px solid transparent;
}
.btn--butter { background: var(--blk-butter-bg); color: var(--blk-butter-fg); }
.btn--butter:hover { background: #fff; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn svg { width: 1.35rem; height: 1.35rem; flex: none; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color .15s ease, transform .15s ease; } .btn:active { transform: translateY(1px); } }

.status { display: inline-flex; align-items: center; min-height: 3.25rem; padding: .7rem 1.4rem; border: 2px solid currentColor; border-radius: .5rem; font: 600 1.05rem/1.2 var(--sans); }
.badge { display: inline-block; line-height: 0; border-radius: .6rem; }
.badge img { height: 3.25rem; width: auto; }

/* ---------- hero ---------- */
.hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2.25rem, 5vw, 3rem) var(--gap); }
.hero__copy { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.hero__copy h1 { font-size: clamp(2.6rem, 1rem + 5.2vw, 5.4rem); max-width: 10.5em; }
.hero__copy .lede { max-width: 30em; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hero__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hero__cta p { font-size: .98rem; color: var(--muted); max-width: 16em; line-height: 1.4; }

/* the butter panel stays inside the container at every width; the phone is cropped by it on purpose */
.hero__panel {
  position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-start;
  height: 30rem; padding-top: 2.5rem;
  background: var(--blk-butter-bg); border-radius: var(--radius-lg);
}
.hero__panel .phone { --pw: 17.5rem; }
@media (min-width: 72rem) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__copy { grid-column: 1 / span 7; padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: 1rem; }
  .hero__panel { grid-column: 8 / -1; height: auto; min-height: 42rem; padding-top: 3.5rem; }
  .hero__panel .phone { --pw: clamp(18.5rem, 21vw, 21rem); }
}

/* ---------- phone mockup: a SwiftUI-style screen (system font, grouped lists, one accent) ---------- */
.phone {
  --pw: 17rem;
  --u: calc(var(--pw) / 405);               /* one iOS point */
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", system-ui, sans-serif;
  --ios-bg: #F2F2F7; --ios-surface: #fff; --ios-label: #000;
  --ios-label2: rgba(60, 60, 67, .8); --ios-sep: rgba(60, 60, 67, .29); --ios-chev: #C4C4C7;
  --ios-accent: #B8341C;
  position: relative; flex: none; width: var(--pw); aspect-ratio: 405 / 864;
  padding: calc(6 * var(--u)); background: #151210; border-radius: calc(54 * var(--u));
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #3b3531, 0 2.5rem 3.5rem -1.5rem rgba(35, 31, 29, .5);
}
@media (prefers-color-scheme: dark) {
  .phone {
    --ios-bg: #000; --ios-surface: #1C1C1E; --ios-label: #fff;
    --ios-label2: rgba(235, 235, 245, .6); --ios-sep: rgba(84, 84, 88, .65); --ios-chev: #5A5A5E;
    --ios-accent: #FF7A5F;
  }
}
.ios {
  position: relative; height: 100%; overflow: hidden; border-radius: calc(48 * var(--u));
  background: var(--ios-bg); color: var(--ios-label);
  font: 400 calc(17 * var(--u))/1.29 var(--ios-font); letter-spacing: -.01em;
  padding-top: calc(54 * var(--u));
}
.ios__island { position: absolute; top: calc(11 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(124 * var(--u)); height: calc(36 * var(--u)); border-radius: 999px; background: #000; z-index: 2; }
.ios__status {
  position: absolute; top: calc(18 * var(--u)); left: 0; right: 0; height: calc(22 * var(--u)); z-index: 1;
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(34 * var(--u)) 0 calc(52 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: 0;
}
.ios__status svg { width: calc(66 * var(--u)); height: auto; }
.ios__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); }
.ios__bar--end { display: flex; justify-content: flex-end; }
.ios__act { color: var(--ios-accent); white-space: nowrap; display: flex; align-items: center; }
.ios__act--end { justify-self: end; }
.ios__act--bold { font-weight: 600; }
.ios__ttl { font-weight: 600; }
.ios__back { width: calc(11 * var(--u)); height: auto; }
.ios__plus { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--ios-accent); margin-right: calc(4 * var(--u)); }
.ios__large { font-size: calc(34 * var(--u)); font-weight: 700; line-height: 1.18; letter-spacing: .01em; margin: calc(2 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)); }
.ios__large--tight { font-size: calc(30 * var(--u)); }
.ios__hdr { text-transform: uppercase; font-size: calc(14 * var(--u)); color: var(--ios-label2); letter-spacing: 0; margin: calc(22 * var(--u)) calc(32 * var(--u)) calc(7 * var(--u)); line-height: 1.2; }
.ios__group { margin: 0 calc(16 * var(--u)); background: var(--ios-surface); border-radius: calc(14 * var(--u)); overflow: hidden; }
.ios__group li { position: relative; min-height: calc(44 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.ios__group li + li::before { content: ""; position: absolute; top: 0; left: calc(16 * var(--u)); right: 0; height: 1px; background: var(--ios-sep); }
.ios__group--chev li::after { content: ""; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border: solid var(--ios-chev); border-width: calc(2.2 * var(--u)) calc(2.2 * var(--u)) 0 0; transform: rotate(45deg); margin-right: calc(2 * var(--u)); }
.ios__group--solo { margin-top: calc(22 * var(--u)); }
.ios__accent { color: var(--ios-accent); }
.ios__editor { margin: calc(8 * var(--u)) calc(16 * var(--u)) 0; padding: calc(12 * var(--u)) calc(16 * var(--u)); background: var(--ios-surface); border-radius: calc(14 * var(--u)); white-space: pre-wrap; line-height: 1.32; font-size: calc(16 * var(--u)); }
.ios__foot { margin: calc(8 * var(--u)) calc(32 * var(--u)) 0; font-size: calc(14 * var(--u)); line-height: 1.3; color: var(--ios-label2); }
.ios__home { position: absolute; bottom: calc(8 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(138 * var(--u)); height: calc(5 * var(--u)); border-radius: 999px; background: var(--ios-label); }

/* ---------- index card ---------- */
.card {
  --lh: 1.75rem;
  position: relative; width: min(21.5rem, 78vw); aspect-ratio: 5 / 3.2;
  background-color: #FFFDF8; border-radius: 3px;
  box-shadow: 0 .15rem .3rem rgba(35, 31, 29, .22), 0 1.6rem 2.2rem -1rem rgba(35, 31, 29, .5);
  color: #232A44; font-family: var(--pen); overflow: hidden;
}
.card::before { /* the rules */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(#B8341C, #B8341C) 0 2.1rem / 100% 2px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), rgba(74, 86, 40, .26) calc(var(--lh) - 1px) var(--lh)) 0 2.4rem / 100% 100%;
}
.card__text { position: relative; padding: .45rem 1.1rem 0 1.35rem; font-size: 1.5rem; line-height: var(--lh); }
.card__text .card__title { display: block; font-size: 1.95rem; line-height: 1.55rem; height: 1.7rem; margin-bottom: .75rem; }
.card__ring { position: absolute; right: -1.6rem; bottom: -1.4rem; width: 8rem; height: 8rem; mix-blend-mode: multiply; pointer-events: none; }
@media (prefers-color-scheme: dark) { .card__ring { mix-blend-mode: normal; opacity: .8; } }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.block { --ring: var(--ink); }
.block--tomato { background: var(--blk-tomato-bg); color: var(--blk-tomato-fg); --ring: #fff; }
.block--olive { background: var(--blk-olive-bg); color: var(--blk-olive-fg); --ring: #fff; }
.block--butter { background: var(--blk-butter-bg); color: var(--blk-butter-fg); --ring: #231F1D; }
.block--iron { background: var(--blk-iron-bg); color: var(--blk-iron-fg); --ring: #F3EEE6; }

/* One 12-column grid: left heads span 1-6, the right column always starts at column 8. */
.split { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem) var(--gap); }
@media (min-width: 72rem) { .split { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* how it works: three phones, one per step */
.how { background: var(--paper-2); }
.how__head { max-width: 62rem; }
.steps { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 3rem var(--gap); counter-reset: step; }
.step { display: grid; gap: 1.5rem var(--gap); align-content: start; }
.step__shot {
  display: flex; justify-content: flex-start; align-items: flex-start; overflow: hidden;
  height: 26rem; padding-bottom: 0; padding-top: .25rem;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
.step__shot .phone { --pw: 15.5rem; }
.step__text h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
.step__n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tomato-solid); color: #fff; font: 700 1rem/1 var(--sans); letter-spacing: 0; }
.step__text p { color: var(--muted); max-width: 26em; }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .step { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: center; }
  .step__shot { height: 22rem; }
}
@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem var(--gap); }
  .step__shot { height: 31rem; }
  .step__shot .phone { --pw: clamp(15rem, 24vw, 20rem); }
}

/* what it does */
.does__head { grid-column: 1 / span 6; }
.does__card { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-left: .5rem; }
.does__card .card { transform: rotate(-2.5deg); }
.does__list { grid-column: 8 / -1; }
.feature { padding-block: clamp(1.6rem, 3vw, 2.25rem); border-top: 2px solid var(--ink); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature h3 { margin-bottom: .7rem; }
.feature p { max-width: 31em; color: var(--muted); }

/* coming later */
.later { margin-top: clamp(4rem, 8vw, 7rem); }
.later__grid { margin-top: 2rem; display: grid; gap: 1rem var(--gap); }
@media (min-width: 40rem) { .later__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .later__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tab {
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2;
}

/* privacy block */
.promise__head { grid-column: 1 / span 6; }
.promise__head h2 { color: var(--blk-olive-hi); }
.promise__list { grid-column: 8 / -1; align-self: start; }
.promise__list li { padding-block: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .4); font-size: 1.2rem; line-height: 1.4; }
.promise__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.promise__link { display: inline-block; margin-top: 2rem; font-weight: 650; }

/* ---------- footer ---------- */
.site-footer { padding-block: clamp(4rem, 8vw, 7rem) 2rem; }
.site-footer--slim { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.footer__top { display: grid; gap: 2.5rem var(--gap); }
@media (min-width: 72rem) { .footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .footer__pitch, .footer__brand { grid-column: 1 / span 6; } .footer__links { grid-column: 8 / -1; } }
.footer__pitch h2 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); max-width: 11em; }
.footer__pitch .status { margin-top: 2rem; }
.footer__brand { align-self: start; }
.footer__links li + li { margin-top: .35rem; }
.footer__links a { text-decoration: none; padding-block: .25rem; display: inline-block; overflow-wrap: anywhere; }
.footer__links a:hover { text-decoration: underline; }
.footer__links .footer__quiet a { font-size: .9rem; color: var(--blk-iron-soft); }
.footer__base { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid rgba(243, 238, 230, .22); display: grid; gap: .75rem var(--gap); font-size: .9rem; line-height: 1.5; color: var(--blk-iron-soft); }
.site-footer--slim .footer__base { margin-top: 2.5rem; }
@media (min-width: 72rem) { .footer__base { grid-template-columns: repeat(12, minmax(0, 1fr)); } .footer__base > :first-child { grid-column: 1 / span 6; } .footer__legal { grid-column: 8 / -1; } }

/* ---------- inner pages ---------- */
.page-head { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); max-width: 12em; }
.page-head .lede { margin-top: 1.5rem; }
.page-head .muted { margin-top: 1.25rem; font-size: .95rem; }

.doc { display: grid; gap: 3rem var(--gap); padding-bottom: var(--section); }
@media (min-width: 60rem) {
  .doc { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .doc__aside { grid-column: 1 / span 4; position: sticky; top: 2rem; align-self: start; }
  .doc__body { grid-column: 6 / -1; }
}
.slip { background: var(--blk-butter-bg); color: var(--blk-butter-fg); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.7rem; box-shadow: 0 .15rem .3rem rgba(35, 31, 29, .18), 0 1.2rem 1.8rem -1rem rgba(35, 31, 29, .4); margin-bottom: 3.25rem; --ring: #231F1D; }
.slip h2 { font-size: 1.65rem; margin: 0 0 .8rem; line-height: 1.1; }
.slip li { padding: .5rem 0 .5rem 1.4rem; position: relative; border-top: 1px solid rgba(35, 31, 29, .25); font-size: 1rem; line-height: 1.45; margin: 0; }
.slip li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .7rem; height: .4rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-.15rem); }
.prose .slip ul { margin-top: 0; padding-left: 0; list-style: none; }
.prose .slip li { padding: .5rem 0 .5rem 1.4rem; margin: 0; }

.toc h2 { font: 700 1rem/1.2 var(--sans); letter-spacing: 0; margin-bottom: .75rem; }
.toc ol { border-left: 2px solid var(--line); }
.toc a { display: block; padding: .4rem 0 .4rem 1rem; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; font-weight: 560; font-size: 1rem; }
.toc a:hover { border-left-color: var(--tomato); text-decoration: none; color: var(--tomato); }
@media (max-width: 59.99rem) { .toc ol { columns: 2; column-gap: 1.5rem; } .toc li { break-inside: avoid; } }
@media (max-width: 29.99rem) { .toc ol { columns: 1; } }

.prose { max-width: 40rem; }
.prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem); margin: 3.25rem 0 1rem; line-height: 1.1; scroll-margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.prose p, .prose ul { margin-top: 1rem; }
.prose ul { padding-left: 1.2rem; list-style: disc; }
.prose li { margin-top: .5rem; padding-left: .2rem; }
.prose li::marker { color: var(--tomato); }
.prose a { color: var(--tomato); font-weight: 560; overflow-wrap: anywhere; }
.dl { margin-top: 1.5rem; border-top: 2px solid var(--ink); }
.dl div { display: grid; gap: .25rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
@media (min-width: 40rem) { .dl div { grid-template-columns: 10rem 1fr; } }
.dl dt { font-weight: 700; }
.dl dd { color: var(--muted); }

/* support */
.contact { background: var(--blk-iron-bg); color: var(--blk-iron-fg); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.25rem); --ring: #F3EEE6; }
.contact h2 { font-size: 1.65rem; margin-bottom: .6rem; line-height: 1.1; }
.contact p { color: var(--blk-iron-soft); font-size: 1rem; line-height: 1.5; }
.contact .btn { margin-top: 1.4rem; width: 100%; }
.contact__addr { display: block; margin-top: 1rem; font-size: clamp(.9rem, 4vw, 1rem); font-weight: 650; color: var(--blk-iron-fg); overflow-wrap: anywhere; }

.faq details { border-bottom: 1px solid var(--line); }
.faq h2 { font: 700 1.05rem/1.2 var(--sans); letter-spacing: 0; margin: 3rem 0 0; padding-top: 1rem; border-top: 2px solid var(--ink); text-wrap: wrap; }
.faq h2:first-child { margin-top: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: 1.25rem; font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.65rem)/1.2 var(--serif); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .65rem; height: .65rem; margin-right: .3rem;
  border-right: 2.5px solid var(--tomato); border-bottom: 2.5px solid var(--tomato); transform: translateY(-.2rem) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform .2s ease; } }
.faq summary:hover { color: var(--tomato); }
.faq__a { padding-bottom: 1.5rem; max-width: 36rem; color: var(--muted); }
.faq__a p + p { margin-top: .8rem; }
.faq__a a { color: var(--tomato); font-weight: 560; overflow-wrap: anywhere; }

/* 404 */
.lost { padding-block: clamp(2rem, 6vw, 5rem) var(--section); display: grid; gap: 3rem var(--gap); align-items: center; }
@media (min-width: 60rem) { .lost { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .lost__card { justify-self: center; } }
.lost h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); }
.lost p { margin-top: 1.5rem; max-width: 28em; }
.lost .btn { margin-top: 2rem; }
.lost__card .card { width: min(24rem, 86vw); transform: rotate(3deg); }
.lost__card .card__text { font-size: 1.6rem; }