/* ===== closing sections (2026-11-05): testimonials, FAQ, edge-to-edge download banner, footer.
   Same system as the rest of D1: eyebrow pill + two-tone h2 (.kb__head), white cards with a hairline on the
   #FAFAFA band, General Sans display, Switzer UI, green only as the accent. ===== */

/* testimonials */
.tm { position: relative; isolation: isolate; padding: clamp(96px, 14vh, 150px) clamp(20px, 4vw, 56px); }
.tm::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#FFFFFF 0%, #FAFAFA 30%, #FAFAFA 86%, #FFFFFF 100%); transition: opacity .6s var(--e); }
.tm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.tm__card { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 26px 26px 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(13,18,16,.055), 0 1px 2px rgba(13,18,16,.02); font-family: var(--app); }
.tm__stars { display: flex; gap: 3px; color: #F2B33D; } .tm__stars svg { width: 15px; height: 15px; }
.tm__card blockquote { flex: 1; margin: 0; font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.42; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.tm__card figcaption { display: flex; align-items: center; gap: 12px; }
.tm__card figcaption img, .tm__ini { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.tm__ini { display: grid; place-items: center; background: #E8F6EE; color: #1E9E5A; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tm__card figcaption b { display: block; font-size: 14.5px; font-weight: 600; } .tm__card figcaption small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--graphite); }

/* FAQ */
.fq { padding: clamp(80px, 12vh, 130px) clamp(20px, 4vw, 56px) clamp(96px, 14vh, 150px); background: #fff; }
.fq__list { display: grid; gap: 10px; max-width: 780px; margin: 0 auto; font-family: var(--app); }
.fq__item { border-radius: 20px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(13,18,16,.05); transition: background-color .3s var(--e); }
.fq__item.open { background: #fff; box-shadow: 0 0 0 1px rgba(13,18,16,.07), 0 14px 34px -24px rgba(13,18,16,.18); }
.fq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 24px; border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 17px/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); border-radius: inherit; }
.fq__q:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.fq__q i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(13,18,16,.08); transition: background-color .3s var(--e), transform .45s var(--e); }
.fq__q i::before, .fq__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 1px; background: var(--ink); transition: transform .45s var(--e); }
.fq__q i::after { transform: rotate(90deg); }
.fq__item.open .fq__q i { background: var(--ink); transform: rotate(180deg); } .fq__item.open .fq__q i::before, .fq__item.open .fq__q i::after { background: #fff; }
.fq__item.open .fq__q i::after { transform: rotate(0deg); }
.fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.32,.72,0,1); }
.fq__item.open .fq__a { grid-template-rows: 1fr; }
.fq__a > div { overflow: hidden; }
.fq__a p { margin: 0; padding: 0 64px 22px 24px; font-size: 15.5px; line-height: 1.6; color: var(--graphite); opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--e), transform .45s var(--e); }
.fq__item.open .fq__a p { opacity: 1; transform: none; transition-delay: .1s; }

/* download banner: edge to edge, soft green-led mesh, copy left, phone right cropped by the band */
.cta { position: relative; overflow: hidden; isolation: isolate; padding: 0 clamp(20px, 4vw, 56px); background: #F6FBF8; }
.cta__mesh { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(42% 70% at 6% 100%, rgba(255,214,196,.55), rgba(255,214,196,0) 70%),
    radial-gradient(40% 80% at 28% 92%, rgba(205,242,220,.9), rgba(205,242,220,0) 72%),
    radial-gradient(34% 80% at 58% 40%, rgba(178,236,203,.85), rgba(178,236,203,0) 70%),
    radial-gradient(32% 70% at 74% 10%, rgba(196,226,255,.8), rgba(196,226,255,0) 72%),
    radial-gradient(34% 76% at 96% 30%, rgba(226,218,255,.75), rgba(226,218,255,0) 72%),
    radial-gradient(60% 60% at 92% 100%, rgba(255,247,214,.6), rgba(255,247,214,0) 70%),
    linear-gradient(90deg, #FBF7F4 0%, #F3FBF6 40%, #F1F8FB 75%, #F7F5FF 100%); }
.cta__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; max-width: 1200px; margin: 0 auto; min-height: 520px; }
.cta__copy { padding: 80px 0; }
.cta__h { margin: 0; font-size: clamp(2rem, 1.1rem + 2vw, 3rem); font-weight: 500; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; max-width: 13em; }
.cta__h .dim { color: var(--dim); }
.cta__p { max-width: 30em; margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: var(--graphite); }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta__phone { position: relative; align-self: end; justify-self: center; width: clamp(240px, 22vw, 300px); aspect-ratio: 1350 / 2760; margin-bottom: -38%; }
.cta__scr { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; object-fit: cover; border-radius: 16.8% / 7.74%; }
.cta__frame { position: relative; display: block; width: 100%; height: auto; }

/* footer */
.ft { padding: 72px clamp(20px, 4vw, 56px) 28px; background: #fff; font-family: var(--app); }
.ft__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr); gap: 48px; max-width: 1200px; margin: 0 auto; padding-bottom: 48px; }
.ft__logo { display: inline-flex; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.05em; color: var(--ink); }
.ft__logo i { width: 6px; height: 6px; margin: 3px 0 0 1px; border-radius: 50%; background: var(--live); }
.ft__brand p { max-width: 24em; margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--graphite); }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ft__cols h3 { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ft__cols a { display: block; width: fit-content; padding: 5px 0; font-size: 14.5px; color: var(--graphite); transition: color .2s var(--e); }
.ft__cols a:hover { color: var(--ink); }
.ft__bar { display: flex; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; padding-top: 22px; border-top: 1px solid #EEF0ED; font-size: 13px; color: var(--mute); }
.ft__bar i { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--live); vertical-align: 1px; }

/* reveals, same language as the rest of the page */
.js .rv { opacity: 0; translate: 0 28px; transition: opacity .8s var(--mo), translate 1.1s var(--mo); transition-delay: calc(var(--ri, 0) * 70ms); }
.js .rv.mo-in { opacity: 1; translate: 0 0; }
.js .cta__phone.rv { translate: 0 80px; transition-delay: .15s; }
.js .cta__phone.rv.mo-in { translate: 0 0; }

/* dark theme compatibility (bento sets html.dark only while it is centred, which these never are) */
html.dark .tm::before { opacity: 0; }

@media (max-width: 1000px) {
  .tm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__in { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; min-height: 0; gap: 0; }
  .cta__copy { padding: 72px 0 40px; } .cta__h, .cta__p { margin-left: auto; margin-right: auto; } .cta__btns { justify-content: center; }
  .cta__phone { margin-bottom: -60%; width: clamp(220px, 56vw, 280px); }
  .ft__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .tm__grid { grid-template-columns: minmax(0, 1fr); }
  .tm__card blockquote { font-size: 16.5px; }
  .fq__q { padding: 18px 18px; font-size: 16px; } .fq__a p { padding: 0 18px 18px; }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__bar { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; translate: none; transition: none; } .fq__a, .fq__a p, .fq__q i, .fq__q i::before, .fq__q i::after { transition: none; } }

/* testimonial cards (2026-11-05): a breath of the page's light inside each card, plain radial gradients on white.
   Mint leads, with a faint sky or peach hint; the corner it sits in changes from card to card so the grid feels alive */
.tm__card { --g1: 82% 92%; --g2: 100% 40%; background:
    radial-gradient(55% 45% at var(--g1), rgba(150,232,184,.20), rgba(150,232,184,0) 100%),
    radial-gradient(45% 40% at var(--g2), rgba(178,216,255,.16), rgba(178,216,255,0) 100%),
    #fff; }
.tm__card:nth-child(2) { --g1: 18% 96%; --g2: 0% 50%; }
.tm__card:nth-child(3) { --g1: 90% 70%; --g2: 60% 100%; }
.tm__card:nth-child(4) { --g1: 12% 88%; --g2: 100% 100%; }
.tm__card:nth-child(5) { --g1: 70% 100%; --g2: 0% 70%; }
.tm__card:nth-child(6) { --g1: 96% 86%; --g2: 30% 100%; }
.tm__card:nth-child(3n+2) { background:
    radial-gradient(55% 45% at var(--g1), rgba(150,232,184,.20), rgba(150,232,184,0) 100%),
    radial-gradient(45% 40% at var(--g2), rgba(255,214,190,.18), rgba(255,214,190,0) 100%),
    #fff; }

/* FAQ v2 (2026-11-05): no borders on the items; a bare plus icon (no circle, no ring) that rotates 45° into a cross when open */
.fq__item, .fq__item.open { box-shadow: none; }
.fq__item.open { background: #fff; box-shadow: 0 14px 34px -26px rgba(13,18,16,.16); }
.fq__q i, .fq__item.open .fq__q i { width: 18px; height: 18px; background: none; box-shadow: none; transform: none; transition: transform .5s cubic-bezier(.32,.72,0,1); }
.fq__q i::before, .fq__q i::after, .fq__item.open .fq__q i::before, .fq__item.open .fq__q i::after { width: 14px; margin: -.8px 0 0 -7px; background: var(--ink); }
.fq__q i::after, .fq__item.open .fq__q i::after { transform: rotate(90deg); }
.fq__item.open .fq__q i { transform: rotate(45deg); }
.ft__bar i { margin: 0 2px 0 4px; }
.ft__by { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(13,18,16,.2); text-underline-offset: 3px; transition: text-decoration-color .2s var(--e); }
.ft__by:hover { text-decoration-color: currentColor; }

/* download banner v2 (2026-11-05): a wavy mesh. One huge soft ribbon of colour sweeps diagonally from the
   bottom-left (peach) through mint and sky to lilac at the top-right, bent into a wave by a rotated ellipse
   and blurred; the copy side stays clean white. The phone tilts in 3D like a product shot. */
.cta { background: #fff; }
.cta__mesh { background: none; overflow: hidden; }
.cta__mesh::before { content: ""; position: absolute; left: 18%; top: -70%; width: 120%; height: 240%; border-radius: 50%;
  background: conic-gradient(from 200deg at 42% 55%, rgba(255,255,255,0) 0deg, rgba(255,205,200,.85) 35deg, rgba(255,226,190,.8) 60deg, rgba(196,240,212,.95) 100deg,
    rgba(170,232,200,.9) 130deg, rgba(178,222,255,.85) 170deg, rgba(214,206,255,.8) 215deg, rgba(240,236,255,.4) 260deg, rgba(255,255,255,0) 300deg);
  transform: rotate(-18deg); filter: blur(70px); }
.cta__mesh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #fff 0%, rgba(255,255,255,.92) 26%, rgba(255,255,255,.35) 46%, rgba(255,255,255,0) 60%); }
.cta__phone { perspective: 1600px; }
.cta__phone .cta__frame, .cta__phone .cta__scr { transform-origin: 50% 60%; }
.cta__tilt { position: relative; transform: rotateY(-16deg) rotateX(7deg) rotateZ(6deg); transform-style: preserve-3d; filter: drop-shadow(-24px 40px 50px rgba(13,18,16,.18)); }
@media (max-width: 1000px) { .cta__mesh::before { left: -20%; top: -40%; width: 160%; height: 200%; } .cta__mesh::after { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.85) 30%, rgba(255,255,255,0) 60%); } }
.fq__item.open { background: #FAFAFA; box-shadow: none; }   /* open item keeps the same grey as the closed ones */
/* testimonials: every card uses the same glow as the Bilal card (mint low-centre-right, peach on the left edge) */
.tm__card, .tm__card:nth-child(n) { --g1: 70% 100%; --g2: 0% 70%; background:
    radial-gradient(55% 45% at 70% 100%, rgba(150,232,184,.20), rgba(150,232,184,0) 100%),
    radial-gradient(45% 40% at 0% 70%, rgba(255,214,190,.18), rgba(255,214,190,0) 100%),
    #fff; }
/* the driver's car, small, at the right end of the byline */
.tm__card figcaption > span { flex: 1; min-width: 0; }
.tm__car { width: 76px; height: auto; flex: none; margin-right: -6px; filter: drop-shadow(0 6px 6px rgba(13,18,16,.08)); }
.tm__card figcaption img.tm__car { width: 84px; height: auto; border-radius: 0; object-fit: contain; }   /* keep the car its own shape (the avatar rule made it a circle) */
/* CTA phone: front-facing (the tilt softened the screen); crisp rendering */
.cta__tilt { transform: none; filter: drop-shadow(0 30px 44px rgba(13,18,16,.16)); }
.cta__scr { image-rendering: auto; }
/* mobile: footer links and FAQ rows get full 44px tap targets */
@media (max-width: 640px) { .ft__cols a { padding: 11px 0; } .ft__cols h3 { margin-bottom: 4px; } .fq__q { min-height: 56px; } }
/* FAQ icon: one SVG plus (even strokes at any angle) instead of two pseudo-element bars */
.fq__q i::before, .fq__q i::after, .fq__item.open .fq__q i::before, .fq__item.open .fq__q i::after { content: none; }
.fq__q i { display: grid; place-items: center; color: var(--ink); }
.fq__q i svg { width: 18px; height: 18px; display: block; }