/* guide-optin.css: the free walkthrough opt-in on guide pages.
 * Linked only from the guides that offer a walkthrough (the three Calendly, Keap and
 * ClickUp guides),
 * so styles.css stays untouched. Script: /guide-optin.js. Function:
 * netlify/functions/guide-optin.js.
 *
 * Two pieces:
 *   .gopt-jump  a slim link under the guide header that jumps to the form
 *   .gopt       the opt-in card itself (id="walkthrough", so /guides/x#walkthrough
 *               can be sent to someone directly)
 *
 * Phone rules, set unconditionally rather than behind pointer:coarse:
 *   - text fields are 16px, or iOS zooms the page on focus and never zooms back
 *   - every control is at least 44px tall
 *   - one column below 1000px. The open iPhone Duo (951 wide) folds down the middle,
 *     and a control that crosses the fold beside another control, or off centre and
 *     narrow, reads as broken. Full width single column controls are fine.
 *   - no fixed or sticky positioning, no vh units. Side safe areas are handled by the
 *     article the card sits in.
 *
 * Specificity traps inside .guide-body (styles.css GUIDES section): .guide-body h2,
 * h3, p, ul li and a are 0-1-1 or 0-1-2. Every text rule here is scoped under .gopt
 * (0-2-0 and up) so it wins without !important.
 */

/* styles.css has no global [hidden] rule, and the display rules below would beat
   the attribute. */
.gopt [hidden], .gopt[hidden] { display:none !important; }

/* ── JUMP LINK (under the header) ── */
.gopt-jump {
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:48px; margin-top:22px; padding:11px 16px;
  background:var(--orange-glow); border:1px solid var(--orange-border); border-radius:12px;
  color:var(--text); text-decoration:none; font-size:14.5px; font-weight:500; line-height:1.45;
  transition:border-color .2s, background .2s;
}
.gopt-jump:hover { border-color:var(--orange); background:var(--orange-dim); }
.gopt-jump:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.gopt-jump-tag {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange);
  white-space:nowrap;
}
/* Tag and line sit side by side and wrap under each other on phones; the arrow
   stays on the right either way. */
.gopt-jump-copy { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px; }
.gopt-jump-t { min-width:0; text-wrap:pretty; }
.gopt-jump svg { flex-shrink:0; color:var(--orange); transition:transform .2s; }
.gopt-jump:hover svg { transform:translateY(2px); }

/* ── CARD ── */
.gopt {
  position:relative; overflow:hidden;
  margin:56px 0 0; padding:30px 34px 28px;
  background:var(--bg3); border:1px solid var(--line2); border-radius:18px;
  scroll-margin-top:24px;
}
/* The form card's orange to blue top rule (llms-txt-generator, contact). */
.gopt::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--orange), var(--blue));
}
.gopt .section-tag { margin-bottom:12px; }
.gopt .gopt-h {
  font-family:var(--font-d); font-size:clamp(24px, 2.6vw, 30px); color:var(--white);
  letter-spacing:.02em; line-height:1.05; margin:0 0 12px;
}
.gopt .gopt-body { font-size:15.5px; color:var(--muted); line-height:1.7; margin:0 0 14px; text-wrap:pretty; }
.gopt .gopt-list { margin:0 0 22px; gap:6px; }
.gopt .gopt-list li { font-size:15px; line-height:1.6; }
.gopt .gopt-list li::before { top:9px; }

/* ── FORM ── */
.gopt-form { display:flex; flex-direction:column; }
.gopt-fields { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.gopt-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.gopt-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.gopt-input {
  width:100%; min-height:48px; padding:12px 16px;
  background:var(--bg4); border:1px solid var(--line2); border-radius:10px; outline:none;
  font-family:var(--font-b); font-size:16px; line-height:1.4; color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.gopt-input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(229,93,41,.12); }
.gopt-input::placeholder { color:var(--muted2); }
.gopt-input[aria-invalid="true"] { border-color:rgba(239,68,68,.6); }

/* Off screen for people, still in the form for bots. Not display:none, which some
   bots skip. */
.gopt-hp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.gopt-welcome { background:var(--bg4); border:1px solid var(--line2); border-radius:12px; padding:14px 16px 4px; }
.gopt-welcome-hi { font-size:15px; font-weight:700; color:var(--text); }
.gopt-welcome-hi span { color:var(--orange); }
.gopt-welcome-mail { font-size:13.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.gopt-edit {
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-b); font-size:13px; font-weight:600; color:var(--muted); text-decoration:underline;
}
.gopt-edit:hover { color:var(--orange); }
.gopt-edit:focus-visible { outline:2px solid var(--orange); outline-offset:2px; border-radius:4px; }

/* Above the button on purpose: .btn-primary's 10px extrusion is a box-shadow that
   takes no layout space, so nothing may sit closer than ~14px under the button. */
.gopt-error {
  margin-top:14px; padding:12px 14px;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); border-radius:10px;
  font-size:14px; color:#ffb3b3; line-height:1.55;
}
/* Inline link, but a 44px tall tap area: padding grows the target, the matching
   negative margin keeps the line where it was. */
.gopt .gopt-error a {
  display:inline-block; padding:12px 0; margin:-12px 0;
  color:#ffd6d6; border-bottom:none; text-decoration:underline; text-underline-offset:3px;
}

/* Deltas from .btn-primary only. Do not restate transition or :hover (styles.css). */
.gopt-btn {
  display:flex; justify-content:center; width:100%; min-height:48px; margin-top:18px;
  padding:14px 16px; font-weight:700; border-radius:12px; text-align:center; line-height:1.3;
}

/* The privacy line and "Not you?" use --muted, not the site's --muted2: small text here
   needs 4.5:1, and --muted2 measures 3.6:1 on this card (3.3:1 on the welcome box). */
.gopt .gopt-fine {
  display:flex; align-items:flex-start; gap:8px; margin:24px 0 0;
  font-size:12.5px; color:var(--muted); line-height:1.55; text-wrap:pretty;
}
.gopt-fine svg { flex-shrink:0; margin-top:3px; }
/* Shown until the script runs, so a blocked script still leaves a way to ask. */
.gopt .gopt-fallback { font-size:15px; color:var(--muted); line-height:1.7; margin:0; }
/* 44px tall tap area like the error link. The guide's link underline is a bottom border,
   which the padding would push 12px down, so it becomes a text underline here. */
.gopt .gopt-fallback a {
  display:inline-block; padding:12px 0; margin:-12px 0;
  border-bottom:none; text-decoration:underline; text-decoration-color:var(--blue-border);
  text-decoration-thickness:1px; text-underline-offset:4px;
}
.gopt .gopt-fallback a:hover { text-decoration-color:var(--blue-bright); }

/* ── SUCCESS ── */
.gopt-done { display:flex; gap:16px; align-items:flex-start; margin-top:20px; }
.gopt-done-icon {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,184,122,.12); border:2px solid rgba(61,184,122,.3); color:var(--green);
}
/* Uppercase like the site's other success titles, and a step below the card heading.
   The heading takes focus after a request (tabindex -1), so no ring on a non control. */
.gopt .gopt-done-h {
  font-family:var(--font-d); font-size:22px; color:var(--white); letter-spacing:.02em; line-height:1.1;
  text-transform:uppercase; margin:2px 0 8px;
}
.gopt .gopt-done-h:focus { outline:none; }
.gopt .gopt-done-p { font-size:15.5px; color:var(--muted); line-height:1.7; margin:0; }
.gopt .gopt-done-p strong { color:var(--text); font-weight:600; overflow-wrap:anywhere; }

/* Screen reader only live region. */
.gopt-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Side by side name and email only where there is no fold to cross. */
@media (min-width:1000px) {
  .gopt-fields { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width:760px) {
  .gopt { padding:24px 20px 22px; }
  .gopt-done-icon { width:44px; height:44px; }
}
/* Icon above the message on phones, so the message keeps the full card width. */
@media (max-width:480px) {
  .gopt-done { flex-direction:column; gap:12px; }
}