/* ============================================================================
   THE WEDDING SUITE: plain text pages (/terms, /privacy, /refunds, /contact)
   Loaded on top of landing.css, which supplies the brand variables, the nav
   and the footer. Everything here is scoped under .tp so it can never leak
   into the landing page or the app.
   ========================================================================== */

.tp { background: var(--ivory); color: var(--ink); }

/* The nav is fixed and always solid on these pages, so the content starts
   below it rather than under it. */
.tp-main { padding: 116px 0 92px; }
.tp-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

/* ---- Head ---------------------------------------------------------------- */
.tp-kicker {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.tp-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--burgundy);
  margin: 0;
  max-width: 20ch;
}
.tp-intro {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 18px 0 0;
}
.tp-updated {
  font-family: var(--body);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin: 16px 0 0;
}
.tp-head { padding-bottom: 28px; border-bottom: 1px solid var(--line); }

/* ---- Table of contents --------------------------------------------------- */
.tp-toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px clamp(18px, 3vw, 30px);
  margin: 34px 0 0;
  max-width: 62ch;
  box-shadow: var(--shadow-sm);
}
.tp-toc h2 {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
}
.tp-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 30px;
}
.tp-toc li { counter-increment: toc; break-inside: avoid; }
.tp-toc a {
  display: block;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  transition: color .2s;
}
.tp-toc a::before {
  content: counter(toc);
  font-size: 12px;
  color: var(--champagne);
  min-width: 16px;
}
.tp-toc a:hover { color: var(--burgundy); }

/* ---- Body ---------------------------------------------------------------- */
.tp-body { margin-top: 46px; }
.tp-sec { scroll-margin-top: 96px; padding-top: 8px; }
.tp-sec + .tp-sec { margin-top: 42px; }
.tp-sec h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.25;
  color: var(--burgundy);
  margin: 0 0 14px;
  max-width: 46ch;
}
.tp-sec h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 24px 0 8px;
}
.tp-body p,
.tp-body li {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 62ch;
}
.tp-body p { margin: 0 0 14px; }
.tp-body ul, .tp-body ol { margin: 0 0 16px; padding-left: 22px; max-width: 62ch; }
.tp-body li { margin-bottom: 8px; }
.tp-body strong { color: var(--ink); font-weight: 600; }
.tp-body a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tp-body a:hover { color: var(--burgundy-soft); }
.tp-note {
  background: var(--ivory-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--champagne);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 18px;
  max-width: 62ch;
}
.tp-note p:last-child { margin-bottom: 0; }

/* ---- Contact form -------------------------------------------------------- */
.tp-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(28px, 5vw, 62px);
  align-items: start;
  margin-top: 40px;
}
.tp-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--shadow-sm);
  max-width: 62ch;
}
.tp-field { margin-bottom: 18px; }
.tp-field label {
  display: block;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.tp-field input,
.tp-field select,
.tp-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.tp-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23584F49' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.tp-field textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.tp-field input:focus,
.tp-field select:focus,
.tp-field textarea:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(199,173,134,.28);
}
.tp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tp-submit {
  min-height: 48px;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--burgundy);
  color: var(--ivory);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.tp-submit:hover:not(:disabled) { background: var(--burgundy-soft); }
.tp-submit:disabled { opacity: .6; cursor: default; }
.tp-formfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tp-msg { font-family: var(--body); font-size: 14.5px; line-height: 1.6; margin: 0; }
.tp-msg.err { color: #8C2C22; }
.tp-sent {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
  max-width: 62ch;
}
.tp-sent h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  color: var(--burgundy);
  margin: 0 0 10px;
}
.tp-sent p { font-family: var(--body); font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; max-width: 60ch; }
.tp-again {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--burgundy);
  cursor: pointer;
}
.tp-aside {
  background: var(--ivory-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.tp-aside h2 {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
}
.tp-aside p { font-family: var(--body); font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.tp-aside a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }
.tp-aside p:last-child { margin-bottom: 0; }

/* The .ls-footer-legal line itself is styled in landing.css, which both the
   landing page and these pages load. No sticky Get started bar here, so the
   phone footer does not need to leave room for one. */
.tp .ls-footer { padding-bottom: 40px; }

@media (max-width: 900px) {
  .tp-contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tp-main { padding: 92px 0 64px; }
  .tp-toc ol { columns: 1; }
  .tp-body p, .tp-body li { font-size: 16px; }
  .tp-formfoot { align-items: stretch; }
  .tp-submit { width: 100%; }
  /* Phone: every table-of-contents row is a real tap target (2026-09-03). */
  .tp-toc a { min-height: 44px; padding: 8px 0; }
}

/* Inline code, used in the privacy policy for the one cookie name. */
.tp-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--ivory-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 6px;
}

/* "Prefer email?" line under the contact form. */
.tp-prefer { margin: 18px 0 0; color: var(--ink-faint); }
.tp-prefer a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }

/* The landing page's sticky "Get started" bar sits over its footer on a
   phone, so landing.css reserves 96px underneath it. These pages have no
   sticky bar, so take that dead space back. */
@media (max-width: 780px) {
  .tp .ls-footer { padding-bottom: 40px; }
}

/* Coarse-pointer tap targets: inline text links (the mailto address, "on
   this page" hints, aside links) sit inside a paragraph line at ~20px tall,
   under the 44px floor a finger needs. Growing them with padding and pulling
   back with a matching negative margin keeps the paragraph's own line
   spacing untouched while the link's own hit box passes 44px. */
@media (pointer: coarse) {
  .tp-body a, .tp-prefer a, .tp-aside a {
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
  }
}