/* ---------- "Let's talk" message builder (deterministic, no AI) ---------- */
[hidden] { display: none !important; }

.lt-launch {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70; font: inherit; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  color: #1c140a; background: linear-gradient(180deg, #f4e2b9 0%, #dcc497 55%, #b89a68 100%);
  border: 1px solid rgba(255,246,226,.5); box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.lt-launch:hover { filter: brightness(1.06); }
.lt-launch:focus-visible { outline: 2px solid var(--champagne-hi); outline-offset: 4px; }
.intro-active .lt-launch, .intro-active .lt-panel { display: none; }

.lt-panel {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: 72px; z-index: 71;
  width: min(440px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow-y: auto;
  padding: 22px 22px 20px; border-radius: var(--radius);
  background: var(--panel-strong); border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); backdrop-filter: blur(6px);
  color: var(--ink);
}
.lt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.lt-brandline { font-family: var(--display); letter-spacing: .18em; text-transform: uppercase; font-size: .7rem; color: var(--champagne); }
.lt-close {
  font: inherit; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; cursor: pointer;
}
.lt-close:hover { color: var(--champagne-hi); border-color: var(--line); }
.lt-close:focus-visible, .lt-panel button:focus-visible, .lt-panel a:focus-visible, .lt-panel textarea:focus-visible, .lt-panel input:focus-visible {
  outline: 2px solid var(--champagne-hi); outline-offset: 2px;
}
.lt-progress { margin: 10px 0 2px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.lt-title { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.2; margin: 4px 0 12px; color: var(--ink); }
.lt-title:focus { outline: none; }
.lt-lede { margin: 0 0 14px; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.lt-note { margin: 12px 0 0; font-size: .85rem; color: var(--ink-mute); line-height: 1.45; }

.lt-field { display: grid; gap: 6px; margin-bottom: 12px; }
.lt-field label { font-size: .85rem; letter-spacing: .06em; color: var(--ink-soft); }
.lt-input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: rgba(5,4,3,.55); border: 1px solid rgba(220,196,151,.32); border-radius: 10px;
  padding: 11px 13px; min-height: 44px; box-sizing: border-box;
}
textarea.lt-input { min-height: 96px; resize: vertical; }
.lt-input[aria-invalid="true"] { border-color: #ffb35c; }
.lt-input:focus-visible { outline: 2px solid var(--champagne-hi); outline-offset: 1px; border-color: transparent; }
.lt-error { margin: 0; font-size: .88rem; color: #ffc27a; line-height: 1.4; }
.lt-alert { margin: 12px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,179,92,.55); background: rgba(255,179,92,.08); color: #ffd9a6; font-size: .92rem; line-height: 1.45; }
.lt-ok { margin: 12px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(220,196,151,.5); background: rgba(220,196,151,.08); color: var(--champagne-hi); font-size: .95rem; line-height: 1.45; }

.lt-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.lt-choice {
  font: inherit; font-size: .95rem; letter-spacing: .04em; padding: 11px 16px; min-height: 44px; border-radius: 999px; cursor: pointer;
  color: var(--champagne-hi); background: rgba(13, 16, 20, .42); border: 1px solid rgba(220,196,151,.62);
}
.lt-choice:hover { background: rgba(220,196,151,.10); }
.lt-choice[aria-pressed="true"] { color: #1c140a; background: linear-gradient(180deg, #f4e2b9 0%, #dcc497 55%, #b89a68 100%); border-color: transparent; }
.lt-choice:focus-visible { outline: 2px solid var(--champagne-hi); outline-offset: 3px; }

.lt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.lt-actions .btn { font-size: .78rem; padding: 11px 18px; }
.lt-link { color: var(--champagne-hi); text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }
.lt-link:focus-visible { outline: 2px solid var(--champagne-hi); outline-offset: 3px; border-radius: 4px; }
.lt-spacer { flex: 1 1 auto; }

dl.lt-review { margin: 0 0 6px; display: grid; gap: 10px; }
.lt-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid rgba(220,196,151,.16); }
.lt-row dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); grid-column: 1; }
.lt-row dd { margin: 0; grid-column: 1; color: var(--ink); overflow-wrap: anywhere; }
.lt-row .lt-edit { grid-column: 2; grid-row: 1 / span 2; font: inherit; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne-hi); background: none; border: 1px solid rgba(220,196,151,.4); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.lt-row .lt-edit:hover { border-color: var(--champagne-hi); }

.lt-copybox { width: 100%; font: .9rem/1.45 var(--sans); color: var(--ink); background: rgba(12, 15, 19, .6); border: 1px solid rgba(220,196,151,.32); border-radius: 10px; padding: 12px; min-height: 130px; box-sizing: border-box; resize: vertical; }

/* Honeypot: present for bots, invisible and skipped by keyboards and screen readers */
.lt-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

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

@media (max-width: 480px) {
  .lt-panel { right: 8px; left: 8px; width: auto; bottom: 64px; max-height: 80vh; padding: 18px 16px; }
  .lt-launch { right: 12px; bottom: 12px; }
}

/* Remediation 2026-11-06: on narrow screens the fixed launcher covered the last footer link at the very bottom of
   the page. Extra footer space lets every footer link scroll clear of the launcher (layout only; no behaviour change). */
@media (max-width: 760px) {
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Mobile/tablet fix 2026-11-07 (Opus stage; layout only, no behaviour or content change).
   P2-1: when the panel scrolls (Review on every size; most steps on landscape phones) the brand line + Close
   stay pinned to the top of the panel. The header carries the panel colour so scrolled content passes under it,
   and scroll-padding keeps focused headings, fields and errors clear of it. The panel's top padding moves into the
   header because sticky top is measured inside scroller padding, which otherwise leaves a strip of content above it.
   P3-1: Close, review Edit buttons and the "Email this directly instead" link get a 44px minimum touch height. */
.lt-panel { --lt-pt: 22px; --lt-px: 22px; padding-top: 0; scroll-padding-top: 76px; }
.lt-head {
  position: sticky; top: 0; z-index: 2;
  margin: 0 calc(-1 * var(--lt-px)) 4px;
  padding: calc(var(--lt-pt) - 6px) var(--lt-px) 4px;
  background: rgb(15, 18, 22);
}
.lt-close { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.lt-row .lt-edit { min-height: 44px; }
.lt-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 480px) {
  .lt-panel { --lt-pt: 18px; --lt-px: 16px; scroll-padding-top: 72px; }
}
/* Short screens: focusing a one-line field after a failed Continue also brings the error line beneath it into view. */
@media (max-height: 560px) {
  .lt-panel input { scroll-margin-bottom: 64px; }
}