/*
  ARCLO V2 — SECTIONS
  Page-specific composition. Each section is a thin layer of layout
  rules on top of the shared components in components.css.
*/

/* ---------------------------------------------------------------
   Hero (two-column: copy left, showcase visual right)
--------------------------------------------------------------- */

.hero {
  /* Was padding-block: var(--section-pad-y) (128px+ top and bottom at
     desktop widths). That much top padding, combined with the
     headline's own height, pushed the avatar row and primary CTA
     below the fold on a normal laptop viewport — the full
     header -> headline -> copy -> social proof -> CTA hierarchy
     should be visible without scrolling. Top is cut well back; bottom
     stays closer to the original since it doesn't affect that. */
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: var(--section-pad-y-tight);
}

.hero__grid {
  display: grid;
  /* Visual-weighted (was 52/48) so the large hero system demo has
     room to hit its target size; the container is also widened to
     --container-max-wide (see index.html) so this shift doesn't come
     at the headline's expense. */
  grid-template-columns: 45fr 55fr;
  gap: var(--space-9);
  /* Was "center": the copy column runs taller than the animation, so
     centering both within that shared height left the animation
     floating noticeably below the headline. Top-aligned instead, with
     a small nudge down on .hero__visual itself so it lines up with
     the headline rather than the small eyebrow above it. */
  align-items: start;
}

.hero__headline {
  font-size: var(--text-hero-compact);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin-block: var(--space-3) var(--space-5);
}

/* Nudges the whole copy column in from the container's left edge on
   desktop, so the headline doesn't sit flush against it. Left off on
   the mobile stacked layout below, where the column is already full
   width and every bit of it is needed. */
@media (min-width: 901px) {
  .hero__copy {
    /* Reduced from clamp(1.5rem, 6vw, 5rem): that much indent
       narrowed the column enough to wrap the headline onto an extra
       line, adding real height back in — working against the fix
       above. Still nudged right, just not as far. */
    padding-left: clamp(1rem, 3vw, 2.5rem);
  }

  /* Small nudge down from the very top of the row (see align-items
     on .hero__grid above), so the animation lines up with the
     headline itself rather than the small eyebrow label above it. */
  .hero__visual {
    margin-top: 3.5rem;
  }
}

/* At medium desktop widths the copy column (already the smaller
   45% share) gets narrow enough that the same fluid headline size
   wraps onto 5-6 lines instead of 4, adding the height straight back
   in and pushing the CTA below the fold again — worse than at 1440,
   since the container hasn't reached its 1440 cap yet to give both
   columns room. Give the copy column back the larger share in this
   range, and drop the extra right-indent (no width to spare here).
   Rules after this point in the cascade win the 901-1200 overlap
   with the block above. */
@media (min-width: 901px) and (max-width: 1360px) {
  .hero__grid {
    grid-template-columns: 55fr 45fr;
  }

  .hero__copy {
    padding-left: clamp(0.5rem, 1vw, 1rem);
  }
}

.hero__lead {
  font-size: var(--text-lead);
  color: var(--color-ink-soft);
  max-width: 42rem;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero__note {
  font-size: var(--text-micro);
  color: var(--color-ink-muted);
}

/* Avatars + CTA side by side instead of stacked, on desktop only.
   Recovers a full row of height (the avatar row was otherwise sitting
   entirely above the button), which is what it took to get the CTA
   reliably above the fold at smaller desktop heights (~768px) too,
   not just typical ones. .hero__note wraps to its own line via
   flex-basis so it doesn't fight the row for space. Must come after
   the base .hero__actions/.hero__note rules above to win the cascade
   (media queries don't add specificity). */
@media (min-width: 901px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--space-3);
    column-gap: var(--space-5);
  }

  .hero__note {
    flex-basis: 100%;
  }
}

/* Used on the service detail pages: primary + secondary CTA side by
   side, instead of the homepage hero's stacked column. */
.hero__actions--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.hero__visual .media-frame {
  --frame-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero__visual {
    order: 2;
  }

  .hero__copy {
    order: 1;
  }

  .hero__visual .project__mobile-frame {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Value strip (service detail pages) — three value/stat blocks
   directly under the hero. .value-block__label holds a short text
   statement for now ("Respond Faster"); swap it for a sourced
   percentage later without touching the layout.
--------------------------------------------------------------- */

.value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.value-block__label {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-3);
}

.value-block__desc {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  max-width: 32ch;
}

@media (max-width: 760px) {
  .value-strip {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---------------------------------------------------------------
   Service page hero (editorial, stat-led)
   Replaces the old two-column marketing hero + placeholder visual
   on individual /services/*.html pages. Deliberately a separate,
   self-contained class family from .hero/.hero__* above — those
   classes are shared with the homepage hero, and this component
   must never affect it. Shared across all five service pages;
   only the H1, description, and three stat values/descriptions
   change per page.
--------------------------------------------------------------- */

.service-hero {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.service-hero__title {
  font-size: var(--text-hero-compact);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin-bottom: var(--space-4);
}

.service-hero__description {
  font-size: var(--text-lead);
  color: var(--color-ink-soft);
  max-width: 42rem;
  margin-bottom: var(--space-8);
}

.service-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-8);
}

.service-stat {
  padding-inline: var(--space-6);
}

.service-stat:first-child {
  padding-left: 0;
}

.service-stat:last-child {
  padding-right: 0;
}

.service-stat:not(:first-child) {
  border-left: 1px solid var(--color-border);
}

.service-stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: var(--space-3);
  white-space: nowrap;
}

.service-stat__description {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  max-width: 26ch;
}

/* Not shown on any page today (no sourced attribution supplied yet)
   — kept ready so a citation can be added later without touching
   this component's layout. */
.service-stat__source {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--color-ink-muted);
}

@media (max-width: 760px) {
  .service-stats {
    grid-template-columns: 1fr;
  }

  .service-stat {
    padding-inline: 0;
    padding-block: var(--space-5);
  }

  .service-stat:first-child {
    padding-top: 0;
  }

  .service-stat:last-child {
    padding-bottom: 0;
  }

  .service-stat:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .service-stat__value {
    white-space: normal;
  }

  .service-stat__description {
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   Editorial card grid (used by "Why We're Totally Unique").
   Was a full-width divided-row layout (large index left, title+detail
   split into two more columns to the right) — replaced with a
   compact card grid so the five points sit closer together and scan
   faster, per client request.
   NOTE: Services used to reuse an earlier version of this too, but
   now has its own layout below ("Service blocks"). Do not repurpose
   this for Services again without checking Why We're Totally Unique
   first.
--------------------------------------------------------------- */

.system-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.system-row {
  padding: var(--space-6);
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-lg);
}

.system-row__index {
  margin-bottom: var(--space-4);
}

.system-row__body {
  display: block;
}

.system-row__index .index-figure {
  font-size: 1.5rem;
}

.system-row__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.system-row__outcome {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-style: italic;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.system-row__detail {
  color: var(--color-ink-soft);
  max-width: none;
  font-size: var(--text-small);
}

@media (max-width: 900px) {
  .system-rows {
    grid-template-columns: 1fr 1fr;
  }
}

.why-arclo__controls {
  display: none;
}

/* Mobile only: swap the stacked single-column grid for a horizontal,
   snap-scrolling carousel with buttons — same 5 cards, no desktop/
   tablet changes above 560px. */
@media (max-width: 560px) {
  .system-rows {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .system-rows::-webkit-scrollbar {
    display: none;
  }

  .system-row {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .why-arclo__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-6);
  }

  .why-arclo__controls .carousel-arrow {
    color: var(--color-on-dark);
    border-color: var(--color-border-on-dark);
  }

  .why-arclo__controls .carousel-arrow:hover {
    background: rgba(248, 247, 242, 0.08);
    border-color: var(--color-on-dark);
  }

  .why-arclo__controls .carousel-arrow[disabled] {
    opacity: 0.35;
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------
   Service blocks (Services / "What We Do")
   Four large editorial sections, each with its own demo visual.
   DOM order is always (content, visual) so mobile stacking is
   identical across all four; .service-block--visual-left flips the
   visual to the left column on desktop only (see media query below).
--------------------------------------------------------------- */

.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.service-block__index {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink-faint);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

.service-block__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.service-block__positioning {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.service-block__desc {
  color: var(--color-ink-soft);
  max-width: 44ch;
  margin-bottom: var(--space-6);
}

@media (min-width: 900px) {
  .service-block--visual-left .service-block__visual {
    order: -1;
  }
}

@media (max-width: 900px) {
  .service-block {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---------------------------------------------------------------
   Compact details grid (service detail pages: /services/*.html)
   Replaces the old per-feature .service-block pattern on these
   pages, which used a full-width visual placeholder per feature and
   made the section far too tall. Text only: eyebrow, heading, 1-2
   short paragraphs, separated by thin rules instead of imagery.
   Two columns on desktop, one on mobile. Works with 2, 3 or 4 items
   without forcing an even grid (see the (n+3) row-divider rule,
   which only draws a line above items in row 2+, whatever the count).
--------------------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-9);
}

.detail-item {
  padding-block: var(--space-6);
}

.detail-item:nth-child(n + 3) {
  border-top: 1px solid var(--color-border);
}

.detail-item__title {
  font-size: var(--text-h3);
  margin-block: var(--space-2) var(--space-3);
}

.detail-item__desc {
  color: var(--color-ink-soft);
  max-width: 44ch;
}

.detail-item__desc + .detail-item__desc {
  margin-top: var(--space-3);
}

@media (max-width: 760px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-item {
    padding-block: var(--space-5);
  }

  .detail-item:nth-child(n + 2) {
    border-top: 1px solid var(--color-border);
  }
}

/* ---------------------------------------------------------------
   How it works
--------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
}

.step__index {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-4);
}

.step__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.step__desc {
  color: var(--color-ink-soft);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-8);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* Three-step variant (How It Works). Kept as a modifier rather than
   changing .steps itself, in case a 4-up grid is reused elsewhere. */
.steps--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 760px) {
  .steps--three {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   Founder story
--------------------------------------------------------------- */

.founder {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: var(--space-9);
  align-items: center;
}

.founder__signature {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
}

.founder__signature span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

@media (max-width: 860px) {
  .founder {
    grid-template-columns: 1fr;
  }

  .founder__photo {
    max-width: 280px;
  }
}

/* Mobile only: the stacked founder photo + text (see 860px above)
   default to flush-left, which reads off-balance once there's no
   second column next to them. Center both. */
@media (max-width: 560px) {
  .founder__photo {
    margin-inline: auto;
  }

  .founder > div:not(.founder__photo) {
    text-align: center;
  }

  .founder .lead {
    margin-inline: auto;
  }
}

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

.faq-list {
  max-width: var(--container-max-narrow);
  margin-inline: auto;
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------
   Final CTA
--------------------------------------------------------------- */

.final-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-inline: auto;
}

.final-cta__headline {
  font-size: var(--text-h1);
  margin-bottom: var(--space-3);
}

.final-cta__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--color-on-dark-soft);
  margin-bottom: var(--space-8);
}

.final-cta__price {
  font-size: var(--text-small);
  color: var(--color-on-dark-muted);
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------
   Work page (dedicated /work.html) — filter bar + full grid
--------------------------------------------------------------- */

.work-page-header {
  padding-block: var(--space-8) var(--space-6);
  text-align: center;
}

.work-page-header h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-4);
}

.work-page-header .lead {
  margin-inline: auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}

.back-link:hover {
  color: var(--color-ink);
}

/* ---------------------------------------------------------------
   Client logo strip (homepage, hero -> testimonials)
   Continuous CSS-only marquee, two identical logo sets back to back
   inside .logo-strip__track; the track is exactly 2x one set's width,
   so animating to translateX(-50%) always advances by exactly one set
   with no gap or jump at the loop point, regardless of how many logos
   are in the collection. Logos render in original color — no filters.
--------------------------------------------------------------- */

.logo-strip {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--color-border);
}

.logo-strip__label {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-7);
}

.logo-strip__viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 6%,
    black 94%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 6%,
    black 94%,
    transparent
  );
}

/* --logo-gap is used for BOTH the gap between logos inside a set and
   the margin trailing each set — never a track-level `gap` between the
   two sets. A track-level gap would only count once between the two
   children, so translateX(-50%) would shift by (setWidth + gap/2)
   instead of the true repeat unit (setWidth + gap), leaving a visible
   spacing hiccup at every loop point. Giving each .logo-strip__set its
   own trailing margin of the same width makes each set's rendered
   (content + margin) width exactly one repeat unit, so -50% of the
   two-set track lands exactly on a repeat boundary — no seam. */
.logo-strip__track {
  --logo-gap: clamp(2.25rem, 1.6rem + 3vw, 5rem);
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee 34s linear infinite;
}

.logo-strip__viewport:hover .logo-strip__track {
  animation-play-state: paused;
}

.logo-strip__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--logo-gap);
  margin-inline-end: var(--logo-gap);
}

.logo-strip__logo {
  flex-shrink: 0;
  height: var(--h-sm, 40px);
  width: auto;
  object-fit: contain;
}

@media (min-width: 641px) {
  .logo-strip__logo {
    height: var(--h-lg, 60px);
  }
}

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip__track {
    animation: none;
    width: 100%;
  }

  .logo-strip__set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .logo-strip__set[aria-hidden="true"] {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Booking page (/book — book.html)
   Deliberately minimal: intro, calendar, one small reassurance
   block. No repeat of homepage sections.
--------------------------------------------------------------- */

/* .section-head's own margin-bottom (64px) is tuned for separating
   one section's intro from a different section below it. Here the
   intro and calendar share one section, so that plus the intro's
   internal spacing was leaving ~216px of dead air above the
   calendar — cut back to a tight, deliberate gap instead. */
.book-intro {
  margin-bottom: var(--space-6);
}

.book-reassurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.book-calendar {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

/* The GHL iframe has no height attribute — form_embed.js sets it via
   postMessage once the widget loads and again as the user moves
   through booking steps. This min-height is just a reasonable floor
   for the brief moment before that first resize message arrives, so
   the page doesn't flash a collapsed ~150px (the browser default
   iframe height) before the real calendar appears. Not a fixed
   height: the script can still grow it taller than this as needed. */
.book-calendar iframe {
  display: block;
  min-height: 700px;
}

@media (max-width: 600px) {
  .book-calendar iframe {
    min-height: 620px;
  }
}

.book-next {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.book-next__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.book-next__detail {
  color: var(--color-ink-soft);
}

/* ---------------------------------------------------------------
   Legal pages (/privacy, /terms)
   Deliberately plain: a legal document, not a sales page. Narrow
   container for readable line length, no marketing decoration.
--------------------------------------------------------------- */

.legal-page__meta {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.legal-page__meta .back-link {
  display: inline-block;
  margin-bottom: var(--space-5);
}

.legal-page__meta h1 {
  font-size: var(--text-h1);
}

.legal-page__updated {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.legal-content {
  color: var(--color-ink-soft);
  line-height: var(--leading-relaxed);
}

.legal-content h2 {
  font-size: var(--text-h3);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.legal-content h3 {
  font-size: 1.125rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-content p {
  margin-bottom: var(--space-5);
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 var(--space-5);
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legal-content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--navy-700);
}

/* Obvious dev-only placeholder — reuses the site's existing
   "blueprint/pending" visual language (dashed border, .tag--pending)
   instead of the fixed-aspect-ratio .media-frame, since this needs to
   hold text of unknown length, not an image. Must not be mistaken for
   real legal copy at a glance, in a screenshot, or in production. */
.legal-content__pending {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--fog-100);
  padding: var(--space-7) var(--space-6);
}

/* .tag is nowrap by default (right for short badges elsewhere), but
   this one carries a full sentence — let it wrap so it never forces
   horizontal overflow on narrow viewports. */
.legal-content__pending .tag {
  white-space: normal;
  max-width: 100%;
}

.legal-content__pending p {
  margin: 0;
  font-style: italic;
  color: var(--color-ink-muted);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__legal a {
  color: var(--color-on-dark-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__legal a:hover {
  color: var(--color-on-dark);
}

/* ---------------------------------------------------------------
   SMS opt-in (/sms-optin) — a GoHighLevel form embed, styled the
   same way /book's calendar embed is: only the surrounding page is
   ours, the widget itself is untouched third-party content.
--------------------------------------------------------------- */

.sms-optin-form {
  width: 100%;
  max-width: 640px;
  height: 964px;
  margin-inline: auto;
}

@media (max-width: 600px) {
  .sms-optin-form {
    height: 900px;
  }
}