/* Weld landing site.
   Tokens are the light ("marketing") theme from design_handoff_weld_app/README.md
   — the same palette the app's HomePage renders under [data-theme="light"].

   One stylesheet, no framework, no build step: the page is server-rendered and
   should paint on the first response. */

:root {
  --bg: #f6f1e9;
  --surface: #ffffff;
  --raised: #faf6ee;
  --inset: #f2ece1;
  --line: #f0e9dc;
  --line-card: #ece4d6;
  --line-strong: #e0d5bf;
  --control: #fbf8f2;

  --ink: #1c1a17;
  --ink-em: #3d3a34;
  --ink-2: #6f6a60;
  --ink-3: #989286;
  --ink-4: #a89f8c;

  --accent: #f5c518;
  --accent-ink: #1a1200;
  --accent-hover: #e0b214;
  /* Brand yellow as TEXT on cream is ~1.7:1 and fails every contrast bar, so
     text uses this darkened remap. The bright yellow stays for fills. */
  --accent-text: #8a6d00;
  --accent-2: #0e7c69;
  --accent-2-ink: #ffffff;

  --r-pill: 999px;
  --r-card: 16px;
  --r-panel: 14px;
  --r-tile: 10px;
  --r-control: 9px;
  --r-chip: 7px;

  --shadow-card: 0 30px 60px -30px rgba(60, 45, 20, 0.4);
  --shadow-glow: 0 10px 24px -8px rgba(245, 197, 24, 0.5);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Column layout so a short page (thanks, a legal page on a tall screen)
     still puts its footer at the bottom instead of mid-viewport. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
.site-footer { flex: none; }

a { color: var(--ink); }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.15; }
p { margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
@media (min-width: 1024px) { .wrap { padding: 0 56px; } }

.narrow { max-width: 960px; margin: 0 auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border-radius: 0 0 var(--r-control) 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 241, 233, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { display: block; height: 28px; width: auto; }

.header-nav { display: none; gap: 24px; margin-left: 6px; }
@media (min-width: 860px) { .header-nav { display: flex; } }
.header-nav a { color: var(--ink-2); font-size: 14px; text-decoration: none; }
.header-nav a:hover { color: var(--ink); }
.header-cta { margin-left: auto; flex: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--r-control);
  font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 20px; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-pill { border-radius: var(--r-pill); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 15px 30px; font-size: 16px; box-shadow: var(--shadow-glow); }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--accent-2); text-transform: uppercase;
}
.eyebrow-yellow { color: var(--accent-text); }
@media (min-width: 1024px) { .eyebrow { font-size: 13px; } }

code, .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.92em;
  color: var(--ink-em);
}

.section { padding: 56px 0; }
@media (min-width: 1024px) { .section { padding: 72px 0; } }
.section-rule { border-top: 1px solid var(--line-card); }

.section-head { text-align: center; }
/* No top margin: the eyebrow above is a kicker for this heading, so the two
   should read as one unit. */
.section-head h2 {
  margin: 0 auto; max-width: 680px;
  font-size: 26px; font-weight: 700; text-wrap: balance;
}
@media (min-width: 640px) { .section-head h2 { font-size: 32px; } }
@media (min-width: 1024px) { .section-head h2 { font-size: 40px; } }
/* A heading that reads as two sentences: balancing splits it mid-clause
   ("Pay per page. No / seat, no subscription."), so give it room to sit on
   one line at desktop and wrap naturally below that. */
.section-head h2.wide { max-width: 860px; text-wrap: pretty; }

.section-head .lead {
  margin: 16px auto 0; max-width: 600px;
  color: var(--ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty;
}
@media (min-width: 1024px) { .section-head .lead { font-size: 18px; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
}

/* ---------- hero ---------- */

.hero { padding: 44px 0 40px; text-align: center; }
@media (min-width: 1024px) { .hero { padding: 60px 0 56px; } }

.badge-soon {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-card);
  border-radius: var(--r-pill); padding: 7px 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2);
  text-transform: uppercase;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2); flex: none;
}

.hero h1 {
  margin: 22px auto 0; max-width: 840px;
  font-size: 34px; font-weight: 700; line-height: 1.08;
  letter-spacing: -0.035em; text-wrap: balance;
}
@media (min-width: 640px) { .hero h1 { font-size: 44px; } }
@media (min-width: 768px) { .hero h1 { font-size: 52px; } }
@media (min-width: 1024px) { .hero h1 { font-size: 60px; line-height: 1.03; } }
.hero h1 .hl { color: var(--accent-text); }

.hero-sub {
  margin: 20px auto 0; max-width: 580px;
  color: var(--ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty;
}
@media (min-width: 640px) { .hero-sub { font-size: 17px; } }
@media (min-width: 1024px) { .hero-sub { font-size: 19px; } }

.chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 760px; margin: 28px auto 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line-card);
  border-radius: var(--r-pill); padding: 8px 15px;
  font-size: 12px; font-weight: 500; color: var(--ink-em);
}
@media (min-width: 1024px) { .chip { font-size: 13px; } }
.chip svg { flex: none; color: var(--accent-2); }

/* ---------- hero call to action ---------- */

/* A wide gap under the chips: the chips are a dense run of small pills, and
   the CTA is the one thing on this page we want clicked — it reads as an
   afterthought when it sits in their rhythm. */
.hero-cta { margin-top: 64px; }
@media (min-width: 1024px) { .hero-cta { margin-top: 80px; } }
.hero-cta .offer {
  max-width: 540px; margin: 18px auto 0; text-align: center;
}

/* ---------- register form ---------- */

.reg-row, .reg-grid { display: grid; gap: 14px; }
.reg-grid { margin-top: 30px; }
@media (min-width: 560px) {
  .reg-row { grid-template-columns: 1.3fr 1fr; }
  .reg-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The controls line up even when one question's label wraps to two lines and
   its neighbours' don't — push the input to the bottom of the cell rather
   than relying on every label being the same height. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-em); }
.field label + * { margin-top: auto; }
/* "optional" always sits on its own line under the question, never trailing
   it — so whether it wraps stops depending on how long the question is. */
.field .opt {
  display: block; margin-top: 1px;
  font-weight: 400; color: var(--ink-4); font-size: 12px; line-height: 1.3;
}

.field input, .field select {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--control);
  border: 1px solid var(--line-card);
  border-radius: var(--r-control);
  padding: 11px 13px;
}
.field select { cursor: pointer; }
.field input::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus {
  border-color: var(--accent-2);
  outline: 2px solid rgba(14, 124, 105, 0.18);
  outline-offset: 0;
}

.reg-submit { width: auto; display: flex; margin: 40px auto 20px; }
.reg-fine {
  margin-top: 12px; text-align: center;
  font-size: 12px; color: var(--ink-3); line-height: 1.5;
}
.reg-fine a { color: var(--ink-2); }

/* Replaces the form in place after a successful AJAX submit, so a signup
   reads as finished without a page navigation. */
.reg-done { text-align: center; padding: 18px 0 6px; }
.reg-done .thanks-mark { width: 46px; height: 46px; margin-bottom: 16px; }
.reg-done h3 { font-size: 20px; font-weight: 700; }
.reg-done p {
  margin: 10px auto 0; max-width: 420px;
  color: var(--ink-2); font-size: 14px; line-height: 1.6;
}

/* Google's floating badge may be hidden only if the disclosure it carries is
   shown instead — which the form does, in .reg-captcha-note. */
.grecaptcha-badge { visibility: hidden; }
.reg-captcha-note { margin-top: 6px; font-size: 11px; color: var(--ink-4); }
.reg-captcha-note a { color: var(--ink-3); }

.reg-error {
  margin: 0 0 16px; padding: 11px 14px;
  background: rgba(190, 60, 40, 0.07);
  border: 1px solid rgba(190, 60, 40, 0.25);
  border-radius: var(--r-control);
  color: #8c2f1e; font-size: 14px;
}

/* Honeypot — off-screen but not display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.offer {
  margin: 18px 0 0; padding: 13px 15px;
  background: rgba(245, 197, 24, 0.1);
  border: 1px solid rgba(245, 197, 24, 0.4);
  border-radius: var(--r-tile);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-em);
}
.offer strong { color: var(--ink); }

.price-note { margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* ---------- generic grids ---------- */

.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3-lg { grid-template-columns: repeat(3, 1fr); } }

.pad-card { padding: 26px 24px; }
.pad-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pad-card p { margin-top: 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

.split {
  display: grid; gap: 32px; align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1.05fr 1fr; gap: 44px; }
}
/* Flush to its kicker, matching .section-head h2 — the two rules style the
   same eyebrow-above-heading pair and would otherwise disagree by 8px on
   one section of the page. */
.split h2 {
  margin-top: 0;
  font-size: 24px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance;
}
@media (min-width: 640px) { .split h2 { font-size: 28px; } }
@media (min-width: 1024px) { .split h2 { font-size: 34px; } }
.split .lead {
  margin-top: 16px; color: var(--ink-2);
  font-size: 15px; line-height: 1.65; text-wrap: pretty;
}

.checks { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.check { display: flex; align-items: flex-start; gap: 12px; }
.check-mark {
  flex: none; margin-top: 1px;
  width: 22px; height: 22px; border-radius: var(--r-chip);
  display: grid; place-items: center;
  background: rgba(14, 124, 105, 0.15); color: var(--accent-2);
}
.check-title { font-size: 15px; font-weight: 600; }
.check-body { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 1024px) { .check-body { font-size: 14px; } }

/* ---------- code panel ---------- */

.code-panel {
  border-radius: var(--r-panel);
  background: #26221b;
  border: 1px solid #35301f;
  box-shadow: 0 30px 60px -30px rgba(60, 45, 20, 0.6);
  overflow: hidden;
}
.code-bar {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: #2d281f; border-bottom: 1px solid #35301f;
}
.code-dot { width: 9px; height: 9px; border-radius: 50%; background: #4a4432; }
.code-name {
  margin-left: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: #8f866f;
}
.code-panel pre {
  margin: 0; padding: 18px 20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 1.85; color: #d8cfb8;
  white-space: pre; overflow-x: auto;
}
@media (min-width: 640px) { .code-panel pre { font-size: 12.5px; } }
.c-punc { color: #7d7660; }
.c-tag { color: #e8a94a; }
.c-attr { color: #c9b98a; }
.c-str { color: #9ecb8a; }

/* ---------- asset export cards ---------- */

.export-row {
  display: grid; gap: 18px; align-items: center; margin-top: 32px;
}
@media (min-width: 1024px) {
  .export-row { grid-template-columns: 1fr auto 1fr; gap: 22px; }
}
.frame-card { overflow: hidden; }
.frame-label {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; color: var(--ink-4);
}
.frame-card img { display: block; width: 100%; height: 220px; object-fit: cover; }
.frame-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgba(14, 124, 105, 0.06);
}
.frame-foot .fname {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 600;
}
.frame-foot .fcount { margin-left: auto; font-size: 12px; color: var(--ink-4); }

.arrow-puck { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.arrow-puck .puck {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-2); color: var(--accent-2-ink);
  display: grid; place-items: center;
}
.arrow-puck .puck svg { transform: rotate(90deg); }
@media (min-width: 1024px) { .arrow-puck .puck svg { transform: none; } }
.arrow-puck .label {
  max-width: 76px; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--ink-4);
}

.file-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid var(--line-card); border-radius: var(--r-tile);
}
.file-badge {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-chip);
  display: grid; place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
}
.badge-yellow { background: rgba(245, 197, 24, 0.16); color: var(--accent-text); }
.badge-teal { background: rgba(14, 124, 105, 0.14); color: var(--accent-2); }
.file-meta { min-width: 0; }
.file-name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-from { margin-top: 2px; font-size: 11px; color: var(--ink-4); }
.file-tick { margin-left: auto; flex: none; color: var(--accent-2); }

.tile { border: 1px solid var(--line-card); border-radius: var(--r-tile); overflow: hidden; }
.tile-label {
  padding: 7px 12px; background: rgba(14, 124, 105, 0.06);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-2);
}
.tile-body { padding: 11px 12px; font-size: 13px; line-height: 1.55; color: var(--ink-em); }

/* ---------- head mock ---------- */

.head-mock { overflow: hidden; box-shadow: var(--shadow-card); }
.head-mock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.head-mock-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.head-mock-bar .name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--ink-2);
}
.head-mock-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- value cards ---------- */

.value-card { padding: 26px 24px; }
.value-card h3 { margin: 2px 0 10px; font-size: 17px; font-weight: 600; }
.value-card p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }

/* ---------- steps ---------- */

.steps-wrap { position: relative; margin-top: 32px; }
.steps-rail {
  display: none;
  position: absolute; left: 11%; right: 11%; top: 26px; height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
}
@media (min-width: 1024px) { .steps-rail { display: block; } }
.steps {
  position: relative; display: grid; gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.step { text-align: center; }
.step-num {
  width: 54px; height: 54px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 20px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--bg);
}
.step h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.step p { font-size: 13px; line-height: 1.55; color: var(--ink-2); }

/* ---------- pricing ---------- */

/* The one card on the page that should POP: narrower than the content cards,
   double-framed (a crisp 1px gold hairline inside a thick brand-yellow ring),
   and its lower half warming from white into a soft yellow. The ring is a
   spread-only box-shadow rather than a second border so it follows the
   radius and costs no layout; the extra margin is clearance for it. */
.price-card {
  max-width: 420px;
  margin: 44px auto 0;
  padding: 40px 32px 36px;
  text-align: center;
  border: 10px solid #fff;
  background-color: var(--surface);
  background-image: linear-gradient(180deg,
    rgba(245, 197, 24, 0) 50%,
    rgba(245, 197, 24, 0.15) 100%);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}
.price-figure { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.price-old {
  font-size: 20px; color: var(--ink-4); text-decoration: line-through;
}
.price-new { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.price-unit { font-size: 15px; color: var(--ink-2); }
/* The plan name, in a deep-to-bright sweep of the brand green. The gradient
   is painted on the element and clipped to the glyphs; `color` stays set as
   the fallback for anything that can't clip. The ramp is stretched at the
   DARK end on purpose: the bright stop (#16a289) sits at 3.2:1 on white,
   the floor for large bold text, so extra drama has to come from starting
   near-black rather than ending lighter. */
.price-title {
  margin-bottom: 10px;
  font-size: 31px; font-weight: 700; letter-spacing: -0.025em;
  background-image: linear-gradient(95deg, #03251f 0%, var(--accent-2) 55%, #16a289 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-2);
}
.price-body { margin-top: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.price-list {
  margin: 20px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.price-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-em); }
.price-list svg { flex: none; margin-top: 3px; color: var(--accent-2); }

/* ---------- closing CTA ---------- */

/* The header CTA and the hero button both land here; keep the card clear of
   the 64px sticky header when the anchor scroll stops. */
.cta-card { scroll-margin-top: 80px; }

.cta-card { padding: 44px 20px; text-align: center; box-shadow: var(--shadow-card); }
@media (min-width: 640px) { .cta-card { padding: 48px 32px; } }
.cta-card h2 { font-size: 26px; font-weight: 700; text-wrap: balance; }
@media (min-width: 640px) { .cta-card h2 { font-size: 32px; } }
.cta-card > p {
  margin: 12px auto 0; max-width: 460px;
  color: var(--ink-2); font-size: 15px;
}
.cta-card .reg-form { max-width: 620px; margin: 26px auto 0; text-align: left; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-card);
  background: var(--inset);
  margin-top: 8px;
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 32px 0;
}
.footer-logo { display: block; height: 20px; width: auto; }
.footer-copy {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--ink-4);
}
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--ink-2); font-size: 14px; text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ---------- legal + thanks pages ---------- */

.doc { max-width: 720px; margin: 0 auto; padding: 48px 0 64px; }
.doc h1 { font-size: 32px; font-weight: 700; }
@media (min-width: 640px) { .doc h1 { font-size: 38px; } }
.doc-updated {
  margin-top: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; color: var(--ink-4);
  text-transform: uppercase;
}
.doc section { margin-top: 34px; }
.doc h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.doc p, .doc li {
  margin-top: 12px; color: var(--ink-2);
  font-size: 15px; line-height: 1.7;
}
.doc ul { margin: 6px 0 0; padding-left: 22px; }
.doc a { color: var(--accent-2); }
.doc strong { color: var(--ink-em); }

.thanks { max-width: 560px; margin: 0 auto; padding: 72px 0 88px; text-align: center; }
.thanks-mark {
  width: 56px; height: 56px; margin: 0 auto 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14, 124, 105, 0.14); color: var(--accent-2);
}
.thanks h1 { font-size: 30px; font-weight: 700; }
.thanks p { margin-top: 14px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.thanks .btn { margin-top: 28px; }