.nav-download {
  width: 120px;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

    /* HERO PHONE — real Jelli screen composited over the atmospheric background. */
    .hero-phone-image {
      display: block;
      width: 100%;
      max-width: 330px;
      height: auto;
      object-fit: contain;
      margin-inline: auto;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 24px 40px rgba(0,0,0,.25));
    }

    /* Original colors and background gradients extracted from Ben's Meet Jelli Artifact. */
    :root {
      --night:#080024; --card:#12102A; --raised:#1A1538; --line:#2B2453;
      --text:#F2EEF7; --muted:#A29AA6; --dim:#7C7382;
      --yellow:#F4D63D; --button:#FFE66C; --on-yellow:#180538;
      --grape:#8440BD; --grape-light:#AA72E0;
      --glass-alpha:.075; --glass-blur:18px;
      --display:'Outfit',sans-serif; --body:'Onest','Outfit',sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--text);background:var(--night);font:400 16px/1.55 var(--body);min-height:100vh;
      background-image:radial-gradient(60rem 24rem at 15% -6rem,rgba(220,90,231,.22),transparent 70%),radial-gradient(52rem 22rem at 92% -8rem,rgba(132,64,189,.32),transparent 70%);
      background-repeat:no-repeat;}
    a{color:inherit}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{max-width:1200px;margin:auto;padding:0 28px}
    .site-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1)}
    .logo{font:700 31px/1 var(--display);letter-spacing:-.05em}
    .logo span{color:var(--yellow)}
    .nav-links{display:flex;gap:28px;align-items:center;font:500 13px var(--display);color:#DAD1E5}
    .nav-links a{text-decoration:none}
    .nav-links a:hover{color:var(--button)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--button);color:var(--on-yellow);font:600 14px var(--display);padding:13px 21px;border-radius:10px;text-decoration:none;transition:transform .2s,box-shadow .2s}
    .btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(244,214,61,.16)}
    .btn.outline{background:transparent;border:1.5px solid var(--button);color:var(--text)}
    .btn:focus-visible,.choice:focus-visible{outline:2px solid white;outline-offset:4px}
    .eyebrow{color:var(--grape-light);font:600 12px var(--display);letter-spacing:.16em;text-transform:uppercase}
    h1,h2,h3,p{margin:0}
    h1,h2,h3{font-family:var(--display);text-wrap:balance}
    h1 {
  font-size: clamp(40px, 3.8vw, 56px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.0125em;
}
    h1 em{color:var(--button);font-style:normal}
    h2{font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.0125em}
    h3{font-size:20px;font-weight:500}
    .hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:45px;padding:82px 0 92px}
    .hero-copy{display:grid;gap:24px;align-content:center}
    .lead{color:#D7CEE3;font-size:17px;max-width:58ch}
    .actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:14px}
    .label{color:#B2A5C4;font-size:12px}
    /* HERO COPY MOTION — gentle stagger, no layout movement. */
    .hero-copy > .eyebrow,
    .hero-copy > h1,
    .hero-copy > .lead,
    .hero-copy > .actions,
    .hero-copy > .label {
      opacity:0;
      animation:hero-copy-reveal 700ms cubic-bezier(.22,1,.36,1) both;
    }
    .hero-copy > .eyebrow { animation-delay:100ms; }
    .hero-copy > h1      { animation-delay:230ms; }
    .hero-copy > .lead   { animation-delay:510ms; }
    .hero-copy > .actions{ animation-delay:860ms; }
    .hero-copy > .label  { animation-delay:1010ms; }
    @keyframes hero-copy-reveal {
      from { opacity:0; transform:translateY(14px); }
      to   { opacity:1; transform:translateY(0); }
    }
    /* Buttons fade in without moving */
.hero-copy > .actions {
  animation-name: hero-buttons-fade;
  animation-duration: 1000ms;
}

@keyframes hero-buttons-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

    .scene{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center;isolation:isolate}
    .scene:before{content:'';position:absolute;width:100%;height:80%;border-radius:50%;background:radial-gradient(ellipse,rgba(153,67,222,.30),transparent 70%);filter:blur(22px);z-index:-1}
    /* New translucent variant, inspired by the Artifact but NOT present in its original CSS. */
    .glass{background:rgba(255,255,255,var(--glass-alpha));border:1px solid rgba(255,255,255,.19);box-shadow:0 24px 60px rgba(3,0,18,.36),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:24px}

    /* HERO — JJ notification over the phone. Uses the shared glass treatment. */
    .scene-chip { position:absolute; z-index:3; font:500 13px var(--display); }
    .scene-chip.notification {
      top:20%; right:-65px; left:auto; bottom:auto;
      transform-origin:85% 80%;
    }
    @media(min-width:901px) and (max-width:1200px){.scene-chip.notification{right:0}}
    .jj-notification {
      display:flex;
      align-items:center;
      gap:12px;
      width:285px;
      max-width:none;
      padding:15px 17px;
      border-radius:19px;
      background:rgba(61,37,91,.69);
      border:1px solid rgba(211,177,242,.36);
      box-shadow:0 18px 45px rgba(4,0,20,.42), inset 0 1px 0 rgba(255,255,255,.13);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
      opacity:0;
      animation:jj-notification-pop 650ms cubic-bezier(.2,.9,.28,1.18) 1.5s both;
    }
    .jj-notification-avatar {
      display:block;
      width:64px;
      height:64px;
      flex:0 0 64px;
      object-fit:contain;
      object-position:center;
    }
    .jj-notification-copy { min-width:0; flex:1; }
    .jj-notification-name {
      display:block;
      color:#D3A4FA;
      font:700 11px/1.2 var(--display);
      letter-spacing:.09em;
      margin-bottom:5px;
    }
    .jj-notification-copy p {
      color:var(--text);
      font:500 13px/1.4 var(--body);
      margin:0;
    }
    .section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:22px}
    .section-heading p{max-width:410px;color:var(--muted);font-size:14px}
    .surfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
    .surface{padding:25px;min-height:235px;display:grid;align-content:start;gap:17px}
    .surface p{color:#C8BED5;font-size:14px}
    .solid{border-radius:20px;background:var(--card);border:1px solid var(--line)}
    .raised{border-radius:20px;background:linear-gradient(180deg,var(--raised),var(--card));border:1px solid var(--line)}
    .icon-circle{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(170,114,224,.15);border:1px solid rgba(170,114,224,.33);font-size:22px}
    .lab{margin:80px 0 65px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px;padding:25px 30px;border:1px solid var(--line);border-radius:24px;background:rgba(18,16,42,.76)}
    .lab p{color:var(--muted);font-size:14px;margin-top:5px}
    .controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    .control{display:grid;gap:5px;color:#E1D5EF;font-size:12px}
    .control input{accent-color:var(--button);width:135px}
    .palette{display:flex;flex-wrap:wrap;gap:10px;padding:10px 0 50px}
    .swatch{width:100px;font-size:11px;color:#C3B7D0}
    .swatch-color{width:100%;height:50px;border-radius:10px;border:1px solid rgba(255,255,255,.2);margin-bottom:7px}
    .disclaimer{font-size:12px;color:#9F93B0;border-top:1px solid rgba(255,255,255,.12);padding:26px 0 40px}
    @media(max-width:900px){.hero{grid-template-columns:1fr;padding:55px 0}.scene{min-height:470px}.scene-chip.notification{right:1%}.surfaces{grid-template-columns:1fr 1fr}.lab{grid-template-columns:1fr}}
    @media(max-width:580px){.container{padding:0 18px}.nav-links a:not(.btn){display:none}.hero{gap:10px}.scene{min-height:450px}.scene-chip.notification{top:11%;right:-2px}.jj-notification{width:min(255px,78vw);padding:11px 12px;gap:9px}.jj-notification-avatar{width:49px;height:49px;flex-basis:49px}.jj-notification-copy p{font-size:11px}.jj-notification-name{font-size:10px}.hero-phone-image{max-width:min(330px,78vw)}.surfaces{grid-template-columns:1fr}.section-heading{display:block}.section-heading p{margin-top:12px}.lab{margin-top:52px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}.jj-notification{animation:none;opacity:1}.hero-copy > .eyebrow,.hero-copy > h1,.hero-copy > .lead,.hero-copy > .actions,.hero-copy > .label{animation:none;opacity:1;transform:none}}

    /* ---------------------------------------------------------------
       HEADER / NAV V2 — working prototype, designed before the hero.
       Built in vanilla CSS/JS so Josh can lift into Astro components.
       --------------------------------------------------------------- */
    [hidden] { display: none !important; }
    /* Unboxed header: elements sit directly on Jelli's purple atmosphere. */
    .site-header { position: relative; z-index: 100; padding-top: 12px; }
    .site-nav {
      position: relative; min-height: 99px;
      display: grid; grid-template-columns: auto minmax(0,1fr) auto;
      align-items: center; gap: clamp(16px,2.5vw,35px); padding: 0;
      background: none; border: none; border-radius: 0; box-shadow: none;
      backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    /* Actual Jelli SVG, sized to match the logo on the previous live website. */
    .site-nav .logo { width: 120px; min-width: 120px; height: auto; text-decoration: none;
      display: inline-block; font-size: 0; line-height: 0; }
    .site-nav .logo svg { width: 100%; height: auto; display: block; }
    .nav-links { display:flex; align-items:center; justify-content:flex-end; gap: clamp(6px,1.1vw,17px);
      font: 500 14px/1.3 var(--display); color: #E1D8EF; }
    .nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 12px 13px; border: 0; border-radius: 10px;
      background: transparent; color: inherit; text-decoration: none; white-space: nowrap; font: inherit; cursor: pointer;
      transition: background .16s,color .16s; }
    .nav-links a:hover, .nav-link:hover, .nav-trigger[aria-expanded="true"] { color: white; background: rgba(255,255,255,.075); }
    .site-nav a:focus-visible, .site-nav button:focus-visible, .download-popover a:focus-visible,
    .features-popover a:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; }
    .nav-item { position: relative; }
    .chevron { width: 15px; height: 15px; transition: transform .2s; }
    .nav-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
    .nav-actions { display: flex; align-items:center; gap: 10px; margin-left: clamp(8px,1.4vw,24px); }
    .nav-download { padding: 13px 22px; white-space:nowrap; font-size: 14px; min-width: 126px; }
    .features-popover { position:absolute; z-index: 110; top: calc(100% + 15px); left: 50%; transform: translateX(-50%);
      width: min(635px,calc(100vw - 50px)); padding: 19px; border-radius: 22px;
      background: rgba(23,13,46,.97); border:1px solid rgba(201,170,230,.26);
      box-shadow: 0 30px 80px rgba(2,0,13,.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
    .features-popover::before { content:'';position:absolute;inset:-9px 0 auto 0;height:9px; }
    .features-heading { display:flex;align-items:baseline;justify-content:space-between;gap:12px;
      padding: 1px 4px 16px; color:#BFB2D0; font:400 12px/1.4 var(--body); }
    .features-heading .eyebrow { font-size: 10px; }
    .feature-categories { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
    .feature-nav-card { display:flex;gap:12px;align-items:flex-start;padding:14px 13px;
      border-radius:14px;border:1px solid rgba(255,255,255,.055);
      background:rgba(255,255,255,.035);text-decoration:none;transition:background .16s,border-color .16s; }
    .feature-nav-card:hover { background:rgba(255,255,255,.08);border-color:rgba(224,205,241,.25); }
    .feature-nav-card strong { display:block;font:600 14px/1.4 var(--display);color:var(--text); }
    .feature-nav-card small { display:block;font:400 12px/1.45 var(--body);color:#BEB3D0;margin-top:4px; }
    .feature-symbol { display:grid;place-items:center;flex:none;width:37px;height:37px;
      border-radius:12px;font:600 21px/1 var(--display); }
    /* Authentic Jelli bubbles: ONE vector master, recolored by the parent card. */
    .svg-definitions { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
    .feature-bubbles { display:block; width:19px; height:27px; color:inherit; fill:currentColor; }
    .jars-symbol {background:rgba(160,112,229,.18);color:#D4ACFB;}
    .jj-symbol {background:rgba(244,214,61,.15);color:#F4D63D;}
    .tools-symbol {background:rgba(113,216,207,.14);color:#87E3D9;}
    .rewards-symbol {background:rgba(255,126,171,.14);color:#FDA6C6;}
    .features-all {display:flex;justify-content:space-between;margin-top:13px;padding:12px 6px 2px;
      color:var(--button);text-decoration:none;font:600 13px var(--display);}
    .features-all:hover { color:white; }
    .download-popover { position: absolute;top:calc(100% + 8px);right:0;z-index:115;
      width:min(350px,calc(100vw - 36px));padding:21px;background:rgba(23,13,46,.98);
      border:1px solid rgba(208,183,236,.24);border-radius:20px;
      box-shadow:0 24px 70px rgba(0,0,0,.5);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); }
    .download-popover>strong{font:600 19px var(--display)}
    .download-popover>p{font:400 13px/1.5 var(--body);color:#BDB0CE;margin:6px 0 18px}
    .store-option{display:flex;align-items:center;gap:11px;padding:12px 9px;margin-top:8px;
      background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
      border-radius:13px;text-decoration:none;font:600 14px/1.25 var(--display);}
    .store-option:hover{background:rgba(255,255,255,.115)}
    .store-option>span:nth-child(2){flex:1}
    .store-option small{display:block;color:#BFB2D3;font:400 11px/1.4 var(--body);margin-top:5px}
    .store-icon{display:grid;place-items:center;background:rgba(255,255,255,.12);border-radius:10px;width:37px;height:37px;font-size:20px}
    .menu-toggle{display:none;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid rgba(255,255,255,.16);
      border-radius:12px;background:rgba(255,255,255,.06);color:var(--text)}
    .menu-toggle svg{width:23px;height:23px}
    .prototype-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:150;
      max-width:calc(100vw - 36px);padding:13px 19px;border-radius:13px;
      background:#FFE66C;color:#180538;box-shadow:0 12px 44px rgba(0,0,0,.4);
      font:600 13px/1.4 var(--display);text-align:center}
    @media(max-width:1040px){
      .site-nav{gap:12px}
      .site-nav .logo{width:112px;min-width:112px}
      .nav-links{gap:0;font-size:13px}
      .nav-link{padding:11px 9px}
      .nav-actions{margin-left:6px}
    }
    @media(max-width:800px){
      .site-header{padding-top:8px}
      .site-nav{min-height:80px;padding:0;grid-template-columns:1fr auto;gap:12px}
      .site-nav .logo{width:105px;min-width:105px}
      .nav-actions{gap:8px}
      .nav-download{min-width:auto;padding:12px 16px;font-size:13px}
      .menu-toggle{display:inline-flex}
      .nav-links{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
        flex-direction:column;align-items:stretch;gap:2px;padding:12px;
        background:rgba(21,12,43,.985);border:1px solid rgba(210,178,239,.2);border-radius:19px;
        box-shadow:0 26px 65px rgba(0,0,0,.52);font-size:16px;
        backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
      .nav-links.is-open{display:flex}
      .nav-links a:not(.btn){display:flex}
      .nav-link{width:100%;justify-content:space-between;padding:14px;border-radius:11px}
      .features-popover{position:static;transform:none;width:100%;padding:8px 7px 12px;margin-top:2px;
        background:rgba(255,255,255,.03);box-shadow:none;border-radius:13px}
      .features-heading{display:none}
      .feature-categories{grid-template-columns:1fr;gap:5px}
      .feature-nav-card{padding:10px;border:none}
      .features-all{padding:12px 9px 2px}
    }
    @media(max-width:420px){.nav-download{padding:11px 13px}.site-nav .logo{width:97px;min-width:97px}}
    @media(prefers-reduced-motion:reduce){.nav-link,.feature-nav-card,.chevron{transition:none}}

    /* ===============================================================
       TIER B V3: AUTHENTIC JELLIJARS / ONE BALANCE, FOUR PURPOSES
       App-faithful full-width liquid, authentic Figma metallic lid + bubbles.
       Fills animate via SVG clip and CSS; one shared sprite for all four.
       Tuning controls: --jars-fill-duration and --jars-stagger.
       =============================================================== */
    .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
    .jars-story{position:relative;isolation:isolate;padding:96px 0 111px;border-top:1px solid rgba(196,153,238,.13)}
    .jars-story::before{content:"";position:absolute;inset:0 -5vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 57% 42% at 52% 57%,rgba(118,50,194,.17),transparent 80%)}
    .jars-story-intro{max-width:880px;margin:0 auto 49px;text-align:center}
    .jars-story-intro .eyebrow{display:block;margin-bottom:19px}
    .jars-story h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .jars-story h2 em{color:var(--button);font-style:normal}
    .jars-story-deck{font:400 17px/1.55 var(--body);color:#E0D7EA;max-width:665px;margin:23px auto 0}
    .jars-story-deck strong{color:#FFF;font-weight:600}
    .jars-demo{
      --jars-fill-duration:1700ms;
      --jars-stagger:175ms;
      position:relative;isolation:isolate;overflow:hidden;
       border-radius:24px;border:1px solid rgba(211,177,242,.36);
       background:linear-gradient(137deg,rgba(46,27,74,.82) 0%,rgba(34,18,59,.86) 57%,rgba(22,12,46,.92) 100%);
       box-shadow:0 18px 45px rgba(4,0,20,.42),inset 0 1px 0 rgba(255,255,255,.13);
       backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
      padding:30px clamp(18px,3.3vw,44px) 29px;
    }
    .jars-demo::before{content:"";position:absolute;width:610px;height:610px;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(125,66,176,.065),transparent 67%);pointer-events:none;z-index:-1}
    /* Single clean outer border: removed redundant inset outline. */
    .jars-demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}
    .jars-demo-kicker{color:#E6C9FD;font:600 10px/1.5 var(--display);text-transform:uppercase;letter-spacing:.16em}
    .jars-demo-mark{display:inline-flex;align-items:center;gap:8px;color:#CCB4E1;font:500 12px/1.4 var(--body)}
    .jars-demo-mark::before{content:"";width:6px;height:6px;border-radius:50%;background:#F4D966;box-shadow:0 0 12px rgba(244,217,102,.55)}
    .jars-demo-view{position:relative;display:grid;place-items:center;min-height:407px;margin:3px 0 0}
    .jars-balance,.jars-allocated{grid-area:1/1;width:100%;min-width:0;transition:opacity 500ms ease,transform 750ms cubic-bezier(.22,1,.36,1),visibility 500ms}
    .jars-balance{display:grid;align-content:center;justify-items:center;gap:10px;opacity:1;transform:none;visibility:visible;}
    .jars-bank-icon{width:65px;height:65px;display:grid;place-items:center;margin-bottom:13px;border:1px solid rgba(223,188,251,.24);border-radius:22px;background:rgba(208,166,239,.11);color:#DFC3FC;box-shadow:0 13px 26px rgba(0,0,0,.1)}
    .jars-bank-label{font:500 15px/1.5 var(--body);color:#DDCEE9}
    .jars-bank-number{font:600 clamp(72px,9.5vw,114px)/1 var(--display);letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 15px 34px rgba(0,0,0,.14)}
    .jars-bank-caption{color:#B9A8CA;font:400 14px/1.5 var(--body);text-align:center}
    .jars-allocated{display:grid;align-content:center;justify-content:center;gap:14px;opacity:0;visibility:hidden;transform:translateY(20px) scale(.985)}
    .jars-allocated-head{display:grid;gap:5px;justify-items:center;text-align:center;margin:6px 0 4px}
    .jars-allocated-head strong{font:600 clamp(20px,2.5vw,29px)/1.2 var(--display);letter-spacing:-.02em;color:#FFF}
    .jars-allocated-head span{font:400 13px/1.5 var(--body);color:#D0BCDF}
    .jars-demo.is-split .jars-balance{opacity:0;visibility:hidden;transform:translateY(-19px) scale(.96)}
    .jars-demo.is-split .jars-allocated{opacity:1;visibility:visible;transform:none}
    .jars-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:clamp(12px,3.5vw,41px);width:min(100%,852px);margin:auto;padding:5px 6px 8px}
    .jars-piece{--jar-tone:#7BA5DA;--jar-percent:.85;--jar-index:0;display:grid;align-content:end;justify-items:center;gap:0;min-width:0;position:relative;text-align:center}
    .jars-piece::before{content:"";position:absolute;left:50%;bottom:65px;transform:translateX(-50%);width:150%;height:64%;background:radial-gradient(ellipse at center,var(--jar-glow),transparent 65%);opacity:.18;filter:blur(10px);pointer-events:none}
    .jars-piece:nth-child(1){--jar-tone:#7BA5DA;--jar-glow:#7BA5DA;--jar-percent:.90;--jar-index:0;--jar-liquid-top:31.334px;--jar-liquid-height:282.007px}
    .jars-piece:nth-child(2){--jar-tone:#47AA39;--jar-glow:#7EF078;--jar-percent:.75;--jar-index:1;--jar-liquid-top:78.335px;--jar-liquid-height:235.006px}
    .jars-piece:nth-child(3){--jar-tone:#2AC4D8;--jar-glow:#2AC4D8;--jar-percent:.75;--jar-index:2;--jar-liquid-top:78.335px;--jar-liquid-height:235.006px}
    .jars-piece:nth-child(4){--jar-tone:#F97253;--jar-glow:#F97253;--jar-percent:.70;--jar-index:3;--jar-liquid-top:94.002px;--jar-liquid-height:219.339px}
    .jars-piece-visual{position:relative;display:block;width:min(100%,133px);aspect-ratio:201.335/313.341;filter:drop-shadow(0 18px 12px rgba(0,0,0,.29));overflow:visible}
    .jars-piece-visual .jar-reveal-window { y:313.341px; height:0px; transition:y var(--jars-fill-duration) cubic-bezier(.17,.7,.17,1),height var(--jars-fill-duration) cubic-bezier(.17,.7,.17,1); transition-delay:calc(130ms + var(--jar-index)*var(--jars-stagger)); }
    .jars-demo.is-filling .jar-reveal-window { y:var(--jar-liquid-top); height:var(--jar-liquid-height); }
    .jars-piece-info{display:grid;justify-items:center;gap:5px;margin-top:11px;min-height:65px}
    .jars-piece-name{font:600 14px/1.3 var(--display);color:#E8DCF1;white-space:normal}
    .jars-piece-amount{font:600 clamp(23px,2.45vw,32px)/1.1 var(--display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
    .jars-allocated-ticker{text-align:center;display:flex;align-items:center;justify-content:center;gap:9px;font:500 12px var(--body);color:#C9B8DB;margin-top:1px}
    .jars-allocated-ticker::before,.jars-allocated-ticker::after{content:"";width:22px;height:1px;background:rgba(225,198,249,.25)}
    .jars-demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid rgba(235,214,255,.15);padding-top:19px;position:relative;z-index:2}
    .jars-total{display:grid;gap:3px}
    .jars-total-label{font:600 10px/1.3 var(--display);letter-spacing:.13em;text-transform:uppercase;color:#C1ACD7}
    .jars-total-amount{font:600 29px/1.1 var(--display);letter-spacing:-.03em;color:#FFF;font-variant-numeric:tabular-nums}
    .jars-demo-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:12px 21px;border:0;border-radius:11px;background:var(--button);color:var(--on-yellow);font:600 14px/1.2 var(--display);transition:transform .22s,background .22s;cursor:pointer}
    .jars-demo-button svg{width:17px;height:17px;flex:none;transition:transform .4s cubic-bezier(.22,1,.36,1)}
    .jars-demo-button:hover{background:#FFF3A4;transform:translateY(-2px)}
    .jars-demo.is-split .jars-demo-button svg{transform:rotate(180deg)}
    .jars-demo-button:focus-visible{outline:2px solid white;outline-offset:4px}
    .jars-demo-footnote{font:400 13px/1.5 var(--body);color:#C8B9D9;text-align:center;padding-top:15px}
    .jars-story-outro{max-width:730px;margin:39px auto 0;text-align:center}
    .jars-story-outro p{font-size:17px;line-height:1.55;color:#D7CEE3}
    .jars-story-outro p+p{margin-top:12px}
    .jars-story-outro strong{color:#fff}
    .jars-story-outro .btn{margin-top:25px}
    @media(max-width:900px){.jars-story{padding:77px 0 87px}.jars-demo-view{min-height:395px}.jars-showcase{gap:15px}.jars-piece-visual{max-width:122px}}
    @media(max-width:580px){
      .jars-story{padding:64px 0 72px}.jars-story-intro{margin-bottom:32px}
      .jars-story-intro .eyebrow{margin-bottom:13px}.jars-story h2{font-size:clamp(32px,7vw,42px)}
      .jars-story-deck{font-size:17px;margin-top:18px}
      .jars-demo{border-radius:21px;padding:23px 16px 20px}
      .jars-demo-kicker{font-size:9px}.jars-demo-mark{font-size:10px}
      .jars-demo-view{min-height:487px}
      .jars-bank-number{font-size:clamp(61px,14vw,82px)}
      .jars-showcase{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 11px;width:100%;padding:0 3px}
      .jars-piece-visual{width:min(100%,85px)}
      .jars-piece-info{min-height:54px;margin-top:5px;gap:2px}
      .jars-piece-name{font-size:12px}.jars-piece-amount{font-size:23px}
      .jars-allocated{gap:10px}.jars-allocated-head{margin:0}
      .jars-allocated-head strong{font-size:21px}.jars-allocated-head span{font-size:11px}
      .jars-demo-bottom{gap:9px}.jars-total-amount{font-size:23px}
      .jars-demo-button{font-size:12px;padding:10px 12px;gap:6px;min-height:44px}
      .jars-demo-button svg{width:14px}.jars-demo-footnote{font-size:11px}
      .jars-story-outro{margin-top:32px}.jars-story-outro p{font-size:17px}
    }
    @media(max-width:350px){.jars-demo{padding-inline:11px}.jars-demo-button{font-size:11px;padding-inline:10px}.jars-demo-top{gap:7px}}
    @media(prefers-reduced-motion:reduce){.jars-balance,.jars-allocated,.jars-demo-button,.jars-demo-button svg,.jar-liquid,.jar-reveal-window{transition:none!important}.jars-demo-button:hover{transform:none!important}}

    /* ===============================================================
       TIER C V4 — OPEN BANK-TO-JELLI BRAND, YOUR BUDGET YOUR CALL
       Lock the existing editorial text. Give the three-step demo an
       authentic Jelli mark, virtual Jar identity and user-approved edits.
       All monetary numbers are an illustrative interactive example.
       =============================================================== */
    .setup-story{position:relative;isolation:isolate;padding:106px 0 120px;border-top:1px solid rgba(201,166,240,.15)}
    .setup-story::before{content:"";position:absolute;inset:30px -4vw 30px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 65% 70% at 77% 46%,rgba(139,83,193,.18),transparent 75%)}
    .setup-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:start;gap:clamp(42px,5vw,85px)}
    .setup-copy{display:grid;justify-items:start;align-content:start;align-self:start;padding-top:48px;gap:23px}
    .setup-copy h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em;max-width:630px}
    .setup-copy h2 em{font-style:normal;color:var(--button)}
    .setup-copy p{font:400 17px/1.55 var(--body);color:#D7CEE3;max-width:52ch}
    .setup-copy p strong{color:#fff;font-weight:600}
    .setup-copy .setup-small{color:#BAA9CE;font-size:14px}
    .setup-copy .btn{margin-top:6px}

    /* Frosted violet shell: more Jelli brand identity, fewer nested cards. */
    .setup-demo{position:relative;isolation:isolate;overflow:hidden;padding:27px 27px 20px;border-radius:28px;
      background:radial-gradient(ellipse 110% 78% at 92% -16%,rgba(181,116,236,.32),transparent 73%),
                 linear-gradient(145deg,rgba(77,43,104,.95),rgba(43,26,71,.98) 49%,rgba(26,15,51,.98));
      border:1px solid rgba(218,192,245,.35);box-shadow:0 30px 78px rgba(1,0,16,.32),inset 0 1px 0 rgba(255,255,255,.12);
      backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
    .setup-demo::before{content:"";position:absolute;z-index:-1;inset:auto -30% -24% 15%;height:63%;pointer-events:none;
      background:radial-gradient(ellipse at 55% 35%,rgba(147,89,223,.18),transparent 68%)}
    .setup-demo-heading{display:flex;align-items:center;gap:15px;margin-bottom:23px}
    .setup-demo-heading strong{font:600 11px/1.3 var(--display);letter-spacing:.15em;text-transform:uppercase;color:#EACBFF}

    /* Connected editorial tabs, with a yellow progress stroke. */
    .setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:23px;border-bottom:1px solid rgba(224,194,244,.23)}
    .setup-step{position:relative;display:grid;align-content:center;gap:6px;min-height:58px;padding:9px 8px 15px 1px;border:0;border-radius:0;
      background:transparent;text-align:left;color:#CBB8DD;font:600 13px/1.24 var(--display);transition:color .2s}
    .setup-step span{font:600 10px/1.1 var(--display);letter-spacing:.10em;color:#BD9BD7}
    .setup-step::after{content:"";position:absolute;bottom:-1px;left:0;right:13%;height:3px;background:#FFE66C;border-radius:4px;
      transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.22,1,.36,1)}
    .setup-step[aria-selected="true"]{color:#fff}
    .setup-step[aria-selected="true"] span{color:var(--button)}
    .setup-step[aria-selected="true"]::after{transform:scaleX(1)}
    .setup-step:hover{color:#fff}
    .setup-step:focus-visible,.setup-next:focus-visible,.setup-approve:focus-visible,.setup-budget-minus:focus-visible,.setup-budget-plus:focus-visible{outline:2px solid var(--button);outline-offset:3px}

    .setup-display{position:relative;height:447px;min-height:447px;display:grid;align-items:stretch;padding:47px 24px 23px;border-radius:20px;
      background:radial-gradient(ellipse at 50% 10%,rgba(118,64,173,.20),transparent 63%),
                 linear-gradient(155deg,rgba(26,14,53,.76),rgba(14,7,33,.78));border:1px solid rgba(229,211,251,.12)}
    .setup-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:0;width:100%;text-align:center;animation:setup-stage-enter 390ms cubic-bezier(.22,1,.36,1) both}
    .setup-panel[hidden]{display:none}
    .setup-stage-label{position:absolute;z-index:2;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;
      color:#BDA4D6;font:600 10px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase}
    .setup-stage-label .setup-mini-bubbles{width:11px;height:16px;color:#AD88D2;fill:currentColor}
    .setup-panel h3{color:#fff;font:600 23px/1.17 var(--display);letter-spacing:-.015em;margin-top:6px}
    .setup-panel p{margin-top:10px;color:#D7C9E7;font:400 14px/1.5 var(--body);max-width:370px}
    .setup-panel .setup-safe{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:#B8F4D9;
      font:600 11px/1.3 var(--body);padding:8px 12px;border-radius:100px;background:rgba(77,187,143,.085);border:1px solid rgba(123,225,185,.15)}
    .setup-safe::before{content:"✓";font-weight:700}

    /* Stage 1: Open graphic — traditional bank icon → authentic Jelli logo.
       No redundant inner tiles or fake money transfer metaphor. */
    .setup-connect-art{display:flex;align-items:center;justify-content:center;gap:clamp(9px,1.8vw,18px);width:100%;min-height:172px;padding:5px 0 0}
    .setup-bank-art{flex:0 0 90px;display:grid;justify-items:center;align-content:center;gap:10px;min-width:0;text-align:center}
    .setup-bank-art svg{display:block;width:71px;height:71px;fill:none;stroke:#DED0EB;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 7px 15px rgba(4,0,22,.2))}
    .setup-bank-art strong{font:500 12px/1.25 var(--display);color:#D5C5E4;white-space:nowrap}
    .setup-flow{display:grid;justify-items:center;align-items:center;gap:7px;min-width:69px;flex:0 1 80px}
    .setup-flow span{font:500 9px/1.3 var(--body);color:#B7A1CD;text-align:center}
    .setup-flow-arrow{display:flex;align-items:center;width:100%;gap:4px;color:#FFE66C}
    .setup-flow-arrow::before{content:"";flex:1;border-top:2px dashed rgba(209,161,246,.5)}
    .setup-flow-arrow::after{content:"→";font:600 19px/1 var(--display)}
    .setup-app-art{flex:0 1 129px;width:129px;min-width:0;display:grid;place-items:center}
    .setup-app-logo{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 16px rgba(15,0,28,.18))}

    /* True Jelli Jar vector reused directly from the locked Tier B master. */
    .setup-jar{display:block;position:relative;min-width:0;isolation:isolate;filter:drop-shadow(0 11px 8px rgba(3,0,18,.25))}
    .setup-jar-svg{display:block;width:100%;height:auto;overflow:visible}
    .setup-jar .jar-reveal-window{transition:y .45s ease,height .45s ease}
    .setup-jar .jar-restored-lid{pointer-events:none}

    /* Stage 2: real Jar silhouettes make suggestions tangible. */
    .setup-review-jars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px);
      width:100%;max-width:375px;margin:22px auto 0;padding:0 2px}
    .setup-review-jar{min-width:0;display:grid;align-content:end;justify-items:center;gap:5px;position:relative}
    .setup-review-jar .setup-jar{width:min(100%,65px);margin-bottom:4px}
    .setup-review-jar strong{color:#F1EAF8;font:600 11px/1.24 var(--display)}
    .setup-review-jar span.setup-money{color:#fff;font:600 14px/1.2 var(--display);font-variant-numeric:tabular-nums}

    /* Stage 3: the JAR is a fixed category icon. Its fill does NOT respond
       to the proposed monthly budget; only the dollar amount changes. */
    .setup-budget-editor{width:100%;max-width:347px;display:grid;gap:12px;margin-top:18px;text-align:left;
      padding:0 8px;border:0;border-radius:0;background:transparent}
    .setup-editor-head{display:flex;align-items:center;gap:12px;padding-bottom:0;border-bottom:0}
    .setup-editor-jar{width:34px;flex:none;display:block;filter:drop-shadow(0 6px 8px rgba(3,0,16,.20))}
    .setup-editor-name{flex:1;display:grid;gap:2px;min-width:0}
    .setup-editor-name strong{font:600 15px/1.3 var(--display);color:#fff}
    .setup-editor-name span{font:400 11px/1.25 var(--body);color:#C9B8DC}
    .setup-editor-label{font:600 9px/1.3 var(--display);color:#E6C4FB;letter-spacing:.12em;text-transform:uppercase}
    .setup-editor-offer{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:1px;padding-top:12px;border-top:1px solid rgba(236,210,254,.15);color:#C8B7DC;font:400 12px/1.4 var(--body)}
    .setup-editor-offer span:first-child{display:flex;align-items:center;gap:6px}
    .setup-editor-offer strong{color:#FFE66C;font:600 15px/1.2 var(--display);font-variant-numeric:tabular-nums}
    .setup-editor-offer .setup-offer-bubbles{width:12px;height:17px;color:#D7AAF9;fill:currentColor}
    .setup-editor-adjust{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:10px}
    .setup-budget-minus,.setup-budget-plus{display:grid;place-items:center;width:42px;height:42px;
      border:1px solid rgba(244,223,255,.34);border-radius:12px;background:rgba(255,255,255,.045);
      color:#F7ECFF;font:400 27px/1 var(--display);transition:background .2s,border-color .2s}
    .setup-budget-minus:hover,.setup-budget-plus:hover{background:rgba(255,230,108,.11);border-color:rgba(255,230,108,.65)}
    .setup-budget-minus:disabled,.setup-budget-plus:disabled{opacity:.35;cursor:not-allowed}
    .setup-budget-number{display:grid;justify-items:center;gap:3px;min-width:0}
    .setup-budget-number output{font:600 clamp(30px,3.3vw,38px)/1.1 var(--display);color:#FFF;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
    .setup-budget-number small{font:400 10px/1.25 var(--body);color:#BDA7D3}
    .setup-budget-delta{display:block;text-align:center;min-height:16px;color:#E8D6F7;font:500 11px/1.4 var(--body)}
    .setup-budget-delta.is-different{color:#FFE98E}
    .setup-approve{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:40px;padding:9px 12px;
      border:1px solid #FFE66C;border-radius:10px;background:#FFE66C;color:#211032;font:600 12px/1.25 var(--display);transition:background .2s}
    .setup-approve:hover{background:#FFF3A5}
    .setup-approve.is-approved{color:#BDF4D8;background:rgba(94,191,143,.11);border-color:rgba(133,220,174,.33)}
    .setup-panel .setup-approved{display:block;min-height:15px;margin-top:9px;color:#B1E8CC;font:500 10px/1.4 var(--body)}
    .setup-approved[hidden]{display:none!important}

    .setup-demo-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;
      color:#BEADCF;font:400 11px/1.45 var(--body)}
    .setup-next{border:0;background:transparent;color:var(--button);font:600 12px/1.4 var(--display);padding:8px 0;white-space:nowrap}
    .setup-next:hover{text-decoration:underline}
    @keyframes setup-stage-enter{from{opacity:0}to{opacity:1}}
    @media(max-width:900px){.setup-story{padding:82px 0 93px}.setup-grid{grid-template-columns:1fr;gap:35px}.setup-copy{max-width:700px;padding-top:0}.setup-demo{max-width:700px;width:100%;margin:auto}.setup-display{height:447px;min-height:447px}}
    @media(max-width:580px){.setup-story{padding:65px 0 76px}.setup-copy h2{font-size:clamp(32px,7vw,42px)}.setup-copy p{font-size:17px}.setup-demo{padding:18px 15px 15px;border-radius:21px}.setup-demo-heading{margin-bottom:15px}.setup-steps{margin-bottom:16px}.setup-step{padding:9px 4px 13px;font-size:12px}.setup-display{height:440px;min-height:440px;padding:42px 12px 18px}.setup-stage-label{top:17px;left:12px;right:12px}.setup-panel h3{font-size:21px}.setup-panel p{font-size:13px}.setup-connect-art{gap:8px}.setup-bank-art{flex-basis:72px}.setup-bank-art svg{width:59px;height:59px}.setup-bank-art strong{font-size:10px}.setup-app-art{flex-basis:104px;width:104px}.setup-flow{min-width:42px;flex:1}.setup-flow span{font-size:8px}.setup-review-jars{gap:6px}.setup-review-jar .setup-jar{max-width:54px}.setup-review-jar strong{font-size:10px}.setup-review-jar span.setup-money{font-size:12px}.setup-budget-editor{margin-top:13px;padding:0 4px;gap:10px}.setup-editor-head{gap:9px;padding-bottom:0}.setup-editor-offer{font-size:11px}.setup-editor-adjust{gap:7px}.setup-budget-number output{font-size:32px}.setup-demo-foot{font-size:10px;gap:9px}.setup-next{font-size:11px}}
    @media(max-width:360px){.setup-connect-art{gap:5px}.setup-bank-art{flex-basis:60px}.setup-bank-art svg{width:53px;height:53px}.setup-app-art{flex-basis:86px;width:86px}.setup-flow{min-width:37px}.setup-display{padding-inline:9px}.setup-budget-editor{padding-inline:0}.setup-budget-minus,.setup-budget-plus{width:38px;height:40px}.setup-editor-adjust{grid-template-columns:38px minmax(0,1fr) 38px;gap:5px}.setup-panel p{font-size:12px}.setup-review-jar .setup-jar{max-width:45px}}
    @media(prefers-reduced-motion:reduce){.setup-panel{animation:none}.setup-step,.setup-step::after,.setup-budget-minus,.setup-budget-plus,.setup-approve{transition:none!important}}

    /* ===============================================================
       UNIVERSAL SCROLL MOTION — TIER B ONWARD
       Add .scroll-rise or .scroll-fade to future content elements.
       Reveal once as an element enters view; no loop or layout shifts.
       Motion is opt-in and only hidden after JavaScript initializes.
       =============================================================== */
    .motion-ready .will-reveal.scroll-rise,
    .motion-ready .will-reveal.scroll-fade {
      opacity:0;
      transition:opacity 850ms cubic-bezier(.22,1,.36,1);
      transition-delay:var(--reveal-delay,0ms);
    }
    .motion-ready .will-reveal.scroll-rise {
      transform:translate3d(0,16px,0);
      transition-property:opacity,transform;
      transition-duration:850ms;
    }
    .motion-ready .scroll-rise.is-visible,
    .motion-ready .scroll-fade.is-visible {
      opacity:1;
      transform:none;
    }
    /* Atmospheric parallax: decorative light only, never real content.
       JS changes the variable by at most ~25px while scrolling. */
    .jars-story::before,
    .setup-story::before {
      transform:translate3d(0,var(--atmos-y,0px),0);
      will-change:transform;
    }
    @media(prefers-reduced-motion:reduce){
      .motion-ready .scroll-rise,
      .motion-ready .scroll-fade {
        opacity:1!important;transform:none!important;
        transition:none!important;
      }
      .jars-story::before,.setup-story::before {
        transform:none!important;will-change:auto;
      }
    }


    /* ===============================================================
       TIER D V3 — THE PAYDAY MIXER
       Interactive percentage allocation. Each +/- adjusts by exactly
       five percentage points and moves that share to/from another Jar;
       the plan always totals 100%. A Lid routes excess to Spare Change.
       Jars remain category icons, not liquid-level budget meters.
       =============================================================== */
    .payday-story{position:relative;isolation:isolate;padding:106px 0 120px;border-top:1px solid rgba(201,166,240,.15)}
    .payday-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 67% 64% at 31% 54%,rgba(125,63,189,.17),transparent 75%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .payday-grid{display:grid;grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);align-items:start;gap:clamp(42px,5vw,80px)}
    .payday-copy{display:grid;justify-items:start;align-content:start;gap:23px;padding-top:48px}
    .payday-copy h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .payday-copy h2 em{color:var(--button);font-style:normal}
    .payday-copy p{font:400 17px/1.55 var(--body);color:#D7CEE3;max-width:53ch}
    .payday-copy p strong{color:#fff;font-weight:600}
    .payday-copy .btn{margin-top:6px}
    .payday-demo{position:relative;isolation:isolate;overflow:hidden;padding:27px 25px 21px;border-radius:28px;background:radial-gradient(ellipse 92% 55% at 50% -12%,rgba(167,108,218,.24),transparent 82%),linear-gradient(148deg,rgba(65,37,94,.98),rgba(36,21,67,.98) 54%,rgba(23,12,49,.99));border:1px solid rgba(218,192,245,.32);box-shadow:0 28px 76px rgba(1,0,16,.34),inset 0 1px 0 rgba(255,255,255,.10)}
    .payday-demo::before{content:"";position:absolute;z-index:-1;left:-15%;right:-15%;top:125px;height:360px;pointer-events:none;background:radial-gradient(ellipse at 40% 50%,rgba(162,89,201,.12),transparent 70%)}
    .payday-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
    .payday-demo-head strong{font:600 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#EBCFFB}
    .payday-demo-head svg{width:13px;height:20px;flex:none;color:#C59BE4;fill:currentColor}
    .payday-scenarios{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:14px;border:1px solid rgba(224,194,244,.16);border-radius:16px;background:rgba(10,3,30,.33)}
    .payday-scenario{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:11px 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:#F3EAFB;text-align:left;transition:background .2s,border-color .2s}
    .payday-scenario span{display:grid;gap:3px;color:#D0BEDF;font:500 11px/1.3 var(--body)}
    .payday-scenario strong{font:600 20px/1.15 var(--display);color:#FAF7FC;font-variant-numeric:tabular-nums}
    .payday-scenario[aria-pressed="true"]{border-color:rgba(255,230,108,.62);background:rgba(255,230,108,.105)}
    .payday-scenario[aria-pressed="true"] span{color:#F7E2AF}
    .payday-scenario:focus-visible,.payday-confirm:focus-visible,.payday-reset:focus-visible,.payday-edit:focus-visible,.payday-plan-reset:focus-visible,.payday-lid input:focus-visible{outline:2px solid var(--button);outline-offset:3px}
    .payday-visual{display:grid;grid-template-columns:178px minmax(0,1fr);gap:13px;align-items:center;min-height:351px;padding:12px 0 17px;border-bottom:1px solid rgba(230,203,251,.17)}
    .payday-orbit{display:grid;place-items:center;position:relative;min-width:0;align-content:center;gap:0}
    .payday-ring{--payday-ring:conic-gradient(from -90deg,#B7A0F3 0% 50%,#79D9B0 50% 75%,#68CCE0 75% 90%,#FFB27D 90% 100%);position:relative;width:172px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--payday-ring);box-shadow:0 12px 37px rgba(4,0,23,.28),0 0 30px rgba(186,125,235,.08);transform-origin:center}
    .payday-ring::before{content:"";position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 65% 15%,#29163f,#160d30 80%);box-shadow:inset 0 2px 12px rgba(0,0,0,.24)}
    .payday-ring-core{position:relative;display:grid;justify-items:center;align-content:center;gap:7px;max-width:142px;text-align:center}
    .payday-ring-core small{font:600 9px/1.25 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#C6A9DC}
    .payday-ring-core strong{font:600 clamp(27px,2.6vw,34px)/1.08 var(--display);letter-spacing:-.04em;color:white;font-variant-numeric:tabular-nums}
    .payday-ring-core span{font:500 10px/1.4 var(--body);color:#D8C4E8}
    .payday-ring-note{text-align:center;color:#C7B2DC;font:500 10px/1.4 var(--body);margin-top:13px;max-width:170px}
    .payday-ledger{min-width:0;align-self:stretch;display:grid;align-content:center}
    .payday-ledger-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
    .payday-ledger-label>span{font:600 10px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#E4CAE9}
    .payday-plan-reset{border:0;background:transparent;padding:3px 0;color:#FFE66C;font:600 10px/1.2 var(--display);cursor:pointer;white-space:nowrap}
    .payday-plan-reset:hover{text-decoration:underline}
    .payday-plan-reset:disabled{opacity:.35;cursor:default;text-decoration:none}
    .payday-rows{display:grid;gap:7px}
    .payday-row{--row-accent:#B7A0F3;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;padding:10px 9px 10px 11px;background:rgba(12,6,33,.38);border:1px solid rgba(222,196,243,.11);border-left:3px solid var(--row-accent);border-radius:13px;transition:border-color .22s,background .22s}
    .payday-row[data-payday-jar="rent"]{--row-accent:#B7A0F3}
    .payday-row[data-payday-jar="groceries"]{--row-accent:#79D9B0}
    .payday-row[data-payday-jar="bills"]{--row-accent:#68CCE0}
    .payday-row[data-payday-jar="fun"]{--row-accent:#FFB27D}
    .payday-row.is-adjusted{background:rgba(255,230,108,.075);border-color:rgba(255,230,108,.30);border-left-color:var(--row-accent)}
    .payday-jar{display:block;width:25px;max-height:40px;isolation:isolate;filter:drop-shadow(0 3px 3px rgba(3,0,18,.25))}
    .payday-jar-svg{display:block;width:100%;height:auto;overflow:visible}
    .payday-row-label{display:grid;gap:4px;min-width:0}
    .payday-row-name{font:600 12px/1.15 var(--display);color:#F5EEFA}
    .payday-row-amount{color:#fff;font:600 14px/1.15 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
    .payday-stepper{display:flex;align-items:center;justify-content:center;gap:1px;flex:none;padding:3px;border-radius:10px;background:rgba(213,180,244,.085);border:1px solid rgba(231,203,251,.13)}
    .payday-edit{display:grid;place-items:center;flex:none;width:26px;height:27px;padding:0;color:#EDE2F5;border:0;border-radius:7px;background:transparent;font:500 20px/1 var(--display);transition:background .18s,color .18s}
    .payday-edit:hover:not(:disabled){background:rgba(255,230,108,.16);color:#FFE66C}
    .payday-edit:disabled{opacity:.23;cursor:not-allowed}
    .payday-row-percent{display:block;width:44px;text-align:center;color:#FFE66C;font:600 15px/1.2 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
    .payday-adjust-hint{min-height:16px;margin-top:8px;color:#C9B6DA;font:400 10px/1.4 var(--body);text-align:right}
    .payday-controls{display:grid;gap:11px;margin-top:16px}
    .payday-lid{display:flex;align-items:center;gap:10px;color:#E2D4EC;font:400 12px/1.5 var(--body);cursor:pointer}
    .payday-lid input{accent-color:#FFE66C;width:18px;height:18px;flex:none;cursor:pointer}
    .payday-lid strong{color:#FFE6A5;font-weight:600}
    .payday-spare{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:11px 13px;background:rgba(255,230,108,.07);border:1px solid rgba(255,230,108,.18);border-radius:12px;color:#E7D8EE;font:500 12px var(--body)}
    .payday-spare[hidden]{display:none!important}
    .payday-spare-title{display:flex;align-items:center;gap:8px}
    .payday-spare-mark{font-size:18px;color:#EAC77D}
    .payday-spare strong{font:600 16px var(--display);color:#FFE66C;font-variant-numeric:tabular-nums}
    .payday-demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
    .payday-approval{font:400 11px/1.4 var(--body);color:#BDAED0;max-width:235px}
    .payday-confirm{flex:none;min-height:43px;padding:10px 18px;border:0;border-radius:11px;background:var(--button);color:var(--on-yellow);font:600 13px var(--display);transition:transform .2s,background .2s}
    .payday-confirm:hover{background:#FFF19B;transform:translateY(-1px)}
    .payday-reset{background:transparent;border:1px solid rgba(255,230,108,.6);color:var(--button)}
    .payday-reset:hover{background:rgba(255,230,108,.08)}
    .payday-note{padding-top:12px;color:#AFA0C3;font:400 10px/1.5 var(--body);text-align:left}
    @media(max-width:1050px) and (min-width:901px){.payday-visual{grid-template-columns:1fr;gap:18px}.payday-orbit{padding:4px}.payday-ledger{width:100%}}
    @media(max-width:900px){.payday-story{padding:82px 0 93px}.payday-grid{grid-template-columns:1fr;gap:35px}.payday-copy{max-width:700px;padding-top:0}.payday-demo{max-width:700px;width:100%;margin:auto}.payday-visual{grid-template-columns:194px minmax(0,1fr)}}
    @media(max-width:580px){.payday-story{padding:65px 0 76px}.payday-copy h2{font-size:clamp(32px,7vw,42px)}.payday-demo{padding:19px 15px;border-radius:21px}.payday-visual{grid-template-columns:1fr;gap:20px;padding:10px 0 17px}.payday-ring{width:182px}.payday-ring::before{inset:19px}.payday-ring-core strong{font-size:31px}.payday-orbit{padding:6px 0 2px}.payday-ledger{max-width:390px;width:100%;margin:auto}.payday-row{padding:10px 13px;grid-template-columns:28px minmax(0,1fr) auto;gap:11px}.payday-row-name{font-size:13px}.payday-row-amount{font-size:15px}.payday-edit{width:31px;height:30px}.payday-row-percent{width:48px}.payday-demo-bottom{align-items:center}.payday-approval{max-width:180px}.payday-scenario{padding:10px 9px}.payday-scenario strong{font-size:18px}}
    @media(max-width:350px){.payday-demo{padding-inline:12px}.payday-row{padding:9px 7px;gap:7px}.payday-scenario strong{font-size:16px}.payday-scenario span{font-size:10px}.payday-confirm{padding:10px 12px;font-size:12px}.payday-approval{font-size:10px}.payday-edit{width:27px}.payday-row-percent{width:43px}}
    @media(prefers-reduced-motion:reduce){.payday-row,.payday-edit,.payday-scenario,.payday-confirm{transition:none!important}.payday-story::before{transform:none!important}}

    /* ===============================================================
       TIER E — SOCIAL EDITORIAL / REAL-LIFE SPENDING MOMENT
       Lifestyle photography + simple 3-state story progression.
       Replace the three placeholder images with unique editorial stills
       once the final story sequence is ready.
       =============================================================== */
    .spend-story{position:relative;isolation:isolate;padding:106px 0 120px;border-top:1px solid rgba(201,166,240,.15)}
    .spend-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 67% 64% at 70% 48%,rgba(150,75,176,.17),transparent 77%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .spend-grid{display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);align-items:center;gap:clamp(42px,5vw,80px)}
    .spend-copy{display:grid;justify-items:start;align-content:start;gap:23px}
    .spend-copy h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .spend-copy h2 em{color:var(--button);font-style:normal}
    .spend-copy p{font:400 17px/1.55 var(--body);color:#D7CEE3;max-width:53ch}
    .spend-copy p strong{color:#fff;font-weight:600}
    .spend-copy .btn{margin-top:6px}
    .editorial-scene{position:relative;overflow:hidden;min-height:640px;border:1px solid rgba(214,181,237,.25);border-radius:30px;background:linear-gradient(165deg,#3d2448 0%,#211433 58%,#160f28 100%);box-shadow:0 30px 78px rgba(1,0,16,.32),inset 0 1px 0 rgba(255,255,255,.12)}
    .editorial-photo-stack{position:absolute;inset:0}
    .editorial-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .45s ease,transform .9s cubic-bezier(.22,1,.36,1)}
    .editorial-photo.is-active{opacity:1;transform:scale(1)}
    .editorial-photo-stack::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,24,.10) 0%,rgba(11,6,24,.08) 28%,rgba(11,6,24,.16) 52%,rgba(11,6,24,.58) 100%)}
    .editorial-chrome{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 17%,rgba(183,120,255,.14),transparent 22%),radial-gradient(circle at 82% 12%,rgba(255,186,114,.09),transparent 20%)}
    .editorial-kicker{position:absolute;z-index:2;left:24px;top:22px;color:#F4DEEC;font:600 11px/1.3 var(--display);letter-spacing:.13em;text-transform:uppercase}
    .editorial-storybar{position:absolute;z-index:3;left:18px;right:18px;bottom:18px;display:flex;align-items:end;justify-content:space-between;gap:12px;padding:14px 15px;background:linear-gradient(180deg,rgba(30,18,48,.64),rgba(24,13,40,.84));border:1px solid rgba(255,255,255,.16);border-radius:18px;backdrop-filter:blur(14px)}
    .editorial-caption{font:500 12px/1.5 var(--body);color:#fff;max-width:260px}
    .editorial-stepper{display:flex;align-items:center;gap:7px}
    .editorial-step{display:grid;place-items:center;min-width:40px;height:38px;padding:0 11px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.05);color:#E6DDF0;font:600 12px var(--display);transition:background .2s,border-color .2s,color .2s,transform .2s}
    .editorial-step:hover{border-color:rgba(255,230,108,.45);transform:translateY(-1px)}
    .editorial-step[aria-pressed="true"]{background:var(--button);border-color:var(--button);color:var(--on-yellow)}
    .editorial-step:focus-visible{outline:2px solid white;outline-offset:3px}
    @media(max-width:900px){.spend-story{padding:82px 0 93px}.spend-grid{grid-template-columns:1fr;gap:35px}.spend-copy{max-width:700px}.editorial-scene{width:100%;max-width:700px;margin:auto}}
    @media(max-width:580px){.spend-story{padding:65px 0 76px}.spend-copy h2{font-size:clamp(32px,7vw,42px)}.editorial-scene{min-height:560px;border-radius:22px}.editorial-kicker{left:17px;top:17px;font-size:10px}.editorial-storybar{left:12px;right:12px;bottom:12px;padding:12px 12px 11px;align-items:flex-start;flex-direction:column}.editorial-caption{font-size:11px;max-width:none}.editorial-step{min-width:34px;height:34px;padding:0 10px}}
    @media(prefers-reduced-motion:reduce){.editorial-photo,.editorial-step{transition:none!important}.spend-story::before{transform:none!important}}


    /* ===============================================================
       TIER F V2 — A CHARACTER BREAK, NOT A SECOND PRODUCT DASHBOARD
       The existing approved face artwork stays in the SVG below.
       Pointer expression layer and directional-pose hooks are prepared;
       the forthcoming left/right Illustrator art has not been invented.
       =============================================================== */
    .jjf-story{position:relative;isolation:isolate;padding:108px 0 116px;border-top:1px solid rgba(201,166,240,.15)}
    .jjf-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 64% 54% at 50% 55%,rgba(150,76,219,.19),transparent 79%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .jjf-intro{max-width:770px;margin:0 auto 7px;text-align:center}
    .jjf-intro .eyebrow{display:block;margin-bottom:19px}
    .jjf-intro h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .jjf-intro h2 em{font-style:normal;color:var(--button)}
    .jjf-intro p{font:400 17px/1.6 var(--body);color:#DDD2E9;max-width:640px;margin:20px auto 0}
    .jjf-playground{position:relative;isolation:isolate;max-width:900px;margin:0 auto;display:grid;justify-items:center;align-content:start}
    .jjf-stage{position:relative;display:grid;place-items:center;width:100%;min-height:485px;max-width:900px;padding:20px 24px 6px;overflow:visible;touch-action:pan-y}
    .jjf-stage::before{content:"";position:absolute;width:min(90%,650px);height:90%;top:0;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(164,78,221,.22),rgba(164,78,221,.055) 45%,transparent 70%);filter:blur(22px);pointer-events:none}
    .jjf-character{position:relative;z-index:1;width:min(100%,385px);transform-origin:50% 85%;animation:jjf-idle 6s ease-in-out infinite;filter:drop-shadow(0 24px 22px rgba(9,1,27,.25));user-select:none;pointer-events:none}
    .jjf-character svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 63%;transform:rotate(var(--jj-head-tilt,0deg));transition:transform .18s cubic-bezier(.2,.75,.4,1)}
    @keyframes jjf-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    .jjf-shadow{position:absolute;z-index:0;bottom:23px;left:50%;width:245px;height:19px;transform:translateX(-50%);background:rgba(9,2,24,.4);border-radius:50%;filter:blur(16px);pointer-events:none}
    .jjf-speech{display:grid;align-content:center;justify-items:center;gap:6px;min-height:91px;width:min(100%,560px);padding:18px 27px 19px;text-align:center;border:1px solid rgba(218,187,246,.24);border-radius:19px;background:linear-gradient(135deg,rgba(61,34,91,.72),rgba(30,18,58,.7));box-shadow:0 16px 45px rgba(3,0,20,.19);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
    .jjf-speech-label{color:var(--button);font:700 10px/1.3 var(--display);letter-spacing:.13em;text-transform:uppercase}
    .jjf-speech p{color:#FAF7FF;font:500 clamp(16px,2vw,20px)/1.38 var(--body);max-width:34ch;min-height:1.35em}
    .jjf-interactions{display:grid;justify-items:center;gap:12px;margin-top:30px;width:100%}
    .jjf-prompt-label{color:#BCA9D0;font:600 10px/1.4 var(--display);text-transform:uppercase;letter-spacing:.16em}
    .jjf-prompts{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:690px}
    .jjf-prompt{min-height:44px;padding:11px 17px;border:1px solid rgba(227,203,247,.24);border-radius:100px;background:rgba(215,177,249,.058);color:#EAE2F4;font:600 13px/1.3 var(--display);transition:border-color .2s,background .2s,color .2s,transform .2s}
    .jjf-prompt:hover{transform:translateY(-2px);border-color:rgba(255,230,108,.57);background:rgba(255,230,108,.065)}
    .jjf-prompt[aria-pressed="true"]{color:#FFE66C;border-color:rgba(255,230,108,.74);background:rgba(255,230,108,.105)}
    .jjf-prompt:focus-visible{outline:2px solid var(--button);outline-offset:4px}
    .jjf-after{display:grid;justify-items:center;gap:19px;margin:43px auto 0;text-align:center}
    .jjf-after p{font:500 16px/1.5 var(--body);color:#D8CAE7}
    .jjf-after p strong{color:#FFE66C}
    @media(max-width:950px){.jjf-stage{min-height:450px}.jjf-character{width:min(100%,355px)}}
    @media(max-width:580px){.jjf-story{padding:69px 0 82px}.jjf-intro h2{font-size:clamp(32px,7vw,42px)}.jjf-intro p{font-size:16px;margin-top:17px}.jjf-stage{min-height:375px;padding:10px 0 0}.jjf-character{width:min(85vw,300px)}.jjf-shadow{bottom:18px;width:190px}.jjf-speech{padding:15px 17px;min-height:87px;border-radius:16px}.jjf-speech p{font-size:16px}.jjf-interactions{margin-top:25px;gap:14px}.jjf-prompts{gap:8px}.jjf-prompt{min-height:40px;padding:9px 12px;font-size:12px}.jjf-after{margin-top:34px;gap:16px}}
    @media(max-width:350px){.jjf-prompt{font-size:11px;padding:8px 10px}}
    @media(prefers-reduced-motion:reduce){.jjf-character{animation:none!important}.jjf-character svg,.jjf-prompt{transition:none!important}.jjf-prompt:hover{transform:none!important}.jjf-story::before{transform:none!important}}

    /* ===============================================================
       TIER G — BUILT FOR REAL LIFE
       Four modular product stories and two small utility callouts.
       Visuals are editorial concept layouts, NOT captured app UI.
       Replace visual <div data-proof-slot> interiors with approved
       real application captures when those assets are provided.
       =============================================================== */
    .life-story{position:relative;isolation:isolate;padding:107px 0 120px;border-top:1px solid rgba(201,166,240,.15)}
    .life-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 74% 61% at 46% 46%,rgba(96,51,172,.15),transparent 79%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .life-intro{max-width:850px;margin:0 auto 52px;text-align:center}
    .life-intro .eyebrow{display:block;margin-bottom:19px}
    .life-intro h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .life-intro h2 em{color:var(--button);font-style:normal}
    .life-intro p{max-width:690px;margin:23px auto 0;font:400 17px/1.55 var(--body);color:#D7CEE3}
    .life-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
    .life-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(216,184,245,.20);border-radius:25px;background:linear-gradient(155deg,#211339 0%,#17102F 100%);box-shadow:0 22px 55px rgba(0,0,0,.17)}
    .life-art{height:258px;position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;border-bottom:1px solid rgba(255,255,255,.11)}
    .life-art::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 67%,rgba(12,5,29,.15))}
    .life-art-credit{background:radial-gradient(ellipse at 80% 18%,rgba(250,207,166,.37),transparent 58%),linear-gradient(125deg,#6B446B,#39365C 61%,#231C40)}
    .life-art-goal{background:radial-gradient(circle at 25% 24%,rgba(162,228,217,.27),transparent 50%),linear-gradient(125deg,#28676E,#244454 48%,#302B54)}
    .life-art-receipt{background:radial-gradient(circle at 78% 15%,rgba(242,208,157,.25),transparent 55%),linear-gradient(140deg,#68535B,#48415B 50%,#29223C)}
    .life-art-share{background:radial-gradient(circle at 15% 28%,rgba(218,168,246,.26),transparent 51%),linear-gradient(145deg,#5D3E81,#362651 58%,#241B41)}
    .life-art-badge{position:absolute;top:17px;left:20px;z-index:5;font:600 10px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#FFF2FD;text-shadow:0 2px 7px rgba(0,0,0,.3)}
    .life-art-credit .life-card-prop{position:absolute;left:7%;top:26%;width:50%;height:145px;border-radius:16px;border:1px solid rgba(255,255,255,.37);background:linear-gradient(135deg,#D7CBF2,#946EB9 54%,#594780);transform:rotate(-13deg);box-shadow:0 23px 32px rgba(11,0,31,.31),inset 0 1px 1px rgba(255,255,255,.6)}
    .life-card-prop .card-chip{position:absolute;top:29px;left:24px;width:36px;height:27px;border:1px solid #D6BE85;border-radius:7px;background:linear-gradient(120deg,#FBE7A6,#B99561)}
    .life-card-prop .card-brand{position:absolute;right:22px;top:25px;color:#FFF9E6;font:700 11px/1 var(--display);letter-spacing:.1em}
    .life-card-prop .card-number{position:absolute;left:24px;bottom:26px;color:#FFF;font:500 15px/1 var(--display);letter-spacing:.13em}
    .life-proof{position:absolute;z-index:2;right:6%;bottom:17px;width:54%;max-width:255px;border:1px solid rgba(244,228,255,.29);border-radius:17px;padding:18px 16px;background:rgba(24,11,47,.84);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);box-shadow:0 17px 38px rgba(4,0,18,.35)}
    .life-proof small{display:block;color:#D2B8E7;font:600 10px/1.3 var(--display);letter-spacing:.07em;text-transform:uppercase}
    .life-proof strong{display:block;margin:7px 0 4px;color:#fff;font:600 26px/1.1 var(--display);font-variant-numeric:tabular-nums}
    .life-proof .life-proof-caption{font:400 11px/1.35 var(--body);color:#E0D3E9}
    .life-proof-rule{height:4px;margin-top:12px;border-radius:6px;background:linear-gradient(90deg,#DDC2FA 63%,rgba(255,255,255,.17) 63%)}
    .life-goal-jar{position:absolute;left:16%;bottom:13px;width:112px;height:173px;filter:drop-shadow(0 16px 16px rgba(4,14,25,.32))}
    .life-goal-jar .lid{position:absolute;z-index:2;left:5%;right:5%;top:4px;height:22px;border-radius:9px 9px 7px 7px;background:linear-gradient(175deg,#FFF,#D3D0DE 65%,#A4A5B4);border:1px solid #F5F1FC}
    .life-goal-jar .glass{position:absolute;inset:21px 9px 5px;overflow:hidden;border:2px solid rgba(245,255,255,.72);border-radius:11px 11px 25px 25px;background:linear-gradient(105deg,rgba(255,255,255,.33),rgba(255,255,255,.03) 53%,rgba(255,255,255,.18));box-shadow:inset 4px 2px 9px rgba(255,255,255,.15);backdrop-filter:none}
    .life-goal-jar .fill{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(145deg,#7DDFCA,#38B69F);border-top:2px solid #CAFFF3}
    .life-goal-jar .glass::after{content:"";position:absolute;left:10px;top:18px;width:6px;height:54px;border-radius:9px;background:rgba(255,255,255,.40)}
    .life-goal-flag{position:absolute;right:7%;top:20%;width:49%;max-width:245px;padding:18px;border:1px solid rgba(216,244,243,.34);border-radius:18px;background:rgba(10,39,49,.67);box-shadow:0 18px 32px rgba(4,16,27,.23);backdrop-filter:blur(10px)}
    .life-goal-flag small{font:600 10px var(--display);letter-spacing:.11em;text-transform:uppercase;color:#D0FCF1}
    .life-goal-flag strong{display:block;font:600 23px var(--display);color:#fff;margin:6px 0 3px}
    .life-goal-flag span{font:500 12px var(--body);color:#D1F4EC}
    .life-goal-meter{height:7px;border-radius:7px;overflow:hidden;margin-top:15px;background:rgba(255,255,255,.16)}
    .life-goal-meter::before{content:"";display:block;width:40%;height:100%;border-radius:inherit;background:#91E5D2}
    .life-ticket{position:absolute;right:6%;bottom:25px;width:82px;height:36px;border:1px dashed rgba(255,244,202,.55);border-radius:6px;background:rgba(246,223,178,.25);transform:rotate(13deg)}
    .life-receipt-paper{position:absolute;left:10%;top:24px;width:46%;max-width:235px;min-height:211px;padding:22px 16px 15px;color:#3B303A;background:#F4E9D9;box-shadow:9px 20px 35px rgba(15,5,22,.30);transform:rotate(-8deg);clip-path:polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%)}
    .life-receipt-paper b{display:block;margin-bottom:16px;text-align:center;font:700 14px/1.2 var(--display);letter-spacing:.11em}
    .life-receipt-paper .line{display:flex;justify-content:space-between;gap:6px;font:500 11px/1.5 var(--body);padding:4px 0;border-bottom:1px dashed rgba(64,50,56,.25)}
    .life-receipt-paper .line:last-child{font-weight:700;margin-top:7px;border-bottom:0}
    .life-receipt-summary{position:absolute;right:6%;bottom:19px;width:55%;padding:15px 15px 12px;border-radius:15px;background:rgba(29,15,52,.88);border:1px solid rgba(248,227,255,.29);box-shadow:0 15px 33px rgba(7,0,25,.36)}
    .life-receipt-summary strong{display:block;color:#fff;font:600 14px var(--display);margin-bottom:8px}
    .life-receipt-summary span{display:block;font:500 11px var(--body);color:#E2D2ED;padding:3px 0}
    .life-receipt-summary span i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--split-dot)}
    .life-share-phone{position:absolute;top:44px;width:172px;height:214px;padding:9px;background:#130C27;border:4px solid #A7A0B9;border-radius:27px;box-shadow:0 19px 35px rgba(7,0,24,.33)}
    .life-share-phone.first{left:16%;transform:rotate(-11deg)}
    .life-share-phone.second{left:45%;top:27px;transform:rotate(8deg);border-color:#CEBBDB}
    .life-share-phone .screen{height:100%;border-radius:17px;padding:19px 10px 12px;background:linear-gradient(170deg,#523270,#1C1135)}
    .life-share-phone small{display:block;font:600 9px var(--display);text-transform:uppercase;letter-spacing:.08em;color:#DABEF1}
    .life-share-phone strong{display:block;margin-top:9px;color:#fff;font:600 17px var(--display)}
    .life-share-phone .jar-row{display:flex;align-items:center;gap:8px;margin-top:9px;padding:7px 8px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.09);font:500 10px var(--body);color:#F6EAFE}
    .life-share-phone .jar-row::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--shared-dot)}
    .life-private-pill{position:absolute;z-index:3;right:7%;bottom:20px;border:1px solid rgba(255,236,166,.38);border-radius:100px;padding:9px 13px;background:rgba(26,14,51,.87);color:#FFF1C3;font:600 11px/1.2 var(--body);box-shadow:0 12px 25px rgba(6,0,21,.25)}
    .life-card-body{padding:25px 29px 27px;display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:12px}
    .life-card-index{font:600 10px var(--display);letter-spacing:.15em;color:#B99AD8;text-transform:uppercase}
    .life-card-body h3{font:600 clamp(21px,2.1vw,27px)/1.2 var(--display);letter-spacing:-.015em;color:#fff}
    .life-card-body p{font:400 15px/1.55 var(--body);color:#D6CBDF;max-width:47ch}
    .life-card-body .life-proof-caption{margin-top:auto;padding-top:7px;font:400 11px/1.45 var(--body);color:#AFA0C3}
    .life-small-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:21px}
    .life-small{display:flex;align-items:center;gap:19px;padding:23px 25px;border:1px solid rgba(214,183,245,.15);border-radius:19px;background:rgba(132,77,178,.09);min-height:124px}
    .life-small-icon{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:17px;background:rgba(170,114,224,.16);border:1px solid rgba(203,170,243,.21);color:#E0BBFA}
    .life-small-icon svg{width:29px;height:29px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
    .life-small h3{color:#fff;font:600 17px/1.25 var(--display)}
    .life-small p{margin-top:6px;color:#C9BBD8;font:400 13px/1.5 var(--body)}
    .life-outro{display:grid;justify-items:center;text-align:center;gap:15px;margin-top:35px}
    .life-outro small{max-width:660px;color:#B9A9CA;font:400 12px/1.5 var(--body)}
    .life-card:focus-within{border-color:rgba(255,230,108,.6)}
    @media(hover:hover) and (prefers-reduced-motion:no-preference){.life-card .life-art .life-proof,.life-card .life-art .life-goal-flag,.life-card .life-art .life-receipt-summary{transition:transform .45s cubic-bezier(.22,1,.36,1)}.life-card:hover .life-art .life-proof,.life-card:hover .life-art .life-goal-flag,.life-card:hover .life-art .life-receipt-summary{transform:translateY(-5px)}}
    @media(max-width:900px){.life-story{padding:83px 0 95px}.life-grid{gap:15px}.life-art{height:240px}.life-card-body{padding:22px}.life-small{padding:19px}}
    @media(max-width:700px){.life-grid,.life-small-grid{grid-template-columns:1fr}.life-art{height:258px}.life-intro{margin-bottom:35px}.life-card-body{padding:25px}.life-small-grid{gap:12px}}
    @media(max-width:580px){.life-story{padding:66px 0 78px}.life-intro h2{font-size:clamp(32px,7vw,42px)}.life-intro p{font-size:17px;margin-top:19px}.life-art{height:250px}.life-card{border-radius:20px}.life-card-body h3{font-size:23px}.life-art-credit .life-card-prop{height:138px}.life-share-phone.first{left:12%}.life-share-phone.second{left:44%}.life-outro{margin-top:27px}}
    @media(max-width:370px){.life-art{height:230px}.life-goal-jar{left:9%}.life-goal-flag{right:4%;width:53%}.life-receipt-paper{left:5%;width:52%}.life-receipt-summary{right:3%;width:56%}.life-share-phone{width:155px}.life-share-phone.first{left:6%}.life-share-phone.second{left:40%}}
    @media(prefers-reduced-motion:reduce){.life-story::before{transform:none!important}.life-card .life-art *{transition:none!important}}


    /* ===============================================================
       TIER H: YOUR MONEY STAYS YOURS
       Demonstrate explicit approval of a virtual budget edit.
       No money movement and no connection to a real bank account.
       The app-like panel is an illustrative composition, not shipped UI.
       =============================================================== */
    .trust-story{position:relative;isolation:isolate;padding:110px 0 110px;border-top:1px solid rgba(201,166,240,.15)}
    .trust-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 55% at 80% 48%,rgba(75,111,166,.10),transparent 77%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .trust-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(35px,5.4vw,84px);align-items:center}
    .trust-copy{display:grid;justify-items:start;align-content:center;gap:22px}
    .trust-copy h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em;max-width:630px}
    .trust-copy h2 em{font-style:normal;color:var(--button)}
    .trust-copy p{color:#D7CEE3;font:400 17px/1.55 var(--body);max-width:53ch}
    .trust-copy p strong{font-weight:600;color:#fff}
    .trust-copy .btn{margin-top:7px}
    .trust-visual{position:relative;padding:clamp(18px,2.5vw,32px);border-radius:26px;border:1px solid rgba(214,199,241,.23);background:linear-gradient(147deg,#26233E 0%,#1C1935 49%,#13102D 100%);box-shadow:0 26px 68px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)}
    .trust-visual::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 83% 0,rgba(147,140,230,.12),transparent 55%)}
    .trust-visual>*{position:relative}
    .trust-vis-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
    .trust-vis-top strong{font:600 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#DBD7F3}
    .trust-vis-top span{font:500 11px var(--body);color:#BEB4D4}
    .trust-bank-strip{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid rgba(184,210,232,.17);background:rgba(129,173,204,.07);border-radius:16px}
    .trust-bank-icon{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(156,183,223,.12);color:#C5D7F2}
    .trust-bank-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
    .trust-bank-details{min-width:0;flex:1}
    .trust-bank-details strong{display:block;color:#F5F4FF;font:600 14px/1.25 var(--display)}
    .trust-bank-details span{display:block;color:#B7C5D7;font:400 12px/1.4 var(--body);margin-top:4px}
    .trust-read-only{flex:none;color:#B8EBD7;font:600 10px/1.2 var(--body);padding:7px 9px;border-radius:20px;border:1px solid rgba(166,237,206,.22);background:rgba(103,185,152,.09)}
    .trust-flow-bridge{display:flex;align-items:center;gap:12px;color:#B8AECB;font:400 11px var(--body);padding:15px 4px}
    .trust-flow-bridge::before{content:"";display:block;width:2px;height:20px;background:linear-gradient(#92A9CE,rgba(146,169,206,.10));margin-left:33px;flex:none;border-radius:4px}
    .trust-review{border-radius:19px;padding:22px 22px 19px;background:rgba(7,5,25,.62);border:1px solid rgba(216,204,245,.19);box-shadow:0 17px 42px rgba(0,0,0,.17)}
    .trust-review-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:17px}
    .trust-review-heading span{display:block;color:#BDB0D7;font:600 10px var(--display);text-transform:uppercase;letter-spacing:.12em}
    .trust-review-heading h3{margin-top:5px;color:#fff;font:600 20px/1.15 var(--display)}
    .trust-review-status{flex:none;text-align:center;padding:7px 10px;border-radius:8px;background:rgba(255,230,108,.11);color:#FFE589;font:600 11px/1.3 var(--body)}
    .trust-review-status[data-state="approved"]{color:#B0EECF;background:rgba(117,203,161,.12)}
    .trust-review-status[data-state="declined"]{color:#CFBEDF;background:rgba(200,182,221,.10)}
    .trust-budget-row{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.055);border-radius:14px;padding:14px 15px}
    .trust-jar-dot{height:38px;width:38px;flex:none;border-radius:12px;background:linear-gradient(150deg,#8EDEB0,#4CA58B);display:grid;place-items:center}
    .trust-jar-dot svg{width:22px;height:22px;stroke:#143E38;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
    .trust-jar-info{flex:1;min-width:0}
    .trust-jar-info strong{display:block;font:600 14px var(--display);color:#F6F3FB}
    .trust-jar-info span{display:block;color:#C4B7D4;font:400 11px var(--body);margin-top:3px}
    .trust-jar-amount{color:#fff;font:600 22px/1.15 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
    .trust-proposal{display:flex;align-items:center;gap:10px;margin:13px 0 16px;padding:12px 13px;border-radius:12px;background:rgba(255,230,108,.06);border:1px solid rgba(255,230,108,.14);color:#E0D4ED;font:400 12px/1.5 var(--body)}
    .trust-proposal strong{color:#FFE589}
    .trust-proposal .spark{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;background:rgba(255,230,108,.11);color:#FFE589;font:600 16px var(--display)}
    .trust-proposal[data-state="approved"]{background:rgba(117,203,161,.07);border-color:rgba(117,203,161,.17)}
    .trust-proposal[data-state="approved"] strong{color:#B0EECF}
    .trust-proposal[data-state="declined"]{background:rgba(183,172,204,.06);border-color:rgba(183,172,204,.14)}
    .trust-proposal[data-state="declined"] strong{color:#E0D2EF}
    .trust-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .trust-action{min-height:45px;border-radius:10px;font:600 13px/1.3 var(--display);cursor:pointer;padding:11px 12px;transition:background .18s,transform .18s}
    .trust-action.primary{border:1px solid var(--button);color:var(--on-yellow);background:var(--button)}
    .trust-action.secondary{border:1px solid rgba(224,209,246,.30);background:rgba(255,255,255,.025);color:#F3ECFB}
    .trust-action:hover{transform:translateY(-1px)}
    .trust-action.primary:hover{background:#FFF19B}
    .trust-action.secondary:hover{background:rgba(255,255,255,.09)}
    .trust-action:focus-visible{outline:2px solid #fff;outline-offset:3px}
    .trust-visual-note{text-align:center;margin-top:16px;color:#B3A9C9;font:400 11px/1.5 var(--body)}
    .trust-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:58px;padding:26px 0 0;border-top:1px solid rgba(206,193,229,.17)}
    .trust-point{display:flex;gap:10px;align-items:flex-start;padding:0 16px;min-width:0;color:#E6DEEF;font:500 13px/1.5 var(--body)}
    .trust-point:first-child{padding-left:0}
    .trust-point:not(:last-child){border-right:1px solid rgba(206,193,229,.12)}
    .trust-point .mark{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:rgba(177,228,203,.10);color:#ACE1C9;font:700 12px/1 var(--body)}
    @media(max-width:950px){.trust-story{padding:84px 0 92px}.trust-grid{grid-template-columns:1fr;gap:34px}.trust-copy{max-width:730px}.trust-visual{width:100%;max-width:660px;margin:auto}.trust-points{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:19px}.trust-point:nth-child(3){padding-left:0}.trust-point:nth-child(2){border-right:0}}
    @media(max-width:580px){.trust-story{padding:68px 0 76px}.trust-copy h2{font-size:clamp(32px,7vw,42px)}.trust-copy{gap:19px}.trust-visual{border-radius:20px;padding:15px}.trust-review{padding:16px 13px}.trust-review-heading h3{font-size:19px}.trust-vis-top{margin-bottom:15px}.trust-bank-strip{padding:12px 10px;gap:8px}.trust-bank-details strong{font-size:13px}.trust-bank-details span{font-size:11px}.trust-read-only{font-size:9px;padding:5px 6px}.trust-jar-amount{font-size:20px}.trust-budget-row{padding:11px 10px}.trust-action{font-size:12px}.trust-points{margin-top:36px;grid-template-columns:1fr 1fr;gap:17px 0}.trust-point{padding:0 10px;font-size:12px}.trust-point:nth-child(odd){padding-left:0}.trust-point:nth-child(even){padding-right:0}.trust-point:nth-child(3){border-right:1px solid rgba(206,193,229,.12)}}
    @media(prefers-reduced-motion:reduce){.trust-action{transition:none!important}.trust-action:hover{transform:none!important}.trust-story::before{transform:none!important}}

    /* ===============================================================
       TIER I: THE JELLIVERSE
       A single expressive reward moment followed by an explicitly
       future-facing Jar Theme art study. All showcase objects are
       conceptual, not captures or achievements earned in a live account.
       =============================================================== */
    .jiverse-story{position:relative;isolation:isolate;padding:111px 0 121px;border-top:1px solid rgba(201,166,240,.15)}
    .jiverse-story::before{content:"";position:absolute;inset:-18px -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 58% 37% at 48% 28%,rgba(171,69,205,.19),transparent 80%),radial-gradient(ellipse 47% 34% at 70% 76%,rgba(59,113,173,.12),transparent 78%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .jiverse-intro{max-width:850px;margin:0 auto 48px;text-align:center}
    .jiverse-intro .eyebrow{display:block;margin-bottom:20px}
    .jiverse-intro h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .jiverse-intro h2 em{color:var(--button);font-style:normal}
    .jiverse-intro p{max-width:720px;margin:22px auto 0;color:#DDD2E9;font:400 17px/1.58 var(--body)}
    .jiverse-intro p+p{margin-top:15px}
    .jiverse-showcase{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-height:390px;overflow:hidden;border:1px solid rgba(239,191,245,.3);border-radius:30px;background:linear-gradient(126deg,#512269,#301a52 48%,#161031);box-shadow:0 26px 75px rgba(5,0,22,.27),inset 0 1px rgba(255,255,255,.08)}
    .jiverse-beans-world{position:relative;display:grid;align-content:center;justify-items:center;padding:36px 26px 27px;isolation:isolate;overflow:hidden;border-right:1px solid rgba(255,255,255,.13);background:radial-gradient(ellipse at 48% 50%,rgba(227,98,218,.20),transparent 68%)}
    .jiverse-visual-label{position:absolute;top:24px;left:26px;z-index:2;font:600 10px/1.3 var(--display);letter-spacing:.15em;text-transform:uppercase;color:#F5D9FF}
    .jiverse-bean-field{width:min(100%,340px);height:240px;position:relative;display:block;filter:drop-shadow(0 16px 19px rgba(21,2,35,.19))}
    .jiverse-bean-caption{text-align:center;z-index:2;max-width:340px}
    .jiverse-bean-caption strong{display:block;color:#fff;font:600 26px/1.2 var(--display)}
    .jiverse-bean-caption span{display:block;margin-top:7px;color:#E7D6EE;font:400 13px/1.5 var(--body)}
    .jiverse-medals-world{position:relative;display:flex;flex-direction:column;min-width:0;padding:33px clamp(19px,3.6vw,47px) 30px;background:radial-gradient(circle at 81% 13%,rgba(227,149,251,.14),transparent 48%)}
    .jiverse-medals-top{display:flex;justify-content:space-between;align-items:start;gap:12px}
    .jiverse-medals-top span{font:600 10px/1.4 var(--display);text-transform:uppercase;letter-spacing:.14em;color:#E9C9FF}
    .jiverse-medals-top small{font:500 11px/1.4 var(--body);color:#BAAACD}
    .jiverse-medals-world h3{font:600 27px/1.16 var(--display);letter-spacing:-.015em;margin-top:18px}
    .jiverse-medals-world>p{font:400 13px/1.55 var(--body);color:#DDCDE7;margin-top:9px;max-width:44ch}
    .jiverse-medal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:27px}
    /* Authentic JAM / POWER / FLEX milestone art — no fake circles or overlaid icon marks. */
    .jiverse-medal{position:relative;aspect-ratio:1;display:grid;place-items:center;min-width:0;overflow:visible;border:0;background:transparent;border-radius:50%;box-shadow:none}
    .jiverse-medal img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(7,0,24,.30));user-select:none;-webkit-user-drag:none}
    @media(hover:hover) and (prefers-reduced-motion:no-preference){.jiverse-medal img{transition:filter .25s}.jiverse-medal:hover img{filter:drop-shadow(0 8px 12px rgba(7,0,24,.42)) brightness(1.07)}}
    .jiverse-medals-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:13px;margin-top:auto;padding-top:28px;color:#E1D0ED;font:500 11px/1.4 var(--body)}
    .jiverse-stages{display:flex;align-items:center;gap:5px;white-space:nowrap;font:700 10px/1 var(--display);letter-spacing:.10em;color:#FFE08B}
    .jiverse-stages i{display:inline-block;height:1px;width:15px;background:rgba(255,230,130,.55)}
    .jiverse-showcase-note{font:400 11px/1.5 var(--body);color:#AFA3C3;text-align:right;margin:12px 3px 0}
    .jiverse-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:29px}
    .jiverse-reward{display:grid;align-content:start;gap:8px;padding:23px 23px 22px;border-radius:20px;border:1px solid rgba(220,182,250,.16);background:rgba(177,97,218,.07)}
    .jiverse-reward strong{font:600 18px/1.23 var(--display);color:#fff}
    .jiverse-reward p{font:400 13px/1.55 var(--body);color:#D2C5E2}
    .jiverse-reward .jiverse-note{display:block;color:#BFB0D1;font:500 11px/1.5 var(--body);margin-top:3px}
    .jiverse-theme{position:relative;isolation:isolate;margin-top:38px;overflow:hidden;border:1px solid rgba(231,194,241,.25);border-radius:29px;background:radial-gradient(ellipse at 76% 32%,rgba(242,146,203,.20),transparent 52%),linear-gradient(120deg,#281941,#3E2553 53%,#261A43);display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);min-height:380px}
    .jiverse-theme-copy{position:relative;z-index:2;padding:clamp(30px,4.4vw,57px);display:grid;justify-items:start;align-content:center;gap:16px}
    .jiverse-theme-tag{display:inline-flex;align-items:center;gap:8px;color:#FFE1A4;font:700 10px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase}
    .jiverse-theme-tag::before{content:"";height:7px;width:7px;border-radius:50%;background:#FFE1A4}
    .jiverse-theme-copy h3{font:600 clamp(26px,2.85vw,39px)/1.1 var(--display);letter-spacing:-.02em}
    .jiverse-theme-copy h3 em{color:var(--button);font-style:normal}
    .jiverse-theme-copy p{font:400 16px/1.57 var(--body);color:#E6D9EE;max-width:47ch}
    .jiverse-theme-disclaimer{max-width:350px;color:#C9BBD6;font:400 11px/1.6 var(--body)}
    .jiverse-theme-visual{position:relative;display:grid;align-content:center;justify-items:center;padding:33px 19px 25px;overflow:hidden;background:radial-gradient(circle at 56% 48%,rgba(242,194,246,.13),transparent 59%)}
    .jiverse-theme-visual::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;border:1px solid rgba(255,236,255,.14);box-shadow:0 0 0 36px rgba(255,255,255,.025);pointer-events:none}
    .jiverse-theme-jar{position:relative;z-index:1;width:163px;height:211px;transition:transform .36s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 23px 18px rgba(11,0,25,.27))}
    .jiverse-theme-lid{position:absolute;z-index:3;top:0;left:3px;right:3px;height:29px;border-radius:12px 12px 8px 8px;border:1px solid rgba(255,255,255,.9);background:linear-gradient(165deg,#F9FAFF,#C3BACC 59%,#9793B1);box-shadow:0 5px 7px rgba(0,0,0,.13)}
    .jiverse-theme-body{position:absolute;inset:23px 11px 0;overflow:hidden;border:2px solid rgba(240,229,255,.74);border-radius:9px 9px 27px 27px;background:linear-gradient(105deg,rgba(255,255,255,.4),rgba(255,255,255,.06) 43%,rgba(255,255,255,.23));box-shadow:inset 9px 2px 10px rgba(255,255,255,.15)}
    .jiverse-theme-body::before{content:"";position:absolute;z-index:3;left:13px;top:15px;width:7px;height:100px;border-radius:20px;background:rgba(255,255,255,.32);pointer-events:none}
    .jiverse-theme-fill{position:absolute;inset:35% 0 0;transition:background .35s ease;background:linear-gradient(165deg,#FFC5A5,#F06F5B)}
    .jiverse-theme-label{position:absolute;z-index:2;top:69px;left:17px;right:17px;min-height:51px;display:grid;place-items:center;padding:5px 4px;text-align:center;border-radius:8px;background:rgba(253,244,225,.89);color:#884734;border:1px solid rgba(255,255,255,.5);font:700 12px/1.1 var(--display);letter-spacing:.025em;transition:background .3s,color .3s}
    .jiverse-theme-jar[data-theme="gaming"] .jiverse-theme-fill{background:repeating-linear-gradient(0deg,transparent,transparent 17px,rgba(16,42,41,.24) 17px,rgba(16,42,41,.24) 19px),linear-gradient(155deg,#A1F8CB,#22A3A7)}
    .jiverse-theme-jar[data-theme="gaming"] .jiverse-theme-label{border-radius:0;background:#152942;color:#8CFFCE;box-shadow:4px 4px 0 rgba(51,232,210,.38);font-family:monospace}
    .jiverse-theme-jar[data-theme="drama"] .jiverse-theme-fill{background:radial-gradient(circle at 30% 34%,#F8E8FF,transparent 30%),linear-gradient(155deg,#EDB9F4,#995BC6)}
    .jiverse-theme-jar[data-theme="drama"] .jiverse-theme-label{background:#FCE3F1;color:#853A78;border-radius:24px;font-style:italic}
    .jiverse-theme-jar[data-theme="kimchi"] .jiverse-theme-label{background:#FCE8CE;color:#9E5136}
    .jiverse-theme-picker{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:24px}
    .jiverse-theme-choice{border:1px solid rgba(255,255,255,.29);border-radius:100px;padding:10px 15px;background:rgba(20,9,39,.47);color:#F3E8FA;font:600 12px var(--display);transition:border-color .22s,background .22s}
    .jiverse-theme-choice[aria-pressed="true"]{background:var(--button);color:var(--on-yellow);border-color:var(--button)}
    .jiverse-theme-choice:hover{border-color:#FFE66C}
    .jiverse-theme-choice:focus-visible{outline:2px solid #fff;outline-offset:3px}
    .jiverse-theme-state{z-index:2;color:#E8D8F4;text-align:center;font:500 12px/1.4 var(--body);margin-top:15px}
    .jiverse-outro{display:grid;justify-items:center;text-align:center;gap:12px;margin-top:37px}
    .jiverse-outro small{color:#B8AAC8;max-width:720px;font:400 12px/1.5 var(--body)}
    @keyframes jiverse-medal-enter{0%{opacity:.35;transform:translateY(13px) scale(.82)}66%{opacity:1;transform:translateY(-3px) scale(1.06)}100%{opacity:1;transform:none}}
    @keyframes jiverse-bean-enter{0%{opacity:.6;scale:.88}65%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
    @media(prefers-reduced-motion:no-preference){.jiverse-play .jiverse-medal{animation:jiverse-medal-enter 580ms cubic-bezier(.2,.8,.26,1) both;animation-delay:calc(var(--medal-index)*60ms)}.jiverse-play .jiverse-beans-image{animation:jiverse-bean-enter 620ms cubic-bezier(.2,.8,.26,1) both;animation-delay:80ms}}
    @media(max-width:950px){.jiverse-story{padding:85px 0 97px}.jiverse-showcase{grid-template-columns:1fr}.jiverse-beans-world{min-height:335px;border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}.jiverse-medals-world{padding:28px 34px 35px}.jiverse-medal-grid{max-width:620px}.jiverse-theme{grid-template-columns:1fr}.jiverse-theme-copy{padding:36px 35px 12px}.jiverse-theme-visual{min-height:370px;padding:25px 20px 32px}}
    @media(max-width:700px){.jiverse-rewards{grid-template-columns:1fr}.jiverse-reward{padding:19px 22px}.jiverse-theme-copy h3{max-width:550px}}
    @media(max-width:580px){.jiverse-story{padding:68px 0 81px}.jiverse-intro{margin-bottom:31px}.jiverse-intro h2{font-size:clamp(32px,7vw,42px)}.jiverse-intro p{margin-top:17px}.jiverse-showcase{border-radius:21px}.jiverse-beans-world{min-height:340px;padding:35px 14px 22px}.jiverse-bean-field{height:234px}.jiverse-bean-caption strong{font-size:23px}.jiverse-medals-world{padding:26px 20px 28px}.jiverse-medals-world h3{font-size:25px}.jiverse-medal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:23px}.jiverse-medals-foot{flex-wrap:wrap}.jiverse-showcase-note{text-align:left}.jiverse-rewards{gap:10px;margin-top:19px}.jiverse-theme{margin-top:25px;border-radius:22px}.jiverse-theme-copy{padding:31px 23px 10px;gap:13px}.jiverse-theme-copy h3{font-size:32px}.jiverse-theme-visual{min-height:358px}.jiverse-theme-picker{gap:6px}.jiverse-theme-choice{padding:9px 12px;font-size:11px}.jiverse-outro{margin-top:28px}}
    @media(prefers-reduced-motion:reduce){.jiverse-story::before{transform:none!important}.jiverse-medal,.jiverse-beans-image{animation:none!important}.jiverse-theme-jar,.jiverse-theme-fill,.jiverse-theme-label,.jiverse-theme-choice{transition:none!important}}


    /* ===============================================================
       TIER J: SIMPLE, TRANSPARENT PRICING
       Prices and plan limits supplied in the October 2026 brief.
       Cards deliberately share equal visual priority: no invented
       "most popular" claim, discounts, or implied annual billing.
       =============================================================== */
    .price-story{position:relative;isolation:isolate;padding:108px 0 116px;border-top:1px solid rgba(201,166,240,.15)}
    .price-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 69% 57% at 50% 38%,rgba(109,74,163,.12),transparent 77%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .price-intro{max-width:810px;margin:0 auto 47px;text-align:center}
    .price-intro .eyebrow{display:block;margin-bottom:20px}
    .price-intro h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .price-intro h2 em{color:var(--button);font-style:normal}
    .price-intro p{max-width:680px;margin:23px auto 0;color:#D7CEE3;font:400 17px/1.57 var(--body)}
    .price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
    .price-card{--price-accent:#C39CEF;position:relative;display:flex;flex-direction:column;gap:0;min-width:0;min-height:290px;overflow:hidden;border:1px solid rgba(226,203,248,.20);border-radius:22px;padding:28px 26px 25px;background:linear-gradient(158deg,rgba(38,29,63,.87) 0%,rgba(20,15,43,.95) 100%);box-shadow:0 18px 44px rgba(1,0,12,.16)}
    .price-card::before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;background:var(--price-accent);border-radius:0 0 6px 6px;opacity:.92}
    .price-card:nth-child(2){--price-accent:#8FDFC3}
    .price-card:nth-child(3){--price-accent:#F5D77D}
    .price-card:nth-child(4){--price-accent:#C8AEF8}
    .price-card h3{color:#FAF6FF;font:600 21px/1.25 var(--display);letter-spacing:-.02em}
    .price-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:25px;font-variant-numeric:tabular-nums}
    .price-amount strong{color:#FFF;font:600 clamp(34px,3vw,44px)/1.1 var(--display);letter-spacing:-.04em}
    .price-amount small{color:#BDACCF;font:400 13px/1.4 var(--body);white-space:nowrap}
    .price-card-rule{height:1px;background:rgba(230,212,248,.13);margin:26px 0 20px}
    .price-card-bottom{margin-top:auto;display:grid;gap:6px}
    .price-account-count{color:var(--price-accent);font:600 24px/1.2 var(--display);font-variant-numeric:tabular-nums}
    .price-account-caption{color:#D6C9E4;font:400 14px/1.45 var(--body)}
    .price-outro{display:grid;justify-items:center;gap:15px;text-align:center;margin-top:34px}
    .price-outro-line{color:#E7DDEE;font:500 14px/1.55 var(--body)}
    .price-outro-line strong{color:#fff;font-weight:600}
    .price-outro .btn{margin-top:3px}
    .price-footnote{max-width:660px;color:#B8A9C8;font:400 12px/1.55 var(--body)}
    @media(hover:hover) and (prefers-reduced-motion:no-preference){.price-card{transition:transform .26s cubic-bezier(.22,1,.36,1),border-color .26s}.price-card:hover{transform:translateY(-4px);border-color:rgba(235,215,254,.39)}}
    @media(max-width:1080px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-card{min-height:255px}}
    @media(max-width:700px){.price-grid{gap:12px}.price-card{padding:25px 20px 23px}}
    @media(max-width:580px){.price-story{padding:67px 0 79px}.price-intro{margin-bottom:30px}.price-intro h2{font-size:clamp(32px,7vw,42px)}.price-intro p{margin-top:18px}.price-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.price-card{min-height:227px;border-radius:17px;padding:24px 15px 19px}.price-card::before{left:15px;right:15px}.price-card h3{font-size:18px}.price-amount{margin-top:20px;gap:2px}.price-amount strong{font-size:clamp(28px,8.3vw,39px)}.price-amount small{font-size:12px}.price-card-rule{margin:19px 0 16px}.price-account-count{font-size:21px}.price-account-caption{font-size:12px}.price-outro{margin-top:26px}.price-outro-line{font-size:13px}}
    @media(max-width:360px){.price-card{padding-inline:12px}.price-card::before{left:12px;right:12px}.price-amount strong{font-size:27px}}
    @media(prefers-reduced-motion:reduce){.price-story::before{transform:none!important}.price-card{transition:none!important}.price-card:hover{transform:none!important}}


    /* ===============================================================
       TIER K: BUDGET BITES + FREQUENTLY ASKED QUESTIONS
       Real published posts and their original WordPress hero artwork.
       Native details/summary answers stay in the HTML for indexing.
       =============================================================== */
    .bites-story{position:relative;isolation:isolate;padding:98px 0 93px;border-top:1px solid rgba(201,166,240,.15)}
    .bites-story::before{content:"";position:absolute;inset:0 -4vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 65% 57% at 31% 44%,rgba(152,74,158,.13),transparent 78%);transform:translate3d(0,var(--atmos-y,0px),0)}
    .bites-head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(26px,5vw,72px);align-items:end;margin-bottom:33px}
    .bites-head .eyebrow{display:block;margin-bottom:19px}
    .bites-head h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .bites-head h2 em{color:var(--button);font-style:normal}
    .bites-intro{display:grid;gap:11px;padding-bottom:4px}
    .bites-intro p{font:400 17px/1.57 var(--body);color:#D7CEE3}
    .bites-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
    .bites-card{min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;border:1px solid rgba(213,180,244,.2);background:linear-gradient(160deg,#25173F,#17102E);box-shadow:0 17px 42px rgba(1,0,18,.17);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
    .bites-card:hover{transform:translateY(-4px);border-color:rgba(231,209,251,.43)}
    .bites-image-link{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:#3B2455}
    .bites-image-link img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.22,1,.36,1)}
    .bites-card:hover .bites-image-link img{transform:scale(1.035)}
    .bites-card-content{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:23px 23px 24px;gap:10px}
    .bites-category{font:600 10px/1.35 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#D7A9FC}
    .bites-card h3{font:600 21px/1.25 var(--display);letter-spacing:-.015em}
    .bites-card h3 a{color:#FCF9FF;text-decoration:none}
    .bites-card h3 a:hover{color:var(--button)}
    .bites-card p{font:400 14px/1.55 var(--body);color:#D1C4E0}
    .bites-meta{font:400 11px/1.4 var(--body);color:#AFA1C6}
    .bites-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:9px;color:var(--button);text-decoration:none;font:600 13px var(--display)}
    .bites-card-link:hover{text-decoration:underline}
    .bites-card a:focus-visible,.bites-cta a:focus-visible{outline:2px solid var(--button);outline-offset:4px}
    .bites-cta{display:flex;align-items:center;justify-content:center;margin-top:29px}
    .faq-story{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.77fr) minmax(0,1.23fr);gap:clamp(35px,6vw,92px);padding:86px 0 106px;border-top:1px solid rgba(201,166,240,.15)}
    .faq-intro{align-self:start;display:grid;align-content:start;justify-items:start;gap:18px}
    .faq-intro h2{font:600 clamp(32px,3.3vw,48px)/1.1 var(--display);letter-spacing:-.02em}
    .faq-intro h2 em{color:var(--button);font-style:normal}
    .faq-intro p{font:400 17px/1.55 var(--body);color:#D7CEE3;max-width:41ch}
    .faq-intro .btn{margin-top:7px}
    .faq-list{display:grid;align-content:start;border-top:1px solid rgba(224,201,247,.2)}
    .faq-item{border-bottom:1px solid rgba(224,201,247,.2)}
    .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:73px;padding:19px 8px 19px 0;color:#F7F2FC;font:600 17px/1.42 var(--display);cursor:pointer;list-style:none}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{content:"+";display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;border:1px solid rgba(217,187,246,.26);color:#E4C5FF;background:rgba(177,116,225,.075);font:400 23px/1 var(--display);transition:transform .22s ease,background .22s}
    .faq-item[open] summary::after{content:"−";background:rgba(255,230,108,.11);border-color:rgba(255,230,108,.38);color:var(--button)}
    .faq-item summary:hover{color:var(--button)}
    .faq-item summary:focus-visible{outline:2px solid var(--button);outline-offset:4px;border-radius:7px}
    .faq-answer{padding:0 54px 23px 0;color:#D0C4DF;font:400 15px/1.7 var(--body)}
    .faq-answer strong{color:#fff;font-weight:600}
    @media(max-width:900px){.bites-story{padding:82px 0 83px}.bites-head{grid-template-columns:1fr;gap:18px}.bites-intro{max-width:710px}.bites-grid{gap:13px}.bites-card-content{padding:18px 17px 20px}.bites-card h3{font-size:19px}.faq-story{grid-template-columns:1fr;gap:29px;padding:76px 0 91px}.faq-intro{max-width:720px}}
    @media(max-width:660px){.bites-story{padding:66px 0 73px}.bites-head{margin-bottom:25px}.bites-head h2{font-size:clamp(32px,7vw,42px)}.bites-grid{grid-template-columns:1fr;gap:16px}.bites-card{border-radius:19px}.bites-card-content{padding:19px 21px 22px}.bites-card h3{font-size:22px}.bites-image-link{aspect-ratio:16/8}.bites-cta{margin-top:24px}.faq-story{padding:65px 0 81px}.faq-intro h2{font-size:clamp(32px,7vw,42px)}.faq-item summary{font-size:16px;min-height:68px}.faq-answer{font-size:14px;padding-right:27px}}
    @media(prefers-reduced-motion:reduce){.bites-story::before{transform:none!important}.bites-card,.bites-image-link img,.faq-item summary::after{transition:none!important}.bites-card:hover,.bites-card:hover .bites-image-link img{transform:none!important}}


    /* ===============================================================
       TIER L: FINAL CONVERSION + ESTABLISHED SITE FOOTER
       Deliberate visual reset: benefit and store choice, no new feature
       education. Footer architecture follows approved nav group plan.
       =============================================================== */
    .final-story{position:relative;isolation:isolate;overflow:hidden;padding:112px clamp(22px,5vw,70px) 117px;border:1px solid rgba(238,204,255,.29);border-radius:30px;background:radial-gradient(ellipse 60% 80% at 50% 58%,rgba(148,68,203,.39),transparent 75%),radial-gradient(ellipse 40% 60% at 4% 14%,rgba(215,112,185,.18),transparent 80%),radial-gradient(ellipse 45% 67% at 97% 93%,rgba(80,104,208,.19),transparent 80%),linear-gradient(148deg,#2E1755 0%,#281242 52%,#120C2D 100%);box-shadow:0 30px 80px rgba(5,0,24,.29),inset 0 1px 0 rgba(255,255,255,.10);text-align:center}
    .final-inner{position:relative;z-index:1;max-width:840px;margin:0 auto;display:grid;justify-items:center}
    .final-inner .eyebrow{color:#E2B6FD;display:block;margin-bottom:23px}
    .final-title{font:600 clamp(48px,6.1vw,82px)/1.07 var(--display);letter-spacing:-.035em}
    .final-title span{display:block}
    .final-title em{display:block;color:var(--button);font-style:normal}
    .final-deck{font:400 18px/1.64 var(--body);color:#E8DAF1;max-width:590px;margin:25px auto 0}
    .final-actions{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:13px;margin-top:33px}
    .final-store-btn{min-width:215px;min-height:58px;display:inline-flex;gap:12px;justify-content:center;align-items:center;padding:15px 22px;border:1.5px solid #FFE66C;border-radius:12px;background:var(--button);color:var(--on-yellow);text-decoration:none;font:600 15px/1.25 var(--display);transition:transform .22s,box-shadow .22s,background .22s}
    .final-store-btn.outline{background:rgba(13,5,35,.20);color:#FFF9E9;border-color:rgba(255,230,108,.78)}
    .final-store-btn:hover{transform:translateY(-3px);box-shadow:0 15px 33px rgba(10,0,24,.28)}
    .final-store-btn.outline:hover{background:rgba(255,230,108,.12)}
    .final-store-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
    .final-store-btn svg{height:22px;width:22px;display:block;flex:none;fill:currentColor}
    .final-trial{font:500 12px/1.5 var(--body);color:#D2BDE3;margin-top:20px}
    .site-footer{margin-top:82px;padding:0 0 27px;color:#D6C9E4}
    .footer-main{display:grid;grid-template-columns:minmax(210px,1.2fr) repeat(4,minmax(110px,1fr));gap:clamp(18px,3vw,46px);padding-bottom:54px}
    .footer-brand{display:grid;align-content:start;justify-items:start;gap:16px;min-width:0}
    .footer-logo{display:inline-block;width:112px;line-height:0}
    .footer-logo svg{display:block;width:100%;height:auto}
    .footer-tagline{font:600 15px/1.4 var(--display);color:#F6F0FF}
    .footer-brand-note{font:400 12px/1.65 var(--body);max-width:235px;color:#B4A7C9}
    .footer-col{display:grid;align-content:start;justify-items:start;gap:13px;min-width:0}
    .footer-col h3{font:600 12px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#E5C5FB;margin:4px 0 6px}
    .footer-col a{font:400 13px/1.35 var(--body);color:#C9BDD7;text-decoration:none;transition:color .15s}
    .footer-col a:hover,.footer-bottom a:hover{color:var(--button)}
    .site-footer a:focus-visible{outline:2px solid var(--button);outline-offset:4px;border-radius:3px}
    .footer-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:15px 30px;flex-wrap:wrap;border-top:1px solid rgba(227,204,247,.16);padding-top:23px;color:#AA9BBE;font:400 11px/1.55 var(--body)}
    .footer-bottom-links{display:flex;gap:12px 24px;flex-wrap:wrap}
    .footer-bottom a{color:#C4B5D3;text-decoration:none}
    .prototype-footnote{margin-top:13px;font:400 10px/1.5 var(--body);color:#746686}
    @media(max-width:1060px){.footer-main{grid-template-columns:repeat(4,minmax(0,1fr));gap:35px 22px}.footer-brand{grid-column:1/-1}.footer-brand-note{max-width:440px}}
    @media(max-width:650px){.final-story{padding:78px 21px 83px;border-radius:22px}.final-inner .eyebrow{font-size:10px;margin-bottom:18px}.final-title{font-size:clamp(42px,10.2vw,60px)}.final-deck{font-size:17px;margin-top:22px}.final-actions{gap:10px;width:100%;margin-top:27px}.final-store-btn{width:min(100%,350px);min-height:55px}.site-footer{margin-top:65px}.footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:31px 20px;padding-bottom:37px}.footer-brand{grid-column:1/-1;gap:12px}.footer-col{gap:12px}.footer-col h3{margin:2px 0 4px}.footer-bottom{gap:12px}.footer-bottom-links{gap:10px 18px}}
    @media(max-width:350px){.final-title{font-size:40px}.footer-col a{font-size:12px}}
    @media(prefers-reduced-motion:reduce){.final-store-btn,.footer-col a{transition:none!important}.final-store-btn:hover{transform:none!important}}

    /* ===============================================================
       HERO ATMOSPHERE: FLOATING ORIGINAL JELLI BUBBLES
       Uses the real Illustrator three-bubble vector master already in
       this HTML, not another uploaded image. All tuning is here.
       =============================================================== */
    .hero-copy {
      position: relative;
      isolation: isolate;
      --hero-bubbles-size: 480px;       /* Overall scale */
      --hero-bubbles-left: -8vw;       /* Horizontal offset from hero copy */
      --hero-bubbles-bottom: -140px;    /* Vertical offset from hero copy */
      --hero-bubbles-opacity: 15%;     /* 15% original purple */
      --hero-bubbles-duration: 9s;     /* A full gentle float cycle */
    }
    .hero-bubbles-symbol {
      position:absolute;
      width:var(--hero-bubbles-size);
      height:auto;
      aspect-ratio:40.9758 / 58.4828;
      left:var(--hero-bubbles-left);
      bottom:var(--hero-bubbles-bottom);
      display:block;
      color:#8d6dc2;                  /* Original Jelli logo bubble purple */
      opacity:var(--hero-bubbles-opacity);
      z-index:-1;
      pointer-events:none;
      user-select:none;
      animation:hero-bubbles-drift var(--hero-bubbles-duration) ease-in-out infinite;
      transform-origin:50% 50%;
    }
    @keyframes hero-bubbles-drift {
      0%,100% {transform:translate3d(0,0,0) rotate(-1deg)}
      50% {transform:translate3d(7px,-13px,0) rotate(1.5deg)}
    }
    @media (max-width:1250px) {
      .hero-copy {--hero-bubbles-left:-20px;--hero-bubbles-size:235px}
    }
    @media (max-width:580px) {
      .hero-copy {
        --hero-bubbles-left:-9px;
        --hero-bubbles-bottom:-55px;
        --hero-bubbles-size:165px;
        --hero-bubbles-opacity:.16;
      }
    }
    @media (prefers-reduced-motion:reduce) {
      .hero-bubbles-symbol {animation:none!important;transform:none!important}
    }


    /* ===============================================================
       HERO / A WEEK IN THE JARS: STATIONARY JJ + 16-SECOND COPY LOOP
       The notification enters ONCE after the 1.5-second opening delay.
       JJ stays completely still; ONLY the four short messages fade.
       Each message gets a four-second beat (0.35s in / 3.3s hold /
       0.35s out). The four beats repeat without card movement.
       =============================================================== */
    .scene {
      --jj-hero-start-delay: 1.5s;
      --jj-hero-cycle: 16s;
    }
    .jj-hero-persistent {
      pointer-events: none;
    }
    /* One-time entrance for the entire glass card; never repeats. */
    @keyframes jj-notification-pop {
      0%   { opacity:0; transform:translateY(12px) scale(.98); filter:blur(2px); }
      100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
    }
    .jj-hero-message-stack {
      position: relative;
      min-height: 2.8em; /* Hold card geometry steady during copy changes. */
    }
    .jj-notification-copy .jj-hero-message {
      position: absolute;
      top: 0; left: 0; right: 0;
      opacity: 0;
      animation: jj-hero-copy-crossfade var(--jj-hero-cycle) linear
        calc(var(--jj-hero-start-delay) + var(--jj-beat-offset) - var(--jj-hero-cycle)) infinite both;
    }
    @keyframes jj-hero-copy-crossfade {
      0%       { opacity: 0; }
      2.1875%  { opacity: 1; }  /* 0.35s fade in */
      22.8125% { opacity: 1; }  /* 3.30s readable hold */
      25%      { opacity: 0; }  /* 0.35s fade out */
      25.001%,100% { opacity: 0; }
    }
    @media (prefers-reduced-motion:reduce) {
      /* Keep one expression and the first line visible without motion. */
      .jj-notification-copy .jj-hero-message {animation:none!important;opacity:0!important}
      .jj-notification-copy .jj-hero-message[data-jj-beat="payday"] {opacity:1!important}
    }


    /* ===============================================================
       TIER I: JAR THEME STUDIO · ORIGINAL 3-LAYER COMPOSITES
       Actual 100%-full Jelli Jar vector, preserved Illustrator glass.
       Each WebP uses its authored Normal/Screen/Color Burn blend and opacity.
       No container tile. Type, art, and interaction share the dark stage.
       =============================================================== */
    .jiverse-theme-world{--theme-tone:#7BA5DA;display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);align-items:center;gap:clamp(32px,6vw,93px);position:relative;isolation:isolate;margin:100px 0 52px;padding:54px clamp(4px,1.5vw,20px) 15px;border-top:1px solid rgba(218,185,248,.14)}
    .jiverse-theme-editorial{position:relative;z-index:2;display:grid;justify-items:start;align-content:center;gap:0}
    .jiverse-theme-editorial>.eyebrow{margin-bottom:19px}
    .jiverse-theme-editorial h3{font:600 clamp(33px,3.4vw,49px)/1.09 var(--display);letter-spacing:-.025em;color:#F8F4FD}
    .jiverse-theme-editorial h3 em{font-style:normal;color:var(--button)}
    .jiverse-theme-lead{max-width:490px;margin-top:23px;color:#D8CDE5;font:400 17px/1.56 var(--body)}
    /* Three open editorial rails, not a set of bordered pills. */
    .jiverse-theme-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%;margin-top:34px;border-bottom:1px solid rgba(225,202,249,.19)}
    .jiverse-theme-tab{position:relative;display:flex;align-items:start;gap:9px;padding:15px 8px 17px;background:none;border:0;border-top:1px solid rgba(225,202,249,.19);border-radius:0;text-align:left;color:#C9BDD8;cursor:pointer;transition:color .25s,background .25s}
    .jiverse-theme-tab:first-child{padding-left:0}
    .jiverse-theme-tab::after{content:"";position:absolute;bottom:-1px;height:3px;left:0;right:0;background:var(--button);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)}
    .jiverse-theme-tab[aria-pressed="true"]{color:#FFF}
    .jiverse-theme-tab[aria-pressed="true"]::after{transform:scaleX(1)}
    .jiverse-theme-tab:hover{color:var(--button)}
    .jiverse-theme-tab-num{font:600 10px/1.5 var(--display);color:#9B85B6;letter-spacing:.04em;margin-top:2px}
    .jiverse-theme-tab-label{display:grid;gap:5px;min-width:0}
    .jiverse-theme-tab-label strong{font:600 16px/1.3 var(--display);white-space:nowrap}
    .jiverse-theme-tab-label small{font:400 11px/1.4 var(--body);color:#AFA0C4;white-space:normal}
    .jiverse-theme-tab-arrow{margin-left:auto;color:#A88ABF;font-size:13px}
    .jiverse-theme-tab[aria-pressed="true"] .jiverse-theme-tab-arrow{color:var(--button)}
    .jiverse-theme-tab:focus-visible,.jiverse-color-swatch:focus-visible{outline:2px solid var(--button);outline-offset:5px}
    .jiverse-color-picker{margin-top:28px;display:grid;gap:14px}
    .jiverse-color-heading{font:600 11px/1.3 var(--display);letter-spacing:.13em;text-transform:uppercase;color:#E5D7F0}
    .jiverse-color-heading span{font-weight:400;letter-spacing:.06em;color:#BAA7CC}
    .jiverse-color-swatches{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
    .jiverse-color-swatch{position:relative;width:28px;height:28px;flex:none;border-radius:50%;background:var(--swatch);border:2px solid rgba(255,255,255,.35);padding:0;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.16);transition:transform .2s,box-shadow .2s,border-color .2s}
    .jiverse-color-swatch[aria-pressed="true"]{outline:2px solid #FFE66C;outline-offset:4px;border-color:#FFF;box-shadow:0 0 15px color-mix(in srgb,var(--swatch) 50%,transparent)}
    .jiverse-color-swatch:hover{transform:scale(1.16)}
    .jiverse-theme-future{display:flex;align-items:center;gap:10px;font:400 12px/1.55 var(--body);color:#AD9FC2;margin-top:26px;max-width:480px}
    .jiverse-theme-future>span{color:var(--button);font-size:16px}
    .jiverse-theme-stage{position:relative;isolation:isolate;display:grid;align-content:center;justify-items:center;min-width:0;min-height:545px;padding:13px 0 36px}
    .jiverse-theme-aura{position:absolute;z-index:-2;width:min(88%,480px);aspect-ratio:1;left:50%;top:46%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--theme-tone) 22%,transparent) 0%,color-mix(in srgb,var(--theme-tone) 10%,transparent) 32%,transparent 70%);filter:blur(24px);transition:background .5s}
    .jiverse-theme-jar{--jar-tone:var(--theme-tone);position:relative;z-index:1;width:clamp(166px,20.4vw,242px);height:auto;max-width:100%;animation:jiverse-theme-hover 6.2s ease-in-out infinite;filter:drop-shadow(0 27px 23px rgba(5,0,19,.38))}
    .jiverse-theme-master{display:block;width:100%;height:auto;overflow:visible}
    .jiverse-theme-stage-caption{position:relative;z-index:1;margin-top:17px;font:600 11px/1.4 var(--display);color:#DBC6E8;letter-spacing:.15em;text-align:center}
    .jiverse-theme-stage-spark{color:var(--button);font-size:13px;letter-spacing:0;margin-right:8px}
    .jiverse-theme-stage-slash{color:#866B9F;margin:0 7px}
    @keyframes jiverse-theme-hover{0%,100%{transform:translateY(2px)}50%{transform:translateY(-10px)}}
    @media(max-width:940px){.jiverse-theme-world{gap:25px;margin-top:75px;padding-top:46px}.jiverse-theme-tab{gap:5px}.jiverse-theme-tab-label strong{font-size:14px}.jiverse-theme-tab-arrow{display:none}.jiverse-theme-stage{min-height:460px}.jiverse-theme-jar{width:clamp(157px,22.1vw,225px)}}
    @media(max-width:700px){.jiverse-theme-world{grid-template-columns:1fr;margin-top:70px;padding:38px 0 5px;gap:12px}.jiverse-theme-editorial h3{font-size:clamp(32px,7.5vw,46px)}.jiverse-theme-lead{margin-top:19px}.jiverse-theme-tabs{margin-top:26px}.jiverse-theme-tab{padding:14px 8px 14px;gap:6px}.jiverse-theme-tab:first-child{padding-left:0}.jiverse-theme-tab-num{font-size:9px}.jiverse-theme-tab-label strong{font-size:15px}.jiverse-theme-tab-label small{font-size:10px}.jiverse-color-picker{margin-top:24px}.jiverse-theme-future{margin-top:20px}.jiverse-theme-stage{min-height:415px;padding:10px 0 18px}.jiverse-theme-jar{width:min(47.6vw,212px)}.jiverse-theme-aura{width:80%;top:48%}}
    @media(max-width:360px){.jiverse-theme-tab-label strong{font-size:13px}.jiverse-theme-tab-num{font-size:9px}.jiverse-theme-tab{gap:4px}.jiverse-theme-jar{width:49.3vw}.jiverse-color-swatches{gap:6px}}
    @media(prefers-reduced-motion:reduce){.jiverse-theme-jar{animation:none!important}.jiverse-theme-tab,.jiverse-theme-tab::after,.jiverse-color-swatch,.jiverse-theme-aura{transition:none!important}}


    /* ==============================================================
       DARK ATMOSPHERE PASS · TIER F / TIER I
       Preserve surfaces only where they serve an interaction: Tier B,
       collectible Milestones, and JJ's functional console. Character
       art floats unboxed; no ornamental ring stacks.
       ============================================================== */
    /* Meet JJ uses the new open, centered V2 playground above. */
    /* Preserve the Milestone panel. Remove only decorative circles behind beans. */
    .jiverse-beans-world {
      background:radial-gradient(ellipse at 50% 46%,rgba(178,83,207,.12),transparent 70%);
    }
    .jiverse-bean-field {
      display:grid;place-items:center;
      width:min(100%,365px);height:251px;
      filter:none;
    }
    .jiverse-beans-image {
      display:block;width:min(100%,325px);max-height:250px;height:auto;
      object-fit:contain;
      filter:drop-shadow(0 17px 15px rgba(14,1,31,.27));
      user-select:none;-webkit-user-drag:none;
    }
    /* Jar Themes: retain color-responsive aura, remove geometric orbit outlines. */
    .jiverse-theme-stage {background:transparent;}
    @media(max-width:950px) {
    }
    @media(max-width:580px) {
      .jiverse-bean-field {height:238px;}
      .jiverse-beans-image {max-height:235px;max-width:305px;}
    }
    @media(prefers-reduced-motion:reduce) {
      .jiverse-beans-image {animation:none!important;}
    }

    /* ===============================================================
       ATMOSPHERE: FULL-BLEED SECTION LIGHT / NO HARD VERTICAL SEAMS
       Each storytelling section lives inside the 1200px content rail.
       Previously its ::before light also lived there (+4vw), creating
       vertical cut lines on wide screens. Extend ONLY ambient light
       to the full viewport; copy, cards and controls keep their width.
       Both outer edges feather to genuine transparent darkness.
       =============================================================== */
    .jars-story::before,
    .setup-story::before,
    .payday-story::before,
    .spend-story::before,
    .jjf-story::before,
    .life-story::before,
    .trust-story::before,
    .jiverse-story::before,
    .price-story::before,
    .bites-story::before {
      left:50%;
      right:auto;
      width:100vw;
      max-width:none;
      transform:translate3d(-50%,var(--atmos-y,0px),0);
      /* Feather BOTH axes. The horizontal mask removed the wide-screen
         side seams; the vertical mask prevents a hard glow cutoff at
         each section's top/bottom (especially visible in Tier C). */
      -webkit-mask-image:
        linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%),
        linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);
      mask-image:
        linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%),
        linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);
      -webkit-mask-composite:source-in;
      mask-composite:intersect;
      /* Light now fades to darkness on all four sides, never a panel. */
    }
    /* The theme Jar gets its own local aura; leave it floating and unboxed. */
    @media(prefers-reduced-motion:reduce) {
      .jars-story::before,
      .setup-story::before,
      .payday-story::before,
      .spend-story::before,
      .jjf-story::before,
      .life-story::before,
      .trust-story::before,
      .jiverse-story::before,
      .price-story::before,
      .bites-story::before {
        transform:translateX(-50%)!important;
        will-change:auto!important;
      }
    }

    /* HERO PHONE VIDEO — a true portrait 28s screen capture, under the supplied bezel.
       --hero-phone-height controls physical size independently of the rest of the hero.
       The screen mask lives *behind* the original transparent WebP frame. */
    .hero-phone-stack {
      --hero-phone-height: 710px;
      position:relative;z-index:1;flex:none;
      height:var(--hero-phone-height);width:auto;aspect-ratio:968/2048;
      max-width:100%;margin-inline:auto;
      filter:drop-shadow(0 24px 40px rgba(0,0,0,.27));
    }
    .hero-phone-screen {
      position:absolute;z-index:1;
      top:3.4%;right:4.65%;bottom:2.95%;left:4.65%;
      overflow:hidden;border-radius:11% / 5%;
      background:#12072c;
    }
    .hero-phone-video {
      display:block;width:100%;height:100%;object-fit:fill;
      background:#12072c;
    }
    .hero-phone-frame {
      position:absolute;inset:0;z-index:2;display:block;
      width:100%;height:100%;object-fit:contain;
      pointer-events:none;user-select:none;
    }
    /* When video plays, JJ switches *on the footage's time*, never on an
       unrelated CSS timer that can drift after buffering or tab suspension. */
    .scene.hero-video-synced .jj-notification-copy .jj-hero-message {
      animation:none!important;opacity:0;
      transition:opacity 320ms ease;
    }
    .scene.hero-video-synced .jj-notification-copy .jj-hero-message.is-current {opacity:1;}
    @media(max-width:580px) {
      .hero-phone-stack{--hero-phone-height:min(460px,116vw);}
    }
    @media(prefers-reduced-motion:reduce) {
      .scene.hero-video-synced .jj-notification-copy .jj-hero-message {transition:none!important;}
    }

    /* FINAL SIGN-OFF: authentic brand bubbles, NOT concentric rings or random dots.
       Separate instance of the hero's original Illustrator 3-bubble symbol.
       Keep the existing lighter frosted-glass tile treatment untouched. */
    .final-brand-bubbles {
      position:absolute;
      z-index:0;
      left:clamp(-82px,-4vw,-25px);
      bottom:-50px;
      width:clamp(260px,30vw,400px);
      height:auto;
      display:block;
      color:#A289D4;
      opacity:.18;
      pointer-events:none;
      user-select:none;
      transform-origin:50% 50%;
      animation:final-bubbles-drift 11s ease-in-out infinite;
    }
    @keyframes final-bubbles-drift {
      0%,100% {transform:translate3d(0,0,0) rotate(-13deg)}
      50% {transform:translate3d(9px,-12px,0) rotate(-10deg)}
    }
    @media(max-width:650px) {
      .final-brand-bubbles {
        left:-91px;
        bottom:-90px;
        width:238px;
        opacity:.125;
      }
    }
    @media(prefers-reduced-motion:reduce) {
      .final-brand-bubbles {animation:none!important;transform:rotate(-13deg)!important}
    }

    /* FOOTER: social profiles replace the secondary marketing sentence.
       Simple 38px accessible targets, original platform icon shapes. */
    .footer-social {display:flex;align-items:center;gap:9px;margin-top:1px;}
    .footer-social a {
      width:38px;height:38px;display:grid;place-items:center;
      color:#DFD0EB;text-decoration:none;
      border-radius:11px;border:1px solid rgba(220,195,244,.20);
      background:rgba(216,176,245,.055);
      transition:color .2s,background .2s,border-color .2s,transform .2s;
    }
    .footer-social a:hover {
      color:#FFE66C;background:rgba(255,230,108,.08);
      border-color:rgba(255,230,108,.42);transform:translateY(-2px);
    }
    .footer-social svg {display:block;width:18px;height:18px;fill:currentColor;}
    @media(prefers-reduced-motion:reduce){.footer-social a {transition:none!important}.footer-social a:hover{transform:none!important}}
  

/* PC Gaming theme: retain the illustrated dark center under all jar colorways.
   The base color-burn art was only 25% strong; the neon and title layers stay unchanged. */
.jiverse-theme-jar [data-theme-layer="gaming"] image:first-child {
  opacity: .75 !important;
}