/* =========================================================================
   Tacho561 landing — main stylesheet (matched to Fuvar App v_01 Figma)
   ========================================================================= */

:root {
  --ta-orange:      #FF6A00;
  --ta-orange-600:  #F2560A;
  --ta-orange-700:  #DB4806;
  --ta-orange-soft: #FFF2E8;
  --ta-ink:         #16161A;
  --ta-ink-soft:    #54545F;
  --ta-muted:       #8A8A95;
  --ta-line:        #ECECEF;
  --ta-bg:          #FFFFFF;
  --ta-bg-soft:     #F5F5F7;
  --ta-card:        #F3F3F5;
  --ta-dark:        #111114;
  --ta-radius:      22px;
  --ta-radius-sm:   14px;
  --ta-shadow:      0 16px 40px rgba(20,20,40,.07);
  --bs-primary:     #FF6A00;
}

/* ---- Base --------------------------------------------------------------- */
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: var(--ta-ink); background: var(--ta-bg); line-height: 1.6;
}
h1,h2,h3,h4,.ta-wordmark { font-family: 'Poppins','Inter',sans-serif !important; font-weight: 800 !important; line-height: 1.1; color: var(--ta-ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
h3 { font-weight: 700 !important; }
a { color: var(--ta-orange-600); text-decoration: none; }
a:hover { color: var(--ta-orange-700); }
img { max-width: 100%; height: auto; }
.container { max-width: 1180px; }

.btn { border-radius: 999px; font-weight: 600; padding: .72rem 1.7rem; }
.btn-lg { padding: .85rem 2.1rem; font-size: 1.05rem; }
.btn-primary { background: var(--ta-orange); border-color: var(--ta-orange); color: #fff; }
.btn-primary:hover,.btn-primary:focus { background: var(--ta-orange-700); border-color: var(--ta-orange-700); color: #fff; }
.btn-dark { background: var(--ta-dark); border-color: var(--ta-dark); color: #fff; }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.8); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ta-orange-700); }

.ta-eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:700; color:var(--ta-muted); margin-bottom:.5rem; }
.ta-section-head { max-width:760px; margin:0 auto 2.6rem; text-align:center; }
.ta-h-orange { color: var(--ta-orange); }
.ta-sub { color: var(--ta-ink-soft); }
section { scroll-margin-top: 96px; }
.ta-section { padding: 4.5rem 0; }
.ta-bg-soft { background: var(--ta-bg-soft); }

/* ---- Navbar (centered logo) --------------------------------------------- */
.ta-navbar { background:#fff; box-shadow:0 1px 0 var(--ta-line); padding:.55rem 0; }
.ta-navbar.is-scrolled { box-shadow:0 6px 20px rgba(0,0,0,.06); }
.ta-navbar .container { position: relative; }
.ta-brand-center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:.5rem;
}
.ta-brand-center img { height:38px; width:auto; }
.ta-navbar .nav-link { color:var(--ta-ink); font-weight:600; padding:.5rem .9rem; font-size:.97rem; }
.ta-navbar .nav-link:hover { color:var(--ta-orange); }
.ta-lang .dropdown-toggle { color:var(--ta-ink-soft); font-weight:700; font-size:.92rem; }
.ta-nav-btns { display:flex; align-items:center; gap:.6rem; }
.ta-nav-btns .btn { padding:.55rem 1.35rem; font-size:.92rem; }
.ta-wordmark { font-size:1.3rem; color:var(--ta-ink); }
.ta-wordmark .o { color: var(--ta-orange); }
body { padding-top: 70px; }

/* ---- Hero (home / faq): full-bleed photo with the text overlaid on top --- */
.ta-hero { position:relative; min-height:clamp(600px,84vh,900px); background:#fff; overflow:hidden; text-align:center; display:flex; justify-content:center; }
.ta-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; z-index:0; }
/* white fade at the top so the heading reads over the sky */
.ta-hero::before { content:""; position:absolute; left:0; right:0; top:0; height:62%; z-index:1;
  background:linear-gradient(180deg,#fff 0%, rgba(255,255,255,.92) 24%, rgba(255,255,255,0) 100%); }
.ta-hero-inner { position:relative; z-index:2; padding-top:3.5rem; }
.ta-hero h1 { color:var(--ta-orange); max-width:980px; margin:0 auto; }
.ta-hero .lead { color:var(--ta-ink-soft); max-width:680px; margin:1.1rem auto 0; font-size:1.15rem; }
/* graceful fallback if the photo is missing */
.ta-hero.is-empty { min-height:auto; padding:3.5rem 0 4rem; background:#fff; }
.ta-hero.is-empty::before { display:none; }

/* Home + FAQ hero: show the FULL scene (mountains + all vehicles) by matching
   the section to the photo's aspect ratio so nothing is cropped, with the text
   overlaid on top over a white fade. */
.ta-home .ta-hero, .ta-faq-page .ta-hero { aspect-ratio:1440/1024; min-height:0; display:block; }
.ta-home .ta-hero-bg, .ta-faq-page .ta-hero-bg { object-fit:cover; object-position:center; }
.ta-home .ta-hero::before, .ta-faq-page .ta-hero::before { display:block; height:48%; background:linear-gradient(180deg,#fff 0%, rgba(255,255,255,.82) 24%, rgba(255,255,255,0) 100%); }
.ta-home .ta-hero-inner, .ta-faq-page .ta-hero-inner { position:absolute; left:0; right:0; top:0; z-index:2; padding-top:clamp(2rem,4vw,3.5rem); }
.ta-home .ta-hero.is-empty, .ta-faq-page .ta-hero.is-empty { aspect-ratio:auto; }
.ta-home .ta-hero.is-empty .ta-hero-inner, .ta-faq-page .ta-hero.is-empty .ta-hero-inner { position:static; }

/* The truck-zoom mobile crop is hidden on desktop. */
.ta-hero-mobile { display:none; }
/* Home + FAQ hero on phones (Figma mobile): heading + subtitle on white at the
   top, then the zoomed truck photo below. */
@media (max-width: 767.98px) {
  .ta-home .ta-hero, .ta-faq-page .ta-hero { aspect-ratio:auto; min-height:0; height:auto; display:flex; flex-direction:column; background:#fff; }
  .ta-home .ta-hero::before, .ta-faq-page .ta-hero::before { display:none; }
  .ta-home .ta-hero-inner, .ta-faq-page .ta-hero-inner { position:static; order:1; padding:1.4rem 0 1.4rem; }
  .ta-home .ta-hero-bg, .ta-faq-page .ta-hero-bg { display:none; }
  .ta-home .ta-hero-mobile, .ta-faq-page .ta-hero-mobile { display:block; position:static; order:2; width:100%; aspect-ratio:505/670; height:auto; object-fit:cover; object-position:center top; }
}

/* ---- Feature stat cards -------------------------------------------------- */
.ta-feature-cards .col-lg-4 { display:flex; }
.ta-fcard { background:var(--ta-card); border-radius:var(--ta-radius); padding:2rem 1.8rem; width:100%; }
.ta-fcard .ta-eyebrow { color:var(--ta-muted); }
.ta-fcard-num { font-family:'Poppins',sans-serif; font-weight:800; color:var(--ta-orange); font-size:1.7rem; line-height:1.1; margin:.2rem 0 .7rem; }
.ta-fcard p { color:var(--ta-ink-soft); margin:0; font-size:.96rem; }

/* ---- App showcase (scrollable phone carousel) --------------------------- */
.ta-showcase { padding-top:2rem; overflow:hidden; }
.ta-showcase-track {
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
  padding:2rem max(1rem, calc(50% - 195px));
}
.ta-showcase-track::-webkit-scrollbar { display:none; }
.ta-showcase-track.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.ta-phone-slide {
  flex:0 0 clamp(260px,34vw,380px); scroll-snap-align:center;
  display:flex; justify-content:center; align-items:flex-end;
  transform:scale(.78); transform-origin:bottom center; opacity:.5; transition:transform .35s ease, opacity .35s ease;
}
.ta-phone-slide.is-active { transform:scale(1); opacity:1; }
.ta-phone { width:100%; }
.ta-phone-photo { width:100%; display:block; filter:drop-shadow(0 22px 45px rgba(20,20,40,.22)); }
/* "New features coming soon" phone is intentionally out of focus (a teaser). */
.ta-phone-slide.is-upcoming .ta-phone-photo { filter:blur(6px) drop-shadow(0 22px 45px rgba(20,20,40,.22)); }

/* Device frame */
.ta-device { position:relative; width:100%; aspect-ratio:320/660; background:#15151A; border-radius:13% / 6.3%; padding:2.6%; box-shadow:0 22px 45px rgba(20,20,40,.22); }
.ta-device-notch { position:absolute; top:2.6%; left:50%; transform:translateX(-50%); width:34%; height:2.6%; background:#15151A; border-radius:0 0 10px 10px; z-index:5; }
.ta-screen { container-type:inline-size; position:relative; width:100%; height:100%; background:#fff; border-radius:10.5% / 5%; overflow:hidden; display:flex; flex-direction:column; padding:7cqw 5cqw 0; }

/* Shared screen bits */
.ta-sc-bar { display:flex; justify-content:space-between; align-items:center; font-size:3.2cqw; font-weight:700; color:#15151A; }
.ta-sc-bar-ic i { margin-left:1.2cqw; font-size:3cqw; }
.ta-sc-conn { display:flex; justify-content:space-between; align-items:center; font-size:2.6cqw; color:#7A7A88; margin-top:3cqw; font-weight:600; }
.ta-sc-conn .bi-check-circle-fill { color:#27c06b; }
.ta-sc-conn .bi-bluetooth { color:#2f8fff; }
.ta-sc-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:7cqw; text-align:center; margin:4cqw 0 0; color:#15151A; }
.ta-sc-tag { align-self:center; background:#fff; color:#15151A; font-weight:600; font-size:3cqw; padding:1.6cqw 6cqw; border-radius:99px; box-shadow:0 1.5cqw 3cqw rgba(20,20,40,.10); }
.ta-sc-tag.light { background:#fff; color:var(--ta-orange); box-shadow:none; }

/* Gauge */
.ta-sc-body { flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:6cqw; margin-top:5cqw; }
.ta-gauge { position:relative; width:76%; aspect-ratio:1; margin:0 auto; }
.ta-gauge svg { width:100%; height:100%; }
.ta-gauge .bg { fill:none; stroke:#EFEFF2; stroke-width:7; }
.ta-gauge .fg { fill:none; stroke:var(--ta-orange); stroke-width:7; stroke-linecap:round; stroke-dasharray:190 264; }
.ta-gauge-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ta-gauge-c strong { font-family:'Poppins',sans-serif; font-size:9cqw; color:#15151A; }
.ta-gauge-c small { font-size:2.8cqw; color:#8A8A95; }

/* Aktív vezetés — gray gauge card + orange bottom section (Frame 353) */
.ta-sc-gaugecard { flex:1; background:#F3F3F5; border-radius:6cqw; margin-top:4cqw; padding:6cqw 4cqw; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.ta-sc-gaugecard .ta-gauge { width:88%; margin:auto 0; }
.ta-sc-bottom { margin:4cqw -5cqw 0; padding:6cqw 5cqw; background:linear-gradient(180deg,#FFB267 0%, #FF6A00 78%); border-radius:9cqw 9cqw 0 0; display:flex; flex-direction:column; gap:3.5cqw; }
.ta-sc-speed { display:flex; justify-content:space-between; align-items:center; background:#fff; border:0; border-radius:4cqw; padding:3.5cqw 4.5cqw; }
.ta-sc-speed span { font-size:2.6cqw; color:#8A8A95; font-weight:700; letter-spacing:.06em; }
.ta-sc-speed b { font-family:'Poppins',sans-serif; font-size:8cqw; color:#15151A; line-height:1; }
.ta-sc-speed small { font-size:3cqw; color:#8A8A95; font-weight:600; }
.ta-sc-actions { display:flex; align-items:center; gap:3cqw; }
.ta-sc-stoppill { flex:1; background:#fff; border-radius:99px; display:flex; align-items:center; gap:2.5cqw; padding:2cqw 4cqw 2cqw 2cqw; font-weight:700; color:#15151A; font-size:3.4cqw; }
.ta-sc-stoppill .chk { width:9cqw; height:9cqw; border-radius:50%; background:var(--ta-orange); color:#fff; display:grid; place-items:center; font-size:4cqw; flex:0 0 auto; }
.ta-sc-stoppill em { flex:1; font-style:normal; text-align:center; }
.ta-sc-stoppill .bi-chevron-double-right { color:var(--ta-orange); }
.ta-sc-actions .ta-sc-fab { background:#fff; color:var(--ta-orange); width:12cqw; height:12cqw; }

/* Footer buttons */
.ta-sc-foot { margin-top:auto; display:flex; align-items:center; gap:2.5cqw; padding:5cqw 0 6cqw; }
.ta-sc-btn { flex:1; border:0; background:var(--ta-orange); color:#fff; font-weight:700; font-size:3.3cqw; border-radius:99px; padding:3.6cqw 3cqw; display:flex; align-items:center; justify-content:center; gap:2cqw; white-space:nowrap; }
.ta-sc-fab, .ta-sc-back { width:11cqw; height:11cqw; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:4.5cqw; }
.ta-sc-fab { background:#15151A; color:#fff; }
.ta-sc-back { background:#fff; color:var(--ta-orange); border:1px solid #ECECEF; }
.ta-sc-back.light { background:rgba(255,255,255,.7); border:0; }
.ta-screen--utvonal::after { content:""; position:absolute; left:0; right:0; bottom:0; height:20%; background:linear-gradient(180deg,transparent,rgba(255,106,0,.16)); pointer-events:none; z-index:0; }
.ta-screen--utvonal > * { position:relative; z-index:1; }

/* Útvonal */
.ta-sc-time { background:#F7F7F9; border-radius:4cqw; padding:3cqw; margin-top:3cqw; text-align:center; }
.ta-sc-time-lbl { font-size:2.8cqw; color:#8A8A95; font-weight:600; }
.ta-sc-time-vals { display:flex; justify-content:center; align-items:baseline; gap:2cqw; margin-top:1cqw; }
.ta-sc-time-vals b { font-family:'Poppins',sans-serif; font-size:6.5cqw; color:#15151A; }
.ta-sc-time-vals small { display:block; font-size:2.1cqw; color:#8A8A95; font-weight:600; }
.ta-sc-time-vals > span { font-size:5cqw; color:#ccc; }
.ta-sc-stops { list-style:none; margin:3cqw 0 0; padding:0; overflow:hidden; }
.ta-sc-stops li { display:flex; gap:2.5cqw; padding:2cqw 0; border-bottom:1px solid #F0F0F3; }
.ta-sc-stops .dot { flex:0 0 auto; width:3cqw; height:3cqw; border-radius:50%; background:#ccc; margin-top:1.4cqw; }
.ta-sc-stops .dot.done { background:#27c06b; }
.ta-sc-stops b { font-size:3.1cqw; color:#15151A; }
.ta-sc-stops small { display:block; font-size:2.6cqw; color:#8A8A95; }
.ta-sc-stops .meta { display:flex; justify-content:space-between; font-size:2.4cqw; color:#A0A0AB; margin-top:.6cqw; }

/* Tankolás (orange gradient screen) */
.ta-screen--tankolas { background:linear-gradient(180deg,#fff 28%, #FF7A1A 105%); }
.ta-sc-prog { display:flex; gap:2cqw; margin-top:3cqw; }
.ta-sc-prog span { flex:1; height:1.6cqw; border-radius:99px; background:#EAEAEE; }
.ta-sc-prog span.on { background:var(--ta-orange); }
.ta-sc-mid { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqw; }
.ta-sc-q { font-family:'Poppins',sans-serif; font-weight:700; font-size:5.6cqw; color:#15151A; text-align:center; }
.ta-sc-big { font-family:'Poppins',sans-serif; font-weight:800; font-size:13cqw; color:#15151A; }
.ta-sc-big small { font-size:6cqw; color:#54545F; }

/* Esemény */
.ta-sc-cam { display:flex; flex-direction:column; align-items:center; gap:.8cqw; margin-top:4cqw; color:#8A8A95; }
.ta-sc-camlbl { color:var(--ta-orange); font-weight:700; font-size:3.3cqw; }
.ta-sc-cam i { font-size:6cqw; color:#15151A; margin-top:1cqw; }
.ta-sc-cam small { font-size:2.5cqw; }
.ta-sc-thumbs { display:flex; gap:2.5cqw; margin-top:3cqw; }
.ta-sc-thumbs .thumb, .ta-sc-thumbs .add { flex:1; aspect-ratio:1; border-radius:3cqw; display:grid; place-items:center; font-size:5cqw; }
.ta-sc-thumbs .thumb { background:linear-gradient(135deg,#b9b9c0,#8a8a95); color:#fff; }
.ta-sc-thumbs .add { border:1.5px dashed var(--ta-orange); color:var(--ta-orange); }
.ta-sc-note { margin-top:3cqw; border:1px solid #ECECEF; border-radius:3cqw; padding:3cqw; font-size:2.9cqw; color:#B8B8C0; min-height:16cqw; flex:1; }

/* Új funkciók (blurred coming soon) */
.ta-sc-blur { flex:1; width:100%; display:flex; flex-direction:column; gap:4cqw; align-items:center; justify-content:center; filter:blur(3px); opacity:.8; padding:6cqw 0; }
.ta-sc-blur .pill { width:72%; height:9cqw; border-radius:99px; background:var(--ta-orange); }
.ta-sc-blur .fab { width:12cqw; height:12cqw; border-radius:50%; background:var(--ta-orange); }
.ta-sc-soon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2cqw; font-family:'Poppins',sans-serif; font-weight:700; font-size:5cqw; color:#15151A; }
.ta-sc-soon i { color:var(--ta-orange); }
.ta-showcase-cap { text-align:center; margin-top:1rem; }
.ta-showcase-cap h3 { font-size:1.5rem; margin-bottom:.6rem; }
.ta-showcase-cap p { color:var(--ta-ink-soft); max-width:560px; margin:0 auto; min-height:3.2em; }
.ta-showcase-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; }
.ta-dot { width:9px; height:9px; border-radius:50%; background:#D9D9DE; border:0; padding:0; cursor:pointer; transition:background .2s, width .2s; }
.ta-dot.active { background:var(--ta-orange); width:22px; border-radius:6px; }

/* ---- Stats (2x2 big cards) ---------------------------------------------- */
/* Stat cards: subtle gradient + border + soft shadow so they read as defined,
   slightly elevated cards (matching the Figma) instead of flat grey blocks. */
.ta-statcards .ta-fcard {
  background:linear-gradient(180deg, #F8F8FA 0%, #EFEFF2 100%);
  border:1px solid rgba(20,20,40,.06);
  box-shadow:0 14px 34px rgba(20,20,40,.05);
}
.ta-statcards .ta-fcard-num { font-size:2.2rem; }
.ta-num-suffix { font-size:.45em; color:var(--ta-orange); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-left:.2em; }
.ta-fcard-sub { display:block; color:var(--ta-orange); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; margin:-.45rem 0 .8rem; }
/* Black full bar + orange partial bar (Figma "80%-kal kevesebb"). */
.ta-stat-bars { display:flex; flex-direction:column; gap:.45rem; margin:.5rem 0 .95rem; }
.ta-stat-bars span { display:block; height:15px; border-radius:999px; }
.ta-stat-bars .b1 { width:100%; background:#1f1f1f; }
.ta-stat-bars .b2 { width:56%; background:var(--ta-orange); }

/* ---- Global presence ---------------------------------------------------- */
.ta-mini-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; margin:1.5rem 0 2.5rem; }
.ta-mini-stat { text-align:center; }
.ta-mini-num { display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:1.7rem; color:var(--ta-ink); }
.ta-mini-label { color:var(--ta-muted); font-size:.9rem; }
.ta-map-img { display:block; margin:0 auto; max-width:980px; }
.ta-map-mobile { display:none; margin:0 auto; max-width:100%; }

/* ---- Newsletter band ---------------------------------------------------- */
.ta-newsletter { padding: 1rem 0 1.25rem; }
.ta-newsletter-inner {
  background: var(--ta-orange); color:#fff; border-radius:var(--ta-radius);
  padding: 3rem; display:flex; flex-wrap:wrap; align-items:center; gap:2rem; justify-content:space-between;
}
.ta-newsletter-text { flex:1 1 340px; }
.ta-newsletter-text h2 { color:#fff; }
.ta-newsletter-text p { color:rgba(255,255,255,.92); margin:.6rem 0 0; }
.ta-newsletter-form { flex:1 1 360px; }
.ta-newsletter-form .ta-label { display:block; font-weight:700; margin-bottom:.7rem; }
/* Email field + button on one row (CF7 wraps the input in a span, so the flex
   sizing must target .wpcf7-form-control-wrap, not the input).
   position:relative anchors the submit spinner — see .wpcf7-spinner below. */
.ta-signup-form { position:relative; display:flex; flex-wrap:nowrap; gap:.55rem; align-items:center; }
.ta-signup-form .wpcf7-form-control-wrap { flex:1 1 auto; min-width:0; }
.ta-signup-form input[type=email], .ta-signup-form input[type=text] {
  width:100%; border:0; border-radius:12px; padding:.95rem 1.4rem; font-size:1rem; background:#fff; color:var(--ta-ink);
}
.ta-signup-form input[type=submit], .ta-signup-form button {
  flex:0 0 auto; border:0; border-radius:999px; padding:.95rem 1.9rem; font-weight:700; background:var(--ta-dark); color:#fff; cursor:pointer; white-space:nowrap;
}
.ta-signup-form input[type=submit]:hover, .ta-signup-form button:hover { background:#000; }
.wpcf7-acceptance { flex:1 1 100%; font-size:.82rem; color:rgba(255,255,255,.9); margin-top:.2rem; }

/* CF7's submit spinner is a permanent in-flow sibling of the button — 24px wide
   with `margin:0 24px`, so it silently reserved 72px of the row even while
   invisible. That pulled the field+button pair short of the container's right
   edge (the label above and the note below still ran full width, so the row
   looked mis-centred), and flex-shrink squashed the 24px circle into an oval.
   Take it out of flow and redraw it as a white ring inside the button's right
   padding. Keep CF7's own visibility toggle: it stays hidden until .submitting.
   The button's right padding is 1.9rem (~30px), so a 14px ring at right:.55rem
   sits wholly inside it with ~8px clear of the label. */
.ta-signup-form .wpcf7-spinner {
  position:absolute; right:.55rem; top:50%; margin:-7px 0 0;
  width:14px; height:14px; padding:0; opacity:1;
  background:none; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:ta-spin .7s linear infinite;
}
.ta-signup-form .wpcf7-spinner::before { display:none; }  /* CF7's inner dot */
@keyframes ta-spin { to { transform:rotate(360deg); } }

/* Single-field form, so a per-field tip only ever repeats what the response
   message below the form already says — and CF7 renders both at once, which
   also grew the flex row and dropped the button ~13px below the input. Hide it
   from sight but keep it in the a11y tree (the input's aria-describedby points
   at it), rather than display:none. */
.ta-signup-form .wpcf7-not-valid-tip {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.wpcf7 .wpcf7-not-valid-tip { color:#fff; font-weight:600; }
/* CF7 injects the Turnstile widget straight after the email+button row with no
   margin of its own, so it sat flush against the field. Spacing only.
   Do NOT round/clip this box: Cloudflare draws the widget right to its own
   edges, so `border-radius` + `overflow:hidden` sliced the bottom corners and
   cut off the "Adatvédelem • Súgó" line. Square corners are how the widget is
   meant to look, and its inner markup is not ours to restyle. */
.wpcf7-turnstile { margin-top:.75rem; }
.wpcf7-response-output { border-radius:10px; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5) !important; color:#fff; margin:1rem 0 0 !important; }
.ta-newsletter-note { font-size:.8rem; color:rgba(255,255,255,.85); margin-top:.9rem; }

/* ---- Footer ------------------------------------------------------------- */
.ta-footer { background:#fff; border-top:1px solid var(--ta-line); padding:2.25rem 0 1.1rem; }
.ta-footer-brand { display:flex; align-items:center; gap:.7rem; }
.ta-footer-brand img { height:46px; }
.ta-footer-brand .ta-wordmark { font-size:2rem; color:var(--ta-orange); }
.ta-footer-tagline { color:var(--ta-ink-soft); max-width:420px; margin-top:1rem; }
.ta-footer-h { font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ta-ink); margin-bottom:.9rem; }
.ta-footer-menu { list-style:none; padding:0; margin:0; }
.ta-footer-menu li { margin-bottom:.45rem; }
.ta-footer-menu a { color:var(--ta-ink-soft); font-size:.95rem; }
.ta-footer-menu a:hover { color:var(--ta-orange); }
.ta-footer-bottom { border-top:1px solid var(--ta-line); margin-top:1.4rem; padding-top:1rem; font-size:.85rem; color:var(--ta-muted); }

/* ---- About -------------------------------------------------------------- */
/* Gradient hero that runs to the very top of the page, with the navbar sitting
   ON it (transparent). Diagonal: light top-left -> orange -> deep red bottom-right. */
body.ta-transparent-nav { padding-top:0; }
.ta-transparent-nav .ta-navbar { background:transparent; box-shadow:none; }
.ta-transparent-nav .ta-navbar.is-scrolled { background:#fff; box-shadow:0 1px 0 var(--ta-line); }
.ta-about-hero { background:linear-gradient(118deg, #FFF4EA 0%, #FFC78A 20%, #FF9B45 42%, #FF7A1C 62%, #F2560C 84%, #E0480A 100%); color:#fff; text-align:center; padding:9rem 0 6rem; }
.ta-about-hero h1 { color:#fff; max-width:900px; margin:0 auto 1.8rem; }

/* ---- Early Access page (full-bleed gradient hero + form + phone) -------- */
.ta-early-hero {
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:8.5rem 0 0;
  background:
    radial-gradient(32% 24% at 50% 100%, rgba(255,255,255,.7) 0%, rgba(255,252,247,.26) 44%, rgba(255,255,255,0) 76%),
    linear-gradient(135deg, #FFE7CC 0%, #FFC078 16%, #FF9A42 38%, #FF7E22 60%, #FB6E10 82%, #F26307 100%);
}
.ta-early-inner { max-width:760px; margin:0 auto; }
.ta-early-hero h1 { color:#fff; font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.12; margin:0 auto 1.4rem; max-width:1080px; }
.ta-early-sub { color:rgba(255,255,255,.95); font-size:1.06rem; line-height:1.62; max-width:610px; margin:0 auto 2.1rem; }
.ta-early-form { max-width:520px; margin:0 auto 1rem; }
.ta-early-form .wpcf7 { margin:0; }
.ta-early-notice { display:flex; align-items:center; justify-content:center; gap:.55rem;
  max-width:520px; margin:0 auto 1rem; padding:.75rem 1.15rem;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
  border-radius:14px; color:#fff; font-size:.94rem; font-weight:500; line-height:1.4; text-align:left; }
.ta-early-notice[hidden] { display:none; }
.ta-early-notice i { flex:none; font-size:1.05rem; }
.ta-early-notice.is-shown { animation:taNoticeIn .35s ease; }
@keyframes taNoticeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.ta-early-consent { color:rgba(255,255,255,.9); font-size:.85rem; line-height:1.5; max-width:470px; margin:0 auto; }
.ta-early-consent a { color:#fff; text-decoration:underline; }
/* Phone "emerges": keep the rounded top, and fade the bottom into the glow
   (mask) so there's no hard cut line — it dissolves into the bloom below. */
.ta-early-phone { position:relative; width:400px; max-width:84%; margin:2.6rem auto 0; aspect-ratio:400/500; }
.ta-early-phone img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  -webkit-mask-image:linear-gradient(to bottom, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 90%, transparent 100%); }
/* Out-of-focus bottom: progressively blur the phone's lower part and bloom it
   into a bright light, so the device dissolves into the glow (matches Figma). */
.ta-early-phone::after {
  content:""; position:absolute; left:-8%; right:-8%; bottom:0; height:26%;
  pointer-events:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 56%, rgba(255,255,255,.18) 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 40%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 40%);
}

/* ---- Packages / pricing table (Early Access) --------------------------- */
.ta-pricing { padding:4.5rem 0 5rem; background:var(--ta-bg-soft); }
.ta-pricing-head { text-align:center; max-width:720px; margin:0 auto 2.4rem; }
.ta-pricing-head h2 { margin:0 0 .8rem; }
.ta-pricing-head p { color:var(--ta-ink-soft); font-size:1.02rem; margin:0; }
.ta-pricing-table { max-width:1000px; margin:0 auto; background:#fff; border-radius:16px;
  box-shadow:0 1px 2px rgba(20,30,50,.05), 0 18px 44px -20px rgba(20,30,50,.16); overflow:hidden; }
.ta-pricing-hrow, .ta-pricing-row {
  display:grid; grid-template-columns:1.3fr .8fr .8fr 1.95fr; align-items:center;
}
.ta-pricing-hrow {
  padding:1.1rem 2rem; background:#f5f7fb; border-bottom:1px solid var(--ta-line);
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5b6572;
}
.ta-pricing-hrow .col-c { text-align:center; }
.ta-pricing-hrow .col-price { text-align:right; }
.ta-pricing-row { padding:.95rem 2rem; border-bottom:1px solid #eef1f6; }
.ta-pricing-row:last-child { border-bottom:0; }
.ta-pricing-row.is-featured { background:rgba(255,106,0,.05); }
.ta-pricing-row .col-name { display:flex; align-items:center; gap:.6rem; }
.ta-pricing-row .plan { font-family:'Poppins',sans-serif; font-size:1.2rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ta-orange); }
.ta-pricing-row .badge { font-size:.58rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ta-orange); background:rgba(255,106,0,.12); padding:.28rem .55rem; border-radius:999px; white-space:nowrap; }
.ta-pricing-row .col-c { display:flex; align-items:center; justify-content:center; }
.ta-pricing-row .col-label { display:none; }
.ta-pricing-row .cc-val { display:flex; align-items:center; font-weight:600; color:var(--ta-ink); }
.ta-pricing-row .col-price { display:flex; align-items:center; justify-content:flex-end; gap:1.2rem; }
.ta-pricing-row .price { display:flex; align-items:baseline; gap:.2rem; }
.ta-pricing-row .amt { font-family:'Poppins',sans-serif; font-size:1.35rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ta-ink); }
.ta-pricing-row .amt-custom { font-size:1.1rem; }
.ta-pricing-row .per { font-size:.7rem; font-weight:500; color:var(--ta-muted); }
.ta-pricing-row .btn-plan { flex:none; min-width:184px; text-align:center; font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:.72rem 1.3rem; border-radius:999px;
  background:var(--ta-orange); color:#fff; transition:filter .12s ease, transform .12s ease; }
.ta-pricing-row .btn-plan:hover { filter:brightness(.94); transform:translateY(-1px); color:#fff; }
.ta-pricing-note { text-align:center; color:var(--ta-muted); font-size:.85rem; margin:1.4rem 0 0; }
.ta-pricing-note .ta-price-hl { color:var(--ta-orange); font-weight:700; }

/* ---- Plan cards (three tiers + billing toggle) ------------------------- */
.ta-plans { padding:4.5rem 0 3rem; background:#fff; }
.ta-plans-head { text-align:center; max-width:720px; margin:0 auto 2.6rem; }
.ta-plans-head h2 { color:var(--ta-orange); margin:0 0 1rem; }
.ta-plans-head p { color:var(--ta-ink-soft); font-size:1.02rem; margin:0 auto 1.6rem; max-width:540px; }
.ta-billing-toggle { display:inline-flex; gap:2px; background:#eef0f4; border-radius:999px; padding:4px; }
.ta-billing-toggle button { border:none; cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:600;
  color:var(--ta-ink-soft); background:transparent; padding:.5rem 1.15rem; border-radius:999px; transition:background .15s ease, color .15s ease; }
.ta-billing-toggle button.is-active { background:var(--ta-orange); color:#fff; }
.ta-plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1080px; margin:0 auto; align-items:stretch; }
.ta-plan-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--ta-line);
  border-radius:16px; padding:1.8rem 1.7rem; box-shadow:0 10px 30px -18px rgba(20,30,50,.25); }
.ta-plan-card.is-outline { background:var(--ta-bg-soft); border-color:transparent; box-shadow:none; }
.ta-plan-card h3 { color:var(--ta-orange); font-size:1.35rem; margin:0 0 .5rem; }
.ta-plan-desc { color:var(--ta-ink-soft); font-size:.9rem; line-height:1.5; margin:0 0 1.2rem; min-height:2.7rem; }
.ta-plan-price { display:flex; align-items:baseline; gap:.25rem; }
.ta-plan-price .amt { font-family:'Poppins',sans-serif; font-size:2.1rem; font-weight:700; letter-spacing:-.02em; color:var(--ta-ink); }
.ta-plan-price .per { font-size:.85rem; font-weight:500; color:var(--ta-muted); }
.ta-plan-annual { font-size:.75rem; color:var(--ta-orange); font-weight:600; margin-top:.25rem; }
.ta-plan-feats { list-style:none; padding:0; margin:1.4rem 0 1.8rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.ta-plan-feats li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--ta-ink); line-height:1.4; }
.ta-plan-feats .tick { flex:none; width:18px; height:18px; border-radius:50%; background:#e9edf4; color:#7b8494;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; margin-top:.05rem; }
.ta-plan-card .btn-plan { text-align:center; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.2rem; border-radius:999px; background:var(--ta-orange); color:#fff; transition:filter .12s ease, transform .12s ease; }
.ta-plan-card .btn-plan:hover { filter:brightness(.94); transform:translateY(-1px); color:#fff; }
.ta-plan-card .btn-plan.is-outline { background:transparent; color:var(--ta-ink-soft); box-shadow:inset 0 0 0 1px #d5dbe5; }
.ta-plan-card .btn-plan.is-outline:hover { background:rgba(0,0,0,.02); color:var(--ta-ink); }
@media (max-width:860px) {
  .ta-plans-grid { grid-template-columns:1fr; max-width:460px; }
  .ta-plan-desc { min-height:0; }
}
@media (max-width:820px) {
  .ta-pricing-hrow { display:none; }
  .ta-pricing-row { grid-template-columns:1fr; gap:.65rem; padding:1.3rem 1.4rem; }
  .ta-pricing-row .col-c { justify-content:space-between; }
  .ta-pricing-row .col-label { display:inline; font-size:.72rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ta-muted); }
  .ta-pricing-row .col-price { flex-direction:column; align-items:stretch; gap:.85rem; margin-top:.25rem; }
  .ta-pricing-row .price { justify-content:flex-start; }
  .ta-pricing-row .btn-plan { min-width:0; width:100%; padding:.85rem; }
}

.ta-about-intro { padding:4rem 0 1rem; }
.ta-about-intro .lead-orange { color:var(--ta-orange); font-family:'Poppins',sans-serif; font-weight:700; font-size:1.5rem; margin-bottom:1rem; }
.ta-about-intro p { color:var(--ta-ink-soft); }
.ta-about-link { font-weight:700; }
.ta-mission { background:var(--ta-dark); color:#fff; text-align:center; padding:4.5rem 0; }
.ta-mission h2 { color:#fff; max-width:900px; margin:0 auto 1.4rem; }
.ta-mission p { color:rgba(255,255,255,.8); max-width:760px; margin:0 auto; }
.ta-believe { padding:4rem 0 1rem; }
.ta-believe h3 { font-size:1.4rem; margin-bottom:1rem; }
.ta-believe p { color:var(--ta-ink-soft); }
.ta-team { padding:3rem 0 4.5rem; }
.ta-team-card { text-align:center; margin-bottom:1.5rem; }
.ta-team-photo { aspect-ratio:3/4; border-radius:var(--ta-radius); overflow:hidden; background:var(--ta-card); display:grid; place-items:center; margin-bottom:1rem; }
.ta-team-photo img { width:100%; height:100%; object-fit:cover; }
.ta-team-photo .av { font-size:3rem; color:var(--ta-muted); }
.ta-team-name { font-size:1.15rem; margin:0; }
.ta-team-role { color:var(--ta-muted); }

/* ---- News page ---------------------------------------------------------- */
.ta-news-hero { text-align:center; padding:3.5rem 0 2.5rem; }
.ta-news-hero h1 { color:var(--ta-orange); }
.ta-featured {
  position:relative; border-radius:30px; overflow:hidden; min-height:460px;
  display:flex; align-items:flex-end; color:#fff; background:var(--ta-card);
}
.ta-featured img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ta-featured .ta-feat-body { position:relative; padding:2rem; background:linear-gradient(180deg,transparent,rgba(0,0,0,.75)); width:100%; }
.ta-featured h2 { color:#fff; font-size:1.7rem; }
.ta-tag { display:inline-flex; align-items:center; gap:.4rem; background:var(--ta-orange); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .8rem; border-radius:999px; }
/* Featured card category pill: translucent dark with an orange dot (sentence case) */
.ta-featured .ta-tag { background:rgba(18,18,26,.5); text-transform:none; letter-spacing:0; font-size:.82rem; padding:.4rem 1rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ta-featured .ta-tag i { color:var(--ta-orange); font-size:.55rem; }
.ta-meta { font-size:.85rem; color:var(--ta-muted); }
.ta-featured .ta-meta { color:rgba(255,255,255,.85); }
.ta-fresh-title { font-size:1.2rem; color:var(--ta-orange); margin-bottom:1.2rem; }
.ta-fresh-item { display:flex; gap:.9rem; padding:.7rem; border-radius:var(--ta-radius-sm); }
.ta-fresh-item:hover { background:var(--ta-bg-soft); }
.ta-fresh-thumb { flex:0 0 80px; height:80px; border-radius:14px; overflow:hidden; background:var(--ta-card); display:grid; place-items:center; }
.ta-fresh-thumb img { width:100%; height:100%; object-fit:cover; }
.ta-fresh-thumb .ph { color:var(--ta-muted); }
.ta-fresh-item h4 { font-size:.98rem; margin:0 0 .3rem; }
.ta-fresh-item h4 a { color:var(--ta-ink); }
.ta-fresh-item h4 a:hover { color:var(--ta-orange); }

/* .ta-arrows / .ta-arrow removed with the dead carousel controls they styled. */
.ta-cards-head { display:flex; align-items:center; justify-content:space-between; margin:3rem 0 1.5rem; }
.ta-cards-head h2 { color:var(--ta-orange); margin:0; }

.ta-card { background:#fff; border-radius:22px; padding:.85rem; height:100%; display:flex; flex-direction:column; box-shadow:0 10px 26px rgba(20,20,40,.06); transition:transform .2s, box-shadow .2s; }
.ta-card:hover { transform:translateY(-4px); box-shadow:var(--ta-shadow); }
.ta-card-thumb { aspect-ratio:16/11; background:var(--ta-card); border-radius:15px; display:grid; place-items:center; overflow:hidden; }
.ta-card-thumb img { width:100%; height:100%; object-fit:cover; }
.ta-card-thumb .ph { color:var(--ta-muted); font-size:1.8rem; }
.ta-card-body { padding:1rem .35rem .25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
/* Tag: orange dot + small grey uppercase label (no solid orange bar) */
.ta-card .ta-tag { background:transparent; color:var(--ta-ink-soft); padding:0; font-size:.7rem; letter-spacing:.05em; gap:.45rem; }
.ta-card .ta-tag i { color:var(--ta-orange); font-size:.5rem; }
.ta-card-title { font-size:1.05rem; margin:0; }
.ta-card-title a { color:var(--ta-ink); }
.ta-card-title a:hover { color:var(--ta-orange); }

/* ---- Single article ----------------------------------------------------- */
.ta-article { padding:3rem 0 1rem; }
.ta-article-head h1 { font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:1.6rem; max-width:920px; font-weight:700 !important; }
/* .ta-article-cover removed with the cover images — the article body is now the
   first thing under the heading, so it no longer needs the gap that separated it
   from the cover. */
.ta-article-body { max-width:none; margin:1.4rem 0 0; font-size:1.05rem; color:var(--ta-ink-soft); }
.ta-article-body :is(h2,h3) { color:var(--ta-ink); margin:2rem 0 .8rem; font-weight:700 !important; }
.ta-article-body ol, .ta-article-body ul { padding-left:1.2rem; }
.ta-article-body li { margin-bottom:.8rem; }
.ta-cta-block { text-align:center; max-width:760px; margin:3rem auto; }
.ta-cta-block h2 { margin-bottom:1rem; }
.ta-cta-block p { color:var(--ta-ink-soft); margin-bottom:1.6rem; }
.ta-cta-block .ta-btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.ta-back { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; margin-bottom:1rem; }

/* ---- Single legislation -------------------------------------------------- */
/* Same article shell as a news post, plus the category pill, the effective
   date, and the source/PDF buttons that only legislation carries. */
.ta-single-legislation .ta-article-head .ta-back { display:flex; margin-bottom:1.1rem; }
.ta-single-legislation .ta-article-head .ta-tag { margin-bottom:.9rem; }
.ta-single-legislation .ta-article-head h1 { margin-bottom:.7rem; }
.ta-single-legislation .ta-article-head .ta-meta { display:block; margin-bottom:1.6rem; }
/* Document buttons under an article: source link / PDF. Shared by the single
   legislation AND single news templates (was .ta-leg-actions before news
   gained a source PDF too). */
.ta-doc-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem; }
.ta-doc-actions .btn { display:inline-flex; align-items:center; gap:.5rem; }

/* ---- FAQ ---------------------------------------------------------------- */
.ta-faq { max-width:880px; margin:0 auto; }
.ta-faq .accordion-item { border:1px solid var(--ta-line); border-radius:var(--ta-radius-sm) !important; margin-bottom:1rem; overflow:hidden; background:#fff; }
.ta-faq .accordion-button { font-family:'Poppins',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ta-ink); padding:1.2rem 1.4rem; background:#EEF2F8; }
.ta-faq .accordion-button:not(.collapsed) { background:#fff; color:var(--ta-ink); box-shadow:none; }
.ta-faq .accordion-button:focus { box-shadow:none; }
.ta-faq .accordion-button::after {
  width:30px; height:30px; background:var(--ta-orange); border-radius:999px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M7 1h2v6h6v2H9v6H7V9H1V7h6z'/%3E%3C/svg%3E");
  background-size:14px; background-position:center; background-repeat:no-repeat; transform:none;
}
.ta-faq .accordion-button:not(.collapsed)::after {
  background-color:#EFEFF2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A8A95' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}
.ta-faq .accordion-body { color:var(--ta-ink-soft); padding:0 1.4rem 1.3rem; }

/* ---- Pagination --------------------------------------------------------- */
.ta-pagination { margin-top:2.5rem; text-align:center; }
.ta-pagination .page-numbers { display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 .6rem; border:1px solid var(--ta-line); border-radius:10px; margin:0 .2rem; color:var(--ta-ink); font-weight:600; }
.ta-pagination .page-numbers.current { background:var(--ta-orange); border-color:var(--ta-orange); color:#fff; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Centre the logo on mobile; hamburger + collapsing menu stay exactly as before.
     Anchored to the hamburger row so it never drifts into the open menu below —
     that row is the 38px toggler, so 19px is its middle. Pinning the top edge
     instead (top:.55rem) left the logo sitting flush on the navbar's bottom
     border, ~9px below centre. */
  .ta-brand-center { position:absolute; left:50%; top:19px; transform:translate(-50%,-50%); }
  .ta-navbar .navbar-collapse { padding-top:.6rem; }
  /* Wrap rather than overflow: the HU labels ("Letöltés" + "Feliratkozás") plus
     the language toggle need ~310px, which breaches the container gutter by
     ~6px at 320px wide (measured; it eats the padding rather than causing a
     page scrollbar). No effect at 360px and up, where the row already fits. */
  .ta-nav-btns { padding-top:.6rem; flex-wrap:wrap; }

  /* The menu expands INSIDE the fixed navbar, so on the transparent-navbar
     pages (About / Early Access) its links floated over the gradient hero with
     the hero heading showing through between them. Give the bar a solid
     background for as long as the menu is open — on every page, and from the
     first frame of the animation (.collapsing), not only once it settles
     (.show). Without this the result depends on scroll position, since
     .is-scrolled was the only thing that ever painted a background there. */
  .ta-navbar:has(.navbar-collapse.show),
  .ta-navbar:has(.navbar-collapse.collapsing) {
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
  }
  .ta-newsletter-inner { padding:2.2rem; }
  .ta-featured { min-height:340px; }
  /* Footer stacks + centres below desktop (Figma mobile). */
  .ta-footer { text-align:center; }
  .ta-footer-brand { justify-content:center; }
  .ta-footer-tagline { margin-left:auto; margin-right:auto; }
  .ta-footer .ta-store-badges { justify-content:center; }
  .ta-footer-bottom { text-align:center; }
}
@media (max-width: 575.98px) {
  body { padding-top:64px; }
  h1 { font-size:2rem; }
  .ta-section { padding:3rem 0; }
  /* Newsletter band on phones: left-aligned text, stacked full-width form. */
  .ta-newsletter-inner { text-align:left; }
  .ta-signup-form { flex-direction:column; align-items:stretch; }
  .ta-signup-form input[type=submit], .ta-signup-form button { width:100%; }
  /* Stacked column, so the row's vertical centre falls between the two controls.
     Anchor the spinner to the bottom instead, centred in the full-width button:
     it is 56px tall (.95rem padding + a 1rem line), so (56-14)/2 = 21px. */
  .ta-signup-form .wpcf7-spinner { top:auto; bottom:21px; margin:0; right:1rem; }
  /* Global presence: stats stacked + centred above the map (Figma mobile). */
  .ta-mini-stats { flex-direction:column; align-items:center; gap:1.5rem; margin:1.25rem 0 1.75rem; }
  .ta-mini-num { font-size:2rem; }
  /* Use the pin-free map on phones (Figma mobile). */
  .ta-map-img { display:none; }
  .ta-map-mobile { display:block; }
  /* Early Access hero on phones. */
  .ta-early-hero { padding:5.5rem 0 0; }
  .ta-early-phone { margin-top:2rem; max-width:90%; }
}