/* ==========================================================================
   Auto Tint Quotes — Marketing Landing Page (Home/Index)
   ==========================================================================
   This stylesheet is intentionally self-contained. It does not reuse or
   depend on the authenticated app's design language (site.css, Bootstrap
   components, etc). Everything is scoped under `.atq-landing` so it can
   never leak into, or be affected by, the rest of the application.

   All sizing below uses px inside clamp() rather than rem, since the app
   shell changes the root font-size at different breakpoints for its own
   dashboard UI — decoupling this page from that keeps the typography
   scale predictable everywhere.
   ========================================================================== */

#main-content {
  padding: 0px;
  margin-left: 0px;
  width: 100%;
  max-width: none;
}

main {
    margin-top: calc(63px + env(safe-area-inset-top));
    margin-top: 0px;
}

#not-signed-in-header {
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: 18px;
  background: rgba(253, 253, 253, 0.3);
  color: #1d1d1d;
  border-bottom: 1px solid #e5e7eb;
  transition: opacity 0.9s ease;
}

#not-signed-in-header.is-scrolled {
  background:rgba(253, 253, 253, 1);
}

.atq-landing {
  --atq-accent: #7161EF;
  --atq-accent-hover: #5C4EE8;
  --atq-accent-soft: rgba(113, 97, 239, 0.08);
  --atq-accent-soft-strong: rgba(113, 97, 239, 0.14);
  --atq-accent-line: rgba(113, 97, 239, 0.22);
  --atq-bg: #FFFFFF;
  --atq-bg-alt: #F8F9FC;
  --atq-text: #111827;
  --atq-text-secondary: #6B7280;
  --atq-border: #E5E7EB;
  --atq-success: #22C55E;
  --atq-radius-sm: 14px;
  --atq-radius-md: 22px;
  --atq-radius-lg: 30px;
  --atq-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --atq-shadow-md: 0 16px 40px -20px rgba(17, 24, 39, 0.22);
  --atq-shadow-lg: 0 40px 90px -30px rgba(17, 24, 39, 0.30);
  --atq-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  display: block;
  overflow-x: clip;
  background: var(--atq-bg);
  color: var(--atq-text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Neutral resets so Bootstrap / site.css defaults never show through. */
.atq-landing * {
  box-sizing: border-box;
}

.atq-landing h1,
.atq-landing h2,
.atq-landing h3,
.atq-landing h4,
.atq-landing p,
.atq-landing ul,
.atq-landing figure {
  margin: 0;
  padding: 0;
}

.atq-landing h2 {
  text-wrap: pretty;
}

.atq-landing ul {
  list-style: none;
}

.atq-landing a {
  color: inherit;
  text-decoration: none;
}

.atq-landing img,
.atq-landing svg {
  display: block;
  max-width: 100%;
}

/* Pairs with the width/height attributes on the tags. The attributes let the
   browser reserve the right space before the file arrives; height:auto stops the
   image stretching once max-width scales it down. */
.atq-landing img {
  height: auto;
}

.atq-landing button {
  font-family: inherit;
}

.atq-landing :focus-visible {
  outline: 2px solid var(--atq-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Names a control for screen readers where the visual design carries the meaning
   through an icon or through the content the control sits on top of. */
.atq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.atq-section {
  position: relative;
  width: 100%;
  padding-block: 72px;
  background: var(--atq-bg);
}

.atq-section--alt {
  background: var(--atq-bg-alt);
}

.atq-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.atq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--atq-accent-soft);
  color: var(--atq-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.atq-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--atq-accent);
  flex-shrink: 0;
}

.atq-section-heading {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 56px;
}

.atq-section-heading h2 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--atq-text);
}

.atq-section-heading p {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
  color: var(--atq-text-secondary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.atq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s var(--atq-ease), box-shadow 0.2s var(--atq-ease), background-color 0.2s var(--atq-ease), border-color 0.2s var(--atq-ease);
  white-space: nowrap;
}

.atq-btn--primary {
  background: var(--atq-accent);
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 12px 24px -10px rgba(113, 97, 239, 0.55);
}

.atq-btn--primary:hover {
  background: var(--atq-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.06), 0 18px 32px -10px rgba(113, 97, 239, 0.6);
}

.atq-btn--primary:active {
  transform: translateY(0);
}

.atq-btn--secondary {
  background: #FFFFFF;
  color: var(--atq-text);
  border-color: var(--atq-border);
}

.atq-btn--secondary:hover {
  border-color: #C9C4F7;
  background: var(--atq-accent-soft);
  transform: translateY(-2px);
}

.atq-btn__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--atq-accent-soft-strong);
  color: var(--atq-accent);
  flex-shrink: 0;
}

.atq-btn__play svg {
  width: 9px;
  height: 9px;
  margin-left: 1px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.atq-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--atq-ease), transform 0.7s var(--atq-ease);
  transition-delay: var(--atq-reveal-delay, 0s);
}

.atq-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .atq-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.atq-hero {
  padding-top: 100px;
  overflow: clip;
}

.atq-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(113, 97, 239, 0.08) 0%, rgba(113, 97, 239, 0) 70%);
}

.atq-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}

.atq-hero__blob--one {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(113, 97, 239, 0.35), rgba(113, 97, 239, 0));
}

.atq-hero__blob--two {
  width: 320px;
  height: 320px;
  top: 220px;
  left: -140px;
  background: radial-gradient(circle, rgba(113, 97, 239, 0.22), rgba(113, 97, 239, 0));
}

.atq-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 56px;
  padding-block: 40px 32px;
}

.atq-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}

.atq-hero__headline {
  font-size: clamp(34px, 6.4vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--atq-text);
  text-wrap: pretty;
}

.atq-hero__subheadline {
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.65;
  color: var(--atq-text-secondary);
  max-width: 540px;
}

.atq-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

.atq-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 4px;
}

.atq-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--atq-text);
}

.atq-hero__trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--atq-success);
  flex-shrink: 0;
}

.atq-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 8px 40px;
  /* The phone hangs 6% past the desktop mockup's right edge and the frame's
     --atq-shadow-lg reaches about 15px beyond that again, while the container only
     has 20px of padding to give. Until the layout splits into two columns the visual
     spans the full container, so that overhang lands outside the viewport and gets
     clipped by .atq-landing's overflow. Reserving the space here keeps the mockups
     whole instead of shrinking them or dropping the overhang. Expressed as the same
     6% so it holds at every width rather than only the one it was measured at. */
  padding-right: calc(6%);
}

.atq-hero__visual-inner {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.atq-mockup-desktop {
  width: 100%;
  animation: atq-float 7s ease-in-out infinite;
}

.atq-mockup-mobile {
  position: absolute;
  width: 34%;
  right: -6%;
  bottom: -14%;
  z-index: 2;
  animation: atq-float 7s ease-in-out infinite;
  animation-delay: -3.2s;
}

@keyframes atq-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .atq-mockup-desktop,
  .atq-mockup-mobile {
    animation: none;
  }
}

/* ==========================================================================
   Placeholder / mockup frame system
   Shared visual language for all future screenshots + videos so real
   assets can be dropped in later without touching layout or aspect ratio.
   ========================================================================== */

.atq-frame {
  position: relative;
  border-radius: var(--atq-radius-md);
  border: 1px solid var(--atq-border);
  background: #FFFFFF;
  box-shadow: var(--atq-shadow-lg);
  overflow: hidden;
}

.atq-frame--chrome .atq-frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: #F3F4F6;
  border-bottom: 1px solid var(--atq-border);
}

.atq-frame__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.atq-frame__dot--red { background: #FF5F57; }
.atq-frame__dot--yellow { background: #FEBC2E; }
.atq-frame__dot--green { background: #28C840; }

.atq-frame__url {
  flex: 1;
  margin-left: 10px;
  height: 21px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid var(--atq-border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  color: var(--atq-text-secondary);
  overflow: hidden;
  white-space: nowrap;
}

.atq-frame__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(113, 97, 239, 0.05) 0px, rgba(113, 97, 239, 0.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, #F5F3FF 0%, #FBFAFF 55%, #FFFFFF 100%);
}

.atq-frame--desktop .atq-frame__body {
  aspect-ratio: 16 / 10;
}

.atq-frame--mobile .atq-frame__body {
  aspect-ratio: 9 / 18.5;
}

.atq-frame--wide .atq-frame__body {
  aspect-ratio: 16 / 9;
}

.atq-frame--video .atq-frame__body {
  aspect-ratio: 9 / 16;
}

.atq-frame__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--atq-accent-soft-strong);
  color: var(--atq-accent);
}

.atq-frame__icon svg {
  width: 20px;
  height: 20px;
}

.atq-frame__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--atq-text);
}

.atq-frame__sublabel {
  font-size: 12.5px;
  color: var(--atq-text-secondary);
}

.atq-frame__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: var(--atq-text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Phone shell — used for the hero mobile mockup */

.atq-frame--mobile {
  border-radius: 28px;
  border: 6px solid #111827;
  box-shadow: var(--atq-shadow-lg);
}

/* NOTE: the camera notch is getting in the way of the screenshot so we're hiding it for now */
/* .atq-frame--mobile::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 5px;
  border-radius: 999px;
  background: #111827;
  z-index: 2;
} */

.atq-frame--mobile .atq-frame__body {
  padding-top: 26px;
}

/* Video placeholder play affordance — a separate, combinable modifier so any
   aspect ratio (mobile / desktop / wide) can carry the play-button treatment. */

.atq-frame--has-play .atq-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: var(--atq-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--atq-accent);
  transition: transform 0.25s var(--atq-ease);
}

.atq-frame--has-play .atq-frame__play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.atq-frame--has-play:hover .atq-frame__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.atq-frame--has-play .atq-frame__icon,
.atq-frame--has-play .atq-frame__label,
.atq-frame--has-play .atq-frame__sublabel {
  margin-top: 64px;
}

.atq-frame--sm {
  max-width: 220px;
  margin-inline: auto;
}

/* Expand a framed screenshot
   Detail-heavy screenshots — the Price Book above all — cannot be read at the size
   a section gives them, so the whole screenshot opens a larger copy. The button
   covers the screenshot and the strip below it, which keeps a single control while
   putting its label clear of the image rather than on top of it. */

.atq-shot {
  position: relative;
  padding-bottom: 42px;
  margin-inline: auto;
}

.atq-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.atq-zoom__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--atq-border);
  background: #FFFFFF;
  color: var(--atq-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--atq-shadow-sm);
  transition: color 0.2s var(--atq-ease), border-color 0.2s var(--atq-ease);
}

.atq-zoom__chip svg {
  width: 14px;
  height: 14px;
}

.atq-zoom:hover .atq-zoom__chip,
.atq-zoom:focus-visible .atq-zoom__chip {
  color: var(--atq-accent);
  border-color: var(--atq-accent-line);
}

/* The button is as large as the screenshot, so a ring around it would outline the
   whole thing. The label is the part that reads as the control, so it takes the ring. */
.atq-zoom:focus-visible {
  outline: none;
}

.atq-zoom:focus-visible .atq-zoom__chip {
  outline: 2px solid var(--atq-accent);
  outline-offset: 2px;
}

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

/* ==========================================================================
   Section 2 — The Problem
   ========================================================================== */

.atq-problem__lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.75;
  color: var(--atq-text-secondary);
}

.atq-problem__lead strong {
  color: var(--atq-text);
}

/* The copy below the thread reads left aligned on a narrower measure than the
   heading. Centred, these three paragraphs stack up six lines that each start at a
   different place, which leaves the eye hunting for the beginning of every one, and
   the 720px heading width runs to about 80 characters a line before centring is even
   taken into account. Being visibly narrower than the heading is what makes the left
   alignment read as deliberate rather than as centring gone wrong. */
.atq-problem__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-inline: auto;
}

/* Generic centered lead-copy block (multiple short paragraphs), reused by Section 8 */

.atq-lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.75;
  color: var(--atq-text-secondary);
}

.atq-lead strong {
  color: var(--atq-text);
}

.atq-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  /* The line above the thread introduces it, so those two belong together: tighter
     above, and enough below to set the pair apart from the copy that follows. Both
     add to the 18px the lead's own gap already provides. */
  margin: 6px auto 30px;
}

.atq-chat__bubble {
  position: relative;
  align-self: flex-start;
  max-width: 84%;
  padding: 15px 20px;
  border-radius: 18px 18px 18px 4px;
  background: #FFFFFF;
  border: 1px solid #D0D2D6;
  box-shadow: var(--atq-shadow-sm);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--atq-text);
  text-align: left;
}

.atq-chat__bubble:nth-child(2) {
  align-self: flex-end;
  border-radius: 18px 18px 4px 18px;
  background: var(--atq-accent-soft);
  border-color: rgba(113, 97, 239, 0.35);
}

.atq-chat__bubble:nth-child(3) {
  align-self: flex-start;
}

/* A message lands rather than drifts in, so it travels a shorter distance and gets
   there quicker than the shared reveal would take it. */
.atq-chat__bubble.atq-reveal {
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.45s var(--atq-ease), transform 0.45s var(--atq-ease);
  transition-delay: var(--atq-reveal-delay, 0s);
}

.atq-chat__bubble.atq-reveal.is-visible {
  transform: none;
}

/* Overrides the shared reduced-motion rule, which this block's higher specificity
   would otherwise win against. */
@media (prefers-reduced-motion: reduce) {
  .atq-chat__bubble.atq-reveal {
    transform: none;
    transition: none;
  }
}

.atq-cards {
  display: grid;
  gap: 24px;
  margin-top: 56px;
}

/* Both card grids sit on --atq-bg-alt, and white on #F8F9FC is about a 2% difference
   in value, so a card needs its own weight to read as an object rather than an
   outlined rectangle. The hairline is an inset ring instead of a border: a grey 1px
   edge on a near-white panel reads like a table cell, while a ring plus the two
   ambient layers below it gives the card somewhere to sit. The gradient is nearly
   invisible on its own and exists only so a large white fill isn't perfectly flat. */
.atq-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
  border: 0;
  border-radius: var(--atq-radius-md);
  padding: 34px 30px;
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 39, 0.06),
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 10px 28px -18px rgba(17, 24, 39, 0.18);
  transition: transform 0.35s var(--atq-ease), box-shadow 0.35s var(--atq-ease);
  display: flex;
  flex-direction: column;
  /* Spaced by margin rather than a single gap: an equal gap either side left the
     title belonging to neither the icon nor the copy it introduces. */
  gap: 0;
}

/* Guarded so a tap on a touch device doesn't leave the card stuck in its hover
   state. 4px reads as more lift than the old 8px did, because the shadow now has a
   resting value to grow from instead of appearing out of nothing. */
@media (hover: hover) {
  .atq-card:hover {
    transform: translateY(-4px);
    box-shadow:
      inset 0 0 0 1px var(--atq-accent-line),
      0 2px 4px rgba(17, 24, 39, 0.04),
      0 22px 44px -24px rgba(17, 24, 39, 0.26);
  }
}

/* This tile repeats three times in one section and six in another, so a flat 8%
   square turns into wallpaper. The ring and the short coloured glow give it depth at
   rest, and filling on hover makes it the moment of interest in the card. */
.atq-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(113, 97, 239, 0.16), rgba(113, 97, 239, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(113, 97, 239, 0.16),
    0 6px 6px -8px rgba(113, 97, 239, 0.5);
  color: var(--atq-accent);
  transition: background 0.35s var(--atq-ease), box-shadow 0.35s var(--atq-ease), color 0.35s var(--atq-ease);
}

.atq-card__icon svg {
  width: 24px;
  height: 24px;
}

.atq-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--atq-text);
  letter-spacing: -0.01em;
}

.atq-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--atq-text-secondary);
}

/* The shadow still responds on hover, since that is feedback rather than motion. */
@media (prefers-reduced-motion: reduce) {
  .atq-card,
  .atq-card__icon {
    transition: none;
  }

  .atq-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Section 3 — How It Works

   The four steps read straight down the page. From 768px each screenshot moves
   into a column of its own that all four share, so the section stays about the
   height of one screenshot rather than four, and the workflow still reads in one
   glance because every description is on screen at once.
   ========================================================================== */

.atq-stepper {
  display: grid;
  row-gap: 18px;
}

.atq-stepper__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.atq-stepper__marker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.atq-stepper__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--atq-accent-line);
  color: var(--atq-accent);
  box-shadow: var(--atq-shadow-sm);
  flex-shrink: 0;
}

.atq-stepper__icon svg {
  width: 20px;
  height: 20px;
}

.atq-stepper__number {
  font-size: 13px;
  font-weight: 800;
  color: var(--atq-accent);
  letter-spacing: 0.04em;
}

.atq-stepper__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--atq-text);
  letter-spacing: -0.01em;
}

.atq-stepper__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--atq-text-secondary);
}

/* Only a control once the screenshots share a column and choosing a step changes
   what is on screen. Stacked, every screenshot is already visible. */
.atq-stepper__pick {
  display: none;
}

.atq-stepper__media {
  margin-bottom: 26px;
}

.atq-stepper__media:last-child {
  margin-bottom: 0;
}

/* A portrait phone would otherwise tower over the copy beside it. The cap goes on
   the wrapper rather than the frame so the button, which covers the wrapper, stops
   at the edge of the screenshot instead of reaching across the whole column. */
.atq-stepper__media .atq-shot:has(.atq-frame--mobile) {
  max-width: 260px;
}

/* Stacked, so a screenshot arrives with the step it belongs to. The screenshot
   directly follows its own step in the markup, which is what lets it borrow that
   step's reveal state instead of carrying one of its own. */
@media (max-width: 767.98px) {
  .atq-stepper__media {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--atq-ease), transform 0.7s var(--atq-ease);
  }

  .atq-stepper__item.is-visible + .atq-stepper__media {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  /* One row per step, with every screenshot spanning all of them: they stack in the
     same cell of the second column, which holds the panel at the height of the
     tallest screenshot so switching moves nothing. The row count has to match the
     number of steps for that span to resolve. */
  .atq-stepper {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 34vw, 460px);
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 10px;
    align-items: start;
  }

  .atq-stepper__item {
    grid-column: 1;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 7px;
    padding: 18px 20px 22px;
    /* Keeps the card layer below from falling behind the section's background */
    isolation: isolate;
  }

  /* Hands the icon and the step number their own places in the grid above */
  .atq-stepper__marker {
    display: contents;
  }

  /* The icon keeps the first row to itself so the step number sits level with the
     middle of it, exactly as the two read when they share a line stacked. */
  .atq-stepper__icon {
    grid-column: 1;
    grid-row: 1;
  }

  .atq-stepper__number {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .atq-stepper__title {
    grid-column: 2;
    grid-row: 2;
  }

  .atq-stepper__desc {
    grid-column: 2;
    grid-row: 3;
  }

  /* The card sits on a layer of its own so that selecting a step does not have to
     touch the item's own background or transition, which the scroll reveal owns. */
  .atq-stepper__item::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
  }

  .atq-stepper__item:hover::after {
    background: rgba(17, 24, 39, 0.03);
    opacity: 1;
  }

  .atq-stepper__item.is-active::after {
    background: var(--atq-accent-soft);
    box-shadow: inset 0 0 0 1px var(--atq-accent-line);
    opacity: 1;
  }

  .atq-stepper__item.is-active .atq-stepper__icon {
    background: var(--atq-accent);
    border-color: var(--atq-accent);
    color: #FFFFFF;
    box-shadow: 0 0 0 5px var(--atq-accent-soft), var(--atq-shadow-sm);
  }

  /* Rail from the bottom of this step's icon to the top of the next one. Top is the
     18px of padding plus the 48px icon; bottom clears the 10px row gap and the next
     step's own padding so the line arrives unbroken; left is half the icon less half
     the rail. */
  .atq-stepper__item::before {
    content: "";
    position: absolute;
    top: 66px;
    bottom: -28px;
    left: 43px;
    width: 2px;
    border-radius: 2px;
    background: var(--atq-border);
  }

  /* Steps are <article> and screenshots are <div>, so this reaches the fourth step
     rather than the fourth screenshot. */
  .atq-stepper__item:last-of-type::before {
    display: none;
  }

  .atq-stepper__item.is-done::before {
    background: var(--atq-accent-line);
  }

  .atq-stepper__pick {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: none;
    border-radius: 18px;
    background: none;
    cursor: pointer;
  }

  .atq-stepper__pick:focus-visible {
    outline: 2px solid var(--atq-accent);
    outline-offset: 2px;
  }

  /* Sticks alongside the steps, which matters most in the 768–900px range where the
     descriptions wrap enough to make the column of steps far taller than the
     screenshot beside it. */
  .atq-stepper__media {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 100px;
    align-self: start;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.985);
    /* Leaving: fade out, then drop out of the layer stack */
    transition: opacity 0.16s var(--atq-ease), transform 0.16s var(--atq-ease),
      visibility 0s linear 0.16s;
  }

  /* Arriving only once the outgoing screenshot has gone. One step shows a phone and
     the next a browser window, so a true crossfade would show both at once through
     the middle of it. */
  .atq-stepper__media.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.28s var(--atq-ease) 0.15s,
      transform 0.34s var(--atq-ease) 0.15s, visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atq-stepper__media,
  .atq-stepper__media.is-active {
    transition: none;
  }
}

.atq-callout {
  margin-top: 72px;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  padding: 48px 40px;
  border-radius: var(--atq-radius-lg);
  background: linear-gradient(160deg, var(--atq-accent-soft) 0%, rgba(113, 97, 239, 0.03) 100%);
  border: 1px solid var(--atq-accent-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.atq-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--atq-accent);
  box-shadow: var(--atq-shadow-sm);
}

.atq-callout__icon svg {
  width: 22px;
  height: 22px;
}

.atq-callout h3 {
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--atq-text);
}

.atq-callout p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--atq-text-secondary);
}

/* ==========================================================================
   Feature sections (4–6) — alternating media + copy layout
   ========================================================================== */

.atq-feature {
  display: grid;
  gap: 40px;
}

/* A section carrying two feature rows needs them read as separate thoughts rather
   than one long grid, so the second one sits well clear of the first. */
.atq-feature + .atq-feature {
  margin-top: 88px;
}

.atq-feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}

.atq-feature__copy h2 {
  font-size: clamp(28px, 4.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--atq-text);
}

.atq-feature__copy > p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--atq-text-secondary);
  max-width: 480px;
}

.atq-feature__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.atq-feature__media .atq-frame,
.atq-feature__media .atq-tabs {
  width: 100%;
  max-width: 460px;
}

.atq-feature__media--elevated {
  padding-block: 12px;
}

.atq-feature__media--elevated::before {
  content: "";
  position: absolute;
  inset: 6% 12%;
  background: radial-gradient(closest-side, rgba(113, 97, 239, 0.22), rgba(113, 97, 239, 0) 72%);
  filter: blur(36px);
  z-index: 0;
}

.atq-feature__media--elevated .atq-frame,
.atq-feature__media--elevated .atq-tabs {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.atq-feature__media--emphasis .atq-frame,
.atq-feature__media--emphasis .atq-tabs {
  max-width: 560px;
}

/* Checklist */

.atq-checklist {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
}

.atq-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--atq-text);
  line-height: 1.4;
}

.atq-checklist__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--atq-accent-soft);
  color: var(--atq-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.atq-checklist__icon svg {
  width: 12px;
  height: 12px;
}

/* Small pill badge (e.g. "Built for 24/7 quoting") */

.atq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--atq-accent-soft);
  border: 1px solid var(--atq-accent-line);
  color: var(--atq-accent);
  font-size: 14px;
  font-weight: 700;
}

.atq-badge svg {
  width: 16px;
  height: 16px;
  /* Badge copy wraps on narrow screens, and without this the icon is the thing that
     gives up its width instead of the text. */
  flex-shrink: 0;
}

/* Inline callout — a left-aligned variant of .atq-callout that fits inside a copy column */

.atq-callout--inline {
  margin: 4px 0 0;
  max-width: none;
  text-align: left;
  align-items: flex-start;
  padding: 26px 28px;
  gap: 10px;
}

.atq-callout__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.atq-callout--inline .atq-callout__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.atq-callout--inline .atq-callout__icon svg {
  width: 18px;
  height: 18px;
}

.atq-callout--inline h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--atq-text);
  letter-spacing: -0.01em;
}

.atq-callout--inline p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--atq-text-secondary);
}

/* Feature flow strip — tiny step-by-step summary beneath a media frame */

.atq-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--atq-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.atq-flow__sep {
  color: var(--atq-accent-line);
}

.atq-flow__step {
  color: var(--atq-text);
}

/* ==========================================================================
   Section 7 — Brand gallery
   ========================================================================== */

.features-title-h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--atq-text-secondary);
}

/* ==========================================================================
   Quiz appearance previewer
   Reusable component (_LandingThemePreviewPartial.cshtml + index.js). Instead of
   listing the customisation options, the visitor drives them: pick a theme and an
   accent colour and the screenshot follows.

   --atq-theming-accent carries the current colour so the frame's glow and the
   active swatch adopt it. Everything outside the previewer stays brand purple.
   ========================================================================== */

.atq-theming {
  --atq-theming-accent: var(--atq-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.atq-theming__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 700px;
}

/* Colour spilling out from behind the frame, so a new accent registers as a change
   to the whole composition rather than only to the picture. */
.atq-theming__stage::before {
  content: "";
  position: absolute;
  inset: 10% 4% 4%;
  z-index: 0;
  background: radial-gradient(closest-side, var(--atq-theming-accent), transparent 76%);
  opacity: 0.32;
  filter: blur(52px);
  pointer-events: none;
  transition: background 0.4s var(--atq-ease);
}

.atq-theming__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none !important;
  box-shadow:
    0 40px 90px -34px color-mix(in srgb, var(--atq-theming-accent) 55%, transparent),
    0 10px 30px -18px rgba(17, 24, 39, 0.3);
  transition: box-shadow 0.4s var(--atq-ease);
}

.atq-theming__viewport {
  position: relative;
  aspect-ratio: var(--atq-theming-aspect, 16 / 10);
  overflow: hidden;
  background: linear-gradient(160deg, #F5F3FF 0%, #FBFAFF 55%, #FFFFFF 100%);
}

/* Two stacked layers, so switching crossfades instead of blinking through the
   background. Only the incoming layer animates: it fades in on top while the one
   underneath holds full opacity, then drops out once it is completely covered.
   Fading both at once would leave two half-transparent screenshots mid-transition,
   and the frame's background would wash through the middle of every change. */
.atq-theming__viewport .atq-theming__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0s var(--atq-ease) 0.4s;
}

.atq-theming__viewport .atq-theming__shot.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s var(--atq-ease);
}

/* Sweeps over the outgoing screenshot while the next one downloads */
.atq-theming__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: atq-shimmer 1.5s linear infinite;
  transition: opacity 0.25s var(--atq-ease);
}

.atq-theming.is-loading .atq-theming__loader {
  opacity: 1;
}

/* Rides the bottom edge of the frame. The screenshots keep roughly 7% of empty
   background below the quiz card, so the panel never covers any of the interface. */
.atq-theming__panel {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--atq-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 22px 44px -20px rgba(17, 24, 39, 0.4);
}

.atq-theming__themes {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.05);
}

.atq-theming__theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: none;
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--atq-text-secondary);
  cursor: pointer;
  transition: background-color 0.2s var(--atq-ease), color 0.2s var(--atq-ease),
    box-shadow 0.2s var(--atq-ease);
}

.atq-theming__theme svg {
  width: 14px;
  height: 14px;
}

.atq-theming__theme:hover {
  color: var(--atq-text);
}

.atq-theming__theme.is-active {
  background: #FFFFFF;
  color: var(--atq-text);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.2);
}

.atq-theming__panel-rule {
  flex-shrink: 0;
  width: 1px;
  height: 24px;
  background: var(--atq-border);
}

.atq-theming__swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}

.atq-theming__swatch {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: box-shadow 0.2s var(--atq-ease);
}

.atq-theming__swatch-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--atq-swatch);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.14);
  transition: transform 0.2s var(--atq-ease), background-color 0.4s var(--atq-ease);
}

.atq-theming__swatch:hover .atq-theming__swatch-dot {
  transform: scale(1.16);
}

.atq-theming__swatch.is-active {
  box-shadow: 0 0 0 2px var(--atq-swatch);
}

.atq-theming__swatch.is-active .atq-theming__swatch-dot {
  transform: scale(1.06);
}

.atq-theming__theme:focus-visible,
.atq-theming__swatch:focus-visible {
  outline: 2px solid var(--atq-text);
  outline-offset: 2px;
}

.atq-theming__caption {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--atq-text-secondary);
}

.atq-theming__caption-color {
  color: var(--atq-text);
}

.atq-theming__caption-sep {
  color: var(--atq-border);
}

/* Narrow screens cannot fit the toggle and ten swatches on one line, and a wrapped
   pill looks broken, so the panel becomes a card that sits below the frame. */
@media (max-width: 639px) {
  .atq-theming__panel {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
  }

  .atq-theming__panel-rule {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atq-theming__stage::before,
  .atq-theming__frame,
  .atq-theming__swatch-dot,
  .atq-theming__viewport .atq-theming__shot,
  .atq-theming__viewport .atq-theming__shot.is-active {
    transition: none;
  }

  .atq-theming__loader {
    animation: none;
  }
}

/* ==========================================================================
   Section — One link, everywhere customers find you

   Deliberately not built on .atq-card. The eight channels share one tinted surface
   divided by hairlines, so the section reads as a single list of places rather than
   eight competing objects, and it stays visually distinct from the two card grids.
   The panel is tinted on a white section, inverting the white-card-on-grey
   relationship used elsewhere, which is also what separates this section from
   #branding above it since both share the same white background.
   ========================================================================== */

#quote-link .atq-section-heading {
  gap: 10px;
  margin-bottom: 20px;
}

.atq-linkchip {
  display: flex;
  align-items: center;
  gap: 12px;
  /* max-content with a 100% ceiling keeps the chip only as wide as the URL while
     still allowing it to shrink and wrap on small screens. */
  width: max-content;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 14px 22px;
  /* Roughly half the chip's single-line height, so it reads as a pill on one line
     and as a rounded panel once the URL wraps, without needing a breakpoint. */
  border-radius: 24px;
  background: #FFFFFF;
  /* The accent-tinted outer layer does the work a blurred glow element would, and
     marks the chip as the section's focal point. */
  box-shadow:
    inset 0 0 0 1px var(--atq-accent-line),
    0 2px 6px rgba(17, 24, 39, 0.05),
    0 18px 40px -24px rgba(113, 97, 239, 0.55);
}

.atq-linkchip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--atq-accent-soft);
  color: var(--atq-accent);
  flex-shrink: 0;
}

.atq-linkchip__icon svg {
  width: 17px;
  height: 17px;
}

/* A wrapping flex row rather than plain inline text, so the fixed part of the URL and
   the slug are separate items. row-gap then applies only once the slug actually drops
   to a second line, at whatever width that happens to be — raising line-height instead
   would pad the single-line chip everywhere, including desktop. */
.atq-linkchip__url {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 5px;
  font-size: clamp(13px, 3.1vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--atq-text-secondary);
}

/* The part the shop owner chooses, so it carries the accent while the fixed part of
   the URL stays secondary. Held on one line so the pill is never split in half. */
.atq-linkchip__slug {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--atq-accent-soft-strong);
  color: var(--atq-accent);
  white-space: nowrap;
}

.atq-channels {
  display: grid;
  border-radius: var(--atq-radius-lg);
  /* Clips the square row dividers to the panel's rounded corners. */
  overflow: hidden;
}

.atq-channel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  padding-left: 0px;
  border-top: 1px solid var(--atq-border);
}

.atq-channel:first-child {
  border-top: 0;
}

/* White on the tinted panel, which is the reverse of the tinted tiles used on white
   elsewhere and keeps the marks legible against the surface behind them. */
.atq-channel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow:
    inset 0 0 0 1px var(--atq-border),
    0 1px 2px rgba(17, 24, 39, 0.04);
  color: var(--atq-accent);
  flex-shrink: 0;
}

.atq-channel__icon svg {
  width: 19px;
  height: 19px;
}

.atq-channel__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atq-channel h3 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--atq-text);
}

.atq-channel p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--atq-text-secondary);
}

.atq-channels__note {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* This badge sits centred under the panel rather than left-aligned in a copy column,
   so its text needs to stay centred once it wraps on narrow screens. */
.atq-channels__note .atq-badge {
  text-align: center;
}

@media (min-width: 768px) {
  .atq-channels {
    grid-template-columns: 1fr 1fr;
  }

  .atq-channel {
    padding-left: 26px;
  }

  /* Rows flow left to right, so the second item starts the right-hand column and
     needs no divider above it either. */
  .atq-channel:nth-child(2) {
    border-top: 0;
  }

  .atq-channel:nth-child(even) {
    border-left: 1px solid var(--atq-border);
  }
}

/* ==========================================================================
   Closing CTA banner
   ========================================================================== */

.atq-cta-banner {
  position: relative;
  overflow: clip;
  padding-block: 88px;
  background: linear-gradient(165deg, var(--atq-bg-alt) 0%, #F5F3FF 45%, #EFEBFC 100%);
}

.atq-cta-banner__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.atq-cta-banner__glow span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.atq-cta-banner__glow span:first-child {
  width: 460px;
  height: 460px;
  top: -220px;
  left: 8%;
  background: radial-gradient(circle, rgba(113, 97, 239, 0.30), rgba(113, 97, 239, 0));
}

.atq-cta-banner__glow span:last-child {
  width: 420px;
  height: 420px;
  bottom: -240px;
  right: 6%;
  background: radial-gradient(circle, rgba(113, 97, 239, 0.24), rgba(113, 97, 239, 0));
}

.atq-cta-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.atq-cta-banner h2 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--atq-text);
}

.atq-cta-banner p {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
  color: var(--atq-text-secondary);
}

.atq-cta-banner__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: -4px;
}

.atq-cta-banner__trust li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--atq-text-secondary);
}

.atq-cta-banner__trust svg {
  width: 15px;
  height: 15px;
  color: var(--atq-success);
  flex-shrink: 0;
}

/* ==========================================================================
   Buttons — text variant (e.g. "Try the Demo" next to a primary CTA)
   ========================================================================== */

.atq-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--atq-accent);
  padding: 15px 6px;
  box-shadow: none;
}

.atq-btn--text:hover {
  background: transparent;
  color: var(--atq-accent-hover);
  transform: none;
}

.atq-btn--text .atq-btn__play {
  background: var(--atq-accent-soft-strong);
}

/* Checklist grid variant — lets a checklist wrap into 2 columns at larger sizes */

.atq-checklist--grid {
  display: grid;
  gap: 13px 28px;
}

/* ==========================================================================
   Section 9 — Pricing
   ========================================================================== */

.atq-pricing-card {
  position: relative;
  max-width: 580px;
  margin-inline: auto;
  border-radius: var(--atq-radius-lg);
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(150deg, rgba(113, 97, 239, 0.55), rgba(113, 97, 239, 0.08) 55%, rgba(113, 97, 239, 0.4)) border-box;
  box-shadow: var(--atq-shadow-lg);
}

.atq-pricing-card::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(113, 97, 239, 0.16), rgba(113, 97, 239, 0) 72%);
  filter: blur(40px);
}

.atq-pricing__price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.atq-pricing__price .atq-pricing__currency {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: var(--atq-text);
  padding-top: 10px;
}

.atq-pricing__price .atq-pricing__amount {
  font-size: clamp(56px, 10vw, 80px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--atq-text);
}

.atq-pricing__price .atq-pricing__period {
  font-size: 17px;
  font-weight: 600;
  color: var(--atq-text-secondary);
  padding-top: 18px;
  align-self: flex-end;
}

.atq-pricing__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  font-size: 14.5px;
  color: var(--atq-text-secondary);
  margin-top: -12px;
}

.atq-pricing__terms li:not(:last-child)::after {
  content: "\00b7";
  margin-left: 10px;
  color: var(--atq-border);
}

.atq-pricing__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.atq-pricing__ctas .atq-btn--primary {
  width: 100%;
}

.atq-pricing__features {
  width: 100%;
  padding-top: 25px !important;
  border-top: 1px solid #c9cbce;
  text-align: left;
}

.atq-pricing__footnote {
  font-size: 13px;
  color: var(--atq-text-secondary);
  padding-top: 4px;
}

/* ==========================================================================
   Section 10 — FAQ accordion
   ========================================================================== */

.atq-faq-wrap {
  max-width: 760px;
  margin-inline: auto;
}

.atq-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.atq-faq__item {
  border: 1px solid var(--atq-border);
  border-radius: var(--atq-radius-md);
  background: #FFFFFF;
  overflow: hidden;
  transition: border-color 0.25s var(--atq-ease), box-shadow 0.25s var(--atq-ease);
}

.atq-faq__item.is-open {
  border-color: var(--atq-accent-line);
  box-shadow: var(--atq-shadow-sm);
}

.atq-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: none;
  border: none;
  text-align: left;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--atq-text);
  cursor: pointer;
}

.atq-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--atq-accent-soft);
  color: var(--atq-accent);
  flex-shrink: 0;
}

.atq-faq__icon svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--atq-ease);
}

.atq-faq__item.is-open .atq-faq__icon svg {
  transform: rotate(180deg);
}

.atq-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--atq-ease);
}

.atq-faq__item.is-open .atq-faq__answer-wrap {
  grid-template-rows: 1fr;
}

.atq-faq__answer {
  min-height: 0;
  overflow: hidden;
}

.atq-faq__answer p {
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--atq-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .atq-faq__answer-wrap {
    transition: none;
  }
}

/* ==========================================================================
   Section 11 — Final CTA, divider, footer
   ========================================================================== */

.atq-final-cta {
  position: relative;
  overflow: clip;
  max-width: 900px;
  margin-inline: auto;
  padding: 56px 32px;
  border-radius: var(--atq-radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: linear-gradient(160deg, #F5F3FF 0%, #FBFAFF 55%, #FFFFFF 100%);
  border: 1px solid var(--atq-accent-line);
}

.atq-final-cta h2 {
  font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--atq-text);
  max-width: 620px;
}

.atq-final-cta p {
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.7;
  color: var(--atq-text-secondary);
  max-width: 560px;
}

.atq-final-cta__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.atq-final-cta__ctas .atq-btn--primary {
  width: 100%;
}

.atq-divider-row {
  padding-block: 8px 0;
}

.atq-divider {
  display: block;
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--atq-border) 15%, var(--atq-border) 85%, transparent);
}

.atq-footer {
  padding-block: 48px 36px;
  background: var(--atq-bg-alt);
  border-top: 1px solid var(--atq-border);
}

.atq-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.atq-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.atq-footer__logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--atq-text);
}

.atq-footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--atq-text-secondary);
  max-width: 320px;
}

.atq-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
}

.atq-footer__nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--atq-text-secondary);
  transition: color 0.2s var(--atq-ease);
}

.atq-footer__nav a:hover {
  color: var(--atq-accent);
}

.atq-footer__copyright {
  font-size: 13px;
  color: var(--atq-text-secondary);
}

/* ==========================================================================
   Tabbed screenshot viewer
   Reusable component (_LandingTabbedMediaPartial.cshtml + index.js). Shows one
   screenshot from a related set at a time, so a group of screenshots stays as
   tall as its tallest member instead of stacking into a column that dwarfs the
   copy beside it.

   --atq-tabs-aspect is the tallest screenshot's ratio, worked out server-side.
   Holding that height on every tab means switching tabs cannot resize the
   section and shove the rest of the page around. Screenshots shorter than that
   sit centred on the surface, reading as a crop resting on a card.
   ========================================================================== */

.atq-tabs {
  position: relative;
  z-index: 1;
  width: 100%;
  /* border: 1px solid var(--atq-border); */
  /* border-radius: var(--atq-radius-md); */
  /* background: #FFFFFF; */
  /* box-shadow: var(--atq-shadow-lg); */
  overflow: hidden;
}

/* Doubles as the frame's header, which is why there is no browser chrome bar */
.atq-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  padding-inline: 8px;
  border-bottom: 1px solid var(--atq-border);
}

.atq-tabs__tab {
  position: relative;
  padding: 14px 12px;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--atq-text-secondary);
  cursor: pointer;
  transition: color 0.2s var(--atq-ease);
}

.atq-tabs__tab::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--atq-accent);
  transform: scaleX(0);
  transition: transform 0.24s var(--atq-ease);
}

.atq-tabs__tab:hover {
  color: var(--atq-text);
}

.atq-tabs__tab.is-active {
  color: var(--atq-accent);
}

.atq-tabs__tab.is-active::after {
  transform: scaleX(1);
}

.atq-tabs__tab:focus-visible {
  outline: 2px solid var(--atq-accent);
  outline-offset: -3px;
  border-radius: 8px;
}

.atq-tabs__stage {
  position: relative;
  aspect-ratio: var(--atq-tabs-aspect, 16 / 10);
  /* background: var(--atq-bg-alt); */
}

.atq-tabs__panel {
  position: absolute;
  inset: 0;
  padding-top: 10px;
  /* display: grid;
  place-items: center; */
  /* padding: 14px; */
}

.atq-tabs__panel[hidden] {
  display: none;
}

.atq-tabs__panel:focus-visible {
  outline: 2px solid var(--atq-accent);
  outline-offset: -6px;
  border-radius: 12px;
}

/* Fit inside the stage in both directions so a wide screenshot keeps its shape
   rather than being stretched to fill the tallest screenshot's height. */
.atq-tabs__panel img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--atq-border);
  border-radius: 15px;
  /* box-shadow: 0 12px 28px -14px rgba(17, 24, 39, 0.22); */
}

@media (prefers-reduced-motion: reduce) {
  .atq-tabs__tab,
  .atq-tabs__tab::after {
    transition: none;
  }
}

/* ==========================================================================
   Demo video player
   Reusable component (_LandingVideoPartial.cshtml + index.js). The player draws
   its own frame, and --atq-video-aspect carries the source's own ratio so the
   space is reserved before the file loads and nothing is ever cropped.

   The control bar overlays the video wherever it can reveal itself on hover.
   Touch devices have no hover, so index.js lifts the bar out of the frame and
   marks the player .is-stacked, which drops the bar below the video rather than
   leaving it parked over the bottom of the footage.
   ========================================================================== */

.atq-video-player {
  position: relative;
  z-index: 1;
  width: 100%;
  container-type: inline-size;
}

.atq-video {
  position: relative;
  width: 100%;
  aspect-ratio: var(--atq-video-aspect, 9 / 16);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(113, 97, 239, 0.05) 0px, rgba(113, 97, 239, 0.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, #F5F3FF 0%, #FBFAFF 55%, #FFFFFF 100%);
}

.atq-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shimmer while the source is still downloading or buffering */

.atq-video__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: atq-shimmer 1.5s linear infinite;
  transition: opacity 0.3s var(--atq-ease);
}

.atq-video-player:not(.is-ready) .atq-video__loader,
.atq-video-player.is-loading .atq-video__loader {
  opacity: 1;
}

/* Shared by the video player and the appearance previewer */
@keyframes atq-shimmer {
  from { background-position: 160% 0; }
  to { background-position: -60% 0; }
}

/* The whole surface toggles playback, so the tap target is as big as the video */

.atq-video__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.atq-video__toggle-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--atq-accent);
  box-shadow: 0 10px 30px -10px rgba(17, 24, 39, 0.55);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.25s var(--atq-ease), transform 0.25s var(--atq-ease);
}

.atq-video__toggle-icon svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.atq-video-player.is-paused .atq-video__toggle-icon {
  opacity: 1;
  transform: none;
}

.atq-video-player.is-paused .atq-video__toggle:hover .atq-video__toggle-icon {
  transform: scale(1.07);
}

/* Dragging the scrubber pauses playback, but the big play badge would only get
   in the way of the frame being scrubbed. */
.atq-video-player.is-seeking .atq-video__toggle-icon {
  opacity: 0;
}

.atq-video__toggle:focus-visible {
  outline: 2px solid var(--atq-accent);
  outline-offset: -4px;
}

/* Control bar */

.atq-video__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(11, 13, 28, 0.8), rgba(11, 13, 28, 0.34) 55%, rgba(11, 13, 28, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--atq-ease), transform 0.25s var(--atq-ease);
}

.atq-video-player:hover .atq-video__controls,
.atq-video-player:focus-within .atq-video__controls,
.atq-video-player.is-paused .atq-video__controls,
.atq-video-player.is-seeking .atq-video__controls {
  opacity: 1;
  transform: none;
}

/* Fallback for touch devices if the bar was never lifted out of the frame:
   without hover there would otherwise be no way to reveal it. */
@media (hover: none) {
  .atq-video__controls {
    opacity: 1;
    transform: none;
  }
}

.atq-video__btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s var(--atq-ease);
}

.atq-video__btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.atq-video__btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.atq-video__btn svg {
  width: 13px;
  height: 13px;
}

.atq-video__play-btn .atq-video__icon-pause,
.atq-video-player:not(.is-paused) .atq-video__play-btn .atq-video__icon-play {
  display: none;
}

.atq-video-player:not(.is-paused) .atq-video__play-btn .atq-video__icon-pause {
  display: block;
}

/* Scrubber */

.atq-video__progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 36px;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.atq-video__progress:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: 4px;
}

.atq-video__track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: height 0.2s var(--atq-ease);
}

.atq-video__progress:hover .atq-video__track,
.atq-video-player.is-seeking .atq-video__track {
  height: 6px;
}

.atq-video__buffered,
.atq-video__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
}

.atq-video__buffered {
  background: rgba(255, 255, 255, 0.34);
}

.atq-video__fill {
  background: var(--atq-accent);
}

.atq-video__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 5px rgba(17, 24, 39, 0.5);
  transform: translateY(-50%) scale(0);
  transition: transform 0.2s var(--atq-ease);
  pointer-events: none;
}

.atq-video__progress:hover .atq-video__knob,
.atq-video__progress:focus-visible .atq-video__knob,
.atq-video-player.is-seeking .atq-video__knob {
  transform: translateY(-50%) scale(1);
}

.atq-video__time {
  flex-shrink: 0;
  display: flex;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.atq-video__time-sep {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Stacked control bar — touch devices only, applied by index.js
   The bar has been moved out of the frame, so it now sits on the section
   background and needs a light treatment instead of the on-video scrim.
   -------------------------------------------------------------------------- */

.atq-video-player.is-stacked .atq-video__controls {
  position: static;
  margin: 10px 5px 0px;
  padding: 0px;
  border-radius: 20px;
  gap: 12px;
  background: #fff;
  opacity: 1;
  transform: none;
}

.atq-video-player.is-stacked .atq-video__btn {
  /* background: rgba(17, 24, 39, 0.06); */
  color: var(--atq-text);
  border-radius: 20px;
}

.atq-video-player.is-stacked .atq-video__btn:hover,
.atq-video-player.is-stacked .atq-video__btn:active {
  background: var(--atq-accent-soft-strong);
  color: var(--atq-accent);
}

.atq-video-player.is-stacked .atq-video__btn:focus-visible,
.atq-video-player.is-stacked .atq-video__progress:focus-visible {
  outline-color: var(--atq-accent);
}

/* A taller hit area, since a finger is far less precise than a cursor */
.atq-video-player.is-stacked .atq-video__progress {
  height: 28px;
}

.atq-video-player.is-stacked .atq-video__track {
  height: 5px;
  background: var(--atq-border);
}

.atq-video-player.is-stacked .atq-video__buffered {
  background: rgba(17, 24, 39, 0.14);
}

/* No hover to reveal it, so the drag handle is always shown */
.atq-video-player.is-stacked .atq-video__knob {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--atq-accent);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.25);
  transform: translateY(-50%) scale(1);
}

.atq-video-player.is-stacked .atq-video__time {
  color: var(--atq-text-secondary);
}

/* Inside the expanded overlay the bar sits on a dark backdrop instead */

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__controls {
  padding-inline: 4px;
  background: none;
}

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__btn {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__btn:hover,
.atq-video-lightbox .atq-video-player.is-stacked .atq-video__btn:active {
  background: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__track {
  background: rgba(255, 255, 255, 0.28);
}

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__buffered {
  background: rgba(255, 255, 255, 0.34);
}

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__knob {
  background: #FFFFFF;
}

.atq-video-lightbox .atq-video-player.is-stacked .atq-video__time {
  color: rgba(255, 255, 255, 0.92);
}

/* Narrow players drop the clock and tighten the bar so the controls never crowd
   each other. */

@container (max-width: 260px) {
  .atq-video__controls {
    gap: 7px;
    padding: 22px 8px 8px;
  }

  .atq-video-player.is-stacked .atq-video__controls {
    gap: 9px;
    padding: 10px 0 0;
  }

  .atq-video__time {
    display: none;
  }

  .atq-video__btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .atq-video__btn svg {
    width: 11px;
    height: 11px;
  }

  .atq-video__toggle-icon {
    width: 44px;
    height: 44px;
  }

  .atq-video__toggle-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Native fullscreen: fill the screen and letterbox rather than crop. The frame
   loses its shell, and a stacked bar becomes the bottom row of the layout. */

.atq-video-player:fullscreen {
  display: flex;
  flex-direction: column;
  background: #000000;
}

.atq-video-player:fullscreen .atq-frame,
.atq-video-player:fullscreen .atq-video-lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #000000;
}

.atq-video-player:fullscreen .atq-video {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  background: #000000;
}

.atq-video-player:fullscreen .atq-video__el {
  object-fit: contain;
}

/* Fullscreen hands the whole screen to the video, so a stacked bar goes back
   over the footage rather than eating a strip along the bottom. */
.atq-video-player:fullscreen.is-stacked .atq-video__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 30px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(11, 13, 28, 0.8), rgba(11, 13, 28, 0.34) 55%, rgba(11, 13, 28, 0));
  margin: 0;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .atq-video__loader {
    animation: none;
  }

  .atq-video__controls,
  .atq-video__toggle-icon,
  .atq-video__track,
  .atq-video__knob {
    transition: none;
  }
}

/* Players are capped per context so they match the still screenshots sitting in
   the same slots, and a portrait video does not tower over the copy beside it.
   The cap goes on the player rather than the frame so a stacked control bar
   lines up with the video above it. */

.atq-feature__media .atq-video-player {
  max-width: 460px;
  margin-inline: auto;
}

.atq-feature__media .atq-video-player:has(.atq-frame--mobile) {
  max-width: 300px;
}

/* ==========================================================================
   Expanded video overlay
   ========================================================================== */

.atq-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 20px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--atq-ease);
}

.atq-video-lightbox[hidden] {
  display: none;
}

.atq-video-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.atq-video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 24, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.atq-video-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.3s var(--atq-ease);
}

.atq-video-lightbox.is-open .atq-video-lightbox__dialog {
  transform: none;
}

/* The width is calculated rather than measured: shrink-wrapping around the video
   meant the size depended on the video's own intrinsic size travelling back up
   through the stage and the player, which collapses to zero the moment anything
   in that chain declines to report a width. Instead --atq-video-ratio (width
   divided by height, set by index.js as the overlay opens) turns the height
   available on screen into a definite width. */
.atq-video-lightbox__player {
  width: min(90vw, 1080px, calc((100vh - 150px) * var(--atq-video-ratio, 0.5625)));
  width: min(90vw, 1080px, calc((100dvh - 150px) * var(--atq-video-ratio, 0.5625)));
}

/* The compact bar isn't wanted in the expanded view, and inline-size containment
   would stop the player reporting a width at all. */
.atq-video-lightbox .atq-video-player {
  width: 100%;
  container-type: normal;
}

/* Pinned to the corner of the screen. The overlay itself is fixed and covers the
   viewport, so absolute positioning against it keeps the button still while the
   dialog animates in and while the video settles into its final size. */
.atq-video-lightbox__close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(11, 13, 28, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s var(--atq-ease), transform 0.2s var(--atq-ease);
}

.atq-video-lightbox__close:hover {
  background: rgba(11, 13, 28, 0.85);
  transform: scale(1.06);
}

.atq-video-lightbox__close svg {
  width: 18px;
  height: 18px;
}

.atq-video-lightbox__stage {
  position: relative;
  border-radius: var(--atq-radius-md);
  overflow: hidden;
  background: #000000;
  box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.75);
}

/* The stage fills the width worked out above, and the aspect ratio gives it its
   height, so the video occupies real space before a single frame has loaded. */
.atq-video-lightbox__stage .atq-video {
  width: 100%;
  height: auto;
  max-width: none;
  background: #000000;
}

.atq-video-lightbox__stage .atq-video__el {
  object-fit: contain;
}

/* A stacked control bar needs its own room below the video */
@media (hover: none) {
  .atq-video-lightbox__player {
    width: min(90vw, 1080px, calc((100vh - 210px) * var(--atq-video-ratio, 0.5625)));
    width: min(90vw, 1080px, calc((100dvh - 210px) * var(--atq-video-ratio, 0.5625)));
  }
}

/* Expanded screenshot. The width and height attributes index.js copies onto the tag
   give it a shape before the file lands, so these two bounds settle the final size
   immediately and the overlay does not resize under the visitor. */
.atq-video-lightbox__shot {
  position: relative;
  border-radius: var(--atq-radius-md);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.75);
  line-height: 0;
}

.atq-video-lightbox__shot[hidden] {
  display: none;
}

.atq-video-lightbox__shot img {
  width: auto;
  max-width: min(90vw, 1100px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}

/* Only shows through while the larger file is still on its way */
.atq-video-lightbox__shot.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #F1F2F6 30%, #FAFAFD 50%, #F1F2F6 70%);
  background-size: 220% 100%;
  animation: atq-shimmer 1.4s linear infinite;
}

.atq-video-lightbox__caption {
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.65;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

/* keep breakpoints at the bottom of the file */

/* ==========================================================================
   Responsive — Tablet (640px+)
   ========================================================================== */

@media (max-width: 380px) {
  .atq-theming__swatch {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 421px) {

  .atq-tabs__tab {
    padding: 14px 10px;
    padding-bottom: 5px;
    font-size: 13px;
  }

  .atq-tabs__bar {
    padding-inline: 0px;
  }

}

@media (max-width: 522px) {

  #no-website-badge svg {
    margin-right: 5px;
    flex-shrink: 0;
  }

}

@media (max-width: 550px) {
  .atq-problem__body {
    text-align: left;
  }
}

@media (min-width: 640px) {
  .atq-container {
    padding-inline: 32px;
  }

  .atq-section {
    padding-block: 96px;
  }

  .atq-hero__ctas {
    flex-wrap: nowrap;
  }

  .atq-btn {
    width: auto;
  }

  .atq-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .atq-cards--triad .atq-card:last-child {
    grid-column: span 2;
  }

  .atq-cta-banner__inner .atq-btn {
    width: auto;
  }

  .atq-checklist--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .atq-pricing__ctas {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .atq-pricing__ctas .atq-btn--primary {
    width: auto;
  }

  .atq-final-cta__ctas {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .atq-final-cta__ctas .atq-btn--primary {
    width: auto;
  }

  .atq-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }

  .atq-footer__brand {
    align-items: flex-start;
  }

  .atq-footer__nav {
    flex: 1;
    justify-content: center;
    padding-top: 4px;
  }

  .atq-footer__copyright {
    padding-top: 4px;
    white-space: nowrap;
  }
}

@media (max-width: 479.98px) {
  .atq-hero__ctas .atq-btn,
  .atq-cta-banner__inner .atq-btn,
  .atq-pricing__ctas .atq-btn,
  .atq-final-cta__ctas .atq-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Responsive — Desktop (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
  .atq-section {
    padding-block: 128px;
  }

  .atq-hero {
    padding-top: 128px;
  }

  .atq-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
  }

  .atq-hero__visual {
    padding-block: 0;
    /* The visual is one column of two now, so the overhang has the grid gap and the
       page gutter to hang into and the mockup can use its full column width again. */
    padding-right: 0;
  }

  .atq-hero__visual-inner {
    max-width: 480px;
  }

  .atq-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .atq-cards--triad .atq-card:last-child {
    grid-column: auto;
  }

  .atq-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
  }

  .atq-feature__copy {
    order: 2;
  }

  .atq-feature__media {
    order: 1;
  }

  .atq-feature--reverse .atq-feature__copy {
    order: 1;
  }

  .atq-feature--reverse .atq-feature__media {
    order: 2;
  }

  #branding .atq-feature__copy {
    margin-bottom: 42px;
  }

}