/* ════════════════════════════════════════════════════════════
   BeFam. landing
   Fonts: Quicksand (display) + Inter (body). from brand pack
   Bg: single beige (#F4E4D7 derived). No gradients.
   Signature: tic-tac-toe grid in BeFam teal (#2D5F5D).
   ════════════════════════════════════════════════════════════ */

:root{
  --teal:#2D5F5D;
  --teal-deep:#234948;
  --sage:#4A7C7E;
  --mint:#7FA99B;
  --terra:#E8956E;
  --terra-deep:#D67855;

  /* Single beige background derived from the brand "Warm Cream" #F4E4D7,
     lightened to be easier on the eyes for long copy. */
  --bg:#F5EBDD;
  --bg-deeper:#EFE0CD;
  --paper:#FFF7E9;        /* slightly lighter card surface */
  --ink:#1F2A33;
  --ink-2:#3D4A55;
  --slate:#74808B;
  --line: rgba(45,95,93,.18);     /* teal-tinted hairline. signature */
  --line-strong: rgba(45,95,93,.32);

  --font-display:"Quicksand", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;

  --max:1240px;
  --gutter:clamp(20px, 4vw, 56px);
  --radius:18px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; padding:0; }

/* ─── Type ─── */
.h-display, .h-2, .h-3, .h-4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing:-0.02em;
  line-height: 1.04;
  color: var(--ink);
  margin:0;
  text-transform: lowercase;   /* signature lowercase, like mobile-magicui */
}
.h-display{ font-size: clamp(46px, 7.4vw, 104px); font-weight: 700; line-height: 1.0; }
.h-2{ font-size: clamp(34px, 4.8vw, 64px); }
.h-3{ font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.12; }
.h-4{ font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; }
/* Allow specific spans to keep their casing (brand names, etc.) */
.h-display .cap, .h-2 .cap, .h-3 .cap, .h-4 .cap{ text-transform: none; }

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

/* ─── Eyebrow ─── */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body);
  font-size: 11.5px; letter-spacing:.18em; text-transform: uppercase;
  font-weight: 600; color: var(--teal);
  padding: 7px 14px;
  border:1px solid var(--line);
  border-radius: 999px;
  background: transparent;
}
.eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--terra);
  box-shadow: 0 0 0 4px rgba(232,149,110,.22);
}

/* ─── Buttons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 14.5px;
  border:1.5px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn-sm{ padding: 9px 16px; font-size: 13px; }
.btn-lg{ padding: 16px 28px; font-size: 15.5px; }
.btn-block{ width:100%; }
.btn-primary{ background: var(--teal); color:#fff; }
.btn-primary:hover{ background: var(--teal-deep); }
.btn-ghost{ background:transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal); }

/* ═════════════════════════════════ NAV (fully blended) ═════════════════════════════════ */
.nav{
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  /* 3-column grid keeps nav-links perfectly centered on page,
     regardless of how wide the left brand or right CTAs are */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
  background: transparent;
  border-bottom: 0;
  transition: padding .3s var(--ease), transform .35s var(--ease), background .25s var(--ease), backdrop-filter .25s var(--ease);
  will-change: transform;
}
.nav-brand{ justify-self: start; }
.nav-links{ justify-self: center; }
.nav-right{ justify-self: end; }
.nav.is-stuck{
  padding: 10px var(--gutter);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
/* Scroll-direction hide */
.nav.is-hidden{ transform: translateY(-110%); }
.nav-brand{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: -.015em; color: var(--teal);
  text-transform: none;
}
.nav-brand img{ width: 38px; height: 38px; object-fit: contain; }
.nav.is-stuck .nav-brand{ font-size: 22px; }
.nav.is-stuck .nav-brand img{ width: 34px; height: 34px; }
.nav-links{
  display: flex; gap: 28px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
}
.nav-links a{ position: relative; padding: 4px 2px; transition: color .2s; }
.nav-links a:hover, .nav-links a.is-active{ color: var(--teal); }
.nav-right{ display: flex; align-items: center; gap: 10px; }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-brand span{ display:none; }
}

/* Lang switch — globe + current code pill */
.lang-switch{ position: relative; }
.lang-trigger{
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px;
  padding: 0 12px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s;
}
.lang-trigger svg.globe{ width: 16px; height: 16px; color: var(--ink); transition: color .2s; flex: none; }
.lang-trigger .lang-code{ display: inline; line-height: 1; }
.lang-trigger .flag{ display: none; }
.lang-trigger:hover{ border-color: var(--teal); color: var(--teal); }
.lang-trigger:hover svg.globe{ color: var(--teal); }
.lang-menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  list-style: none; margin: 0; padding: 6px;
  min-width: 180px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 30px -16px rgba(31,42,51,.16);
  display:flex; flex-direction: column; gap: 2px;
  z-index: 200;
}
/* Browser default [hidden] is overridden by the rule above. re-assert it */
.lang-menu[hidden]{ display: none !important; }
.lang-menu li{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer; font-size: 14px;
}
.lang-menu li small{ margin-left: auto; color: var(--slate); font-size: 11px; letter-spacing: .1em; }
.lang-menu li:hover{ background: var(--bg-deeper); color: var(--teal); }
.lang-menu li.is-on{ background: var(--bg-deeper); color: var(--teal); font-weight: 600; }

/* ═════════════════════════════════ HERO ═════════════════════════════════ */
.hero{
  position: relative;
  padding: 130px var(--gutter) 56px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  background: var(--bg);  /* plain */
}
.hero .eyebrow{ margin-bottom: 6px; }
.hero .h-display{ max-width: 14ch; }
.hero-sub{
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.55;
  margin: 4px 0 4px;
}
.hero-ctas{ display:flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.badges{ display:flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.badge{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 26px 14px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  border: 1px solid var(--ink);
  transition: transform .25s var(--ease), background .25s var(--ease);
  min-width: 200px;
}
.badge svg{ width: 30px; height: 30px; flex: none; }
.badge:hover{ transform: translateY(-2px); background:#000; }
.badge-text{ display: flex; flex-direction: column; line-height: 1; }
.badge-text small{ font-size: 11px; letter-spacing: .06em; opacity: .7; margin-bottom: 4px; }
.badge-text b{ font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }

/* Hero phone. single, centered */
.hero-phone{
  position: relative;
  margin-top: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.placeholder-tag{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 5px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: transparent;
}

/* Phone chrome */
.phone{
  --w: 260px;
  position: relative;
  width: var(--w);
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  background: #0E1620;
  padding: 9px;
  box-shadow:
    0 30px 50px -20px rgba(15,36,36,.28),
    0 8px 16px -10px rgba(15,36,36,.18),
    inset 0 0 0 1.5px #1f2a33;
}
.phone::before{
  content:""; position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: 86px; height: 20px; border-radius: 12px; background: #000; z-index: 3;
}
.phone-inner{
  position: relative; width: 100%; height: 100%;
  border-radius: 30px; background: var(--paper); overflow: hidden;
  transition: opacity .35s ease;
}
.p-big{ --w: 280px; }

/* ═════════════════════════════════ TIC-TAC-TOE FEATURES (signature) ═════════════════════════════════ */
.ttt{
  padding: clamp(60px, 9vw, 120px) var(--gutter);
  background: var(--bg);
}
.ttt-head{
  max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ttt-head .h-2{ max-width: 18ch; }

/* True tic-tac-toe. only INNER lines, no outer border.
   3 cols × 2 rows = 2 vertical inner lines + 1 horizontal inner line. */
.ttt-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* no outer border */
}
.ttt-cell{
  padding: clamp(28px, 4vw, 52px) clamp(22px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: 0;
  position: relative;
  min-height: 220px;       /* equal cell heights = symmetric grid */
  transition: opacity .3s var(--ease);
}
/* vertical inner lines: cells in cols 1 and 2 (i.e. not the last col) get right border */
.ttt-cell:nth-child(3n+1),
.ttt-cell:nth-child(3n+2){
  border-right: 1px solid var(--line-strong);
}
/* horizontal inner line: cells in row 1 (first 3 cells) get bottom border */
.ttt-cell:nth-child(-n+3){
  border-bottom: 1px solid var(--line-strong);
}
.ttt-cell:hover{ opacity: .85; }

.ttt-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--teal);
}
.ttt-icon svg{ width: 30px; height: 30px; }
.ttt-cell h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.ttt-cell p{
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 32ch;
}

@media (max-width: 880px){
  .ttt-grid{ grid-template-columns: 1fr; }
  .ttt-cell{
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    min-height: auto;
    padding: 28px 4px;
  }
  .ttt-cell:last-child{ border-bottom: 0; }
}
@media (max-width: 560px){
  .ttt-cell{ padding: 24px 0; gap: 10px; }
}

/* ═════════════════════════════════ ALTERNATING TEXT + PHONE ═════════════════════════════════ */
.alt{
  padding: clamp(50px, 8vw, 100px) var(--gutter);
  background: var(--bg);
}
.alt-head{
  max-width: var(--max); margin: 0 auto clamp(60px, 8vw, 100px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.alt-row{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 6vw, 96px);
  padding: clamp(48px, 8vw, 110px) 0;
}
.alt-row:not(:last-child){
  border-bottom: 1px solid var(--line);
}
.alt-row-flip .alt-text{ order: 2; }
.alt-row-flip .alt-phone{ order: 1; }
.alt-text{ max-width: 50ch; }
.alt-step{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--terra-deep);
  margin-bottom: 14px;
}
.alt-text .h-3{ margin-bottom: 12px; }
.alt-text p{ font-size: 17px; color: var(--ink-2); line-height: 1.55; max-width: 42ch; }
.alt-points{
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.alt-points li{
  display: flex; gap: 10px; align-items: flex-start;
}
.alt-points li::before{
  content: "";
  width: 8px; height: 8px;
  margin-top: 7px; flex: none;
  border: 1.5px solid var(--teal);
  border-radius: 50%;
}
.alt-phone{
  display: flex; justify-content: center;
}
.alt-phone .phone{ --w: 260px; }

@media (max-width: 880px){
  .alt-row, .alt-row-flip{ grid-template-columns: 1fr; }
  .alt-row .alt-text, .alt-row .alt-phone{ order: initial; }
  .alt-row-flip .alt-text, .alt-row-flip .alt-phone{ order: initial; }
}

/* ═════════════════════════════════ REVIEWS. static 3-col ═════════════════════════════════ */
.reviews{
  padding: clamp(50px, 8vw, 100px) var(--gutter);
  background: var(--bg);
}
.reviews-head{
  max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 70px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.reviews-grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){ .reviews-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .reviews-grid{ grid-template-columns: 1fr; } }

.rcard{
  position: relative;
  padding: 28px 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rcard::before{
  content: "“";
  position: absolute; top: 16px; right: 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1;
  color: var(--teal);
  opacity: .18;
}
.rcard:hover{
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 30px 50px -28px rgba(31,42,51,.18);
}
.rcard-stars{ color: var(--terra); font-size: 12px; letter-spacing: .22em; }
.rcard-quote{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  position: relative;
}
.rcard-author{
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rcard-av{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--mint); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  font-family: var(--font-display);
}
.rcard-av.av-1{ background: var(--terra); }
.rcard-av.av-2{ background: var(--teal); }
.rcard-av.av-3{ background: var(--mint); }
.rcard-av.av-4{ background: var(--ink); }
.rcard-name{ display: block; font-size: 14px; font-weight: 700; color: var(--ink); font-family: var(--font-display); letter-spacing: -.005em; }
.rcard-role{ display: block; font-size: 12px; color: var(--slate); margin-top: 1px; }

/* ═════════════════════════════════ PRICING ═════════════════════════════════ */
.pricing{
  padding: clamp(50px, 8vw, 100px) var(--gutter);
  background: var(--bg);
}
.pricing-head{
  max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 70px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pricing-cards{
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.pricing-cards-single{ max-width: 520px; grid-template-columns: 1fr; }
@media (max-width: 760px){ .pricing-cards{ grid-template-columns: 1fr; } }

.pc{
  padding: 32px 28px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display:flex; flex-direction: column; gap: 14px;
}
.pc-feat{ background: var(--teal); border-color: var(--teal); color: #fff; }
.pc-feat h3, .pc-feat p, .pc-feat .pc-list li, .pc-feat .pc-price b{ color: #fff; }
.pc-feat .pc-list li{ border-color: rgba(255,255,255,.18); }
.pc-feat .pc-price span{ color: rgba(255,255,255,.7); }
.pc-tag{
  align-self: flex-start;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--teal);
  font-family: var(--font-body);
}
.pc-tag-feat{ background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.2); }
.pc .h-3{ margin: 0; }
.pc-price{ display: flex; align-items: baseline; gap: 6px; }
.pc-price b{ font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--ink); }
.pc-price span{ font-size: 13px; color: var(--slate); }
.pc p{ margin: 0; font-size: 14.5px; color: var(--ink-2); }
/* Override for featured card — must come AFTER .pc p (equal specificity) */
.pc.pc-feat p{ color: #fff; }
.pc.pc-feat .pc-price b{ color: #fff; }
.pc.pc-feat .pc-price span{ color: rgba(255,255,255,.7); }
.pc.pc-feat h3{ color: #fff; }
.pc.pc-feat .pc-list li{ color: #fff; border-color: rgba(255,255,255,.18); }
.pc-list{
  list-style: none; padding: 0; margin: 8px 0 14px;
  display: flex; flex-direction: column; gap: 0;
}
.pc-list li{
  padding: 9px 0; border-top: 1px dashed var(--line);
  font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.pc-list li:first-child{ border-top: 0; }
.pc-list li::before{
  content:""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5L20 7'/></svg>");
  background-size: 9px; background-repeat: no-repeat; background-position: center;
  flex: none;
}
.pc-feat .pc-list li::before{
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23234948' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5L20 7'/></svg>");
}
.pc-feat .btn-primary{ background: #fff; color: var(--teal-deep); }
.pc-feat .btn-primary:hover{ background: var(--bg); }

/* ═════════════════════════════════ FAQ ═════════════════════════════════ */
.faq{
  padding: clamp(50px, 8vw, 100px) var(--gutter);
  background: var(--bg);
}
.faq-head{
  max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 70px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.faq-list{
  max-width: 820px; margin: 0 auto;
  list-style: none; padding: 0;
  border-top: 1px solid var(--line);
}
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
}
.faq-toggle{ font-size: 24px; font-family: var(--font-body); font-weight: 400; color: var(--teal); transition: transform .3s var(--ease); flex: none; }
.faq-item.is-open .faq-toggle{ transform: rotate(45deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a p{ margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.faq-item.is-open .faq-a{ max-height: 500px; }

/* ═════════════════════════════════ FINAL CTA ═════════════════════════════════ */
.final-cta{
  padding: clamp(50px, 8vw, 100px) var(--gutter);
  background: var(--bg);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.final-cta .h-2{ max-width: 18ch; }
.final-sub{ max-width: 56ch; color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); margin: 0; }

/* ═════════════════════════════════ NEWSLETTER ═════════════════════════════════ */
.newsletter{
  padding: clamp(50px, 8vw, 100px) var(--gutter) clamp(80px, 12vw, 160px);
  background: var(--bg);
}
.nl-inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px){ .nl-inner{ grid-template-columns: 1fr; } }
.nl-copy .eyebrow{ margin-bottom: 18px; }
.nl-sub{ font-size: 17px; color: var(--ink-2); max-width: 50ch; line-height: 1.55; margin-top: 18px; }

.nl-form{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
}
.field{
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--slate); font-weight: 500;
  font-family: var(--font-body);
}
.field textarea{
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-body);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea:focus{ outline: none; border-color: var(--teal); background: var(--paper); box-shadow: 0 0 0 4px rgba(45,95,93,.14); }
.field-row{ flex-direction: row; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-2); font-weight: 400; }
.field-row input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--teal); }

.contact-form{ margin-top: clamp(30px, 4vw, 50px); width: 100%; max-width: 640px; }
.contact-form-h{ margin: 0 0 6px; text-align: left; }
.contact-form-sub{ margin: 0 0 12px; font-size: 14.5px; color: var(--slate); }

/* Contact page centered layout */
.page-contact{ align-items: stretch; }
.page-contact .about-head{ margin-bottom: clamp(28px, 4vw, 44px); }
.page-contact .about-head .page-sub{ max-width: 50ch; }
.page-contact .contact-cards{ margin-left: auto; margin-right: auto; }
.page-contact .contact-form{
  margin-left: auto; margin-right: auto;
  text-align: left;          /* form labels naturally left-aligned for readability */
}
.page-contact .contact-form-h{ text-align: center; }
.page-contact .contact-form-sub{ text-align: center; margin-bottom: 22px; }

.field input[type="text"], .field input[type="email"], .field select{
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
}
.field input:focus, .field select:focus{
  outline: none; border-color: var(--teal); background: var(--paper);
  box-shadow: 0 0 0 4px rgba(45,95,93,.14);
}
.form-fineprint{ margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--slate); }

/* Chip pickers (used in newsletter + contact form) */
.chips{
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.chips legend, .chips .chips-label{
  font-family: var(--font-body);
  font-size: 13px; color: var(--slate); font-weight: 500;
  padding: 0; margin-bottom: 2px;
}
.chip-row{
  display: flex; flex-wrap: wrap; gap: 7px;
}
.chip{
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.chip:hover{ border-color: var(--teal); color: var(--teal); }
.chip:active{ transform: scale(.97); }
.chip.is-on{ background: var(--teal); border-color: var(--teal); color: #fff; }
.chip .flag{ margin-right: 4px; font-size: 14px; }
/* Inline-pill input — sits inside the chip-row replacing the "Iné" chip */
.chip-input{
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--teal);
  background: var(--paper);
  min-width: 160px;
  max-width: 280px;
  box-shadow: 0 0 0 4px rgba(45,95,93,.10);
  animation: chip-in .18s var(--ease);
}
.chip-input:focus{ outline: none; box-shadow: 0 0 0 4px rgba(45,95,93,.18); }
.chip-input[hidden]{ display: none !important; }
@keyframes chip-in{ from{ opacity:0; transform: scale(.9); } to{ opacity:1; transform: scale(1); } }

/* Anti-flash: hide body until i18n applies translations */
html:not(.i18n-ready) body { opacity: 0; }
html.i18n-ready body { opacity: 1; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce){ html.i18n-ready body { transition: none; } }
.form-success{
  padding: 14px 16px; border-radius: 12px;
  background: rgba(45,95,93,.06);
  border: 1px solid rgba(45,95,93,.2);
  color: var(--teal-deep); font-size: 14px;
}
.form-success strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--teal); margin-bottom: 2px; }

/* ═════════════════════════════════ SUB-PAGES ═════════════════════════════════ */
.subpage{ background: var(--bg); }
.page-mini{
  max-width: 880px;
  margin: 0 auto;
  padding: 140px var(--gutter) 100px;
  display: flex; flex-direction: column; gap: 22px;
  align-items: flex-start;
}
/* About page — center eyebrow / headline / CTA */
.page-about{ align-items: stretch; }
.about-head{
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 18px;
  margin-bottom: clamp(20px, 4vw, 40px);
}
.about-head .h-display{ max-width: 22ch; margin: 0; }
.about-cta-wrap{
  margin-top: clamp(30px, 5vw, 50px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.about-cta-pre{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-2);
  margin: 0; max-width: 28ch;
  letter-spacing: -.01em;
  text-transform: lowercase;
}
.subpage-quiz .page-mini{ align-items: center; text-align: center; }
.page-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12px; letter-spacing:.18em; text-transform:uppercase; font-weight: 600; color: var(--teal);
  padding: 7px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
}
.page-mini .h-display{ font-size: clamp(40px, 6.4vw, 84px); }
.page-sub{ font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); max-width: 56ch; line-height: 1.55; margin: 0; }
.page-grid{
  width: 100%;
  display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(28px, 5vw, 64px);
  margin-top: 14px; align-items: flex-start;
}
@media (max-width: 760px){ .page-grid{ grid-template-columns: 1fr; } }
.photo-frame{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-deeper);
  border: 1px solid var(--line);
}
.photo-placeholder{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--teal); text-align: center; padding: 24px;
}
.photo-placeholder svg{ width: 70px; height: 70px; opacity: .55; }
.photo-placeholder span{ font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.photo-placeholder small{ font-size: 12px; color: color-mix(in oklab, var(--teal) 70%, var(--slate)); }
.photo-tag{
  position: absolute; left: 14px; bottom: 14px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--paper); color: var(--teal-deep);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--line);
}
.page-body{ font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.page-body p{ margin: 0 0 16px; }
.page-body i{ font-family: var(--font-display); font-style: italic; color: var(--terra-deep); font-size: 1.02em; }
.page-body strong{ color: var(--teal); font-weight: 700; }
.page-sig{ margin-top: 24px; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.page-cta{ margin-top: 12px; }
.empty-state{
  width: 100%;
  margin-top: 24px;
  padding: clamp(40px, 6vw, 80px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  color: var(--slate); text-align: center;
}
.empty-state svg{ width: 64px; height: 64px; color: var(--teal); }
.empty-state p{ margin: 0; max-width: 40ch; font-size: 15px; }
.quiz-empty{ width: 100%; }

/* Contact cards */
.contact-cards{
  margin-top: 18px; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 760px){ .contact-cards{ grid-template-columns: 1fr; } }
.contact-card{
  display:flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 22px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
  text-align: center;
}
.contact-card:hover{ transform: translateY(-3px); border-color: var(--teal); }
.cc-icon{
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal);
  border: 1px solid var(--line);
}
.cc-icon svg{ width: 22px; height: 22px; }
.cc-label{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.cc-value{ font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); }

/* ═════════════════════════════════════════════════════════════
   PHONE SCREEN PLACEHOLDERS. kept from earlier (still placeholders)
   ═════════════════════════════════════════════════════════════ */
[data-screen]{
  position: relative;
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.4;
  padding: 38px 14px 16px;
  overflow: hidden;
}
[data-screen]::before{
  content:"9:41"; position: absolute; top: 14px; left: 18px;
  font-size: 11px; font-weight: 600; color: var(--ink); z-index: 2;
}
[data-screen]::after{
  content:""; position: absolute; top: 14px; right: 18px;
  width: 38px; height: 11px;
  background:
    radial-gradient(circle at 6px 6px, var(--ink) 1.5px, transparent 2px),
    linear-gradient(90deg, var(--ink) 60%, rgba(31,42,51,.3) 60%);
  background-size: 12px 12px, 100% 4px;
  background-repeat: no-repeat;
  background-position: 0 0, 14px 4px;
}
.screen-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.screen-title{ font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em; font-weight: 700; }
.screen-pill{
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(45,95,93,.1);
  color: var(--teal);
  border: 1px solid rgba(45,95,93,.18);
  border-radius: 999px; padding: 3px 8px;
  font-size: 9px; font-weight: 600; letter-spacing: .04em;
}
.tabs{ display: flex; gap: 4px; margin: 10px 0 12px; background: rgba(15,15,15,.05); border-radius: 10px; padding: 3px; font-size: 10px; }
.tabs span{ flex: 1; text-align: center; padding: 6px 4px; border-radius: 7px; color: var(--slate); }
.tabs span.is-on{ background: #fff; color: var(--teal); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.row{ display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(31,42,51,.08); margin-bottom: 6px; }
.row .check{ width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(45,95,93,.35); flex: none; }
.row.done .check{ background: var(--teal); border-color: var(--teal); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5L20 7'/></svg>"); background-size: 12px; background-repeat: no-repeat; background-position: center; }
.row.done .row-body strong{ text-decoration: line-through; color: var(--slate); }
.row-body{ flex: 1; min-width: 0; }
.row-body strong{ display: block; font-size: 11px; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.row-body small{ display: block; color: var(--slate); font-size: 9.5px; }
.av{ width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; border: 1.5px solid #fff; }
.av-stack{ display: inline-flex; }
.av-stack .av:not(:first-child){ margin-left: -7px; }
.av.av-1{ background: var(--terra); } .av.av-2{ background: var(--teal); } .av.av-3{ background: var(--mint); } .av.av-4{ background: var(--ink); }
[data-screen="chat"] .bubble{ max-width: 75%; padding: 7px 10px; border-radius: 14px; margin-bottom: 6px; font-size: 11px; }
[data-screen="chat"] .bubble.me{ background: var(--teal); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
[data-screen="chat"] .bubble.you{ background: #fff; color: var(--ink); border: 1px solid rgba(31,42,51,.08); border-bottom-left-radius: 4px; }
[data-screen="chat"] .bubble small{ display: block; font-size: 8.5px; opacity: .7; margin-top: 2px; }
.bar-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10px; }
.bar-row .name{ width: 46px; color: var(--ink); font-weight: 700; font-family: var(--font-display); }
.bar-wrap{ flex: 1; height: 8px; border-radius: 999px; background: #EFE2CC; overflow: hidden; }
.bar-wrap span{ display: block; height: 100%; border-radius: 999px; background: var(--teal); }
.bar-row .pct{ width: 30px; text-align: right; color: var(--slate); font-variant-numeric: tabular-nums; }
.shop-ribbon{
  display: flex; align-items: center; gap: 7px;
  background: rgba(232,149,110,.16);
  border: 1px solid rgba(232,149,110,.3);
  color: var(--terra-deep);
  padding: 7px 10px; border-radius: 10px; margin-bottom: 10px;
  font-size: 10px; font-weight: 600;
}
.take-btn{ margin-left: auto; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--teal); color: var(--teal); background: transparent; font-size: 9.5px; font-weight: 600; }

/* ═════════════════════════════════════════════════════════════
   Lang support footnote (right under features)
   ═════════════════════════════════════════════════════════════ */
.lang-note{
  max-width: var(--max);
  margin: clamp(40px, 6vw, 70px) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -.01em;
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 0 var(--gutter);
  text-transform: lowercase;
}
.lang-note .ln-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex: none;
  box-shadow: 0 0 0 4px rgba(45,95,93,.16);
}
.lang-note b{ font-weight: 700; color: var(--teal); }

/* ═════════════════════════════════════════════════════════════
   Quiz teaser (minimal section on main page)
   ═════════════════════════════════════════════════════════════ */
.quiz-teaser{
  padding: 16px var(--gutter);   /* near-zero. tight, no big spacing */
  background: var(--bg);
  text-align: center;
}
.quiz-teaser-inner{
  max-width: 720px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
}
.quiz-teaser h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin: 0; color: var(--ink);
  max-width: 22ch;
  line-height: 1.1;
}
.quiz-teaser p{
  margin: 0; color: var(--ink-2); font-size: 16px; max-width: 50ch; line-height: 1.55;
}
.quiz-teaser .qt-meta{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════
   BLOG. index + post
   ═════════════════════════════════════════════════════════════ */
.blog-index{
  max-width: 1080px;
  margin: 0 auto;
  padding: 130px var(--gutter) 80px;
}
.blog-index .page-eyebrow{ margin-bottom: 16px; }
.blog-index .h-display{ font-size: clamp(40px, 6.4vw, 84px); max-width: 14ch; margin-bottom: 14px; }
.blog-index .page-sub{ font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); max-width: 56ch; line-height: 1.55; margin-bottom: 50px; }

.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }

.blog-card{
  display: flex; flex-direction: column; gap: 14px;
  padding: 6px;
  border-radius: var(--radius);
  transition: transform .25s var(--ease);
}
.blog-card:hover{ transform: translateY(-3px); }
.blog-thumb{
  width: 100%; aspect-ratio: 16/10;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.blog-thumb svg{ width: 100%; height: 100%; display: block; }
.blog-thumb-num{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(64px, 8vw, 96px);
  color: var(--teal);
  opacity: .85; line-height: 1;
  position: relative; z-index: 1;
  text-transform: none;
}
.blog-tags{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.blog-tag{
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 4px 9px;
  border: 1px solid var(--line);
  color: var(--teal);
  border-radius: 999px;
}
.blog-card h3{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 25px); line-height: 1.2; letter-spacing: -.01em;
  margin: 4px 0 0; color: var(--ink);
  text-transform: lowercase;
}
.blog-card p{ font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.blog-meta{
  display: flex; gap: 8px; font-size: 12px; color: var(--slate);
}
.blog-meta b{ font-weight: 600; color: var(--ink); }

/* Blog post page */
.blog-post{
  max-width: 720px;
  margin: 0 auto;
  padding: 130px var(--gutter) 80px;
}
.blog-post .blog-back{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--slate); font-weight: 500;
  margin-bottom: 30px;
  transition: color .2s;
}
.blog-post .blog-back:hover{ color: var(--teal); }
.blog-post .blog-tags{ margin-bottom: 12px; }
.blog-post h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.05; letter-spacing: -.02em;
  margin: 0 0 16px; color: var(--ink);
  text-transform: lowercase;
}
.blog-post .blog-lead{
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-2); line-height: 1.55; margin: 0 0 32px;
}
.blog-post .blog-meta{ margin-bottom: 50px; }
.blog-post .blog-thumb{
  margin-bottom: 50px;
  aspect-ratio: 16/9;
}
.blog-post .blog-body{
  font-size: 17px; line-height: 1.75; color: var(--ink-2);
}
.blog-post .blog-body p{ margin: 0 0 18px; }
.blog-post .blog-body h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.01em;
  margin: 44px 0 14px; color: var(--ink);
  text-transform: lowercase;
}
.blog-post .blog-body h3{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -.01em;
  margin: 32px 0 10px; color: var(--ink);
  text-transform: lowercase;
}
.blog-post .blog-body blockquote{
  margin: 24px 0;
  padding: 14px 22px;
  border-left: 3px solid var(--teal);
  background: var(--paper);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.55;
}
.blog-post .blog-body ul{ padding-left: 22px; margin: 16px 0 22px; }
.blog-post .blog-body li{ margin-bottom: 6px; }
.blog-post .blog-body strong{ color: var(--ink); }
.blog-post .blog-body a{ color: var(--teal); border-bottom: 1px solid currentColor; }
.blog-post .blog-cta-row{
  margin-top: 60px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.blog-post .blog-cta-row h4{
  font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0;
  text-transform: lowercase;
}
.blog-post .blog-cta-row p{ margin: 0; color: var(--ink-2); font-size: 15px; }

/* ═════════════════════════════════════════════════════════════
   QUIZ. full-page experience
   ═════════════════════════════════════════════════════════════ */
.subpage-quiz .page-mini{ max-width: 720px; }
.quiz-host{
  width: 100%; margin-top: 20px;
  min-height: 460px;
  display: flex; align-items: flex-start; justify-content: center;
}
.q-stage{
  width: 100%;
  display: flex; flex-direction: column; gap: 18px;
  animation: q-in .35s var(--ease);
}
@keyframes q-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

.q-stage-intro{ align-items: center; text-align: center; gap: 26px; }
.q-intro{ font-size: 17px; color: var(--ink-2); margin: 0; max-width: 48ch; }

.q-progress{
  width: 100%; height: 6px;
  background: rgba(45,95,93,.14);
  border-radius: 999px; overflow: hidden;
}
.q-progress span{
  display: block; height: 100%; border-radius: 999px;
  background: var(--teal);
  transition: width .45s var(--ease);
}
.q-meta{
  margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); font-weight: 600; text-align: center;
}
.q-question{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -.01em;
  margin: 4px 0 10px; text-align: center; color: var(--ink);
}
.q-answers{ display: flex; flex-direction: column; gap: 10px; }
.q-opt{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-align: left;
  transition: border-color .2s, background .2s, transform .15s;
}
.q-opt:hover{ border-color: var(--teal); background: rgba(45,95,93,.04); }
.q-opt.is-on{ border-color: var(--teal); background: var(--teal); color: #fff; }
.q-opt.is-on .q-key{ color: var(--cream, #F4E4D7); }
.q-key{ font-weight: 700; color: var(--teal); font-family: var(--font-display); min-width: 18px; }
.q-text{ font-size: 14.5px; line-height: 1.45; flex: 1; }

.q-stage-analyzing{ align-items: center; padding: 60px 0; }
.q-spinner{
  width: 52px; height: 52px;
  border: 4px solid rgba(45,95,93,.18);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: q-spin 0.9s linear infinite;
}
@keyframes q-spin{ to { transform: rotate(360deg); } }
.q-analyzing{ font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); margin: 0; }

.q-stage-collect{ position: relative; padding-top: 36px; }
.q-back{
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--slate);
  padding: 6px 8px; border-radius: 8px;
  transition: color .2s;
}
.q-back:hover{ color: var(--teal); }
.q-collect-label{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink); margin: 0; text-align: left;
  letter-spacing: -.01em; text-transform: lowercase;
}
.q-input{
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.q-input:focus{ outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(45,95,93,.14); }
.q-select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
}
.q-fineprint{ margin: 0; font-size: 12px; color: var(--slate); }
.q-next{ align-self: flex-start; margin-top: 4px; }
.q-next:disabled{ opacity: .4; cursor: not-allowed; transform: none; }

.q-stage-result{
  gap: 16px;
  align-items: center;
  text-align: center;
}
.q-result-tag{
  align-self: center;
  padding: 6px 14px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--teal);
  border: 1px solid var(--teal);
  background: rgba(45,95,93,.06);
  border-radius: 999px;
}
.q-result-headline{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink); margin: 6px 0 0;
  text-transform: lowercase;
  max-width: 22ch;
}
.q-result-desc{
  font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0;
  max-width: 56ch;
}
.q-result-card{
  width: 100%;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-align: left;
}
.q-result-card h4{
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 6px;
}
.q-result-card p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.q-result-card-feat{ background: var(--teal); border-color: var(--teal); color: #fff; }
.q-result-card-feat h4{ color: var(--cream, #F4E4D7); }
.q-result-card-feat p{ color: #fff; }
.q-cta-row{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 16px;
}
.q-cta{ align-self: center; margin: 0; }
.q-cta-secondary{
  font-size: 13.5px;
  color: var(--slate);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color .2s;
}
.q-cta-secondary:hover{ color: var(--teal); }
.q-restart{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: 13px; color: var(--slate); font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s;
}
.q-restart:hover{ color: var(--teal); }

/* ═════════════════════════════════════════════════════════════
   MINI FOOT. single legal strip on every page (no big footer)
   ═════════════════════════════════════════════════════════════ */
.mini-foot{
  padding: 20px var(--gutter) 30px;
  text-align: center;
  font-size: 12px;
  color: var(--slate);
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.mini-foot a{ color: var(--slate); transition: color .2s; }
.mini-foot a:hover{ color: var(--teal); }

/* ═════════════════════════════════════════════════════════════
   LEGAL / TERMS subpage
   ═════════════════════════════════════════════════════════════ */
.page-legal .legal-body{
  max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--ink-2);
}
.page-legal .legal-body .h-3{ margin: 28px 0 8px; color: var(--ink); }
.page-legal .legal-body ul{ padding-left: 18px; margin: 8px 0 16px; }
.page-legal .legal-body li{ margin-bottom: 4px; }
.page-legal .legal-body a{ color: var(--teal); border-bottom: 1px solid currentColor; }
.page-legal .legal-meta{ margin-top: 32px; font-size: 13px; color: var(--slate); }

/* ═════════════════════════════════════════════════════════════
   Reveal animations
   ═════════════════════════════════════════════════════════════ */
.reveal{ opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .reveal{ opacity: 1; transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   MOBILE TIGHTENING (≤ 640 px)
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  :root{ --gutter: 18px; }
  body{ font-size: 15px; }

  /* nav */
  .nav{ padding: 10px var(--gutter); gap: 10px; }
  .nav-brand{ font-size: 20px; }
  .nav-brand img{ width: 32px; height: 32px; }
  .nav-right{ gap: 8px; margin-left: auto; }
  .lang-trigger{ padding: 7px 9px; font-size: 12px; }
  .lang-trigger .lang-code{ display: none; }   /* keep just the flag on phones */
  .btn-sm{ padding: 8px 14px; font-size: 12.5px; }

  /* hero */
  .hero{ padding: 100px var(--gutter) 60px; gap: 18px; }
  .hero .h-display{ font-size: clamp(38px, 11vw, 56px); }
  .hero-sub{ font-size: 16px; }
  .hero-ctas{ flex-direction: column; width: 100%; gap: 10px; }
  .hero-ctas .btn{ width: 100%; }
  .badges{ width: 100%; flex-direction: column; gap: 8px; }
  .badge{ width: 100%; justify-content: center; }
  .hero-phone{ margin-top: 22px; }
  .phone{ --w: 200px; }
  .p-big{ --w: 220px; }

  /* generic */
  .h-2{ font-size: clamp(28px, 8vw, 44px); }
  .h-3{ font-size: clamp(22px, 6vw, 28px); }

  /* alternating rows */
  .alt-row, .alt-row-flip{ padding: 36px 0; gap: 24px; }
  .alt-phone .phone{ --w: 220px; }

  /* pricing / faq paddings */
  .pricing-cards{ gap: 14px; }
  .pc{ padding: 26px 22px; }

  /* newsletter form */
  .newsletter{ padding: 50px var(--gutter) 70px; }
  .nl-form{ padding: 22px; }

  /* final cta */
  .final-cta{ padding: 60px var(--gutter); gap: 14px; }
}

/* ─── Very small phones ─── */
@media (max-width: 380px){
  .nav-brand span{ display: none; }     /* leave just the logo mark */
  .badge-text small{ font-size: 9px; }
}