/* ============================================================================
 * TrendLife Shop — Shared component styles
 * ----------------------------------------------------------------------------
 * Reusable across every shop / product marketing page. Depends on the CSS
 * custom properties declared in shop-tokens.css (load that first) and the
 * Geist @font-face in shop-fonts.css.
 *
 * Sections: reset · nav · hero · price-widget · activation flow · app download
 *           · plans / guided-steps · key features · faq · footer · responsive
 * ==========================================================================*/

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
/* No scroll-behavior rule here on purpose - the site-wide override that
 * kills bootstrap.min.css/mdb.min.css's global smooth-scroll (see
 * css/products/styles.css, "bootstrap.min.css and mdb.min.css...") already
 * covers Kaleida pages too, since styles.css loads unconditionally on
 * every page while this file only loads when controllerPageProductType=
 * "KAL". Don't re-add `scroll-behavior:smooth` here - confirmed 2026-08-11
 * to cause a real site-wide scroll-lag bug. */
body{font-family:var(--font);background:var(--white);color:var(--gray-90);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}

/* ---------- upgrade sheet layout (scoped to body.upg-sheet only - never touches
   products/kaleida.asp, which doesn't carry this class) ----------
   1. The shared renewal header is `position:absolute`/`fixed` (floats over the
      page, relying on a tall hero section elsewhere to absorb the overlap).
      Our upg-wrap has no such hero, so the header was overlapping/cutting off
      the title. Fixed clearance via padding-top, rather than putting the
      header back in normal flow, on purpose - the header toggles between
      `position:absolute` and `.smaller`'s `position:fixed` on scroll, neither
      of which occupies flow space, so this stays stable across that toggle.
      (An earlier attempt made the header `position:relative` instead - that
      DOES occupy flow space, so every scroll-triggered .smaller toggle
      shifted the whole page by the header's height, causing a visible shake
      right at the scroll boundary. Don't reintroduce that.)
   2. Sticky footer so short content doesn't leave a blank gap of the body's
      default background below the footer. */
body.upg-sheet{display:flex;flex-direction:column;min-height:100vh;}
body.upg-sheet #wrapper{display:flex;flex-direction:column;min-height:100vh;flex:1;}
body.upg-sheet .upg-wrap{padding-top:110px;flex:1 0 auto;}

/* HERO */
.hero{width:100%;min-height:520px;padding:56px 0;background:linear-gradient(135deg,var(--bkg-warm) 0%,var(--white) 60%);display:flex;align-items:center;position:relative;overflow:visible;border-bottom:1px solid var(--border-sub);}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 95% 50%,rgba(215,25,32,0.07) 0%,transparent 60%);}
/* single column — no price widget in the hero, so there's no second (auto) column to make room for */
.hero-inner{position:relative;z-index:1;max-width:var(--max-w);width:100%;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr;gap:56px;align-items:center;justify-items:center;}
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:16px;}
.hero h1{font-size:52px;font-weight:900;line-height:1.05;letter-spacing:-2.2px;color:var(--espresso);margin-bottom:14px;}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--red) 0%,#FF6B8A 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:15px;line-height:1.65;color:var(--gray-60);margin-bottom:28px;max-width:400px;}
.hero-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.btn-hero-primary{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:var(--white);padding:14px 28px;border-radius:100px;font-size:15px;font-weight:700;text-decoration:none;transition:background .15s;font-family:var(--font);border:none;cursor:pointer;}
.btn-hero-primary:hover{background:var(--coral);color:var(--white);}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:6px;color:var(--gray-60);font-size:14px;font-weight:600;text-decoration:none;transition:color .15s;}
.btn-hero-ghost:hover{color:var(--espresso);}
.hero-note{margin-top:12px;font-size:12px;color:var(--gray-50);}
.hero-left{display:flex;align-items:center;gap:36px;}
/* Phone demo slot — video with clipped rounded corners + border overlay */
.phone-slot{position:relative;flex-shrink:0;width:260px;aspect-ratio:540/1091;}
.demo-video{width:100%;height:100%;object-fit:cover;display:block;clip-path:inset(1% 2% 1% 2% round 44px);}
.phone-slot::after{content:'';position:absolute;top:1%;right:2%;bottom:1%;left:2%;border:7px solid #1a1a1a;border-radius:44px;pointer-events:none;z-index:1;}
@keyframes popout{0%{opacity:0;transform:translateY(-50%) scale(0.7);}65%{opacity:1;transform:translateY(-50%) scale(1.06);}80%{transform:translateY(-50%) scale(0.97);}100%{transform:translateY(-50%) scale(1);}}
/* Floating privacy tagline card — animates in on load */
.shield-tagline{position:absolute;left:-20%;top:34%;transform:translateY(-50%);background:var(--white);border-radius:14px;padding:14px 18px;box-shadow:0 6px 28px rgba(0,0,0,0.1),0 1px 4px rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:3px;white-space:nowrap;z-index:9;animation:popout 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;}
.tl-q{font-size:16px;font-weight:700;color:var(--espresso);letter-spacing:-0.015em;}
.tl-id{font-size:16px;font-weight:700;letter-spacing:-0.015em;background:linear-gradient(to right,#316575,#A9D1DA);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tl-id em{font-style:normal;}

/* HERO RIGHT — trial card */
.price-widget{background:var(--white);border:1px solid var(--border-sub);border-radius:20px;padding:28px;width:500px;flex-shrink:0;box-shadow:0 8px 40px rgba(42,29,21,0.1);}
.pw-features{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border-sub);}
.pw-feat-item{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--gray-60);}
.pw-feat-check{width:16px;height:16px;border-radius:50%;background:rgba(215,25,32,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pw-feat-check svg{width:9px;height:9px;stroke:var(--red);stroke-width:2.5;fill:none;}
.pw-plan-lbl{font-size:28px;font-weight:800;color:var(--espresso);margin-bottom:14px;letter-spacing:-.2px;}
.pw-billing-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.pw-bl{font-size:12px;color:var(--gray-50);transition:color .15s;}
.pw-bl.active{color:var(--espresso);font-weight:700;}
.pw-track{width:36px;height:20px;border-radius:100px;background:var(--gray-26);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;}
.pw-track.annual{background:var(--espresso);}
.pw-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.pw-track.annual .pw-thumb{transform:translateX(16px);}
.pw-off{background:var(--red);color:var(--white);font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;display:none;}
.pw-price-area{background:var(--bkg-warm);border-radius:12px;padding:14px 16px;margin-bottom:14px;}
.pw-original{font-size:12px;color:var(--gray-50);text-decoration:line-through;margin-bottom:2px;display:none;}
.pw-amt-row{display:flex;align-items:baseline;gap:3px;margin-bottom:2px;}
.pw-amt{font-size:40px;font-weight:900;letter-spacing:-1.5px;color:var(--red);line-height:1;}
.pw-per{font-size:13px;color:var(--gray-50);}
.pw-note{font-size:11px;color:var(--gray-50);}
.pw-ann-block{display:flex;flex-direction:column;gap:3px;}
.pw-ann-total{font-size:40px;font-weight:900;color:var(--red);letter-spacing:-1.5px;line-height:1;}
.pw-ann-ref{font-size:12px;color:var(--gray-50);}
.pw-ann-save{font-size:11px;font-weight:700;color:#16a34a;background:rgba(22,163,74,.1);padding:2px 9px;border-radius:100px;display:inline-block;margin-top:2px;}
.pw-device-lbl{font-size:11px;font-weight:600;color:var(--gray-60);margin-bottom:8px;}
.pw-device-row{display:flex;gap:6px;margin-bottom:16px;}
.pw-d-btn{flex:1;padding:8px 0;border-radius:8px;border:1.5px solid var(--border-str);background:transparent;color:var(--gray-60);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;text-align:center;}
.pw-d-btn.active{background:var(--espresso);color:var(--white);border-color:var(--espresso);}
.pw-d-btn:hover:not(.active){border-color:var(--espresso);color:var(--espresso);}
.pw-cta{width:100%;padding:13px;background:var(--red);color:var(--white);border:none;border-radius:100px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s;}
.pw-cta:hover{background:var(--coral);}
.pw-plan-tabs{display:flex;gap:4px;background:var(--bkg-warm);border-radius:10px;padding:4px;margin-bottom:16px;}
.pw-plan-tab{flex:1;padding:7px 0;border-radius:7px;border:none;background:transparent;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);color:var(--gray-50);transition:all .15s;}
.pw-plan-tab.active{background:var(--white);color:var(--espresso);box-shadow:0 1px 4px rgba(42,29,21,.12);}
.pw-plan-tab.pro.active{color:var(--red);}
.pw-pro-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:linear-gradient(120deg,var(--red),#FF6B8A);color:var(--white);padding:2px 6px;border-radius:100px;margin-left:4px;vertical-align:middle;}
.pw-usage-banner{display:none;background:linear-gradient(120deg,rgba(215,25,32,.1) 0%,rgba(255,107,138,.07) 100%);border:1px solid rgba(215,25,32,.22);border-radius:8px;padding:8px 12px;text-align:center;font-size:12px;font-weight:700;color:var(--red);letter-spacing:.2px;}
.pw-features.pro-active .pw-usage-banner{display:block;}

/* ACTIVATION FLOW */
.flow-section{padding:56px 48px;background:var(--white);border-top:1px solid var(--border-sub);}
.flow-inner{max-width:var(--max-w);margin:0 auto;}
/* OVERVIEW / INTRO VIDEO */
.ov-section{padding:64px 48px;background:var(--white);border-top:1px solid var(--border-sub);}
.ov-inner{max-width:880px;margin:0 auto;text-align:center;}
.ov-inner h2{font-size:36px;font-weight:800;letter-spacing:-.8px;line-height:1.2;color:var(--espresso);margin-bottom:20px;}
.ov-body{max-width:720px;margin:0 auto 40px;}
.ov-body p{font-size:15px;line-height:1.8;color:var(--gray-60);}
.ov-body p + p{margin-top:14px;}
.ov-video{display:block;width:100%;aspect-ratio:880/500;border-radius:var(--r-md);background:#000;}
.flow-header{text-align:center;margin-bottom:52px;}
.flow-header h2{font-size:32px;font-weight:800;letter-spacing:-.8px;color:var(--espresso);margin-bottom:10px;}
.flow-header p{font-size:15px;color:var(--gray-60);}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.flow-steps::before{content:"";position:absolute;top:28px;left:12.5%;right:12.5%;height:1.5px;background:linear-gradient(90deg,var(--border-str) 0%,var(--red) 50%,var(--border-str) 100%);z-index:0;}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px;position:relative;z-index:1;}
.flow-num{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin-bottom:16px;flex-shrink:0;}
.flow-num.step1{background:var(--espresso);color:var(--white);}
.flow-num.step2{background:var(--white);border:2px solid var(--espresso);color:var(--espresso);}
.flow-num.step3{background:var(--white);border:2px solid var(--espresso);color:var(--espresso);}
.flow-num.step4{background:var(--red);color:var(--white);}
.flow-label{font-size:13px;font-weight:700;color:var(--espresso);margin-bottom:6px;letter-spacing:-.1px;}
.flow-desc{font-size:13px;color:var(--gray-60);line-height:1.55;}
.flow-tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;}
.flow-tag.active{background:rgba(215,25,32,0.1);color:var(--red);}
.flow-tag.neutral{background:var(--bkg-warm);color:var(--gray-60);}

/* APP DOWNLOAD */
.download-section{padding:40px 48px;background:var(--white);border-top:1px solid var(--border-sub);}
.download-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.dl-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:12px;}
.dl-left h2{font-size:26px;font-weight:900;letter-spacing:-.6px;color:var(--espresso);margin-bottom:10px;line-height:1.15;}
.dl-left h2 span{background:linear-gradient(120deg,var(--red) 0%,#FF6B8A 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.dl-sub{font-size:15px;color:var(--gray-60);line-height:1.65;margin-bottom:28px;}
.dl-platforms{display:flex;gap:12px;flex-wrap:wrap;}
.dl-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;background:var(--espresso);color:var(--white);border-radius:12px;text-decoration:none;transition:background .15s;}
.dl-btn:hover{background:rgba(42,29,21,.8);}
.dl-btn-icon{width:22px;height:22px;fill:var(--white);opacity:.9;}
.dl-btn-text{display:flex;flex-direction:column;}
.dl-btn-sub{font-size:10px;opacity:.55;line-height:1;margin-bottom:1px;}
.dl-btn-name{font-size:14px;font-weight:700;line-height:1;}
/* Official Apple/Google store badge artwork — their brand guidelines prohibit recreating the
   badges with a custom icon/text lockup the way .dl-btn does. The two vendors' assets aren't
   sized the same way: Google's PNG already bakes in its own required clear space (~41px
   transparent margin on a 250px-tall canvas — matches their documented "clear space = 1/4 of
   badge height" rule), so it's used at native height untouched. Apple's SVG is cropped tight
   with zero built-in margin, so the equivalent 1/4-height clear space is added here via padding
   — that's what makes the two marks come out the same total height (60px) instead of Apple's
   dwarfing Google's the way flat equal-height sizing did. */
.dl-badge{display:inline-flex;align-items:center;}
.dl-badge-img-apple{height:69px;width:auto;padding:10px;}
.dl-badge-img{height:70px;width:auto;}
.dl-app-card{background:var(--white);border-radius:20px;padding:22px 22px 18px;border:1px solid var(--border-sub);box-shadow:0 4px 24px rgba(42,29,21,.09);}
.dl-appstore-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.dl-app-icon{width:64px;height:64px;border-radius:16px;background:var(--white);border:1px solid var(--border-sub);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(42,29,21,.2);}
.dl-app-icon svg{width:32px;height:32px;fill:var(--white);}
.dl-app-logo{width:36px;height:36px;}
.dl-app-info{flex:1;min-width:0;}
.dl-app-name{font-size:16px;font-weight:800;color:var(--espresso);letter-spacing:-.2px;line-height:1.2;}
.dl-app-dev{font-size:11px;color:var(--gray-50);margin-top:2px;}
.dl-app-category{font-size:11px;color:var(--gray-50);margin-top:3px;}
.dl-get-btn{flex-shrink:0;padding:6px 18px;border-radius:100px;background:transparent;border:1.5px solid var(--red);color:var(--red);font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.2px;}
.dl-get-btn:hover{background:var(--red);color:var(--white);}
.dl-app-desc{font-size:12px;color:var(--gray-60);line-height:1.6;margin-bottom:14px;}
.dl-app-tags{display:flex;gap:6px;flex-wrap:wrap;}
.dl-tag{font-size:10px;font-weight:600;padding:3px 9px;background:var(--bkg-warm);color:var(--gray-60);border-radius:100px;border:1px solid var(--border-sub);}

/* PLANS */
.plans-section{padding:64px 48px;background:var(--white);border-top:1px solid var(--border-sub);border-bottom:1px solid var(--border-sub);}
.plans-inner{max-width:860px;margin:0 auto;}
.plans-header{text-align:center;margin-bottom:40px;}
.plans-header h2{font-size:32px;font-weight:900;letter-spacing:-.8px;color:var(--espresso);margin-bottom:10px;}
.plans-header p{font-size:15px;color:var(--gray-60);}

/* GUIDED STEPS */
@keyframes gs-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.gs-step{max-width:580px;margin:0 auto 36px;animation:gs-in .28s ease both;}
.gs-step.gs-hidden{display:none;}
.gs-connector{max-width:580px;margin:0 auto 36px;height:2px;background:linear-gradient(90deg,var(--red) 0%,var(--border-sub) 100%);border-radius:2px;}
.gs-connector.gs-hidden{display:none;}
.gs-step-label{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--espresso);margin-bottom:16px;letter-spacing:-.2px;}
.gs-num{width:28px;height:28px;border-radius:50%;background:var(--gray-26);color:var(--gray-60);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s;}
.gs-step.gs-done .gs-num{background:var(--red);color:var(--white);}
.gs-opts{display:grid;gap:10px;}
.gs-size-opts{grid-template-columns:repeat(3,1fr);}
.gs-plan-opts{grid-template-columns:1fr;}
.gs-billing-opts{grid-template-columns:1fr 1fr;}
.gs-opt{position:relative;padding:18px 12px 14px;border-radius:12px;border:1.5px solid var(--border-str);background:var(--white);cursor:pointer;font-family:var(--font);text-align:center;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:5px;}
.gs-opt:hover{border-color:var(--espresso);}
.gs-opt.active{border-color:var(--red);background:rgba(215,25,32,.03);box-shadow:0 0 0 1px var(--red);}
.gs-opt-val{font-size:34px;font-weight:900;color:var(--espresso);letter-spacing:-1.5px;line-height:1;}
.gs-opt.active .gs-opt-val,.gs-opt.active .gs-opt-name,.gs-opt.active .gs-opt-price{color:var(--red);}
.gs-opt-name{font-size:16px;font-weight:800;color:var(--espresso);letter-spacing:-.3px;}
.gs-opt-price{font-size:22px;font-weight:900;color:var(--espresso);letter-spacing:-0.8px;line-height:1.1;}
.gs-opt-sub{font-size:11px;color:var(--gray-50);line-height:1.3;}
.gs-pop-badge,.gs-best-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;white-space:nowrap;}
.gs-pop-badge{background:var(--espresso);color:var(--white);}
.gs-best-badge{background:linear-gradient(120deg,var(--red),#FF6B8A);color:var(--white);}
.gs-usage-badge{font-size:11px;font-weight:700;color:var(--red);background:rgba(215,25,32,.09);padding:2px 9px;border-radius:100px;}
.gs-ann-key{font-size:22px;font-weight:900;color:var(--red);letter-spacing:-0.8px;line-height:1.1;}
.gs-ann-ref{font-size:12px;color:var(--gray-50);}
.gs-save-badge{font-size:11px;font-weight:700;color:#16a34a;background:rgba(22,163,74,.1);padding:2px 9px;border-radius:100px;}
.gs-cta-wrap{max-width:580px;margin:8px auto 0;padding:24px;background:var(--bkg-warm);border-radius:16px;border:1px solid var(--border-sub);animation:gs-in .28s ease both;}
.gs-cta-wrap.gs-hidden{display:none;}
.gs-summary{text-align:center;margin-bottom:18px;}
.gs-sum-name{font-size:18px;font-weight:800;color:var(--espresso);letter-spacing:-.3px;line-height:1.2;}
.gs-sum-meta{font-size:13px;font-weight:600;color:var(--gray-60);margin-top:3px;}
.gs-sum-price{font-size:26px;font-weight:900;color:var(--red);letter-spacing:-.6px;line-height:1.1;margin-top:10px;}
.gs-sum-per{font-size:14px;font-weight:500;color:var(--gray-50);}
.gs-sum-billed{display:block;font-size:12px;font-weight:400;color:var(--gray-50);letter-spacing:0;margin-top:3px;}
.gs-sum-hint{font-size:13px;color:var(--gray-50);margin-top:10px;}
.gs-cta-btn{width:100%;padding:15px;background:var(--red);color:var(--white);border:none;border-radius:100px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s;display:block;}
.gs-cta-btn:hover{background:var(--coral);}
.gs-cta-note{text-align:center;font-size:12px;color:var(--gray-50);margin-top:10px;}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:0 auto;}
.feat-item{display:flex;gap:16px;align-items:flex-start;background:var(--white);border-radius:14px;padding:20px;border:1px solid var(--border-sub);}
.feat-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feat-icon svg{width:20px;height:20px;}
.feat-name{font-size:14px;font-weight:700;color:var(--espresso);margin-bottom:4px;}
.feat-desc{font-size:13px;color:var(--gray-60);line-height:1.6;}
.plans-footnote{text-align:center;font-size:11px;color:var(--gray-50);margin-bottom:32px;}

/* PRICING TIERS (Kaleida launch: Lite / Standard / Pro) */
.tier-section{padding:64px 48px;background:var(--bkg-warm);border-top:1px solid var(--border-sub);border-bottom:1px solid var(--border-sub);}
.tier-inner{max-width:1040px;margin:0 auto;}
.tier-header{text-align:center;margin-bottom:40px;}
.tier-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:10px;}
.tier-header h2{font-size:32px;font-weight:900;letter-spacing:-.8px;color:var(--espresso);margin-bottom:20px;}
.tier-toggle{display:inline-flex;gap:2px;background:var(--white);border:1px solid var(--border-sub);border-radius:100px;padding:4px;}
.tier-toggle.cmp-toggle{margin-top:18px;}
.tier-tab{font-family:var(--font);border:none;background:transparent;color:var(--gray-60);font-size:13px;font-weight:700;padding:9px 22px;border-radius:100px;cursor:pointer;transition:background .15s,color .15s;}
.tier-tab.active{background:var(--red);color:var(--white);}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.tier-card{position:relative;background:var(--white);border:1px solid var(--border-sub);border-radius:var(--r-xl);padding:30px 26px;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;}
.tier-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(42,29,21,.08);}
/* AI-gradient border (padding-box/border-box trick, same as .upg-card.selected) instead of a flat --red border */
.tier-card.featured{border:2px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--grad-ai-warm) border-box;}
/* Per-card trial/billing fine print — Lite/Standard (free trial) and Plus (billed today) disclose different terms.
   min-height reserves room for the longest variant (3 wrapped lines, e.g. ja-jp/zh_tw's trial copy) so every
   card's footnote takes the same space regardless of its actual text length. Without this, .tier-buy's
   margin-top:auto (below) pins the button just above the footnote, so a taller footnote on one card pushes
   its button higher than a sibling card with a shorter footnote -- misaligning the 3 buttons across the row. */
.tier-fine{text-align:center;font-size:11px;color:var(--gray-50);margin-top:10px;min-height:49.5px;}
.tier-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:var(--white);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 14px;border-radius:100px;white-space:nowrap;}
.tier-name{font-size:22px;font-weight:900;color:var(--espresso);letter-spacing:-.4px;margin-bottom:4px;}
.plan-brand{display:block;font-size:14px;font-weight:500;color:var(--gray-50);letter-spacing:.02em;margin-bottom:-5px;}
.tier-who{font-size:13px;color:var(--gray-60);}
.tier-price-row{display:flex;align-items:baseline;gap:3px;margin-top:14px;}
.tier-price{font-size:34px;font-weight:900;color:var(--red);letter-spacing:-1px;line-height:1;}
.tier-per{font-size:13px;color:var(--gray-50);}
.tier-billed{font-size:12px;color:#333;margin-top:4px;margin-bottom:18px;min-height:14px;}
.tier-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.tier-list li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--espresso);}
.tier-check{width:16px;height:16px;border-radius:50%;background:rgba(215,25,32,.1);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tier-buy{margin-top:auto;padding:13px;background:var(--espresso);color:var(--white);border:none;border-radius:100px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s;}
.tier-buy:hover{background:#3D2B1E;}
.tier-card.featured .tier-buy{background:var(--red);}
.tier-card.featured .tier-buy:hover{background:var(--coral);}
.tier-guarantee{text-align:center;font-size:14px;color:var(--gray-60);margin-top:32px;}
.tier-footnote{text-align:center;font-size:11px;color:var(--gray-50);margin-top:8px;}

/* KEY FEATURES */
.kf-section{padding:64px 48px;background:var(--bkg-warm);border-top:1px solid var(--border-sub);}
.kf-inner{max-width:860px;margin:0 auto;}
.kf-header{text-align:center;margin-bottom:40px;}
.kf-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:10px;}
.kf-header h2{font-size:32px;font-weight:900;letter-spacing:-.8px;color:var(--espresso);}

/* FAQ */
.faq-section{padding:72px 48px;background:var(--white);border-top:1px solid var(--border-sub);}
.faq-inner{max-width:640px;margin:0 auto;}
.faq-header{text-align:center;margin-bottom:36px;}
.faq-header h2{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--espresso);}
.faq-list{display:flex;flex-direction:column;gap:2px;}
.faq-item{border-radius:var(--r-md);border:1px solid var(--border-sub);overflow:hidden;background:var(--bkg-warm);}
.faq-q{width:100%;padding:18px 22px;text-align:left;display:flex;justify-content:space-between;align-items:center;background:none;border:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--espresso);font-family:var(--font);gap:16px;transition:color .15s;}
.faq-q:hover{color:var(--red);}
.faq-icon{font-size:18px;color:var(--gray-50);flex-shrink:0;transition:transform .2s;}
.faq-a{padding:0 22px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .2s;font-size:13px;line-height:1.8;color:var(--gray-60);}
.faq-item.open .faq-a{max-height:200px;padding:0 22px 18px;}
.faq-item.open .faq-icon{transform:rotate(45deg);}

/* HOW IT WORKS — feature showcase (kaleida.html), 2-col alternating rows */
/* max-width:none (not --max-w) so the warm background spans full width instead of clipping to
   the content column with white bars either side — the h2 inside has its own max-width:760px;
   margin:0 auto so it stays centered regardless. */
.fx-intro{max-width:none;margin:0 auto;padding:64px 48px 0;text-align:center;background:var(--bkg-warm);}
.fx-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:12px;}
.fx-intro h2{font-size:36px;font-weight:900;letter-spacing:-1.2px;line-height:1.12;color:var(--espresso);max-width:760px;margin:0 auto;}
.fx-section{padding:56px 48px;border-top:1px solid var(--border-sub);}
.fx-section.bg-white{background:var(--white);}
.fx-section.bg-warm{background:var(--bkg-warm);}
.fx-section:first-of-type,.fx-intro + .fx-section{border-top:none;}
.fx-inner{max-width:var(--max-w);margin:0 auto;}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.fx-grid.fx-solo{grid-template-columns:1fr;max-width:760px;margin:0 auto;}
.fx-grid.reverse .fx-copy{order:2;}
.fx-grid.reverse .fx-visual{order:1;}
.fx-copy{display:flex;flex-direction:column;}
.fx-title{font-size:28px;font-weight:800;color:var(--espresso);letter-spacing:-.6px;line-height:1.18;margin-bottom:14px;}
/* Informational pill (unlike the promotional red .tier-badge/.cmp-badge) for
   labeling a feature still in preview -- inline next to the feature name
   wherever it appears, not floated out of flow like the plan badges. Teal to
   match brand_tokens.json's "AI/Kaleida treatments use teal" rule (same
   --dark-teal used by --grad-ai-cool) since this tags an AI feature. Solid
   (not rgba) so it renders the same on .fx-tab.active's dark background as
   it does everywhere else, instead of blending into whatever's behind it. */
.preview-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:var(--light-teal);color:var(--dark-teal);padding:2px 8px;border-radius:100px;vertical-align:middle;margin-left:6px;}
.fx-body{font-size:14px;line-height:1.8;color:var(--gray-60);}
.fx-body p+p{margin-top:12px;}
.fx-body strong{color:var(--espresso);font-weight:700;}
.fx-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.fx-list li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--gray-60);}
.fx-list li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:rgba(215,25,32,.1);}
.fx-list li::after{content:"";position:absolute;left:4.5px;top:6px;width:6px;height:3px;border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg);}
.fx-visual{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border-sub);background:linear-gradient(135deg,var(--cream) 0%,var(--bkg-warm) 100%);aspect-ratio:22/13;display:flex;align-items:center;justify-content:center;}
.fx-visual img{width:100%;height:100%;object-fit:contain;display:block;}
/* graceful state until the generated image exists (img removes itself on error) */
.fx-visual.fx-ph-on::after{content:attr(data-ph);font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--gray-50);}

/* HOW IT WORKS — tabbed variant (kaleida.asp): tab bar swaps a single .fx-panel
   in place of stacking every .fx-section full-width. Reuses .fx-inner/.fx-grid/
   .fx-copy/.fx-title/.fx-body/.fx-list/.fx-visual as-is. */
.fx-tabbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:28px 48px 20px;background:var(--bkg-warm);}
.fx-tab{font-family:var(--font);border:1.5px solid var(--border-str);background:var(--white);color:var(--gray-60);font-size:13px;font-weight:700;padding:10px 20px;border-radius:100px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.fx-tab:hover{border-color:var(--espresso);color:var(--espresso);}
.fx-tab.active{background:var(--espresso);color:var(--white);border-color:var(--espresso);}
.fx-panel{display:none;background:var(--bkg-warm);padding:48px 48px 64px;}
.fx-panel.active{display:block;}

/* WHY IT MATTERS — stats band (kaleida.html) */
.wim-section{padding:64px 48px;background:var(--bkg-warm);border-top:1px solid var(--border-sub);}
.wim-inner{max-width:var(--max-w);margin:0 auto;}
.wim-header{text-align:center;margin-bottom:44px;}
.wim-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:12px;}
.wim-header h2{font-size:32px;font-weight:900;letter-spacing:-.8px;line-height:1.15;color:var(--espresso);margin-bottom:14px;}
.wim-sub{font-size:15px;line-height:1.7;color:var(--gray-60);max-width:560px;margin:0 auto;}
.wim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.wim-item{background:var(--white);border:1px solid var(--border-sub);border-radius:var(--r-xl);padding:28px 22px;text-align:center;}
.wim-num{font-size:48px;font-weight:900;color:var(--red);letter-spacing:-1.5px;line-height:1;margin-bottom:12px;}
.wim-desc{font-size:13px;line-height:1.6;color:var(--gray-60);}
.wim-source{text-align:center;font-size:12px;color:var(--gray-50);margin-top:24px;}

/* ============================================================================
 * RENEWAL — online serial-number renewal page (renewal.html)
 * Reuses .hero / .hero-left for the left column; the card + serial input are
 * renewal-specific. Submission is handled in shop.js (#renewForm).
 * ==========================================================================*/
.renewal-hero{min-height:auto;}
.renewal-inner{align-items:center;}
.renewal-benefits{display:flex;flex-direction:column;gap:16px;margin-top:4px;}
.renewal-benefit{display:flex;align-items:flex-start;gap:12px;}
.renewal-benefit-ico{width:36px;height:36px;border-radius:10px;background:rgba(215,25,32,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.renewal-benefit-ico svg{width:19px;height:19px;stroke:var(--red);stroke-width:1.6;fill:none;}
.renewal-benefit-txt b{display:block;font-size:14px;font-weight:700;color:var(--espresso);margin-bottom:2px;letter-spacing:-.2px;}
.renewal-benefit-txt span{font-size:13px;color:var(--gray-60);line-height:1.55;}

.renew-card{background:var(--white);border:1px solid var(--border-sub);border-radius:20px;padding:32px;width:460px;flex-shrink:0;box-shadow:0 8px 40px rgba(42,29,21,.1);}
.renew-card-title{font-size:22px;font-weight:800;color:var(--espresso);letter-spacing:-.4px;margin-bottom:8px;}
.renew-card-sub{font-size:13px;color:var(--gray-60);line-height:1.6;margin-bottom:22px;}
.renew-label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray-60);margin-bottom:8px;}
.renew-input{width:100%;padding:14px 16px;border:1.5px solid var(--border-str);border-radius:12px;font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:1px;color:var(--espresso);background:var(--bkg-warm);transition:border-color .15s,box-shadow .15s,background .15s;text-transform:uppercase;}
.renew-input::placeholder{color:var(--gray-50);font-weight:500;letter-spacing:.5px;text-transform:none;}
.renew-input:focus{outline:none;border-color:var(--red);background:var(--white);box-shadow:0 0 0 3px rgba(215,25,32,.1);}
.renew-input.invalid{border-color:var(--red);background:rgba(215,25,32,.04);}
.renew-error{display:none;font-size:12px;font-weight:600;color:var(--red);margin-top:8px;}
.renew-error.show{display:block;}
.renew-btn{width:100%;margin-top:18px;padding:15px;background:var(--red);color:var(--white);border:none;border-radius:100px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s;}
.renew-btn:hover{background:var(--coral);}
.renew-help{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-sub);display:flex;flex-direction:column;gap:13px;}
.renew-help a{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--gray-60);text-decoration:none;transition:color .15s;}
.renew-help a:hover{color:var(--red);}
.renew-help svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0;}

.renew-note-section{padding:0 48px 56px;background:var(--white);}
.renew-note-inner{max-width:var(--max-w);margin:0 auto;}
.renew-note-card{background:var(--bkg-warm);border:1px solid var(--border-sub);border-radius:16px;padding:24px 28px;}
.renew-note-card h2{font-size:16px;font-weight:800;color:var(--espresso);letter-spacing:-.2px;margin-bottom:6px;}
.renew-note-card p{font-size:13px;color:var(--gray-60);line-height:1.65;}
.renew-note-card a{color:var(--red);text-decoration:none;font-weight:600;}
.renew-note-card a:hover{text-decoration:underline;}

/* ============================================================================
 * SIMPLE PAGES — slim header / footer, error + legal/content layouts
 * Used by support pages (403/404/500, legal) that don't need the full product
 * marketing chrome. Reuses the same tokens as the product pages.
 * ==========================================================================*/
.simple-header{border-bottom:1px solid var(--border-sub);background:var(--white);}
.simple-header .sh-inner{max-width:var(--nav-max-w);min-height:var(--nav-min-h);width:100%;margin:0 auto;padding:var(--nav-pad-y) var(--nav-pad-x);display:flex;align-items:center;justify-content:space-between;}
.simple-header .sh-logo img{height:var(--nav-logo-h);width:auto;max-width:180px;display:block;}
.simple-header .sh-support a{font-size:13px;font-weight:600;color:var(--gray-60);text-decoration:none;}
.simple-header .sh-support a:hover{color:var(--red);}

.simple-footer{border-top:1px solid var(--border-sub);background:var(--bkg-warm);padding:24px 48px;}
.simple-footer .sf-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.simple-footer .sf-copy{font-size:12px;color:var(--gray-50);}
.simple-footer .sf-links{display:flex;gap:18px;flex-wrap:wrap;}
.simple-footer .sf-links a{font-size:12px;color:var(--gray-50);text-decoration:none;}
.simple-footer .sf-links a:hover{color:var(--espresso);}

/* error pages */
.error-page{min-height:calc(100vh - var(--nav-min-h) - 73px);display:flex;align-items:center;justify-content:center;padding:48px 24px;background:linear-gradient(135deg,var(--bkg-warm) 0%,var(--white) 60%);}
.error-card{max-width:520px;width:100%;text-align:center;background:var(--white);border:1px solid var(--border-sub);border-radius:var(--r-xl);padding:48px 40px;box-shadow:0 8px 40px rgba(42,29,21,.08);}
.error-code{font-size:64px;font-weight:900;letter-spacing:-3px;line-height:1;background:linear-gradient(120deg,var(--red) 0%,#FF6B8A 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;}
.error-card h1{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--espresso);margin-bottom:12px;}
.error-card p{font-size:14px;line-height:1.65;color:var(--gray-60);margin-bottom:28px;}
.error-card .btn-hero-primary{justify-content:center;}
.error-help{margin-top:18px;font-size:13px;color:var(--gray-50);}
.error-help a{color:var(--red);text-decoration:none;font-weight:600;}
.error-help a:hover{text-decoration:underline;}

/* legal / long-form content */
.content-page{max-width:760px;margin:0 auto;padding:56px 24px 72px;}
.content-page h1{font-size:34px;font-weight:900;letter-spacing:-1px;color:var(--espresso);margin-bottom:8px;}
.content-page .content-meta{font-size:13px;color:var(--gray-50);margin-bottom:32px;}
.content-page h2{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--espresso);margin:32px 0 12px;}
.content-page p,.content-page li{font-size:15px;line-height:1.75;color:var(--gray-60);margin-bottom:14px;}
.content-page ul{padding-left:22px;margin-bottom:14px;}
.content-page a{color:var(--red);text-decoration:none;font-weight:600;}
.content-page a:hover{text-decoration:underline;}

/* PRODUCT COMPARISON — comparison table (product-comparison.html) */
.cmp-section{padding:64px 48px;background:var(--white);border-top:1px solid var(--border-sub);}
.cmp-inner{max-width:var(--max-w);margin:0 auto;}
.cmp-header{text-align:center;margin-bottom:36px;}
.cmp-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);opacity:.8;margin-bottom:12px;}
.cmp-header h2{font-size:32px;font-weight:900;letter-spacing:-.8px;color:var(--espresso);margin-bottom:12px;}
.cmp-header p{font-size:15px;color:var(--gray-60);max-width:620px;margin:0 auto;line-height:1.6;}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-sub);border-radius:var(--r-xl);}
/* table-layout:fixed locks column widths to the header row (below) regardless
   of later content changes -- without it, appending/removing the annual
   save-badge widens that column's natural content, and table-layout:auto's
   default behaviour is to recompute EVERY column's width to compensate,
   visibly shifting the whole table left/right on every toggle. */
.cmp{width:100%;border-collapse:collapse;min-width:820px;background:var(--white);table-layout:fixed;}
.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--border-sub);text-align:center;}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:none;}
.cmp thead th{vertical-align:top;border-bottom:2px solid var(--border-str);padding-top:38px;}
/* .cmp-badge floats out of flow (absolute, within the reserved 38px padding-top above) so the
   "Most popular" column's name/price/button stack starts at the same offset as the others */
.cmp thead th.cmp-featured{position:relative;}
.cmp .cmp-feat{text-align:left;font-size:13px;font-weight:600;color:var(--espresso);width:32%;}
.cmp thead th:not(.cmp-feat){width:calc((100% - 32%) / 3);}
.cmp-corner{text-align:left;}
.cmp-corner-t{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);opacity:.8;}
.cmp-prod-name{font-size:16px;font-weight:800;color:var(--espresso);text-decoration:none;letter-spacing:-.2px;display:block;}
a.cmp-prod-name:hover{color:var(--red);}
.cmp-prod-meta{font-size:11px;color:var(--gray-50);margin-top:4px;line-height:1.4;}
/* Reserves space for the annual save-badge so toggling monthly/annual doesn't
   change this row's wrapped line count and shift the whole comparison table. */
.cmp-prod-billed{min-height:32px;}
/* Compound selector (not .cmp-prod-meta alone) - only the "billed
   monthly/annually" line, not the plain .cmp-prod-meta "Best for N members"
   line above it. */
.cmp-prod-meta.cmp-prod-billed{color:#333;font-size:12px;}
.cmp-prod-orig{display:block;font-size:12px;color:var(--gray-50);text-decoration:line-through;margin-top:10px;line-height:1;}
.cmp-prod-amt{font-size:22px;font-weight:900;color:var(--red);letter-spacing:-.5px;line-height:1.1;}
.cmp-prod-cap{font-size:10px;color:var(--gray-50);}
/* fixed width (not label-hugging) so all three buttons land at the same width regardless of label length */
.cmp-buy{display:inline-block;width:140px;text-align:center;margin-top:10px;background:var(--espresso);color:var(--white);border-radius:100px;padding:8px 20px;font-size:12px;font-weight:700;text-decoration:none;transition:background .15s;}
.cmp-buy:hover{background:#3D2B1E;color:var(--white);}
.cmp-featured .cmp-buy{background:var(--red);}
.cmp-featured .cmp-buy:hover{background:var(--coral);color:var(--white);}
/* positioned absolute (not inline-block in flow) so it doesn't push the "Most popular" column's
   content down relative to the other columns — see .cmp thead th.cmp-featured above */
.cmp-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:inline-block;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:var(--red);color:var(--white);padding:2px 8px;border-radius:100px;margin-bottom:0;white-space:nowrap;}
.cmp-featured{background:rgba(215,25,32,.04);}
.save-badge{display:inline-block;background:var(--dark-teal);color:var(--white);font-weight:700;font-size:10px;letter-spacing:0.02em;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle;}
.cmp svg.cmp-yes{width:18px;height:18px;stroke:var(--red);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;}
.cmp .cmp-no{color:var(--gray-26);font-size:18px;}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:var(--bkg-warm);}
.cmp-foot{font-size:11px;color:var(--gray-50);margin-top:16px;line-height:1.6;}
.cmp-block{margin-bottom:48px;}
.cmp-subhead{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--espresso);margin:8px 0 18px;text-align:left;}
.cmp-subhead-sub{display:block;font-size:13px;font-weight:500;color:var(--gray-60);margin-top:4px;}
.cmp-tier{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--red);margin-bottom:6px;}
/* "Your plan" ribbon — dark-teal banner across the top of the user's current column */
.cmp th.cmp-mine{position:relative;}
.cmp-ribbon{position:absolute;top:0;left:0;right:0;background:var(--dark-teal);color:var(--white);font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:6px 6px;text-align:center;box-shadow:0 2px 6px rgba(15,98,114,.25);}
.cmp-learn{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:var(--gray-60);text-decoration:underline;text-underline-offset:3px;}
.cmp-learn:hover{color:var(--red);}

/* UPGRADE SHEET — upsell page (upgrade/*.asp), rendered server-side from URL params */
/* warm page background so it covers the full viewport (esp. mobile, where the
   footer + comparison are hidden); nav/comparison/footer paint over it */
/* Sticky footer: with no comparison table the sheet is short, so make the page
   a full-height flex column and let .upg-wrap grow to push the footer down. */
.upg-page{background:var(--bkg-warm);display:flex;flex-direction:column;min-height:100vh;}
.upg-wrap{background:var(--bkg-warm);flex:1 0 auto;}
.upg-main{width:100%;max-width:520px;margin:0 auto;padding:56px 24px 64px;}
.upg-head{text-align:center;margin-bottom:32px;}
.upg-title{font-size:28px;font-weight:450;letter-spacing:-1px;color:var(--espresso);margin-bottom:8px;}
/* AI/Kaleida headlines use a gradient, not flat color, per marketing-harness
   BRAND_BRIEF.md - matches products/kaleida.asp's own .hero h1 em treatment. */
.upg-title-accent{background:var(--grad-ai-warm);-webkit-background-clip:text;background-clip:text;color:transparent;}
.upg-sub{font-size:15px;font-weight:100;color:var(--gray-60);}
.upg-list{display:flex;flex-direction:column;gap:14px;}
.upg-card{position:relative;display:flex;align-items:center;gap:14px;border:2px solid var(--border-str);border-radius:18px;background:var(--white);padding:20px 22px;cursor:pointer;transition:border-color .15s,border-width .15s,box-shadow .15s;}
.upg-card:hover{border-color:var(--coral);box-shadow:0 12px 32px rgba(42,29,21,.08);}
/* Selected card uses the brand AI gradient as a rounded border (bg-clip trick
   so the corner radius survives — border-image would square the corners).
   Slightly thicker than the 2px default/hover border, reinforcing selection. */
.upg-card.selected{border-width:3px;border-color:transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--grad-ai-warm) border-box;box-shadow:0 8px 26px rgba(155,143,255,.20);}
.upg-card-body{flex:1;min-width:0;}
/* Badges follow the marketing-harness AI gradient treatment (Kaleida = AI). */
.upg-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--white);background:var(--grad-ai-warm);padding:4px 14px;border-radius:100px;margin-bottom:10px;}
.upg-badge.bestvalue{background:var(--grad-ai-cool);}
.upg-name{font-size:18px;font-weight:600;color:var(--espresso);letter-spacing:-.3px;line-height:1.2;}
.upg-name .plan-brand{display:block;font-size:14px;font-weight:500;color:var(--gray-60);letter-spacing:.02em;margin-bottom:2px;}
.upg-desc{font-size:14px;color:var(--gray-60);margin-top:3px;}
.upg-price{font-size:28px;font-weight:550;color:var(--espresso);letter-spacing:-1px;margin-top:10px;line-height:1;}
.upg-price span{font-size:14px;font-weight:500;color:var(--gray-60);letter-spacing:0;}
.upg-radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--gray-26);flex-shrink:0;position:relative;transition:border-color .15s;}
.upg-card.selected .upg-radio{border-color:var(--lilac);}
.upg-card.selected .upg-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--grad-ai-warm);}
/* collapsed (unselected) cards keep their badge (e.g. "Recommended") + name,
   but hide the description + price — per the UX mockup. */
.upg-card:not(.selected) .upg-desc,
.upg-card:not(.selected) .upg-price{display:none;}
.upg-footer{margin-top:24px;}
.upg-footer-inner{max-width:520px;margin:0 auto;}
/* Red, not espresso - .upg-btn is the only CTA on this page (no featured/
   non-featured siblings to be subordinate to), matching .btn-hero-primary
   and .tier-card.featured .tier-buy's "the one we're steering you to" role
   rather than .tier-buy's default "one of several options" espresso. */
.upg-btn{display:block;width:100%;background:var(--red);color:var(--white);border:none;border-radius:100px;padding:16px;font-size:16px;font-weight:700;font-family:var(--font);cursor:pointer;text-align:center;text-decoration:none;transition:background .15s;}
.upg-btn:hover{background:var(--coral);color:var(--white);}
.upg-empty{text-align:center;padding:72px 24px;}
.upg-empty h1{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--espresso);margin-bottom:12px;}
.upg-empty p{font-size:15px;color:var(--gray-60);line-height:1.6;margin-bottom:28px;max-width:360px;margin-left:auto;margin-right:auto;}
.upg-empty .upg-btn{display:inline-block;width:auto;padding:14px 32px;}

/* STICKY BUY BAR — injected by shop.js on pages with a price widget. Frosted
   translucent bar with the selected product, live price, and buy actions. */
.buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:280;background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-top:1px solid var(--border-sub);box-shadow:0 -6px 24px rgba(42,29,21,.1);transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
.buy-bar.show{transform:translateY(0);}
/* inner container mirrors nav/hero/footer so the content edges align with the body */
.buy-bar-inner{max-width:var(--max-w);margin:0 auto;padding:12px var(--nav-pad-x);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.buy-bar-info{display:flex;flex-direction:column;min-width:0;}
.buy-bar-name{font-size:15px;font-weight:800;color:var(--espresso);letter-spacing:-.2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.buy-bar-meta{font-size:12px;color:var(--gray-60);margin-top:2px;}
.buy-bar-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.buy-bar-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:0 5px;line-height:1.05;}
.buy-bar-orig{font-size:12px;color:var(--gray-50);text-decoration:line-through;line-height:1;flex-basis:100%;text-align:right;}
.buy-bar-amt{font-size:20px;font-weight:900;color:var(--red);letter-spacing:-.5px;}
.buy-bar-cap{font-size:11px;color:var(--gray-50);}
.buy-bar-alt{background:none;border:none;font-family:var(--font);font-size:13px;font-weight:600;color:var(--gray-60);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;white-space:nowrap;transition:color .15s;}
.buy-bar-alt:hover{color:var(--red);}
.buy-bar-buy{background:var(--red);color:var(--white);border:none;border-radius:100px;font-family:var(--font);font-size:14px;font-weight:700;padding:11px 28px;cursor:pointer;transition:background .15s;white-space:nowrap;}
.buy-bar-buy:hover{background:var(--coral);}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .buy-bar-inner{padding:10px var(--nav-pad-x-mobile);gap:12px;}
  .buy-bar-meta{display:none;}
  .buy-bar-actions{gap:12px;}
  .buy-bar-amt{font-size:18px;}
  .buy-bar-buy{padding:10px 20px;}
  .hero-inner,.download-inner{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .tier-section{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .tier-grid{grid-template-columns:1fr;}
  .phone-slot{display:none;}
  .price-widget,.renew-card{width:100%;max-width:500px;}
  .renew-note-section{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .flow-steps{grid-template-columns:1fr 1fr;gap:32px;}
  .flow-steps::before{display:none;}
  .wim-grid{grid-template-columns:1fr 1fr;}
  .wim-section{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .ov-section{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .ov-inner h2{font-size:28px;}
  /* feature showcase: stack copy above visual, keep copy first regardless of .reverse */
  .fx-grid,.fx-grid.reverse{grid-template-columns:1fr;gap:28px;}
  .fx-grid.reverse .fx-copy{order:0;}
  .fx-grid.reverse .fx-visual{order:0;}
  .fx-intro{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .fx-intro h2{font-size:28px;}
  .fx-section{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .fx-tabbar{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);gap:6px;}
  .fx-tab{padding:8px 14px;font-size:12px;}
  .fx-panel{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .cmp-section{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
  .cmp-header h2{font-size:26px;}
  /* upgrade sheet on mobile: stick the CTA to the bottom */
  .upg-page .upg-main{padding-bottom:104px;}
  .upg-page .upg-footer{position:fixed;left:0;right:0;bottom:0;z-index:280;margin-top:0;padding:12px var(--nav-pad-x-mobile);background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-top:1px solid var(--border-sub);box-shadow:0 -6px 24px rgba(42,29,21,.1);}
  .hero h1{font-size:40px;}
  .simple-header .sh-inner,.simple-footer{padding-left:var(--nav-pad-x-mobile);padding-right:var(--nav-pad-x-mobile);}
}