/* ==========================================================================
   Story Companion — trust, conversion and footer layer
   Loaded last so it wins over the vendor and Bootstrap Studio stylesheets.

   This file owns exactly the concerns the earlier stylesheets had no answer
   for: the consent recovery path, the single-action signup fork, and a footer
   that actually routes somewhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Inline link inside running prose
   Used in the cookie banner copy so "Cookie settings" is a real control
   rather than a dead phrase in a sentence.
   -------------------------------------------------------------------------- */

.link-inline {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--bs-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color 140ms ease-out, text-decoration-color 140ms ease-out;
}

.link-inline:hover {
  color: var(--bs-primary-text-emphasis);
  text-decoration-thickness: 2px;
}

.link-inline:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   2. The signup fork is gone. What remains is one primary action plus a
   quiet alternative, so the secondary path must not compete with it.
   -------------------------------------------------------------------------- */

.fork-alt {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.88;
}

.fork-alt a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.fork-alt a:hover {
  opacity: 1;
}

.fork-alt a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Footer legal row.

   The copyright used to be amber #ffc107 on near-black, which reads as a
   warning, and the three empty list items rendered as invisible gaps. Both
   are gone: one quiet legal line, and real routes.
   -------------------------------------------------------------------------- */

.footer-legal {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #b9c4ca;
}

/* "Contacts" and "FAQ" sit side by side under "Questions & contact".
   They are the only two routes into the Help & Information Center, so
   they read as a pair rather than as a list.

   The list is a flex row, so it began at the column's left edge while the
   heading and the paragraph above it were centred — on mobile that read as
   two links shoved against the margin under a centred heading.

   It now follows the SAME breakpoint as the text it belongs to. Each
   footer column carries Bootstrap's `text-center text-lg-start`, so the
   heading and paragraph are centred below 992px and left-aligned from 992px
   up; the routes into the Help & Information Center follow them across that
   line. Below it the pair is centred as one group, and from 992px up it sits
   on the column's left edge, flush with the heading and the paragraph above
   it.

   Centring it at every width was the earlier attempt and it was wrong on
   desktop: the links formed a 97px group floating in a 300px column, with
   116px of dead space to their left, directly under left-aligned text. The
   list has no width of its own, so `justify-content` alone cannot place a
   left-aligned group — it needs `margin-inline: 0` to cancel the `auto`
   that centres the list's box inside the column. */
.footer-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin: 0.4rem auto 0;
  padding-left: 0;
  list-style: none;
}

.footer-contact .footer-link {
  min-height: 44px;
  font-size: 0.8125rem;
  word-break: break-word;
}

/* From lg up, the column's own text is left-aligned, so the routes are too.
   `flex-start` puts the pair against the left edge and `margin-inline: 0`
   stops the list's own `auto` margins from centring the box it sits in. The
   two links stay a side-by-side pair at every width — this changes where
   the pair starts, not how it is built. */
@media (min-width: 992px) {
  .footer-contact {
    justify-content: flex-start;
    margin-inline: 0;
  }
}

/* Below md the footer columns stop being columns and become stacked blocks,
   so the two routes are set on their own line, centred, as one pair. */
@media (max-width: 767.98px) {
  .footer-contact {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #cfd8dd;
  text-decoration: underline;
  text-decoration-color: rgba(207, 216, 221, 0.42);
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 140ms ease-out, text-decoration-color 140ms ease-out;
}

.footer-link:hover {
  color: #ffffff;
  text-decoration-color: currentColor;
}

.footer-link:focus-visible {
  outline: 2px solid #8fb0c0;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Every interactive control clears the 44px touch minimum. The consent
   banner and the carousel arrows were all measured at 31-40px.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .cookie-banner .btn,
  .ccc-arrow,
  .navbar .btn,
  .accordion-button,
  /* Were all still under the floor: CTA band buttons measured 34-36px,
     carousel dots 30px, the toggler 40px, the logo lockup 35px tall. */
  .cta-band__btn--fill,
  .cta-band__btn--outline,
  .ccc-dot,
  .navbar-toggler,
  #logo-container {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   4b. The nav auth cluster.

   The bar used to carry three competing conversion controls, all sized by
   inline `padding: 4px 5px` — measured at 31-31px tall and visually equal,
   so nothing read as the primary action. It is now one filled primary
   (#signup-button), one ghost sign-in/logout/user-area pair, and a plain
   text app link. Sizes come from the stylesheet, not inline styles, and the
   44px floor applies at every pointer, not only coarse ones.
   -------------------------------------------------------------------------- */

.sc-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  margin-left: 0.4rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.sc-nav-btn--primary {
  /* Solid, not the 0.75 alpha the old spec carried: white text on
     rgba(64,94,111,.75) over the white navbar composites to 3.8:1, under
     the 4.5:1 floor. Solid Harbour is 6.9:1; hover steps deeper to Deep
     Slate rather than lighter, so the CTA only ever gains weight. */
  background: #405e6f;
  border: 1.5px solid #405e6f;
  color: #ffffff;
}

.sc-nav-btn--primary:hover,
.sc-nav-btn--primary:focus-visible {
  background: #364d54;
  border-color: #364d54;
  color: #ffffff;
}

.sc-nav-btn--ghost {
  background: transparent;
  border: 1.5px solid #6c757d;
  color: #405e6f;
}

.sc-nav-btn--ghost:hover,
.sc-nav-btn--ghost:focus-visible {
  background: #405e6f;
  border-color: #405e6f;
  color: #ffffff;
}

.sc-nav-app {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 8px;
  margin-left: 0.5rem;
  font-weight: 500;
  color: #364d54;
}

.sc-nav-app:hover {
  color: #405e6f;
}

/* The user-area facts list (#modal-3): a two-column label/value grid replacing
   the negative-margin rows. Labels are quiet uppercase slate; values carry
   weight. No second hue. */
.sc-user-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1.1rem;
  align-items: baseline;
  margin: 0 0 1rem;
}

.sc-user-facts__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #55656d;
}

.sc-user-facts__value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #16201f;
  text-align: left;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   5. Focus visibility.

   `.cta-band__btn--outline` shipped :focus-visible tokens that resolved to
   `outline: 3px none`, so the one properly authored component on the page had
   invisible keyboard focus. Give the whole page one ring, from the palette.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.cta-band__btn--fill:focus-visible,
.cta-band__btn--outline:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* The skip link. Off-screen until focused, then drops from the top edge so
   the first Tab on the page offers a way past the banner and the navbar. */
.sc-skip-link {
  position: fixed;
  top: -120%;
  left: 12px;
  z-index: 1300;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  background: #364d54;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 140ms ease-out;
}

.sc-skip-link:focus,
.sc-skip-link:focus-visible {
  top: 0;
  color: #ffffff;
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   6. The page's vertical rhythm.

   Spacing between the page's sections was not a rhythm, it was a single
   value repeated. Measured top-to-bottom at 1440px, the gaps ran
   0 / 48 / 0 / 48 / 0 / 40 / 32 / 0 px, with three different hand-tuned
   values intruding on the 48:

     - both CTA bands had no external margin at all, so a conversion moment
       sat flush against the evidence above it and the pricing below it;
     - #the-program carried an inline `margin-top: 40px` — the only magic
       pixel offset on the page, and 8px TIGHTER than the 48px it replaced,
       so the author reaching for extra separation actually got less;
     - #custom-card-carousel added its own `margin: 2rem auto` inside a
       section that already padded itself, so the gap between "The Program"
       and its own content was 32px against 48px everywhere else.

   A repeated value gives every interval the same weight, which is why the
   page read as a stack of equals rather than as a sequence. The scale below
   is a 4px base, which is the base that produces the useful middle steps an
   8px-only scale skips. Three roles, used by name:

     --sc-space-tight     ( 8px)  inside a group — between a heading and
                                     the first line beneath it
     --sc-space-section   (64px)  between two top-level sections
     --sc-space-major     (104px) before a change of argument — the step from
                                     proof to conversion, and the last
                                     separation before the footer

   The deliberate cadence is tight, generous, generous: content is allowed to
   breathe against itself, and the page slows down where the visitor's
   decision changes.
   -------------------------------------------------------------------------- */

:root {
  --sc-space-tight: 0.5rem;
  --sc-space-section: 4rem;
  --sc-space-major: 6.5rem;
}

@media (max-width: 991.98px) {
  :root {
    --sc-space-section: 3rem;
    --sc-space-major: 4.5rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --sc-space-section: 2.25rem;
    --sc-space-major: 3.25rem;
  }
}

/* Every top-level block carries no vertical padding of its own. The interval
   to the next block is its bottom margin, stated once, here.

   This is the correction the padding approach could not make. Two adjacent
   sections that both pad have no shared interval at all: their paddings sum.
   Measured, a CTA band followed by a padded section gave 64px of margin plus
   64px of the next section's padding = 128px, while the identical band
   followed by another band gave 64px. Same component, same page, double the
   air depending only on which block happened to follow it. */

/* Vertical margins between siblings collapse in CSS: two adjacent 64px
   margins resolve to 64px, not 128px. That is exactly the behaviour the
   section rhythm wants — one interval between two blocks, never two — so
   the margin mechanism is kept, and the band is given only a bottom margin
   rather than both.

   The distinction this draws, and it is the whole rule:

     A block that is a SURFACE — a tinted, bordered or image-backed band
     like .sc-steps, .site-footer, the CTA bands — owns its own padding,
     because the padding is the inset of the surface, not the gap between
     two things. Those keep padding and take no margin.

     A block that is FLOW — an unframed run of content like the gallery, the
     pricing tiers, The Program — carries no vertical padding at all and
     states its interval to the next block as a single bottom margin.

   The failure this replaces: a CTA band followed by a padded section gave
   64px of margin plus 64px of the next section's padding = 128px, while
   the identical band followed by another band gave 64px. Same component,
   same page, double the air depending only on which block happened to
   follow it. */
main > .cta-band-light {
  margin-block: 0 var(--sc-space-section);
}

main > #my-section1,
main > .sc-verbs,
main > .the-program,
main > #the-pricing {
  padding-block: 0;
  margin-bottom: var(--sc-space-section);
}

/* The gallery earns the major step, and it is stated here rather than in a
   separate later rule: two rules with the same specificity are resolved by
   source order, so a `--sc-space-major` declared further down the file would
   be silently overridden by this one and the page would fall back to a flat
   64px everywhere. */
main > #my-section1 {
  margin-bottom: var(--sc-space-major);
}

/* --------------------------------------------------------------------------
   11. Create / Launch / Succeed.

   This section was the page's only headingless one: its <h2> carried
   `visually-hidden`, on the reasoning that the three verbs were the labels.
   The verbs are the labels, but a Persuade page that names a stage and then
   hides the name has a hole where a visitor's eye should land — and it is
   the only section on the page with no visible heading. The heading is back,
   on the same clamp as .sc-steps__title and .the-program__title.

   The three cards were a stock Bootstrap grid: identical 484px blocks, each
   a single 60-word paragraph, each capped by a 200px image. Worse, the
   images were generic stock (a sports car, a food spread, a bee) at
   400x208 / 300x300 / 336x597 — all upscaled to fill 416x200 — sitting on a
   page whose own footer claims every graphic here was made in Story
   Companion. The site's proof strategy is show the receipts, and the
   receipts were in the next folder over: ten real generated campaign
   visuals in assets/img/screen*.webp. Create now leads with one of those,
   Launch and Succeed carry newly generated images in the same palette.

   Structure: a three-column grid, but not three equal blocks. The middle
   card is the peak — it carries a 2px Deep Slate border and a larger media
   plate, the same weight-and-lift device the featured pricing tier and the
   current route step use. Hierarchy by border, never by a colour patch.
   ------------------------------------------------------------------------ */

.sc-verbs > .container {
  padding-top: 0;
}

.sc-verbs__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #16201f;
  text-align: center;
}

.sc-verbs__intro {
  max-width: 46ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #4a5a62;
  text-align: center;
}

.sc-verbs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* One card, three jobs: it is a surface, so it owns its own padding and its
   own border, and it takes no vertical margin. Its radius matches
   .sc-step__trigger and .plan-card at 14px, because a stage and a step are
   the same kind of object — something you move into. */
.sc-verb {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dde5e6;
  border-radius: 14px;
  background: #ffffff;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.sc-verb:hover {
  transform: translateY(-3px);
  border-color: #b9cbcf;
  box-shadow: 0 2px 4px rgba(22, 31, 34, 0.07), 0 8px 18px -10px rgba(22, 31, 34, 0.24);
}

.sc-verb:focus-within {
  border-color: var(--bs-primary);
}

.sc-verb__media {
  overflow: hidden;
  background: #dfe6e7;
  aspect-ratio: 4 / 3;
}

.sc-verb__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-verb:hover .sc-verb__media img {
  transform: scale(1.03);
}

.sc-verb__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  padding: 1.5rem 1.35rem;
}

.sc-verb__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #16201f;
}

/* The lead line is the claim. The detail below it is the qualification.
   Before, the two were one 60-word block and the claim had to be found
   inside it; the words are unchanged, only the emphasis is. */
.sc-verb__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 600;
  color: #35444b;
}

.sc-verb__detail {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #55656d;
}

/* The peak. Two pixels of Deep Slate and a taller media plate — the same
   device as .plan-card--featured and .sc-step__trigger[aria-current="step"],
   and deliberately not a coloured badge, which is what made the old
   "recommended" flag invisible in the pricing table. */
.sc-verb--lead {
  border: 2px solid var(--bs-primary);
  background: #fbfcfc;
}

.sc-verb--lead .sc-verb__name {
  font-size: 1.5rem;
}

.sc-verb--lead .sc-verb__lead {
  font-size: 1.0625rem;
}

.sc-verb--lead:hover {
  border-color: var(--bs-primary);
}

/* The lead card's border is a pixel heavier, so its inset is compensated by
   a pixel on each side — otherwise the type inside it sits one pixel off
   from its neighbours' when a card is hovered. */
.sc-verb--lead .sc-verb__body {
  padding: calc(1.5rem - 1px) calc(1.35rem - 1px);
}

@media (min-width: 768px) {
  .sc-verbs__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  /* The middle stage is the one the visitor has to trust, so it is given
     more room rather than more decoration. */
  .sc-verb--lead {
    margin-top: -0.75rem;
  }
}

@media (max-width: 767.98px) {
  .sc-verb--lead {
    margin-top: 0;
  }
}

/* Pricing carried `py-4 py-xl-5` on its inner container, so the interval
   around the section silently changed from 48px to 24px at the 1200px
   breakpoint — the same blocks, more or less air, purely on width. That
   utility has been removed from the container in the markup, so nothing
   here needs to override it.

   Internally, the intro and the tier row were separated by `mb-5` (48px) —
   exactly the section's own interval, so the two groups carried identical
   weight and the section read as one undifferentiated block. The intro now
   binds to the tiers it introduces with the tight step, and the reassurance
   below them keeps a real interval, because it makes a different kind of
   statement from the offer above it. */
#the-pricing .pricing-intro {
  margin-bottom: var(--sc-space-tight);
}

#the-pricing .row.mb-5 {
  margin-bottom: 0;
}

/* "The Program" and the Create/Launch/Succeed row were the two blocks with no
   authored rhythm at all — one an inline 40px, the other nothing. Both now
   sit on the same interval as every other section. */
.the-program {
  margin-top: 0;
}

.the-program__title {
  margin: 0 0 var(--sc-space-tight);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #16201f;
  text-align: center;
}

/* The carousel's own 2rem top margin is removed: the title's bottom margin
   and the section's padding now set that interval, so the heading is
   separated from its content by the tight step and the whole block is
   separated from its neighbours by the section step. */
.the-program #custom-card-carousel {
  margin-top: 0;
}

/* The Create/Launch/Succeed row had no section of its own — it was a bare
   .container between two full-bleed elements, so the cards sat closer to the
   band above than the band did to the gallery. It is now a real section on
   the page's interval. */

/* A slower interval where the page changes argument: the gallery is proof,
   and the decision that follows it should not arrive in the same breath as
   the evidence. The major step is declared here, in the same rule that
   gives the other flow sections the section step, so the two cannot be
   separated by source order and silently resolve to one another.

   The gallery's container carries `my-5`, which stacked 48px of margin on
   top of that margin and produced a 152px interval below the grid — the
   widest on the page, from two values that each look ordinary alone. */
#my-section1 .container.my-5 {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   The footer.

   It carried `padding-top/bottom: 4rem` inline on the <footer> and
   `py-4 py-lg-5` on its own .container — 64px + 48px = 112px of effective
   space, the largest gap anywhere on the page, assembled from two nested
   elements. Every other interval on the page is one value on one element.
   The value is now stated once, on the element that owns it, and it is the
   page's major step: the last boundary before the end. */
.site-footer {
  padding-block: var(--sc-space-major);
  background:
    linear-gradient(180deg, rgba(16, 24, 30, 0.50) 0%, rgba(10, 16, 21, 0.74) 100%),
    url("../img/how-wall-clean.webp") center 20% / cover no-repeat;
  color: #f0f4f6;
  border-top: 1px solid rgba(207, 220, 223, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-footer h3 {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.site-footer p {
  color: #d0dbe0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.site-footer hr {
  border-color: rgba(207, 220, 223, 0.15);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   The footer mark and its tagline.

   The mark was a .bs-icon chip — a class whose entire job is to paint a
   slate background and hold a Bootstrap Icons glyph drawn by ::before. With
   an <img> inside it instead of a glyph, all the chip did was render a 32px
   grey square, and the logo sat proud of it on a -6px margin. The chip is
   removed, so the mark is now the artwork on the footer's own dark ground,
   with no plate behind it.

   Baseline alignment across the four columns.

   The other three columns are heading + body: an <h3 class="fs-6"> at 16px
   with a 19.2px line box and Bootstrap's 8px margin-bottom, so their body
   text begins 27.2px below the top of the column. This column is mark +
   tagline, and it is the same pair structurally — the mark IS this column's
   heading — so the tagline belongs on that same body-text line.

   At 56px the mark is 28.8px taller than the heading band it stands in, so
   it was pushing its tagline 39px below the other three columns' text and
   the row read as four columns with one of them sitting late. The mark is
   pulled up by exactly its excess over the band, so the tagline lands on the
   shared line while the artwork keeps its full size.

   The excess is computed from a variable rather than written as -1.8rem, so
   the alignment survives a change to the mark's size or to the h3's metrics:
   change --sc-mark-size or --sc-footer-band and the two stay on one line.
   -------------------------------------------------------------------------- */

:root {
  --sc-mark-size: 56px;
  /* The heading band the mark stands in: 19.2px line box + 8px margin. */
  --sc-footer-band: 27.2px;
}

.footer-mark {
  display: block;
  width: var(--sc-mark-size);
  height: var(--sc-mark-size);
  border: 0;
  /* Baseline alignment with the other three columns, which only exist as
     columns while the four sit side by side. See the note above: at 56px
     the mark is 28.8px taller than the heading band it stands in, so it
     was pushing its tagline 39px below the other columns' body text.

     The correction is scoped to lg and up. Below it the footer stacks and
     the social column leads (order-first), so there is no shared line to
     align to — and a negative margin there would do the opposite of what it
     does on desktop, collapsing the mark onto its own tagline with no gap
     at all. The tight step is the correct interval in the stacked case. */
  margin-bottom: 0.5rem;
}

@media (min-width: 992px) {
  .footer-mark {
    margin-top: calc(var(--sc-footer-band) - var(--sc-mark-size));
    margin-bottom: 0;
  }
}

.footer-tagline {
  margin: 0;
  color: #b9c4ca;
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  :root {
    --sc-mark-size: 44px;
  }
}

/* --------------------------------------------------------------------------
   The hero panel.

   Its inline style was `padding-top: 1em; padding-right: 1em;
   padding-bottom: 0; padding-left: 1em` — an asymmetric inset with a zero on
   the bottom, which pushed the whole block up inside its fixed 400px box so
   the CTAs sat above the optical centre and the empty space collected under
   the dogfooding line. The panel is a surface, so the inset belongs in CSS
   beside the rest of the page's surfaces; the colour and the rounding are
   unchanged.
   -------------------------------------------------------------------------- */

/* .hero-panel was retired with the vignette rewrite (see DESIGN.md) and no
   markup references it anymore — the rule itself is gone with it. It was
   also the last rgba(64,94,111,.75) + white-text pairing on the page, which
   computes to 3.8:1 over a white ground: below AA, and the detector was
   still scoring this dead selector. */

/* --------------------------------------------------------------------------
   The walking team.

   This was a bare full-bleed <div> at width:90% wedged between the gallery
   and the first CTA band — i.e. between the evidence and the ask, which is
   the one boundary on a Persuade page worth marking. It is now a named
   band that shares the page's measure and its rhythm, carries intrinsic
   width and height so it cannot shift the layout on load, and is hidden
   from assistive technology: it illustrates a boundary, it does not
   describe content.
   -------------------------------------------------------------------------- */

.sc-rule {
  display: flex;
  justify-content: center;
  margin-block: 0 var(--sc-space-section);
}

.sc-rule img {
  display: block;
  width: 100%;
  max-width: 1160px;
  height: auto;
}

/* The divider is a wide, low band. On a phone it is all margin and no
   information, so it is dropped rather than shrunk. */
@media (max-width: 575.98px) {
  .sc-rule {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Pricing.

   The old cards had no hierarchy: a bare <h2> in a 700px column, a body
   paragraph using the non-existent class `w-lg-50`, 16 icon spans whose
   ::before resolved to `none`, and a "recommended" badge painted the same
   grey as every other CTA. Now the tiers are actually comparable, the
   featured plan is lifted in weight rather than in a colour patch, and the
   reassurance sits on the card where the decision happens.
   -------------------------------------------------------------------------- */

.pricing-intro {
  max-width: 62ch;
}

.pricing-intro h2 {
  margin-bottom: 0.75rem;
}

.pricing-intro .lead {
  color: #4a5a62;
  font-size: 1.125rem;
  line-height: 1.6;
}

.plan-card {
  position: relative;
  margin-top: 0.75rem;
  border: 1px solid #d5dcdf;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(22, 31, 34, 0.07), 0 4px 10px -6px rgba(22, 31, 34, 0.16);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms ease-out;
}

.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(22, 31, 34, 0.08), 0 8px 18px -10px rgba(22, 31, 34, 0.24);
}

/* The featured tier is distinguished by weight, border and lift — not by a
   colour patch that reads the same as the other two CTAs. */
.plan-card--featured {
  border: 2px solid var(--bs-primary);
  background: #fbfcfc;
}

.plan-flag {
  position: absolute;
  top: -0.85rem;
  left: 1.5rem;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--bs-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.plan-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #16201f;
}

.plan-note {
  margin: 0.15rem 0 0.65rem;
  font-size: 0.875rem;
  color: #5c6b73;
}

.plan-price {
  margin: 0;
  color: #16201f;
  font-variant-numeric: tabular-nums;
}

.plan-price-unit {
  margin-left: 0.2rem;
  font-size: 0.5em;
  font-weight: 400;
  color: #5c6b73;
}

.plan-card hr {
  margin: 1rem 0;
  border-color: #e2e8ea;
  opacity: 1;
}

.plan-list {
  margin: 0 0 1.25rem;
  padding: 0;
}

/* Real glyphs from the Bootstrap Icons set already loaded on the page.
   `content: none` on the old .bs-icon spans is what produced 16 empty boxes. */
.plan-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #35444b;
}

.plan-list li::before {
  content: "\F26E"; /* bi-check-lg */
  position: absolute;
  top: 0;
  left: 0;
  font-family: "bootstrap-icons";
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--bs-primary);
}

.plan-card--featured .plan-list li::before {
  color: #2f7a4a;
}

.plan-list li.plan-list__item--excluded {
  color: #637278;
}

.plan-list li.plan-list__item--excluded::before {
  content: "\F659"; /* bi-x-lg */
  position: absolute;
  top: 0;
  left: 0;
  font-family: "bootstrap-icons";
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 700;
  color: #c93b3b;
}

.plan-ratio {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #f2f5f5;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #45555c;
}

.plan-ratio strong {
  display: inline-block;
  margin-bottom: 0.2rem;
  color: #16201f;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Visible helper text under a control. This replaces a `title` tooltip, which
   was the only explanation of the disabled Refill button — and was hidden
   entirely below 500px by a blanket `.tooltip { display: none }` rule. */
.plan-hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5c6b73;
}

.plan-hint__state {
  color: var(--bs-primary);
  font-weight: 600;
}

.plan-hint__state.refill-hint--alert {
  color: #c93b3b;
  font-weight: 700;
  transition: color 0.2s ease;
}

.plan-cta[disabled],
.plan-cta[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.plan-cta {
  min-height: 44px;
  padding-block: 0.55rem;
  font-weight: 600;
  /* Bootstrap's default 0.375rem (6px) is off the radius scale; buttons
     are the 8px step. */
  border-radius: 8px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.plan-cta:not([disabled]):not([aria-disabled="true"]):not(.refill-inactive):hover,
.plan-cta:not([disabled]):not([aria-disabled="true"]):not(.refill-inactive):focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(54, 77, 84, 0.2);
}

.plan-card--featured .plan-cta {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

.plan-card--featured .plan-cta:hover,
.plan-card--featured .plan-cta:focus-visible {
  background-color: #24353a;
  border-color: #24353a;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(36, 53, 58, 0.32);
}

/* Inactive Refill button: explicitly disable hover appearance and interactions */
.plan-cta.refill-inactive,
.plan-cta.refill-inactive:hover,
.plan-cta.refill-inactive:focus {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: transparent !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Active Refill button: full interactive hover state */
.plan-cta.refill-active {
  opacity: 1;
  cursor: pointer;
}

.plan-cta.refill-active:hover,
.plan-cta.refill-active:focus-visible {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(54, 77, 84, 0.2);
}

.pricing-reassure {
  max-width: 58ch;
  margin: 1.75rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #4a5a62;
}

@media (max-width: 1199.98px) {
  .plan-card--featured {
    margin-top: 0.75rem;
  }

  .plan-card--featured:hover {
    transform: translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   8. How it works.

   Four full-screen modals sat in the DOM with zero triggers, holding the
   best-written copy on the page. Rather than leaving them as dead weight,
   the narrative is now the page's spine: four numbered steps under the hero,
   each opening its modal. This also gave the page a single visible <h1>.
   -------------------------------------------------------------------------- */

.sc-steps {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: #f6f8f8;
  border-block: 1px solid #e3e9ea;
}

.sc-steps__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: #16201f;
  text-align: center;
}

.sc-steps__intro {
  max-width: 46ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #4a5a62;
  text-align: center;
}

.sc-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.sc-step {
  display: flex;
}

.sc-step__details {
  width: 100%;
}

/* The summary is the card. Hide the disclosure marker (Firefox + WebKit),
   and when the details are open, square off the bottom corners so the
   summary and its panel read as one card that grew, not two stacked ones. */
.sc-step__trigger {
  list-style: none;
}

.sc-step__trigger::-webkit-details-marker,
.sc-step__details > summary::-webkit-details-marker {
  display: none;
}

.sc-step__details[open] > .sc-step__trigger {
  border-radius: 14px 14px 0 0;
  border-bottom-color: #dde5e6;
}

.sc-step__details[open] > .sc-step__trigger[aria-current="step"] {
  border-radius: 14px 14px 0 0;
  border-bottom: 2px solid var(--bs-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* No lift while attached: translateY(-3px) on the summary would tear a gap
   between the card head and its panel on every hover. */
.sc-step__details[open] > .sc-step__trigger:hover {
  transform: none;
  box-shadow: none;
}

/* The preview panel. Same hairline as the card, no top border so there is
   never a double line where the two meet. The entrance is opacity + transform
   only — a max-height transition is a layout animation and reflows the whole
   grid on every frame. */
.sc-step__panel {
  border: 1px solid #dde5e6;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #ffffff;
  overflow: hidden;
  animation: sc-panel-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sc-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sc-step__trigger[aria-current="step"] + .sc-step__panel {
  border-color: var(--bs-primary);
  background: #fbfcfc;
}

.sc-step__media {
  margin: 0;
  background: #dfe6e7;
}

.sc-step__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.sc-step__panel-body {
  padding: 1.1rem 1.2rem 1.25rem;
}

.sc-step__panel-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #16201f;
}

.sc-step__panel-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3c4b52;
}

.sc-step__panel-text strong {
  color: #16201f;
}

/* The cue states the disclosure: "See what happens" closed, "Close" open,
   with the arrow flipping up. Text swap, not a width animation. */
.sc-step__cue-close {
  display: none;
}

.sc-step__details[open] > .sc-step__trigger .sc-step__cue-label {
  display: none;
}

.sc-step__details[open] > .sc-step__trigger .sc-step__cue-close {
  display: inline;
}

.sc-step__details[open] > .sc-step__trigger .sc-step__cue::after {
  content: " \2191";
}

/* The whole card is the hit target, so nothing depends on hovering a strip
   or spotting an arrow. */
/* The number that used to sit in the top-left of each card has moved onto the
   route line in story-line.compiled.css, where it can also show position. The
   card is now name, description and cue, so it is vertically centred instead
   of top-aligned, and the first card picks up the step's current state. */
.sc-step__trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 1.5rem 1.35rem;
  border: 1px solid #dde5e6;
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}

/* The step you are standing on gets the weight the featured pricing tier gets:
   a 2px border in the brand slate, not a colour patch. */
.sc-step__trigger[aria-current="step"] {
  border: 2px solid var(--bs-primary);
  padding: calc(1.5rem - 1px) calc(1.35rem - 1px);
  background: #fbfcfc;
}

.sc-step__trigger:hover {
  transform: translateY(-3px);
  border-color: #b9cbcf;
  box-shadow: 0 2px 4px rgba(22, 31, 34, 0.07), 0 8px 18px -10px rgba(22, 31, 34, 0.24);
}

.sc-step__trigger[aria-current="step"]:hover {
  border-color: var(--bs-primary);
}

.sc-step__trigger:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
}

.sc-step__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sc-step__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: #16201f;
}

.sc-step__desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #55656d;
}

.sc-step__cue {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bs-primary);
}

.sc-step__cue::after {
  content: " \2192";
}

.sc-step__trigger:hover .sc-step__cue {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 991.98px) {
  .sc-steps__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .sc-steps__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   9. The four story modals.

   They used to be full-screen background images with a text box laid over
   them, positioned by hand, with a Close button pushed across by an 80%
   margin. Now they are a real media + text pair, responsive, and dismissible
   with Escape as well as the close control.
   -------------------------------------------------------------------------- */

.sc-story-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
}

.sc-story-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.7rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(22, 31, 34, 0.2);
}

.sc-story-modal__media {
  margin: 0;
  background: #dfe6e7;
}

.sc-story-modal__media img {
  display: block;
  width: 100%;
  height: clamp(180px, 34vh, 300px);
  object-fit: cover;
}

.sc-story-modal__body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.sc-story-modal__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #16201f;
}

.sc-story-modal__text {
  max-width: 62ch;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #3c4b52;
}

.sc-story-modal__text strong {
  color: #16201f;
}

/* --------------------------------------------------------------------------
   10. Scroll target offset.

   The fixed logo occupies the top-left corner, so anchored headings need
   clearance or they land underneath it.
   -------------------------------------------------------------------------- */

:target {
  scroll-margin-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HELP & INFORMATION CENTER (#infoModal)

   The FAQ, the two legal documents and the contact list all share this one
   dialog. It was reading as a black slab with dark text on it: a bare
   `.modal-content { background-color: #000 }` rule in the gallery
   stylesheet — written for the full-bleed asset viewer — was leaking into
   every modal on the page. That rule is now scoped to #dynamicAssetModal.

   What remains here is a light, quiet surface: warm off-white paper, a
   slate header, and legal text that is long, so it gets a narrower measure
   and generous line height rather than a heavier treatment.
   ═══════════════════════════════════════════════════════════════════════ */

#infoModal .modal-content {
  background: #fbfcfc;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 1.5rem 3rem rgba(24, 34, 38, 0.28);
  overflow: hidden;
}

#infoModal .modal-header {
  background: var(--bs-primary);
  border-bottom: 0;
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

#infoModal .modal-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
}

/* The glyph carries .text-primary in the markup, which is the same slate
   as the header behind it and made it vanish. Force it light. */
#infoModal .modal-title .bi {
  color: #9fc2ca !important;
}

#infoModal .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.85;
  margin: 0;
  padding: 0.85rem;
  flex: 0 0 auto;
  box-shadow: none;
  background-size: 1rem;
}

#infoModal .modal-header .btn-close:hover {
  opacity: 1;
}

#infoModal .modal-header .btn-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}

#infoModal .modal-body {
  color: #263238;
  padding: 2rem 2.25rem;
}

/* Section rules ------------------------------------------------------- */

#infoModal .section-heading {
  color: #1d2a2e;
  font-weight: 650;
  letter-spacing: -0.015em;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #e3eaec;
  margin-bottom: 1.5rem;
}

#infoModal .faq-category {
  color: var(--bs-primary);
  font-size: 1rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

#infoModal hr {
  border-color: #dbe4e6;
  opacity: 1;
}

/* FAQ accordion ------------------------------------------------------- */

#infoModal .accordion-item {
  background: #fff;
  border: 1px solid #dfe7e9;
  border-radius: 10px !important;
  margin-bottom: 0.6rem;
  box-shadow: none;
  overflow: hidden;
}

#infoModal .accordion-button {
  color: #1d2a2e;
  font-weight: 550;
  font-size: 0.975rem;
  line-height: 1.45;
  padding: 0.95rem 1.15rem;
  background: #fff;
}

#infoModal .accordion-button:not(.collapsed) {
  color: #10201f;
  background: #eaf1f2;
  box-shadow: none;
}

#infoModal .accordion-button:hover {
  background: #f1f6f6;
}

#infoModal .accordion-button:not(.collapsed):hover {
  background: #e3ecee;
}

#infoModal .accordion-button::after {
  /* Bootstrap's default chevron is a dark glyph on a light chip; this
     swaps in the outline variant so it stays legible on the tinted open
     state as well. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23364d54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

#infoModal .accordion-body {
  color: #3d4d54;
  font-size: 0.95rem;
  line-height: 1.65;
  padding: 1.1rem 1.25rem 1.25rem;
  background: #fff;
}

/* Legal tabs ---------------------------------------------------------- */

#infoModal .nav-tabs {
  gap: 0.25rem;
  border-bottom: 1px solid #dfe7e9;
}

#infoModal .nav-tabs .nav-link {
  color: #5b6d74;
  font-weight: 600;
  font-size: 0.9375rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.6rem 1rem;
  margin-bottom: -1px;
}

#infoModal .nav-tabs .nav-link:hover {
  color: var(--bs-primary);
  background: #f0f5f5;
  border-bottom-color: #c3d2d6;
}

#infoModal .nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background: transparent;
  border-bottom-color: var(--bs-primary);
  border-bottom-width: 2px;
}

#infoModal .tab-content {
  padding-top: 1.5rem;
  color: #263238;
}

/* Legal copy is a wall of small type. Cap the measure and open up the
   leading so a full screen of it stays comfortable to read. */
#infoModal #nav-tos,
#infoModal #nav-privacy {
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #3d4d54;
  padding-left: 0;
  padding-right: 0;
}

#infoModal #nav-tos h3,
#infoModal #nav-privacy h3 {
  color: #16242a;
  font-size: 1.075rem;
  font-weight: 650;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

#infoModal #nav-tos > p:first-of-type,
#infoModal #nav-privacy > p:first-of-type {
  display: none;
}

/* The legal copy was pasted with empty <p></p> spacers between every
   clause. They are valid but they are also full-width voids on a long
   document, so the spacing is handled by the margins below instead. */
#infoModal #nav-tos p:empty,
#infoModal #nav-privacy p:empty {
  display: none;
}

#infoModal #nav-tos p,
#infoModal #nav-privacy p,
#infoModal #nav-tos li,
#infoModal #nav-privacy li {
  margin-bottom: 0.75rem;
  color: #3d4d54;
}

#infoModal #nav-tos strong,
#infoModal #nav-privacy strong {
  color: #1d2a2e;
  font-weight: 650;
}

#infoModal #nav-tos ol,
#infoModal #nav-privacy ol,
#infoModal #nav-tos ul,
#infoModal #nav-privacy ul {
  padding-left: 1.35rem;
}

/* Contact list -------------------------------------------------------- */

#infoModal .contact-section .list-group-item {
  background: #fff;
  border-color: #e3eaec;
  color: #263238;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
}

#infoModal .contact-section .contact-icon {
  color: var(--bs-primary);
}

#infoModal .contact-section .contact-label {
  color: #1d2a2e;
}

#infoModal .contact-section .contact-link {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(54, 77, 84, 0.3);
  word-break: break-all;
}

#infoModal .contact-section .contact-link:hover {
  color: #22383e;
  border-bottom-color: currentColor;
}

#infoModal .modal-footer {
  background: #f2f6f6;
  border-top: 1px solid #dfe7e9;
}

#infoModal .modal-footer .btn {
  min-width: 7rem;
}

@media (max-width: 767.98px) {
  #infoModal .modal-body {
    padding: 1.5rem 1.15rem;
  }

  #infoModal .modal-header {
    padding: 1rem 1.15rem;
  }

  #infoModal .modal-title {
    font-size: 1.15rem !important;
  }
}