/* ========================================
   PETITION TEMPLATE STYLES
   Template-specific styles for petition pages
======================================== */

.petition-template {
  --petition-accent: #c62828;
  /* --petition-accent-soft was a soft pink (#ffe7e7) used for the radio
     :checked halo + :focus-visible ring. The pink read as off-brand and
     was removed: the :checked state now relies on the deep-red fill +
     white checkmark alone, and :focus-visible uses a neutral cool-gray
     (hard-coded in the focus rule below) so the keyboard focus indicator
     remains a11y-compliant without re-introducing pink. */
  --petition-ink: #1f2d3d;
  --petition-muted: #4b5d6b;
  --petition-border: #e2e8f0;
}

/* Petition with Video Layout */
.petition-with-video {
  width: 100%;
  max-width: 100%;
}

/* Video Wrapper - Hidden initially when there's a question */
.petition-video-wrapper {
  margin: 0;
  padding: 0;
  width: 400px;
  max-width: 400px;
  position: relative;
}

/* Remove extra spacing from video card inside petition */
.petition-video-wrapper .video-card {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide custom play button on petition videos (YouTube's native button is enough) */
.petition-video-wrapper .video-card__play-button,
.petition-with-video .video-card__play-button,
.petition-template .video-card__play-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide video when there's a question (video is now inside petition-details) */
.petition-template--has-question .petition-details .petition-video-wrapper {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.petition-template--has-question .petition-details .petition-video-wrapper * {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show video when petition is revealed */
.petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper {
  display: block !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  padding: 0 !important;
  /* Don't override margin - let desktop float styles control it */
}

.petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper * {
  display: revert !important;
  opacity: revert !important;
  visibility: revert !important;
}

/* Large Desktop: 400px video floats left (default).
   The `content-video-wrapper--right` modifier (set by petition/action
   templates when the author picks "With content - right") flips the
   float to the right via the override block immediately below. We
   keep !important on the base rule because legacy theme overrides
   used to step on these dimensions; the override matches !important
   so the modifier can still win. */
@media (min-width: 1201px) {
  .petition-details {
    display: block;
  }

  .petition-details .petition-video-wrapper,
  .petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper {
    float: left !important;
    width: 400px !important;
    max-width: 400px !important;
    margin-right: 2rem !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  /* --right modifier: flip float side + mirror margins. */
  .petition-details .petition-video-wrapper.content-video-wrapper--right,
  .petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper.content-video-wrapper--right {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 2rem !important;
  }

  .petition-details::after {
    content: "";
    display: table;
    clear: both;
  }

  .petition-video-wrapper .video-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Tablet/Small Desktop: 300px video floats left (default).
   `--right` override mirrors the desktop rule. */
@media (min-width: 768px) and (max-width: 1200px) {
  .petition-details {
    display: block;
  }

  .petition-details .petition-video-wrapper,
  .petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper {
    float: left !important;
    width: 300px !important;
    max-width: 300px !important;
    margin-right: 2rem !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .petition-details .petition-video-wrapper.content-video-wrapper--right,
  .petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper.content-video-wrapper--right {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 2rem !important;
  }

  .petition-details::after {
    content: "";
    display: table;
    clear: both;
  }

  .petition-video-wrapper .video-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile inline (--right/--left): intro-first flex reorder lives in
   video-card.css on .petition-content. Plain (no modifier) wrappers
   keep the legacy centred full-width behaviour below. */
@media (max-width: 768px) {
  /* Plain (no modifier) wrappers keep the original centred full-width. */
  .petition-details .petition-video-wrapper:not(.content-video-wrapper--right):not(.content-video-wrapper--left),
  .petition-template--has-question.petition-template--revealed .petition-details .petition-video-wrapper:not(.content-video-wrapper--right):not(.content-video-wrapper--left) {
    float: none !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto 2rem !important;
  }
}

.petition-content {
  display: block;
  width: 100%;
}

/* Petition Content */
.petition-intro p {
  font-size: 1.1em;
  margin: 0.5em 0;
}

/* Tighter intro when a video shares the column (action / petition floated layouts). */
.petition-template--has-video .petition-content h1 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin-bottom: 0.65rem;
}

.petition-template--has-video .petition-intro p {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0.35em 0;
}

.petition-template--has-video .petition-intro p:last-child {
  margin-bottom: 0;
}

.petition-cta {
  font-weight: 500;
}

/* Petition Form Overrides */
.petition-form {
  margin: 1.5em 0 0 0;
}

/* Reveal animation for the petition body (form + intro + privacy block).
   Triggered by petition-template.js when the visitor answers the gating
   question — it adds `.petition-template--revealed` to the outer wrapper.
   
   Sequence (start to finish ≈ 1500ms):
     - 0 → 700ms     pause — body stays COLLAPSED (grid-template-rows:
                     0fr) and INVISIBLE. Layout below the question is
                     unchanged so nothing visually shifts. Gives the
                     radio's red-fill + checkmark a moment to "land".
     - At 700ms      grid-template-rows snaps from 0fr to 1fr (form's
                     layout pops in to its true content height). The
                     opacity fade begins simultaneously.
     - 700 → 1500ms  opacity 0 → 1 fade-in over 800ms (ease-out).
   
   Both transitions share the same 700ms delay so the height-snap and
   the opacity fade-start are perfectly aligned — no flicker of an
   empty full-height box before the content materialises.
   
   Why the height "snaps" rather than rolls out: the box needs to be
   collapsed initially (otherwise there's a huge empty area below the
   question waiting to be revealed) and snap to its true content height
   at reveal time. The grid-template-rows: 0fr → 1fr trick handles the
   collapse-to-true-height switch without needing to guess a max-height
   ceiling. We deliberately do NOT transition grid-template-rows here so
   the height change happens instantly the moment the class is added,
   in sync with the start of the opacity fade.
   
   Grid container is scoped to `.petition-template--has-question` so
   non-question petitions keep their existing block layout — the desktop
   video-float media queries below assume `.petition-details {
   display: block }` and only override when the question gate is in
   play. The single direct child .petition-main-content (set in
   content-petition.php / content-action.php) gets `min-height: 0` +
   `overflow: hidden` so the grid track can squeeze it below its content
   size while collapsed. */
.petition-details {
  /* Two transitions, same 700ms delay so they fire in sync at the end
     of the pause:
       1. grid-template-rows: 0ms duration → instant snap from 0fr to 1fr
          (form's layout pops in to its true height, no roll-out).
       2. opacity: 500ms fade from 0 → 1.
     During the 0-700ms pause both stay at their initial values, so the
     form takes ZERO vertical space — page below the question stays put
     until the body actually appears. */
  transition: grid-template-rows 0ms 700ms,
              opacity 800ms ease-out 700ms;
}

.petition-template--has-question .petition-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.petition-template--has-question .petition-details > .petition-main-content {
  min-height: 0;
  overflow: hidden;
}

.petition-template--has-question.petition-template--revealed .petition-details {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

/* Once the reveal is complete, restore the natural overflow so any
   sticky/positioned descendants (form messages, dropdowns) aren't clipped. */
.petition-template--has-question.petition-template--revealed .petition-details > .petition-main-content {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .petition-details {
    transition: none;
  }
}

.petition-template--has-question.petition-template--revealed .petition-details .form-grid {
  margin-top: 1.5rem;
}

.petition-cta-note {
  margin: 1rem 0 0.5rem;
  text-align: center;
  color: #787878;
}

/* Petition Question Styles */
.petition-question-block {
  margin-top: 1.5rem;
}

/* Standalone fieldset card (only when NOT inside a unified .ctf-question-block). */
.petition-question-block:not(.ctf-question-block) > .petition-question,
.petition-question-block:not(.ctf-question-block) > .ctf-question {
  border: 1px solid var(--petition-border);
  border-radius: 8px;
  padding: 1rem;
  margin: 0 auto 1rem;
  background: #ffffff;
}

@media (min-width: 768px) {
  .petition-question-block:not(.ctf-question-block) > .petition-question,
  .petition-question-block:not(.ctf-question-block) > .ctf-question {
    width: 75%;
  }
}

/* Legacy: fieldset rendered without .ctf-question-block wrapper (shouldn't happen in prod). */
.petition-template > .petition-question:not(.ctf-question-block .petition-question),
.petition-template > .ctf-question:not(.ctf-question-block .ctf-question) {
  border: 1px solid var(--petition-border);
  border-radius: 8px;
  padding: 1rem;
  margin: 0 auto 1rem;
  background: #ffffff;
}

@media (min-width: 768px) {
  .petition-template > .petition-question,
  .petition-template > .ctf-question {
    width: 75%;
  }
}

.petition-question-title {
  font-weight: 600;
  margin-bottom: 0;
  color: var(--petition-ink);
  font-size: 1.15rem;
  line-height: 1.35;
}

.petition-question-heading,
.ctf-question-heading {
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.petition-question-heading .petition-question-title,
.ctf-question-heading .ctf-question-title {
  display: inline;
  margin-bottom: 0;
}

/* Inline pill immediately after the question — fades in when answered. */
.petition-question-your-answer,
.ctf-question-your-answer {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--petition-accent);
  background: rgba(198, 40, 40, 0.11);
  color: var(--petition-accent);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

@supports (background: color-mix(in srgb, red, white)) {
  .petition-question-your-answer,
  .ctf-question-your-answer {
    background: color-mix(in srgb, var(--petition-accent) 11%, #ffffff);
  }
}

.petition-question-your-answer[hidden],
.ctf-question-your-answer[hidden] {
  display: none !important;
}

.petition-question-your-answer:not([hidden]),
.ctf-question-your-answer:not([hidden]) {
  visibility: visible;
}

.ctf-question-block.ctf-question-block--answered .petition-question-your-answer:not([hidden]),
.ctf-question-block.ctf-question-block--answered .ctf-question-your-answer:not([hidden]),
.ctf-question-block[data-ctf-answered] .petition-question-your-answer:not([hidden]),
.ctf-question-block[data-ctf-answered] .ctf-question-your-answer:not([hidden]) {
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0s;
}

.petition-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-size: 1.15rem;
  line-height: 1.4;
  position: relative;
  padding-left: 2.1rem;
  cursor: pointer;
  color: var(--petition-ink);
}

.petition-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.petition-choice span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.petition-choice span::before {
  content: "";
  position: absolute;
  left: -2.1rem;
  top: 0.1rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 2px solid var(--petition-accent);
  background: #ffffff;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.petition-choice span::after {
  content: "✓";
  position: absolute;
  left: -1.8rem;
  top: 0.06rem;
  font-size: 0.95rem;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-weight: 700;
}

.petition-choice input:checked + span::before {
  background: var(--petition-accent);
  border-color: var(--petition-accent);
  /* No box-shadow halo on :checked — the deep-red fill + white checkmark
     are already a clear selected cue. (The earlier draft added a soft
     pink halo here; removed as part of the "no pink" cleanup.) */
}

.petition-choice input:checked + span::after {
  opacity: 1;
}

.petition-choice input:focus-visible + span::before {
  /* Keyboard focus indicator. Hard-coded neutral cool-gray rather than a
     palette var so this rule never accidentally tints itself by the
     surrounding accent. ~3.5:1 contrast against white satisfies WCAG
     2.4.11 non-text contrast for the 4px ring thickness. */
  box-shadow: 0 0 0 4px #94a3b8;
}

.petition-choice:hover span::before {
  border-color: #a61f1f;
}

/* ========================================
   QUESTION + RESULTS — SINGLE CARD, CROSS-FADE
   One bordered card: question title stays visible; after answering
   the radio options fade out and the results panel fades in below.
======================================== */

.ctf-question-block {
  border: 1px solid var(--petition-border);
  border-radius: 8px;
  background: #ffffff;
  margin: 0 auto 1rem;
  box-sizing: border-box;
  scroll-margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .ctf-question-block {
    width: 75%;
  }
}

/* Fieldset is interior content — card chrome lives on the block wrapper. */
.ctf-question-block > .petition-question,
.ctf-question-block > .ctf-question {
  border: none;
  border-radius: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 1rem;
  background: transparent;
}

.ctf-question-block--answered > .petition-question,
.ctf-question-block--answered > .ctf-question {
  padding-bottom: 0.5rem;
}

.ctf-question-block > .petition-results-wrapper,
.ctf-question-block > .ctf-question-results-wrapper {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Hide results until vote — !important beats legacy inline display:none on cached HTML. */
.ctf-question-block:not(.ctf-question-block--answered) .petition-results-wrapper,
.ctf-question-block:not(.ctf-question-block--answered) .ctf-question-results-wrapper {
  display: none !important;
}

.ctf-question-block--answered .petition-results-wrapper,
.ctf-question-block--answered .ctf-question-results-wrapper {
  display: block !important;
  opacity: 1;
  padding: 0 1rem 1rem;
  visibility: visible;
}

/* Options fade out (question title above them stays). */
.ctf-question-block.ctf-question-block--answered .petition-choice {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    max-height 0.35s ease,
    margin 0.35s ease,
    padding 0.35s ease,
    visibility 0s linear 0.35s;
}

/* Results continue the same card — drop inner panel chrome. */
.ctf-question-block .petition-results-wrapper .petition-results,
.ctf-question-block .ctf-question-results-wrapper .ctf-question-results {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ctf-question-block.ctf-question-block--answered .petition-choice,
  .ctf-question-block.ctf-question-block--answered .petition-question-your-answer,
  .ctf-question-block.ctf-question-block--answered .ctf-question-your-answer {
    transition: none;
  }
}

/* Petition-specific alert overrides */
.petition-success {
  text-align: center;
}

.petition-error {
  text-align: center;
}

/* Footer Content */
.petition-privacy {
  margin-top: 1em;
  font-size: 0.95em;
  color: #6a7a8a;
  text-align: center;
}

.petition-privacy p::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236a7a8a' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.45rem;
  vertical-align: -0.12em;
}

/* ========================================
   NEXT STEP QUESTION BLOCK
   Standalone question + radio choices + results shown above the donation
   form on Next Step pages. Visually + behaviourally aligned with the
   action template's question section (.action-section-question) — the
   shared .petition-question-block / .petition-question / .petition-choice
   classes do the heavy lifting; this block only re-declares the palette
   variables (next-step pages don't render a .petition-template ancestor,
   so the radio styling has nowhere to read --petition-accent from) and
   adds a margin-top tweak to match action's spacing.

   Earlier this block ALSO painted itself as a separate bordered card
   with a centred bold title and a "You answered: X" pill that swapped
   in after the vote — that made the question feature on next-step
   pages look obviously different from the action template's. Reverted
   in 2026-06 for consistency; answered state keeps one card — options fade out
   and results fade in below the question title (ctf-question-block--answered).
======================================== */

.next-step-question-block {
  /* Palette redeclaration: next-step pages don't render a .petition-template
     ancestor, so without this the .petition-choice radio circle inherits
     undefined CSS-variable values — the "checked" fill never paints even
     though the input does toggle. */
  --petition-accent: #c62828;
  --petition-ink: #1f2d3d;
  --petition-muted: #4b5d6b;
  --petition-border: #e2e8f0;

  /* Width discipline: next-step pages render the question block as a
     top-level child of <main> (see single-next_step.php), so unlike
     petition / single-action — where the question is wrapped inside
     .petition-template.card.ctf-template — and unlike action-flow steps
     which sit inside .action-flow, there's NO constraining ancestor here.
     Without these rules the .petition-question fieldset stretches to the
     full viewport width and the page reads as broken next to the
     constrained .donation-template.card below.
     Mirrors .card.ctf-template (in components.css) so the question card
     aligns exactly with the donation card sibling beneath it. Card chrome
     and answered-state cross-fade live on .ctf-question-block (see above). */
  max-width: 900px;
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   Next Step "gate content until answered"
   When `Hide donation form until answered` is on in the ACF panel,
   single-next_step.php wraps the donation template part in a
   .next-step-gated[data-next-step-gate="pending"] container. The video,
   title and the question block render above it and stay visible.
   petition-template.js flips data-next-step-gate to "revealed" when the
   visitor records an answer (via recordPetitionVote() → revealNextStepGate()).
   The transition matches the existing petition-reveal animation so the
   donation form fades in smoothly instead of popping into place.
======================================== */

.next-step-gated[data-next-step-gate="pending"] {
  display: none;
}

.next-step-gated[data-next-step-gate="revealed"] {
  display: block;
  animation: ctf-next-step-gate-reveal 0.45s ease-out;
}

@keyframes ctf-next-step-gate-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .next-step-gated[data-next-step-gate="revealed"] {
    animation: none;
  }
}

/* ========================================
   Next Step open-ended (free-text) question
   Rendered by template-parts/content-next-step-open-question.php in place of
   the multiple-choice question. Reuses .next-step-question-block (width
   discipline) and .ctf-question-block (card chrome) so it matches the
   multiple-choice question card. The page body renders directly above the
   question; the gated donation (.next-step-gated wrapper above) is revealed by
   petition-template.js when the answer saves successfully.
======================================== */

.next-step-open-question.next-step-question-block {
  margin-top: 1.5rem;
}

/* Lead-in copy sits inside the card — same horizontal padding as the
   multiple-choice fieldset interior (.ctf-question-block > .petition-question). */
.ctf-question-block > .next-step-open-question-body {
  padding: 1rem 1rem 0;
  margin-bottom: 0;
}

.ctf-question-block > .next-step-open-question-body > *:last-child {
  margin-bottom: 0;
}

/* Form is interior content — mirrors .ctf-question-block > .petition-question. */
.ctf-question-block > .next-step-open-question-form {
  border: none;
  border-radius: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 1rem;
  background: transparent;
  box-sizing: border-box;
}

.ctf-question-block > .next-step-open-question-body + .next-step-open-question-form {
  padding-top: 0.85rem;
}

.ctf-question-block > .next-step-open-question-form > .petition-question-title,
.ctf-question-block > .next-step-open-question-form > .ctf-question-title {
  display: block;
  margin-bottom: 0.6rem;
}

.next-step-open-question-help {
  margin: 0 0 0.85rem;
  color: var(--petition-muted, #4b5d6b);
  font-size: 0.95rem;
}

/* Full-width textarea inside the card; inherits .form-control chrome
   (padding, border-radius, background) from components.css. */
.next-step-open-question-form .next-step-open-question-input.form-control {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.5;
}

.next-step-open-question-count {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--petition-muted, #4b5d6b);
  text-align: right;
}

.next-step-open-question-noscript {
  margin: 0.5rem 0 0;
  color: var(--petition-muted, #4b5d6b);
  font-size: 0.9rem;
}

.next-step-open-question-actions {
  margin-top: 1.1rem;
  text-align: center;
}

/* Match petition / survey submit button placement (components.css). */
.next-step-open-question-form button[type="submit"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.next-step-open-question-form .form-messages {
  text-align: center;
}

/* Honeypot: kept in the DOM (and the accessibility tree is muted via
   aria-hidden) but pushed off-screen so real visitors never see or tab to it.
   Bots that auto-fill every field populate it and get silently dropped. */
.next-step-open-question-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.next-step-open-question-thanks {
  margin: 0;
  font-weight: 600;
  color: var(--petition-ink, #1f2d3d);
}

/* Post-petition in-app browser escape (A/B: in_app_browser_escape) */
.ctf-in-app-browser-escape__lead {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.45;
}

.ctf-in-app-browser-escape__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ctf-in-app-browser-escape__primary {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.ctf-in-app-browser-escape__secondary {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--petition-muted, #4b5d6b);
  text-decoration: underline;
  cursor: pointer;
}

.ctf-in-app-browser-escape__secondary:hover,
.ctf-in-app-browser-escape__secondary:focus-visible {
  color: var(--petition-ink, #1f2d3d);
}

.ctf-in-app-browser-escape__hint {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--petition-muted, #4b5d6b);
}