/* ========================================================================== 
   GLOBAL / RESET
   Shared rules only. Section-specific styles must stay below in their block.
   ========================================================================== */
/*
   STYLESHEET MAP
   1. Shared defaults and pricing / FAQ / footer foundations.
   2. Named page sections, each introduced by an all-caps comment.
   3. Responsive overrides immediately follow their owning section whenever
      possible; cross-section spacing is collected under LANDING SECTION RHYTHM.
   Do not add anonymous overrides at the end of this file.
*/
* { box-sizing: border-box; }
html, body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: #1b1b1b;
}
body { font-family: Inter, sans-serif; color: white; }
main { background: #faf6f2; }
/* The design uses Semibold for emphasis; never allow browser-default bold. */
body strong { font-weight:600; }

/* ========================================================================
   SITE HEADER — Figma 2038:129
   ======================================================================== */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 0 48px;
  color: #1b1b1b;
  background: #fff;
}
.site-header__logo { display:inline-flex; align-items:center; flex:0 0 auto; gap:4px; color:#1b1b1b; font-size:18px; line-height:24px; text-decoration:none; }
.site-header__logo img { display:block; width:22px; height:24px; object-fit:cover; object-position:left; filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(1187%) hue-rotate(181deg) brightness(91%) contrast(91%); }
.site-header__nav { display:flex; align-items:center; gap:32px; margin:0 auto; white-space:nowrap; }
.site-header a { transition:opacity .2s ease; }
.site-header a:hover { opacity:.7; }
.site-header__nav a, .site-header__menu a { color:#1b1b1b; font-size:14px; font-weight:400; line-height:1.3; text-decoration:none; }
.site-header__actions { display:flex; align-items:center; flex:0 0 auto; gap:10px; }
.site-header__login, .site-header__cta { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 32px; border-radius:999px; font-size:14px; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; }
.site-header__login { color:#1b1b1b; background:#f3f3f3; }
.site-header__cta { color:#fff; background:#278ee5; }
.site-header__menu-toggle, .site-header__menu { display:none; }

@media (max-width:1116px) and (min-width:851px) {
  .site-header { padding:0 32px; }
  .site-header__nav { gap:10px; }
  .site-header__actions { margin-left:24px; }
  .site-header__login, .site-header__cta { padding-right:24px; padding-left:24px; }
}
@media (max-width:850px) {
  .site-header { padding:0 32px; }
  .site-header__nav { display:none; }
  .site-header__actions { margin-left:auto; }
  .site-header__menu-toggle { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:50%; background:#1b1b1b; cursor:pointer; gap:4px; }
  .site-header__menu-toggle span { display:block; width:15px; height:1.5px; background:#fff; transition:transform .2s ease, opacity .2s ease; }
  .site-header.menu-open .site-header__menu-toggle span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
  .site-header.menu-open .site-header__menu-toggle span:nth-child(2) { opacity:0; }
  .site-header.menu-open .site-header__menu-toggle span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
  .site-header__menu { position:absolute; top:64px; right:32px; left:32px; padding:20px 24px 24px; background:#fff; box-shadow:0 12px 24px rgba(27,27,27,.12); }
  .site-header.menu-open .site-header__menu { display:block; }
  .site-header__menu nav { display:grid; gap:18px; }
}
@media (max-width:480px) {
  .site-header { padding:0 16px; }
  .site-header__logo { font-size:17px; }
  .site-header__login, .site-header__cta { height:36px; padding:0 14px; font-size:12px; }
  .site-header__actions { gap:6px; }
  .site-header__menu-toggle { width:36px; height:36px; }
  .site-header__menu { top:64px; right:16px; left:16px; }
}
@media (max-width:360px) {
  .site-header { padding:0 10px; }
  .site-header__logo { gap:3px; font-size:16px; }
  .site-header__logo img { width:20px; height:22px; }
  .site-header__actions { gap:4px; }
  .site-header__login, .site-header__cta { height:34px; padding:0 10px; font-size:11px; }
  .site-header__menu-toggle { width:32px; height:32px; }
  .site-header__menu { right:10px; left:10px; }
  .hero .hero__title picture { right:0; left:auto; }
}

/* ========================================================================== 
   HERO — Figma 1890:554
   Asset variants intentionally match the design's desktop, tablet, compact,
   and mobile compositions. Do not substitute one variant for another.
   ========================================================================== */
.hero {
  position: relative;
  height: 647px;
  overflow: hidden;
  color: #fff;
  background: #1b81d4;
}

.hero__inner {
  position: relative;
  width: min(100%, 1440px);
  height: 100%;
  margin: 0 auto;
}

.hero__copy {
  position: absolute;
  z-index: 1;
  top: 90px;
  left: 48px;
  width: 500px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 39px;
  margin: 0;
  padding: 8px 16px;
  color: #1b81d4;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  background: #fff;
  border-radius: 999px;
}

.hero__title {
  position: relative;
  width: 500px;
  margin: 24px 0 0;
  font: 400 60px/1 'PT Serif', serif;
}

.hero__title em { font-style: italic; }

.hero__title picture {
  position: absolute;
  left: 343px;
  bottom: 9px;
  width: 112px;
  height: 53px;
}

.hero__title picture img { position: static; display: block; width: 100%; height: 100%; }

.hero__title-text { display: block; }

.hero__description {
  width: 434px;
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.hero__cta {
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}

.hero__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 64px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: #f58665;
  border-radius: 999px;
  transition: background-color .2s ease, transform .2s ease;
}

.hero__cta a:hover { background: #e97554; transform: translateY(-2px); }

.hero__cta span {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .7px;
  white-space: nowrap;
}
.hero__cta-note { display: block; }

.hero__note {
  display: flex;
  align-items: flex-start;
  width: 409px;
  margin-top: 24px;
  gap: 10px;
}

.hero__note picture { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 7px; }
.hero__note picture img { display: block; width: 100%; height: 100%; }
.hero__note p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .7px;
}

.hero__visual { position: absolute; inset: 0; pointer-events: none; }
.hero__illustration { position: absolute; display: none; max-width: none; }
.hero__stars--tablet { display: none; }
.hero__tablet-composition { position: absolute; display: none; }
.hero__mobile-composition { position: absolute; display: none; }
.hero__desktop-composition {
  position: absolute;
  overflow: hidden;
}
.hero__illustration--desktop { display: block; top: 25px; left: 506px; width: 1026px; height: 604px; }
.hero__desktop-illustration {
  position: absolute;
  top: 0;
  right: 0;
  width: 670px;
  height: 565px;
  max-width: none;
}
.hero__desktop-mockup {
  position: absolute;
  top: 4px;
  left: 0;
  width: 429px;
  height: 600px;
  max-width: none;
}

@media (max-width: 1439px) and (min-width: 851px) {
  .hero__inner { width: 100%; }
  .hero__illustration--desktop { left: 506px; right: auto; }
}

@media (max-width: 850px) and (min-width: 481px) {
  /* Figma 2211:367 — fixed 838px tablet composition, centered in the viewport. */
  .hero { height: 1171px; }
  .hero__inner { width: 838px; }
  .hero__copy {
    top: 72px;
    left: 191px;
    width: 455px;
    text-align: left;
    transform: none;
  }
  .hero__title { width: 455px; margin-top: 24px; }
  .hero__description {
    position: absolute;
    top: 864px;
    left: 0;
    width: 434px;
    margin: 0;
    text-align: center;
    transform: none;
  }
  .hero__cta {
    width: 300px;
    margin: 20px 0 0;
    gap: 12px;
  }
  .hero__cta a { width: 300px; }
  .hero__cta span {
    position: absolute;
    top: 288px;
    left: 150px;
    transform: translateX(-50%);
  }
  .hero__note {
    position: absolute;
    top: 986px;
    left: 73px;
    width: 310px;
    height: 95px;
    box-sizing: border-box;
    margin: 0;
    padding: 14px;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
  }
  .hero__note picture { margin-top: 0; }
  .hero__note p { width: 241px; }
  .hero__illustration--desktop,
  .hero__illustration--compact,
  .hero__mobile-composition { display: none; }
  .hero__stars--tablet {
    position: absolute;
    top: 52px;
    left: calc(50% - 19.758px);
    display: block;
    width: 690.485px;
    height: 259.001px;
    max-width: none;
    transform: translateX(-50%);
  }
  .hero__tablet-composition {
    display: block;
    top: 369px;
    left: 50%;
    width: 838px;
    height: 567px;
    transform: translateX(-50%);
  }

  .hero__tablet-illustration {
    position: absolute;
    top: 28.834px;
    left: 291.047px;
    width: 553.632px;
    height: 488.955px;
    max-width: none;
  }

  .hero__tablet-mockup-crop {
    position: absolute;
    top: -11.714px;
    left: 30.637px;
    width: 386.512px;
    height: 592.083px;
    overflow: hidden;
  }

  .hero__tablet-mockup {
    position: absolute;
    top: 0;
    left: 9.17%;
    width: 109.49%;
    height: 99.93%;
    max-width: none;
  }

}

/* Keep the tablet composition inside narrower 501–700px viewports. */
@media (max-width: 700px) and (min-width: 481px) {
  .hero {
    height: 1171px;
  }

  .hero__inner {
    width: 100%;
  }

  .hero__copy {
    top: 72px;
    left: 50%;
    width: 455px;
    text-align: left;
    transform: translateX(-50%);
  }

  .hero__title {
    width: 455px;
    font-size: 60px;
    line-height: 1;
  }

  .hero__title picture {
    right: 0;
    left: auto;
  }

  .hero__description {
    left: 50%;
    width: calc(100vw - 64px);
    max-width: 434px;
    transform: translateX(-50%);
  }

  .hero__note {
    left: 50%;
    transform: translateX(-50%);
  }

  .hero__tablet-composition { left: 50%; }
}

@media (max-width: 480px) {
  .hero { height: 888px; }
  .hero__inner { width: 100%; }
  .hero__copy {
    top: 40px;
    left: 50%;
    width: min(360px, calc(100vw - 32px));
    transform: translateX(-50%);
  }
  .hero__eyebrow,
  .hero__title,
  .hero__description,
  .hero__cta,
  .hero__note { position: absolute; }
  .hero__eyebrow { top: 0; left: 0; }
  .hero__title {
    top: 49px;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
  }
  .hero__title-text { white-space: nowrap; }
  .hero__title picture {
    right: auto;
    bottom: 6px;
    left: 228px;
    width: 82px;
    height: 39px;
    transform: none;
  }
  .hero__description {
    top: 580px;
    left: 50%;
    width: 100%;
    margin: 0;
    text-align: center;
    transform: translateX(-50%);
  }
  .hero__cta { top: 157px; left: 0; flex-direction: column; align-items: center; width: 100%; margin: 0; gap: 12px; }
  .hero__cta a { width: 100%; height: 69px; }
  .hero__cta span { color: rgba(255, 255, 255, .8); font-size: 16px; letter-spacing: 0; }
  .hero__note {
    top: 753px;
    left: 50%;
    width: 100%;
    height: auto;
    min-height: 95px;
    box-sizing: border-box;
    margin: 0;
    padding: 14px;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    transform: translateX(-50%);
  }
  .hero__note picture { margin-top: 0; }
  .hero__note p {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .hero__illustration--desktop,
  .hero__illustration--tablet,
  .hero__illustration--compact { display: none; }
  .hero__mobile-composition {
    display: block;
    top: 296px;
    left: 50%;
    width: 480px;
    height: 324.645px;
    transform: translateX(-50%);
  }
  .hero__mobile-illustration {
    position: absolute;
    top: 16.516px;
    left: 166.71px;
    width: 317.116px;
    height: 280.07px;
    max-width: none;
  }
  .hero__mobile-mockup-crop {
    position: absolute;
    top: -6.71px;
    left: 17.548px;
    width: 221.391px;
    height: 339.14px;
    overflow: hidden;
  }
  .hero__mobile-mockup {
    position: absolute;
    top: 0;
    left: 9.17%;
    width: 109.49%;
    height: 99.93%;
    max-width: none;
  }
}

@media (max-width: 360px) {
  .hero__title { font-size: 36px; }
}

/* ========================================================================== 
   HERO POINTS — Figma 1972:87
   ========================================================================== */
.hero-points {
  min-height: 195px;
  height: auto;
  padding: 0 48px 90px;
  color: #fff;
  background: #1b81d4;
}

.hero-points__inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 105px;
  gap: 48px;
}

.hero-point {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
  gap: 12px;
}

.hero-point h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.hero-point p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.hero-points__divider {
  flex: 0 0 0;
  width: 2px;
  height: 105px;
  object-fit: none;
  overflow: visible;
}

.hero-points__divider--desktop { display: block; }

@media (max-width: 480px) {
  .hero-points {
    min-height: 0;
    height: auto;
    padding: 45px 0 60px;
  }

  .hero-points__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: min(303px, calc(100% - 40px));
    height: auto;
    margin: 0 auto;
    gap: 32px;
  }

  .hero-point {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
  }

  .hero-points__divider--desktop { display: none; }
  .hero-points__divider {
    display: none;
  }

  .hero-point:not(:last-of-type)::after {
    position: absolute;
    right: 0;
    bottom: -16px;
    left: 0;
    height: 2px;
    content: '';
    background: rgba(255, 255, 255, .15);
  }
}

@media (max-width: 850px) and (min-width: 481px) {
  .hero-points {
    padding-top: 45px;
    padding-right: 48px;
    padding-left: 48px;
  }

  .hero-points__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(380px, 100%);
    margin: 0 auto;
    height: auto;
    gap: 48px;
  }

  .hero-point {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
  }

  .hero-points__divider {
    display: none;
  }

  .hero-point:not(:last-of-type)::after {
    position: absolute;
    right: 0;
    bottom: -24px;
    left: 0;
    height: 2px;
    content: '';
    background: rgba(255, 255, 255, .15);
  }
}

.plans {
  position: relative;
  height: 1110px;
  padding-top: 90px;
  overflow: hidden;
  color: #1b1b1b;
  background: linear-gradient(180deg, #ebf3fd 0%, #faf6f2 100%);
}

.plans-decor { display: none; }

.plans h2 {
  position: relative;
  width: max-content;
  margin: 0 auto 40px;
  text-align: center;
  font: 400 40px/1.15 'PT Serif', serif;
}

.plans h2 em,
.plans h2 span { display: block; }

.free-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 1000px;
  height: 120px;
  margin: 0 auto 40px;
  padding: 24px;
  gap: 16px;
  background: #fff;
  border: 1px solid #e4e2e0;
  border-radius: 24px;
}

.free-banner > img { width: 64px; height: 64px; }

.free-banner > div:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.free-banner strong { font-size: 24px; line-height: 1.45; }
.free-banner span { font-size: 18px; }

.plan-grid { display: flex; justify-content: center; gap: 24px; }

.plan-card {
  position: relative;
  width: 488px;
  height: 505px;
  padding: 28px 23px;
  background: #fff;
  border: 1px solid #e4e2e0;
  border-radius: 24px;
}

.plan-card h3 { margin: 0 0 4px; font-size: 32px; line-height: 1; }

.plan-card hr {
  margin: 22px 0 10px;
  border: 0;
  border-top: 1px solid rgba(49, 49, 49, .15);
}

.plan-card > p:not(.plan-lead) {
  width: 320px;
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.plan-card ul {
  display: flex;
  flex-direction: column;
  margin: 54px 0 0;
  padding: 0;
  gap: 10px;
  list-style: none;
  font-size: 18px;
}

.plan-card li { display: flex; align-items: center; gap: 8px; }
.plan-card li img { width: 28px; height: 28px; object-fit: contain; }

/* FAQ BLOCK — base accordion layout and artwork. */
.faq {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 1428px;
  padding: 0 260px 90px;
  gap: 40px;
  overflow: hidden;
  color: #1b1b1b;
  background: #faf6f2;
}
.faq-top {
  position: absolute;
  top: 119px;
  left: 1021px;
  width: 577px;
  height: 203px;
}

.faq-left {
  position: absolute;
  top: 478px;
  left: -55px;
  width: 366px;
  height: 394px;
}

.faq-right {
  position: absolute;
  top: 968px;
  left: 1100px;
  width: 340px;
  height: 215px;
}

.faq-title {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  gap: 6px;
}

.faq-title span { width: 100%; height: 4px; background: #f58665; }
.faq-title h2 { margin: 0; font: 400 40px/1.15 'PT Serif', serif; }

.faq-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 764px;
  gap: 20px;
}

.faq-item { overflow: hidden; background: #fff; border-radius: 24px; }

.faq-item button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 80px;
  padding: 22px 24px 22px 28px;
  gap: 40px;
  cursor: pointer;
  text-align: left;
  color: #1b1b1b;
  background: transparent;
  border: 0;
}

.faq-item strong {
  flex: 1;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.faq-item button img { width: 36px; height: 36px; transform: none; }
.faq-item.open button img { transform: rotate(180deg); }

.answer {
  display: none;
  padding: 0 88px 28px 28px;
  color: #1b1b1b;
  font-size: 18px;
  line-height: 1.45;
}

.faq-item.open .answer { display: block; height: auto; }
.answer p { margin: 0 0 12px; }
.answer p:last-child { margin-bottom: 0; }
/* RESOLVED DEFAULTS — preserve the rendered pricing and FAQ geometry without
   the historical cascade of generic overrides. Component-specific responsive
   rules remain below and only change these values at their own breakpoints. */
.plans { height: 977px; }

.plans .free-banner {
  width: 1000px;
  height: 136px;
  margin-bottom: 24px;
  padding: 24px;
}

.plans .plan-card {
  width: 488px;
  height: 505px;
  padding: 24px;
}

.plans .plan-card hr { margin: 0 0 14px; }
.plans .plan-card ul { position: static; margin: 0; }

.faq {
  min-height: 0;
  height: auto;
}
/* FOOTER BLOCK — base footer layout and link groups. */
.footer {
  position: relative;
  height: 430px;
  color: #fff;
  background: #1b1b1b;
  font-size: 14px;
}

.footer-logo { position: absolute; top: 72px; left: 48px; width: 106.6px; height: 23.54px; }

.footer-links {
  position: absolute;
  top: 144px;
  left: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.3;
}

.footer-links strong { margin-bottom: 4px; font-weight: 600; }
.footer-links a { color: rgba(255, 255, 255, .6); }
.footer .social { color:inherit; text-decoration:none; }
.data { left: 227px; }

.ask {
  position: absolute;
  top: 72px;
  left: 1092px;
  display: flex;
  align-items: center;
  width: 300px;
  height: 58px;
  padding: 0 20px;
  gap: 14px;
  color: #1b1b1b;
  background: #fff;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
}

.ask img:first-child { width: 30px; height: 30px; }
.ask img:last-child { width: 20px; height: 16px; margin-left: auto; }

.social {
  position: absolute;
  top: 170px;
  left: 1172px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e8f2ff;
  font-size: 24px;
}

.social img { width: 36px; height: 36px; }
.copyright { position: absolute; top: 364px; left: 48px; margin: 0; }
.support { position: absolute; top: 364px; right: 48px; margin: 0; }
.support span { color: rgba(255, 255, 255, .6); }
.support a { color: inherit; text-decoration: none; }

/* ========================================================================== 
   Maintenance map: keep section-specific changes in their own namespace.
   ========================================================================== */

/* PLANS: heading, offer banner, and pricing cards. */
.plans .plans-header h2 { margin:0 auto 40px; }
.plans .free-banner__icon { width:64px; height:64px; flex:0 0 64px; }
.plans .free-banner__copy { flex:1; display:flex; flex-direction:column; gap:4px; }
.plans .free-banner__copy strong { font-size:24px; line-height:1.45; }
.plans .free-banner__copy span { font-size:18px; }
.plans .free-banner__cta { display:flex; flex-direction:column; align-items:center; width:352px; flex:0 0 352px; margin-left:auto; padding:0; gap:8px; align-self:flex-start; }
.plans .free-banner__cta a { width:352px; height:64px; padding:21px 24px; }
.plans .plan-card__heading { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.plans .plan-card__heading h3 { margin:0; font-size:32px; line-height:1; }
.plans .plan-card__lead { width:350px; margin:0 0 14px; }
.plans .plan-card__description { width:320px; margin:0 0 24px; font-size:18px; line-height:1.45; }
.plans .plan-card__features { margin:0; position:static; }
.plans .plan-card__features { position:relative; top:28px; }
.plans .plan-card__button {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: block;
  padding: 21px;
  color: #fff;
  background: #313131;
  border-radius: 900px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.plans .plan-card__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 34px;
  margin: 0;
  padding: 0 17px 0 12px;
  gap: 6px;
  color: #fff;
  background: #f58665;
  border-radius: 900px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.plans .plan-card__badge img { width:17px; height:17px; }

/* ========================================================================== 
   SECURITY / ASTROLOGICAL FOUNDATION
   Two-column section from Figma node 1276:6806.
   ========================================================================== */
.security { display:flex; align-items:center; justify-content:space-between; height:340px; padding:90px 150px; color:#1b1b1b; background:#fff; }
.security__copy { display:flex; flex:0 0 560px; flex-direction:column; width:560px; gap:18px; }
.security__copy h2 { margin:0; font:400 32px/1.15 'PT Serif',serif; }
.security__copy h2 em { font-style:italic; }
.security__copy p { margin:0; font-size:24px; font-weight:400; line-height:1.45; }
.security__copy p strong { font-weight:600; }
.security__card {
  display: flex;
  align-items: center;
  width: 560px;
  height: 160px;
  padding: 20px 24px;
  gap: 24px;
  color: #1b1b1b;
  background: #fff;
  border: 1px solid #e4e2e0;
  border-radius: 16px;
}
.security__icon { display:flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:62px; overflow:hidden; }
.security__icon img { width:58.7px; height:69.9px; transform:rotate(-6.22deg); }
.security__label { flex:0 0 150px; max-width:150px; margin:0; font-size:20px; font-weight:600; line-height:1.25; }
.security__label span { color:#65a65e; }
.security__text { flex:1 1 auto; min-width:0; margin:0; font-size:16px; font-weight:400; line-height:1.5; }
.security__text a { color:inherit; font-weight:600; text-decoration:underline; text-underline-position:from-font; }

/* SECURITY — Figma 1717:9997. */
.security__icon-1010,
.security__icon-640 { display:none; }

@media (max-width: 1439px) and (min-width: 851px) {
  .security {
    height:413px;
    padding:90px 48px;
  }

  .security__copy {
    flex-basis:510px;
    width:510px;
  }

  .security__card {
    width:372px;
    height:233px;
    padding:20px 24px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:16px;
  }

  .security__icon-1440 { display:none; }
  .security__icon-1010 { display:block; }
  .security__label { flex:none; width:322px; max-width:322px; }
  .security__text { flex:none; width:322px; }
}

@media (max-width: 850px) and (min-width: 641px) {
  .security {
    height:524px;
    padding:90px 40px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:24px;
  }

  .security__copy {
    flex:0 0 160px;
    width:560px;
  }

  .security__card {
    width:560px;
    height:160px;
  }

  .security__icon-1440 { display:none; }
  .security__icon-1010 { display:block; }
  .security__label { flex-basis:150px; max-width:150px; }
  .security__text { flex-basis:0; }
}

@media (max-width: 640px) {
  .security {
    width:100%;
    min-height:668px;
    height:auto;
    padding:72px 40px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:24px;
  }

  .security__copy {
    flex:none;
    width:348px;
    max-width:100%;
    gap:18px;
  }

  .security__copy h2 { font-size:32px; }
  .security__copy p { font-size:24px; }

  .security__card {
    flex:none;
    width:100%;
    height:233px;
    padding:20px 24px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:16px;
  }

  .security__icon-1440,
  .security__icon-1010 { display:none; }
  .security__icon-640 { display:block; }
  .security__label,
  .security__text { flex:none; width:100%; max-width:none; }
}

/* Final CTA v2 — Figma 1738:10047. The 1440px composition only recenters
   horizontally down to 790px; its dimensions and vertical geometry stay fixed. */
.final-cta-v2 {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 480px;
  overflow: hidden;
  background: #1b81d4;
  color: #fff;
}

.final-cta-v2__mockup,
.final-cta-v2__decor,
.final-cta-v2__copy {
  position: absolute;
}

.final-cta-v2__decor-480,
.final-cta-v2__stroke-left-480,
.final-cta-v2__stroke-right-480,
.final-cta-v2__art-480,
.final-cta-v2__screen-480,
.final-cta-v2__line-480 {
  display: none;
}

.final-cta-v2__mockup {
  left: 465px;
  top: -64px;
  width: 935px;
  height: 544px;
  overflow: hidden;
}

.final-cta-v2__stroke {
  position: absolute;
  left: 542.02px;
  top: 246.17px;
  display: block;
  width: 339.751px;
  height: 310.87px;
  transform: rotate(-172.27deg) scaleY(-1);
}

.final-cta-v2__art {
  position: absolute;
  left: 104.63px;
  top: -0.25px;
  display: block;
  width: 810.097px;
  height: 532.106px;
}

.final-cta-v2__screen {
  position: absolute;
  left: 316px;
  top: 120px;
  display: block;
  width: 303px;
  height: 424px;
  object-fit: cover;
}

.final-cta-v2__decor {
  left: -44px;
  top: 0;
  display: block;
  width: 509px;
  height: 474px;
}

.final-cta-v2__copy {
  left: 358px;
  top: 145px;
  width: 434px;
}

.final-cta-v2__copy h2 {
  width: 434px;
  height: 82px;
  margin: 0;
  color: #fff;
  font-family: 'PT Serif', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
}

.final-cta-v2__line {
  position: absolute;
  left: 318.897px;
  top: 40.676px;
  display: block;
  width: 86.103px;
  height: 41.272px;
}

.final-cta-v2__actions {
  position: absolute;
  left: 0;
  top: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.final-cta-v2__actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 64px;
  border-radius: 900px;
  background: #f58665;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.final-cta-v2__actions span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

@media (max-width: 1439px) and (min-width: 790px) {
  .final-cta-v2__mockup {
    left: calc(140px + (100vw - 790px) * 0.5);
  }

  .final-cta-v2__decor {
    left: calc(-369px + (100vw - 790px) * 0.5);
  }

  .final-cta-v2__copy {
    left: calc(33px + (100vw - 790px) * 0.5);
  }
}

/* 790–480 Figma variant: keep the composition centered and switch to the
   dedicated smaller mockup assets. No rules are applied below 480px. */
@media (max-width: 790px) and (min-width: 480px) {
  .final-cta-v2 {
    height: auto;
    min-height: 681px;
  }

  .final-cta-v2__mockup {
    left: calc(50% - 392px);
    top: 225px;
    width: 783.75px;
    height: 456px;
  }

  .final-cta-v2__mockup > .final-cta-v2__stroke,
  .final-cta-v2__mockup > .final-cta-v2__art,
  .final-cta-v2__mockup > .final-cta-v2__screen,
  .final-cta-v2__decor {
    display: none;
  }

  .final-cta-v2__decor-480 {
    position: absolute;
    left: 475px;
    top: -20px;
    display: block;
    width: 429px;
    height: 494px;
    z-index: 0;
  }

  .final-cta-v2__stroke-left-480 {
    position: absolute;
    left: 188.82px;
    top: 101.06px;
    display: block;
    width: 121.574px;
    height: 457.369px;
    transform: rotate(-105.69deg) scaleY(-1);
    transform-origin: center;
  }

  .final-cta-v2__stroke-right-480 {
    position: absolute;
    left: 464.56px;
    top: 202.6px;
    display: block;
    width: 302.71px;
    height: 269.345px;
    transform: rotate(-172.27deg) scaleY(-1);
    transform-origin: center;
  }

  .final-cta-v2__art-480 {
    position: absolute;
    left: 55.04px;
    top: 145.15px;
    display: block;
    width: 183.402px;
    height: 161.156px;
  }

  .final-cta-v2__screen-480 {
    position: absolute;
    left: 260px;
    top: 89px;
    display: block;
    width: 263px;
    height: 367px;
    object-fit: cover;
  }

  .final-cta-v2__copy {
    left: calc(50% - 217px);
    top: 90px;
    width: 434px;
    z-index: 2;
  }

  .final-cta-v2__copy h2 {
    width: 434px;
    height: 82px;
  }

  .final-cta-v2__line {
    display: none;
  }

  .final-cta-v2__line-480 {
    position: absolute;
    left: 318.897px;
    top: 40.676px;
    display: block;
    width: 86.103px;
    height: 41.272px;
  }

  .final-cta-v2__actions {
    left: 0;
    top: 106px;
    width: 434px;
  }

  .final-cta-v2__actions a {
    width: 434px;
  }
}

/* 480–320 Figma layout: same artwork, narrower centered copy and CTA. */
@media (max-width: 479px) {
  .final-cta-v2 {
    height: auto;
    min-height: 716px;
  }

  .final-cta-v2__decor,
  .final-cta-v2__line {
    display: none;
  }

  .final-cta-v2__decor-480 {
    position: absolute;
    left: 300px;
    top: -30px;
    display: block;
    width: 429px;
    height: 494px;
    transform: none;
  }

  .final-cta-v2__copy {
    left: calc(50% - 155px);
    top: 90px;
    width: 278px;
    text-align: left;
  }

  .final-cta-v2__copy h2 {
    width: 278px;
    height: 123px;
    font-size: 36px;
    line-height: 1.15;
  }

  .final-cta-v2__line-480 {
    position: absolute;
    left: 185px;
    top: 77px;
    display: block;
    width: 86.103px;
    height: 41.272px;
  }

  .final-cta-v2__actions {
    left: 0;
    top: 141px;
    width: 310px;
  }

  .final-cta-v2__actions a {
    width: 310px;
  }

  .final-cta-v2__mockup {
    left: calc(50% - 392px);
    top: 260px;
    width: 783.75px;
    height: 456px;
  }

  .final-cta-v2__mockup > .final-cta-v2__stroke,
  .final-cta-v2__mockup > .final-cta-v2__art,
  .final-cta-v2__mockup > .final-cta-v2__screen {
    display: none;
  }

  .final-cta-v2__stroke-left-480,
  .final-cta-v2__stroke-right-480,
  .final-cta-v2__art-480,
  .final-cta-v2__screen-480 {
    position: absolute;
    display: block;
  }

  .final-cta-v2__stroke-left-480 {
    left: 188.82px;
    top: 101.06px;
    width: 121.574px;
    height: 457.369px;
    transform: rotate(-105.69deg) scaleY(-1);
  }

  .final-cta-v2__stroke-right-480 {
    left: 464.56px;
    top: 202.6px;
    width: 302.71px;
    height: 269.345px;
    transform: rotate(-172.27deg) scaleY(-1);
  }

  .final-cta-v2__art-480 {
    left: 55.04px;
    top: 145.15px;
    width: 183.402px;
    height: 161.156px;
  }

  .final-cta-v2__screen-480 {
    left: 260px;
    top: 89px;
    width: 263px;
    height: 367px;
    object-fit: cover;
  }
}

/* CTA INTERACTIONS — Consistent hover colors for all primary actions. */
.foundations__cta a,
.reflection__cta a,
.plans .free-banner__cta a,
.plans .plan-card__button,
.explore-card__questions > button,
.final-cta-v2__actions a {
  transition: background-color .18s ease, transform .12s ease;
}

.foundations__cta a:hover,
.reflection__cta a:hover,
.plans .free-banner__cta a:hover { background:#2E98F0 !important; }

.plans .free-banner[data-card-link]:hover .free-banner__cta a { background:#2E98F0 !important; }

.plans .plan-card__button:hover,
.explore-card__questions > button:hover { background:#403F3F !important; }

.plans .plan-card[data-card-link]:hover .plan-card__button { background:#403F3F !important; }
@keyframes reflection-art-rise {
  from { opacity:0; transform:translate(var(--reflection-shift-x), 90px) scale(.86); }
  to { opacity:1; transform:translate(var(--reflection-shift-x), 0) scale(1); }
}

@keyframes reflection-art-rise-stack {
  from { opacity:0; transform:translate(-50%, 70px) scale(.86); }
  to { opacity:1; transform:translate(-50%, 0) scale(1); }
}

@keyframes reflection-bird-rise {
  from { opacity:0; transform:translateY(48px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* EXPLORE STACKED — independent cards and SVG illustrations. */
.explore {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 1800px;
  padding-top: 90px;
  overflow: hidden;
  color: #1b1b1b;
  background: #faf6f2;
}

.explore__header { z-index: 1; text-align: center; }
.explore__header h2 { margin: 0; font: 400 40px/1.15 'PT Serif', serif; }
.explore__header h2 em { font-style: italic; }

.explore__cards {
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 1344px;
  margin-top: 40px;
  gap: 32px;
}

.explore-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 570px;
  padding: 40px 202px;
  background: #fff;
  border: 1px solid #e3dad2;
  border-radius: 40px;
}

.explore-card__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 596px;
  gap: 12px;
  text-align: center;
}

.explore-card__intro > img { width: 56px; height: 56px; object-fit: contain; }
.explore-card__intro h3 { margin: 0; font: 400 32px/1.25 'PT Serif', serif; }
.explore-card__intro p { width: 596px; margin: 0; font-size: 18px; line-height: 1.45; }

.explore-card__questions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 596px;
  margin-top: 32px;
  gap: 16px;
}

.explore-card__questions > strong {
  color: rgba(27, 27, 27, .5);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}

.explore-card__questions > a {
  display: flex;
  align-items: center;
  width: 596px;
  min-height: 58px;
  padding: 16px 24px;
  gap: 12px;
  color: #1b1b1b;
  background: #f8f8f8;
  border-radius: 16px;
  font-size: 18px;
  line-height: 1.45;
  text-decoration: none;
}

.explore-card__questions > a img {
  flex: 0 0 20px;
  width: 20px;
  height: 16px;
  object-fit: contain;
}

.explore-card__questions > button {
  width: 200px;
  height: 50px;
  padding: 16px;
  color: #e7e7e7;
  background: #313131;
  border: 0;
  border-radius: 900px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}

.explore-card__questions > button span { position: relative; top: -1px; }

.explore__decor {
  position: absolute;
  z-index: 0;
  top: 0;
  width: 700px;
  height: 172px;
}

.explore__decor--right { left: 932px; }
.explore__decor--left { left: -192px; }

/* EXPLORE FLUID — narrow the desktop composition toward the center through 640px. */
@media (max-width: 1439px) and (min-width: 641px) {
  .explore { width:100vw; }
  .explore__cards { width:calc(100vw - 40px); max-width:1344px; }
  .explore-card { padding-right:24px; padding-left:24px; }
  .explore__decor--left { left:calc(48.75vw - 894px); }
  .explore__decor--right { left:calc(51.25vw + 194px); }
  .explore-card__intro,
  .explore-card__questions { width:min(596px, 100%); }
  .explore-card__intro p,
  .explore-card__questions > a { width:100%; }
}

/* EXPLORE MOBILE — keep the cards readable below 640px. */
@media (max-width: 640px) {
  .explore {
    width:100vw;
    min-height:0;
    padding:64px 20px;
  }
  .explore__header h2 { font-size:32px; }
  .explore__cards { width:100%; margin-top:24px; gap:16px; }
  .explore-card { min-height:0; padding:24px 16px; border-radius:20px; }
  .explore-card__intro,
  .explore-card__questions { width:100%; }
  .explore-card__intro h3 { font-size:26px; }
  .explore-card__intro p,
  .explore-card__questions > a { width:100%; font-size:16px; }
  .explore-card__questions { margin-top:24px; gap:12px; }
  .explore-card__questions > strong { font-size:16px; }
  .explore-card__questions > a { min-height:52px; padding:14px 16px; }
  .explore-card__questions > button { width:180px; height:48px; padding:14px; font-size:16px; }
  .explore__decor { display:none; }
}
/* FOOTER: links, social block, and legal information. */
.footer .footer-links a { text-decoration:none; }

/* Final component bindings: these take precedence over the generic base rules. */
.plans .free-banner__cta a {
  display: block;
  width: 352px;
  height: 64px;
  padding: 21px 24px;
  color: #fff;
  background: #278ee5;
  border-radius: 900px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.plans .free-banner__cta small {
  color: rgba(27, 27, 27, .5);
  font-size: 16px;
  font-weight: 600;
}

.plans .free-banner__copy strong,
.plans .plan-card__heading h3,
.plans h3 { font-weight: 600; }

.free-banner__break { display: inline; }

.plans .plan-card__lead {
  width: 350px;
  margin: 0 0 14px !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

.plans .plan-card hr { margin-top: 0 !important; }

/* Keep the Full badge beside the title without making the content column taller. */
.plans .plan-card--full .plan-card__heading { position:relative; height:34px; align-items:center; margin-bottom:14px; }
.plans .plan-card--full .plan-card__badge { transform:none; }

/* FOUNDATIONS 02 — More than a birth chart (Figma 1276:6542). */
.foundations {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
  padding:90px 150px 0;
  color:#1b1b1b;
  background:linear-gradient(180deg,#ebf3fd 0%,#faf6f2 100%);
}
.foundations__intro,
.foundations__closing { display:flex; flex-direction:column; align-items:center; width:100%; }
.foundations__intro { gap:40px; }
.foundations h2 { margin:0; color:#1b1b1b; font:400 40px/1.15 'PT Serif',serif; text-align:center; }
.foundations h2 em { font-style:italic; }
.foundations__mobile-break { display: none; }
.foundations__cards { display:flex; align-items:stretch; gap:16px; width:1140px; }
.foundation-card {
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  min-width:0;
  padding:32px;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
}
.foundation-card > img { flex:0 0 72px; width:72px; height:72px; object-fit:contain; }
.foundation-card h3 { margin:0; color:#1b1b1b; font-size:24px; font-weight:600; line-height:1.25; }
.foundation-card__text { color:#1b1b1b; font-size:18px; font-weight:400; line-height:1.45; }
.foundation-card__text p { margin:0 0 12px; }
.foundation-card__text p:last-child { margin-bottom:0; }
.foundations__closing { gap:32px; }
.foundations__closing h2 { font-size:32px; line-height:1.2; text-align:left; }
.foundations__closing h2 em { display:block; margin:8px 0 0 137px; }
.foundations__cta { display:flex; flex-direction:column; align-items:center; gap:12px; }
.foundations__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  min-height: 68px;
  padding: 22px 56px;
  color: #fff;
  background: #278ee5;
  border-radius: 900px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.foundations__cta span { color:rgba(27,27,27,.5); font-size:16px; font-weight:600; line-height:18px; }

/* FOUNDATIONS TABLET — keep all three cards in a fluid row through 851px. */
@media (max-width: 1439px) and (min-width: 851px) {
  .foundations {
    width: 100vw;
    padding-right: 25px;
    padding-left: 25px;
  }

  .foundations__cards {
    width: 100%;
    max-width: 1140px;
  }
}

@media (max-width: 1190px) and (min-width: 851px) {
  .foundations__cards {
    gap: 16px;
  }

  .foundation-card {
    padding: 28px 24px;
  }

  .foundation-card h3 {
    font-size: 22px;
  }

  .foundation-card__text {
    font-size: 17px;
  }
}

/* FOUNDATIONS MOBILE — stack the three foundation cards vertically. */
@media (max-width: 850px) {
  .foundations {
    width: 100vw;
    gap: 48px;
    padding: 64px 20px 0;
  }

  .foundations__intro {
    gap: 24px;
  }

  .foundations h2 {
    font-size: 32px;
  }

  .foundations__cards {
    width: min(560px, 100%);
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    flex-direction: column;
    gap: 16px;
  }

  .foundation-card {
    display: flex;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 20px;
    overflow: visible;
  }

  .foundation-card > img {
    display: block;
    margin-bottom: 0;
  }

  .foundation-card h3 {
    margin-bottom: 0;
    font-size: 22px;
  }

  .foundation-card__text {
    font-size: 17px;
  }

  .foundations__closing {
    gap: 24px;
  }

  .foundations__closing h2 {
    font-size: 26px;
    text-align: center;
  }

  .foundations__closing h2 em {
    margin: 8px 0 0;
  }

  .foundations__cta a {
    width: min(360px, calc(100vw - 40px));
    min-height: 60px;
    padding: 20px 32px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .foundations__closing h2 {
    width: min(360px, calc(100vw - 40px));
    max-width: 100%;
    font-size: 26px;
  }
}

.footer .ask { cursor:pointer; text-decoration:none; }

/* PRICING RESPONSIVE — follow Figma 1594:9443: narrow the two-column layout first,
   then move the offer and tariff cards into one centered column below 772px. */
@media (max-width: 1040px) and (min-width: 773px) {
  .plans {
    width:100vw;
    height:auto;
    min-height:977px;
    padding-bottom:90px;
  }

  .plans .free-banner {
    width:calc(100vw - 40px);
    max-width:1000px;
    height:clamp(140px, calc(178.77px - 3.73vw), 150px);
    margin-bottom:24px;
  }

  .plans .free-banner__copy { min-width:0; }
  .plans .free-banner__copy strong { font-size:clamp(21px, 2.31vw, 24px); }
  .plans .free-banner__copy span { font-size:clamp(16px, 1.73vw, 18px); }
  .plans .free-banner__cta { width:clamp(310px, 33.85vw, 352px); flex-basis:clamp(310px, 33.85vw, 352px); }
  .plans .free-banner__cta a { width:100%; }

  .plans .plan-grid {
    width:calc(100vw - 40px);
    max-width:1000px;
    margin-right:auto;
    margin-left:auto;
    gap:clamp(12px, calc(4.48vw - 22.6px), 24px);
  }

  .plans .plan-card { flex:1 1 0; width:auto; min-width:0; }
  .plans .plan-card__lead { width:100%; }
  .plans .plan-card__description { width:100%; }
}

/* PRICING NARROW — one column below 772px; the CTA remains in normal flow
   so a wrapped offer title can never overlap it. */
@media (max-width: 772px) {
  .plans {
    width: 100vw;
    height: auto;
    min-height: 0;
  }

  .plans .free-banner {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    width: min(560px, calc(100vw - 40px));
    min-height: 228px;
    height: auto;
    margin-bottom: 20px;
    padding: 24px;
    gap: 0 16px;
  }

  .plans .free-banner__icon { flex: 0 0 64px; }
  .plans .free-banner__copy { flex: 1 1 calc(100% - 80px); min-width: 0; }
  .plans .free-banner__copy strong { font-size: 24px; line-height: 1.45; }
  .plans .free-banner__copy span { font-size: 18px; }

  .plans .free-banner__cta {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    margin: 16px 0 0;
  }

  .plans .free-banner__cta a { width: 100%; }

  .plans .plan-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    width: min(560px, calc(100vw - 40px));
    margin-right: auto;
    margin-left: auto;
    gap: 20px;
  }

  .plans .plan-card { width: 100%; height: 505px; padding: 24px; }

  .plans .plan-card__lead,
  .plans .plan-card__description { width: 100%; }
}

/* PRICING SPACING — use one consistent vertical rhythm. */
.plans {
  --plans-gap: 24px;
  padding-top: 90px;
  padding-bottom: 90px;
}
.plans .free-banner {
  margin-bottom: var(--plans-gap);
  border: 1px solid #278EE5;
}
.plans .plan-grid {
  row-gap: var(--plans-gap);
  column-gap: var(--plans-gap);
}
@media (max-width: 560px) {
  .plans h2 {
    width: calc(100vw - 40px);
    font-size: 32px;
  }
}

/* The headline should wrap only when its actual available width requires it. */
.plans .free-banner__break {
  display: none;
}
.plans .free-banner__copy strong {
  white-space: normal;
}
.plans .free-banner__clarifications {
  white-space: nowrap;
}
.plans .free-banner__copy strong .free-banner__clarifications {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* FLUID CONTAINERS — keep centered sections attached to the viewport while it narrows. */
@media (max-width: 1439px) {
  .faq {
    width:100vw;
  }

  .faq {
    padding-right:max(20px, calc((100vw - 764px) / 2));
    padding-left:max(20px, calc((100vw - 764px) / 2));
  }

  .faq-content { width:min(764px, calc(100vw - 40px)); }
}

/* FAQ RESPONSIVE — keep the accordion centered and contained on smaller screens. */
@media (max-width: 1199px) {
  .faq {
    width:100vw;
    padding-right:32px;
    padding-left:32px;
  }

  .faq-content { width:min(764px, calc(100vw - 64px)); }

  .faq-top,
  .faq-left,
  .faq-right {
    display:none;
    z-index:0;
    width:auto;
    height:auto;
    pointer-events:none;
  }

}

@media (max-width: 720px) {
  .faq {
    width: 100vw;
    min-height: 0;
    padding: 0 20px;
    gap: 24px;
  }

  .faq-title h2 { font-size:32px; }
  .faq-content { width:100%; gap:12px; }
  .faq-item { border-radius:16px; }
  .faq-item button {
    min-height:64px;
    padding:16px;
    gap:12px;
  }

  .faq-item strong { font-size: 16px; line-height: 1.3; }
  .faq-item button img { width: 32px; height: 32px; }
  .answer { padding: 0 16px 20px; font-size: 16px; line-height: 1.45; }
}

/* FOOTER RESPONSIVE — keep the desktop composition fluid below 1440px. */
@media (max-width: 1439px) and (min-width: 721px) {
  .footer {
    width: 100vw;
  }

  .footer .ask,
  .footer .social {
    left: auto;
    right: 48px;
  }
}

@media (max-width: 1199px) {
  .footer {
    width:100vw;
  }

  .footer .support { right:48px; }
}

/* FOOTER MOBILE — dimensions follow the mobile Figma composition. */
@media (max-width: 720px) {
  .footer {
    width:100vw;
    height:584px;
  }

  .footer-logo { left:32px; top:64px; }
  .footer-links { top:352px; }
  .footer-links.legal { left:32px; }
  .footer-links.data { left:195px; }
  .footer .ask { left:32px; top:254px; width:300px; }
  .footer .social { left:32px; top:128px; }
  .footer .support { top:196px; right:auto; left:32px; }
  .footer .copyright { left:32px; top:548px; }
}

@media (max-width: 360px) {
  .footer .ask { right:20px; left:20px; width:auto; }
}

/* ==========================================================================
   COOKIE CONSENT — banner rendered by js/analytics.js on every page.
   Mirrors the app popup: dark card at the bottom left; full width at the bottom
   below 850px so the header actions stay reachable.
   ========================================================================== */
.cookie-consent {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  width: 370px;
  padding: 15px 16px 16px;
  color: #fff;
  background: #1b1b1b;
  border-radius: 24px;
  box-shadow: 0 6px 14px rgba(58, 58, 68, .13), 0 1px 4px rgba(90, 91, 106, .11);
  font-size: 16px;
  line-height: 1.4;
}
.cookie-consent [hidden] { display: none; }
.cookie-consent a { color: #278ee5; }
.cookie-consent--customize { padding: 20px 16px 16px; }
.cookie-consent__content { display: flex; align-items: flex-start; gap: 12px; }
.cookie-consent__icon { flex: 0 0 32px; font-size: 24px; line-height: 32px; text-align: center; }
.cookie-consent__text { margin: 0; }
.cookie-consent__actions { display: flex; gap: 10px; margin-top: 16px; }
.cookie-consent__button {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  color: #fff;
  background: #313131;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1.2 Inter, sans-serif;
  cursor: pointer;
  transition: opacity .2s ease;
}
.cookie-consent__button:hover { opacity: .9; }
.cookie-consent__button--accent { background: #278ee5; }
.cookie-consent__title { margin: 0; font: 400 24px/1.15 'PT Serif', serif; }
.cookie-consent__title:focus { outline: none; }
.cookie-consent__description { margin: 8px 0 0; }
.cookie-consent__policy { display: inline-block; margin-top: 8px; }
.cookie-consent__options { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cookie-consent__option { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cookie-consent__option input {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent center / 14px no-repeat;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 7px;
  cursor: pointer;
}
.cookie-consent__option input:checked { background-color: #278ee5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-color: #278ee5; }
.cookie-consent__option input:disabled { background-color: #888; border-color: #888; cursor: default; }
.cookie-consent__option input:focus-visible { outline: 2px solid #278ee5; outline-offset: 2px; }
.cookie-consent__option-text { display: flex; flex-direction: column; gap: 2px; color: rgba(255, 255, 255, .7); font-size: 14px; }
.cookie-consent__option-title { color: #fff; font-size: 16px; }
.cookie-consent__save { width: 100%; margin-top: 20px; }

@media (max-width: 850px) {
  .cookie-consent { right: 16px; bottom: 16px; left: 16px; width: auto; max-width: 480px; margin: 0 auto; }
}

/* ==========================================================================
   DOCUMENT PAGES — /legal/*: title, table of contents and the verbatim text
   of the legal documents. Layout follows openai.com/policies.
   ========================================================================== */
/* The global overflow-x on body makes it a scroll container and breaks the sticky contents. */
.page-doc { overflow-x: visible; }
.doc-page { padding: 64px 48px 96px; color: #1b1b1b; }
.doc-page__layout {
  display: grid;
  grid-template-areas: ". header" "toc body";
  grid-template-columns: 240px minmax(0, 720px);
  column-gap: 64px;
  max-width: 1120px;
  margin: 0 auto;
}
.doc-page--no-toc .doc-page__layout {
  grid-template-areas: "header" "body";
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.doc-page__header { grid-area: header; margin-bottom: 48px; }
.doc-page__preamble { margin: 0 0 16px; color: rgba(27, 27, 27, .6); font-size: 14px; line-height: 1.4; }
.doc-page__title { margin: 0; font: 400 48px/1.1 'PT Serif', serif; }
.doc-page__date { margin: 16px 0 0; color: rgba(27, 27, 27, .6); font-size: 16px; line-height: 1.4; }
.doc-toc {
  position: sticky;
  top: 24px;
  grid-area: toc;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.35;
}
.doc-toc__title { margin: 0 0 12px; font-weight: 600; }
.doc-toc ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc-toc a { color: rgba(27, 27, 27, .6); text-decoration: none; transition: color .2s ease; }
.doc-toc a:hover { color: #1b1b1b; }
.doc-body { grid-area: body; font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
.doc-body h2 { margin: 48px 0 16px; font: 400 32px/1.15 'PT Serif', serif; scroll-margin-top: 24px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { margin: 32px 0 12px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.doc-body p { margin: 0 0 16px; }
.doc-body ul { margin: 0 0 16px; padding-left: 24px; }
.doc-body li + li { margin-top: 6px; }
.doc-body a { color: #278ee5; }
.doc-body__note { padding-left: 16px; border-left: 2px solid #e4e2e0; }
.doc-table { margin: 0 0 24px; overflow-x: auto; }
.doc-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.doc-table th,
.doc-table td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #e4e2e0; }
.doc-table th { font-weight: 600; }
.doc-table td > :last-child { margin-bottom: 0; }
.doc-table .doc-table--kv { min-width: 0; font-size: 16px; }
.doc-table--kv th { width: 200px; padding-left: 0; }

@media (max-width: 1116px) {
  .doc-page { padding: 48px 32px 72px; }
  .doc-page__layout,
  .doc-page--no-toc .doc-page__layout {
    grid-template-areas: "header" "toc" "body";
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }
  .doc-toc { position: static; max-height: none; margin-bottom: 40px; padding: 20px 24px; background: #fff; border-radius: 24px; }
}
@media (max-width: 480px) {
  .doc-page { padding: 32px 16px 56px; }
  .doc-page__header { margin-bottom: 32px; }
  .doc-page__title { font-size: 32px; }
  .doc-body { font-size: 16px; }
  .doc-body h2 { margin-top: 36px; font-size: 24px; }
  .doc-table--kv th,
  .doc-table--kv td { display: block; width: auto; padding-left: 0; }
  .doc-table--kv th { padding-bottom: 0; border-bottom: 0; }
}

/* ==========================================================================
   CONTACTS PAGE — /contacts/: support e-mail, company details and address.
   Cards reuse the FAQ card look.
   ========================================================================== */
.contacts { padding: 48px 48px 96px; color: #1b1b1b; }
.contacts__inner { max-width: 1120px; margin: 0 auto; }
.contacts__breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; color: rgba(27, 27, 27, .6); font-size: 14px; }
.contacts__breadcrumbs li + li::before { content: '›'; margin-right: 8px; }
.contacts__breadcrumbs a { color: inherit; text-decoration: none; }
.contacts__title { margin: 0 0 40px; font: 400 48px/1.1 'PT Serif', serif; }
.contacts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contacts__card { padding: 28px; background: #fff; border-radius: 24px; }
.contacts__card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.contacts__card p,
.contacts__card address { margin: 0; font-size: 18px; font-style: normal; line-height: 1.45; }
.contacts__card a { color: #278ee5; text-decoration: none; }
.contacts__details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 16px; line-height: 1.4; }
.contacts__details dt { color: rgba(27, 27, 27, .6); }
.contacts__details dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 790px) {
  .contacts { padding: 32px 32px 72px; }
  .contacts__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .contacts { padding: 32px 16px 56px; }
  .contacts__title { margin-bottom: 24px; font-size: 32px; }
  .contacts__card { padding: 20px; }
  .contacts__details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .contacts__details dd + dt { margin-top: 8px; }
}

/* ==========================================================================
   NOT FOUND PAGE — /404.html, served by nginx for unknown paths.
   ========================================================================== */
.not-found { padding: 120px 48px; color: #1b1b1b; text-align: center; }
.not-found__title { margin: 0 0 16px; font: 400 48px/1.1 'PT Serif', serif; }
.not-found__text { margin: 0 0 32px; font-size: 18px; line-height: 1.45; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.not-found__links a { display: inline-flex; align-items: center; height: 48px; padding: 0 32px; color: #fff; background: #278ee5; border-radius: 999px; font-weight: 600; text-decoration: none; }
.not-found__links a + a { color: #1b1b1b; background: #fff; }

@media (max-width: 480px) {
  .not-found { padding: 72px 16px; }
  .not-found__title { font-size: 32px; }
}

/* TYPE SYSTEM — The landing page uses Regular 400 and Semi Bold 600 only. */
body strong,
body b { font-weight:600 !important; }

/* GLOBAL INTERACTION — All pricing CTAs use the same smooth anchor behavior. */
html { scroll-behavior:smooth; }

@media (max-width: 540px) {
  .reflection__cta {
    margin-top: 0;
  }
}



@media (max-width: 772px) {
  .plans {
    min-height: 0;
  }
}

/* SECURITY v2 — Figma 1760:853. Horizontal through 1036px, stacked below. */
.security {
  position: relative;
  display: block;
  width: 100%;
  height: 413px;
  padding: 0;
}

.security__copy {
  position: absolute;
  left: calc(50% - 470px);
  top: 127px;
  width: 510px;
}

.security__card {
  position: absolute;
  left: calc(50% + 130px);
  top: 90px;
  display: flex;
  width: 340px;
  height: 233px;
  padding: 20px 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  border-color: #65A65E;
}

.security__icon {
  overflow: visible;
}

.security__icon img {
  width: 52.018px;
  height: 64.642px;
}

.security__icon-1440 { display: block; }
.security__icon-1010,
.security__icon-640 { display: none; }
.security__label { flex: none; width: 290px; max-width: 290px; }
.security__text { flex: none; width: 290px; }

@media (max-width: 1035px) and (min-width: 641px) {
  .security {
    width: 100%;
    height: 524px;
    margin: 0 auto;
  }

  .security__copy {
    left: calc(50% - 280px);
    top: 90px;
    width: 560px;
  }

  .security__card {
    left: calc(50% - 280px);
    top: 274px;
    width: 560px;
    height: 160px;
    padding: 20px 24px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .security__icon-1440 { display: block; }
  .security__label { flex: 0 0 150px; width: 150px; max-width: 150px; }
  .security__text { flex: 1 1 auto; width: auto; }
}

@media (max-width: 640px) {
  .security {
    width: 100%;
    min-height: 668px;
    height: 668px;
    margin: 0 auto;
    padding: 45px 40px;
  }

  .security__copy {
    position: static;
    width: 348px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    gap: 24px;
  }

  .security__copy h2 { font-size: 32px; }
  .security__copy p { font-size: 24px; }

  .security__card {
    position: static;
    width: 372px;
    max-width: 100%;
    height: 233px;
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 24px;
    margin-right: auto;
    margin-left: auto;
  }

  .security__icon-1440 { display: none; }
  .security__icon-640 { display: block; }
  .security__card .security__icon { margin-bottom: 6px; }
  .security__label,
  .security__text {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

/* SECURITY — fluid transition from tablet to the mobile layout (640–481px). */
@media (max-width: 640px) and (min-width: 481px) {
  .security {
    min-height: 0;
    height: auto;
    padding: clamp(45px, calc(45px + (100vw - 480px) * 0.16875), 72px)
      clamp(32px, calc(32px + (100vw - 480px) * 0.05), 40px);
  }

  .security__copy {
    width: 100%;
    max-width: 530px;
    margin-right: auto;
    margin-left: auto;
  }

  .security__copy h2 {
    font-size: clamp(32px, calc(32px + (100vw - 480px) * 0.05), 40px);
  }

  .security__copy p {
    font-size: clamp(24px, calc(24px + (100vw - 480px) * 0.0375), 30px);
  }

  .security__card {
    width: 100%;
    max-width: 506px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* LANDING SECTION RHYTHM — shared outer spacing, with explicit zero values preserved. */
:root {
  --landing-section-gap: 90px;
}

.foundations,
.explore,
.plans {
  padding-top: var(--landing-section-gap);
}

.foundations,
.explore {
  padding-bottom: 0;
}

.plans {
  padding-bottom: var(--landing-section-gap);
}

.plans .plan-card__features {
  top: 20px;
}

.plans [data-card-link] {
  cursor: pointer;
}

.plans [data-card-link]:focus-visible {
  outline: 2px solid #278EE5;
  outline-offset: 3px;
}

.faq {
  padding-bottom: var(--landing-section-gap);
}

@media (max-width: 850px) and (min-width: 641px) {
  :root {
    --landing-section-gap: 90px;
  }
}

@media (min-width: 721px) and (max-width: 1199px) {
  .faq {
    min-height: 0;
    height: auto;
    padding-bottom: 90px;
  }
}

@media (max-width: 640px) {
  :root {
    --landing-section-gap: 90px;
  }
}

/* Keep the outer rhythm at 90px on every responsive layout. */
@media (max-width: 850px) {
  .hero-points { padding-bottom: 90px; }
  .conversation-examples { padding-top: 90px; }
}

/* CONVERSATION EXAMPLES — Figma 2065:322
   The progress line is deliberately integrated into the active tab: it signals
   auto-switching without competing with the answer copy as a separate badge. */
.conversation-examples {
  padding: 90px 32px 0;
  color: #1b1b1b;
  background: #0058c5;
}

.conversation-examples__card {
  width: min(1344px, 100%);
  min-height: 894px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 32px;
  background: #f1f7ff;
  cursor: pointer;
}

.conversation-examples__header {
  display: flex;
  height: 202px;
  align-items: center;
  justify-content: center;
  padding: 36px 24px 22px;
  text-align: center;
}

.conversation-examples__header h2 {
  margin: 0;
  font: 400 40px/1.15 'PT Serif', serif;
  transform: translateY(-8px);
}
.conversation-examples__header em { font-style: italic; }

.conversation-examples__toolbar {
  position: relative;
  display: flex;
  width: min(744px, calc(100% - 48px));
  height: 58px;
  align-items: flex-start;
  justify-content: center;
  /* 40px from the title to the tab labels. */
  margin: -21px auto 0;
  gap: 14px;
}
.conversation-examples__toolbar::before {
  position: absolute;
  /* Ten pixels lower than the timer badge, per the latest layout adjustment. */
  top: 40px;
  left: 50%;
  width: min(1344px, 100vw);
  height: 1px;
  background: rgba(27, 27, 27, .1);
  content: '';
  transform: translateX(-50%);
}

.conversation-examples__tabs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
}

.conversation-examples__tab {
  position: relative;
  height: 31px;
  padding: 0 0 11px;
  border: 0;
  color: rgba(27, 27, 27, .5);
  background: transparent;
  font: 600 18px/20px Inter, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.conversation-examples__tab::before,
.conversation-examples__tab::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  border-radius: 999px;
  content: '';
}
.conversation-examples__tab::before { background: transparent; }
.conversation-examples__tab::after { width: var(--progress, 0%); background: #278ee5; }
.conversation-examples__tab.is-active { color: #278ee5; }
.conversation-examples__tab.is-active::before { background: rgba(39, 142, 229, .2); }

.conversation-examples__pause {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  margin-top: -6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 5;
}
.conversation-examples__pause img { display: block; width: 30px; height: 30px; }
.conversation-examples__pause .conversation-examples__play-icon { display: none; }
.conversation-examples__pause.is-paused .conversation-examples__pause-icon { display: none; }
.conversation-examples__pause.is-paused .conversation-examples__play-icon { display: block; }

.conversation-examples__panel {
  width: min(560px, calc(100% - 48px));
  min-height: 618px;
  margin: 6px auto 34px;
  outline: none;
  cursor: pointer;
}
.conversation-examples__panel:focus-visible { outline: 2px solid #278ee5; outline-offset: 8px; border-radius: 12px; }

.conversation-examples__preview { min-height: 618px; }
.conversation-examples__question {
  width: max-content;
  max-width: 100%;
  margin: 0 0 10px auto;
  padding: 12px 16px;
  border: 1px solid #e5edf5;
  border-radius: 16px;
  color: #1b1b1b;
  background: #fff;
  box-shadow: 0 3px 12px rgba(28, 85, 164, .08);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
}

.conversation-examples__answer-label {
  display: flex;
  align-items: center;
  margin-top: 18px;
  color: #278ee5;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  gap: 6px;
}
.conversation-examples__answer-label img { width: 28px; height: 28px; object-fit: contain; }

.conversation-examples__answer-preview {
  font-size: 18px;
  line-height: 1.5;
}
.conversation-examples__answer-preview {
  position: relative;
  height: 430px;
  margin-top: 10px;
  overflow: hidden;
}
.conversation-examples__answer-preview::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  pointer-events: none;
  background: linear-gradient(transparent, #f1f7ff 86%);
  content: '';
}
.conversation-examples__answer-preview p { margin: 0 0 14px; }
.conversation-examples__answer-preview p:last-child { margin-bottom: 0; }

/* Full copy stays directly below the same Answer label. It scrolls in place,
   rather than replacing the conversation with a second reader screen. */
.conversation-examples__preview.is-expanded .conversation-examples__answer-preview {
  height: auto;
  overflow: visible;
}
.conversation-examples__preview.is-expanded .conversation-examples__answer-preview::after { display: none; }
.conversation-examples__preview.is-expanded .conversation-examples__full-toggle img { transform: rotate(0); }

.conversation-examples__full-toggle,
.conversation-examples__back {
  border: 0;
  font: 600 18px/1 Inter, sans-serif;
  cursor: pointer;
}
.conversation-examples__full-toggle {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border-radius: 999px;
  color: #1b1b1b;
  background: rgba(27, 27, 27, .05);
  gap: 8px;
}
.conversation-examples__full-toggle img { display: block; width: 12px; height: 6px; transform: rotate(180deg); transition: transform .2s ease; }

.conversation-examples__preview.is-entering .conversation-examples__question { animation: conversation-question-in 220ms ease-out both; }
.conversation-examples__preview.is-entering .conversation-examples__answer-label { animation: conversation-label-in 180ms ease-out 180ms both; }
.conversation-examples__preview.is-entering .conversation-examples__answer-preview { animation: conversation-answer-in 280ms ease-out 260ms both; }
.conversation-examples__preview.is-entering .conversation-examples__full-toggle { animation: conversation-cta-in 180ms ease-out 360ms both; }

@keyframes conversation-question-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes conversation-label-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes conversation-answer-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes conversation-cta-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .conversation-examples { padding: 45px 0 0; }
  .conversation-examples__card {
    width: min(352px, calc(100% - 40px));
    height: 1246px;
    min-height: 1246px;
    border-radius: 20px;
  }
  .conversation-examples__header {
    height: 123px;
    align-items: flex-start;
    padding: 24px 20px 0;
  }
  .conversation-examples__header h2 {
    width: 312px;
    max-width: 100%;
    font-size: 28px;
    line-height: 1.15;
    transform: none;
  }
  .conversation-examples__toolbar {
    width: calc(100% - 40px);
    height: 91px;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 auto;
    gap: 0;
  }
  .conversation-examples__toolbar::before {
    top: 76px;
    width: 100vw;
  }
  .conversation-examples__tabs {
    display: flex;
    width: 100%;
    max-width: none;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 11px 18px;
    overflow: visible;
  }
  .conversation-examples__tab {
    height: 31px;
    flex: 0 0 auto;
    padding-bottom: 8px;
    font-size: 20px;
    line-height: 23px;
  }
  .conversation-examples__tab:first-child { flex-basis: 220px; }
  .conversation-examples__pause {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
  .conversation-examples__panel {
    width: calc(100% - 40px);
    min-height: 0;
    margin-top: 18px;
  }
  .conversation-examples__preview { min-height: 0; }
  .conversation-examples__question {
    margin-bottom: 12px;
    padding: 12px 16px;
    font-size: 18px;
  }
  .conversation-examples__answer-label { margin-top: 0; font-size: 18px; }
  .conversation-examples__answer-preview {
    height: 835px;
    font-size: 18px;
  }
  .conversation-examples__full-toggle { margin-bottom: 0; font-size: 18px; }
  .conversation-examples__preview.is-expanded .conversation-examples__answer-preview { height: auto; }
}

/* CONVERSATION EXAMPLES — Figma 2149:268, 690–421px layout. */
@media (min-width: 421px) and (max-width: 690px) {
  .conversation-examples { padding: 72px 0 0; }
  .conversation-examples__card {
    width: calc(100% - 114px);
    height: 988px;
    min-height: 988px;
    border-radius: 24px;
  }
  .conversation-examples__header {
    height: 200px;
    align-items: flex-start;
    padding: 32px 20px 0;
  }
  .conversation-examples__header h2 {
    width: 312px;
    max-width: 100%;
    font-size: 32px;
    line-height: 1.15;
    transform: none;
  }
  .conversation-examples__toolbar {
    width: calc(100% - 64px);
    height: 91px;
    margin: 0 auto;
    position: relative;
  }
  .conversation-examples__toolbar::before {
    top: 91px;
    width: 100vw;
  }
  .conversation-examples__tabs { display: contents; }
  .conversation-examples__tab {
    position: absolute;
    height: 32px;
    padding-bottom: 6px;
    font-size: 20px;
    line-height: 23px;
  }
  .conversation-examples__tab:first-child {
    top: 0;
    left: calc(50% - 110px);
    width: 220px;
  }
  .conversation-examples__tab:nth-child(2) { top: 50px; left: calc(50% - 158px); }
  .conversation-examples__tab:nth-child(3) { top: 50px; right: 67px; }
  .conversation-examples__pause {
    position: absolute;
    top: 38px;
    right: 0;
    width: 32px;
    height: 32px;
    margin: 0;
  }
  .conversation-examples__pause img { width: 32px; height: 32px; }
  .conversation-examples__panel {
    width: calc(100% - 64px);
    min-height: 0;
    margin-top: 18px;
  }
  .conversation-examples__question {
    margin-bottom: 12px;
    padding: 12px 16px;
    font-size: 18px;
  }
  .conversation-examples__answer-label { margin-top: 0; font-size: 18px; }
  .conversation-examples__answer-preview { height: 514px; font-size: 18px; }
  .conversation-examples__full-toggle { margin-bottom: 0; font-size: 18px; }
}

/* CONVERSATION EXAMPLES — compact layout for very narrow screens. */
@media (max-width: 400px) {
  .conversation-examples__card {
    width: min(352px, calc(100% - 20px));
  }
  .conversation-examples__header {
    height: 135px;
    padding: 20px 20px 0;
  }
  .conversation-examples__header h2 {
    width: 100%;
    font-size: 24px;
    line-height: 1.15;
  }
  .conversation-examples__toolbar {
    position: relative;
    width: calc(100% - 40px);
    height: 123px;
  }
  .conversation-examples__toolbar::before { top: 108px; }
  .conversation-examples__tabs { display: contents; }
  .conversation-examples__tab {
    position: absolute;
    height: 31px;
    padding-bottom: 8px;
    font-size: 18px;
    line-height: 23px;
  }
  .conversation-examples__tab:first-child {
    top: 0;
    left: 0;
    width: 200px;
  }
  .conversation-examples__tab:nth-child(2) {
    top: 50px;
    left: 4px;
  }
  .conversation-examples__tab:nth-child(3) {
    top: 84px;
    left: 4px;
  }
  .conversation-examples__pause {
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    margin: 0;
  }
  .conversation-examples__pause img { width: 32px; height: 32px; }
  .conversation-examples__panel { margin-top: 18px; }
}

/* CONVERSATION EXAMPLES — final narrow-screen spacing. */
@media (max-width: 420px) {
  .conversation-examples {
    padding-top: 27px;
    padding-bottom: 0;
  }
  .conversation-examples__card {
    width: min(352px, calc(100% - 32px));
    height: auto;
    min-height: 0;
    padding-bottom: 20px;
  }
  .conversation-examples__header {
    height: 200px;
    padding: 24px 20px 0;
  }
  .conversation-examples__header h2 {
    font-size: 24px;
    line-height: 1.15;
  }
  .conversation-examples__toolbar {
    width: calc(100% - 40px);
    height: 128px;
  }
  .conversation-examples__toolbar::before { top: 123px; }
  .conversation-examples__tab:first-child {
    top: 0;
    left: 0;
    width: 200px;
  }
  .conversation-examples__tab:nth-child(2) {
    top: 43px;
    left: 0;
  }
  .conversation-examples__tab:nth-child(3) {
    top: 86px;
    left: 0;
  }
  .conversation-examples__pause { top: 0; right: 0; }
  .conversation-examples__panel {
    width: calc(100% - 40px);
    margin-top: 18px;
  }
  .conversation-examples__answer-preview { height: 678px; }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-examples *, .conversation-examples *::before, .conversation-examples *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* FREE QUESTIONS CTA — fixed centered compositions from Figma 2048:244. */
.free-questions {
  position: relative;
  width: 100%;
  height: 441px;
  overflow: hidden;
  padding: 0;
  color: #fff;
  background: #0058c5;
}
.free-questions__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  text-align: center;
}
.free-questions__icon,
.free-questions h2,
.free-questions__content > p,
.free-questions__cta,
.free-questions__decor { position: absolute; }
.free-questions__icon {
  top: 45px;
  left: 50%;
  width: 100px;
  height: 68px;
  object-fit: contain;
  transform: translateX(-50%);
}
.free-questions h2 {
  top: 125px;
  left: 50%;
  width: 375px;
  max-width: none;
  margin: 0;
  font: 400 32px/1.25 'PT Serif', serif;
  white-space: nowrap;
  transform: translateX(-50%);
}
.free-questions__mobile-break { display: none; }
.free-questions__content > p {
  top: 181px;
  left: 50%;
  width: 596px;
  margin: 0;
  font: 400 18px/1.45 Inter, sans-serif;
  transform: translateX(-50%);
}
.free-questions__content > p br { display: block; }
.free-questions__content > p strong { font-weight: 600; }
.free-questions__cta {
  top: 257px;
  left: 50%;
  display: flex;
  width: 360px;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  transform: translateX(-50%);
}
.free-questions__cta a {
  display: flex;
  width: 360px;
  max-width: none;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 900px;
  color: #fff;
  background: #f58665;
  font: 600 20px/1 Inter, sans-serif;
  text-decoration: none;
}
.free-questions__cta span { color: rgba(255, 255, 255, .8); font: 600 16px/18px Inter, sans-serif; white-space: nowrap; }
.free-questions__decor {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.free-questions__decor img { display: block; width: 100%; height: 100%; }
.free-questions__decor--left {
  bottom: .431px;
  left: calc(50% - 825.173px);
  width: 740.172px;
  height: 411.569px;
}
.free-questions__decor--left img { transform: rotate(180deg) scaleY(-1); transform-origin: center; }
.free-questions__decor--right {
  top: 66px;
  left: calc(50% + 144.199px);
  width: 640.668px;
  height: 351.714px;
}

/* Figma 2149:285 — fixed 534px canvas, centered and clipped. */
@media (min-width: 400px) and (max-width: 534px) {
  .free-questions { height: 514px; }
  .free-questions__icon { top: 72px; }
  .free-questions h2 {
    top: 156px;
    width: 340px;
    font-size: 29px;
  }
  .free-questions__content > p {
    top: 208px;
    width: 340px;
  }
  .free-questions__content > p strong { display: block; margin-top: 12px; }
  .free-questions__cta { top: 348px; }
  .free-questions__decor--left {
    top: 12px;
    bottom: auto;
    left: calc(50% - 715.173px);
  }
  .free-questions__decor--right {
    top: auto;
    bottom: 6.286px;
    left: calc(50% + 74.199px);
  }
}

/* Figma 2551:106 — fixed 320px canvas, centered and clipped. */
@media (max-width: 399px) {
  .free-questions { height: 574px; }
  .free-questions__icon { top: 90px; }
  .free-questions h2 { top: 162px; width: 205px; font-size: 29px; }
  .free-questions__mobile-break { display: initial; }
  .free-questions__content > p { top: 250px; width: 274px; }
  .free-questions__content > p strong { display: block; margin-top: 12px; }
  .free-questions__cta { top: 390px; width: 288px; }
  .free-questions__cta a { width: 288px; }
  .free-questions__decor--left {
    top: 30px;
    bottom: auto;
    left: calc(50% - 715.173px);
  }
  .free-questions__decor--right { top: auto; bottom: 24.286px; left: calc(50% + 74.199px); }
}

/* REFLECTION v2 — Figma 1777:213. New artwork and two layout states. */
.reflection {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 564px;
  overflow: hidden;
  padding: 0;
  color: #1b1b1b;
  background: #faf6f2;
}

.reflection__desktop-composition {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 564px;
  transform: translateX(-50%);
  transform-origin: top center;
}

.reflection__copy {
  position: absolute;
  top: 90px;
  left: calc(50% - 380px);
  display: flex;
  width: 440px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  transform: none;
  text-align: center;
  z-index: 2;
}

.reflection__message {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.reflection__message h2 {
  width: 350px;
  max-width: 100%;
  margin: 0;
  font: 400 32px/1.15 'PT Serif', serif;
}

.reflection__message h2 em { font-style: italic; }

.reflection__description {
  display: flex;
  width: 458px;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-size: 18px;
  line-height: 1.45;
}

.reflection__description p { width: 100%; margin: 0; }
.reflection__description p:last-child { width: 368px; max-width: 100%; font-weight: 600; }

.reflection__cta {
  display: flex;
  width: 358px;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reflection__cta a {
  display: flex;
  width: 358px;
  max-width: 100%;
  height: 64px;
  align-items: center;
  justify-content: center;
  padding: 21px 90px;
  border-radius: 900px;
  color: #fff;
  background: #278ee5;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.reflection__cta span {
  color: rgba(27, 27, 27, .5);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.reflection__art--desktop,
.reflection__line--desktop {
  position: absolute;
  display: block;
  z-index: 0;
}

.reflection__art--desktop,
.reflection__art--mobile {
  opacity: 0;
  animation: none !important;
}

.reflection.is-animated .reflection__art--desktop {
  animation: reflection-art-rise 1.35s cubic-bezier(.22, .8, .3, 1) .12s both !important;
  will-change: transform, opacity;
}

.reflection__art--desktop {
  top: 59px;
  left: calc(50% - 91px);
  width: 727px;
  height: 446px;
  opacity: 0;
  /* Cancel a legacy intermediate breakpoint offset from the previous block. */
  --reflection-shift-x: 0px;
}

.reflection__line--desktop {
  top: 86px;
  left: calc(50% - 713px);
  width: 423px;
  height: 468px;
}

/* The Figma 1440–790 layout stays at its designed size and is centered.
   At 790px and below, the separate vertical composition takes over. */

.reflection__art--mobile,
.reflection__stars--mobile { display: none; }

@media (max-width: 790px) {
  .reflection__desktop-composition {
    position: static;
    width: auto;
    height: auto;
    transform: none;
  }

  .reflection {
    height: auto;
    min-height: 794px;
  }

  .reflection__copy {
    top: 0;
    left: 0;
    width: 100%;
    gap: 0;
    transform: none;
  }

  .reflection__message {
    display: contents;
  }

  .reflection__message h2 {
    position: absolute;
    top: 90px;
    left: 50%;
    width: 350px;
    transform: translateX(-50%);
  }

  .reflection__description {
    display: contents;
  }

  .reflection__description p:first-child {
    position: absolute;
    top: 182px;
    left: 50%;
    width: 458px;
    max-width: calc(100% - 40px);
    transform: translateX(-50%);
  }

  .reflection__description p:last-child {
    position: absolute;
    top: 304px;
    left: 50%;
    width: 368px;
    max-width: calc(100% - 40px);
    transform: translateX(-50%);
  }

  .reflection__cta {
    position: absolute;
    top: 380px;
    left: 50%;
    width: 358px;
    transform: translateX(-50%);
  }

  .reflection__art--desktop,
  .reflection__line--desktop { display: none; }

  .reflection__art--mobile {
    position: absolute;
    top: 474px;
    left: 50%;
    display: block;
    width: 706px;
    height: 320px;
    overflow: hidden;
    transform: translateX(-50%);
  }

  .reflection.is-animated .reflection__art--mobile {
    animation: reflection-art-rise-stack 1.35s cubic-bezier(.22, .8, .3, 1) .12s both !important;
    will-change: transform, opacity;
  }

  .reflection__art-tablet {
    position: absolute;
    top: 7.5px;
    left: 24.48px;
    display: block;
    width: 666.74px;
    height: 359.24px;
  }

  .reflection__art-mobile-lines,
  .reflection__art-mobile-bird { display: none; }

  .reflection__stars--mobile {
    position: absolute;
    top: 52px;
    left: 50%;
    display: block;
    width: 670.49px;
    height: 259px;
    transform: translateX(calc(-50% + .24px));
  }

}

@media (max-width: 480px) {
  .reflection { height: auto; min-height: 769px; }

  .reflection__message h2 {
    top: 62px;
    width: 294px;
    font-size: 30px;
  }
  .reflection__description p:first-child {
    top: 182px;
    width: 288px;
    font-size: 18px;
  }
  .reflection__description p:last-child {
    top: 356px;
    width: 250px;
    font-size: 18px;
  }
  .reflection__cta {
    top: 452px;
    width: min(328px, calc(100% - 32px));
  }
  .reflection__cta a { width: 100%; }

  .reflection__art--mobile {
    top: 552px;
    width: 462.632px;
    height: 217px;
    opacity: 1;
    animation: none !important;
  }

  .reflection__art-tablet { display: none; }
  .reflection__art-mobile-lines,
  .reflection__art-mobile-bird {
    position: absolute;
    display: block;
    max-width: none;
  }
  .reflection__art-mobile-lines {
    top: 29.128px;
    left: -.625px;
    width: 463.667px;
    height: 226.275px;
  }
  .reflection__art-mobile-bird {
    top: .367px;
    left: 29.401px;
    width: 390.925px;
    height: 151.819px;
    opacity: 0;
    transform: translateY(48px) scale(.96);
    transform-origin: center bottom;
  }

  .reflection.is-animated .reflection__art--mobile {
    opacity: 1;
    animation: none !important;
  }

  .reflection.is-animated .reflection__art-mobile-bird {
    animation: reflection-bird-rise 1.35s cubic-bezier(.22, .8, .3, 1) .12s both;
    will-change: transform, opacity;
  }

  .reflection__stars--mobile {
    top: 22px;
    height: 225px;
    clip-path: inset(0 0 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reflection__art--desktop,
  .reflection__art--mobile,
  .reflection__art-mobile-bird {
    opacity: 1 !important;
    animation: none !important;
    transform: none;
  }

  .reflection__art--mobile { transform: translateX(-50%); }
}

/* REVIEWS V2 — Figma 1819:365 */
.reviews-v2 {
  position: relative;
  height: 795px;
  overflow: hidden;
  color: #1b1b1b;
  background: #fff;
}

.reviews-v2__header {
  position: absolute;
  top: 90px;
  left: 50%;
  display: flex;
  width: 510px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
  text-align: center;
}

.reviews-v2__header h2 {
  width: 510px;
  margin: 0;
  font: 400 40px/1.15 'PT Serif', serif;
}

.reviews-v2__header h2 em { font-style: italic; }
.reviews-v2__title-break { display: none; }

.reviews-v2__header p {
  margin: 0;
  color: #f58665;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.reviews-v2__viewport {
  position: absolute;
  top: 255px;
  left: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
  touch-action: pan-y;
}

.reviews-v2__track {
  display: flex;
  width: max-content;
  gap: 24px;
  margin-left: max(48px, calc((100vw - 1140px) / 2));
  transition: transform 420ms cubic-bezier(.22, .8, .3, 1);
}

.reviews-v2__track.is-dragging { transition: none; }


.reviews-v2__card {
  display: flex;
  flex: 0 0 364px;
  width: 364px;
  height: 500px;
  box-sizing: border-box;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border-radius: 24px;
  background: #f8f8f8;
  cursor: pointer;
}

.reviews-v2__quote {
  display: block;
  flex: 0 0 40px;
  width: 50px;
  height: 40px;
  margin: 0 0 32px;
}

.reviews-v2__text {
  max-width: 295px;
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.45;
}

.reviews-v2__author {
  margin: auto 0 0;
  color: rgba(27, 27, 27, .5);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.reviews-v2__controls {
  position: absolute;
  top: 175px;
  right: max(48px, calc((100vw - 1140px) / 2));
  display: flex;
  gap: 8px;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.reviews-v2__arrow {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: #313131;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}

.reviews-v2__arrow img {
  display: block;
  width: 48px;
  height: 48px;
}
.reviews-v2__arrow--prev img { transform: rotate(90deg); }
.reviews-v2__arrow--next img { transform: rotate(-90deg); }
.reviews-v2__arrow:hover { background: #403f3f; }
.reviews-v2__arrow:active { transform: scale(.94); }

.reviews-v2__pagination {
  position: absolute;
  top: 787px;
  left: 50%;
  width: 220px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e0e0e0;
  transform: translateX(-50%);
}

.reviews-v2__pagination span {
  display: block;
  width: 139px;
  height: 8px;
  border-radius: inherit;
  background: #f58665;
  transition: width 320ms ease;
}

@media (max-width: 848px) {
  .reviews-v2 { height: 795px; }
  .reviews-v2__controls { opacity: 1; pointer-events: auto; }
}

@media (min-width: 481px) and (max-width: 848px) {
  .reviews-v2 { height: 855px; }
  .reviews-v2__viewport { top: 315px; }
  .reviews-v2__controls {
    top: 235px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .reviews-v2__pagination { top: 847px; }
}

@media (max-width: 480px) {
  .reviews-v2 { height: 867px; }
  .reviews-v2__track { margin-left: 20px; }
  .reviews-v2__viewport { top: 327px; }
  .reviews-v2__controls {
    top: 255px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .reviews-v2__pagination { top: 859px; }
}

@media (min-width: 481px) and (max-width: 800px) {
  .reviews-v2 { height: 859px; }
  .reviews-v2__viewport { top: 319px; }
  .reviews-v2__controls { top: 247px; }
  .reviews-v2__pagination { top: 851px; }
}

/* Final narrow/mobile corrections. */
@media (max-width: 480px) {
  .reviews-v2__header h2 {
    width: calc(100vw - 40px);
    font-size: 32px;
  }

  .reviews-v2__title-break { display: block; }

  .security {
    height: auto;
    min-height: 0;
    padding: 90px 20px;
  }
  .security__copy {
    width: 100%;
    gap: 24px;
  }
  .security__copy h2 { font-size: 28px; }
  .security__copy p { font-size: 18px; }
  .security__card {
    height: auto;
    min-height: 233px;
    margin-top: 24px;
  }

  .plans .free-banner__copy,
  .plans .free-banner__copy strong,
  .plans .free-banner__clarifications {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .reviews-v2__viewport { top: 323px; }

  .plans .free-banner {
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    text-align: center;
    gap: 16px;
  }
  .plans .free-banner__icon { flex: 0 0 auto; }
  .plans .free-banner__copy {
    flex: 0 0 auto;
    width: 100%;
  }
  .plans .free-banner__cta {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
  }

  .plans .plan-card {
    box-sizing: border-box;
    overflow: hidden;
  }
  .plans .plan-card__heading,
  .plans .plan-card__lead,
  .plans .plan-card__description,
  .plans .plan-card__features,
  .plans .plan-card__features li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .plans .plan-card__heading { flex-wrap: wrap; }
  .plans .plan-card__lead,
  .plans .plan-card__description { width: 100%; }
  .plans .plan-card__features li { align-items: flex-start; }
  .plans .plan-card__features li img { flex: 0 0 28px; }
}

@media (max-width: 420px) {
  .conversation-examples__title-break { display: none; }
}

/* FINAL SECTION RHYTHM — responsive section spacing remains 90px. */
@media (max-width: 850px) {
  .hero-points { padding-bottom: 90px; }
  .conversation-examples { padding-top: 90px; }
}

@media (max-width: 850px) {
  .conversation-examples {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .reviews-v2__controls { top: 215px; }
  .reviews-v2__viewport { top: 283px; }
}

/* Expanded conversation content must determine the card height. */
.conversation-examples__card:has(.conversation-examples__preview.is-expanded) {
  height: auto;
}

/* FAQ already owns the shared outer gap; do not double it on the final CTA. */
.final-cta-v2 { margin-top: 0; }

@media (max-width: 420px) {
  .conversation-examples__header { height: 131px; }

  .plans .free-banner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0 16px;
  }
  .plans .free-banner__icon { flex: 0 0 64px; }
  .plans .free-banner__copy {
    flex: 1 1 calc(100% - 80px);
    width: auto;
  }
  .plans .free-banner__cta {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 16px;
  }

  .plans .plan-card--full .plan-card__heading {
    flex-wrap: nowrap;
    align-items: center;
  }
  .plans .plan-card__badge {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

@media (max-width: 480px) {
  .reviews-v2__pagination {
    top: 807px;
  }
}

@media (max-width: 480px) {
  .hero-points {
    padding-top: 45px;
  }

  .plans .free-banner {
    width: min(560px, calc(100vw - 40px));
    max-width: 100%;
    height: auto;
    min-height: 340px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 44px 20px;
    gap: 0;
  }
  .plans .free-banner__icon {
    width: 64px;
    height: 64px;
    margin: 0 0 16px;
  }
  .plans .free-banner__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  .plans .free-banner__copy strong {
    font-size: 20px;
    line-height: 1.3;
  }
  .plans .free-banner__copy > span {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.35;
  }
  .plans .free-banner__cta {
    width: 100%;
    margin-top: 16px;
    gap: 8px;
  }
  .plans .free-banner__cta a { height: 64px; }
}

@media (max-width: 480px) {
  .security__label span {
    display: inline-block;
    white-space: nowrap;
  }
}

/* Center the feature text frames on mobile and tablet layouts. */
@media (max-width: 850px) {
  .hero-points__inner {
    align-items: center;
  }

  .hero-point {
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 851px) {
  .site-header__actions {
    margin-left: auto;
  }

  .site-header__nav {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
}

@media (min-width: 851px) and (max-width: 999px) {
  .site-header__nav {
    position: static;
    margin: 0 auto;
    transform: none;
    gap: 10px;
  }

  .site-header__actions {
    margin-left: 16px;
  }
}

/* Tablet composition: keep the section flush with the next blue block. */
@media (min-width: 481px) and (max-width: 850px) {
  .conversation-examples {
    padding-bottom: 0;
  }
}

/* Keep the plan description-to-features rhythm explicit and non-collapsing. */
.plans .plan-card__description {
  margin-bottom: 0 !important;
}

.plans .plan-card__features {
  padding-top: 24px;
}

@media (max-width: 772px) {
  .plans .plan-card__description {
    margin: 0 0 24px !important;
  }

  .plans .plan-card__features {
    margin-top: 0;
  }
}

/* Pricing cards: the list starts exactly 24px after its description. */
.plans .plan-card__description {
  margin-bottom: 0 !important;
}

.plans .plan-card__features {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  padding-top: 24px !important;
}

/* Final 491px layout corrections. */
@media (min-width: 421px) and (max-width: 560px) {
  .security {
    min-height: 0;
    height: auto;
    padding: 90px 40px;
  }

  .security__card {
    height: auto;
    min-height: 0;
    padding: 24px;
  }

  .conversation-examples {
    padding-top: 90px;
  }

  .conversation-examples__card {
    width: calc(100% - 32px);
    height: auto;
    min-height: 988px;
  }

  .conversation-examples__header {
    height: 200px;
    padding: 32px 24px 0;
  }

  .conversation-examples__header h2 {
    width: 100%;
    max-width: 100%;
    font-size: 32px;
    line-height: 1.15;
  }

  .conversation-examples__toolbar {
    width: calc(100% - 40px);
    height: 91px;
    margin: 0 auto;
  }

  .conversation-examples__tabs {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 11px 18px;
  }

  .conversation-examples__tab {
    position: static;
    height: 31px;
    padding-bottom: 8px;
    font-size: 20px;
    line-height: 23px;
  }

  .conversation-examples__tab:first-child {
    flex-basis: 220px;
  }

  .conversation-examples__pause {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    margin: 0;
  }

  .conversation-examples__pause img {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  body { background: #faf6f2; }

  .reviews-v2__header h2 { font-size: 32px; }
  .reviews-v2__track {
    margin-left: 32px;
    gap: 16px;
  }
  .reviews-v2__card {
    flex-basis: calc(100vw - 64px);
    width: calc(100vw - 64px);
    padding: 20px;
  }
  .reviews-v2__text { max-width: 100%; font-size: 20px; }

  .plans .free-banner {
    display: flex;
    width: 300px;
    min-height: 340px;
    height: auto;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 44px 24px;
    gap: 0;
    text-align: left;
  }

  .plans .free-banner__break {
    display: block;
  }

  .plans .free-banner__clarifications {
    white-space: nowrap;
  }
  .plans .free-banner__icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin-bottom: 48px;
  }
  .plans .free-banner__copy {
    flex: 0 0 auto;
    width: 100%;
  }
  .plans .free-banner__copy strong {
    display: block;
    font-size: 24px;
    line-height: 1.45;
  }
  .plans .free-banner__clarifications { white-space: nowrap; }
  .plans .free-banner__cta {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 32px;
  }
}

@media (max-width: 420px) {
  .conversation-examples__header { padding-top: 24px; }
  .foundations__intro h2 { font-size: 28px; }
}

@media (max-width: 399px) {
  .foundations__mobile-break { display: inline; }
}

/* Mobile pricing free card: match the 300x340 Figma layout. */
@media (max-width: 480px) {
  .plans .free-banner {
    width: min(560px, calc(100vw - 40px));
    max-width: 100%;
    height: auto;
    min-height: 340px;
    box-sizing: border-box;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    gap: 0;
    text-align: left;
  }

  .plans .free-banner__icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0 0 16px;
  }

  .plans .free-banner > .free-banner__copy {
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }

  .plans .free-banner__copy strong {
    display: block;
    font-size: clamp(20px, 7.2vw, 23px);
    line-height: 1.45;
    overflow-wrap: normal;
  }

  .plans .free-banner__clarifications { white-space: normal; }

  .plans .free-banner__copy > span {
    display: block;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.35;
  }

  .plans .free-banner__cta {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    gap: 8px;
    align-self: stretch;
  }

  .plans .free-banner__cta a {
    width: 100%;
    max-width: 100%;
    height: 64px;
    padding: 21px 24px;
    font-size: 18px;
  }
}

/* Final mobile cleanup: let content define card heights and remove the
   artificial gap between the FAQ and the final CTA. */
@media (max-width: 772px) {
  .plans .plan-card--full { order: -1; }

  .plans .plan-card {
    display: flex;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column;
  }

  .plans .plan-card__button {
    position: static;
    width: 100%;
    margin-top: 24px;
  }
}

@media (max-width: 720px) {
  .faq {
    min-height: 0;
    height: auto;
    padding-bottom: 90px;
  }
  .final-cta-v2 { margin-top: 0; }
}

@media (min-width: 421px) and (max-width: 690px) {
  .conversation-examples__card {
    padding-bottom: 20px !important;
  }

  .conversation-examples__full-toggle {
    margin-bottom: 20px !important;
  }

  .conversation-examples__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    justify-items: center;
  }

  .conversation-examples__tab {
    position: static;
    width: auto;
  }

  .conversation-examples__tab:first-child {
    grid-column: 1 / -1;
    width: auto;
  }
}

@media (min-width: 561px) and (max-width: 690px) {
  .conversation-examples__header h2 {
    width: 100%;
    max-width: 100%;
    font-size: 32px;
  }
}

@media (min-width: 421px) and (max-width: 560px) {
  .conversation-examples__header {
    height: 130px;
  }
}

@media (max-width: 420px) {
  .conversation-examples__header {
    height: 131px;
  }

  .conversation-examples__toolbar::before {
    top: 128px;
  }

  .conversation-examples {
    padding-bottom: 0 !important;
  }

  .conversation-examples__card {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 20px;
  }
}

/* Keep the conversation plate fluid while preserving 20px side gutters. */
@media (max-width: 1344px) {
  .conversation-examples__card {
    width: calc(100% - 40px);
    max-width: 1344px;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .reviews-v2 {
    height: calc(325px + var(--reviews-mobile-card-height, 500px));
  }

  .reviews-v2__viewport {
    height: var(--reviews-mobile-card-height, 500px);
  }

  .reviews-v2__track { align-items: stretch; }
  .reviews-v2__card { height: auto; min-height: 0; }

  .reviews-v2__pagination {
    top: calc(301px + var(--reviews-mobile-card-height, 500px));
  }
}

/* Conversation examples — exact Figma 2149:268 responsive frames. */
@media (min-width: 481px) and (max-width: 690px) {
  .conversation-examples { height: 920px; padding: 0 !important; }
  .conversation-examples__card { position: relative; width: min(626px, calc(100% - 40px)) !important; height: 830px !important; min-height: 830px !important; margin: 72px auto 0; padding: 0; border-radius: 24px; }
  .conversation-examples__header { position: absolute; top: 25px; left: 50%; width: 398px; height: 74px; padding: 0; transform: translateX(-50%); }
  .conversation-examples__header h2 { width: 398px !important; max-width: none; font-size: 32px; line-height: 1.15; transform: none; }
  .conversation-examples__toolbar { position: absolute; top: 123px; left: 50%; width: 388px; height: 91px; margin: 0; transform: translateX(-50%); }
  .conversation-examples__tabs { display: contents; }
  .conversation-examples__tab { position: absolute; height: 32px; padding-bottom: 6px; font-size: 20px; line-height: 23px; }
  .conversation-examples__tab:first-child { top: 0; left: 0; width: 220px; }
  .conversation-examples__tab:nth-child(2) { top: 50px; left: 0; }
  .conversation-examples__tab:nth-child(3) { top: 50px; left: 134px; }
  .conversation-examples__pause { top: 38px; right: 0; width: 32px; height: 32px; margin: 0; }
  .conversation-examples__pause img { width: 32px; height: 32px; }
  .conversation-examples__toolbar::before { top: 91px; width: 626px; }
  .conversation-examples__panel { position: absolute; top: 238px; left: 50%; width: 388px; min-height: 0; margin: 0; transform: translateX(-50%); }
  .conversation-examples__question { width: 340px; margin: 0 0 12px auto; padding: 12px 16px; font-size: 18px; }
  .conversation-examples__answer-label { margin-top: 0; font-size: 18px; }
  .conversation-examples__answer-preview { height: 360px; font-size: 18px; }
  .conversation-examples__full-toggle { width: 385px; margin: 10px auto 0; font-size: 18px; }
}

@media (min-width: 361px) and (max-width: 480px) {
  .conversation-examples { height: 990px; padding: 0 !important; }
  .conversation-examples__card { position: relative; width: calc(100% - 48px) !important; height: 900px !important; min-height: 900px !important; margin: 45px auto 0; padding: 0; border-radius: 24px; }
  .conversation-examples__header { position: absolute; top: 32px; left: 50%; width: 312px; height: 64px; padding: 0; transform: translateX(-50%); }
  .conversation-examples__header h2 { width: 312px !important; max-width: none; font-size: 28px; line-height: 1.15; transform: none; }
  .conversation-examples__toolbar { position: absolute; top: 123px; left: 50%; width: 312px; height: 91px; margin: 0; transform: translateX(-50%); }
  .conversation-examples__tabs { display: contents; }
  .conversation-examples__tab { position: absolute; height: 32px; padding-bottom: 6px; font-size: 20px; line-height: 23px; }
  .conversation-examples__tab:first-child { top: 0; left: 0; width: 220px; }
  .conversation-examples__tab:nth-child(2) { top: 50px; left: 4px; }
  .conversation-examples__tab:nth-child(3) { top: 50px; left: 138px; }
  .conversation-examples__pause { top: 0; right: 0; width: 32px; height: 32px; margin: 0; }
  .conversation-examples__pause img { width: 32px; height: 32px; }
  .conversation-examples__toolbar::before { top: 91px; width: 432px; }
  .conversation-examples__panel { position: absolute; top: 238px; left: 50%; width: 312px; min-height: 0; margin: 0; transform: translateX(-50%); }
  .conversation-examples__question { width: 233px; margin: 0 0 12px auto; padding: 12px 16px; font-size: 18px; }
  .conversation-examples__answer-label { margin-top: 0; font-size: 18px; }
  .conversation-examples__answer-preview { height: 420px; font-size: 18px; }
  .conversation-examples__full-toggle { width: 316px; margin: 10px auto 0; font-size: 18px; }
}

@media (max-width: 360px) {
  .conversation-examples { height: 1360px; padding: 0 !important; }
  .conversation-examples__card { position: relative; width: calc(100% - 18px) !important; height: 1262px !important; min-height: 1262px !important; margin: 45px auto 0; padding: 0; border-radius: 24px; }
  .conversation-examples__header { position: absolute; top: 32px; left: 15px; width: 312px; height: 64px; padding: 0; transform: none; }
  .conversation-examples__header h2 { width: 312px !important; max-width: none; font-size: 28px; line-height: 1.15; transform: none; }
  .conversation-examples__toolbar { position: absolute; top: 123px; left: 15px; width: 312px; height: 91px; margin: 0; transform: none; }
  .conversation-examples__tabs { display: contents; }
  .conversation-examples__tab { position: absolute; height: 32px; padding-bottom: 6px; font-size: 20px; line-height: 23px; }
  .conversation-examples__tab:first-child { top: 0; left: 0; width: 220px; }
  .conversation-examples__tab:nth-child(2) { top: 50px; left: 4px; }
  .conversation-examples__tab:nth-child(3) { top: 50px; left: 138px; }
  .conversation-examples__pause { top: 0; right: 0; width: 32px; height: 32px; margin: 0; }
  .conversation-examples__pause img { width: 32px; height: 32px; }
  .conversation-examples__toolbar::before { top: 91px; left: -45px; width: 432px; transform: none; }
  .conversation-examples__panel { position: absolute; top: 238px; left: 15px; width: 312px; min-height: 0; margin: 0; transform: none; }
  .conversation-examples__question { width: 233px; margin: 0 0 12px auto; padding: 12px 16px; font-size: 18px; }
  .conversation-examples__answer-label { margin-top: 0; font-size: 18px; }
  .conversation-examples__answer-preview { height: 784px; font-size: 18px; }
  .conversation-examples__full-toggle { width: 316px; margin: 10px auto 0; font-size: 18px; }
}

/* Conversation examples — section gutters and non-collapsing Figma offsets. */
@media (min-width: 691px) {
  .conversation-examples {
    padding: 90px 48px 0 !important;
  }
}

@media (min-width: 481px) and (max-width: 690px) {
  .conversation-examples {
    padding-top: 90px !important;
    height: 920px;
  }

  .conversation-examples__card {
    margin-top: 0;
  }
}

@media (min-width: 361px) and (max-width: 480px) {
  .conversation-examples {
    padding-top: 90px !important;
  }

  .conversation-examples__card {
    margin-top: 0;
  }
}

@media (max-width: 360px) {
  .hero { height: 926px; }

  .conversation-examples {
    padding-top: 90px !important;
  }

  .conversation-examples__card {
    margin-top: 0;
  }
}

/* Mobile: keep the transition from the answer card to the CTA continuous. */
@media (max-width: 480px) {
  .conversation-examples {
    height: 990px;
  }
}

/* A full answer must grow its own card instead of being clipped by its preview frame. */
@supports selector(.conversation-examples__card:has(.conversation-examples__preview.is-expanded)) {
  .conversation-examples:has(.conversation-examples__preview.is-expanded) {
    height: auto !important;
  }

  .conversation-examples__card:has(.conversation-examples__preview.is-expanded) {
    height: auto !important;
    min-height: 894px !important;
  }

  @media (max-width: 690px) {
    .conversation-examples__card:has(.conversation-examples__preview.is-expanded) {
      min-height: 0 !important;
      padding: 238px 0 24px !important;
    }

    .conversation-examples__card:has(.conversation-examples__preview.is-expanded) .conversation-examples__panel {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      margin: 0 auto !important;
      transform: none !important;
    }
  }
}

/* Conversation examples — Figma 2528:81, 360–320px fixed composition. */
@media (max-width: 360px) {
  .conversation-examples {
    height: 1020px;
    padding-top: 90px !important;
  }

  .conversation-examples__card {
    width: calc(100% - 18px) !important;
    height: 930px !important;
    min-height: 930px !important;
    margin-top: 0;
  }

  .conversation-examples__header {
    top: 36px;
    left: 50%;
    width: 282px;
    height: 60px;
    transform: translateX(-50%);
  }

  .conversation-examples__header h2 {
    width: 282px !important;
    font-size: 26px;
  }

  .conversation-examples__toolbar {
    top: 123px;
    left: 50%;
    width: 282px;
    height: 120px;
    transform: translateX(-50%);
  }

  .conversation-examples__tab:nth-child(2) { top: 50px; left: 4px; }
  .conversation-examples__tab:nth-child(3) { top: 100px; left: 0; }
  .conversation-examples__pause { right: 0; }
  .conversation-examples__toolbar::before { top: 141px; left: calc((100% - 342px) / 2 - 30px); width: 432px; }

  .conversation-examples__panel {
    top: 288px;
    left: 50%;
    width: 282px;
    transform: translateX(-50%);
  }

  .conversation-examples__question { margin-bottom: 16px; }
  .conversation-examples__answer-preview { height: 400px; }
  .conversation-examples__full-toggle {
    position: static;
    width: 282px;
    margin: 10px 0;
  }
}

/* Keep the collapsed answer CTA discoverable on tablet-sized screens too. */
@media (min-width: 691px) and (max-width: 1024px) {
  .conversation-examples__answer-preview { height: 360px; }
  .conversation-examples__panel { min-height: 548px; }
  .conversation-examples__card { min-height: 824px; }
}

/* Mobile section rhythm: reduce only existing 90px outer gaps.
   Explicit zero-gap joins remain untouched. */
@media (max-width: 480px) {
  :root { --landing-section-gap: 60px; }

  .hero-points { padding-bottom: 60px; }
  .conversation-examples { padding-top: 60px !important; }
  .security { padding: 60px 20px; }
  .faq { padding-bottom: 60px; }
  .final-cta-v2 { margin-top: 0; }
}

@media (min-width: 361px) and (max-width: 480px) {
  .conversation-examples { height: 960px; }
}

@media (max-width: 360px) {
  .conversation-examples { height: 990px; }
}

/* Final mobile refinements from Figma 2953:93 and annotated QA. */
@media (max-width: 480px) {
  .hero__title { font-size: 46px; }
  .hero__note { top: 727px; }

  .foundations { gap: 24px; }

  .reflection__description p:last-child { top: 329px; }
  .reflection__cta { top: 425px; }

  .plans .plans-header h2,
  .plans h2 { margin-bottom: 24px; }

  .conversation-examples {
    padding-top: 148px !important;
  }

  .conversation-examples__card {
    overflow: visible;
  }

  .conversation-examples__header {
    top: -91px;
    left: 50%;
    width: calc(100vw - 40px);
    height: 68px;
    transform: translateX(-50%);
    color: #fff;
  }

  .conversation-examples__header h2 {
    width: 100% !important;
    max-width: 420px;
    font-size: 32px;
    text-align: center;
  }

  /* Keep the reflection composition aligned after the mobile copy adjustments. */
  .reflection__message h2 { top: 60px; }
  .reflection__art--mobile { top: 525px; }
  .reflection__art-mobile-bird {
    top: -20px;
    left: 16px;
    width: 430px;
    height: 167px;
  }
}

@media (min-width: 361px) and (max-width: 480px) {
  .conversation-examples { height: 948px; }
  .conversation-examples__card {
    height: 800px !important;
    min-height: 800px !important;
  }
  .conversation-examples__toolbar { top: 32px; }
  .conversation-examples__panel { top: 147px; }

  @supports selector(.conversation-examples__card:has(.conversation-examples__preview.is-expanded)) {
    .conversation-examples__card:has(.conversation-examples__preview.is-expanded) {
      padding-top: 147px !important;
    }
  }
}

@media (min-width: 361px) and (max-width: 420px) {
  .hero__title { font-size: 42px; }
}

@media (max-width: 360px) {
  .hero__title { font-size: 38px; }
  .hero__note { top: 753px; }

  .reflection__description p:last-child { top: 354px; }
  .reflection__cta { top: 450px; }

  .conversation-examples { height: 978px; }
  .conversation-examples__card {
    height: 830px !important;
    min-height: 830px !important;
  }
  .conversation-examples__toolbar { top: 32px; }
  .conversation-examples__panel { top: 197px; }

  @supports selector(.conversation-examples__card:has(.conversation-examples__preview.is-expanded)) {
    .conversation-examples__card:has(.conversation-examples__preview.is-expanded) {
      padding-top: 197px !important;
    }
  }
}

/* Keep the mobile curl physically attached to the italic title line. */
@media (max-width: 480px) {
  .hero__title-line {
    display: inline-flex;
    align-items: flex-end;
    white-space: nowrap;
  }

  .hero .hero__title-line picture {
    position: static;
    display: block;
    width: 82px;
    height: 39px;
    flex: 0 0 82px;
    margin-left: 4px;
    transform: translateY(-4px);
  }

  .hero-points { padding-top: 24px; }

  /* Security: one mobile content grid for both the copy and the data card. */
  .security__copy,
  .security__card {
    width: 100%;
    max-width: none;
  }

  .security__card {
    padding: 24px;
  }

  .security__text {
    font-size: 18px;
    line-height: 1.45;
  }

  .faq-title h2,
  .reviews-v2__header h2 {
    font-size: 40px;
  }
}

@media (max-width: 360px) {
  .hero .hero__title-line picture {
    width: 70px;
    height: 33px;
    flex-basis: 70px;
  }

  /* The three-line conversation title needs its own space above the card. */
  .conversation-examples {
    height: 1014px;
    padding-top: 184px !important;
  }

  .conversation-examples__header {
    top: -127px;
    height: 109px;
  }
}

/* Final pre-publish alignment. */
@media (max-width: 480px) {
  /* One scale for primary mobile section headings. Hero and final CTA are excluded. */
  .foundations__intro h2,
  .explore__header h2,
  .reflection__message h2,
  .conversation-examples__header h2,
  .free-questions h2,
  .reviews-v2__header h2,
  .security__copy h2,
  .plans-header h2,
  .faq-title h2 {
    font-size: 32px !important;
    line-height: 1.15;
  }

  .free-questions h2 {
    width: calc(100% - 40px);
    white-space: normal;
  }

  /* Restore the exact Figma 2621:237 bird composition. */
  .reflection__art--mobile { top: 552px; }
  .reflection__art-mobile-bird {
    top: -24px;
    left: 11px;
    width: 440px;
    height: 171px;
  }

  .security__copy {
    align-items: center;
    text-align: center;
  }

  /* 24px rhythm between the reflection heading and supporting copy. */
  .reflection { min-height: 781px; }
  .reflection__description p:first-child { top: 194px; }
  .reflection__description p:last-child { top: 341px; }
  .reflection__cta { top: 437px; }
  .reflection__art--mobile { top: 564px; }
}

@media (max-width: 360px) {
  /* The narrow four-line reviews title gets enough room without overlap. */
  .reviews-v2 { height: 910px; }
  .reviews-v2__controls { top: 302px; }
  .reviews-v2__viewport { top: 370px; }
  .reviews-v2__pagination { top: 886px; }

  .reflection__description p:last-child { top: 366px; }
  .reflection__cta { top: 462px; }

  /* Fit the complete Figma bird-and-stars composition into narrow screens. */
  .reflection { min-height: calc(592px + 55.2vw); }
  .reflection__art--mobile {
    top: 568px;
    left: 0;
    width: 100vw;
    height: 55.2vw;
    transform: none;
  }
  .reflection__art-mobile-lines {
    top: 6.3vw;
    left: -.14vw;
    width: 100.23vw;
    height: 48.9vw;
  }
  .reflection__art-mobile-bird {
    top: 0;
    left: 2.38vw;
    width: 95.1vw;
    height: 36.96vw;
  }
  .reflection__stars--mobile { display: none; }

  .conversation-examples__header { top: -134px; }

  .final-cta-v2__copy {
    left: 20px;
    width: calc(100% - 40px);
  }
  .final-cta-v2__copy h2,
  .final-cta-v2__actions,
  .final-cta-v2__actions a {
    width: 100%;
  }
}

@media (max-width: 479px) {
  /* The complete final CTA composition starts 60px from the section edge. */
  .final-cta-v2 { min-height: 686px; }
  .final-cta-v2__copy { top: 60px; }
  .final-cta-v2__mockup { top: 230px; }
}

@media (min-width: 691px) {
  /* Let collapsed desktop content define the card height; expanded copy still grows it. */
  .conversation-examples__card,
  .conversation-examples__preview,
  .conversation-examples__panel {
    min-height: 0;
  }

  .conversation-examples__panel { margin-bottom: 32px; }
}

/* Stable mobile composition: full 706×320 tablet artwork, exported as one SVG. */
.reflection__art-mobile-combined { display: none; }

@media (max-width: 480px) {
  .reflection__art--mobile {
    top: 564px;
    left: 50%;
    width: 462.632px;
    height: 209.717px;
    transform: translateX(-50%);
    overflow: hidden;
  }

  .reflection__art-mobile-combined {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .reflection__art-mobile-lines,
  .reflection__art-mobile-bird {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .reflection {
    min-height: 778px;
  }

  .reflection__art--mobile {
    top: 568px;
    left: 50%;
    width: 462.632px;
    height: 209.717px;
    transform: translateX(-50%);
  }
}

/* Figma 3040:310 — unchanged two-row toolbar from 480px down to 361px. */
@media (min-width: 361px) and (max-width: 480px) {
  .conversation-examples {
    height: 950px;
    padding-top: 150px !important;
  }

  .conversation-examples__header {
    top: -90px;
    width: min(312px, calc(100vw - 48px));
    height: 66px;
  }

  .conversation-examples__header h2 {
    width: 100% !important;
    font-size: 28px !important;
    line-height: 1.15;
  }

  .conversation-examples__card {
    width: calc(100% - 32px) !important;
    height: 800px !important;
    min-height: 800px !important;
    margin: 0 auto;
  }

  .conversation-examples__toolbar {
    top: 32px;
    left: 50%;
    width: 319px;
    height: 91px;
    transform: translateX(-50%);
  }

  .conversation-examples__tabs {
    display: contents;
  }

  .conversation-examples__tab,
  .conversation-examples__tab:first-child,
  .conversation-examples__tab:nth-child(2),
  .conversation-examples__tab:nth-child(3) {
    position: absolute;
    height: 32px;
    padding-bottom: 6px;
    font-size: 20px;
    line-height: 23px;
    white-space: nowrap;
  }

  .conversation-examples__tab:first-child {
    top: 0;
    left: 0;
    width: 220px;
  }

  .conversation-examples__tab:nth-child(2) { top: 50px; left: 4px; width: auto; }
  .conversation-examples__tab:nth-child(3) { top: 50px; left: 138px; width: auto; }

  .conversation-examples__pause {
    top: 0;
    right: 7px;
  }

  .conversation-examples__toolbar::before {
    top: 91px;
    left: -60px;
    width: 432px;
    transform: none;
  }

  .conversation-examples__panel { top: 147px; }
}

/* Figma 3040:231/255 — three rows keep every label intact at 360–320px. */
@media (max-width: 360px) {
  .conversation-examples {
    height: 980px;
    padding-top: 150px !important;
  }

  .conversation-examples__card {
    width: min(342px, calc(100% - 18px)) !important;
    height: 830px !important;
    min-height: 830px !important;
    margin: 0 auto;
  }

  .conversation-examples__header {
    top: -90px;
    left: 50%;
    width: min(312px, calc(100vw - 8px));
    height: 66px;
    transform: translateX(-50%);
  }

  .conversation-examples__header h2 {
    width: 100% !important;
    font-size: 28px !important;
    line-height: 1.15;
  }

  .conversation-examples__toolbar {
    top: 32px;
    left: 50%;
    width: 282px;
    height: 141px;
    transform: translateX(-50%);
  }

  .conversation-examples__tabs { display: contents; }
  .conversation-examples__tab { position: absolute; font-size: 20px; line-height: 23px; }
  .conversation-examples__tab:first-child { top: 0; left: 0; width: 220px; }
  .conversation-examples__tab:nth-child(2) { top: 50px; left: 4px; width: auto; }
  .conversation-examples__tab:nth-child(3) { top: 100px; left: 0; width: auto; }
  .conversation-examples__pause { top: 0; right: 0; }

  .conversation-examples__toolbar::before {
    top: 141px;
    left: -30px;
    width: 342px;
    transform: none;
  }

  .conversation-examples__panel {
    top: 197px;
    left: 50%;
    width: 282px;
    transform: translateX(-50%);
  }
}

/* Expanded answer: the space below the button matches the 32px top inset. */
@media (max-width: 690px) {
  .conversation-examples__card:has(.conversation-examples__preview.is-expanded) {
    padding-bottom: 32px !important;
  }

  .conversation-examples__preview.is-expanded .conversation-examples__full-toggle {
    margin-bottom: 0 !important;
  }
}

/* Mobile free CTA: keep a stable 24px rhythm between text blocks. */
@media (max-width: 399px) {
  .free-questions__content h2 { top: 162px; }
  .free-questions__content > p { top: 260px; }
  .free-questions__cta { top: 400px; }
}

@media (min-width: 400px) and (max-width: 534px) {
  .free-questions h2 {
    top: 156px;
    font-size: clamp(29px, 7.25vw, 32px) !important;
  }
  .free-questions__content > p { top: 216px; }
  .free-questions__cta { top: 356px; }
}

/* Tablet/compact desktop: widen only the pale frame to the section gutters. */
@media (min-width: 691px) and (max-width: 1344px) {
  .conversation-examples__card {
    width: 100% !important;
  }
}