/* ───────────────────── Central — shared shell ─────────────────────
   Nav + Footer + tokens + buttons + brackets shared by all pages.
   Each page can override --bg / --fg or wrap content in .light-page / .dark-page.
   ─────────────────────────────────────────────────────────────────── */

:root{
  --ink:#1E1E1E; --ink-2:#242424; --ink-3:#3B3B3B; --ink-deep:#160400;
  --paper:#F8F3F1; --paper-2:#EFE8E5; --paper-3:#E2E2E2;
  --mint:#42FFBD; --mint-2:#2FE6A8;
  --coral:#FF5842; --coral-2:#FF3A22;
  --mute:#989898; --mute-2:#B9B9B9; --mute-3:#6F6F6F;
  --line:rgba(248,243,241,.17);
  --line-paper:#E2E2E2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4,h5,h6,p{margin:0}
.mono{font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.02em}
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}

/* Bracket label (figma signature) */
.bracket{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:14px;letter-spacing:.04em;color:var(--coral)}
.bracket::before{content:"[";opacity:.9}
.bracket::after{content:"]";opacity:.9}
.bracket.mint{color:var(--mint)}
.bracket-sm{font-size:11px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:4px;font-size:14px;font-weight:500;font-family:inherit;line-height:1;transition:background .15s,transform .1s,border-color .15s}
.btn .arr{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center}
.btn:active{transform:translateY(1px)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:var(--coral-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:var(--mint-2)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:#fff}
.btn-paper-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-paper)}
.btn-paper-ghost:hover{border-color:var(--ink)}

/* Hero CTA — matches the homepage pattern (URL input + Try button + demo link).
   Used on /features/*, /for/*, /industries/*, /channels/* heroes.
   Self-centers so it works in both centered (1-col) and 2-col hero layouts. */
.hero-cta-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;max-width:520px;margin-inline:auto}
.hero-cta-input{flex:1;min-width:220px;height:48px;padding:0 18px;border-radius:4px;border:0;background:#fff;color:var(--ink);font-family:'Geist Mono',ui-monospace,monospace;font-size:14.5px;letter-spacing:.02em;outline:none}
.hero-cta-input::placeholder{color:rgba(30,30,30,.45)}
.hero-cta-input:focus{box-shadow:0 0 0 2px var(--mint-2)}
.hero-cta-demo{display:block;max-width:520px;margin:14px auto 0;text-align:center;font-size:14px;color:var(--ink);text-decoration:underline;opacity:.78}
.hero-cta-demo:hover{opacity:1}
/* Dark hero variant for section pages with dark hero treatments. */
.dark-hero .hero-cta-demo,.int-hero.dark .hero-cta-demo{color:#fff}
/* /for/ pages use a 2-column hero (text + viz); the hero CTA should
   sit left-aligned within the text column rather than centered. */
.wo-hero .hero-cta-form,
.ag-hero .hero-cta-form{margin-inline:0;justify-content:flex-start}
.wo-hero .hero-cta-demo,
.ag-hero .hero-cta-demo{margin:14px 0 0;text-align:left}
@media (max-width:560px){
  .hero-cta-form{max-width:none}
  .hero-cta-input{width:100%}
  .hero-cta-form .btn{width:100%;justify-content:center}
}

/* Display headline highlights.
   Many marketing pages define their own hero H1 styles inline. These shared
   rules intentionally use !important so the black highlight never collides
   with the preceding or following line when a headline wraps. */
:where(.hero,[class*="-hero"],.static-hero,.cp-hero,.cmp-hero) h1{
  line-height:1.13!important;
}
:where(.hero,[class*="-hero"],.static-hero,.cp-hero,.cmp-hero) h1 > :is(em,.pad){
  display:inline-block!important;
  line-height:.98!important;
  padding:.02em .16em .1em!important;
  margin:.04em 0 .02em!important;
  vertical-align:baseline!important;
  -webkit-box-decoration-break:clone!important;
  box-decoration-break:clone!important;
}
@media (min-width:721px){
  :where(.hero,[class*="-hero"],.static-hero,.cp-hero,.cmp-hero) h1 > :is(em,.pad){
    white-space:nowrap!important;
  }
}
@media (max-width:720px){
  :where(.hero,[class*="-hero"],.static-hero,.cp-hero,.cmp-hero) h1 > :is(em,.pad){
    white-space:normal!important;
  }
}

/* ─────────── NAV ─────────── */
.nav{position:relative;z-index:30}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 40px;border-bottom:1px solid var(--line);box-shadow:0 10.83px 18.67px rgba(0,0,0,.02)}
.nav.light .nav-inner{background:var(--paper);border-bottom:1px solid var(--line-paper)}
.nav.dark  .nav-inner{background:var(--ink);  border-bottom:1px solid var(--line)}
.brand{font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:26px;letter-spacing:-.025em;line-height:1;text-decoration:none}
.brand .dot{color:var(--coral);background:transparent;width:auto;height:auto;border-radius:0;transition:none}
.nav.light .brand{color:var(--ink)}
.nav.dark  .brand{color:#fff}

.nav-mid{display:flex;gap:18px;align-items:center}
.nav-link{font-size:15px;padding:10px 4px;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.nav.light .nav-link{color:var(--ink)}
.nav.dark  .nav-link{color:#E5E5E5}
.nav-link.active,
.nav.light .nav-link[aria-expanded="true"],
.nav.dark .nav-link[aria-expanded="true"]{color:var(--coral)}
.nav-link:hover{color:var(--coral)}
.nav-link .caret{display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .2s,opacity .2s}
.nav-link[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(-2px);opacity:1}

.nav-right{display:flex;align-items:center;gap:8px}
.nav-right .login{font-size:15px;padding:9px 12px}
.nav.light .nav-right .login{color:var(--ink)}
.nav.dark  .nav-right .login{color:#fff}
.nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;padding:11px 16px;border-radius:4px;font-size:14px;font-weight:500;line-height:1}
.nav .btn-coral{background:var(--coral);color:#fff}
.nav .btn-coral:hover{background:var(--coral-2)}

/* Hamburger — shown only below the nav-mid breakpoint.
   Sized to match the Free trial button next to it. */
.nav-burger{display:none;height:auto;min-height:38px;padding:0 12px;align-items:center;justify-content:center;background:transparent;border-radius:4px;cursor:pointer;flex:0 0 auto;box-sizing:border-box}
.nav.light .nav-burger{color:var(--ink);border:1px solid var(--line-paper)}
.nav.dark  .nav-burger{color:#fff;border:1px solid rgba(255,255,255,.18)}
.nav-burger:hover{opacity:.9}
.nav-burger .ic{width:20px;height:20px}
.nav-burger .ic-close{display:none}
.nav-burger[aria-expanded="true"] .ic-open{display:none}
.nav-burger[aria-expanded="true"] .ic-close{display:block}

/* Mobile drawer */
/* Explicit `color:var(--ink)` so the drawer text stays dark even when the
   page's body sets `color:#fff` globally (e.g. the React homepage). The
   `.dark` variant overrides to white. The drawer lives INSIDE .nav so the
   variant selectors below use descendant form (not adjacent sibling). */
.mobile-drawer{position:fixed;inset:0 0 0 0;top:65px;z-index:35;background:var(--paper);color:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 20px 96px}
.nav.dark .mobile-drawer{background:var(--ink);color:#fff}
.mobile-drawer .md-group{border-bottom:1px solid var(--line-paper)}
.nav.dark .mobile-drawer .md-group{border-bottom-color:rgba(255,255,255,.08)}
.mobile-drawer summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:18px 4px;font-size:17px;font-weight:600;color:inherit;font-family:'Manrope',system-ui,sans-serif}
.mobile-drawer summary::-webkit-details-marker{display:none}
.mobile-drawer summary .caret{display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .2s,opacity .2s}
.mobile-drawer .md-group[open] summary .caret{transform:rotate(225deg) translateY(-1px);opacity:1;color:var(--coral)}
.mobile-drawer .md-list{display:flex;flex-direction:column;padding:0 4px 16px}
.mobile-drawer .md-list a{display:block;padding:11px 0;font-size:15px;color:var(--ink-3);line-height:1.35}
.nav.dark .mobile-drawer .md-list a{color:#B9B9B9}
.mobile-drawer .md-list a:hover{color:var(--coral)}
.mobile-drawer .md-flat{display:flex;align-items:center;padding:18px 4px;font-size:17px;font-weight:600;color:inherit;border-bottom:1px solid var(--line-paper)}
.nav.dark .mobile-drawer .md-flat{border-bottom-color:rgba(255,255,255,.08)}
.mobile-drawer .md-cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.mobile-drawer .md-cta .btn{width:100%;justify-content:center;padding:14px 16px;font-size:15px}
.mobile-drawer .md-login{display:inline-block;text-align:center;padding:12px;font-size:14px;color:inherit;opacity:.75}
body.shell-nav-locked{overflow:hidden}

/* ─────────── MEGA MENU ─────────── */
/* Always renders as dark panel anchored to nav bottom */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.4);display:none;z-index:40}
.mega.open{display:block}
.mega-inner{max-width:1440px;margin:0 auto;padding:34px 40px;display:grid;gap:34px}
.mega-feature .mega-inner{grid-template-columns:minmax(0,1fr) 320px;align-items:center}
.mega-resources .mega-inner{grid-template-columns:320px minmax(0,1fr);align-items:center}
.mega-kicker{margin-bottom:14px}
.mega-section-title{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2);margin:20px 0 8px}
.mega-section-title:first-child{margin-top:0}
.mega-grid{display:grid;gap:8px}
.mega-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-mini-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mega-mini{display:block;padding:9px 10px;border-radius:4px;background:rgba(255,255,255,.035);color:var(--mute-2);font-size:12.5px;line-height:1.25;transition:background .15s,color .15s}
.mega-mini:hover{background:rgba(255,255,255,.08);color:#fff}
.mega-visual{height:226px;border-radius:6px;background:#2a2a2a center/cover no-repeat;align-self:center}
.visual-products{background-image:url('/marketing-v2/assets/ribbed-2.jpg')}
.visual-solutions{background-image:url('/marketing-v2/assets/ribbed-1.jpg')}
.visual-industries{background-image:url('/marketing-v2/assets/ribbed-3.jpg')}
.visual-channels{background-image:url('/marketing-v2/assets/ribbed-4.jpg')}
.visual-integrations{background-image:url('/marketing-v2/assets/ribbed-1.jpg')}
.visual-compare{background-image:url('/marketing-v2/assets/ribbed-4.jpg');align-self:flex-start}
.visual-resources{background-image:url('/marketing-v2/assets/ribbed-3.jpg')}

/* Mega — Compare */
.mega-compare .mega-inner{grid-template-columns:repeat(3,minmax(0,1fr)) 300px}
.mega-compare .cmp-col{padding:12px 10px;display:flex;gap:16px;align-items:flex-start}
.mega-compare .cmp-col .arrow{flex-shrink:0;color:var(--mint);margin-top:2px;font-weight:700;line-height:1}
.mega-compare .cmp-col h6{font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.15;color:#fff;margin:0 0 14px;letter-spacing:-.005em}
.mega-compare .cmp-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.mega-compare .cmp-col li{font-size:14px;color:var(--mute-2);cursor:pointer;border-radius:4px;transition:background .15s,color .15s}
.mega-compare .cmp-col li a{display:block;padding:7px 9px;color:inherit;border-radius:4px}
.mega-compare .cmp-col li:hover{background:rgba(255,255,255,.04);color:#fff}
.mega-compare .cmp-col li.active{color:#fff}

/* role/resource card (shared) */
.mega-card{display:flex;gap:14px;align-items:flex-start;padding:13px 14px;border-radius:4px;cursor:pointer;transition:background .15s}
.mega-card.primary{background:rgba(255,255,255,.035);min-height:118px}
.mega-card:hover{background:rgba(255,255,255,.05)}
.mega-card .arrow{flex:0 0 auto;color:var(--mint);font-weight:700;margin-top:3px}
.mega-card .mc-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:5px;letter-spacing:-.005em}
.mega-card .mc-sub{font-size:13px;color:var(--mute-2);line-height:1.4}

/* ─────────── PRE-FOOTER CTA ─────────── */
.pre-footer-cta{position:relative;background:url('/marketing-v2/assets/cta-bg.jpg') center/cover no-repeat var(--ink-deep);padding:54px 40px 60px;text-align:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06)}
.pre-footer-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,4,0,0.92) 0%,rgba(22,4,0,0.65) 50%,rgba(22,4,0,0.55) 100%);pointer-events:none}
.pre-footer-cta > *{position:relative;z-index:2}
.pre-cta-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.pre-cta-inner h2{font-family:'Manrope',system-ui,sans-serif;font-size:28px;line-height:1.18;font-weight:700;color:#F8F3F1;margin:0 0 18px;letter-spacing:-0.012em;text-wrap:balance}
.pre-cta-inner h2 em{font-style:normal;color:#42FFBD}
.pre-cta-box{max-width:580px;margin:0 auto;padding:18px 22px;border:1px solid rgba(248,243,241,0.14);border-radius:6px;background:rgba(248,243,241,0.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pre-cta-box p{font-size:13.5px;line-height:1.5;color:rgba(248,243,241,0.85);margin:0 0 14px}
.pre-cta-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.pre-cta-form input{flex:1;min-width:200px;max-width:280px;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:4px;padding:9px 12px;font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:#1E1E1E;outline:none}
.pre-cta-form input::placeholder{color:#989898;letter-spacing:.01em}
.pre-cta-form .btn{background:#42FFBD;color:#0E0907;border:none;border-radius:4px;padding:0 16px;height:38px;font-family:'Manrope',system-ui,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:-0.005em;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .15s,transform .15s}
.pre-cta-form .btn:hover{background:#5cffc7;transform:translateY(-1px)}
.pre-cta-alt{display:inline-block;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:rgba(248,243,241,0.7);text-decoration:underline;text-underline-offset:3px;letter-spacing:.02em}
.pre-cta-alt:hover{color:#fff}
.pre-cta-bottom{max-width:620px;margin:22px auto 0;font-size:13px;line-height:1.55;color:rgba(248,243,241,0.7);font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.02em}
@media (max-width:760px){
  .pre-footer-cta{padding:40px 20px 44px}
  .pre-cta-inner h2{font-size:24px}
  .pre-cta-form{flex-direction:column}
  .pre-cta-form input,.pre-cta-form .btn{width:100%;max-width:none}
}

/* ─────────── FOOTER ─────────── */
footer{position:relative;background:var(--ink-deep);color:#fff;overflow:hidden}
.footer-inner{position:relative;z-index:2;padding:56px 40px 28px;display:grid;grid-template-columns:minmax(260px,390px) minmax(0,1fr);gap:56px;max-width:1440px;margin:0 auto}
.footer-brand .brand{color:#fff;margin-bottom:22px}
.footer-brand .brand .dot{color:var(--coral);background:transparent;width:auto;height:auto;border-radius:0}
.footer-brand p{font-size:14px;line-height:19px;color:#fff;max-width:406px;font-weight:500}
.footer-addr{margin-top:20px;font-family:'Geist Mono',ui-monospace,monospace;font-style:normal;font-size:12px;line-height:1.65;color:#989898;letter-spacing:.02em}
.footer-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 28px}
.footer-cols h6{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.footer-cols a{display:block;font-size:14px;color:#B9B9B9;margin-bottom:10px;letter-spacing:-.01em;line-height:1.3;transition:color .15s}
.footer-cols a:hover{color:#fff}
.footer-social{display:flex;gap:16px;align-items:center;margin-top:0}
.footer-social a{margin-bottom:0;color:#B9B9B9}
.footer-social a:hover{color:#fff}
/* The mobile-only standalone copy sits between footer-cols and
   footer-bottom; hidden on desktop where the in-Connect copy is shown. */
.footer-social-mobile{display:none}
.footer-bottom{position:relative;z-index:2;padding:24px 40px 28px;font-size:11px;color:#989898;letter-spacing:-.01em;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.footer-bottom .copyright{justify-self:start}
.footer-bottom .built-in{justify-self:center;display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;color:#B9B9B9}
.footer-bottom .built-in .swiss-flag{display:inline-block;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.footer-bg{position:absolute;left:50%;bottom:-60px;transform:translateX(-50%);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:520px;color:#fff;opacity:.04;letter-spacing:-.065em;line-height:.8;pointer-events:none;user-select:none;white-space:nowrap}

@media (max-width:1260px){
  .nav-mid{gap:12px}
  .nav-link{font-size:14px}
  .nav-right .login{display:none}
  .mega-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-feature .mega-inner,
  .mega-resources .mega-inner{grid-template-columns:minmax(0,1fr) 260px}
  .mega-compare .mega-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-compare .mega-visual{display:none}
  .footer-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:1060px){
  .nav-mid{display:none}
  .mega{display:none!important}
  .nav-burger{display:inline-flex}
  .nav-right .login{display:none}
  .footer-inner{grid-template-columns:1fr;gap:34px}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .nav-inner{padding:12px 20px}
  .nav-right .btn{padding:10px 12px;font-size:13px}
  .nav-right{gap:6px}
  .brand{font-size:22px}
  .footer-inner{padding:42px 20px 22px}
  /* Footer column groups — switch from grid to CSS multi-column so
     menu groups pack naturally without leaving a gap when one is
     shorter than its row neighbour (e.g. Channels vs Industries). */
  .footer-cols{display:block;grid-template-columns:none;column-count:2;column-gap:20px}
  .footer-cols > div{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:18px;display:block}
  .footer-cols a{margin-bottom:6px;line-height:1.45}
  .footer-cols h6{margin-bottom:10px}
  /* Move social icons out of the "Connect" column on mobile and show
     them as a centered row above the copyright text. */
  .footer-cols .footer-social{display:none}
  .footer-social-mobile{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    padding:18px 20px 0;
    max-width:1440px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .footer-social-mobile a{color:#B9B9B9}
  .footer-social-mobile a:hover{color:#fff}
  .footer-bottom{padding:22px 20px 28px;grid-template-columns:1fr;text-align:center;gap:10px}
  .footer-bottom .copyright,.footer-bottom .built-in{justify-self:center}
  .footer-bg{font-size:260px;bottom:-28px}
}

@media (min-width:1061px){
  .mobile-drawer{display:none!important}
}

/* ─────────── REUSABLE MOBILE CAROUSEL UTILITY ───────────
   Add `mkt-mobile-carousel` to any grid/flex parent that should
   become a horizontal scroll-snap slider on phones (<=720px).
   Each direct child is treated as a slide (~92% viewport width).
   Children with [data-carousel-skip] keep their natural width
   and don't snap — use for inline dividers/arrows. Add
   [data-carousel-hide-mobile] to hide a child on mobile entirely.
   --------------------------------------------------------- */
@media (max-width:720px){
  .mkt-mobile-carousel{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    overflow-x:auto!important;
    /* No scroll-snap. Both `mandatory` and `proximity` interfere
       with programmatic scrolling (mandatory cancels smooth scrolls;
       proximity snaps mid-frame). Pages drive slide-to-slide motion
       themselves; user-swipe just stops where the finger lifts.
       Scroll-behavior is set per-write in JS, not here, so the
       motion stays animated when the tab is visible and instant
       when it isn't (avoids a stalled smooth-scroll in hidden tabs). */
    scroll-snap-type:none;
    scroll-padding-inline:18px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding-inline:18px;
    padding-bottom:10px;
    min-height:0!important;
    /* Soft edge hint so users see there's more content */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .mkt-mobile-carousel::-webkit-scrollbar{display:none}
  .mkt-mobile-carousel > *{
    flex:0 0 calc(100% - 36px)!important;
    min-width:0!important;
  }
  .mkt-mobile-carousel > [data-carousel-skip]{
    flex:0 0 auto!important;
  }
  .mkt-mobile-carousel > [data-carousel-hide-mobile]{display:none!important}
}

/* helpers */
.ink-bg{background:var(--ink)}
.paper-bg{background:var(--paper)}
.dark-text{color:var(--ink)}
.light-text{color:#fff}