/* ==========================================================================
   DriveXos — Apple layer
   Loaded LAST on every page. Re-skins the whole site in the style of Apple's
   dark product pages (MacBook Pro, iPhone Pro): pure black, San Francisco
   type, one blue, pill buttons, flat tiles, and no glow or glass.

   It works by overriding design tokens first, then components. The markup
   and data-hooks the JavaScript relies on are untouched.
   ========================================================================== */

:root{
  --bg:#000; --bg-2:#000; --raise:#1d1d1f; --raise-2:#2d2d2f;
  --glass:#1d1d1f; --glass-2:#262628;
  --glass-line:rgba(255,255,255,.08); --glass-line-2:#424245;

  --ink:#f5f5f7; --ink-2:#d2d2d7; --muted:#86868b; --muted-2:#6e6e73;

  --brand:#2997ff; --brand-hover:#5cafff;
  --grad-start:#2997ff; --grad-end:#a970ff;
  --gradient:linear-gradient(90deg,#2997ff 0%,#a970ff 100%);
  --brand-line:#2997ff;

  --apple-blue:#0071e3; --apple-blue-hover:#0077ed;
  --tile:#1d1d1f; --tile-2:#161617; --hairline:#424245;

  --r:12px; --r-lg:22px; --r-xl:28px;
  --glow-brand:none; --glow-soft:none; --glow-card:none;
  --nav-h:52px;
  --ease:cubic-bezier(.28,.11,.32,1);          /* Apple's standard easing */

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Ground and type ---------- */
html{ background:#000; }
body{
  font-family:var(--font); font-size:17px; line-height:1.47; letter-spacing:-.022em;
  color:var(--ink-2);
}
body::before, body::after{ display:none !important; }

h1,h2,h3,h4{ color:#f5f5f7; font-weight:600; }
h1{ font-size:clamp(2.6rem, 1.4rem + 4.6vw, 5rem); line-height:1.05; letter-spacing:-.015em; }
h2{ font-size:clamp(2rem, 1.2rem + 3.2vw, 3.5rem); line-height:1.07; letter-spacing:-.015em; }
h3{ font-size:clamp(1.15rem, 1rem + .5vw, 1.5rem); line-height:1.17; letter-spacing:-.01em; }
p{ letter-spacing:-.022em; }
a{ color:var(--brand); }
a:hover{ color:var(--brand); text-decoration:underline; text-underline-offset:.18em; }
.btn:hover, .nav-links a:hover, .brand:hover, .tabbar a:hover, .card--hover:hover, a.card:hover, a.blog-card, a.blog-card:hover, .blog-card, .blog-card:hover{ text-decoration:none !important; }
.blog-card *, .blog-card:hover *{ text-decoration:none; }
.blog-card:hover .blog-title{ color:#8FACFF; text-decoration:underline; text-underline-offset:.18em; }
code{ background:#1d1d1f; border:0; color:#f5f5f7; }
::selection{ background:rgba(41,151,255,.35); }

/* The "eyebrow" becomes Apple's product kicker: plain, bold, in gradient. */
.eyebrow, .eyebrow--light{
  background:none; border:0; box-shadow:none; padding:0;
  text-transform:none; letter-spacing:-.01em;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.4rem); font-weight:600;
  background-image:var(--gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; margin-bottom:12px;
}
.eyebrow svg{ display:none; }

.muted, .lead{ color:var(--muted); }
.lead{ font-size:clamp(1.1rem, 1rem + .45vw, 1.5rem); line-height:1.3; }

/* ---------- Layout rhythm ---------- */
.wrap{ max-width:1024px; padding-inline:22px; }
.wrap--wide{ max-width:1260px; }
.section{ padding:120px 0; }
.section--tight{ padding:80px 0; }
.section--alt{ background:#161617; }
.section--alt::before, .section--alt::after{ display:none; }
.section-head{ margin-bottom:64px; max-width:760px; }
.section-head p{ font-size:clamp(1.05rem, .95rem + .45vw, 1.35rem); line-height:1.35; color:var(--muted); }

/* ---------- Header: Apple local nav ---------- */
.site-header{
  height:var(--nav-h);
  background:rgba(22,22,23,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header.is-scrolled{ background:rgba(22,22,23,.86); box-shadow:none; }
.site-header .wrap{ max-width:1024px; }
.brand{ font-size:1.3rem; font-weight:600; letter-spacing:-.02em; gap:10px; }
.brand img{ width:30px; height:30px; border-radius:8px; filter:none; }
.brand:hover img{ transform:none; filter:none; }
.brand small{ display:none; }
.nav-links{ margin-left:auto; gap:0; }
.nav-links a{
  font-size:12px; font-weight:400; letter-spacing:-.01em; color:rgba(255,255,255,.8);
  padding:6px 10px; border-radius:0; gap:5px; background:none !important;
}
.nav-links a svg{ width:12px; height:12px; opacity:.7; }
.nav-links a:hover{ color:#fff; }
.nav-links a::after{ display:none !important; }
.nav-links a.is-active{ color:#fff; }
.nav-links a.is-active svg{ color:#fff; opacity:1; }
.nav-cta{ margin-left:14px; gap:8px; }
.nav-cta .btn--sm{ font-size:12px; padding:4px 11px; min-height:0; }
.nav-cta .btn--sm svg{ width:11px; height:11px; }

/* ---------- Buttons: Apple pills and links ---------- */
.btn{
  border-radius:980px; font-weight:400; font-size:17px; letter-spacing:-.022em;
  padding:11px 22px; line-height:1.18; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg[stroke]{ stroke-width:1.8; }
.btn--lg{ padding:13px 24px; font-size:17px; border-radius:980px; }
.btn--primary{ background:var(--apple-blue); color:#fff; box-shadow:none; border:1px solid var(--apple-blue); }
.btn--primary:hover{ background:var(--apple-blue-hover); border-color:var(--apple-blue-hover); color:#fff; transform:none; box-shadow:none; }
.btn--primary::after{ display:none !important; }
.btn--ghost, .btn--onDark, .btn--solid{
  background:transparent; color:var(--brand); border:1px solid var(--brand); backdrop-filter:none;
}
.btn--ghost:hover, .btn--onDark:hover, .btn--solid:hover{ background:var(--brand); color:#000; border-color:var(--brand); transform:none; }
.btn:active{ transform:none; }
.js .hero .btn--primary{ animation:none !important; }

/* "Learn more ›" — Apple's text link with a chevron */
.link-more{ color:var(--brand); font-size:17px; white-space:nowrap; }
.link-more::after{ content:"\203A"; display:inline-block; margin-left:.28em; font-size:1.15em; line-height:0; transform:translateY(.02em); }
.link-row{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; }
.center .link-row{ justify-content:center; }

/* ---------- Pills and kickers ---------- */
.pill{ border-radius:980px; letter-spacing:0; font-weight:600; text-transform:none; font-size:.72rem; padding:3px 9px; }
.pill--pro{ background:none; box-shadow:none; padding:0; background-image:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-size:.8rem; }
.pill--free{ background:none; border:0; padding:0; color:var(--muted); font-size:.8rem; }
.pill--ok{ background:rgba(48,209,88,.14); border:0; color:#30d158; }
.pill--soon{ background:rgba(255,159,10,.16); border:0; color:#ff9f0a; }

/* ---------- Tiles (cards, panels, plans, download cards, steps) ---------- */
.card, .panel, .plan, .dl-card, .step{
  background:var(--tile); border:0; border-radius:var(--r-xl); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.card::before, .card::after, .panel::before, .plan::before, .dl-card::before{ display:none !important; }
.card{ padding:36px; }
.card--hover:hover{ transform:none; background:var(--tile); border:0; box-shadow:none; }
.card h3{ margin-bottom:10px; }
.card p{ font-size:17px; color:var(--muted); line-height:1.47; }
.card p b, .card p strong{ color:#f5f5f7; }
.card-icon, .card-icon--grad{
  width:auto; height:auto; background:none; border:0; box-shadow:none; border-radius:0;
  color:var(--brand); margin-bottom:22px; justify-content:start;
}
.card-icon svg, .card-icon--grad svg{ width:36px; height:36px; }
.card--hover:hover .card-icon{ transform:none; box-shadow:none; }
.panel{ padding:34px; }

/* ---------- Tick lists ---------- */
.ticks li{ color:var(--ink-2); font-size:17px; padding-left:28px; margin-bottom:12px; }
.ticks li::before, .ticks--muted li::before{
  width:16px; height:16px; top:.28em; border:0; border-radius:0;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232997ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  background-size:16px !important;
}
.ticks--muted li{ color:var(--ink-2); }
.ticks--muted li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* ---------- Page header (inner pages) ---------- */
.page-head{ padding:100px 0 30px; }
.page-head::before, .page-head::after{ display:none !important; }
.page-head h1{ margin-bottom:18px; }
.page-head p{ font-size:clamp(1.1rem, 1rem + .5vw, 1.55rem); line-height:1.3; color:var(--muted); max-width:34ch; margin-inline:auto; }
.page-head .wrap{ max-width:980px; }

/* Download counter (real counts from api/downloads.php, hidden until loaded) */
.page-head p.dl-total{
  display:inline-block; max-width:100%; margin-top:22px;
  padding:8px 16px; border-radius:980px; background:#1d1d1f; border:1px solid rgba(255,255,255,.08);
  font-size:.95rem; line-height:1.35; color:var(--muted); text-wrap:balance;
}
.page-head p.dl-total.hide{ display:none; }
.dl-total svg{ display:inline-block; vertical-align:-2px; margin-right:6px; }
@media (max-width:480px){ .page-head p.dl-total{ font-size:.86rem; padding:7px 14px; } }
.dl-total b{ color:#f5f5f7; font-weight:600; }
.dl-total-num{ white-space:nowrap; }
.dl-total svg, .dl-count svg{ color:#2997ff; flex:none; }
.dl-count{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:-6px 0 16px; font-size:.82rem; color:var(--muted);
}
.dl-count.hide, .dl-count-inline.hide{ display:none; }
.dl-count-inline{ white-space:nowrap; }

/* ---------- Stats: Apple's big-number blocks ---------- */
.stats{ gap:40px 24px; }
.stat{ background:none; border:0; padding:0; }
.stat .stat-kicker{ display:block; font-size:17px; color:var(--ink-2); font-weight:600; margin-bottom:6px; }
.stat b{
  font-size:clamp(3rem, 2rem + 4vw, 5.5rem); font-weight:600; letter-spacing:-.03em; line-height:1;
  background-image:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat > span:last-child{ display:block; margin-top:8px; font-size:17px; color:var(--muted); }

/* ---------- Pricing ---------- */
.plans{ gap:24px; max-width:980px; }
.plan{ padding:44px 36px; text-align:left; }
.plan--featured{ background:var(--tile); box-shadow:inset 0 0 0 2px var(--brand); transform:none !important; }
.plan--featured:hover{ transform:none !important; }
.plan-badge{ background:var(--apple-blue); box-shadow:none; letter-spacing:0; text-transform:none; font-weight:600; font-size:12px; padding:5px 12px; }
.plan-name{ font-size:28px; font-weight:600; letter-spacing:-.01em; color:#f5f5f7; }
.plan-tag{ font-size:17px; color:var(--muted); min-height:3.2em; }
.plan-price b{ font-size:48px; font-weight:600; letter-spacing:-.02em; }
.plan-price span{ font-size:17px; }
.plan-divider{ text-transform:none; letter-spacing:-.01em; font-size:14px; font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--hairline); }
.plan-foot{ border-top:1px solid var(--hairline); font-size:14px; }
.assure-item{ background:var(--tile); border:0; border-radius:var(--r-lg); }
.assure-item svg{ color:var(--brand); }
.currency-switch{ background:var(--tile); border:0; }
.currency-switch-btn{ background:transparent; border:1px solid var(--brand); color:var(--brand); }
.currency-switch-btn:hover{ background:var(--brand); color:#000; }
.price-grad, .hero h1 .grad{ background-image:var(--gradient); }

/* ---------- Compare table ---------- */
.table-scroll{ background:transparent; border:0; border-radius:0; box-shadow:none; }
table.cmp{ font-size:17px; }
table.cmp th, table.cmp td{ border-bottom:1px solid var(--hairline); padding:18px 12px; }
table.cmp thead th{ background:transparent; font-size:14px; letter-spacing:0; text-transform:none; color:#f5f5f7; font-weight:600; }
table.cmp thead th:last-child{ color:var(--brand); }
table.cmp .grp td{ background:transparent; color:#f5f5f7; font-size:21px; font-weight:600; letter-spacing:-.01em; text-transform:none; padding-top:44px; border-bottom-color:var(--hairline); }
table.cmp tbody tr:hover{ background:transparent; }
.yes{ color:var(--brand); }
.no{ color:var(--muted-2); }

/* ---------- FAQ: Apple accordion ---------- */
.faq details{ background:transparent !important; border:0; border-bottom:1px solid var(--hairline); border-radius:0; margin:0; }
.faq details:first-of-type{ border-top:1px solid var(--hairline); }
.faq details[open]{ border-color:var(--hairline); }
.faq summary{ font-size:clamp(1.05rem, 1rem + .35vw, 1.3rem); font-weight:600; padding:24px 50px 24px 0; color:#f5f5f7; }
.faq summary:hover{ background:transparent; color:#f5f5f7; }
.faq summary::after{
  content:"+"; border:0; transform:none; width:auto; height:auto; top:50%; right:4px;
  margin-top:-.62em; font-size:1.6rem; font-weight:300; color:var(--muted); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); margin-top:-.62em; border:0; color:#f5f5f7; }
.faq .faq-body{ padding:0 0 26px; font-size:17px; color:var(--muted); }
.faq-group{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:64px 0 18px; }

/* ---------- Notices ---------- */
.notice{ background:var(--tile); border:0; border-radius:var(--r-lg); font-size:15px; color:var(--ink-2); }
.notice svg{ color:var(--brand); }
.notice--warn{ background:#1d1d1f; box-shadow:inset 3px 0 0 #ff9f0a; }
.notice--warn svg{ color:#ff9f0a; }
.notice--ok{ background:#1d1d1f; box-shadow:inset 3px 0 0 #30d158; }
.notice--ok svg{ color:#30d158; }

/* ---------- Forms (checkout) ---------- */
.field label{ font-size:14px; font-weight:600; color:#f5f5f7; }
.field input, .field select, .field textarea{
  background:#000; border:1px solid var(--hairline); border-radius:12px; font-size:17px; padding:14px 16px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--apple-blue); background:#000; box-shadow:0 0 0 4px rgba(0,113,227,.3); transform:none;
}
.opt{ background:#000; border:1px solid var(--hairline); border-radius:18px; }
.opt:hover{ background:#000; border-color:#6e6e73; }
.opt.is-selected{ border:2px solid var(--apple-blue); background:#000; box-shadow:none; }
.opt.is-unavailable{ opacity:.45; cursor:not-allowed; }
.opt.is-unavailable:hover{ border-color:var(--apple-line, rgba(255,255,255,.14)); background:transparent; }
.summary-line, .summary-total, .trust{ border-color:var(--hairline); }
.panel h2{ font-size:24px; }

/* ---------- Steps ---------- */
.step{ padding:36px; }
.step::before{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0; display:block;
  font-size:48px; font-weight:600; line-height:1; letter-spacing:-.03em; margin-bottom:18px;
  background-image:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step p{ font-size:17px; }

/* ---------- Figures and screenshots ---------- */
.figure, .shot, .hero-shot, .bento-figure{ border:0; border-radius:var(--r-xl); box-shadow:none; background:#000; }
.hero-shot{ border-radius:18px 18px 0 0; }
.shot-bar{ background:#1d1d1f; border:0; }
.split{ gap:72px; }
.split h2{ font-size:clamp(1.9rem, 1.3rem + 2vw, 3rem); }
.split p{ font-size:clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height:1.42; }
.split-media:hover .shot{ transform:none; box-shadow:none; }

/* ---------- Download cards ---------- */
.dl-card{ padding:44px 36px; }
.dl-card:hover{ transform:none; box-shadow:none; }
.dl-card.is-detected{ background:var(--tile); box-shadow:inset 0 0 0 2px var(--brand); }
.dl-detected{ color:var(--brand); letter-spacing:0; text-transform:none; font-size:14px; }
.dl-specs{ border-top:1px solid var(--hairline); font-size:14px; }
.dl-which summary{ color:var(--brand); }

/* ---------- Changelog ---------- */
.releases::before{ background:var(--hairline); }
.release::before{ background:#000; border-color:var(--brand); box-shadow:none; }
.release--current::before{ background:var(--brand); }
.change-label{ text-transform:none; letter-spacing:0; font-size:12px; border:0 !important; }

/* ---------- Final call to action ---------- */
.cta-band{ background:var(--tile); border:0; box-shadow:none; border-radius:var(--r-xl); padding:88px 40px; }
.cta-band::before{ display:none !important; }
.cta-band p{ font-size:clamp(1.05rem, 1rem + .4vw, 1.35rem); color:var(--muted); }

/* ---------- Legal prose ---------- */
.prose{ max-width:692px; }
.prose p, .prose ul{ font-size:17px; color:var(--ink-2); }
.prose h2{ font-size:28px; margin-top:56px; }
.prose .updated{ border-color:var(--hairline); }

/* ---------- Footer ---------- */
.site-footer{ background:#161617; border-top:0; padding:40px 0 22px; font-size:12px; }
.site-footer .wrap{ max-width:1024px; }
.footer-grid{ gap:24px; padding-bottom:22px; border-bottom:1px solid var(--hairline); }
.footer-brand .brand{ font-size:1.05rem; }
.footer-brand .brand img{ width:28px; height:28px; border-radius:7px; }
.footer-brand p{ font-size:12px; line-height:1.5; color:var(--muted); }
.site-footer h3{ font-size:12px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:#e8e8ed; margin-bottom:10px; }
.site-footer li{ margin-bottom:8px; }
.site-footer a{ font-size:12px; color:var(--muted); }
.site-footer a:hover{ color:#e8e8ed; text-decoration:underline; }
.footer-bottom{ border-top:0; margin-top:16px; padding-top:0; font-size:12px; color:var(--muted-2); }

/* ---------- Motion: calmer, Apple-paced ---------- */
.js .section-head, .js .card, .js .plan, .js .dl-card, .js .step, .js .stat,
.js .split > div, .js .faq details, .js .panel, .js .cta-band, .js .table-scroll, .js .reveal{
  transform:translateY(40px); transition-duration:1s; transition-timing-function:var(--ease);
}
.js .split > div:first-child, .js .split > .split-media{ transform:translateY(40px); }
.js .faq details, .js .faq > h2{ transform:none; }
.scroll-progress{ display:none; }

/* ==========================================================================
   Landing page components
   ========================================================================== */

/* Hero */
.a-hero{ padding:88px 0 0; text-align:center; overflow:hidden; }
.a-hero .a-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; }
.a-hero .a-kicker img{ width:56px; height:56px; border-radius:14px; }
.a-hero .a-kicker span{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.9rem); font-weight:600; color:#f5f5f7; letter-spacing:-.015em; }
.a-hero h1{ font-size:clamp(2.5rem, 1.2rem + 4.5vw, 4.8rem); max-width:24ch; margin:0 auto 22px; line-height:1.16; }
.hero-title .hero-line{ display:block; }
.hero-title .hero-line-1{ white-space:nowrap; }
.hero-title .hero-line-3{ white-space:nowrap; }
.a-hero h1 .grad{ background-image:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.a-hero .a-sub{ font-size:clamp(1.15rem, 1rem + .7vw, 1.75rem); line-height:1.25; color:var(--muted); max-width:30ch; margin:0 auto 34px; }
.a-hero .a-cta{ display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:center; }
.a-hero .a-note{ font-size:14px; color:var(--muted); margin-top:22px; }
.a-hero .a-stage{ margin:72px auto 0; max-width:1120px; padding:0 22px; }
.a-hero .a-stage img{ width:100%; border-radius:22px 22px 0 0; display:block;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }

/* Highlights gallery */
.a-gallery-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; }
.a-gallery-head h2{ margin:0; }
.a-gallery{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(84%, 860px); gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(22px, calc((100vw - 1024px) / 2));
  padding:0 max(22px, calc((100vw - 1024px) / 2)) 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.a-gallery::-webkit-scrollbar{ display:none; }
.a-gallery{ cursor:grab; }
.a-gallery:active{ cursor:grabbing; }
.a-gallery img, .a-slide{ user-select:none; -webkit-user-drag:none; }
.a-slide{
  scroll-snap-align:start; background:var(--tile); border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column;
}
.a-slide-copy{ padding:40px 40px 26px; }
.a-slide-copy h3{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height:1.1; margin-bottom:10px; }
.a-slide-copy p{ color:var(--muted); font-size:17px; max-width:44ch; margin:0; }
.a-slide-copy p b{ color:#f5f5f7; }
.a-slide-media{ margin-top:auto; padding:34px 40px 0; }
.a-slide-media img{
  width:100%; display:block; border-radius:16px 16px 0 0;
  /* Cropped to one height so every slide matches, the way Apple's gallery does. */
  height:clamp(220px, 24vw, 360px); object-fit:cover; object-position:top left;
}
.a-dots{ display:flex; justify-content:center; gap:10px; margin-top:28px; align-items:center; }
.a-dots button{ width:8px; height:8px; border-radius:99px; border:0; padding:0; background:#6e6e73; cursor:pointer; transition:width .35s var(--ease), background .35s var(--ease); }
.a-dots button[aria-current="true"]{ width:36px; background:#f5f5f7; }
.a-arrows{ display:flex; gap:12px; }
.a-arrows button{
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; background:#333336; color:#f5f5f7;
  display:grid; place-items:center; transition:background .2s var(--ease), opacity .2s;
}
.a-arrows button:hover{ background:#424245; }
.a-arrows button[disabled]{ opacity:.35; cursor:default; }

/* Big statement */
.a-statement{ text-align:center; }
.a-statement h2{ font-size:clamp(2.4rem, 1.2rem + 5vw, 5.4rem); max-width:16ch; margin:0 auto 26px; }
.a-statement p{ font-size:clamp(1.1rem, 1rem + .6vw, 1.6rem); color:var(--muted); max-width:36ch; margin:0 auto; line-height:1.3; }
.a-statement p b{ color:#f5f5f7; font-weight:600; }

/* Feature band: centred copy over a full-width visual */
.a-feature{ text-align:center; }
.a-feature .a-copy{ max-width:760px; margin:0 auto 56px; }
.a-feature .a-copy p{ font-size:clamp(1.05rem, 1rem + .45vw, 1.35rem); color:var(--muted); line-height:1.35; }
.a-feature .a-copy p b{ color:#f5f5f7; font-weight:600; }
.a-feature .a-visual{ max-width:980px; margin:0 auto; }
.a-feature .a-visual img{ width:100%; border-radius:var(--r-xl); display:block; }

/* Tile grid */
.a-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.a-tile{ background:var(--tile); border-radius:var(--r-xl); padding:40px; display:flex; flex-direction:column; min-height:300px; }
.a-tile--wide{ grid-column:1 / -1; min-height:0; }
.a-tile .a-tile-icon{ color:var(--brand); margin-bottom:auto; padding-bottom:40px; }
.a-tile .a-tile-icon svg{ width:40px; height:40px; }
.a-tile h3{ font-size:clamp(1.4rem, 1.15rem + .8vw, 2rem); line-height:1.12; margin-bottom:10px; }
.a-tile p{ color:var(--muted); margin:0; font-size:17px; }
.a-tile p b{ color:#f5f5f7; }
.a-tile .link-more{ margin-top:18px; }

/* Plan compare */
.a-compare{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; max-width:880px; margin:0 auto; text-align:center; }
.a-compare > div{ padding:0 28px; }
.a-compare > div + div{ border-left:1px solid var(--hairline); }
.a-compare .a-plan-name{ font-size:32px; font-weight:600; color:#f5f5f7; letter-spacing:-.015em; }
.a-compare .a-plan-price{ font-size:21px; color:#f5f5f7; margin:6px 0 4px; }
.a-compare .a-plan-note{ font-size:14px; color:var(--muted); min-height:2.8em; }
.a-compare .a-plan-cta{ display:flex; flex-direction:column; gap:14px; align-items:center;
  margin:22px 0 34px; min-height:104px; }  /* keeps both columns' rows aligned */
.a-compare ul{ border-top:1px solid var(--hairline); }
.a-compare li{ padding:20px 0; border-bottom:1px solid var(--hairline); font-size:17px; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; gap:8px; }
.a-compare li svg{ width:30px; height:30px; color:var(--brand); }
.a-compare li.is-off{ color:var(--muted-2); }
.a-compare li.is-off svg{ color:var(--muted-2); }

/* Platforms */
.a-platforms{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.a-platform{ background:var(--tile); border-radius:var(--r-xl); padding:48px 40px; text-align:center; }
.a-platform svg{ width:52px; height:52px; margin:0 auto 22px; color:#f5f5f7; }
.a-platform h3{ font-size:28px; margin-bottom:8px; }
.a-platform p{ color:var(--muted); margin:0 0 20px; }

/* ---------- Responsive ---------- */

@media (max-width:760px){
  .section{ padding:72px 0; }
  .page-head{ padding:64px 0 16px; }
  .a-hero{ padding-top:56px; }
  .a-hero .a-stage{ margin-top:48px; }
  .a-gallery{ grid-auto-columns:88%; gap:14px; }
  .a-slide-copy{ padding:30px 26px 20px; }
  .a-slide-media{ padding:0 26px; }
  .a-arrows{ display:none; }
  .a-tiles, .a-platforms{ grid-template-columns:1fr; gap:14px; }
  .a-tile, .a-platform{ padding:32px 28px; min-height:0; }
  .a-compare{ grid-template-columns:1fr 1fr; }
  .a-compare > div{ padding:0 10px; }
  .a-compare .a-plan-name{ font-size:24px; }
  .a-compare li{ font-size:14px; }
  .card, .plan, .dl-card, .panel, .step{ padding:30px 24px; border-radius:24px; }
  .blog-featured.card{ padding:18px !important; }
  .blog-grid{ grid-template-columns:1fr !important; }
  .blog-featured{ grid-template-columns:1fr !important; }
  .article-wrap{ padding-inline:16px !important; }
  .article-head h1{ font-size:clamp(1.65rem, 1.25rem + 2vw, 2.3rem) !important; line-height:1.2 !important; }
  .cta-band{ padding:60px 22px; }
  .site-header{ height:calc(var(--nav-h) + env(safe-area-inset-top)); }
  .nav-cta{ margin-left:auto !important; }
  .nav-cta .btn--sm{
    font-size:13px !important;
    height:34px !important;
    min-height:0 !important;
    padding:0 14px !important;
    line-height:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
  }
  .footer-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:32px 24px !important;
  }
  .footer-brand{
    grid-column:1 / -1 !important;
  }
  .a-hero h1{
    font-size:clamp(1.5rem, 5.6vw, 2.2rem) !important;
    max-width:100% !important;
    margin:0 auto 18px !important;
    line-height:1.16 !important;
  }
  .hero-title .hero-line-1{
    white-space:nowrap !important;
  }
  .hero-title .hero-line-3{
    white-space:nowrap !important;
  }
  .tabbar{ background:rgba(22,22,23,.9); border-top:1px solid rgba(255,255,255,.08); box-shadow:none; }
  .tabbar a{ color:#86868b; font-weight:500; }
  .tabbar a.is-active{ color:#f5f5f7; }
  .tabbar a.is-active svg{ color:var(--brand); }
  .tabbar a.is-active::before{ background:var(--brand); }
}
@media (prefers-reduced-motion:reduce){
  .a-gallery{ scroll-behavior:auto; }
}

/* Gradient phrase inside a headline, and the gallery's positioning context. */
.grad-text{ background-image:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.a-gallery{ position:relative; }
.a-feature .link-row{ justify-content:center; }
.a-hero .a-kicker{ margin-top:0; }

/* Closing call-to-action: buttons sit centred under the centred copy on every page. */
.cta-band{ text-align:center; }
.cta-band .btn-row, .cta-band .a-cta{ justify-content:center; align-items:center; }
.cta-band h2, .cta-band p{ margin-left:auto; margin-right:auto; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn--sm svg{ width:13px; height:13px; }
.currency-switch-btn{ display:inline-flex; align-items:center; gap:6px; }

/* Footer credit */
.footer-powered{ color:var(--muted); }
.footer-powered a{ color:#e8e8ed; font-weight:600; }
.footer-powered a:hover{ color:#fff; }