/* ==========================================================================
   Pikewood Agency
   Pine, birch and work-truck amber. Inter for everything: its optical-size
   axis gives tighter display shapes for headings and open shapes for body
   text. One loud element (the hero phone); everything else quiet.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Arial resized to Inter's metrics, so text does not jump when Inter loads. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  --pine: #1f3b2d;
  --pine-deep: #152a20;
  --pine-mist: #b4c4b8; /* secondary text on pine: moss fails contrast there */
  --birch: #eef1ec;
  --bark: #23211e;
  --moss: #5e6b60;
  --amber: #e9b23a;
  --amber-press: #d9a02a;
  --lake: #2f6a8a;
  --line: #d3d9d2;
  --field-line: #7e8a80; /* 3.6:1 on white, so inputs read as inputs */
  --error: #b42318;
  --white: #ffffff;

  --font-head: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: var(--font-head);

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(64px, 9vw, 112px);
  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--birch);
  color: var(--bark);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 48em) {
  body {
    font-size: 1.125rem; /* 18px */
  }
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.019em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 650;
  line-height: 1.07;
  letter-spacing: -0.024em;
}

h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.014em;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--lake);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Amber ring for focus, with a bark ring inside it so it still shows
   on birch, where amber alone is only 1.7:1. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bark);
}

::selection {
  background: rgb(233 178 58 / 0.4);
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--amber);
  color: var(--bark);
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

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

.section {
  padding-block: var(--section);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.lede {
  max-width: 62ch;
  margin-top: 20px;
  color: var(--moss);
}

.measure {
  max-width: 68ch;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: 700 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--amber);
  color: var(--bark);
}

.btn-primary:hover {
  background: var(--amber-press);
}

.btn-primary:disabled {
  cursor: progress;
  opacity: 0.75;
}

.btn-outline-light {
  border-color: rgb(255 255 255 / 0.75);
  color: var(--white);
}

.btn-outline-light:hover {
  border-color: var(--white);
  background: rgb(255 255 255 / 0.08);
}

.btn-outline {
  border-color: var(--pine);
  color: var(--pine);
}

.btn-outline:hover {
  background: rgb(31 59 45 / 0.06);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--birch);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: var(--pine);
}

.brand .logo-full {
  height: 32px;
  width: auto;
}

.brand .logo-compact,
.brand .logo-mark {
  display: none;
  height: 28px;
  width: auto;
}

.site-nav ul {
  display: flex;
  gap: 4px;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--bark);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}

.site-nav a:hover {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.menu-toggle {
  display: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: transparent;
  color: var(--bark);
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
}

.header-cta {
  min-height: 44px;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 0.9375rem;
}

.header-cta .label-short {
  display: none;
}

@media (max-width: 63.99em) {
  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--birch);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .site-nav.is-open ul {
    flex-direction: column;
    gap: 0;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 8px var(--gutter) 16px;
  }

  .site-nav.is-open li + li {
    border-top: 1px solid var(--line);
  }

  .site-nav.is-open a {
    min-height: 52px;
    padding: 0;
    font-size: 1.0625rem;
  }
}

@media (max-width: 29.99em) {
  .header-bar {
    gap: 8px;
  }

  .brand .logo-full {
    display: none;
  }

  .brand .logo-compact {
    display: block;
  }

  .menu-toggle {
    padding: 0 12px;
  }

  .header-cta {
    padding: 8px 12px;
  }

  .header-cta .label-long {
    display: none;
  }

  .header-cta .label-short {
    display: inline;
  }
}

@media (max-width: 23.99em) {
  .brand .logo-compact {
    display: none;
  }

  .brand .logo-mark {
    display: block;
    height: 32px;
  }
}

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

.hero {
  background: var(--pine);
  color: var(--white);
  padding-block: clamp(48px, 8vw, 104px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

@media (min-width: 60em) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 72px;
    align-items: center;
  }
}

.hero h1 {
  max-width: 17ch;
}

.hero-copy > p {
  max-width: 54ch;
  margin-top: 24px;
  color: rgb(255 255 255 / 0.88);
}

.hero .btn-row {
  margin-top: 32px;
}

.hero .fine {
  margin-top: 16px;
  color: var(--pine-mist);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Hero phone. The finished conversation is in the HTML, so it reads
   without JS. With JS, site.js adds .play when the phone is on screen and
   the thread plays once. Reduced motion keeps the finished state.
   -------------------------------------------------------------------------- */

.phone {
  width: 300px;
  max-width: 100%;
  padding: 10px;
  border-radius: 14px;
  background: #0d1611;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 28px 60px -24px rgb(0 0 0 / 0.55);
}

@media (min-width: 60em) {
  .phone {
    width: 320px;
  }
}

.phone-screen {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f7f5;
  color: var(--bark);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.phone-status svg {
  height: 10px;
  width: auto;
  fill: currentColor;
}

.phone-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid #e2e6e1;
}

.phone-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #cfd8d1;
  color: var(--pine);
}

.phone-avatar svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.phone-contact strong {
  display: block;
  font-size: 0.875rem;
}

.phone-contact span {
  color: var(--moss);
  font-size: 0.75rem;
}

.thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
}

.thread .sys {
  align-self: center;
  margin-bottom: 6px;
  color: var(--moss);
  font-size: 0.75rem;
  text-align: center;
}

.thread .sys b {
  display: block;
  color: #a12a20;
  font-weight: 700;
}

/* Each message slot stacks the typing dots and the bubble in one cell,
   so the dots sit exactly where the bubble lands. */
.slot {
  display: grid;
}

.slot > * {
  grid-area: 1 / 1;
}

.slot.out {
  justify-items: end;
}

.slot.in {
  justify-items: start;
}

.bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 16px;
  transform-origin: bottom right;
}

.out .bubble {
  background: var(--lake);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.in .bubble {
  background: var(--white);
  border: 1px solid #e2e6e1;
  border-bottom-left-radius: 4px;
  transform-origin: bottom left;
}

.typing {
  display: none;
  align-self: end;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  background: #dfe5e1;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
}

.phone-compose {
  margin: 0 12px 12px;
  padding: 9px 14px;
  border: 1px solid #d9dfda;
  border-radius: 18px;
  background: var(--white);
  color: var(--moss);
}

@media (prefers-reduced-motion: no-preference) {
  .js .phone .sys,
  .js .phone .bubble {
    opacity: 0;
  }

  .js .phone .typing {
    display: flex;
    opacity: 0;
  }

  .phone.play .sys,
  .phone.play .bubble {
    animation: pop 250ms ease-out var(--at) both;
  }

  .phone.play .typing {
    animation: typing 600ms linear var(--typing) both;
  }

  .phone.play .typing i {
    animation: dot 600ms ease-in-out var(--typing) infinite;
  }

  .phone.play .typing i:nth-child(2) {
    animation-delay: calc(var(--typing) + 120ms);
  }

  .phone.play .typing i:nth-child(3) {
    animation-delay: calc(var(--typing) + 240ms);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes typing {
  0% { opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dot {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Rows: list content separated by thin rules, not cards.
   -------------------------------------------------------------------------- */

.rows {
  margin-top: 40px;
  border-bottom: 1px solid var(--line);
}

.rows > li {
  display: grid;
  gap: 6px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}

@media (min-width: 48em) {
  .rows > li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    padding-block: 28px;
  }
}

.rows h3 {
  color: var(--pine);
}

.rows p {
  max-width: 60ch;
  color: var(--bark);
}

.rows .note {
  display: block;
  margin-top: 4px;
  color: var(--moss);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.006em;
}

.closing-line {
  max-width: 62ch;
  margin-top: 32px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   How it works: the one numbered sequence on the site.
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 40px;
  counter-reset: step;
}

.steps > li {
  padding-block: 28px;
  border-top: 2px solid var(--pine);
}

.step-num {
  display: block;
  margin-bottom: 12px;
  color: var(--pine);
  font-family: var(--font-head);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.steps h3 {
  margin-bottom: 10px;
}

.steps p {
  color: var(--bark);
}

@media (min-width: 56em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .steps > li {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Sample site
   -------------------------------------------------------------------------- */

.sample-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

@media (min-width: 60em) {
  .sample-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
  }
}

.sample-copy .btn {
  margin-top: 28px;
}

.sample-figure {
  margin: 0;
}

.mockups {
  position: relative;
  padding-right: 44px;
  padding-bottom: 48px;
}

.browser {
  overflow: hidden;
  border: 1px solid #c7cfc8;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 24px 48px -28px rgb(21 42 32 / 0.45);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid #e2e6e1;
  background: #f3f5f2;
}

.browser-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9d1ca;
}

.browser-bar span {
  flex: 1;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--white);
  color: var(--moss);
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser img,
.mini-phone img {
  width: 100%;
  height: auto;
}

.mini-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  min-width: 112px;
  padding: 5px;
  border-radius: 14px;
  background: #0d1611;
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.55);
}

.mini-phone img {
  border-radius: 9px;
}

.caption {
  margin-top: 14px;
  color: var(--moss);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Who we work with
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.tags li {
  padding: 8px 14px;
  border: 1px solid #b9c3ba;
  background: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
}

.tags + p {
  margin-top: 28px;
  color: var(--moss);
}

/* --------------------------------------------------------------------------
   Split layout: heading on the left, content on the right (About, FAQ).
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
  }
}

.about-body p + p {
  margin-top: 18px;
}

.signoff {
  font-weight: 700;
}

.about-photo {
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-bottom: 1px solid var(--line);
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding-block: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

/* Plus that turns into a minus: a mark of state, not a decoration. */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--pine), var(--pine)) center / 14px 2px no-repeat,
    linear-gradient(var(--pine), var(--pine)) center / 2px 14px no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(var(--pine), var(--pine)) center / 14px 2px no-repeat;
}

.faq summary:hover {
  color: var(--pine);
}

.faq details p {
  max-width: 60ch;
  padding-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  background: var(--pine);
  color: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

@media (min-width: 60em) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }
}

.contact-copy > p {
  max-width: 44ch;
  margin-top: 20px;
  color: rgb(255 255 255 / 0.88);
}

.direct {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

.direct dt {
  color: var(--pine-mist);
  font-size: 0.9375rem;
}

.direct dd {
  margin: 2px 0 16px;
  font-weight: 700;
}

.direct a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
}

.form-panel {
  padding: clamp(22px, 4vw, 40px);
  background: var(--white);
  color: var(--bark);
}

.form-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 40em) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .full {
    grid-column: 1 / -1;
  }
}

.field label,
.field .label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.field .optional {
  color: var(--moss);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: var(--white);
  color: var(--bark);
  font: 400 1rem/1.4 var(--font-body);
}

.field select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bark) 50%),
    linear-gradient(135deg, var(--bark) 50%, transparent 50%);
  background-position:
    right 20px center,
    right 14px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--bark);
}

.field [aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.field-error {
  margin-top: 6px;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 600;
}

.field-error:empty {
  display: none;
}

.field .consent {
  display: grid;
  margin: 0;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--moss);
  font-size: 0.875rem;
  line-height: 1.5;
}

.field .consent input {
  width: 22px;
  min-height: 0;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--pine);
}

.field .consent a {
  color: var(--lake);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-top: 28px;
}

.form-actions .btn {
  width: 100%;
}

@media (min-width: 40em) {
  .form-actions .btn {
    width: auto;
    min-width: 220px;
  }
}

.form-alert {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 4px solid var(--error);
  background: #fdf1ef;
  font-size: 0.9375rem;
}

.form-alert[hidden] {
  display: none;
}

.form-success {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--pine);
}

.form-success:focus {
  outline: none;
  box-shadow: none;
}

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

.site-footer {
  padding-block: 48px;
  background: var(--pine-deep);
  color: var(--pine-mist);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.footer-logo {
  width: 200px;
  height: auto;
  margin-bottom: 14px;
}

.site-footer a {
  color: var(--white);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-copy {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

/* --------------------------------------------------------------------------
   Plain pages: privacy, terms, 404
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(48px, 7vw, 88px) 0;
}

.page-head p {
  margin-top: 16px;
  color: var(--moss);
}

.prose {
  max-width: 68ch;
  padding-block: 40px var(--section);
}

.prose h2 {
  margin-top: 48px;
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: 28px;
}

.prose p,
.prose ul {
  margin-top: 14px;
}

.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.prose li + li {
  margin-top: 6px;
}

.prose blockquote {
  margin: 14px 0 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--pine);
  font-weight: 600;
}