/* ═══════════════════════════════════════════════════════════════════
   Holiday Lighting landing page — standalone stylesheet.

   Deliberately independent of the main site's css/style.css: this page
   takes paid traffic and must stay fast, so it loads none of the
   homepage's scroll-animation weight. Mobile-first; desktop rules are
   additive inside min-width queries.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────── self-hosted fonts ─────────────
   Served from our own origin rather than Google Fonts, for three reasons:
   no third-party DNS/TLS handshake on the critical path, no data leaving
   to a third party on page load, and — the big one — these are preloaded
   in the HTML so they're ready at first paint. That removes the
   swap-triggered relayout of a ~9000px page, which was the single largest
   main-thread cost on this route.
   Both are variable fonts, so one file covers the whole weight range. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/sora-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --forest: #3D5424;
  --forest-dark: #2C3D1A;
  --olive: #6E8F3F;
  --paper: #F7F6F2;
  --ink: #1E1E1E;
  --line: #DEDEDE;
  --warm: #FFF4DC;
  --red: #B3261E;          /* "Limited dates" badge only */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bar-h: 68px;           /* mobile sticky action bar height */
  --wrap: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;           /* belt-and-braces against horizontal scroll */
  padding-bottom: var(--bar-h); /* clears the mobile sticky bar */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--forest);
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 6.2vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.35rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.3rem); }
p  { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 52px 0; }
.section-paper { background: var(--paper); }
.section-lead { max-width: 62ch; }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 768px) { .section { padding: 76px 0; } }

/* ───────────── buttons ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--forest-dark); }
/* olive fails 4.5:1 as a text/background pair, so the secondary button uses
   an olive RULE with forest text rather than olive fill */
.btn-secondary { background: #fff; color: var(--forest); border-color: var(--olive); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--paper); border-color: var(--forest); }
.btn-onGreen { background: var(--warm); color: var(--forest-dark); }
.btn-onGreen:hover, .btn-onGreen:focus-visible { background: #fff; }
.btn-block { display: flex; width: 100%; }
@media (min-width: 560px) { .btn-block { width: auto; display: inline-flex; } }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--olive); outline-offset: 2px; border-radius: 4px;
}

/* ───────────── sticky header ───────────── */
.hl-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--forest); color: #fff;
  border-bottom: 3px solid var(--olive);
}
.hl-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 62px; padding-top: 8px; padding-bottom: 8px;
}
.hl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; min-height: 44px; }
/* the logo mark is 328x208 — keep that ratio, never force it square */
.hl-brand img { width: 60px; height: 38px; object-fit: contain; }
.hl-brand-text { font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.1; }
.hl-brand-text em { display: block; font-style: normal; font-weight: 400; opacity: .85; font-size: .82rem; }
.hl-header-actions { display: flex; align-items: center; gap: 14px; }
.hl-header-phone {
  /* flex + min-height keeps this a full 44px tap target, not just text height */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: #fff; text-decoration: none; font-family: var(--font-display);
  font-weight: 600; font-size: .95rem; white-space: nowrap;
}
.hl-header-phone:hover { text-decoration: underline; }
.hl-header .btn { display: none; min-height: 44px; padding: 10px 18px; font-size: .92rem; }
@media (min-width: 768px) { .hl-header .btn { display: inline-flex; } }

/* ───────────── mobile sticky action bar ───────────── */
.hl-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--olive);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 14px rgba(0,0,0,.18);
}
.hl-actionbar a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--bar-h); padding: 10px 6px;
  font-family: var(--font-display); font-weight: 600;
  /* scales down just enough to keep the full phone number on one line at 360px */
  font-size: clamp(.82rem, 3.5vw, .96rem);
  text-decoration: none; text-align: center; line-height: 1.2;
  white-space: nowrap;
}
.hl-actionbar .ab-call { background: var(--forest); color: #fff; }
.hl-actionbar .ab-design { background: var(--warm); color: var(--forest-dark); }
@media (min-width: 768px) { .hl-actionbar { display: none; } }

/* ───────────── hero ───────────── */
.hl-hero { position: relative; background: var(--forest-dark); color: #fff; overflow: hidden; }
.hl-hero-media { position: absolute; inset: 0; }
.hl-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hl-hero-media::before {
  /* Darkest at the top where the headline sits, easing through the middle so
     the lit house still reads. Keeps white text well clear of WCAG AA even if
     a bright photo is dropped into the slot later.
     MUST be ::before, not ::after — an element only gets one of each, and
     .is-concept claims ::after for the "Design concept" label. Putting both
     on ::after silently merged them and destroyed this overlay. */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,26,8,.82) 0%, rgba(16,26,8,.64) 54%, rgba(16,26,8,.80) 100%);
}
.hl-hero-inner { position: relative; z-index: 1; padding: 46px 0 52px; }
@media (min-width: 768px) { .hl-hero-inner { padding: 88px 0 96px; max-width: 46rem; } }
.hl-hero h1 { color: #fff; margin-bottom: .45em; }
.hl-hero-sub { font-size: 1.04rem; color: rgba(255,255,255,.92); max-width: 44ch; }
.hl-badge {
  display: inline-block; margin-bottom: 16px; padding: 7px 15px;
  background: rgba(255,244,220,.14); border: 1px solid rgba(255,244,220,.5);
  color: var(--warm); border-radius: 100px;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
}
.hl-hero-actions { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 16px; align-items: flex-start; }
@media (min-width: 560px) { .hl-hero-actions { flex-direction: row; align-items: center; gap: 18px; } }
.hl-hero-call {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--warm); font-weight: 600; font-family: var(--font-display);
}
.hl-hero-note { font-size: .92rem; color: rgba(255,255,255,.86); max-width: 42ch; margin: 0; }

/* ───────────── "Design concept" label ─────────────
   These images are AI-generated design concepts, not photographs of
   completed Cavanaugh jobs, and the client brief requires them to say
   so. The label lives here rather than baked into the image files, so
   swapping an image can never silently drop it. Any element carrying
   .is-concept gets the label on whatever image sits inside it.
   REMOVE the class from an element once a real job photo replaces its
   image — and only then. */
/* Deliberately does NOT set `position`. An earlier version declared
   `position: relative` here, which silently overrode
   `.hl-hero-media { position: absolute }` — same specificity, later in the
   file — and dropped the full-bleed hero out of its layer. Every container
   using this class is already positioned (hero absolute, pkg/why relative),
   so the label anchors correctly without it. If you add .is-concept to a new
   element, give THAT element a position instead of adding one here. */
.is-concept::after {
  content: "Design concept";
  /* inset:auto resets any inset the host rule may set, so the label anchors
     to the corner instead of stretching to fill its container */
  position: absolute; inset: auto 10px 10px auto; z-index: 2;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(16, 26, 8, .72); color: var(--warm);
  font-family: var(--font-body); font-size: .72rem; line-height: 1.3;
  letter-spacing: .01em; pointer-events: none;
}
/* the hero image is full-bleed behind text, so its label sits above the
   sticky mobile action bar rather than under it */
.hl-hero-media.is-concept::after { bottom: calc(var(--bar-h) + 10px); }
@media (min-width: 768px) { .hl-hero-media.is-concept::after { bottom: 10px; } }

/* ───────────── everything's included ───────────── */
.hl-included { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .hl-included { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.hl-inc {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 16px; text-align: center;
}
.hl-inc svg { width: 32px; height: 32px; margin: 0 auto 10px; color: var(--olive); display: block; }
.hl-inc span { font-family: var(--font-display); font-weight: 600; font-size: .92rem; line-height: 1.35; display: block; }

/* ───────────── how it works ───────────── */
.hl-steps { display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 900px) { .hl-steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.hl-step { position: relative; padding-left: 58px; }
@media (min-width: 900px) { .hl-step { padding-left: 0; padding-top: 62px; } }
.hl-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.hl-step h3 { margin-bottom: .3em; }
.hl-step p { margin: 0; font-size: .96rem; }

/* ───────────── packages ───────────── */
.hl-packages { display: grid; gap: 22px; }
@media (min-width: 900px) { .hl-packages { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.hl-pkg {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
.hl-pkg-featured { border: 2px solid var(--forest); box-shadow: 0 8px 28px rgba(61,84,36,.15); }
.hl-pkg-media { position: relative; background: var(--forest-dark); }
.hl-pkg-media img { width: 100%; aspect-ratio: 800 / 520; object-fit: cover; }
.hl-pkg-tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--warm); color: var(--forest-dark);
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
}
.hl-pkg-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.hl-pkg h3 { margin-bottom: .15em; }
/* Held a price until the client moved to quote-on-request. Sized down from
   1.3rem since it now carries a short phrase rather than a headline figure,
   and shouldn't compete with the package name above it. */
.hl-pkg-price {
  /* forest, not olive: olive only clears ~3.2:1 on white and this is
     normal-size text, so olive would fail WCAG AA here */
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  color: var(--forest); margin: 0 0 10px;
  letter-spacing: .02em;
}
.hl-pkg-desc { font-size: .96rem; margin-bottom: 14px; }
.hl-pkg ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.hl-pkg li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: .95rem; }
.hl-pkg li::before {
  content: ""; position: absolute; left: 4px; top: .48em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--olive);
}
.hl-pkg-note { max-width: 70ch; margin: 24px auto 0; font-size: .9rem; color: #4a4a4a; }

/* ───────────── why a landscape company ───────────── */
.hl-why { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .hl-why { grid-template-columns: 1fr 1fr; gap: 46px; } }
.hl-why-media { position: relative; border-radius: 14px; overflow: hidden; }
.hl-why-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ───────────── promises ───────────── */
.hl-promises { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .hl-promises { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.hl-promises li {
  border-left: 4px solid var(--olive); padding: 4px 0 4px 16px; font-size: .98rem;
}
.hl-promises b { font-family: var(--font-display); color: var(--forest); display: block; }

/* ───────────── service area ───────────── */
.hl-pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; }
.hl-pills li {
  background: #fff; border: 1px solid var(--olive); color: var(--forest);
  border-radius: 100px; padding: 8px 17px;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
}

/* ───────────── season dates callout ───────────── */
.hl-season {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--forest); border-radius: 12px;
  padding: 24px 22px; max-width: 740px; margin: 0 auto;
}
.hl-season p { margin: 0; }
/* The red "Limited dates" chip that lived here was removed with the scarcity
   messaging. --red is now used only for form required-marks and errors. */

/* ───────────── FAQ ───────────── */
.hl-faq { max-width: 820px; margin: 0 auto; }
.hl-faq details { border-bottom: 1px solid var(--line); background: #fff; }
.hl-faq summary {
  cursor: pointer; list-style: none; padding: 18px 44px 18px 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--forest); position: relative; min-height: 44px;
}
.hl-faq summary::-webkit-details-marker { display: none; }
.hl-faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--olive); border-bottom: 2.5px solid var(--olive);
  transform: rotate(45deg); transition: transform .2s ease;
}
.hl-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.hl-faq-a { padding: 0 2px 20px; margin: 0; font-size: .97rem; }

/* ───────────── form ───────────── */
.hl-form-section { background: var(--forest); color: #fff; scroll-margin-top: 70px; }
.hl-form-section h2 { color: #fff; }
.hl-form-intro { max-width: 52ch; color: rgba(255,255,255,.93); }
.hl-form {
  background: #fff; color: var(--ink); border-radius: 14px;
  padding: 24px 20px 28px; margin-top: 26px; max-width: 720px;
}
@media (min-width: 768px) { .hl-form { padding: 34px 32px 36px; } }
.hl-field { margin-bottom: 18px; }
.hl-field > label, .hl-legend {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: .94rem; color: var(--forest);
}
.hl-req { color: var(--red); }
.hl-field input[type="text"], .hl-field input[type="tel"], .hl-field input[type="email"],
.hl-field select, .hl-field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
}
.hl-field textarea { min-height: 104px; resize: vertical; }
.hl-field input:focus, .hl-field select:focus, .hl-field textarea:focus {
  border-color: var(--forest); outline: 3px solid rgba(110,143,63,.35); outline-offset: 0;
}
.hl-field input[aria-invalid="true"], .hl-field select[aria-invalid="true"] { border-color: var(--red); }
.hl-row { display: grid; gap: 0; }
@media (min-width: 600px) { .hl-row { grid-template-columns: 1fr 1fr; gap: 0 16px; } }
@media (min-width: 600px) { .hl-row-city { grid-template-columns: 2fr 1fr; } }
.hl-error { display: none; margin: 6px 0 0; font-size: .87rem; color: var(--red); font-weight: 500; }
.hl-error.is-shown { display: block; }
fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.hl-radios { display: grid; gap: 8px; }
@media (min-width: 600px) { .hl-radios { grid-template-columns: repeat(2, 1fr); } }
.hl-radio, .hl-check {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 46px; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer;
  font-size: .95rem; line-height: 1.4; background: #fff;
}
.hl-radio input, .hl-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--forest); }
.hl-radio:has(input:checked) { border-color: var(--forest); background: var(--paper); }
.hl-check { align-items: flex-start; margin-top: 4px; }
.hl-hint { font-size: .86rem; color: #555; margin: 6px 0 0; }
.hl-photos { margin-top: 8px; }
/* the raw file control is ~21px tall and easy to miss — make it a real target */
.hl-photos input[type="file"] {
  width: 100%; min-height: 50px; padding: 11px 13px;
  border: 1.5px dashed var(--line); border-radius: 8px; background: #fff;
  font-family: var(--font-body); font-size: .93rem; color: #444;
}
.hl-photos input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 38px; padding: 9px 15px;
  border: 0; border-radius: 6px; background: var(--forest); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.hl-photo-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hl-photo-list li {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: .84rem; max-width: 100%;
}
.hl-photo-list img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.hl-photo-list button {
  border: 0; background: none; color: var(--red); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 6px; min-width: 32px; min-height: 32px;
}
.hl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hl-submit { width: 100%; margin-top: 8px; }
.hl-submit[disabled] { opacity: .72; cursor: progress; }
.hl-spinner {
  width: 17px; height: 17px; margin-right: 9px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: hl-spin .7s linear infinite; display: none;
}
.hl-submit.is-sending .hl-spinner { display: inline-block; }
@keyframes hl-spin { to { transform: rotate(360deg); } }
.hl-form-status { margin: 14px 0 0; font-size: .94rem; font-weight: 500; }
.hl-form-status.is-error { color: var(--red); }

/* ───────────── final CTA band ───────────── */
.hl-band { background: var(--forest); color: #fff; text-align: center; padding: 48px 0; }
.hl-band h2 { color: #fff; margin-bottom: .6em; }
.hl-band-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (min-width: 560px) { .hl-band-actions { flex-direction: row; justify-content: center; gap: 22px; } }
.hl-band a.hl-band-phone {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  color: var(--warm); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}

/* ───────────── footer ───────────── */
.hl-footer { background: var(--forest-dark); color: rgba(255,255,255,.88); padding: 40px 0 34px; font-size: .92rem; }
.hl-footer a { color: var(--warm); }
.hl-footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.hl-footer-brand img { width: 69px; height: 44px; object-fit: contain; }
.hl-footer-brand span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1rem; }
.hl-footer-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .hl-footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; } }
.hl-footer p { margin: 0 0 4px; }
/* footer links carry real tap height on phones */
.hl-footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }
.hl-footer-legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: .85rem; opacity: .82; }

/* ───────────── thank-you page ───────────── */
.hl-thanks { display: flex; align-items: center; justify-content: center; text-align: center; padding: 64px 0 76px; min-height: 58vh; }
.hl-thanks-check {
  width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--forest); display: flex; align-items: center; justify-content: center;
}
.hl-thanks-check svg { width: 38px; height: 38px; color: #fff; }
.hl-thanks p { max-width: 46ch; margin: 0 auto 1.4rem; font-size: 1.04rem; }