/* Newsletter inline messages */
.nl-msg{margin-top:8px;padding:8px 10px;border-radius:10px;font-size:.9rem;line-height:1.3}
.nl-success{background:#e6f6ee;color:#0b6b43;border:1px solid #b6ebd1}
.nl-info{background:#eef2ff;color:#1e3a8a;border:1px solid #c7d2fe}

:root{
  /* Light blue theme */
  --bg:#f7faff;           /* page background (blueish white) */
  --fg:#0b1020;           /* primary text */
  --muted:#51607a;        /* secondary text */
  --brand:#2563eb;        /* blue */
  --brand-2:#06b6d4;      /* cyan */
  --card:#ffffff;         /* cards */
  --border:#e2e8f0;       /* borders */
  --footer-bg:#eaf2ff;    /* footer top curve color (matches gradient top) */

  /* === Button refresh (soft gray-blue 3D) === */
  --btn-bg-start:#e7eef5;   /* top */
  --btn-bg-end:#cfd9e3;     /* bottom */
  --btn-text:#0b1525;       /* near-black for contrast */
  --btn-border:rgba(11,21,37,.10);
  --btn-shadow:rgba(11,21,37,.20);
  --btn-focus:rgba(24,94,224,.35);
}
/* ==========================================================
   Motion that guides, not decorates
   - Scroll reveal (fade + slide up) with shared timing
   - Connector band styles (stars drift via JS on a canvas)
   ========================================================== */

/* Motion tokens */
:root{
  --ease-out: cubic-bezier(0,0,0.2,1);
  --reveal-dur: 220ms;
}

/* Scroll reveal: subtle + consistent */
.reveal{opacity:0; transform:translateY(22px); transition:opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); will-change:opacity,transform}
.reveal.in-view{opacity:1; transform:translateY(0)}

/* Section connector (keep stars; remove hairline borders) */
.connector{position:relative;width:100%;height:72px;overflow:hidden;pointer-events:none;background:linear-gradient(90deg, color-mix(in srgb, var(--brand-2) 18%, transparent), color-mix(in srgb, var(--brand) 18%, transparent));border:0;box-shadow:none}
.connector canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Revert under-header behavior: simple sticky connector below header */
.connector--under-header{ position: sticky; top: 0; z-index: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;transform:none;opacity:1}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-rounded,"SF Pro Rounded","SF Pro Display","SF Pro Text",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Prevent rare horizontal seams due to 100vw math and scrollbars */
html{ overflow-x: clip; }
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/* Make the homepage containers full-width so content stretches side to side */
/* (Removed) Do not force all homepage containers full width; it breaks layout */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.nav a{margin:0 10px;color:var(--fg)}
.btn{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#ffffff;padding:12px 18px;border-radius:10px;font-weight:700;border:0}
.btn.secondary{background:#233; color:var(--fg); border:1px solid var(--border)}
.hero{position:relative;padding:0;margin:0}
.hero picture{display:block}
.hero .bg{display:none !important}
/* Full-bleed hero (edge-to-edge) with reserved height to prevent CLS */
.hero{
  /* size reserve to avoid CLS */
  min-height:clamp(520px, 70vh, 880px);
  overflow:clip;
  isolation:isolate;

  /* full-bleed breakout WITHOUT causing the right "air" gap */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* 1px bleed to kill subpixel seams on some browsers */
  clip-path: inset(0 -1px);
}

/* Prefer small/dynamic viewport units when supported
   to avoid OS scrollbar math issues on Windows/macOS */
@supports (width: 100svw){
  .hero{
    width:100svw;
    margin-left:calc(50% - 50svw);
    margin-right:calc(50% - 50svw);
  }
}
@supports (width: 100dvw){
  .hero{
    width:100dvw;
    margin-left:calc(50% - 50dvw);
    margin-right:calc(50% - 50dvw);
  }
}

/* If you ever place the hero inside a max-width wrapper, you can
   opt into contained mode by using the helper class below instead
   of overriding the full-bleed default. */
.hero--contained{ width:100%; margin-left:0; margin-right:0; clip-path: inset(0); }

/* Absolute-fill media */
.hero__media, .hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.hero__img{
  object-fit:cover;            /* fill, no stretch */
  object-position:50% 50%;     /* center composition by default */
}

/* Crop tuning by screen shape
   - Landscape/wide: keep center (default)
   - Portrait/tall: pan slightly left so the headline area isn't chopped
*/
@media (max-aspect-ratio: 4/3){
  /* Favor the headline on tall/portrait viewports by panning left */
  .hero__img{ object-position:22% 50%; }
}
@media (max-width: 640px){
  /* phones: slightly smaller hero and tighter crop to keep headline in view */
  .hero{ min-height: clamp(380px, 58vh, 640px); }
  .hero__img{ object-position:18% 48%; }
}

/* If overlay content exists, keep it above the image */
.hero__content{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:clamp(16px, 4vw, 40px);
}

/* Remove legacy image sizing for old .hero-img if present */
.hero .hero-img{ height:auto; max-height:none; object-fit:cover; }
.hero .content{display:none}
.kicker{color:var(--brand-2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.title{font-size:2.5rem;line-height:1.2;margin:.5rem 0}
.section.intro .title{
  font-size:1.4rem;
  line-height:1.25;
  color:var(--fg);
  display:inline-block;
  padding:2px 10px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(135,206,235,.38), rgba(135,206,235,.20));
}
.subtitle{color:var(--muted);max-width:720px}
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 6px 24px rgba(2,6,23,0.05)}
/* Tight card for the Quick tour image: thinner “frame” */
.card--tight{ padding:8px; border-radius:12px; overflow:hidden; }
.card--tight .card-media{ border-radius:10px; display:block; }
/* Prevent scroll shimmer next to the animated connector:
   isolate the bitmap on its own compositor layer */
.card .card-media{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.section{padding:54px 0}
.section{scroll-margin-top: 96px}
.section.intro{padding-top:64px}
.section.alt{background:#eef5ff}
.section .section-title{font-size:1.6rem;margin:0 0 6px}
.section .section-title.horary-title{
  font-size:clamp(1.9rem, 2.6vw + 1rem, 2.6rem);
  line-height:1.18;
  margin-bottom:0.45rem;
}
.horary-subhead{
  font-size:clamp(1.25rem, 1.4vw + 0.9rem, 1.75rem);
  line-height:1.3;
  font-weight:700;
  margin:0.3rem 0;
  color:var(--fg);
}
.horary-subhead--small{
  font-size:clamp(1.05rem, 1vw + 0.7rem, 1.35rem);
  font-weight:600;
  color:var(--muted);
}
.horary-steps{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  align-items:center;
  margin-bottom:0.55rem;
}
.horary-steps .marker{
  font-size:0.95em;
  letter-spacing:0.01em;
}
.horary-steps .steps-arrow{
  font-size:1.25em;
  color:var(--muted);
  font-weight:500;
}
.mute{color:var(--muted)}
.footer{margin-top:40px;background:linear-gradient(180deg,#eaf2ff 0%, #f7faff 100%);padding:40px 0;border-top:1px solid var(--border);position:relative;overflow:hidden}
.footer .footer-curve{position:absolute;left:0;top:-32px;width:100%;height:32px;fill:var(--footer-bg)}
.footer .footer-inner{max-width:72rem;margin:0 auto;padding:48px 24px}
.footer .footer-columns{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:1024px){.footer .footer-columns{grid-template-columns:1fr 1fr}}
.footer h3{margin:0 0 12px 0}
.sitemap-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:640px){.sitemap-grid{grid-template-columns:1fr 1fr}}
.footer .about-top{display:flex;align-items:flex-start;justify-content:space-between}
.copyright-top{font-size:.9rem;opacity:.8;display:none}
@media (min-width:1024px){.copyright-top{display:block}}
.copyright-bottom{font-size:.9rem;opacity:.8;display:block;margin-top:12px}
@media (min-width:1024px){.copyright-bottom{display:none}}
.newsletter-card{margin-top:48px;border-radius:16px;background:rgba(255,255,255,.05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(2,6,23,0.05);border:1px solid rgba(0,0,0,.05);padding:24px}
@media (min-width:768px){.newsletter-card{padding:32px}}
.newsletter-form{display:flex;gap:12px;align-items:center;margin-top:10px}
.newsletter-input{flex:1;height:48px;border-radius:9999px;padding:0 16px;outline:none;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.8);color:#000}
.newsletter-button{height:48px;padding:0 20px;border-radius:9999px;font-weight:600;border:1px solid var(--border);background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.footer .cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.post-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.badge{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.8rem}
.badge-lg{font-size:1.05rem;padding:6px 10px;font-weight:800}
.lead{font-size:1.1rem;color:var(--muted)}
.split{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.small{font-size:.9rem}
.header{position:sticky;top:0;background:transparent;z-index:10;border-bottom:none}
.logo{display:flex;align-items:center;gap:10px}
.logo b{font-weight:800;letter-spacing:.02em}
.navlinks{display:flex;gap:10px;flex-wrap:wrap}
/* Active link as filled gradient pill */
.nav-pill .nav-center a.is-active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border-radius:9999px;padding:8px 12px;font-weight:700;box-shadow:0 6px 18px rgba(2,6,23,0.08)}
.nav-pill .nav-center a.is-active:hover{opacity:.95}
.nav-pill .nav-center a{padding:6px 8px;border-radius:10px}

/* --- Nav dropdown (Features → Election) --- */
.center{text-align:center}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.accent{color:var(--brand-2)}
.list{margin:0;padding-left:20px}
.list li{margin:.35rem 0}
.note{border-left:3px solid var(--brand-2);padding-left:12px}

/* Improve CTA button spacing on hero intro */
.section.intro .mt-3{display:flex;flex-wrap:wrap;gap:12px}

/* Reusable soft blue panel matching the How it works feel */
.panel-soft-blue{
  background:#eef5ff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 6px 24px rgba(2,6,23,0.05);
  padding:22px;
}
/* Hide stray descriptive text some PayPal Hosted Buttons append next to the iframe */
#paypal-container-K2FB4UN3PWUYL{ font-size:0; color:transparent; }
@media (min-width: 768px){
  .panel-soft-blue{padding:28px}
}

/* Marker highlights for key words */
.marker{display:inline-block;padding:0 6px;border-radius:6px;font-weight:800;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.marker-red{background:linear-gradient(180deg, rgba(255,45,85,.30), rgba(255,45,85,.20))}
.marker-yellow{background:linear-gradient(180deg, rgba(250,204,21,.38), rgba(250,204,21,.24))}
.marker-green{background:linear-gradient(180deg, rgba(16,185,129,.32), rgba(16,185,129,.22))}
.marker-blue{background:linear-gradient(180deg, rgba(59,130,246,.30), rgba(59,130,246,.18))}
.marker-purple{background:linear-gradient(180deg, rgba(168,85,247,.28), rgba(168,85,247,.18))}
.marker-orange{background:linear-gradient(180deg, rgba(251,146,60,.30), rgba(251,146,60,.20))}
.marker-gray{background:linear-gradient(180deg, rgba(148,163,184,.35), rgba(148,163,184,.20))}

/* Larger title marker wrapper */
.how-title{font-size:1.35rem;font-weight:800;margin:0 0 8px 0}

/* Glossy CTA button system */
:root{
  --btn-h: 48px;
  --btn-radius: 9999px;
  --btn-pad-x: 20px;

  /* glossy blue from reference */
  --btn-grad-a: #2f6ff8;   /* blue */
  --btn-grad-b: #06b6d4;   /* cyan */
  --btn-fg: #fff;

  --btn-drop: 0 14px 28px rgba(13, 51, 171, .30);
  --btn-inner-top: inset 0 2px 6px rgba(255,255,255,.45);
  --btn-inner-bottom: inset 0 -8px 18px rgba(0,0,0,.25);
  --btn-outline: rgba(255,255,255,.85);
  --btn-focus: 0 0 0 3px rgba(59,130,246,.45);
}

.btn-glossy{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  color: var(--btn-fg);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b));
  border: 1.5px solid var(--btn-outline);
  box-shadow: var(--btn-drop), var(--btn-inner-top), var(--btn-inner-bottom);
  -webkit-tap-highlight-color: transparent;
}

/* glossy “top glare” */
.btn-glossy::after{
  content: "";
  position: absolute;
  inset: 3px 3px 55% 3px;           /* top half shine */
  border-radius: inherit;
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.35) 35%,
      rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* icon block */
.btn-glossy .btn-ic{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}
.btn-glossy .btn-ic svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  color: #fff;                     /* white icon */
}

.btn-glossy:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.btn-glossy:active{ transform: translateY(0); box-shadow: var(--btn-inner-top), inset 0 -4px 12px rgba(0,0,0,.28); }
.btn-glossy:focus-visible{ outline: none; box-shadow: var(--btn-drop), var(--btn-inner-top), var(--btn-inner-bottom), var(--btn-focus); }

/* Small & large variants if needed */
.btn-sm{ --btn-h: 40px; --btn-pad-x: 16px; }
.btn-lg{ --btn-h: 56px; --btn-pad-x: 24px; }

/* Ensure glossy overrides the legacy secondary style when combined */
.btn.secondary.btn-glossy{
  background: linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-outline);
}

/* === Override to soft gray-blue 3D buttons (global) === */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px;
  border-radius:9999px;
  font-weight:700;
  color:var(--btn-text);
  text-decoration:none;
  background:linear-gradient(180deg,var(--btn-bg-start),var(--btn-bg-end));
  border:1px solid var(--btn-border);
  box-shadow:
    0 6px 14px -6px var(--btn-shadow),
    inset 0 1px 0 rgba(255,255,255,.0);
  background-clip:padding-box;
  -webkit-appearance:none;
}
.btn:hover{ filter:brightness(1.02); transform:translateY(-1px); }
.btn:active{
  filter:brightness(.98);
  transform:translateY(0);
  box-shadow:0 4px 10px -6px var(--btn-shadow);
}
.btn.secondary{
  background:linear-gradient(180deg,#eef3f8,#dce6ef);
  color:var(--btn-text);
  border-color:var(--btn-border);
}
.btn:focus-visible{ outline:3px solid var(--btn-focus); outline-offset:2px; }
.btn::before,.btn::after{ content:none !important; }
.btn{
  box-shadow:0 6px 14px -6px var(--btn-shadow) !important, inset 0 0 0 rgba(255,255,255,0) !important;
  border-top-color:var(--btn-border) !important;
}

/* Harmonize previous .btn-glossy to new 3D style and remove white glints */
.btn-glossy{
  background:linear-gradient(180deg,var(--btn-bg-start),var(--btn-bg-end)) !important;
  color:var(--btn-text) !important;
  border:1px solid var(--btn-border) !important;
  box-shadow:0 6px 14px -6px var(--btn-shadow) !important;
}
.btn-glossy::after{ content:none !important; }
.btn-glossy .btn-ic svg{ color:var(--btn-text); stroke:currentColor; }
.btn.secondary.btn-glossy{
  background:linear-gradient(180deg,#eef3f8,#dce6ef) !important;
  color:var(--btn-text) !important;
  border-color:var(--btn-border) !important;
  box-shadow:0 6px 14px -6px var(--btn-shadow) !important;
}

/* === Framed screenshots (curated look) === */
.shot{ position:relative; background:linear-gradient(180deg, #f8fbff, #eef4fb); border:1px solid var(--border); border-radius:18px; padding:12px; box-shadow:0 10px 24px rgba(2,6,23,.06); overflow:hidden; }
.shot::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 80% at 10% -10%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%); }
.shot-media{ display:block; width:100%; height:auto; border-radius:12px; }
.shot--bezel{ padding-top:30px; }
.shot-chrome{ position:absolute; top:10px; left:12px; display:flex; gap:6px; }
.shot-dot{ width:10px; height:10px; border-radius:9999px; border:1px solid rgba(15,23,42,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.shot-dot.red{ background:#ff5f57; }
.shot-dot.yellow{ background:#febc2e; }
.shot-dot.green{ background:#28c840; }

/* === Bubble rail (glossy chips) === */
:root{
  /* surface colors (tweak if your page bg differs) */
  --surface:#f6f9fc;
  --surface-2:#eef4fb;

  /* chip palette (soft gray-blue like your reference) */
  --chip-top:#e7eef5;
  --chip-bottom:#cfd9e3;
  --chip-text:#0b1525;
  --chip-border:rgba(11,21,37,.10);
  --chip-shadow:rgba(11,21,37,.20);

  /* solid color bubbles */
  --green-top:#75d585;
  --green-bottom:#3dbd61;
  --green-border:rgba(42,98,54,.35);

  --red-top:#ff8a8a;
  --red-bottom:#f35b5b;
  --red-border:rgba(128,26,26,.35);
}

#feature-bubbles.section{ padding:24px 0; }

.chip-section{ position:relative; padding:8px 0; }

.chip-rail{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; padding:18px; border-radius:24px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06), 0 8px 28px rgba(15,23,42,.08);
}
.chip-rail::-webkit-scrollbar{ display:none; }
.chip-rail{ -ms-overflow-style:none; scrollbar-width:none; }

.chip{
  flex:0 0 auto; padding:10px 16px; border-radius:9999px; font-weight:600; color:var(--chip-text); text-decoration:none; scroll-snap-align:start;
  background:linear-gradient(180deg,var(--chip-top),var(--chip-bottom));
  border:1px solid var(--chip-border);
  box-shadow:0 6px 14px -6px var(--chip-shadow), inset 0 0 0 rgba(255,255,255,0);
  background-clip:padding-box; -webkit-appearance:none;
}
.chip:hover{ filter:brightness(1.02); transform:translateY(-1px); }
.chip:active{ filter:brightness(.98); transform:translateY(0); }

.chip--solid{ width:44px; height:28px; padding:0; border:1px solid transparent; }
.chip--green{ background:linear-gradient(180deg,var(--green-top),var(--green-bottom)); border-color:var(--green-border); }
.chip--red{ background:linear-gradient(180deg,var(--red-top),var(--red-bottom)); border-color:var(--red-border); }

.chip-section::before,.chip-section::after{ content:""; position:absolute; top:0; bottom:0; width:64px; pointer-events:none; }
.chip-section::before{ left:0; background:linear-gradient(90deg, var(--surface) 50%, rgba(246,249,252,0)); }
.chip-section::after{ right:0; background:linear-gradient(-90deg, var(--surface) 50%, rgba(246,249,252,0)); }

.chip:focus-visible,.chip--solid:focus-visible{ outline:3px solid rgba(24,94,224,.35); outline-offset:2px; }

/* Sticky feature rail (chips + download CTA) */
.sticky-rail{
  position: sticky;
  top: 10px;            /* sits just below the sticky header */
  z-index: 9;           /* header uses 10 */
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sticky-rail .download-cta{ padding: 4px 8px 6px; }
.sticky-rail .btn{ min-height: 44px; }

.sticky-rail-wrap{ margin: 8px 0 10px; }

/* === Feature grid (flip cards) === */
.feature-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; }
.feature-card{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 6px 24px rgba(2,6,23,0.05); perspective:1000px; }
.feature-card{ grid-column: span 12; }
@media (min-width: 720px){ .feature-card{ grid-column: span 6; } }
@media (min-width: 1024px){ .feature-card{ grid-column: span 4; } }

.feature-card .card-inner{ position:relative; aspect-ratio: 4/3; transform-style:preserve-3d; transition: transform .6s var(--ease-out); }
.feature-card .card-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:inherit; overflow:hidden; background:inherit; }
.feature-card .card-front{ padding:0; display:block; }
.feature-card .card-back{ padding:18px; transform: rotateY(180deg); text-align:left; }
.feature-card .card-back .section-title{ margin:6px 0 6px; font-size:1.2rem; }
.feature-card .card-back .list{ margin-top:8px; }
.feature-card .card-back{ overflow:auto; }

/* full-bleed media as the tile */
.tile-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: opacity .25s var(--ease-out), filter .25s var(--ease-out); }
.title-box{ position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.55); border:1px solid var(--border); box-shadow:0 8px 18px rgba(2,6,23,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:none; }
.title-box .title-text{ font-weight:800; font-size:1rem; color:var(--fg); letter-spacing:.2px; }
@media (min-width:1024px){ .title-box .title-text{ font-size:1.05rem; } }

/* Flip triggers */
.feature-card:hover .card-inner,
.feature-card:focus-within .card-inner,
.feature-card.is-flipped .card-inner{ transform: rotateY(180deg); }

/* Fade title bubble during flip so it doesn't distort */
.feature-card .card-front .title-box{ transition: opacity .2s var(--ease-out); }
.feature-card:hover .card-front .title-box,
.feature-card:focus-within .card-front .title-box,
.feature-card.is-flipped .card-front .title-box{ opacity:0; }
/* fade the image a bit during flip for readability */
.feature-card:hover .card-front .tile-media,
.feature-card:focus-within .card-front .tile-media,
.feature-card.is-flipped .card-front .tile-media{ opacity:.18; filter:saturate(.9); }

.card-toggle{ position:absolute; inset:0; background:transparent; border:0; cursor:pointer; padding:0; border-radius:inherit; }
.card-toggle:focus-visible{ outline:3px solid var(--btn-focus); outline-offset:2px; }

.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Highlight when chip clicked */
.feature-card.is-highlighted{ box-shadow:0 0 0 3px var(--brand-2), 0 6px 24px rgba(2,6,23,0.05); }

/* Reduced motion: fade instead of flip */
@media (prefers-reduced-motion: reduce){
  .feature-card .card-inner{ transform:none !important; transition:none; }
  .feature-card .card-front, .feature-card .card-back{ position:absolute; inset:0; transition: opacity .25s var(--ease-out); }
  .feature-card .card-front{ opacity:1; }
  .feature-card .card-back{ opacity:0; transform:none; }
  .feature-card:hover .card-back,
  .feature-card:focus-within .card-back,
  .feature-card.is-flipped .card-back{ opacity:1; }
  .feature-card:hover .card-front,
  .feature-card:focus-within .card-front,
  .feature-card.is-flipped .card-front{ opacity:0; }
  .feature-card.is-flipped .card-front .title-box{ opacity:0; }
  .feature-card.is-flipped .card-front .tile-media{ opacity:.18; }
}

/* New centered pill navbar */
.nav-shell{display:flex;justify-content:center;padding:14px 0}
.nav-pill{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:9999px;box-shadow:0 8px 24px rgba(2,6,23,0.06);padding:10px 14px;width:100%;max-width:980px}
.nav-left{display:flex;align-items:center;gap:10px}
.nav-center{display:flex;align-items:center;gap:12px;margin:0 auto}
.nav-right{display:flex;align-items:center}
.nav-pill .btn{padding:10px 14px}
.nav-right .btn{background:linear-gradient(90deg,#ff7f32,#ffd17a);color:#0b1020;border-color:transparent;}
.nav-right .btn:hover{opacity:.95;}
.nav-right .btn:active{filter:brightness(.98);}

/* Mobile behavior: collapse center links into dropdown */
.nav-toggle{display:none;appearance:none;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:.9rem}
@media (max-width: 860px){
  .nav-center{display:none}
  .nav-toggle{display:inline-flex;align-items:center}
  .nav-pill{position:relative}
  .nav-pill.is-open .nav-center{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,.08);padding:10px;margin-top:8px;z-index:20}
  .nav-center a{padding:8px 6px}
}

/* Remove extra gap under breadcrumbs before hero */
.hero{padding-top:0}
/* === Blog palette (fallbacks if site vars missing) === */
:root{
  --brand-primary: var(--vs-brand, #2a4cff);
  --ink: var(--vs-ink, #0b1525);
  --surface: var(--vs-surface, #f6f9fc);
  --surface-2: var(--vs-surface-2, #eef4fb);
  --muted: rgba(15,23,42,.62);
  --stroke: rgba(15,23,42,.12);
}

/* Containers align with site rhythm */
.blog .container{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Hero (use same dark gradient spirit as homepage) */
.blog-hero{
  background: radial-gradient(120% 120% at 70% 10%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, #141b4f, #0f1644);
  color: #fff;
  padding: 72px 0 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.blog-hero h1{ font-size: clamp(2rem, 3.2vw, 3rem); margin: 0 0 6px; }
.blog-hero .subtitle{ margin: 0 0 18px; opacity: .85; }

/* Tag (chip) filters */
.blog-filters{ display: flex; flex-wrap: wrap; gap: 10px; }
.tag{
  appearance: none; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.18);
  color: #fff; padding: 8px 14px; border-radius: 999px;
  font-weight: 600; cursor: pointer;
  transition: filter .15s ease;
}
.tag:hover{ filter: brightness(1.05); }
.tag.is-active{ background: #fff; color: #0f1644; border-color: transparent; }

/* List area */
.blog-list{ background: var(--surface); padding: 28px 0 64px; }
/* list view (stacked, separated by hairlines) */
.post-list{ display:block; }

/* Post row (no card) */
.post-row{
  display:grid;
  grid-template-columns: 80px 1fr;
  column-gap:22px;
  align-items:start;
  padding:22px 0;
  border-bottom:1px solid var(--stroke);
}
.post-row .thumb{ display:block; }
.post-row .thumb-ph{
  width:72px; height:72px; border-radius:999px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--stroke);
}
.post-row .post-title{ font-size:1.35rem; margin:0; }
.post-row .meta{ margin-top:6px; }
.post-row .meta .author{ color: var(--brand-primary); font-weight:800; }
.post-row .excerpt{ margin:10px 0 0; }
.post-row .excerpt .read-more{ margin-left:8px; }
.eyebrow{ color: var(--brand-primary); font-weight: 800; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.post-title{ font-size: 1.25rem; margin: 0 0 6px; } /* unchanged for other pages */
.post-title a{ color: var(--ink); text-decoration: none; }
.post-title a:hover{ text-decoration: underline; }
.meta{ color: var(--muted); font-weight: 600; display:flex; gap:8px; align-items:center; }
.meta .dot{ opacity:.6; }
.excerpt{ color: var(--ink); opacity: .8; margin: 10px 0 8px; }
.read-more{ font-weight: 700; color: var(--brand-primary); text-decoration: none; }
.read-more:hover{ text-decoration: underline; }

/* Pager */
.pager{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top: 18px; }
.pager-btn{ padding: 8px 14px; border-radius: 999px; border:1px solid var(--stroke); background:#fff; font-weight:700; color: var(--ink); }
.pager-btn:disabled{ opacity:.5; cursor:not-allowed; }
.page-info{ color: var(--muted); font-weight:600; }

/* Article page */
.blog-article .article-header{ padding: 56px 0 14px; }
.blog-article .article-header h1{ font-size: clamp(2rem, 3vw, 2.6rem); margin: 6px 0 6px; }
.blog-article .article-header .meta{ margin-top: 6px; }
.blog-article .article-body{ padding: 10px 0 64px; max-width: 760px; }
.blog-article .article-body h2{ margin-top: 28px; }
.blog-article .article-body img{ max-width:100%; border-radius: 12px; }

/* Responsive */
/* Responsive list behavior */
@media (max-width: 720px){
  .post-row{ grid-template-columns:56px 1fr; padding:18px 0; }
  .post-row .thumb-ph{ width:56px; height:56px; }
}

/* === Product page additions === */
.product-chip{ display:inline-block; background:#0B3A75; color:#fff; border-radius:9999px; padding:6px 12px; font-size:.9rem; font-weight:600 }

.pricing-grid{ display:grid; gap:20px }
@media (min-width:768px){ .pricing-grid{ grid-template-columns:1fr 1fr } }
.pricing-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:0 8px 24px rgba(2,6,23,0.05) }
.pricing-card .card-title{ margin:0 0 6px 0; font-size:1.2rem }
.pricing-card .price{ margin:6px 0 10px; }
.pricing-card .price .amount{ font-weight:800; font-size:1.6rem; color:var(--fg) }
.pricing-card .price .suffix{ color:var(--muted); font-weight:600; margin-left:6px }
.pricing-card .card-cta{ margin-top:14px }

/* --- Hero Product Pill --- */
.hero-chip-wrap { display:flex; justify-content:center; margin:24px 0 8px; }
.hero-chip {
  background:#0B3A75; color:#fff; padding:10px 18px; font-size:1rem; font-weight:600; border-radius:9999px;
  box-shadow:0 6px 18px rgba(11,58,117,0.25); letter-spacing:.2px;
}

/* --- Pricing (image6-style) --- */
.pricing-modern { margin-top:8px; }
.pricing-modern .pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:24px; }
@media (max-width:800px){ .pricing-modern .pricing-grid { grid-template-columns:1fr; } }
@media (min-width:1100px){ .pricing-modern .pricing-grid { grid-template-columns:repeat(3,minmax(260px,1fr)); } }
.pricing-modern .pricing-card {
  position:relative; background:var(--surface, #fff); border:1px solid var(--border, rgba(0,0,0,0.08));
  border-radius:20px; padding:24px; box-shadow:0 10px 24px rgba(0,0,0,0.05); overflow:hidden;
}
.pricing-modern .pricing-card::before{ content:""; position:absolute; left:-10%; right:-10%; bottom:-26%; height:180px; filter:blur(36px); z-index:-1; opacity:.95; background:linear-gradient(90deg,#84fab0 0%, #fbd786 50%, #f7a463 100%); }
.pricing-modern .pricing-card.accent-cool::before{ background:linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 50%, #90f7ec 100%); }
.pricing-modern .pricing-card h3{ margin:0 0 6px 0; font-size:1.1rem; }
.pricing-modern .price{ font-weight:800; font-size:2.25rem; margin:2px 0 0 0; }
.pricing-modern .price .unit{ font-weight:600; font-size:.95rem; opacity:.8; margin-left:6px; }
.pricing-modern .muted{ opacity:.8; }
.pricing-modern .features{ margin:12px 0 16px 0; padding:0; list-style:none; }
.pricing-modern .features li{ margin:8px 0; padding-left:1.4rem; position:relative; }
.pricing-modern .features li::before{ content:"\2713"; position:absolute; left:0; top:0; color:#00a884; font-weight:800; }
.pricing-modern .card-cta{ margin-top:6px; }

/* ==== Soft-blue Pricing Cards (scoped to product page pricing section) ==== */
.pricing-modern .pricing-card {
  position: relative;
  border-radius: 16px;
  padding: 24px;
  /* soft-blue tint on the surface */
  background:
    linear-gradient(180deg, rgba(241,248,255,0.90) 0%, rgba(230,242,255,0.90) 100%) padding-box,
    linear-gradient(180deg, rgba(120,170,255,0.45), rgba(120,170,255,0)) border-box;
  border: 1px solid rgba(100,149,237,0.35); /* cornflower-ish */
  box-shadow:
    0 10px 24px rgba(15,76,129,0.12),       /* soft drop shadow */
    inset 0 0 0 1px rgba(255,255,255,0.35); /* subtle inner lift */
}

/* soft "glow" at the bottom edge, like the reference */
.pricing-modern .pricing-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 28px;
  background: radial-gradient(120% 60% at 50% 100%,
    rgba(127,178,255,0.45) 0%, rgba(127,178,255,0) 70%);
  pointer-events: none;
}

/* keep typography readable on the tint */
.pricing-modern .pricing-card h3,
.pricing-modern .pricing-card .price,
.pricing-modern .pricing-card .unit,
.pricing-modern .pricing-card p,
.pricing-modern .pricing-card li {
  color: inherit; /* rely on site defaults for contrast */
}

/* optional: light divider feel inside feature list */
.pricing-modern .pricing-card .features li + li {
  border-top: 1px solid rgba(120,170,255,0.20);
  margin-top: 8px;
  padding-top: 8px;
}

/* hover = slightly stronger tint, same palette */
@media (hover:hover) {
  .pricing-modern .pricing-card:hover {
    background:
      linear-gradient(180deg, rgba(236,245,255,0.95) 0%, rgba(225,239,255,0.95) 100%) padding-box,
      linear-gradient(180deg, rgba(120,170,255,0.55), rgba(120,170,255,0.05)) border-box;
    box-shadow: 0 14px 30px rgba(15,76,129,0.16),
                inset 0 0 0 1px rgba(255,255,255,0.5);
    transform: translateY(-1px);
    transition: all .18s ease;
  }
}

.pricing-showcase{padding:76px 0 84px;}
.pricing-showcase__intro{text-align:center;max-width:620px;margin:0 auto 44px;}
.pricing-showcase__intro .section-title{margin:10px 0 12px;}
.pricing-showcase__grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch;}
.pricing-plan{position:relative;padding:28px;border-radius:24px;display:flex;flex-direction:column;gap:20px;box-shadow:0 18px 42px rgba(15,23,42,0.10);}
.pricing-plan--outline{background:linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(245,249,255,0.98) 100%);border:1px solid rgba(15,23,42,0.08);}
.pricing-plan--hero{background:linear-gradient(140deg,rgba(255,244,235,0.96) 0%,rgba(236,244,255,0.96) 55%,rgba(223,244,255,0.98) 100%);border:1px solid rgba(37,99,235,0.24);box-shadow:0 26px 52px rgba(30,64,175,0.18);}
.pricing-plan--hero::after{content:"";position:absolute;inset:16px;border-radius:18px;border:1px solid rgba(255,255,255,0.45);pointer-events:none;}
.pricing-plan__header{display:flex;flex-direction:column;gap:10px;}
.pricing-pill{display:inline-flex;align-items:center;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#1d4ed8;background:rgba(37,99,235,0.14);padding:6px 14px;border-radius:999px;width:max-content;}
.pricing-pill--accent{background:rgba(255,255,255,0.28);color:#111827;box-shadow:0 12px 28px rgba(30,64,175,0.16);}
.pricing-plan--outline .pricing-pill--accent{background:rgba(37,99,235,0.14);color:#1d4ed8;box-shadow:none;}
.pricing-plan__tagline{margin:0;font-size:.96rem;color:var(--muted);}
.pricing-plan__price{display:flex;align-items:baseline;gap:8px;font-weight:800;color:#0f172a;}
.pricing-plan__amount{font-size:2.5rem;}
.pricing-plan__price .unit{font-size:.95rem;font-weight:600;color:var(--muted);}
.pricing-plan__features{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:.96rem;color:#0f172a;}
.pricing-plan__features--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;}
.pricing-plan__features li{position:relative;padding-left:24px;}
.pricing-plan__features li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);}
.pricing-plan--hero .pricing-plan__features li::before{background:linear-gradient(135deg,#f97316 0%,#facc15 100%);}
.pricing-plan__cta .btn,
.pricing-plan__cta .btn.secondary{width:100%;justify-content:center;}
.pricing-plan__paypal{background:rgba(255,255,255,0.9);border:1px solid rgba(15,23,42,0.08);border-radius:18px;padding:16px;display:flex;justify-content:center;box-shadow:0 16px 28px rgba(15,23,42,0.12);}
.pricing-paypal-shell{width:100%;max-width:320px;margin:0 auto;}
.pricing-paypal-shell [data-testid="hosted-button-text"],
.pricing-paypal-shell .paypal-button-label-container,
.pricing-paypal-shell .paypal-button-descriptor{display:none!important;}
.pricing-paypal-shell iframe{width:100%!important;}
.pricing-plan__support{margin-top:6px;}
.support-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,0.88);box-shadow:0 14px 32px rgba(15,23,42,0.15);font-size:.85rem;color:#1e293b;border:1px solid rgba(37,99,235,0.25);}
.support-chip a{color:inherit;text-decoration:underline;}

@media (max-width:900px){
  .pricing-plan__features--grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .pricing-showcase{padding:60px 0 70px;}
  .pricing-plan{padding:24px;}
}


/* --- Feature bubbles layout --- */
.feature-bubbles { padding-top: 3rem; padding-bottom: 3.5rem; }

.bubble-arc{
  position: relative;
  width: min(1280px, 96vw);
  margin: 2.25rem auto 0;
  aspect-ratio: 2 / 1;              /* wide container for a semi-circle */
  min-height: 360px;                /* fallback for browsers without aspect-ratio */
}

.arc{
  position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  width: 90%; aspect-ratio:1/1; border-radius:50%;
  border-top: 2px solid hsl(240 15% 85% / .7);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  filter: blur(.2px);
}
.arc--2{ width: 70%; border-top-color: hsl(240 15% 85% / .45); }
.arc--3{ width: 50%; border-top-color: hsl(240 15% 85% / .25); }

/* Bubbles (layout handled by grid in .bubbles-stage) */

.bubble-label{
  font-size:.9rem; color: var(--text, #222); opacity:.8; text-align:center;
}
.bubble-label--main{ font-weight:700; opacity:.95; }

/* CTA */
.btn.large{ font-size:1.05rem; padding:.9rem 1.4rem; }
.cta-download{
  background: linear-gradient(180deg, #29b36a, #1b8f53);
  color:white; border:none; box-shadow: 0 10px 30px hsl(150 60% 35% / .25);
  border-radius: 999px;
}
.cta-download:hover{ transform: translateY(-1px); box-shadow: 0 14px 36px hsl(150 60% 35% / .35); }

/* Responsive */
@media (max-width: 640px){
  .arc{ display:none; }               /* hide arcs on small screens */
  .bubble-arc{ aspect-ratio: unset; }
  .bubble--left, .bubble--right{
    position:static; margin: 1rem auto 0; 
  }
  .bubble--main{ position:static; transform:none; margin: 1rem auto; }
  .feature-bubbles .container.center{ text-align:center; }
}

/* ----- Stage where bubbles live ----- */
.bubbles-stage {
  position: relative;
  /* ensures there is headroom above for the floating clouds */
  padding-top: clamp(24px, 6vw, 72px);
}

/* ----- Glassy floating clouds (hover ABOVE the bubbles) ----- */
.glass-cloud{
  position: absolute;
  /* JS sets precise left/top; these defaults avoid FOUC */
  top: 0; left: 50%; transform: translate(-50%, -60%);
  padding: clamp(6px, 1.2vw, 10px) clamp(10px, 1.8vw, 16px);
  border-radius: 9999px;
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .2px;
  color: rgba(17,24,39,.9);
  background: radial-gradient(120% 160% at 50% 30%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.32) 60%, rgba(255,255,255,.10) 100%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    0 10px 30px rgba(2,6,23,.14),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none; /* don't block hover on bubbles */
  animation: cloud-float 6s ease-in-out infinite;
}
@keyframes cloud-float {
  0%,100% { transform: translate(-50%, -60%) }
  50%     { transform: translate(-50%, calc(-60% - 6px)) }
}

/* ----- Glossy green download button ----- */
.btn--download{
  --g1:#2ed06f; /* top */
  --g2:#0ea84f; /* bottom */
  --ring:rgba(16,185,129,.35);
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding: clamp(10px,2.2vw,14px) clamp(18px,3vw,26px);
  padding-right: clamp(60px,7vw,72px); /* space for knob */
  border-radius:9999px;
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 100%);
  color:#fff; font-weight:700; text-decoration:none;
  box-shadow:
    0 16px 28px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn--download:hover{ transform: translateY(-1px); filter:saturate(1.05); }
.btn--download:active{ transform:none; box-shadow:
    0 8px 20px rgba(16,185,129,.25),
    inset 0 2px 0 rgba(0,0,0,.12); }
.btn--download:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.8),
    0 0 0 6px var(--ring),
    0 16px 28px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--download .btn-label{ font-size:clamp(14px,1.6vw,18px); line-height:1; }
.btn--download .btn-knob{
  position:absolute; right:clamp(6px,1vw,10px); top:50%; transform:translateY(-50%);
  width:clamp(38px,5vw,46px); height:clamp(38px,5vw,46px); border-radius:9999px;
  display:grid; place-items:center; color:#1a9f54;
  background: radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.5) 100%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    0 6px 18px rgba(2,6,23,.18),
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(2,6,23,.08);
}
.btn--download .icon-check{ display:block; }

@media (prefers-reduced-motion: reduce){
  .glass-cloud{ animation:none; }
  .btn--download{ transition:none; }
}

/* --- 1) Enforce symmetric layout across three bubbles --- */
.bubble-arc.bubbles-stage{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: end;
  justify-items: center;
  gap: clamp(24px, 6vw, 84px);
  padding-top: clamp(24px, 6vw, 72px); /* headroom for clouds */
}
.bubble-arc.bubbles-stage .bubble{ position: static !important; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.bubble--left { grid-column: 1; }
.bubble--main { grid-column: 2; }
.bubble--right { grid-column: 3; }

.bubble img{ display:block; height:auto; }
.bubble--left img,
.bubble--right img{ width: clamp(240px, 24vw, 340px); }
.bubble--main img{ width: clamp(340px, 32vw, 460px); } /* bigger but centered */

@media (max-width: 820px){
  .bubble-arc.bubbles-stage{
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 28px);
  }
  .bubble--left, .bubble--right, .bubble--main { grid-column: 1; }
}

/* --- Bubble captions --- */
.bubble-caption { text-align:center; margin-top:clamp(10px,1.8vw,16px); color:#0f172a; }
.bubble-caption .caption-title { font-weight:700; line-height:1.2; }
.bubble-caption .caption-sub { opacity:.85; font-size:.95em; margin-top:.25rem; }

/* Small “Ask AI” pill button */
.btn--ai{
  display:inline-block; margin-top:.5rem; padding:.4rem .8rem; border-radius:9999px; font-weight:600; font-size:.9rem; text-decoration:none;
  color:#0f172a; background:rgba(255,255,255,.8); border:1px solid rgba(15,23,42,.12);
  box-shadow:0 6px 14px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(6px);
}
.btn--ai:hover{ filter:saturate(1.02); transform:translateY(-1px); transition:all .15s ease; }
.btn--ai:active{ transform:none; }

/* Right bubble bullet list */
.caption-list{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; text-align:left; max-width:22rem; margin-inline:auto; font-size:.98em; }
.caption-list li{ position:relative; padding-left:1.25rem; }
.caption-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:.55rem; height:.55rem; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #16a34a, #0ea54e); box-shadow:0 1px 2px rgba(2,6,23,.25);
}

/* Move the main CTA lower */
.features-cta{ margin-top:clamp(28px, 6vw, 84px); }

/* Ensure glossy green for the big CTA */
.btn--download{
  --g1:#2ed06f;   /* top green */
  --g2:#0ea84f;   /* bottom green */
  --ring:rgba(16,185,129,.35);
  background:linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
  color:#fff;
  box-shadow:0 16px 28px rgba(16,185,129,.28), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn--download .btn-knob{
  color:#1a9f54;
  background:radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.5) 100%);
  border:1px solid rgba(255,255,255,.8);
}

/* --- 3) CTA: force glossy green gradient & move a bit lower --- */
/* Higher specificity to beat base .btn background */
.btn.btn--download{
  --g1:#2ed06f; /* top green */
  --g2:#0ea84f; /* bottom green */
  --ring:rgba(16,185,129,.35);
  background-image: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%) !important;
  background-color: transparent !important;
  color:#fff;
  box-shadow:
    0 16px 28px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn.btn--download .btn-knob{
  color:#1a9f54;
  background: radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.5) 100%);
  border:1px solid rgba(255,255,255,.8);
}
.features-cta{ margin-top: clamp(36px, 7vw, 96px); }

@media (prefers-reduced-motion: reduce){ .btn--download{ transition:none; } }

/* Reserve vertical space and layering for features bubbles vs CTA */
.feature-bubbles .bubbles-stage{
  position: relative; /* ensure a containing block */
  min-height: clamp(520px, 58vw, 860px); /* increased to fully clear CTA */
  margin-bottom: clamp(28px, 7vw, 112px);
  z-index: 0; /* baseline stacking context */
}

/* CTA should render above bubbles if overlapping occurs */
.feature-bubbles .features-cta{
  position: relative; /* required for z-index */
  z-index: 3;
  text-align: center;
}

/* Bubbles are decorative; prevent intercepting clicks */
.feature-bubbles .bubble,
.feature-bubbles .bubble img{ pointer-events: none; }

/* Safety: keep bubbles below CTA stacking */
.feature-bubbles .bubble{ z-index: 1; }

/* Hide main bubble caption to remove visual artifact beneath the sphere */
.feature-bubbles .bubble--main .bubble-label,
.feature-bubbles .bubble--main .bubble-caption{ display:none; }

@media (max-width:480px){
  .feature-bubbles .features-cta{ margin-top:16px; }
}

/* === Centered CTA overlay inside the bubbles stage === */
.feature-bubbles{ 
  /* easy tuning knobs */
  --cta-top: 62%;                 /* where the button sits vertically within the stage */
  --main-bubble-nudge: -32px;     /* how much to lift the big sphere */
}

.feature-bubbles .bubbles-stage{
  position: relative;             /* anchor for absolute children (CTA) */
}

/* Put the CTA dead-center of the 3-bubble cluster */
.feature-bubbles .cta-overlay{
  position: absolute;
  left: 50%;
  top: var(--cta-top);
  transform: translate(-50%, -50%);
  z-index: 6;                     /* above bubbles (z:1) and clouds (z:5) */
  pointer-events: auto;
  text-align: center;
}

/* Nudge the main bubble up a bit for nicer spacing */
.feature-bubbles .bubble--main{
  transform: translateY(var(--main-bubble-nudge));
}

/* Keep button fully clickable even if any image overlaps visually */
.feature-bubbles .bubble,
.feature-bubbles .bubble img{ pointer-events: none; }
.feature-bubbles .cta-overlay .btn{ pointer-events: auto; }

/* Mobile: place CTA below the stack for clarity */
@media (max-width: 820px){
  .feature-bubbles .cta-overlay{
    position: static;
    transform: none;
    margin: clamp(14px, 4vw, 24px) auto 0;
  }
  .feature-bubbles .bubbles-stage{ min-height: auto; }
}

/* === Chat-Style FAQ Section === */
:root {
  --faq-primary: #3B82F6;
}

.faq-section {
  background: var(--bg);
  padding: 54px 0;
}

.faq-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .faq-container {
    padding: 0 16px;
  }
}

.faq-header {
  text-align: center;
  margin-bottom: 24px;
}

.faq-header h1 {
  font-size: clamp(30px, 4vw, 32px);
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--fg);
}

.faq-header p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.faq-card {
  background: linear-gradient(180deg, #EEF5FF 0%, #E7F0FF 100%);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(2, 24, 74, 0.08);
}

@media (max-width: 768px) {
  .faq-card {
    padding: 16px;
  }
}

.faq-item {
  margin-bottom: 0;
}

.faq-item:not(:last-child) {
  margin-bottom: 14px;
}

.faq-question {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  transition: all 0.15s ease-out;
  outline: none;
}

.faq-question:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(2, 24, 74, 0.06);
}

.faq-question:focus-visible {
  outline: 2px solid var(--faq-primary);
  outline-offset: 2px;
}

.faq-question[aria-expanded="true"] {
  background: var(--faq-primary);
  border-color: var(--faq-primary);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
}

.faq-question span {
  flex: 1;
  margin-right: 8px;
}

.faq-icon {
  flex-shrink: 0;
  transition: transform 0.15s ease-out;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-question[aria-expanded="true"] .faq-icon path {
  d: path("M18 6L6 18M6 6l12 12");
}

.faq-answer {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.2s ease-out, opacity 0.15s ease-out;
  margin-top: 0;
}

.faq-item.active .faq-answer {
  height: auto;
  opacity: 1;
  margin-top: 10px;
}

.answer-bubble {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(2, 24, 74, 0.08);
}

.answer-bubble div[itemprop="text"] {
  width: 100%;
}

.answer-bubble p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #0F172A;
}

/* Breadcrumbs styling */
.breadcrumbs {
  background: rgba(240, 248, 255, 0.6);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  font-size: 0.9rem;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: var(--muted);
  opacity: 0.6;
}

.breadcrumbs a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span {
  color: var(--muted);
  font-weight: 500;
}

/* Soft yellow marker effect matching .marker-yellow */
.breadcrumbs [itemprop="name"] {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(250,204,21,.38), rgba(250,204,21,.24));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Ensure linked crumbs keep brand color (span would otherwise mute it) */
.breadcrumbs a span[itemprop="name"] { color: var(--brand); }
.nav-pill .nav-center a.nav-election{background:linear-gradient(90deg,#ff7f32,#ffd17a);color:#0b1020;border-radius:9999px;padding:8px 12px;font-weight:700;box-shadow:0 6px 18px rgba(2,6,23,0.08)}
.nav-pill .nav-center a.nav-election:hover{opacity:.95}
.nav-pill .nav-center a.nav-election.is-active{background:linear-gradient(90deg,#ff7f32,#ffd17a);color:#0b1020;}