/*
 * Flux AIO public marketing pages.
 * Color, radius, shadow and spacing come from /marketing/tokens.css (canonical app tokens).
 * Marketing-only type scale below (--mk-*) is public-only and documented in DESIGN_SYSTEM.md.
 * Neutral surfaces + one accent (primary). No gradients, no animation.
 */
:root{
  --mk-display-size:2.25rem; --mk-display-lh:2.5rem;   /* home H1, mobile */
  --mk-h1-size:1.875rem;     --mk-h1-lh:2.25rem;       /* inner H1, mobile */
  --mk-h2-size:1.375rem;     --mk-h2-lh:1.75rem;
  --mk-lead-size:1.0625rem;  --mk-lead-lh:1.625rem;
  --mk-body-size:0.9375rem;  --mk-body-lh:1.5rem;
  --mk-figure-size:2.5rem;   --mk-figure-lh:2.75rem;
  --mk-weight:600;
  --mk-tracking:-0.02em;
  --mk-measure:62ch;
  --mk-band-y:var(--space-12);
}
@media (min-width:768px){
  :root{
    --mk-display-size:3.5rem; --mk-display-lh:3.75rem;
    --mk-h1-size:2.75rem;     --mk-h1-lh:3rem;
    --mk-h2-size:1.75rem;     --mk-h2-lh:2.125rem;
    --mk-lead-size:1.1875rem; --mk-lead-lh:1.75rem;
    --mk-figure-size:3.5rem;  --mk-figure-lh:3.75rem;
    --mk-band-y:var(--space-16);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--app-font-sans);font-size:var(--mk-body-size);line-height:var(--mk-body-lh);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:hsl(var(--link));text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:var(--radius-control)}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
.m-wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--space-4)}
@media (min-width:768px){.m-wrap{padding:0 var(--space-8)}}
.m-skip{position:absolute;left:-9999px}
.m-skip:focus{left:var(--space-4);top:var(--space-2);z-index:10;background:hsl(var(--card));padding:var(--space-2) var(--space-3)}

/* ---------- Header ---------- */
.m-header{position:sticky;top:0;z-index:5;background:hsl(var(--background) / .96);border-bottom:var(--border-width) solid hsl(var(--border))}
.m-header .m-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-6);min-height:60px;padding-top:var(--space-2);padding-bottom:var(--space-2)}
.m-brand{display:inline-flex;align-items:center;gap:var(--space-2);color:hsl(var(--foreground));text-decoration:none;font-size:var(--text-section-size);font-weight:600;letter-spacing:-.01em}
.m-brand img{width:28px;height:28px}
.m-nav{order:3;flex:1 0 100%;display:flex;gap:var(--space-5);overflow-x:auto;padding:var(--space-1) 0;scrollbar-width:none}
.m-nav::-webkit-scrollbar{display:none}
.m-nav a{color:hsl(var(--muted-foreground));text-decoration:none;font-size:var(--text-body-size);font-weight:500;white-space:nowrap;padding:var(--space-1) 0;border-bottom:2px solid transparent}
.m-nav a:hover{color:hsl(var(--foreground))}
.m-nav a[aria-current=page]{color:hsl(var(--foreground));border-bottom-color:hsl(var(--foreground))}
.m-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}
@media (min-width:1024px){.m-nav{order:0;flex:1 1 auto;justify-content:center;padding:0}.m-actions{margin-left:0}}

/* ---------- Buttons ---------- */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-control);font-size:var(--text-body-size);font-weight:500;text-decoration:none;border:var(--border-width) solid hsl(var(--input));background:hsl(var(--card));color:hsl(var(--foreground));transition:background-color .15s,border-color .15s}
.m-btn:hover{background:hsl(var(--accent))}
.m-btn-primary{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.m-btn-primary:hover{background:hsl(var(--primary) / .9)}
.m-btn-lg{min-height:48px;padding:0 var(--space-6);font-size:var(--mk-body-size)}
.m-btn-sm{min-height:34px;padding:0 var(--space-3)}
.m-arrow::after{content:"\2192"}
.m-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.m-textlink{font-weight:500;text-decoration:none}
.m-textlink:hover{text-decoration:underline}

/* ---------- Breadcrumb ---------- */
.m-crumb{padding-top:var(--space-6);font-size:var(--text-label-size);line-height:var(--text-label-lh);color:hsl(var(--muted-foreground))}
.m-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.m-crumb li+li::before{content:"/";margin-right:var(--space-2);color:hsl(var(--input))}
.m-crumb a{color:hsl(var(--muted-foreground));text-decoration:none}
.m-crumb a:hover{color:hsl(var(--foreground))}

/* ---------- Type ---------- */
.m-eyebrow{display:block;font-size:var(--text-label-size);line-height:var(--text-label-lh);font-weight:500;color:hsl(var(--muted-foreground));margin:0 0 var(--space-3)}
.m-h2{font-size:var(--mk-h2-size);line-height:var(--mk-h2-lh);font-weight:var(--mk-weight);letter-spacing:var(--mk-tracking);margin:0 0 var(--space-3)}
.m-h3{font-size:var(--text-section-size);line-height:var(--text-section-lh);font-weight:600;margin:0 0 var(--space-2)}
.m-lead{font-size:var(--mk-lead-size);line-height:var(--mk-lead-lh);color:hsl(var(--muted-foreground));max-width:var(--mk-measure)}
.m-muted{color:hsl(var(--muted-foreground))}
.m-cap{font-size:var(--text-caption-size);line-height:var(--text-caption-lh);color:hsl(var(--muted-foreground))}
.m-prose{max-width:var(--mk-measure)}
.m-prose ul{padding-left:var(--space-5);margin:0 0 var(--space-4)}
.m-prose li+li{margin-top:var(--space-2)}

/* ---------- Hero ---------- */
.m-hero{padding:var(--space-8) 0 var(--mk-band-y)}
.m-hero h1{font-size:var(--mk-h1-size);line-height:var(--mk-h1-lh);font-weight:var(--mk-weight);letter-spacing:var(--mk-tracking);margin:0 0 var(--space-5);max-width:20ch}
.m-hero-home h1{font-size:var(--mk-display-size);line-height:var(--mk-display-lh);max-width:16ch}
.m-hero-grid{display:grid;gap:var(--space-10);align-items:center}
.m-hero-grid>*{min-width:0}
@media (min-width:960px){.m-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16)}}
.m-hero-points{list-style:none;padding:0;margin:var(--space-6) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-size:var(--text-body-size);color:hsl(var(--muted-foreground))}
.m-hero-points li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:hsl(var(--foreground));margin-right:var(--space-2);vertical-align:middle}

/* ---------- Bands / sections ---------- */
.m-band{padding:var(--mk-band-y) 0;border-top:var(--border-width) solid hsl(var(--border))}
.m-band-card{background:hsl(var(--card))}
.m-split{display:grid;gap:var(--space-6)}
.m-split>*{min-width:0}
@media (min-width:960px){.m-split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-16)}.m-split-head{position:sticky;top:96px;align-self:start}}
.m-split-head .m-lead{font-size:var(--mk-body-size);line-height:var(--mk-body-lh)}
.m-band-head{max-width:var(--mk-measure);margin-bottom:var(--space-8)}

/* ---------- Surfaces ---------- */
.m-panel{background:hsl(var(--card));border:var(--border-width) solid hsl(var(--card-border));border-radius:var(--radius-surface);box-shadow:var(--shadow-sm);padding:var(--space-6)}
.m-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr}
.m-grid>*{min-width:0}
@media (min-width:768px){.m-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.m-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.m-reset{list-style:none;padding:0;margin:0}

/* Numbered process: large tabular numerals over a top rule */
.m-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-8) var(--space-6);counter-reset:step}
@media (min-width:768px){.m-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}.m-steps-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-steps>li{counter-increment:step;border-top:2px solid hsl(var(--foreground));padding-top:var(--space-4);min-width:0}
.m-steps>li::before{content:counter(step,decimal-leading-zero);display:block;font-size:var(--text-label-size);line-height:var(--text-label-lh);font-weight:500;color:hsl(var(--muted-foreground));margin-bottom:var(--space-3)}
.m-steps p{color:hsl(var(--muted-foreground));margin:0}

/* Timeline (how-it-works): vertical rail */
.m-timeline{list-style:none;margin:0;padding:0;counter-reset:t}
.m-timeline>li{counter-increment:t;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-4);padding:var(--space-6) 0;border-top:var(--border-width) solid hsl(var(--border))}
.m-timeline>li:first-child{border-top:0;padding-top:0}
.m-timeline>li::before{content:counter(t,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-control);border:var(--border-width) solid hsl(var(--input));background:hsl(var(--card));font-weight:600;font-size:var(--text-body-size)}
.m-timeline p{color:hsl(var(--muted-foreground));margin:0;max-width:var(--mk-measure)}
.m-timeline strong{color:hsl(var(--foreground));font-weight:500}

/* Definition pair (drop types, billing modes) */
.m-def{border:var(--border-width) solid hsl(var(--card-border));border-radius:var(--radius-surface);background:hsl(var(--card));padding:var(--space-5)}
.m-def dt{font-weight:600;margin-bottom:var(--space-1)}
.m-def dd{margin:0;color:hsl(var(--muted-foreground))}

/* ---------- Fee receipt ---------- */
.m-receipt{background:hsl(var(--card));border:var(--border-width) solid hsl(var(--card-border));border-radius:var(--radius-surface);box-shadow:var(--shadow-md);overflow:hidden}
.m-receipt-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--border-width) solid hsl(var(--border));background:hsl(var(--muted))}
.m-receipt-head strong{font-size:var(--text-body-size);font-weight:600}
.m-receipt table{width:100%;border-collapse:collapse;font-size:var(--text-body-size)}
.m-receipt td{padding:var(--space-3) var(--space-5);border-top:var(--border-width) solid hsl(var(--border));vertical-align:top}
.m-receipt tr:first-child td{border-top:0}
.m-receipt td:last-child{text-align:right;white-space:nowrap;font-weight:500}
.m-receipt td .m-cap{display:block;margin-top:2px}
.m-receipt tr.m-fee td{border-top:2px solid hsl(var(--foreground))}
.m-receipt tr.m-fee td:last-child{color:hsl(var(--foreground));font-size:var(--text-stat-size);line-height:var(--text-stat-lh);font-weight:600}
.m-receipt tr.m-all td{background:hsl(var(--muted));font-weight:600}
.m-receipt-foot{padding:var(--space-3) var(--space-5);border-top:var(--border-width) solid hsl(var(--border))}

/* ---------- Figures (own setup stats) ---------- */
.m-ink{background:hsl(var(--foreground));color:hsl(var(--background))}
.m-ink .m-eyebrow,.m-ink .m-muted,.m-ink .m-cap{color:hsl(var(--background) / .68)}
.m-ink .m-btn{background:transparent;color:hsl(var(--background));border-color:hsl(var(--background) / .35)}
.m-ink .m-btn:hover{background:hsl(var(--background) / .1)}
.m-ink .m-btn-primary{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.m-figures{display:grid;gap:var(--space-8);margin-top:var(--space-8)}
@media (min-width:768px){.m-figures{grid-template-columns:repeat(3,minmax(0,1fr))}}
.m-figure{border-top:var(--border-width) solid hsl(var(--background) / .25);padding-top:var(--space-4)}
.m-figure-value{display:block;font-size:var(--mk-figure-size);line-height:var(--mk-figure-lh);font-weight:var(--mk-weight);letter-spacing:var(--mk-tracking)}

/* ---------- Retailers ---------- */
.m-retailers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:var(--border-width) solid hsl(var(--card-border));border-radius:var(--radius-surface);background:hsl(var(--card));overflow:hidden}
@media (min-width:768px){.m-retailers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.m-retailers li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;padding:var(--space-4);font-size:var(--mk-lead-size);line-height:var(--mk-lead-lh);font-weight:600;letter-spacing:-.01em;border-right:var(--border-width) solid hsl(var(--border));border-bottom:var(--border-width) solid hsl(var(--border));margin:0 -1px -1px 0}
.m-retailers li.m-logo-well{background:hsl(var(--art-well))}
.m-logo-well img{width:100%;max-width:160px;height:56px;object-fit:contain}
.m-notice{border:var(--border-width) solid hsl(var(--border));background:hsl(var(--muted));border-radius:var(--radius-control);padding:var(--space-3) var(--space-4);color:hsl(var(--muted-foreground))}

/* ---------- FAQ ---------- */
.m-faq{border-top:var(--border-width) solid hsl(var(--foreground))}
.m-faq details{border-bottom:var(--border-width) solid hsl(var(--border))}
.m-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) 0;font-size:var(--mk-body-size);line-height:var(--mk-body-lh);font-weight:500}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"+";flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:var(--border-width) solid hsl(var(--input));border-radius:var(--radius-control);color:hsl(var(--muted-foreground));font-weight:400}
.m-faq details[open] summary::after{content:"\2212"}
.m-faq summary:hover{color:hsl(var(--foreground))}
.m-faq details p{margin:0 0 var(--space-5);padding-right:var(--space-10);color:hsl(var(--muted-foreground));max-width:var(--mk-measure)}

/* ---------- Contact ---------- */
.m-contact-card{display:flex;flex-direction:column;gap:var(--space-4)}
.m-contact-email{font-size:var(--mk-h2-size);line-height:var(--mk-h2-lh);font-weight:var(--mk-weight);letter-spacing:var(--mk-tracking);color:hsl(var(--foreground));text-decoration:none;word-break:break-all}
.m-contact-email:hover{color:hsl(var(--link));text-decoration:underline}
.m-soon{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:var(--border-width) solid hsl(var(--border))}
.m-soon:first-child{border-top:0}
.m-tag{font-size:var(--text-label-size);line-height:var(--text-label-lh);font-weight:500;color:hsl(var(--muted-foreground));border:var(--border-width) solid hsl(var(--border));border-radius:999px;padding:2px var(--space-2);white-space:nowrap}

/* ---------- Footer ---------- */
.m-closing{padding:var(--mk-band-y) 0}
.m-closing-grid{display:grid;gap:var(--space-6);align-items:end}
@media (min-width:768px){.m-closing-grid{grid-template-columns:minmax(0,1fr) auto}}
.m-closing .m-h2{margin:0}
.m-closing .m-cta{margin-top:0}
.m-footer{border-top:var(--border-width) solid hsl(var(--border));background:hsl(var(--card));padding:var(--space-10) 0 var(--space-8)}
.m-footer-grid{display:grid;gap:var(--space-8)}
@media (min-width:768px){.m-footer-grid{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}}
.m-footer h2{font-size:var(--text-label-size);line-height:var(--text-label-lh);font-weight:500;color:hsl(var(--muted-foreground));margin:0 0 var(--space-3)}
.m-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.m-footer a{color:hsl(var(--foreground));text-decoration:none;font-size:var(--text-body-size)}
.m-footer a:hover{text-decoration:underline}
.m-footer-base{margin-top:var(--space-8);padding-top:var(--space-5);border-top:var(--border-width) solid hsl(var(--border));display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3)}
.m-footer .m-brand{margin-bottom:var(--space-3)}

.m-footer-legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.m-footer .m-footer-legal a{font-size:var(--text-caption-size);line-height:var(--text-caption-lh);color:hsl(var(--muted-foreground))}
.m-footer .m-footer-legal a:hover{color:hsl(var(--foreground))}

/* ---------- Legal pages ---------- */
.m-legal{display:grid;gap:var(--space-8);padding:var(--mk-band-y) 0;border-top:var(--border-width) solid hsl(var(--border))}
.m-legal>*{min-width:0}
@media (min-width:960px){.m-legal{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--space-16)}.m-legal-nav{position:sticky;top:96px;align-self:start}}
.m-legal-nav{border:var(--border-width) solid hsl(var(--card-border));border-radius:var(--radius-surface);background:hsl(var(--card));padding:var(--space-4) var(--space-5)}
.m-legal-nav>strong{display:block;font-size:var(--text-label-size);line-height:var(--text-label-lh);font-weight:500;color:hsl(var(--muted-foreground));margin-bottom:var(--space-3)}
.m-legal-nav ol,.m-legal-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.m-legal-nav a{color:hsl(var(--foreground));text-decoration:none;font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.m-legal-nav a:hover{color:hsl(var(--link));text-decoration:underline}
.m-legal-content{max-width:72ch}
.m-legal-section{padding:var(--space-8) 0;border-top:var(--border-width) solid hsl(var(--border));scroll-margin-top:96px}
.m-legal-section:first-child{border-top:0;padding-top:0}
.m-legal-section h2{font-size:var(--mk-h2-size);line-height:var(--mk-h2-lh);font-weight:var(--mk-weight);letter-spacing:var(--mk-tracking);margin:0 0 var(--space-4)}
.m-legal-section h3{font-size:var(--text-section-size);line-height:var(--text-section-lh);font-weight:600;margin:var(--space-6) 0 var(--space-2)}
.m-legal-section p,.m-legal-section li{color:hsl(var(--foreground))}
.m-legal-section ul,.m-legal-section ol{padding-left:var(--space-5);margin:0 0 var(--space-4)}
.m-legal-section li+li{margin-top:var(--space-2)}
.m-legal-table{overflow-x:auto;margin:0 0 var(--space-4);border:var(--border-width) solid hsl(var(--card-border));border-radius:var(--radius-surface);background:hsl(var(--card))}
.m-legal-table table,.m-legal-section table{width:100%;border-collapse:collapse;font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.m-legal-section th,.m-legal-section td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid hsl(var(--border))}
.m-legal-section thead th{border-top:0;background:hsl(var(--muted));font-size:var(--text-label-size);line-height:var(--text-label-lh);font-weight:500;color:hsl(var(--muted-foreground))}
.m-legal-meta{font-size:var(--text-caption-size);line-height:var(--text-caption-lh);color:hsl(var(--muted-foreground));margin-bottom:var(--space-6)}

/* ---------- Homepage entrance (only "/") ----------
 * CSS-only adaptation of the React Bits "Blur Text" treatment
 * (https://reactbits.dev/text-animations/blur-text, DavidHDev/react-bits,
 * MIT + Commons Clause; see REACT_BITS_LICENSE.md):
 * blur + opacity + small rise settling with ease-out, one shot, no loop.
 * Whole native H1 animated (no word splitting). Default styles are fully visible;
 * motion only runs when the user has not requested reduced motion.
 * Fill mode: none on the title, backwards on the delayed aside (never forwards).
 */
@media (prefers-reduced-motion:no-preference){
  @keyframes m-blur-in{from{opacity:.35;filter:blur(3px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
  @keyframes m-soft-in{from{opacity:.5;filter:blur(2px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}
  .m-hero-home h1.m-reveal-title{animation:m-blur-in 650ms cubic-bezier(.22,1,.36,1) 1 none}
  .m-hero-home .m-reveal-aside{animation:m-soft-in 450ms cubic-bezier(.22,1,.36,1) 150ms 1 backwards}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}