/* Obra — the homepage.
   ------------------------------------------------------------------
   The work is the page. Each project brings its own room: its colour, its words,
   its screen. Without JavaScript, or with reduced motion on, the rooms simply
   stack. work.js adds html.staged and turns them into one stage that scrolling
   turns through: the screens stand in a shared 3D room above the rooms, and the
   next room wipes in from the right with a hard edge as its screen arrives.

   The rest of the page (studio, contact, footer) sits on a near-black ground
   after the last room. Every page on the site now uses this one stylesheet. */

:root {
  --page: #121110;
  --page-ink: #EDEAE3;
  --page-dim: #ADA8A0;      /* 8.1:1 on --page */
  --page-rule: rgba(237, 234, 227, .18);
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 28px;
  color-scheme: dark;
}
@media (max-width: 760px) { :root { --gutter: 18px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--page-ink); font: 16px/1.5 var(--display); -webkit-font-smoothing: antialiased; }
/* work.js repaints the body in the colour of the room in front, for the phone's
   browser bars. The content carries its own ground so that colour never shows
   behind text. */
main, .foot { background: var(--page); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the bar ---------- */
.bar {
  display: flex; align-items: center; gap: 14px;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 18px;
  background: var(--page); color: var(--page-ink);
}
.bar__mark { font: 800 19px/1 var(--display); letter-spacing: .02em; text-decoration: none; }
.bar__where { font: 500 14px/1 var(--display); opacity: .8; }
.bar__send {
  margin-left: auto; font: 500 14px/1 var(--display); text-decoration: none;
  display: inline-flex; gap: 8px; align-items: center;
  padding: 11px 16px; border: 1px solid currentColor; border-radius: 999px;
}
@media (max-width: 760px) { .bar__where { display: none; } .bar__send { padding: 9px 13px; font-size: 13px; } }

/* ---------- a room, as it stands without the stage ---------- */
.job {
  position: relative; color: var(--ink);
  /* The top and bottom edges settle to one flat colour, --g0, so that whatever
     iPhone Safari samples there to tint its own bars matches the room exactly. */
  background:
    linear-gradient(var(--g0), transparent 12%, transparent 88%, var(--g0)),
    radial-gradient(120% 95% at 66% 38%, var(--g1), var(--g0));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; align-items: end;
  padding: 72px var(--gutter);
}
.job__screen { grid-column: 2; grid-row: 1; margin: 0; }
.job__screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .1); }
.job__phone { position: absolute; right: calc(var(--gutter) + 16px); bottom: 40px; width: clamp(110px, 11vw, 160px); margin: 0; }
.job__phone img { border-radius: 16px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6), 0 0 0 4px #0d0d0d; }
.job__words { grid-column: 1; grid-row: 1; max-width: 420px; }

/* The project's name is the big type. --len is its length in characters, so a
   long name like OfferByFriday gets smaller rather than running into the screen. */
.job__words { container-type: inline-size; }
.job__name { font: 800 min(116px, calc(100cqw / (var(--len, 8) * .6)))/.88 var(--display); letter-spacing: -.045em; margin: 0 0 14px; white-space: nowrap; }
.job__what { margin: 0 0 18px; opacity: .85; font-size: 15px; max-width: 34ch; }
.job__spec { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.job__spec dt, .job__spec dd { margin: 0; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.job__spec dt { font: 400 14px/1.4 var(--display); opacity: .78; }
.job__spec dd { font-size: 14px; }
.job__result { margin: 18px 0 0; font: 700 clamp(19px, 1.8vw, 26px)/1.2 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.job__result a { text-underline-offset: 4px; text-decoration-thickness: 2px; }
.job__visit { display: inline-block; margin-top: 16px; font: 500 14px/1 var(--display); text-underline-offset: 4px; }

@media (max-width: 760px) {
  .job { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px var(--gutter) 56px; }
  .job__screen, .job__words { grid-column: 1; grid-row: auto; }
  .job__phone { display: none; }
}

/* ---------- the stage ---------- */
html.staged { scrollbar-gutter: stable; }
html.staged .bar { position: fixed; inset: 0 0 auto 0; z-index: 70; background: none; color: var(--page-ink); pointer-events: none; }
html.staged .bar > * { pointer-events: auto; transition: none; }
html.staged .bar.is-solid { background: var(--page); box-shadow: 0 1px 0 var(--page-rule); }
/* The stage is the full height Safari can show (its toolbar shrinks as you
   scroll), so no strip of page shows under it. --bars is the toolbar's share,
   which bottom-anchored words stay above. */
html.staged { --bars: calc(100lvh - 100svh); }
html.staged .work { position: relative; height: calc(var(--n, 4) * 100lvh); }
html.staged .stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }

html.staged .job { position: absolute; inset: 0; display: block; padding: 0; background: none; }
/* On the stage the room's colour is its own layer, so it can wipe across while
   the words above it fade instead. */
html.staged .job::before {
  content: ""; position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 100%));
  background:
    linear-gradient(var(--g0), transparent 12%, transparent 88%, var(--g0)),
    radial-gradient(120% 95% at 66% 38%, var(--g1), var(--g0));
}
html.staged .job__words { will-change: opacity, transform; }
/* Rooms stack in order, each later one above the last, so the incoming room's wipe
   is always on top. Raising the live room instead buried the wipe for the first
   half of every turn and made the colour jump in at the midpoint. */
html.staged .job:not([data-live]) * { pointer-events: none; }
html.staged .job__words { position: absolute; left: var(--gutter); bottom: calc(30px + var(--bars)); width: min(30vw, 420px); }
html.staged .job__phone, html.staged .job:not([data-href]) .job__visit { display: none; }

.room { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 62% 42%; pointer-events: none; z-index: 10; }
.room .job__screen {
  position: absolute; left: 62%; top: 47%; width: var(--pw); aspect-ratio: 16 / 10; margin: 0;
  transform-style: preserve-3d; cursor: pointer; pointer-events: auto; will-change: transform, opacity;
}
.room .job__screen:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.face { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.room .job__screen img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; user-select: none; -webkit-user-drag: none; }
.sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 48%, rgba(255,255,255,0) 66%);
  background-size: 220% 100%; background-position: var(--sx, 60%) 0;
}
.shadow {
  position: absolute; left: 62%; top: 47%; width: var(--pw); height: calc(var(--pw) * .2);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0));
  filter: blur(16px); pointer-events: none; will-change: transform, opacity;
}

.index { position: fixed; right: var(--gutter); bottom: 30px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.index[hidden] { display: none; }
.index ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.index button { font: 500 14px/1 var(--display); color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; opacity: .75; }
.index button[aria-current="true"] { opacity: 1; font-weight: 700; }

@media (max-width: 760px) {
  .room { perspective: 1100px; perspective-origin: 50% 32%; }
  .room .job__screen, .shadow { left: 50%; top: 35%; }   /* work.js replaces top with the measured space */
  html.staged .job__words { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(70px + var(--bars)); }
  html.staged .job__spec dt, html.staged .job__spec dd { padding: 5px 0; }
  html.staged .job__spec dd { font-size: 13px; }
  html.staged .job__what { margin-bottom: 10px; font-size: 14px; }
  html.staged .job__result { font-size: 14px; margin-top: 10px; }
  .index { display: none; }
}
/* Short phone windows: the words sit lower so the screen above them keeps some size. */
@media (max-width: 760px) and (max-height: 700px) { html.staged .job__words { bottom: calc(32px + var(--bars)); } }

/* ---------- a project, opened ---------- */
/* Hidden, not just transparent, while closed: iPhone Safari takes its bar colour from full-screen fixed layers, invisible ones included. */
.opened-ui { position: fixed; inset: 0; z-index: 80; color: var(--ink, #fff); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
html.is-open .opened-ui { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s; }
/* Locked on html only. Hidden overflow on body as well makes body its own scroll
   box, and the sticky stage then drops back to its place at the top of the work. */
html.is-open { overflow: hidden; overscroll-behavior: none; }
/* Strips in the edge colour, there for iPhone Safari to read (see tintEdges in work.js). 6px is the least it notices. */
.edge-tint { position: fixed; left: 0; right: 0; height: 6px; z-index: 90; pointer-events: none; }
/* !important because work.js sets each room's words opacity inline for the crossfade */
html.is-open .job__words, html.is-open .index { opacity: 0 !important; transition: opacity .25s; pointer-events: none; }
.opened-ui .phone {
  position: absolute; right: 6vw; top: 50%; height: min(74vh, 720px); aspect-ratio: 390 / 844;
  transform: translateY(-50%) translateX(40px); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 7px #0d0d0d;
}
html.is-open .opened-ui .phone { transform: translateY(-50%) translateX(0); }
.opened-ui .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.opened-ui .bar-open { position: absolute; left: var(--gutter); bottom: 30px; display: flex; gap: 12px; align-items: center; }
.pill { font: 500 14px/1 var(--display); padding: 12px 18px; border-radius: 999px; border: 1px solid currentColor;
  text-decoration: none; color: inherit; background: none; cursor: pointer; }
.pill--solid { background: var(--ink); color: var(--g0); border-color: var(--ink); }
@media (max-width: 760px) {
  .opened-ui .phone { right: 50%; transform: translate(50%, -50%) translateY(30px); height: 66vh; }
  html.is-open .opened-ui .phone { transform: translate(50%, -52%); }
  .opened-ui .bar-open { right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* ---------- studio ---------- */
.studio {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px;
  padding: 96px var(--gutter) 72px; max-width: 1240px; margin: 0 auto;
}
.studio__h { font: 700 clamp(28px, 3.4vw, 46px)/1.02 var(--display); letter-spacing: -.02em; margin: 0 0 22px; max-width: 16ch; text-wrap: balance; }
.studio__copy p { margin: 0 0 14px; max-width: 58ch; color: var(--page-dim); }
.studio__sig { margin-top: 22px !important; font: 400 14px/1.5 var(--display); color: var(--page-dim); }
.studio__sig b { display: block; font: 700 18px/1.2 var(--display); color: var(--page-ink); }
.studio__terms { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-self: end; margin: 0; border-top: 1px solid var(--page-rule); }
.studio__terms dt, .studio__terms dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--page-rule); }
.studio__terms dt { font: 400 14px/1.6 var(--display); color: var(--page-dim); }
.studio__terms a { text-underline-offset: 4px; }

/* ---------- contact ---------- */
.contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px;
  padding: 72px var(--gutter) 96px; max-width: 1240px; margin: 0 auto; border-top: 1px solid var(--page-rule);
}
.contact__h { font: 700 clamp(28px, 3.4vw, 46px)/1.02 var(--display); letter-spacing: -.02em; margin: 0 0 14px; max-width: 13ch; text-wrap: balance; }
.contact__intro p { margin: 0; color: var(--page-dim); max-width: 40ch; }
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field span { font: 500 14px/1.4 var(--display); color: var(--page-dim); }
.field i { font-style: normal; font-weight: 400; }
.field input, .field textarea {
  font: 16px/1.4 var(--display); color: var(--page-ink); background: #1C1B19;
  border: 1px solid var(--page-rule); border-radius: 8px; padding: 12px 14px; width: 100%; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--page-ink); outline-offset: 1px; }
.form__hp { position: absolute; left: -9999px; }
.form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--page-dim); }
.form__consent input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--page-ink); }
.form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form__send, .form__again {
  font: 600 15px/1 var(--display); color: var(--page); background: var(--page-ink);
  border: 0; border-radius: 999px; padding: 15px 22px; cursor: pointer;
}
.form__send[disabled] { opacity: .6; cursor: progress; }
.form__msg { font-size: 14px; color: var(--page-dim); }
.form__msg.is-error { color: #FF9C8A; }       /* 7.9:1 on --page */
.form__alt { margin: 18px 0 0; font-size: 14px; color: var(--page-dim); }
.success__h { font: 700 26px/1.2 var(--display); margin: 0 0 10px; }
.success p { color: var(--page-dim); }

@media (max-width: 860px) {
  .studio, .contact { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 64px; }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 22px var(--gutter) max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--page-rule);
  font: 400 13px/1.6 var(--display); color: var(--page-dim);
}
.foot a { text-underline-offset: 3px; }
.foot span { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ==================================================================
   /voice — the same system, with a phone in the room instead of a site
   ================================================================== */

.job__tag { margin: 0 0 10px; font: 500 14px/1.4 var(--display); opacity: .8; }

/* ---------- the opening, in the colour of the first room so the two run together ---------- */
.lead {
  color: var(--ink);
  background: linear-gradient(var(--g0), transparent 12%), radial-gradient(120% 95% at 66% 38%, var(--g1), var(--g0));
  padding: 120px var(--gutter) 64px; min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end;
}
.lead__h { font: 800 clamp(40px, 6.4vw, 96px)/.95 var(--display); letter-spacing: -.035em; margin: 0 0 22px; max-width: 13ch; text-wrap: balance; }
.lead__p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; max-width: 52ch; margin: 0 0 28px; opacity: .88; }
.lead__cue { margin: 0; font: 500 15px/1 var(--display); opacity: .8; }

/* ---------- a phone, mid-call ---------- */
.job--phone { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
/* Sizes for the stacked layout only; on the stage the phone takes --pw from work.js. */
html:not(.staged) .job__screen--phone { justify-self: center; width: clamp(220px, 24vw, 300px); }
.call {
  aspect-ratio: 1 / 2.05; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 16px; font: 13px/1.4 var(--display);
  box-shadow: 0 0 0 6px #0d0d0d, 0 30px 60px -24px rgba(0, 0, 0, .55);
}
.call--light { background: #F4F3EF; color: #15161A; }
.call--dark { background: #111317; color: #F1F2F4; }
.call__status { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); opacity: .7; padding: 2px 6px 6px; }
.call__head { display: grid; gap: 2px; padding: 0 4px 10px; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.call__head b { font: 700 17px/1.2 var(--display); }
.call__head span { font: 400 11px/1.3 var(--mono); opacity: .7; }
.call__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.call__lines li { padding: 8px 10px; border-radius: 14px; max-width: 88%; }
.call__lines .them { align-self: flex-start; background: color-mix(in srgb, currentColor 10%, transparent); border-bottom-left-radius: 4px; }
.call__lines .agent { align-self: flex-end; background: #1F6FEB; color: #fff; border-bottom-right-radius: 4px; }
.call__lines .note { max-width: none; background: color-mix(in srgb, currentColor 7%, transparent); border-radius: 10px; }
.call__lines .line { max-width: none; background: color-mix(in srgb, currentColor 9%, transparent); border-left: 3px solid #34C759; border-radius: 8px; }
.call__lines .ring { align-self: center; margin-top: 8px; font: 500 12px/1 var(--mono); opacity: .8; }
.call__foot { font: 500 11px/1.3 var(--mono); text-align: center; padding: 8px; border-radius: 10px; background: color-mix(in srgb, currentColor 8%, transparent); }

.room .job__screen--phone { aspect-ratio: 1 / 2.05; }
.room .job__screen--phone .call { box-shadow: none; height: 100%; aspect-ratio: auto; }
.room .job__screen--phone .face { border-radius: 30px; background: #0d0d0d; box-shadow: 0 0 0 6px #0d0d0d; }
@media (max-width: 760px) {
  .job--phone { grid-template-columns: minmax(0, 1fr); }
  html:not(.staged) .job__screen--phone { width: min(70vw, 260px); }
  .room .job__screen--phone, .shadow--phone { top: 37%; }
  .room .job__screen--phone .call { font-size: 11px; padding: 10px 10px 12px; gap: 7px; }
  .room .job__screen--phone .call__head b { font-size: 14px; }
  /* The phone already shows the call; on a small screen the table repeating it is
     what pushed the words into the phone. The stacked version keeps it. */
  html.staged .job--phone .job__spec { display: none; }
}

/* ---------- sections after the calls ---------- */
.sect { max-width: 1240px; margin: 0 auto; padding: 88px var(--gutter) 24px; }
.sect__h { font: 700 clamp(28px, 3.4vw, 46px)/1.02 var(--display); letter-spacing: -.02em; margin: 0 0 14px; max-width: 18ch; text-wrap: balance; }
.sect__p { margin: 0 0 32px; max-width: 58ch; color: var(--page-dim); }
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--page-rule); }
.ruled li { padding: 12px 0; border-bottom: 1px solid var(--page-rule); }
.ruled--not li { color: var(--page-dim); }
.does__cols, .price__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.does__h { font: 700 17px/1.3 var(--display); color: var(--page-ink); margin: 0 0 12px; }

.steps__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps__list li { border-top: 1px solid var(--page-ink); padding-top: 16px; }
.steps__list b { font: 700 15px/1 var(--display); color: var(--page-dim); }
.steps__list h3 { font: 700 21px/1.15 var(--display); margin: 10px 0 8px; }
.steps__list p { margin: 0; color: var(--page-dim); font-size: 15px; }

.price__box { border-top: 1px solid var(--page-ink); padding-top: 16px; }
.price__k { margin: 0; font: 500 15px/1.4 var(--display); color: var(--page-dim); }
.price__v { margin: 8px 0; font: 800 clamp(34px, 4vw, 52px)/1 var(--display); letter-spacing: -.03em; }
.price__v span { font: 500 16px/1 var(--display); letter-spacing: 0; color: var(--page-dim); }
.price__d { margin: 0; color: var(--page-dim); max-width: 44ch; }
.price__inc { margin-top: 32px; columns: 2; column-gap: 48px; }
.price__inc li { break-inside: avoid; }

.faq__list { margin: 24px 0 0; max-width: 820px; border-top: 1px solid var(--page-rule); }
.faq__list dt { font: 700 19px/1.3 var(--display); padding-top: 18px; }
.faq__list dd { margin: 6px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--page-rule); color: var(--page-dim); max-width: 64ch; }

.contact__terms { margin-top: 28px; }
.voice .contact { margin-top: 64px; }

@media (max-width: 860px) {
  .does__cols, .price__cols { grid-template-columns: 1fr; gap: 32px; }
  .steps__list { grid-template-columns: 1fr 1fr; }
  .price__inc { columns: 1; }
  .sect { padding-top: 64px; }
}
@media (max-width: 520px) { .steps__list { grid-template-columns: 1fr; } }

/* ==================================================================
   Legal pages — the privacy policy and text message terms.
   The wording is what the Twilio A2P registration was approved against;
   restyle freely, but never edit the text from here.
   ================================================================== */
.legal { max-width: 720px; margin: 0 auto; padding: 72px var(--gutter) 96px; color: var(--page-dim); }
.legal__kicker { margin: 0; font: 500 15px/1.4 var(--display); color: var(--page-dim); }
.legal h1 { font: 800 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -.03em; color: var(--page-ink); margin: 12px 0 10px; text-wrap: balance; }
.legal__meta { margin: 0 0 40px; font: 400 15px/1.4 var(--display); color: var(--page-dim); }
.legal h2 { font: 700 21px/1.25 var(--display); color: var(--page-ink); margin: 40px 0 10px; padding-top: 16px; border-top: 1px solid var(--page-rule); }
.legal p, .legal li { font-size: 16px; line-height: 1.6; max-width: 64ch; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--page-dim); }
.legal strong { color: var(--page-ink); font-weight: 600; }
.legal a { color: var(--page-ink); text-underline-offset: 3px; }
.legal__callout { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--page-rule); border-left: 3px solid var(--page-ink); border-radius: 6px; background: #1A1917; }
.legal__callout p { margin: 0; color: var(--page-ink); }

/* ---------- 404 and thanks: one short message, then home ---------- */
.mini { max-width: 720px; margin: 0 auto; padding: 96px var(--gutter) 120px; min-height: 64svh; }
.mini__kicker { margin: 0; font: 500 15px/1.4 var(--display); color: var(--page-dim); }
.mini h1 { font: 800 clamp(40px, 6vw, 76px)/1 var(--display); letter-spacing: -.035em; margin: 12px 0 18px; text-wrap: balance; }
.mini p { margin: 0 0 22px; color: var(--page-dim); font-size: 17px; max-width: 52ch; }
.mini p a { color: var(--page-ink); text-underline-offset: 3px; }
.mini__next { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--page-rule); max-width: 420px; }
.mini__next li { padding: 10px 0; border-bottom: 1px solid var(--page-rule); font: 400 16px/1.5 var(--display); color: var(--page-dim); }
.mini__home { display: inline-flex; gap: 8px; font: 600 15px/1 var(--display); text-decoration: none;
  color: var(--page); background: var(--page-ink); border-radius: 999px; padding: 15px 22px; }