/* =====================================================================
   WorldSight — 1:1 Figma reproduction, fluid full-width layout
   Source: figma 07yC5i6WFiIFBSGjTaoPFW / node 0:2
   Anchored at 1280px viewport; scales fluidly to any browser width.
   ===================================================================== */

:root {
  /* colors */
  --white: #ffffff;
  --teal: #46bcb9;
  --teal-20: rgba(70, 188, 185, 0.2);
  --teal-08: rgba(70, 188, 185, 0.0816);
  --teal-stroke: rgba(70, 188, 185, 0.24);
  --ink: #202020;
  --black: #000000;
  --dark-bg: #030909;
  --deep-teal: #021e1d;
  --soft-bg: #f5f6f6;
  --gray: #979797;
  --card-grad: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 1) 100%);
  --btn-grad: linear-gradient(90deg, rgba(70, 188, 185, 1) 0%, rgba(88, 215, 168, 1) 100%);

  /* font */
  --font: 'MiSans', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei',
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* fluid scale (anchored at 1280px = 100vw/12.8) */
  --pad: clamp(28px, 7.8125vw, 160px);        /* 100px @1280 */
  --gap: clamp(14px, 1.40625vw, 24px);        /* 18px @1280 */
  --gap-lg: clamp(28px, 2.5vw, 48px);
  --r-card: clamp(12px, 1.25vw, 16px);

  /* fluid type */
  --t-hero: clamp(34px, 4.06vw, 80px);        /* 52 @1280, scales up */
  --t-h2: clamp(26px, 2.81vw, 42px);          /* 36 */
  --t-footer: clamp(30px, 3.75vw, 54px);      /* 48 */
  --t-eyebrow: clamp(15px, 1.41vw, 18px);     /* 18 */
  --t-step: clamp(16px, 1.41vw, 18px);        /* 18 */
  --t-num: clamp(16px, 1.41vw, 18px);         /* 18 */
  --t-label: clamp(13px, 1.09vw, 14px);       /* 14 */
  --t-body: clamp(12px, 0.94vw, 14px);        /* 12 */
  --t-small: clamp(10px, 0.78vw, 12px);       /* 10 */
  --t-watermark: clamp(36px, 4.38vw, 56px);   /* 56 */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--dark-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-align: left; }

/* ---------- layout primitives ---------- */
.page { width: 100%; overflow: hidden; background: var(--white); }
.section { position: relative; width: 100%; overflow: hidden; }
.wrap {
  width: 100%;
  padding-inline: var(--pad);
}

.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 500; color: var(--teal);
  line-height: 1; letter-spacing: 0.01em;
}
.h-title {
  font-size: var(--t-h2); font-weight: 500; color: var(--ink);
  line-height: 1.1; letter-spacing: -0.0278em;
}
.body-text {
  font-size: var(--t-body); font-weight: 400; color: var(--ink);
  line-height: 1.7; opacity: 0.6;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  min-height: clamp(560px, 56vw, 1400px);
  background: var(--dark-bg) url("assets/images/hero-bg.svg") center/cover no-repeat;
  color: var(--white);
  display: flex; flex-direction: column;
}
.hero > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.hero__nav {
  display: flex; align-items: center;
  padding-top: clamp(16px, 1.4vw, 24px);
  height: clamp(48px, 3vw, 62px);
}
.hero__logo { height: clamp(14px, 1.4vw, 20px); width: auto; }
.hero__links {
  margin-left: auto;
  display: flex; gap: clamp(20px, 2.2vw, 40px);
  font-size: var(--t-body); font-weight: 400; color: var(--white);
}
.hero__links a { color: inherit; text-decoration: none; white-space: nowrap; }
.hero__cta {
  margin-left: clamp(28px, 2.6vw, 44px);
  padding: clamp(6px, 0.5vw, 8px) clamp(16px, 1.4vw, 22px);
  background: var(--btn-grad);
  border-radius: 999px;
  font-size: var(--t-body); font-weight: 600; color: var(--white);
  white-space: nowrap;
  text-decoration: none;
}

.hero__inner {
  flex: 1;
  display: flex; align-items: center; gap: clamp(24px, 3vw, 60px);
  padding-block: clamp(24px, 3vw, 48px);
}
/* Copy container scales with viewport (anchored at 1280 = 542px) so the title
   never wraps when text enlarges on wide screens. */
.hero__copy { flex: 1 1 auto; max-width: clamp(380px, 43vw, 880px); }
.hero__badge {
  display: inline-flex; align-items: center;
  padding: clamp(7px, 0.6vw, 9px) clamp(14px, 1.2vw, 18px);
  border: 0.5px solid var(--teal-stroke);
  border-radius: 999px;
  font-size: var(--t-small); font-weight: 400; color: var(--teal);
  letter-spacing: 0.02em; white-space: nowrap;
}
.hero__title {
  margin-top: clamp(18px, 1.6vw, 24px);
  font-size: var(--t-hero); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.0192em;
}
.hero__title .accent { color: var(--teal); }
.hero__subtitle {
  margin-top: clamp(18px, 1.4vw, 22px);
  max-width: 560px;
  font-size: var(--t-body); font-weight: 400; line-height: 1.65;
  color: var(--white); opacity: 0.6; text-align: justify;
}
.hero__btns {
  margin-top: clamp(24px, 2.2vw, 32px);
  display: flex; align-items: center; gap: clamp(12px, 1.1vw, 17px);
  flex-wrap: wrap;
}
/* App Store / Google Play buttons — rebuilt in CSS for exact colors (PNG export
   dropped the template-instance icons, leaving a blank white block). */
.store-btn {
  display: inline-flex; align-items: center;
  text-decoration: none;
  gap: clamp(10px, 1vw, 12px);
  height: clamp(42px, 4vw, 50px);
  padding: 0 clamp(16px, 1.6vw, 24px);
  border-radius: 999px;
  text-decoration: none;
}
.store-btn__icon { width: clamp(18px, 1.8vw, 24px); height: clamp(18px, 1.8vw, 24px); flex: none; object-fit: contain; }
.store-btn__text { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.store-btn__small { font-size: clamp(8px, 0.78vw, 10px); font-weight: 400; opacity: 0.6; }
.store-btn__name { font-size: clamp(13px, 1.25vw, 16px); font-weight: 600; }
.store-btn--app { background: #ffffff; color: #202020; }
.store-btn--play {
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.btn-circle { width: clamp(42px, 4vw, 50px); height: clamp(42px, 4vw, 50px); flex: none; display: inline-flex; text-decoration: none; }
.btn-circle img { width: 100%; height: 100%; }
.hero__anon {
  margin-top: clamp(14px, 1.2vw, 18px);
  font-size: var(--t-small); font-weight: 400; color: var(--white); opacity: 0.4;
}

/* Right-half phone pair: absolutely centered in the right half of the SCREEN
   (50%–100% of hero), so the pair sits at the 75% mark regardless of padding.
   Size, gap and vertical stagger all scale with vw (anchored at 1280:
   219px phone, 16px gap, 58px stagger). */
.hero__phones {
  position: absolute;
  left: 50%; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero__phone-pair {
  display: flex; align-items: center; gap: 1.25vw;
  pointer-events: auto;
}
.hero__phone {
  width: clamp(140px, 17.1vw, 440px);
  aspect-ratio: 219 / 475;
  border-radius: clamp(12px, 1.6vw, 22px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.hero__phone img { width: 100%; height: 100%; object-fit: cover; }
.hero__phone--front { transform: translateY(-2.26vw); z-index: 2; }
.hero__phone--back  { transform: translateY(2.26vw); z-index: 1; }

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.how { background: var(--white); }
.how .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
.how__head { max-width: 900px; }
.how__head .eyebrow { display: block; }
.how__head .h-title { margin-top: clamp(18px, 1.6vw, 28px); }
.how__grid {
  margin-top: clamp(32px, 3vw, 48px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.step-card {
  background: var(--soft-bg);
  border-radius: var(--r-card);
  padding: clamp(20px, 1.8vw, 28px);
  display: flex; flex-direction: column;
}
/* Number block: "01" text with a teal-20% bar BEHIND its lower half (overlapping,
   per Figma — bar 28x10 at y:10, text 21x18 at y:0, bar wider than text). */
.step-num { position: relative; display: inline-block; line-height: 1; }
.step-num .n {
  font-size: var(--t-num); font-weight: 600; color: var(--teal); line-height: 1;
  position: relative; z-index: 1;
}
.step-num .bar {
  position: absolute; left: -0.11em; top: 0.56em;
  width: 1.56em; height: 0.56em;
  background: var(--teal-20); border-radius: 0.28em;
  z-index: 0;
}
.step-card .step-title {
  margin-top: clamp(2px, 0.2vw, 3px);
  font-size: var(--t-step); font-weight: 500; color: var(--ink); line-height: 1.2;
}
.step-card .step-desc {
  margin-top: clamp(8px, 0.85vw, 12px);
  font-size: var(--t-body); font-weight: 400; line-height: 1.7; color: var(--ink); opacity: 0.6;
}

/* =====================================================================
   WHY IT MATTERS
   ===================================================================== */
.why { background: var(--soft-bg); }
.why .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
.why__head { max-width: 1080px; }
.why__head .eyebrow { display: block; }
.why__head .h-title { margin-top: clamp(18px, 1.6vw, 28px); }
.why__head .body-text { margin-top: clamp(20px, 1.8vw, 32px); }
.why__cards {
  margin-top: clamp(28px, 2.6vw, 40px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.why__card { display: flex; flex-direction: column; }
.why__card-img {
  aspect-ratio: 348 / 196;
  border-radius: var(--r-card); overflow: hidden;
}
.why__card-img img { width: 100%; height: 100%; object-fit: cover; }
.why__label {
  margin-top: clamp(10px, 1vw, 14px);
  font-size: var(--t-small); font-weight: 500; color: var(--ink);
  text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
}

/* =====================================================================
   FROM THE FIELD
   ===================================================================== */
.field { background: var(--white); }
.field .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
.field__head { max-width: 1128px; }
.field__head .eyebrow { display: block; }
.field__head .h-title { margin-top: clamp(14px, 1.2vw, 28px); }
.field__head .body-text { margin-top: clamp(14px, 1.3vw, 24px); }
.field__grid {
  margin-top: clamp(28px, 2.6vw, 44px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
}
.task-card {
  position: relative;
  aspect-ratio: 256 / 144;
  border-radius: var(--r-card); overflow: hidden;
}
.task-card img { width: 100%; height: 100%; object-fit: cover; }
.task-card .scrim {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 44%;
  background: var(--card-grad);
}
.task-card .t-label {
  position: absolute; left: 0; right: 0; bottom: clamp(8px, 0.9vw, 12px);
  text-align: center;
  font-size: var(--t-label); font-weight: 500; line-height: 1.4; color: var(--white);
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { background: var(--soft-bg); }
.faq .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
.faq__head { max-width: 1080px; }
.faq__head .eyebrow { display: block; }
.faq__head .h-title { margin-top: clamp(18px, 1.6vw, 28px); }
.faq__head .body-text { margin-top: clamp(18px, 1.6vw, 32px); }

.faq__cols {
  margin-top: clamp(36px, 3.4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 4vw, 80px);
}
.faq-col { display: flex; flex-direction: column; gap: var(--gap-lg); }
.faq-group { display: flex; flex-direction: column; gap: 12px; }
.faq-cat {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.faq-cat img { width: clamp(18px, 1.4vw, 22px); height: auto; }
.faq-cat span {
  font-size: var(--t-body); font-weight: 500; line-height: 1.5;
  color: var(--teal); text-transform: uppercase; letter-spacing: 0.04em;
}

.faq-row {
  display: block; width: 100%;
  background: var(--white);
  /* constant radius = half the closed row height → pill when closed, rounded-rect
     when expanded. No transition, so the expand animation stays smooth (no jump). */
  border-radius: calc(clamp(18px, 1.6vw, 24px) + 16px);
  padding: clamp(18px, 1.6vw, 24px) clamp(20px, 1.8vw, 28px);
}
.q-row {
  display: flex; align-items: center; gap: clamp(12px, 1.1vw, 16px);
}
.faq-row .q {
  flex: 1;
  font-size: var(--t-label); font-weight: 500; line-height: 1.5; color: var(--ink);
}
.faq-toggle {
  position: relative; flex: none;
  width: clamp(28px, 2.5vw, 32px); height: clamp(28px, 2.5vw, 32px);
  border-radius: 50%;
  background: var(--teal-08);
  transition: background .25s ease, transform .25s ease;
}
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--teal); border-radius: 1px;
  transition: background .25s ease;
}
.faq-toggle::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-toggle::after  { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }

/* expanded state: toggle fills teal, bars turn white, rotate 45° → "+" becomes "X" */
.faq-row.is-open .faq-toggle { background: var(--teal); transform: rotate(45deg); }
.faq-row.is-open .faq-toggle::before,
.faq-row.is-open .faq-toggle::after { background: var(--white); }

.faq-a-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease, margin-top .3s ease;
}
.faq-a-wrap > .faq-a { overflow: hidden; min-height: 0; }
.faq-row.is-open .faq-a-wrap { grid-template-rows: 1fr; margin-top: 10px; }
.faq-a {
  display: block;
  font-size: var(--t-body); font-weight: 400; line-height: 1.7; color: var(--ink); opacity: 0.6;
}
.faq-a .faq-p { display: block; margin-bottom: 10px; }
.faq-a .faq-p:last-child { margin-bottom: 0; }
.faq-a .faq-ul, .faq-a .faq-ol { display: block; margin-bottom: 10px; }
.faq-a .faq-li { display: block; padding-left: 18px; position: relative; margin-bottom: 4px; }
.faq-a .faq-ul .faq-li::before { content: "•"; position: absolute; left: 4px; }
.faq-a .faq-ol { counter-reset: oli; }
.faq-a .faq-ol .faq-li::before { content: counter(oli) "."; counter-increment: oli; position: absolute; left: 0; font-weight: 500; }

/* =====================================================================
   PRIVACY
   ===================================================================== */
.privacy { background: #F5F6F6; }
.privacy::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 0.5px; background: rgba(32, 32, 32, 0.15); }
.privacy .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
.privacy__head { max-width: 1080px; }
.privacy__head .eyebrow { display: block; }
.privacy__head .h-title { margin-top: clamp(18px, 1.6vw, 28px); }
.privacy__head .body-text { margin-top: clamp(16px, 1.5vw, 28px); }
.privacy__grid {
  margin-top: clamp(32px, 3vw, 48px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
/* Privacy card: 348x179 at 1280. Source: bg rgba(2,30,29,0.04), radius 16.
   Watermark "STEP x" at x:29/y:18, behind title (overlapping).
   Title at x:28/y:48 (18px Medium), desc at x:28/y:83 (12px, opacity 0.6). */
.pcard {
  position: relative; overflow: hidden;
  background: #EBEDED;
  border-radius: 16px;
  min-height: clamp(150px, 14vw, 179px);
}
.pcard .watermark {
  position: absolute; z-index: 0;
  left: clamp(20px, 2.1vw, 29px);
  top: clamp(12px, 1.3vw, 18px);
  font-size: clamp(36px, 4.3vw, 56px); font-weight: 600; letter-spacing: -0.04em;
  color: var(--deep-teal); opacity: 0.06;
  line-height: 1; white-space: nowrap;
}
.pcard .step-title {
  position: relative; z-index: 1;
  margin-top: clamp(36px, 3.6vw, 48px);
  margin-left: clamp(20px, 2.05vw, 28px);
  font-size: clamp(16px, 1.41vw, 18px); font-weight: 500; color: var(--ink); line-height: 1;
}
.pcard .step-desc {
  position: relative; z-index: 1;
  margin-top: clamp(10px, 1vw, 14px);
  margin-left: clamp(20px, 2.05vw, 28px);
  margin-right: clamp(20px, 2.05vw, 28px);
  font-size: clamp(12px, 0.94vw, 14px); font-weight: 400; line-height: 1.7; color: var(--ink); opacity: 0.6;
}

/* =====================================================================
   ABOUT US
   ===================================================================== */
.about { background: #F5F6F6; min-height: clamp(420px, 40vw, 560px); }
.about .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
/* Soft blurred teal glow on the right — replaces the fragile Figma SVG (masks + filters
   that rendered inconsistently across browsers). Done as a CSS radial gradient so it
   is identical everywhere. Matches the Figma glow peaked around 70% / 48%. */
.about { background: #F5F6F6; }
/* Triangle: image fill, aspect-ratio locked so it scales proportionally. */
.about::before {
  content: ""; position: absolute; z-index: 0;
  right: 0; top: 0; bottom: 0;
  aspect-ratio: 448 / 515;
  background: url("assets/images/about-triangle.png") no-repeat right center / contain;
  pointer-events: none;
}
.about__inner { position: relative; z-index: 1; max-width: clamp(380px, 50vw, 644px); }
.about__inner .eyebrow { display: block; }
.about__inner .h-title { margin-top: clamp(14px, 1.2vw, 22px); }
.about__inner .body-text { margin-top: clamp(18px, 1.6vw, 32px); }
.about__compliance {
  margin-top: clamp(24px, 2.2vw, 36px);
  display: flex; align-items: center; gap: clamp(12px, 1vw, 16px);
  font-size: clamp(16px, 1.56vw, 20px); font-weight: 500; color: var(--teal);
}
.about__compliance::before {
  content: ""; width: 9px; height: 9px; background: var(--teal); flex: none;
}
.about__badge {
  position: absolute; right: clamp(60px, 6vw, 110px); top: calc(43.1% + 25px); transform: translateY(-50%);
  display: flex; align-items: center; gap: 0; z-index: 2;
}
.about__badge .line { width: clamp(40px, 4vw, 75px); height: 1px; background: var(--gray); opacity: 0.33; }
.about__badge .ring {
  width: clamp(80px, 8vw, 114px); height: clamp(80px, 8vw, 114px);
  border: 0.5px solid var(--gray); border-radius: 50%; opacity: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.about__badge .yr { font-size: clamp(16px, 1.56vw, 20px); font-weight: 600; color: var(--ink); }
.about__badge .tri {
  width: 0; height: 0; margin-top: 6px;
  border-left: 4.9px solid transparent; border-right: 4.9px solid transparent;
  border-bottom: 7px solid var(--teal);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: var(--dark-bg) url("assets/images/footer-bg.svg") center/cover no-repeat;
  color: var(--white);
}
.footer .wrap { padding-block: clamp(48px, 5vw, 88px); }
.footer__inner { position: relative; }
.footer__head {
  font-size: var(--t-footer); font-weight: 500; line-height: 1.17;
  letter-spacing: -0.0192em; color: var(--white); max-width: 760px;
}
.footer__sub {
  margin-top: clamp(16px, 1.4vw, 26px); max-width: 460px;
  font-size: clamp(13px, 1.09vw, 14px); font-weight: 400; color: var(--white); opacity: 0.6;
}
.footer__btns {
  margin-top: clamp(28px, 2.6vw, 44px);
  display: flex; align-items: center; gap: clamp(12px, 1.1vw, 17px); flex-wrap: wrap;
}
.footer__decor {
  position: absolute; right: 0; top: 4px;
  width: clamp(70px, 6vw, 114px); height: auto;
}
.footer__rule {
  margin-top: clamp(36px, 3.4vw, 56px);
  height: 1px; background: var(--white); opacity: 0.15;
}
.footer__bar {
  margin-top: clamp(14px, 1.4vw, 22px);
  display: flex; align-items: center; gap: clamp(16px, 1.8vw, 32px);
  font-size: var(--t-small); color: var(--white); opacity: 0.8;
}
.footer__logo { height: clamp(12px, 1vw, 15px); width: auto; opacity: 0.7; }
.footer__bar .spacer { margin-left: auto; display: flex; gap: clamp(16px, 1.8vw, 28px); }
.footer__bar a { color: inherit; text-decoration: none; opacity: 0.5; }
.footer__bar a:hover { opacity: 0.8; }

/* =====================================================================
   FAQ bottom CTA cards (Bug report / Apply for head mount)
   ===================================================================== */
/* Divider between FAQ list and CTA buttons (source: 0.5px line, ink @ 15%). */
.faq__divider {
  margin-top: clamp(40px, 4.5vw, 74px);
  height: 0.5px; background: var(--ink); opacity: 0.15;
}
.faq__ctas {
  margin-top: clamp(40px, 4.5vw, 75px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4.2vw, 54px);
}
/* CTA card: 513x140, white, radius 16. Icon 56x56 at left (pad 38),
   text 24px Regular, arrow 34 at right. */
.cta-card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  text-decoration: none;
  padding-left: clamp(28px, 2.95vw, 38px);
  padding-right: clamp(28px, 2.95vw, 38px);
  display: flex; align-items: center; gap: clamp(16px, 1.6vw, 20px);
  min-height: clamp(120px, 10.9vw, 140px);
}
.cta-card .cta-icon { width: clamp(48px, 4.4vw, 56px); height: auto; flex: none; }
.cta-card .cta-text {
  flex: 1;
  font-size: clamp(20px, 1.88vw, 24px); font-weight: 400; color: var(--ink); line-height: 1.33;
  text-decoration: none; white-space: nowrap;
}
.cta-card .cta-arrow {
  width: clamp(28px, 2.6vw, 34px); height: auto; flex: none;
}

/* =====================================================================
   GUIDANCE & PAYMENT section (new)
   ===================================================================== */
.guide { background: var(--white); }
.guide .wrap { padding-block: clamp(48px, 6.5vw, 84px); }
.guide__head { max-width: 1080px; }
.guide__head .eyebrow { display: block; text-transform: uppercase; }
.guide__head .h-title { margin-top: clamp(14px, 1.2vw, 28px); }

.guide__cards {
  margin-top: clamp(28px, 2.6vw, 44px);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
}
/* Do/Don't cards: combined SVG background + container queries for fluid scaling.
   All positions/sizes in cqw (% of card width) so they scale proportionally. */
.gd-card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 531 / 338;
  background: url("assets/images/do-card-combined.svg") no-repeat;
  background-size: 100% 100%;
}
.gd-card--dont {
  background: url("assets/images/dont-card-combined.svg") no-repeat;
  background-size: 100% 100%;
}
/* Badge: star vector is 31x31 (not the 40.65 frame), so use 31/531=5.84cqw.
   Top adjusted so badge center aligns with label center. */
.gd-card__badge {
  position: absolute; z-index: 1;
  left: 4.42%; top: 7.54%;
  width: 5.84cqw; height: auto;
}
/* Label: line-height 1.33 matches source (32px box for 24px font). */
.gd-card__label {
  position: absolute; z-index: 1;
  left: 13.18%; top: 7.40%;
  font-size: 4.52cqw; font-weight: 500; color: var(--white); line-height: 1.33;
}
/* List: x=28/531=5.27%, y=106/338=31.36%, gap=16/531=3.01cqw */
.gd-card__list {
  position: absolute; z-index: 1;
  top: 31.36%; left: 5.27%; right: 5.27%;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 3.01cqw;
}
.gd-card--dont .gd-card__list { left: 6.03%; }
.gd-card__list li {
  display: flex; align-items: flex-start; gap: 2.26cqw;
  font-size: 2.26cqw; font-weight: 400; line-height: 1.7; color: var(--ink);
}
.gd-card__list li img { width: 2.45cqw; height: 2.45cqw; flex: none; margin-top: 0.56cqw; }

.guide__pay { margin-top: clamp(40px, 3.8vw, 64px); }
.guide__pay-label {
  font-size: var(--t-eyebrow); font-weight: 500; color: var(--ink); opacity: 0.6;
  line-height: 1;
}
.pay-grid {
  margin-top: clamp(24px, 2.2vw, 36px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.pay-card {
  background: rgba(70, 188, 185, 0.06);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pay-card__top { padding: clamp(20px, 1.8vw, 28px); flex: 1; }
.pay-card__head { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 16px); }
.pay-card__logo { width: clamp(44px, 4.4vw, 56px); height: auto; flex: none; }
.pay-card__name {
  font-size: clamp(18px, 1.88vw, 24px); font-weight: 500; color: var(--ink);
}
.pay-card__desc {
  margin-top: clamp(12px, 1.1vw, 18px);
  font-size: var(--t-body); font-weight: 400; line-height: 1.7; color: var(--ink); opacity: 0.6;
}
.pay-card__bottom {
  padding: clamp(16px, 1.5vw, 22px) clamp(20px, 1.8vw, 28px);
  background: rgba(70, 188, 185, 0.12);
}
.pay-card__best {
  font-size: clamp(13px, 1.09vw, 14px); font-weight: 500; color: var(--teal);
}

.guide__note {
  margin-top: clamp(28px, 2.6vw, 44px);
  display: flex; align-items: flex-start; gap: clamp(10px, 1vw, 14px);
  font-size: var(--t-body); font-weight: 400; line-height: 1.7; color: var(--ink);
}
.guide__note::before {
  content: ""; width: 9px; height: 9px; background: var(--teal); flex: none; margin-top: 6px;
}
.guide__note-text { flex: 1; min-width: 0; }
.guide__note .term { font-weight: 500; }
.guide__note-sep { opacity: 0.4; }

/* =====================================================================
   responsive — narrow screens stack
   ===================================================================== */
@media (max-width: 980px) {
  .how__grid, .why__cards, .privacy__grid { grid-template-columns: repeat(2, 1fr); }
  .field__grid { grid-template-columns: repeat(2, 1fr); }
  .faq__cols { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .faq__ctas { grid-template-columns: 1fr; }
  .guide__cards { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  /* Hero fills the viewport on mobile → iPhone-like 9:19.5 proportion on phones,
     giving the two phone images more top/bottom whitespace. */
  .hero { min-height: 100vh; min-height: 100dvh; }
  .hero > .wrap { justify-content: space-between; padding-bottom: clamp(78px, 10vw, 120px); }
  .hero__inner { flex: 0 0 auto; order: 2; position: relative; z-index: 3; padding-block: 0; margin-top: 30px; }
  .hero__copy { max-width: 100%; }
  .hero__btns { flex-wrap: nowrap; }
  .hero__phones {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
    flex: 0 0 auto; width: 100%; order: 1;
    padding: 0 var(--pad);
    padding-top: 60px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
  }
  /* Larger phones on mobile (was 140px min). */
  .hero__phone { width: clamp(155px, 42vw, 180px); }
  .about__badge { display: none; }
  .footer__decor { display: none; }
  /* CTA cards: single column, constrain width to avoid overflow. */
  .cta-card { min-width: 0; max-width: 100%; }
  .cta-card .cta-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Footer buttons: no wrap. */
  .footer__btns { flex-wrap: nowrap; }
  .store-btn { white-space: nowrap; flex-shrink: 1; }
  .store-btn__text { min-width: 0; }
  .store-btn__small, .store-btn__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Footer bar: stack as list on mobile. */
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__bar .spacer { margin-left: 0; flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  :root { --pad: 20px; }
  .how__grid, .why__cards, .privacy__grid, .field__grid { grid-template-columns: 1fr; }
  .hero__links { display: none; }
  .hero__cta { margin-left: auto; }
  /* All 4 buttons same height (43px = 36*1.2), fit one line within content area. */
  .store-btn { height: 43px; padding: 0 11px; gap: 7px; flex: 0 1 auto; min-width: 0; }
  .store-btn__icon { width: 17px; height: 17px; flex: none; }
  .store-btn__text { min-width: 0; }
  .store-btn__small { font-size: 7px; line-height: 1.2; }
  .store-btn__name { font-size: 11px; line-height: 1.2; }
  .btn-circle { width: 43px; height: 43px; flex: none; }
  .hero__btns { gap: 6px; flex-wrap: nowrap; }
  .footer__btns { gap: 6px; flex-wrap: nowrap; }
}