/* The Message Guard offer inside another funnel, and the social profile card
   that comes with it. Linked from /guide/, /products/guide and
   /message-guard/. New file rather than an append to styles.css: a fresh
   filename has no cache entry to serve stale, and an edit here cannot reach
   any other page.

   Vermillion throughout. The funnel answers in --ultra, so a pink offer would
   read as one more question rather than as a second thing being ordered. */

/* ============================================================
   THE OFFER CARD — sits above the Yes/No, doing the selling
   ============================================================ */
.offer-card{border:1.5px solid rgba(247,70,70,.32);border-radius:var(--radius-md);
  background:rgba(247,70,70,.05);padding:18px 20px;margin-bottom:var(--space-lg)}
.offer-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
/* the lockup ships in Vermillion + Black, which is what the card is built around */
.offer-logo{height:20px;width:auto;display:block}
.offer-flag{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--vermilion);white-space:nowrap;
  border:1px solid rgba(247,70,70,.35);border-radius:var(--radius-full);padding:3px 9px}
.offer-lede{display:block;font-size:15px;font-weight:600;color:var(--dark-gray);
  letter-spacing:-.2px;margin-bottom:12px}
.offer-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.offer-list li{display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;line-height:1.45;color:var(--medium-gray)}
.offer-list svg{flex:none;width:15px;height:15px;margin-top:2px;
  fill:none;stroke:var(--vermilion);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.offer-list b{color:var(--dark-gray);font-weight:600}
.offer-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(247,70,70,.2)}
/* spots.js repaints every .spots-pill from /api/spots, so the count stays live
   for free. The nav's green reads as a different system next to vermillion,
   and styles.css hides every pill below 640px to unclutter the nav — in here
   it is the scarcity line, and most of this traffic is on a phone. */
.offer-card .spots-pill{display:inline-flex;color:var(--vermilion);
  background:rgba(247,70,70,.1);border-color:rgba(247,70,70,.3)}
/* The shared `pulse` keyframes hardcode the green halo, so the dot pulsed
   green out of a vermillion pill until this repointed it. */
@keyframes guardPulse{
  0%{box-shadow:0 0 0 0 rgba(247,70,70,.55)}
  70%{box-shadow:0 0 0 9px rgba(247,70,70,0)}
  100%{box-shadow:0 0 0 0 rgba(247,70,70,0)}
}
.offer-card .spots-pill .pulse-dot{background:var(--vermilion);animation-name:guardPulse}
.offer-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--light-gray)}

/* ============================================================
   SOCIAL PROFILES — its own card, every platform off by default
   Named guard-socials, not socials: styles.css:306 already owns .socials for
   the footer icon row, and that display:flex was folding this card in half.
   ============================================================ */
.guard-socials{border:1.5px solid var(--border-color);border-radius:var(--radius-md);
  background:var(--card-bg);padding:16px 18px;margin-top:12px}
.guard-socials-head{display:block;font-size:14px;font-weight:600;color:var(--dark-gray);margin-bottom:3px}
.guard-socials-hint{display:block;font-size:13px;color:var(--medium-gray);margin-bottom:14px}
.guard-socials-list{display:grid;gap:10px}

.social-row{display:grid;gap:8px}
/* The switch is the whole row: a bigger target than a checkbox, and it reads
   as "I have one of these" rather than as a form field. */
.social-toggle{display:flex;align-items:center;gap:11px;width:100%;
  min-height:46px;padding:10px 13px;cursor:pointer;text-align:left;
  border:1.5px solid var(--border-color);border-radius:var(--radius-md);
  background:var(--card-bg);font-family:var(--font-sans);font-size:15px;
  color:var(--dark-gray);transition:border-color .15s,background .15s}
.social-toggle:hover{border-color:var(--light-gray);background:#FCFCFD}
.social-toggle:focus-visible{outline:3px solid var(--vermilion);outline-offset:2px}
.social-ico{flex:none;width:19px;height:19px;display:block;color:var(--light-gray);
  transition:color .15s}
.social-ico svg{width:100%;height:100%;display:block;fill:currentColor}
.social-name{flex:1;min-width:0}

/* the track */
.social-sw{flex:none;width:38px;height:22px;border-radius:var(--radius-full);
  background:var(--lightest-gray);border:1px solid var(--border-color);
  padding:2px;display:flex;transition:background .18s,border-color .18s}
.social-sw i{width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .18s}

.social-toggle[aria-checked="true"]{border-color:var(--vermilion);
  background:rgba(247,70,70,.06)}
.social-toggle[aria-checked="true"] .social-ico{color:var(--vermilion)}
.social-toggle[aria-checked="true"] .social-sw{background:var(--vermilion);border-color:var(--vermilion)}
.social-toggle[aria-checked="true"] .social-sw i{transform:translateX(16px)}

.social-row input{width:100%;min-height:46px;background:var(--card-bg);
  border:1.5px solid rgba(247,70,70,.3);border-radius:var(--radius-md);
  padding:11px 14px;color:var(--dark-gray);
  font-family:var(--font-sans);font-size:16px;
  transition:border-color .15s,box-shadow .15s}
.social-row input[hidden]{display:none}
.social-row input::placeholder{color:var(--light-gray)}
.social-row input:focus{outline:none;border-color:var(--vermilion);
  box-shadow:0 0 0 3px rgba(247,70,70,.2)}
.social-row input[aria-invalid="true"]{border-color:var(--vermilion);
  box-shadow:0 0 0 3px rgba(247,70,70,.28)}

@media(max-width:560px){
  .offer-card{padding:16px}
  .guard-socials{padding:14px 15px}
}
@media(prefers-reduced-motion:reduce){
  .social-sw,.social-sw i,.social-toggle,.social-ico{transition:none}
}

/* ============================================================
   HELPER LINE under a question
   Same mono/uppercase treatment as .funnel-meta ("40 PAGES · PDF · FREE"),
   because it does the same job — the terms of the thing, set quietly under
   the headline rather than competing with it.

   The pull-up is deliberate: .q-title already reserves --space-lg beneath
   itself, so the hint moves into that space instead of adding a second gap
   and pushing the offer card down the screen.
   ============================================================ */
.q-hint{display:block;margin-top:calc(4px - var(--space-lg));margin-bottom:var(--space-lg);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--medium-gray)}
.q-hint b{color:var(--vermilion);font-weight:600}