/* ULand site
   Tokens first; components follow in page order. Single-class selectors keep
   specificity flat so sections and components never fight over spacing. */

/* Fonts ------------------------------------------------------------------
   Self-hosted latin subsets from Google Fonts (Gloock v8, Hanken Grotesk v12;
   SIL OFL, licences beside the files). The head of each page preloads both.
   The fallback faces reshape Georgia and Arial to the web fonts' widths and
   vertical metrics (widths measured on the site's own copy), so the swap moves
   almost nothing. Re-measure them if a font is replaced. */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-latin.woff2?v=b862aac1a1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2?v=1f21c6eaa0") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 101.7%;
  ascent-override: 95.9%;
  descent-override: 22.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 500;
  size-adjust: 100.2%;
  ascent-override: 99.8%;
  descent-override: 30.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 94.3%;
  ascent-override: 106%;
  descent-override: 32.1%;
  line-gap-override: 0%;
}

:root {
  --paper: #fafaf6;
  --stone: #efefe8;
  --stone-deep: #e3e4db;
  --evergreen: #1c3a30;
  --evergreen-deep: #132a22;
  --evergreen-soft: #2b5243;
  --brass: #b58a45;
  --brass-light: #d9b77a;
  --muted: #56655d;
  --rule: #d6d9cf;
  --on-dark: #eef0e8;
  --on-dark-muted: #b6c2b9;
  --error: #a3321f;
  /* 3.2:1 on white: a field's edge has to be findable (WCAG 1.4.11). */
  --field-border: #8a9386;

  /* The focus ring and the halo around it. Sections and cards with their own
     background set both, so the ring always clears 3:1 against what it sits on. */
  --focus-ring: var(--evergreen);
  --focus-halo: var(--paper);

  --font-display: "Gloock", "Gloock Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Hanken Grotesk", "Hanken Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius-panel: 28px;
  --radius-frame: 12px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--evergreen);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a, button, input, select, textarea, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(28 58 48 / .12);
}

html:has(.viewer[open]) { overflow: hidden; }

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

/* Two-tone: the ring, with a halo inside and outside it, so it reads on photos and on
   the element's own fill as well as on the page. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 8px var(--focus-halo);
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--evergreen);
  color: var(--paper);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Taking requests, or paused: <html data-requests> in index.html is the one switch, and
   anything but "paused" counts as open. [data-when] marks what shows in one state only.
   The components read the paused layout from these custom properties. */
:root:not([data-requests="paused"]) [data-when="paused"],
:root[data-requests="paused"] [data-when="open"] { display: none; }
:root[data-requests="paused"] {
  --request-columns: minmax(0, 1fr);
  --request-title-wrap: balance;
  --menu-toggle-gap: auto;
}

/* Buttons and links ------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--paper);
  font: 600 17px/1 var(--font-text);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s var(--ease-out);
}
.button:hover { background: var(--evergreen-soft); }
.button:active { transform: translateY(1px); }

.button--small {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

.button--on-dark {
  --focus-ring: var(--paper);
  --focus-halo: var(--evergreen-deep);
  background: var(--paper);
  color: var(--evergreen);
}
.button--on-dark:hover { background: #fff; }

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color .18s ease;
}
.text-link:hover { text-decoration-color: var(--evergreen); }

/* Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 14px var(--gutter);
}

/* The mark is the "U": the lockup reads U + "Land" as one word. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 400 27px/1 var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark__mark {
  width: 30px; height: 30px;
  padding: 3px;
  border-radius: 9px;
  background: var(--evergreen);
  fill: none;
  stroke: var(--brass-light);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.site-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 16px;
}
.site-nav a {
  text-decoration: none;
  color: var(--muted);
  transition: color .15s ease;
}
.site-nav a:hover { color: var(--evergreen); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  /* auto when paused: the header button it sits beside is gone. */
  margin-left: var(--menu-toggle-gap, 4px);
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--evergreen);
  cursor: pointer;
}
.menu-toggle svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
/* The two bars fold into an X while the menu is open. --menu-open is 0 or 1. */
.menu-toggle[aria-expanded="true"] { --menu-open: 1; }
.menu-toggle__bar {
  transform-box: view-box;
  transform-origin: 12px 8px;
  transform: translateY(calc(var(--menu-open, 0) * 4px)) rotate(calc(var(--menu-open, 0) * 45deg));
  transition: transform .22s var(--ease-out);
}
.menu-toggle__bar--bottom {
  transform-origin: 12px 16px;
  transform: translateY(calc(var(--menu-open, 0) * -4px)) rotate(calc(var(--menu-open, 0) * -45deg));
}

.mobile-menu {
  display: grid;
  gap: 4px;
  padding: 8px var(--gutter) 20px;
  border-top: 1px solid var(--rule);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.button) {
  padding: 12px 0;
  font-size: 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.mobile-menu .button { margin-top: 16px; }

/* Hero ------------------------------------------------------------------ */

.hero {
  padding-block: clamp(28px, 4.5vw, 64px) clamp(48px, 6vw, 88px);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}

.hero__title {
  font: 400 clamp(44px, 5vw, 74px)/1 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 25em;
  margin-top: clamp(20px, 2vw, 28px);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(28px, 3vw, 40px);
}

.button--large {
  min-height: 58px;
  padding: 0 30px;
  font-size: 18px;
}

/* Before/after comparison */

.compare { margin: 0; }

/* The comparison sits in a presentation panel and rises out of its bottom edge. */
.compare__panel {
  position: relative;
  overflow: hidden;
  padding: 8% 7% 0;
  border-radius: var(--radius-panel);
  background: var(--evergreen);
}

.compare__device {
  margin-bottom: -24px;
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .12),
    0 30px 60px -24px rgb(0 0 0 / .6);
}

.browser-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: #f1f1ec;
  border-bottom: 1px solid #e2e2da;
}
.browser-bar__field {
  width: min(38%, 320px);
  height: 16px;
  border-radius: 999px;
  background: #e4e4dc;
}

.compare__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: pan-y;
}

.compare__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.compare__stage > picture,
.compare__before {
  position: absolute;
  inset: 0;
}

.compare__before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__before picture { display: block; height: 100%; }

/* Moved with a transform, not `left`, so the opening glide isn't a layout shift.
   The box spans the stage, so translateX(var(--pos)) lands on the divider. */
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 100%;
  transform: translateX(var(--pos));
  pointer-events: none;
}
.compare__handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(19 42 34 / .12), 0 0 24px rgb(0 0 0 / .18);
}
.compare__handle svg {
  position: absolute;
  top: 50%; left: 0;
  width: 52px; height: 52px;
  padding: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--evergreen);
  stroke: var(--paper);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 10px 24px rgb(0 0 0 / .25);
  transition: transform .2s var(--ease-out);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
.compare__range:focus-visible ~ .compare__handle svg,
.compare__stage:hover .compare__handle svg { transform: translate(-50%, -50%) scale(1.06); }
.compare__range:focus-visible ~ .compare__handle svg {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--focus-ring), 0 10px 24px rgb(0 0 0 / .25);
}

.compare__tag {
  position: absolute;
  bottom: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity .2s ease;
}
.compare__tag--before { left: 16px; background: rgb(33 33 33 / .78); color: #fff; }
.compare__tag--after { right: 16px; background: var(--evergreen); color: var(--paper); }
.compare[data-pos="low"] .compare__tag--before,
.compare[data-pos="high"] .compare__tag--after { opacity: 0; }

.compare__caption {
  margin-top: 16px;
  font-size: 15px;
  color: var(--muted);
}

/* Promises -------------------------------------------------------------- */

.promises { padding-bottom: clamp(40px, 5vw, 64px); }

.promises__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--rule);
}

.promise {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 32px;
}
.promise:first-child { padding-left: 0; }
.promise:last-child { padding-right: 0; }
.promise + .promise { border-left: 1px solid var(--rule); }

.promise h3 {
  margin-bottom: 6px;
  font: 400 26px/1.1 var(--font-display);
  letter-spacing: -0.01em;
}
.promise p {
  max-width: 17em;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

.gauge {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
}
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge__track,
.gauge__fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 75 100;
  transform: rotate(135deg);
  transform-origin: 60px 60px;
}
.gauge__track { stroke: var(--stone-deep); }
.gauge__fill {
  stroke: var(--brass);
  stroke-dashoffset: var(--offset);
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.gauge.is-armed .gauge__fill { stroke-dashoffset: 75; }
.gauge--zero .gauge__fill { display: none; }
.gauge__ticks line {
  stroke: var(--evergreen);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .32;
}
.gauge__dot { fill: var(--brass); }
.gauge__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  font: 400 38px/1 var(--font-display);
  letter-spacing: -0.02em;
}
.gauge__value small { font-size: .5em; }

.tweak {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 112px;
}
.tweak__page {
  display: grid;
  align-content: start;
  gap: 6px;
  width: 112px;
  height: 78px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(19 42 34 / .1), 0 12px 24px -14px rgb(19 42 34 / .45);
}
.tweak__bar,
.tweak__title,
.tweak__button { background: var(--tweak); transition: background-color .3s ease; }
.tweak__bar { height: 14px; margin: 0 -10px 4px; }
.tweak__title { width: 72%; height: 8px; border-radius: 4px; }
.tweak__line { width: 92%; height: 5px; border-radius: 3px; background: var(--stone-deep); }
.tweak__line--short { width: 60%; }
.tweak__button { width: 44%; height: 11px; margin-top: 2px; border-radius: 999px; }

.tweak__swatches { display: flex; gap: 4px; }
.tweak__swatches button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.tweak__swatches button::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch);
  transition: box-shadow .18s ease;
}
.tweak__swatches button:hover::before { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px rgb(28 58 48 / .3); }
.tweak__swatches button[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--swatch); }

/* Work ------------------------------------------------------------------ */

.work {
  padding-block: clamp(64px, 7vw, 112px);
  background: var(--stone);
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.work__head h2 {
  font: 400 clamp(36px, 4.6vw, 64px)/1.02 var(--font-display);
  letter-spacing: -0.022em;
}
.work__head p {
  max-width: 24em;
  font-size: 16px;
  color: var(--muted);
}

/* Stacked cards: each one sticks below the header and the next slides over it,
   leaving a sliver of the ones before. Plain scrolling; no script involved. */
.stack {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stack__card {
  --focus-ring: var(--ink);
  --focus-halo: var(--backdrop);
  position: sticky;
  top: calc(96px + var(--i) * 16px);
  display: grid;
  grid-template-columns: minmax(0, .47fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--backdrop);
  color: var(--ink);
  box-shadow: 0 -16px 40px -24px rgb(19 42 34 / .5);
}
/* While keyboard focus is in the stack the cards scroll like any list, so the next
   card can never slide over the focused control (WCAG 2.4.11). site.js adds
   .stack--flat and keeps it until focus moves elsewhere on the page, so a mouse click
   after using the keyboard can't re-stack the cards under the pointer. */
.stack:has(:focus-visible) .stack__card,
.stack--flat .stack__card {
  position: relative;
  top: auto;
}

.showcase__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 3.5vw, 48px);
  padding-right: 8px;
}
.showcase__name h3 {
  font: 400 clamp(30px, 3vw, 42px)/1.04 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.showcase__name p {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
}
.showcase__line {
  max-width: 19em;
  font-size: 17px;
  line-height: 1.45;
}
.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 10px;
}
.showcase__actions .button {
  background: var(--ink);
  color: var(--backdrop);
}
.showcase__actions .button:hover { background: color-mix(in srgb, var(--ink) 86%, var(--backdrop)); }
.showcase__open {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 16px/1 var(--font-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.showcase__open:hover { text-decoration-thickness: 2.5px; }

.showcase__stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  isolation: isolate;
}
.showcase__stage:focus-visible { outline-offset: -8px; border-radius: var(--radius-panel); }

.device {
  position: absolute;
  display: block;
  overflow: hidden;
  transition: transform .45s var(--ease-out);
}
.device img { width: 100%; height: auto; }

.device--desktop {
  left: 5%;
  top: 9%;
  width: 80%;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .06),
    0 18px 40px -12px rgb(0 0 0 / .35),
    0 50px 90px -40px rgb(0 0 0 / .45);
}
.device--desktop .browser-bar { height: 22px; }
.device--desktop .browser-bar__field { height: 10px; }

.device--phone {
  right: 4%;
  bottom: -9%;
  width: 25%;
  padding: 7px;
  border-radius: 34px;
  background: #121212;
  box-shadow: inset 0 0 0 1.5px #3a3a3a, 0 24px 48px -12px rgb(0 0 0 / .5);
}
.device--phone img { border-radius: 27px; }

.showcase__stage:hover .device--desktop,
.showcase__stage:focus-visible .device--desktop { transform: translateY(-6px); }
.showcase__stage:hover .device--phone,
.showcase__stage:focus-visible .device--phone { transform: translateY(-12px); }


.work__note {
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted);
}

/* How it works ---------------------------------------------------------- */

.how {
  --focus-ring: var(--paper);
  --focus-halo: var(--evergreen);
  padding-block: clamp(80px, 10vw, 136px);
  background: var(--evergreen);
  color: var(--on-dark);
}
.how h2 {
  margin-bottom: clamp(40px, 5vw, 64px);
  font: 400 clamp(36px, 4.6vw, 64px)/1.02 var(--font-display);
  letter-spacing: -0.022em;
  color: var(--paper);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid rgb(238 240 232 / .18);
}
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 40px; height: 3px;
  background: var(--brass-light);
}
.step__number {
  display: block;
  margin-bottom: 18px;
  font: 400 56px/1 var(--font-display);
  color: var(--brass-light);
}
.step h3 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.step__time {
  display: inline-block;
  margin: 10px 0 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgb(217 183 122 / .16);
  color: var(--brass-light);
  font-size: 14px;
  font-weight: 600;
}
.step p:last-child {
  font-size: 16px;
  color: var(--on-dark-muted);
}

/* Got a preview from us? ----------------------------------------------- */

.your-preview { padding-top: clamp(64px, 8vw, 112px); }

.your-preview__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-panel);
  background: var(--stone);
}
.your-preview__copy { flex: 1 1 24em; max-width: 36em; }
.your-preview__title {
  font: 400 clamp(30px, 3.4vw, 44px)/1.05 var(--font-display);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.your-preview__text {
  margin-top: 12px;
  font-size: 17px;
  color: var(--muted);
}
.your-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

/* Questions ------------------------------------------------------------- */

.faq { padding-block: clamp(80px, 10vw, 144px); }

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 32px 96px;
  align-items: start;
}
.faq__inner h2 {
  position: sticky;
  top: 112px;
  font: 400 clamp(36px, 4.6vw, 64px)/1.02 var(--font-display);
  letter-spacing: -0.022em;
}

.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }

.faq__item summary {
  position: relative;
  padding: 24px 48px 24px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 16px; height: 2px;
  background: var(--evergreen);
  transition: transform .22s var(--ease-out);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--evergreen-soft); }

.faq__item p {
  max-width: 36em;
  padding-bottom: 28px;
  color: var(--muted);
}

/* Request --------------------------------------------------------------- */

.request {
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--stone);
}

.request__inner {
  display: grid;
  /* One column when paused: the message stands where the form was. */
  grid-template-columns: var(--request-columns, minmax(0, .85fr) minmax(0, 1.15fr));
  gap: 48px 96px;
  align-items: start;
}

.request__intro {
  position: sticky;
  top: 112px;
}
.request__intro h2 {
  margin-bottom: 28px;
  font: 400 clamp(40px, 5.4vw, 76px)/1 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: var(--request-title-wrap, wrap);
}
.request__intro p { max-width: 26em; color: var(--muted); }
.request__email { margin-top: 12px; }
.request__email a {
  color: var(--evergreen);
  font-weight: 600;
  text-decoration-color: var(--brass);
  text-underline-offset: 5px;
}
.request__checks {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}
/* The form's keep mode hides what only a new request needs (site.js sets hidden). */
.request__checks[hidden] { display: none; }
.request__checks li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
}
.request__checks li::before {
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}

.request-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 20px;
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--radius-panel);
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(19 42 34 / .06), 0 24px 60px -30px rgb(19 42 34 / .25);
}

/* align-content: an error under one half-width field mustn't stretch its neighbour. */
.field { display: grid; align-content: start; gap: 8px; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
.field[hidden] { display: none; }

.field label {
  font-size: 15px;
  font-weight: 600;
}
.field__optional {
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: #fff;
  color: var(--evergreen);
  font: 400 17px/1.4 var(--font-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3a30' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }
/* Focused fields get the site's ring from :focus-visible as well. */
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--evergreen); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--error); }

.field__hint { font-size: 14px; color: var(--muted); }
.field__error { font-size: 14px; font-weight: 600; color: var(--error); }

.request-form.is-highlighted { animation: form-glow 1.4s var(--ease-out); }
@keyframes form-glow {
  0%, 30% { box-shadow: 0 0 0 4px rgb(181 138 69 / .55), 0 24px 60px -30px rgb(19 42 34 / .25); }
}

.request-form__submit { grid-column: 1 / -1; margin-top: 4px; }
.request-form__submit .button { width: 100%; }

.request-form__status {
  grid-column: 1 / -1;
  font-size: 16px;
}
.request-form__status:empty { display: none; }
.request-form__status.is-error { color: var(--error); font-weight: 600; }

.request-form.is-sent .field,
.request-form.is-sent .request-form__submit { display: none; }
.request-form.is-sent .request-form__status {
  padding: 8px 0;
  font-size: 20px;
  line-height: 1.45;
}
.request-form__status strong {
  display: block;
  margin-bottom: 8px;
  font: 400 34px/1.1 var(--font-display);
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
  --focus-ring: var(--paper);
  --focus-halo: var(--evergreen-deep);
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 9vw, 120px);
  background: var(--evergreen-deep);
  color: var(--on-dark);
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgb(238 240 232 / .14);
}
.footer-cta__title {
  max-width: 9em;
  font: 400 clamp(40px, 5.6vw, 80px)/1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--paper);
  text-wrap: balance;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
  padding-block: clamp(40px, 5vw, 64px);
}

.wordmark--footer .wordmark__mark { background: var(--evergreen-soft); }
.footer-brand p {
  max-width: 20em;
  margin-top: 16px;
  color: var(--on-dark-muted);
}

.footer-col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 12px;
  font-size: 16px;
}
.footer-col h3 {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brass-light);
}
.footer-col a {
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--on-dark); }

.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 24px;
  border-top: 1px solid rgb(238 240 232 / .14);
  font-size: 14px;
  color: var(--on-dark-muted);
}
.footer-bottom a {
  color: var(--on-dark-muted);
  text-underline-offset: 4px;
}
.footer-bottom a:hover { color: var(--on-dark); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

/* Decorative: drawn from a pseudo-element so it isn't read or checked as text. */
.footer-mark::before {
  content: "ULand";
  display: block;
  padding: 8px 0 32px;
  font: 400 clamp(72px, 14vw, 200px)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--evergreen);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* Not found ------------------------------------------------------------- */

.not-found {
  padding-block: clamp(96px, 16vw, 200px);
}
.not-found__title {
  max-width: 12em;
  font: 400 clamp(46px, 7vw, 96px)/1 var(--font-display);
  letter-spacing: -0.028em;
}
.not-found__text {
  margin: 24px 0 36px;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--muted);
}
.not-found__more {
  margin-top: 28px;
  font-size: 16px;
  color: var(--muted);
}

/* Privacy notice -------------------------------------------------------- */

.legal {
  padding-block: clamp(56px, 9vw, 120px) clamp(80px, 10vw, 144px);
}
.legal__title {
  font: 400 clamp(44px, 6vw, 80px)/1 var(--font-display);
  letter-spacing: -0.025em;
}
.legal__meta {
  margin-top: 18px;
  font-size: 15px;
  color: var(--muted);
}
/* Prose: element selectors stay inside this one class so they never meet the
   page's other components. */
.legal__body {
  max-width: 65ch;
  margin-top: clamp(36px, 5vw, 56px);
}
.legal__body h2 {
  margin: 48px 0 14px;
  font: 400 clamp(26px, 2.6vw, 32px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
}
.legal__body p { margin-top: 14px; }
.legal__body ul {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding-left: 1.2em;
}
.legal__body li::marker { color: var(--brass); }
.legal__body a {
  font-weight: 600;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* Removing a preview (remove/) ------------------------------------------ */

.legal__lede {
  max-width: 34em;
  margin-top: 20px;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--muted);
}
/* Styled as a .request-form; this sets its width and place on the page. */
.remove-form {
  max-width: 34rem;
  margin-top: clamp(32px, 4vw, 48px);
}
.remove-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 24px;
}
.legal__note {
  margin-top: clamp(40px, 5vw, 56px);
  font-size: 15px;
  color: var(--muted);
}

/* Live viewer ----------------------------------------------------------- */

.viewer {
  width: min(1320px, calc(100vw - 32px));
  max-width: none;
  height: min(900px, calc(100dvh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--stone);
  color: var(--evergreen);
  box-shadow: 0 40px 120px rgb(0 0 0 / .45);
  overscroll-behavior: contain;
}
.viewer[open] {
  display: flex;
  flex-direction: column;
  animation: viewer-in .28s var(--ease-out);
}
.viewer::backdrop {
  background: rgb(10 22 18 / .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@keyframes viewer-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

.viewer__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.viewer__name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}
.viewer__title {
  min-width: 0;
  font: 400 22px/1.1 var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Every page in the viewer is a concept for a fictional business; the bar says so. */
.viewer__chip {
  flex: none;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--stone);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.viewer__cta { flex: none; }

.viewer__modes {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--stone);
}
.viewer__modes button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 14px/1 var(--font-text);
  cursor: pointer;
}
.viewer__modes button[aria-pressed="true"] {
  background: #fff;
  color: var(--evergreen);
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}

.viewer__newtab {
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 4px;
}

.viewer__close {
  width: 44px; height: 44px;
  padding: 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--evergreen);
  cursor: pointer;
}
.viewer__close:hover { background: var(--stone); }
.viewer__close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.viewer__stage {
  flex: 1;
  display: flex;
  justify-content: center;
  min-height: 0;
  background: var(--stone-deep);
}
.viewer__stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.viewer__stage[data-mode="phone"] { padding: 20px 0; }
.viewer__stage[data-mode="phone"] iframe {
  width: 390px;
  border-radius: 28px;
  box-shadow: 0 0 0 8px #121212, 0 24px 60px rgb(0 0 0 / .35);
}

/* Sticky call to action (phones) ---------------------------------------- */

.sticky-cta { display: none; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
  .promise { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .stack__card { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .site-header__inner { gap: 12px; }
  .site-nav { display: none; }
  .site-header__cta { margin-left: auto; }
  .menu-toggle { display: inline-flex; }

  .faq__inner,
  .request__inner { grid-template-columns: minmax(0, 1fr); }
  .faq__inner h2,
  .request__intro { position: static; }

  .promises__list { grid-template-columns: minmax(0, 1fr); }

  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__lede { max-width: 32em; }

  .stack__card {
    top: calc(84px + var(--i) * 12px);
    grid-template-columns: minmax(0, 1fr);
  }
  .showcase__stage { order: -1; aspect-ratio: 16 / 10; overflow: hidden; }
  .device--phone { bottom: 7%; }
  .showcase__info { padding: 4px 28px 28px; }
  .promise,
  .promise:first-child,
  .promise:last-child { flex-direction: row; align-items: center; gap: 24px; padding: 24px 0; }
  .promise + .promise { border-left: 0; border-top: 1px solid var(--rule); }

  .viewer__newtab { display: none; }
}

/* Short single-column screens (a phone with its toolbars showing, a small tablet in
   landscape): a stuck card would leave too little room for the next card's name and
   button, so the cards scroll like a plain list. */
@media (max-width: 900px) and (max-height: 760px) {
  .stack__card { position: relative; top: auto; }
}

/* While the header has room for the button, the menu doesn't repeat it. */
@media (min-width: 560px) {
  .mobile-menu__cta { display: none; }
}

@media (max-width: 699px) {
  body { font-size: 17px; }

  /* A full row of its own: the button's width no longer depends on the font, so the
     link below can't jump between rows when the web fonts arrive (that was the
     0.134 phone layout shift). */
  .hero__actions .button { flex: 1 1 100%; }

  .compare__panel { padding: 32px 20px 0; border-radius: 22px; }
  .compare__device {
    width: min(300px, 100%);
    margin: 0 auto -48px;
    padding: 8px;
    border-radius: 40px;
    background: #121212;
    box-shadow: inset 0 0 0 1.5px #3a3a3a, 0 30px 60px -20px rgb(19 42 34 / .5);
  }
  .compare__device .browser-bar { display: none; }
  .compare__stage {
    aspect-ratio: 390 / 844;
    border-radius: 32px;
  }
  .compare__caption { text-align: center; }
  .compare__tag { bottom: 62px; }
  .compare__tag--before { left: 12px; }
  .compare__tag--after { right: 12px; }

  .gauge, .tweak { width: 96px; }
  .gauge { height: 96px; }
  .gauge__value { font-size: 32px; }
  .tweak__page { width: 96px; height: 68px; }
  .promise h3 { font-size: 23px; }

  .stack__card { border-radius: 22px; }
  .your-preview__panel { border-radius: 22px; }
  .your-preview__keep { flex: 1 1 100%; }
  .showcase__stage { aspect-ratio: 4 / 3.3; }
  .device--desktop { left: 7%; top: 12%; width: 86%; }
  .device--phone { right: 5%; bottom: 6%; width: 28%; padding: 4px; border-radius: 20px; }
  .device--phone img { border-radius: 16px; }
  .showcase__info { padding: 4px 22px 24px; }
  .showcase__actions .button { flex: 1 1 auto; }

  .steps { grid-template-columns: minmax(0, 1fr); }

  .request-form { grid-template-columns: minmax(0, 1fr); }
  .field--half { grid-column: 1 / -1; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { padding-bottom: 96px; }

  .viewer {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .viewer__bar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 8px 12px 16px; }
  .viewer__name { flex: 1 1 0; }
  /* The chip takes room from the name, so a long name wraps to a second line rather than
     losing its end ("Hartley & Sons Plumbing"). */
  .viewer__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  .viewer__modes { display: none; }
  /* Its own row under the name, the close button and the chip. */
  .viewer__cta { order: 1; flex: 1 1 100%; }
  .viewer__stage[data-mode="phone"] { padding: 0; }
  .viewer__stage[data-mode="phone"] iframe,
  .viewer__stage iframe { width: 100%; border-radius: 0; box-shadow: none; }
}

/* Below 560px the sticky button at the bottom takes over from the header's, so the two are
   never on screen together. */
@media (max-width: 559px) {
  /* Keyboard focus scrolls a field or link clear of the sticky button: its 52px, its 12px
     offset and some air (WCAG 2.4.11). */
  html { scroll-padding-bottom: 84px; }

  .site-header__cta { display: none; }
  .menu-toggle { margin-left: auto; }

  .sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 40;
    display: block;
    visibility: hidden;
    transform: translateY(140%);
    transition: transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  .sticky-cta.is-visible {
    visibility: visible;
    transform: none;
    transition: transform .3s var(--ease-out), visibility 0s;
  }
  .sticky-cta .button {
    width: 100%;
    box-shadow: 0 14px 30px -10px rgb(19 42 34 / .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}