: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:0% 50%; }
}
@media (max-width: 640px){
  /* phones: keep the embedded hero headline visible instead of cropping it */
  .hero{ min-height: clamp(260px, 68vw, 360px); }
  .hero__img{ object-position:left center; }
}

/* 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;
  padding:2px 10px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(135,206,235,.38), rgba(135,206,235,.20));
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.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; }
.card--synastry{ padding:12px; border-radius:16px; background:linear-gradient(180deg,#f5faff 0%,#e8f2ff 100%); }
.card--synastry .card-media--synastry{ width:min(100%,96%); margin:0 auto; border-radius:14px; box-shadow:0 16px 30px rgba(15,23,42,0.10); }
/* 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,.site-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,.site-footer .footer-wave{position:absolute;left:0;top:-32px;width:100%;height:32px;fill:var(--footer-bg)}
.footer .footer-inner,.site-footer .footer-inner{max-width:72rem;margin:0 auto;padding:48px 24px}
.footer .footer-columns,.site-footer .footer-columns{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:1024px){.footer .footer-columns,.site-footer .footer-columns{grid-template-columns:1fr 1fr}}
.footer h3,.site-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,.site-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}}
.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: 18px;
  padding: 16px 18px 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-width: 0;
}
.sticky-rail > *,
.sticky-rail .chip-section,
.sticky-rail .chip-rail{
  min-width: 0;
}
.sticky-rail .download-cta{
  padding: 4px 8px 0;
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.sticky-rail .btn{ min-height: 44px; }
.sticky-rail .btn--download{
  max-width: 100%;
  white-space: nowrap;
}

.sticky-rail-wrap{
  position: relative;
  margin: 12px 0 18px;
  padding: 6px 0 18px;
  max-width: 100%;
  overflow: hidden;
}
.sticky-rail-wrap::before{
  content:"";
  position:absolute;
  inset:8px clamp(20px, 5vw, 72px) 6px;
  border-radius:40px;
  background:
    radial-gradient(70% 120% at 50% 62%, rgba(176,198,233,.24), rgba(176,198,233,0) 68%),
    radial-gradient(90% 100% at 50% 0%, rgba(255,255,255,.54), rgba(255,255,255,0) 72%);
  box-shadow:
    0 24px 42px rgba(183,202,229,.16),
    inset 0 1px 0 rgba(255,255,255,.42);
  pointer-events:none;
}
.sticky-rail .chip-section{
  padding: 12px 0 16px;
  background: transparent;
  box-shadow: none;
}
.sticky-rail .chip-rail{
  gap: 16px;
  padding: 6px 18px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sticky-rail .chip-section::before,
.sticky-rail .chip-section::after{
  top: 10px;
  bottom: 10px;
  width: 52px;
}
.sticky-rail .chip-section::before{
  background: linear-gradient(90deg, rgba(245,248,252,.94) 42%, rgba(245,248,252,0));
}
.sticky-rail .chip-section::after{
  background: linear-gradient(-90deg, rgba(245,248,252,.94) 42%, rgba(245,248,252,0));
}

/* === 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; color:rgba(255,255,255,.84); opacity:1; }

/* 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; }
.blog-article .article-header .eyebrow-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.blog-article .article-header .eyebrow-link::after{
  content:"Browse blog";
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(42,76,255,.08);
  border:1px solid rgba(42,76,255,.12);
  color:var(--brand-primary);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.blog-article .article-header .eyebrow-link:hover::after{
  background:rgba(42,76,255,.12);
}
.blog-article .article-header-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin:14px 0 0;
}
.blog-article .article-header-links a{
  color:var(--brand-primary);
  font-weight:700;
  text-decoration:none;
}
.blog-article .article-header-links a:hover{ text-decoration:underline; }
.blog-article .download-helper{
  margin:10px 0 0;
  max-width:44rem;
}
.blog-article .download-helper a{
  color:var(--brand-primary);
  font-weight:700;
}
.ios-app-download-bar{
  display:none;
  position:sticky;
  top:0;
  z-index:80;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(15,23,42,.1);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  backdrop-filter:blur(14px);
}
.ios-app-download-bar.is-visible{ display:flex; }
body.has-ios-app-download-bar .header{
  top:var(--ios-app-download-bar-offset, 55px);
}
.ios-app-download-bar__logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  text-decoration:none;
}
.ios-app-download-bar__logo{
  display:block;
  width:34px;
  height:34px;
  border-radius:9px;
  object-fit:cover;
  box-shadow:0 4px 10px rgba(15,23,42,.16);
}
.ios-app-download-bar__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:54px;
  min-height:34px;
  padding:7px 15px;
  border-radius:999px;
  border:1px solid #007aff;
  background:#007aff;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,122,255,.22);
  -webkit-tap-highlight-color:transparent;
}
.ios-app-download-bar__button:hover{
  background:#006ee6;
  border-color:#006ee6;
  color:#fff;
  text-decoration:none;
}
.ios-app-download-bar__button:active{
  transform:translateY(1px);
  box-shadow:0 2px 7px rgba(0,122,255,.2);
}
@media (min-width:721px){
  .ios-app-download-bar.is-visible{ display:none; }
}
@media (max-width:380px){
  .ios-app-download-bar{ min-height:50px; padding-top:7px; padding-bottom:7px; }
  .ios-app-download-bar__button{ min-width:50px; min-height:32px; padding-inline:13px; font-size:.76rem; }
}
.app-download-cta{
  margin:clamp(30px, 5vw, 48px) 0;
}
.ios-app-store-card{
  display:block;
  padding:clamp(18px, 4vw, 28px);
  border:1px solid rgba(60,60,67,.14);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,248,250,.94));
  box-shadow:0 18px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.ios-app-store-card__main{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  align-items:center;
  gap:10px 16px;
  min-width:0;
}
.ios-app-store-card__icon{
  display:block;
  grid-column:1;
  grid-row:1 / span 2;
  align-self:start;
  width:82px;
  height:82px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 10px 22px rgba(15,23,42,.16);
}
.ios-app-store-card__copy{
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.ios-app-store-card__body{
  grid-column:2 / -1;
  grid-row:2;
  min-width:0;
}
.ios-app-store-card__eyebrow{
  display:block;
  margin-bottom:5px;
  color:rgba(60,60,67,.68);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:0;
}
.ios-app-store-card h2{
  margin:0 0 6px;
  color:#111827;
  font-size:clamp(1.22rem, 2.2vw, 1.58rem);
  line-height:1.12;
}
.ios-app-store-card p{
  margin:0;
  color:rgba(60,60,67,.74);
  font-size:.95rem;
  line-height:1.45;
}
.ios-app-store-card p + p{ margin-top:7px; }
.ios-app-store-card__button{
  display:inline-flex;
  grid-column:3;
  grid-row:1;
  align-items:center;
  justify-content:center;
  justify-self:end;
  min-width:62px;
  min-height:36px;
  padding:8px 17px;
  border:1px solid #007aff;
  border-radius:999px;
  background:#007aff;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(0,122,255,.22);
  -webkit-tap-highlight-color:transparent;
}
.ios-app-store-card__button:hover{
  background:#006ee6;
  border-color:#006ee6;
  color:#fff;
  text-decoration:none;
}
.ios-app-store-card__button:active{
  transform:translateY(1px);
  box-shadow:0 2px 8px rgba(0,122,255,.2);
}
@media (max-width:720px){
  .ios-app-store-card{
    padding:18px;
    border-radius:22px;
  }
  .ios-app-store-card__main{
    grid-template-columns:68px minmax(0,1fr) auto;
    gap:12px;
  }
  .ios-app-store-card__icon{
    grid-row:1;
    width:68px;
    height:68px;
    border-radius:16px;
  }
  .ios-app-store-card__body{
    grid-column:1 / -1;
    grid-row:2;
  }
  .ios-app-store-card h2{
    margin-bottom:0;
    font-size:1.22rem;
  }
  .ios-app-store-card p{
    font-size:.92rem;
  }
}
@media (max-width:420px){
  .ios-app-store-card__main{
    grid-template-columns:58px minmax(0,1fr) auto;
    gap:12px;
  }
  .ios-app-store-card__icon{
    width:58px;
    height:58px;
    border-radius:14px;
  }
  .ios-app-store-card h2{
    font-size:1.08rem;
  }
  .ios-app-store-card__eyebrow{
    font-size:.7rem;
  }
  .ios-app-store-card__button{
    min-width:56px;
    min-height:34px;
    padding-inline:15px;
    font-size:.78rem;
  }
}
.apple-mark{
  display:block;
  width:15px;
  height:15px;
  fill:currentColor;
}
.ios-app-store-card__button--with-icon{
  gap:7px;
  min-width:84px;
  padding-inline:16px;
}
.forensics-ios-page{
  background:linear-gradient(180deg,#f7faff 0%,#ffffff 44%,#f8fafc 100%);
  overflow:hidden;
}
.forensics-ios-hero{
  padding:clamp(72px, 10vw, 118px) 0 clamp(46px, 7vw, 76px);
}
.forensics-ios-hero__shell{
  max-width:1080px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  align-items:center;
  gap:clamp(28px, 6vw, 72px);
}
.forensics-ios-hero__copy{
  min-width:0;
}
.forensics-ios-kicker{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 12px;
  border:1px solid rgba(0,122,255,.2);
  border-radius:999px;
  background:rgba(0,122,255,.08);
  color:#0057c8;
  font-size:.78rem;
  font-weight:800;
}
.forensics-ios-hero h1{
  margin:16px 0 14px;
  color:#101828;
  font-size:clamp(2.35rem, 5vw, 4.15rem);
  line-height:.98;
}
.forensics-ios-hero .lead{
  max-width:620px;
  margin:0;
  color:rgba(31,41,55,.74);
  font-size:clamp(1.05rem, 1.8vw, 1.28rem);
  line-height:1.55;
}
.forensics-ios-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.forensics-ios-points span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border:1px solid rgba(15,23,42,.1);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#334155;
  font-size:.82rem;
  font-weight:800;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.forensics-ios-app-card{
  margin:0;
}
.ios-app-store-card--landing{
  padding:clamp(22px, 4vw, 34px);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,248,251,.96));
  box-shadow:0 24px 56px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.95);
}
.ios-app-store-card--landing .ios-app-store-card__main{
  grid-template-columns:96px minmax(0,1fr) auto;
  gap:12px 18px;
}
.ios-app-store-card--landing .ios-app-store-card__icon{
  width:96px;
  height:96px;
  border-radius:21px;
  box-shadow:0 14px 30px rgba(15,23,42,.18);
}
.ios-app-store-card--landing .ios-app-store-card__eyebrow{
  font-size:.82rem;
  white-space:nowrap;
}
.ios-app-store-card--landing h2{
  font-size:clamp(1.28rem, 2.4vw, 1.72rem);
}
.ios-app-store-card--landing .ios-app-store-card__body{
  display:grid;
  gap:8px;
}
.ios-app-store-card--landing .ios-app-store-card__body p{
  color:rgba(60,60,67,.76);
}
.ios-app-store-card--landing .ios-app-store-card__button{
  min-width:92px;
  min-height:42px;
  font-size:.84rem;
  box-shadow:0 9px 22px rgba(0,122,255,.24);
}
.forensics-ios-details{
  padding:0 0 clamp(34px, 6vw, 64px);
}
.forensics-ios-details__shell{
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.forensics-ios-feature{
  min-width:0;
  padding:20px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.forensics-ios-feature b{
  display:block;
  color:#111827;
  font-size:1rem;
}
.forensics-ios-feature p{
  margin:8px 0 0;
  color:rgba(31,41,55,.7);
  font-size:.94rem;
  line-height:1.5;
}
.forensics-ios-info{
  padding:clamp(34px, 6vw, 58px) 0;
  border-top:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
}
.forensics-ios-info__shell{
  max-width:860px;
}
.forensics-ios-info .section-title{
  margin-bottom:8px;
}
.forensics-ios-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.forensics-ios-links a{
  color:#0057c8;
  font-weight:800;
  text-decoration:none;
}
.forensics-ios-links a:hover{
  text-decoration:underline;
}
@media (max-width:860px){
  .forensics-ios-hero__shell{
    grid-template-columns:1fr;
  }
  .forensics-ios-details__shell{
    grid-template-columns:1fr;
  }
}
@media (max-width:520px){
  .forensics-ios-hero{
    padding-top:54px;
  }
  .forensics-ios-hero h1{
    font-size:clamp(2.05rem, 12vw, 2.85rem);
  }
  .forensics-ios-points{
    gap:8px;
  }
  .forensics-ios-points span{
    font-size:.78rem;
  }
  .ios-app-store-card--landing{
    border-radius:24px;
    padding:18px;
  }
  .ios-app-store-card--landing .ios-app-store-card__main{
    grid-template-columns:58px minmax(0,1fr) auto;
    gap:12px;
  }
  .ios-app-store-card--landing .ios-app-store-card__icon{
    width:58px;
    height:58px;
    border-radius:14px;
  }
  .ios-app-store-card--landing .ios-app-store-card__body{
    grid-column:1 / -1;
  }
  .ios-app-store-card--landing h2{
    font-size:1.02rem;
  }
  .ios-app-store-card--landing .ios-app-store-card__eyebrow{
    font-size:.68rem;
  }
  .ios-app-store-card--landing .ios-app-store-card__button{
    min-width:74px;
    min-height:36px;
    padding-inline:13px;
    font-size:.78rem;
  }
  .apple-mark{
    width:14px;
    height:14px;
  }
}
.related-posts{
  margin-top:clamp(28px, 5vw, 44px);
  padding-top:22px;
  border-top:1px solid rgba(15,23,42,.08);
}
.related-posts .related-list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  gap:10px;
}
.related-posts .related-list li{ margin:0; }
.related-row-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  text-decoration:none;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,244,251,.92));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(2,6,23,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.related-row-link:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(2,6,23,.08);
  border-color:rgba(42,76,255,.18);
}
.related-row-link:focus-visible{
  outline:3px solid rgba(42,76,255,.20);
  outline-offset:2px;
}
.related-row-link__title{ font-weight:700; }
.related-row-link .small{
  flex:0 0 auto;
  white-space:nowrap;
}

/* 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; }
  .sticky-rail{
    gap:14px;
    padding:14px 8px 18px;
  }
  .sticky-rail-wrap::before{
    inset:8px 12px 6px;
  }
  .sticky-rail .chip-rail{
    gap:12px;
    padding:4px 12px;
  }
  .related-row-link{
    align-items:flex-start;
    flex-direction:column;
  }
  .related-row-link .small{
    white-space:normal;
  }
}

/* === 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-paypal-link{width:100%;max-width:320px;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:999px;background:linear-gradient(180deg,#ffde72 0%,#facc15 100%);border:1px solid rgba(17,24,39,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 14px 28px rgba(15,23,42,0.14);color:#111827;text-decoration:none;font-weight:800;letter-spacing:.01em;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.pricing-paypal-link:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 18px 34px rgba(15,23,42,0.16);filter:saturate(1.02);}
.pricing-paypal-link:focus-visible{outline:3px solid rgba(37,99,235,0.28);outline-offset:3px;}
.pricing-paypal-link__brand{font-style:italic;font-weight:900;letter-spacing:-.01em;}
.pricing-paypal-link__label{font-size:.95rem;}
.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;}
.pricing-plan[data-card-link],
.pricing-modern .pricing-card[data-card-link]{
  position:relative;
  cursor:pointer;
}
.pricing-card-hit-link{
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
  text-decoration:none;
}
.pricing-card-hit-link:focus-visible{
  outline:3px solid rgba(37,99,235,0.32);
  outline-offset:5px;
}
.pricing-plan[data-card-link]:focus-visible,
.pricing-modern .pricing-card[data-card-link]:focus-visible{
  outline:3px solid rgba(37,99,235,0.32);
  outline-offset:5px;
}
.pricing-plan[data-card-link] .pricing-paypal-link,
.pricing-modern .pricing-card[data-card-link] .pricing-paypal-link,
.pricing-plan[data-card-link] .pricing-paypal-shell,
.pricing-modern .pricing-card[data-card-link] [id^="paypal-button-container"]{
  cursor:auto;
}
.pricing-plan[data-card-link] .pricing-paypal-link,
.pricing-plan[data-card-link] .pricing-paypal-shell,
.pricing-plan[data-card-link] .pricing-plan__support,
.pricing-plan[data-card-link] .pricing-plan__features a,
.pricing-modern .pricing-card[data-card-link] .card-cta,
.pricing-modern .pricing-card[data-card-link] .features a{
  position:relative;
  z-index:2;
}

@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;}

/* Astro Clock docs */
.docs-page .section{padding:48px 0}
.docs-hero{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 38%),
    radial-gradient(circle at top right, rgba(6,182,212,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,245,255,.88));
  border-bottom:1px solid var(--border);
}
.docs-hero-grid,
.docs-guide-hero{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0,1.6fr) minmax(280px,.95fr);
  align-items:start;
}
.docs-hero-copy .title,
.docs-guide-hero-copy .title{
  font-size:clamp(2rem, 2vw + 1.25rem, 3rem);
  margin:10px 0 14px;
}
.docs-hero-copy .subtitle,
.docs-guide-hero-copy .subtitle{
  max-width:760px;
  font-size:1.05rem;
  line-height:1.7;
}
.docs-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.docs-hero-panel,
.docs-guide-summary{
  padding:22px;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
}
.docs-panel-eyebrow{
  color:var(--brand);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.76rem;
  font-weight:800;
}
.docs-hero-panel h2,
.docs-guide-summary h2{
  margin:8px 0 12px;
  font-size:1.35rem;
  line-height:1.25;
}
.docs-start-grid,
.docs-guide-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.docs-start-card,
.docs-guide-card{
  height:100%;
}
.docs-step-number{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 20px rgba(37,99,235,.18);
  margin-bottom:16px;
}
.docs-section-heading{
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:end;
  margin-bottom:20px;
}
.docs-section-heading .section-title{margin:4px 0 0}
.docs-group-intro{
  max-width:520px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.docs-guide-card h3,
.docs-start-card h3{
  margin:14px 0 10px;
  font-size:1.22rem;
  line-height:1.28;
}
.docs-guide-card p,
.docs-start-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.docs-guide-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.docs-guide-card-group{
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.docs-dependency-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:16px;
}
.docs-dependency-label{
  color:var(--muted);
  font-size:.83rem;
  font-weight:700;
  letter-spacing:.03em;
}
.docs-dependency-pill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.14);
  color:#12469d;
  font-size:.88rem;
  font-weight:700;
}
.docs-dependency-pill--large{
  font-size:.96rem;
  margin:10px 0 14px;
}
.docs-article-shell{padding-top:34px}
.docs-prose{
  max-width:880px;
  margin:0 auto;
}
.docs-article-section{
  margin-bottom:34px;
}
.docs-prose h2{
  margin:0 0 16px;
  font-size:1.75rem;
  line-height:1.2;
}
.docs-prose h3{
  margin:26px 0 12px;
  font-size:1.22rem;
  line-height:1.3;
}
.docs-prose h4{
  margin:20px 0 10px;
  font-size:1rem;
  line-height:1.35;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.docs-prose p{
  margin:0 0 14px;
  font-size:1rem;
  line-height:1.72;
}
.docs-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(15,23,42,.06);
  padding:2px 6px;
  border-radius:6px;
  font-size:.92em;
}
.docs-list{
  margin:0 0 16px;
  padding-left:20px;
}
.docs-list li{
  margin:0 0 10px;
  line-height:1.66;
}
.docs-list--ordered{
  padding-left:22px;
}
.docs-figure-wrap{
  display:grid;
  gap:16px;
  margin:22px 0 24px;
}
.docs-figure{
  padding:30px 18px 18px;
}
.docs-figure-caption{
  margin-top:14px;
  font-size:.94rem;
  color:var(--muted);
  line-height:1.55;
}
.docs-legend{
  padding:18px 18px 14px;
}
.docs-legend-title{
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:10px;
}
.docs-legend-list{
  margin:0;
  padding-left:20px;
}
.docs-legend-list li{
  margin-bottom:8px;
  line-height:1.6;
}
.docs-backlink{
  max-width:880px;
  margin:10px auto 0;
  padding-top:8px;
}
.docs-backlink a{
  font-weight:700;
}
.docs-pagination-section{padding-top:0}
.docs-pagination{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.docs-pagination-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:inherit;
}
.docs-pagination-card strong{
  font-size:1.05rem;
  line-height:1.35;
}
.docs-pagination-card--next{
  text-align:right;
}
.docs-pagination-label{
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.docs-guide-card--compact{
  padding:18px;
}
@media (max-width:900px){
  .docs-hero-grid,
  .docs-guide-hero,
  .docs-section-heading{
    grid-template-columns:1fr;
    align-items:start;
  }
}
@media (max-width:720px){
  .docs-pagination{
    grid-template-columns:1fr;
  }
  .docs-pagination-card--next{
    text-align:left;
  }
}

/* === Features page layout refactor (scoped, homepage-safe) === */
.features-page{
  --feature-panel:#edf5ff;
  --feature-panel-2:#f7fbff;
  --feature-ink:#0b1525;
  --feature-muted:#51607a;
  background:
    radial-gradient(70% 38% at 50% 0%, rgba(255,255,255,.78), rgba(255,255,255,0) 72%),
    var(--bg);
}
.features-page .header{ z-index:30; }
.features-page .breadcrumbs{ padding-top:18px; padding-bottom:12px; }
.features-page .sticky-rail-wrap{ margin:0 0 26px; padding:18px 0 22px; }
.features-page .sticky-rail-wrap::before{
  inset:8px clamp(16px, 5vw, 80px) 0;
  border-radius:42px;
  background:
    radial-gradient(60% 120% at 50% 18%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    linear-gradient(90deg, rgba(211,241,249,.48), rgba(222,232,255,.56));
  box-shadow:0 24px 50px rgba(152,177,214,.16), inset 0 1px 0 rgba(255,255,255,.56);
}
.features-page .sticky-rail{ padding:16px 18px 22px; }
.features-page .sticky-rail .chip-rail{ gap:12px; padding:6px 16px; justify-content:center; }
.features-page .sticky-rail .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 17px;
  color:var(--feature-ink);
  background:linear-gradient(180deg,#e9f1f9,#d8e4ef);
  border-color:rgba(11,21,37,.08);
  box-shadow:0 16px 28px -22px rgba(11,21,37,.55), inset 0 1px 0 rgba(255,255,255,.76);
}
.features-page .chip-num{
  font-size:.68rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(81,96,122,.78);
}

.features-page #features-grid{ padding-top:22px; padding-bottom:36px; }
.features-page #features-grid,
.features-page .feature-card,
.features-page section[id$="-details"],
.features-page .features-final-cta{
  scroll-margin-top: 126px;
}
.features-page #features-grid .container.center{ max-width:980px; }
.features-page #features-grid .section-title{
  font-size:clamp(2rem, 3.6vw, 3rem);
  letter-spacing:0;
}
.features-page #features-grid .container.center .small{
  max-width:74ch;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:1rem;
  color:var(--feature-muted);
}
.features-page .hero-chip-wrap{ margin-top:8px; }
.features-page .feature-grid{
  max-width:960px;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:16px;
}
.features-page .feature-card{
  grid-column:span 12;
  padding:0;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.9));
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 16px 38px -32px rgba(11,21,37,.55);
  overflow:hidden;
  perspective:none;
}
@media (min-width:680px){ .features-page .feature-card{ grid-column:span 6; } }
@media (min-width:1040px){ .features-page .feature-card{ grid-column:span 4; } }
.features-page .feature-card .card-inner{
  position:relative;
  min-height:220px;
  aspect-ratio:auto;
  transform:none !important;
  transition:box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
.features-page .feature-card:hover,
.features-page .feature-card:focus-within{
  box-shadow:0 28px 62px -36px rgba(11,21,37,.65);
  transform:translateY(-2px);
}
.features-page .feature-card .card-face{
  backface-visibility:visible;
  border-radius:inherit;
  background:transparent;
}
.features-page .feature-card .card-front{
  position:absolute;
  inset:0;
  padding:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,246,255,.94));
}
.features-page .feature-card .card-front picture{
  position:absolute;
  inset:48px 0 0;
  display:block;
  border-radius:0 0 18px 18px;
  overflow:hidden;
  background:linear-gradient(180deg,#f7fbff,#eaf3ff);
  border-top:1px solid rgba(148,163,184,.2);
}
.features-page .feature-card .tile-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  padding:0;
  opacity:1 !important;
  filter:none !important;
}
.features-page .feature-card .title-box{
  left:0;
  right:0;
  top:0;
  min-height:48px;
  padding:0 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.features-page .feature-card .title-box .badge{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#626b7b;
  font-size:1.02rem;
  line-height:1;
}
.features-page .feature-card:hover .card-front .title-box,
.features-page .feature-card:focus-within .card-front .title-box,
.features-page .feature-card.is-flipped .card-front .title-box{ opacity:0; }
.features-page .feature-card .card-back{
  position:absolute;
  inset:0;
  z-index:3;
  transform:translateY(10px);
  opacity:0;
  pointer-events:none;
  padding:16px;
  overflow:auto;
  text-align:left;
  border-radius:inherit;
  background:rgba(255,255,255,.96);
  border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.features-page .feature-card:hover .card-back,
.features-page .feature-card:focus-within .card-back,
.features-page .feature-card.is-flipped .card-back{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.features-page #features-grid .feature-card .card-back .badge{
  font-size:.82rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--brand-2);
}
.features-page #features-grid .feature-card .card-back .section-title{
  font-size:1.18rem;
  line-height:1.15;
  margin:8px 0;
}
.features-page #features-grid .feature-card .card-back .list{
  padding-left:18px;
  color:var(--feature-muted);
  font-size:.86rem;
}
.features-page #features-grid .feature-card .card-back .list li{ margin:.28rem 0; }
.features-page #features-grid .feature-card .card-back a{
  display:inline-flex;
  margin-top:8px;
  font-weight:800;
  font-size:.88rem;
}
.features-page .feature-card .card-toggle{ z-index:4; inset:0; }
.features-page .feature-card.is-highlighted{
  box-shadow:0 0 0 3px rgba(6,182,212,.45), 0 28px 62px -36px rgba(11,21,37,.65);
}

.features-page .feature-support{ padding:42px 0; }
.features-page .feature-support .split{ align-items:stretch; gap:22px; }
.features-page .feature-support .split > div{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.22);
  border-radius:22px;
  padding:26px;
  box-shadow:0 18px 46px -36px rgba(11,21,37,.5);
}

.features-page .connector{
  height:38px;
  opacity:.78;
  background:linear-gradient(90deg, rgba(6,182,212,.18), rgba(37,99,235,.16));
}
.features-page section[id$="-details"]{ padding:42px 0; }
.features-page section[id$="-details"] .container.split{
  max-width:1180px;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:clamp(24px, 3.5vw, 44px);
  align-items:center;
  background:rgba(238,245,255,.86);
  border:1px solid rgba(148,163,184,.22);
  border-radius:24px;
  box-shadow:0 24px 58px -44px rgba(11,21,37,.55);
  padding:clamp(24px, 3.5vw, 36px);
}
.features-page section[id$="-details"] .section-title{
  font-size:clamp(1.8rem, 3vw, 2.55rem);
  line-height:1.05;
  margin-top:10px;
}
.features-page section[id$="-details"] p.small{ font-size:1rem; }
.features-page section[id$="-details"] .list{
  list-style:none;
  padding:0;
  display:grid;
  gap:8px;
}
.features-page section[id$="-details"] .list li{
  position:relative;
  margin:0;
  padding:10px 13px 10px 34px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:13px;
  background:rgba(255,255,255,.54);
  color:var(--feature-ink);
  line-height:1.38;
}
.features-page section[id$="-details"] .list li::before{
  content:"";
  position:absolute;
  left:14px;
  top:1.05em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 30%, #fff 0 18%, var(--brand-2) 20% 100%);
  box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
.features-page section[id$="-details"] .shot{
  max-width:460px;
  margin-inline:auto;
  border-radius:22px;
  padding:24px 12px 12px;
  background:linear-gradient(180deg,#fbfdff,#edf5ff);
  box-shadow:0 24px 54px -42px rgba(11,21,37,.7);
}
.features-page section[id$="-details"] .shot-media{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:radial-gradient(80% 80% at 50% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 74%);
}
.features-page .note{
  margin-top:14px;
  padding:10px 12px;
  border-left:3px solid var(--brand-2);
  background:rgba(255,255,255,.46);
  border-radius:0 12px 12px 0;
}

.features-page .features-final-cta{ padding:54px 0 22px; }
.features-page .features-final-cta__panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  min-height:230px;
  padding:clamp(28px, 5vw, 48px);
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(50% 120% at 100% 40%, rgba(255,209,122,.22), rgba(255,209,122,0) 62%),
    radial-gradient(70% 120% at 0% 0%, rgba(37,99,235,.34), rgba(37,99,235,0) 64%),
    linear-gradient(135deg,#102e70,#07113f);
  box-shadow:0 30px 70px -42px rgba(7,17,63,.85);
  overflow:hidden;
}
.features-page .features-final-cta .badge{
  color:#ffd17a;
  border-color:rgba(255,209,122,.28);
  background:rgba(255,255,255,.08);
}
.features-page .features-final-cta .section-title{
  max-width:560px;
  margin:12px 0 10px;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.03;
}
.features-page .features-final-cta .small{
  max-width:620px;
  color:rgba(255,255,255,.78);
  font-size:1rem;
}
.features-page .features-final-cta .btn--download{ white-space:nowrap; }
.features-page .footer{ margin-top:20px; background:#eaf2ff; }
.features-page .footer .footer-inner{ padding-top:42px; padding-bottom:30px; }
.features-page .newsletter-card{
  background:rgba(255,255,255,.62);
  border-color:rgba(148,163,184,.22);
  box-shadow:0 18px 48px -38px rgba(11,21,37,.55);
}

@media (max-width:860px){
  .features-page .sticky-rail-wrap{ padding-top:10px; }
  .features-page .sticky-rail .chip-rail{
    justify-content:flex-start;
    padding-inline:12px;
    gap:10px;
  }
  .features-page .sticky-rail .chip{ padding:10px 14px; }
  .features-page .feature-card .card-inner{ min-height:234px; }
  .features-page section[id$="-details"] .container.split{
    grid-template-columns:1fr;
    padding:22px;
  }
  .features-page section[id$="-details"] .split > div:first-child:has(.shot){ order:2; }
  .features-page section[id$="-details"] .shot-media{ aspect-ratio:16 / 11; }
  .features-page .features-final-cta__panel{
    grid-template-columns:1fr;
    text-align:left;
  }
}
@media (max-width:560px){
  .features-page .breadcrumbs{ padding-top:10px; }
  .features-page .sticky-rail-wrap::before{ inset-inline:8px; }
  .features-page #features-grid{ padding-top:12px; }
  .features-page .feature-card .card-inner{ min-height:236px; }
  .features-page .feature-card .card-front picture{ inset:48px 0 0; }
  .features-page .feature-card .card-back{
    padding:14px;
  }
  .features-page section[id$="-details"]{ padding:30px 0; }
  .features-page section[id$="-details"] .list li{ padding:9px 11px 9px 30px; }
  .features-page .feature-support .split > div{ padding:20px; }
  .features-page .features-final-cta{ padding-top:38px; }
}