/*
 * Wawlo — pre-launch landing page
 * Bootstrap 5.3 + original component styling.
 * All visible text uses Urbanist. External web-font sources are in fonts.css.
 * Palette: Royal Blue #2563ff / Navy #0f172a.
 */

/* 01 — Design tokens and base */
:root {
  --w-font: 'Urbanist', Arial, sans-serif;
  --w-blue: #2563ff;
  --w-blue-hover: #154fe3;
  --w-navy: #0f172a;
  --w-text: #53617a;
  --w-muted: #77859a;
  --w-line: #e6ecf5;
  --w-soft: #f5f8ff;
  --w-radius: 20px;
  --w-section: 108px;
  --bs-primary: #2563ff;
  --bs-primary-rgb: 37, 99, 255;
  --bs-body-color: #0f172a;
  --bs-body-bg: #fff;
  --bs-body-font-family: var(--w-font);
  --bs-font-sans-serif: var(--w-font);
  --bs-font-monospace: var(--w-font);
  --bs-link-color: #2563ff;
  --bs-link-hover-color: #154fe3;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; font-family: var(--w-font); font-weight: 500; color: var(--w-navy); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,h5,h6,button,input,select,textarea,.btn { font-family: var(--w-font); }
h1,h2,h3,h4,h5,h6 { font-weight: 750; color: var(--w-navy); }
h1,h2,h3,p,figure { margin-top: 0; }
h2 { font-size: clamp(32px, 3.05vw, 44px); line-height: 1.14; letter-spacing: -.038em; margin-bottom: 0; }
h3 { font-size: 21px; line-height: 1.28; letter-spacing: -.018em; }
p { color: var(--w-text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button,a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
::selection { background: #d6e3ff; color: var(--w-navy); }
:focus-visible { outline: 3px solid #7ea5ff; outline-offset: 5px; border-radius: 5px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { display: inline-block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; top: -90px; left: 16px; z-index: 3000; padding: 14px 24px; background: var(--w-navy); color: #fff; border-radius: 12px; }
.skip-link:focus { top: 12px; color: #fff; }
.container { --bs-gutter-x: 48px; }
.section { padding: var(--w-section) 0; }
.section-heading { margin-bottom: 42px; }
.section-description { max-width: 410px; font-size: 17px; line-height: 1.65; margin-bottom: 2px; }
.section-description.compact { max-width: 300px; }
.eyebrow { display: block; font-size: 12px; line-height: 1.4; font-weight: 750; letter-spacing: .14em; color: var(--w-blue); margin-bottom: 15px; }
.eyebrow.light { color: #9bbfff; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--w-blue); font-size: 14px; line-height: 1.4; font-weight: 750; }
.text-link .icon { width: 18px; height: 18px; transition: transform .2s; }
.text-link:hover { color: var(--w-blue-hover); }
.text-link:hover .icon { transform: translateX(4px); }
.icon-tile { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--w-blue); background: linear-gradient(145deg,#f0f5ff,#eaf1ff); box-shadow: inset 0 1px 1px #fff; }
.icon-tile .icon { width: 27px; height: 27px; stroke-width: 1.65; }

/* 02 — Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 13px 23px; border-radius: 9px; font-size: 15px; line-height: 1.45; font-weight: 750; border-width: 1px; transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; white-space: nowrap; }
.btn .icon { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--w-blue); --bs-btn-border-color: var(--w-blue); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--w-blue-hover); --bs-btn-hover-border-color: var(--w-blue-hover); --bs-btn-active-bg: #164bcd; --bs-btn-active-border-color: #164bcd; --bs-btn-focus-shadow-rgb: 37,99,255; box-shadow: 0 5px 12px #2563ff12, inset 0 1px 0 #ffffff24; }
.btn-primary:hover { box-shadow: 0 7px 18px #2563ff25; }
.btn-outline-primary { --bs-btn-color: var(--w-blue); --bs-btn-border-color: #b4caff; --bs-btn-hover-color: var(--w-blue); --bs-btn-hover-bg: #edf3ff; --bs-btn-hover-border-color: var(--w-blue); --bs-btn-active-color: var(--w-blue); --bs-btn-active-bg: #e5eeff; --bs-btn-active-border-color: var(--w-blue); background: #ffffffc9; }
.btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: #ffffff4d; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ffffff10; --bs-btn-hover-border-color: #ffffff9c; --bs-btn-active-bg: #ffffff15; --bs-btn-active-color: #fff; }
.btn-soft { background: #edf3ff; color: var(--w-blue); border-color: transparent; }
.btn-soft:hover { background: #e1ebff; color: var(--w-blue-hover); }

/* 03 — Navigation */
.site-header { position: sticky; top: 0; z-index: 1030; background: #ffffffeb; border-bottom: 1px solid transparent; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: border-color .2s,box-shadow .2s; }
.site-header.is-scrolled { border-color: #e6ecf5cc; box-shadow: 0 4px 24px #0f172a04; }
.navbar { min-height: 90px; padding: 12px 0; }
.brand { display: inline-flex; line-height: 1; align-items: center; color: var(--w-navy); }
.brand:hover { color: var(--w-navy); }
.brand-wordmark { display: inline-block; font-size: 37px; font-weight: 800; letter-spacing: -.065em; }
.brand img { height: 34px; max-width: 170px; width: auto; object-fit: contain; }
.navbar-brand { margin: 0 44px 0 0; padding: 0 0 3px; }
.navbar-nav { gap: 12px; }
.navbar .nav-link { font-size: 14px; font-weight: 700; line-height: 1.5; padding: 10px 8px; color: #35425a; position: relative; transition: color .18s; }
.navbar .nav-link:hover,.navbar .nav-link.active { color: var(--w-blue); }
.nav-actions { display: flex; gap: 12px; align-items: center; margin-left: 28px; }
.nav-actions .btn { min-height: 42px; padding: 10px 15px; font-size: 12px; gap: 10px; border-radius: 8px; }
.nav-actions .icon { width: 15px; height: 15px; }
.navbar-toggler { border: 1px solid var(--w-line); width: 44px; height: 44px; border-radius: 10px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--w-navy); }
.navbar-toggler span { width: 21px; height: 2px; background: currentColor; border-radius: 5px; transition: transform .2s; }
.navbar-toggler[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px #2563ff20; }

/* 04 — Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(118deg, #fff 8%, #fcfdff 37%,#f1f7ff 100%); }
.hero-halo { position: absolute; width: 1100px; height: 880px; right: -225px; top: -240px; pointer-events: none; background: radial-gradient(ellipse,#76aaff4d, #bcd9ff21 42%,transparent 68%); }
.hero-row { min-height: 704px; padding: 55px 0 38px; }
.hero-copy { padding-right: 20px; z-index: 2; }
.launch-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 10px 7px 9px; border: 1px solid #dbe7ff; background: #fff9; color: var(--w-blue); font-size: 9px; letter-spacing: .085em; font-weight: 800; line-height: 1; border-radius: 6px; margin-bottom: 27px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--w-blue); box-shadow: 0 0 0 3px #2563ff0c; }
.launch-pill-divider { width: 1px; height: 10px; background: #ccdcff; }
.hero h1 { font-size: clamp(45px, 4.65vw, 70px); line-height: 1.08; letter-spacing: -.049em; margin: 0 0 25px; font-weight: 800; }
.hero h1 span { color: var(--w-blue); }
.hero-title-br { display: none; }
.hero-description { max-width: 505px; font-size: 18px; line-height: 1.7; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #7a879c; margin: 16px 0 0; }
.hero-note .icon { width: 14px; height: 14px; color: #5b7abc; }
.hero-highlights { display: grid; grid-template-columns: repeat(4,1fr); width: 100%; max-width: 487px; border-top: 1px solid #dfe8f5; margin-top: 34px; padding-top: 23px; gap: 16px; }
.hero-highlights > div { display: flex; flex-direction: column; gap: 9px; }
.hero-highlights > div > span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #eff5ff; border: 1px solid #ffffff; border-radius: 12px; color: var(--w-blue); }
.hero-highlights .icon { width: 22px; height: 22px; }
.hero-highlights p { font-size: 12px; font-weight: 650; line-height: 1.45; margin: 0; color: #495a75; }
.hero-media { align-self: stretch; display: flex; align-items: center; position: relative; }
.device-figure { width: 100%; margin: 0; }
.hero-device-stage { position: relative; height: 562px; isolation: isolate; }
.device-stage { position: absolute; width: 660px; height: 560px; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.96); transform-origin: center; }
.device-figure figcaption { margin: -4px 0 0; color: #7a8fa9; font-size: 10px; font-weight: 600; text-align: center; }
.device-orbit { position: absolute; height: 250px; width: 650px; left: -26px; top: 145px; border: 1px solid #87b9ff40; border-bottom-color: #f7fdff; border-top-color: #71aaff40; transform: rotate(-32deg); border-radius: 50%; z-index: -1; background: linear-gradient(170deg,transparent 52%,#b5d9ff43 92%,#e5f5ff72); box-shadow: 0 12px 25px #82b6ff0d; }
.orbit-two { transform: rotate(30deg); top: 196px; left: -12px; width: 670px; height: 212px; background: linear-gradient(10deg,#8cbcff19,transparent); border-color: #bdd9ff33; }
.floating-goal { display: flex; align-items: center; gap: 13px; position: absolute; right: 12px; top: 48px; padding: 14px 20px; border: 1px solid #ffffff; border-radius: 13px; background: #ffffffd9; box-shadow: 0 12px 30px #2247780a; transform: rotate(3deg); }
.floating-goal > .icon { width: 31px; height: 31px; color: var(--w-blue); }
.floating-goal strong,.floating-goal span { display: block; font-size: 13px; line-height: 1.5; }
.floating-goal span { color: #6c7b94; font-size: 11px; }

/* 05 — Original, editable desktop UI mockup */
.laptop { position: absolute; left: 7px; top: 127px; width: 564px; height: 378px; transform: perspective(1600px) rotateY(-11deg) rotateZ(-6deg); }
.laptop-screen { width: 100%; height: 362px; overflow: hidden; border: 9px solid #17202d; border-radius: 19px 19px 12px 12px; background: #fff; box-shadow: 0 0 0 1px #7c8a9c,0 0 0 3px #ccd5df,0 28px 44px -18px #10274442; position: relative; }
.webcam { position: absolute; left: 46%; top: -1px; height: 5px; width: 44px; border-radius: 0 0 8px 8px; background: #182131; z-index: 2; }
.laptop-base { position: absolute; width: 610px; height: 17px; left: -22px; top: 361px; border-radius: 1px 1px 43% 43%; background: linear-gradient(#e9eef3 0%,#a9b7c6 38%,#4b5c72 88%,#172233); box-shadow: 0 20px 23px -11px #122b505c; }
.laptop-base::before { content: ''; position: absolute; width: 93px; height: 6px; top: 0; left: calc(50% - 46px); background: linear-gradient(#73849a,#b7c5d2); border-radius: 0 0 9px 9px; }
.device-brand { font-size: 21px; font-weight: 800; letter-spacing: -.065em; line-height: 1; color: var(--w-navy); }
.app-topbar { height: 39px; display: flex; align-items: center; padding: 0 16px; gap: 24px; border-bottom: 1px solid #eff2f7; }
.app-topbar .device-brand { font-size: 21px; }
.app-search { display: flex; align-items: center; gap: 7px; padding: 5px 12px; width: 237px; border-radius: 5px; background: #f7f9fc; color: #7b8ba3; font-size: 7px; }
.app-search .icon { width: 10px; height: 10px; }
.app-tools { display: flex; align-items: center; gap: 11px; margin-left: auto; }
.app-tools .icon { width: 11px; height: 11px; }
.app-tools i { font-style: normal; width: 18px; height: 18px; background: #ecf1fa; color: #4978d4; border-radius: 50%; text-align: center; line-height: 18px; font-size: 8px; }
.app-body { display: flex; height: calc(100% - 39px); }
.app-sidebar { width: 99px; padding: 13px 7px 8px 9px; border-right: 1px solid #eff2f8; flex-shrink: 0; }
.app-nav-item { display: flex; align-items: center; gap: 6px; padding: 8px 5px; font-size: 6.3px; font-weight: 600; color: #6b7c94; white-space: nowrap; }
.app-nav-item .icon { width: 11px; height: 11px; }
.app-nav-item.selected { color: var(--w-blue); background: #eef4ff; border-radius: 5px; }
.app-premium-mini { border: 1px solid #e7efff; background: #f3f7ff; border-radius: 6px; padding: 9px 7px; margin: 27px 3px 0; }
.app-premium-mini > .icon { width: 16px; height: 16px; color: var(--w-blue); display: block; margin-bottom: 5px; }
.app-premium-mini strong { font-size: 7px; display: block; }
.app-premium-mini small { font-size: 6px; color: #8693a8; display: block; margin-top: 3px; }
.app-content { padding: 12px; width: calc(100% - 99px); background: #fdfdff; }
.app-promo { height: 121px; padding: 12px 14px; border-radius: 8px; position: relative; overflow: hidden; color: white; background: radial-gradient(ellipse at 95% 80%,#2563ff 0%,#1747a9 35%,#111e36 80%); isolation: isolate; }
.app-promo > div { position: relative; z-index: 2; }
.app-promo > div > span:first-child { display: block; font-size: 5px; letter-spacing: .12em; font-weight: 600; color: #a6caff; margin-bottom: 5px; }
.app-promo strong { display: block; color: #fff; font-size: 19px; letter-spacing: -.035em; line-height: 1.13; }
.app-promo small { display: block; font-size: 5.7px; color: #cedaf1; margin: 6px 0 8px; }
.fake-button { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 4px; padding: 4px 7px; font-size: 5px; font-weight: 750; color: #233c6c; }
.fake-button .icon { width: 7px; height: 7px; }
.app-promo-product { position: absolute; width: 132px; height: 142px; right: -1px; top: -5px; z-index: 1; object-fit: contain; filter: drop-shadow(0 8px 12px #020d2780); }
.app-promo-orbit { position: absolute; width: 240px; height: 155px; border: 1px solid #d9e9ff35; border-radius: 50%; transform: rotate(-40deg); top: -22px; right: -80px; background: linear-gradient(30deg,#94c1ff2e,transparent); }
.app-caption { display: flex; justify-content: space-between; align-items: center; margin: 9px 0 7px; font-size: 7px; }
.app-caption b { font-weight: 750; }
.app-caption span { font-size: 5.5px; color: #8390a5; }
.app-caption .icon { width: 7px; height: 7px; color: #6590e8; }
.app-category-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.app-category-grid > div { display: flex; align-items: center; flex-direction: column; font-size: 5.6px; gap: 4px; padding: 4px 0; color: #536985; }
.app-category-grid .icon { width: 18px; height: 18px; color: #2563ff; padding: 3px; box-sizing: content-box; border: 1px solid #eaf0ff; border-radius: 6px; }
.app-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.app-product { background: #fff; border: 1px solid #eef1f6; border-radius: 5px; padding: 4px 6px 5px; }
.app-product img { height: 58px; width: 100%; object-fit: contain; }
.app-product strong { display: block; font-size: 5.8px; line-height: 1.5; }
.app-product span { display: block; font-size: 5px; color: #8a96aa; line-height: 1.6; }

/* 06 — Original, editable phone UI */
.phone { position: relative; padding: 4px; border-radius: 32px; background: linear-gradient(115deg,#b4c0cf,#495362 18%,#d7e2ec 29%,#6b788b 50%,#25303e 77%,#a4b0c0); box-shadow: 0 0 0 1px #5e7185,2px 7px 0 -2px #263750,0 22px 30px -12px #102c5952; }
.phone-hero { position: absolute; right: -7px; top: 166px; width: 185px; height: 398px; font-size: 9px; transform: rotate(4deg); z-index: 4; }
.phone-shell { background: white; border: 4px solid #111923; border-radius: 29px; height: 100%; overflow: hidden; position: relative; }
.phone-notch { position: absolute; width: 51px; height: 12px; top: 5px; left: 50%; transform: translateX(-50%); border-radius: 20px; background: #0b101a; z-index: 1; }
.phone-status { display: flex; justify-content: space-between; align-items: center; height: 25px; padding: 1px 14px 0; font-size: 6px; font-weight: 750; }
.phone-app { display: flex; flex-direction: column; padding: 5px 11px 8px; height: calc(100% - 25px); }
.phone-app-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 14px; }
.phone-app-header .device-brand { font-size: 18px; }
.phone-app-header > .icon { width: 11px; height: 11px; }
.phone-balance { background: radial-gradient(ellipse at 90% 15%,#3879ff,#123572 75%); padding: 12px; color: #fff; border-radius: 9px; box-shadow: 0 5px 15px #16479213; }
.phone-balance > span { display: block; font-size: .9em; font-weight: 600; color: #d2e1ff; }
.phone-balance strong { display: block; font-size: 2.65em; line-height: 1.2; letter-spacing: -.03em; margin-top: 4px; font-weight: 750; color: #fff; }
.phone-balance strong span { font-size: .48em; }
.balance-rule { margin-top: 11px; height: 4px; border-radius: 5px; background: #ffffff36; }
.balance-rule > span { display: block; width: 72%; height: 100%; border-radius: 5px; background: #9ccaff; }
.balance-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: .6em; color: #d8e5ff; }
.balance-meta b { font-weight: 650; }
.phone-section-title { display: flex; align-items: center; justify-content: space-between; font-weight: 750; font-size: .86em; margin-top: 16px; margin-bottom: 10px; }
.phone-section-title .icon { width: 10px; height: 10px; color: var(--w-blue); }
.phone-target { display: flex; align-items: center; gap: 5px; }
.phone-target img { width: 37px; height: 42px; object-fit: contain; border-radius: 6px; background: #f6f8fc; }
.phone-target strong { display: block; font-size: .7em; font-weight: 750; margin-bottom: 2px; }
.phone-target span { display: block; color: #8b98ac; font-size: .58em; }
.phone-target b { display: block; font-weight: 750; font-size: .78em; margin-top: 2px; }
.phone-target-progress { height: 3px; border-radius: 9px; background: #edf2fb; margin: 9px 0 4px; }
.phone-target-progress span { display: block; height: 100%; width: 72%; background: var(--w-blue); border-radius: 5px; }
.phone-target-note { margin: 0; font-size: .6em; color: #8999af; }
.phone-categories { display: flex; gap: 18px; justify-content: center; }
.phone-categories > span { width: 33px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e9f0fb; border-radius: 6px; color: #2e5087; background: #f8faff; }
.phone-categories .icon { width: 16px; height: 16px; }
.phone-nav { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #eff3fa; }
.phone-nav > span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8696af; }
.phone-nav .icon { width: 12px; height: 12px; }
.phone-nav small { font-size: .53em; font-weight: 650; }
.phone-nav > span.active { color: var(--w-blue); }
.phone-transaction { display: flex; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid #f0f4fa; }
.phone-transaction .transaction-icon { display: flex; align-items: center; justify-content: center; background: #f0f7ff; color: var(--w-blue); width: 26px; height: 26px; border-radius: 7px; }
.phone-transaction .transaction-icon .icon { width: 14px; height: 14px; }
.phone-transaction strong { font-size: .62em; display: block; font-weight: 750; }
.phone-transaction small { font-size: .52em; display: block; color: #8e9bb0; }
.phone-transaction > b { color: #316cbb; font-size: .61em; margin-left: auto; }

/* 07 — Core feature cards */
.intro-section { background: linear-gradient(#fff 45%,#f9fbff); padding-bottom: 87px; }
.feature-card { display: flex; flex-direction: column; padding: 29px; border: 1px solid var(--w-line); border-radius: var(--w-radius); background: linear-gradient(145deg,#fff,#ffffffed); box-shadow: 0 5px 22px #1c427703; transition: border-color .22s,box-shadow .22s,transform .22s; }
.feature-card:hover { border-color: #c4d6ff; box-shadow: 0 15px 35px #1b43870a; transform: translateY(-4px); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.card-index { color: #b4c0d3; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.feature-card h3 { font-size: 21px; margin-bottom: 12px; }
.feature-card p { font-size: 15px; line-height: 1.7; margin-bottom: 25px; }
.feature-card .text-link { margin-top: auto; }

/* 08 — Four-step process */
.how-section { padding-top: 81px; padding-bottom: 92px; background: #f9fbff; }
.steps { position: relative; }
.step-marker { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.step-marker > span { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: var(--w-blue); color: white; font-size: 12px; font-weight: 700; box-shadow: 0 4px 15px #2563ff17; flex: 0 0 auto; }
.step-line { width: 100%; height: 1px; background: linear-gradient(90deg,#cadcff, #e3ebf7); position: relative; margin-right: 3px; }
.step-line::after { content: ''; display: block; width: 5px; height: 5px; border-top: 1px solid #a0b8e5; border-right: 1px solid #a0b8e5; transform: rotate(45deg); position: absolute; right: 0; top: -2px; }
.steps > div:last-child .step-line { background: linear-gradient(90deg,#cadcff,transparent); }
.steps > div:last-child .step-line::after { display: none; }
.step-body { padding-right: 24px; }
.step-icon { color: var(--w-blue); display: inline-flex; padding: 6px 0; margin-bottom: 15px; }
.step-icon .icon { width: 31px; height: 31px; stroke-width: 1.45; }
.step h3 { font-size: 21px; margin-bottom: 12px; }
.step p { font-size: 15px; line-height: 1.7; margin-bottom: 0; }
.how-note { display: flex; align-items: center; gap: 9px; margin-top: 36px; color: #71819c; font-size: 12px; }
.how-note .icon { width: 15px; height: 15px; color: #8ea5cb; }

/* 09 — Navy savings section */
.savings-section { overflow: hidden; background: radial-gradient(ellipse at 11% 66%,#1a4181 0%,transparent 40%),radial-gradient(ellipse at 94% 7%,#20447f 0%,transparent 36%),var(--w-navy); position: relative; isolation: isolate; color: #fff; padding: 20px 0 18px; }
.savings-lines { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; pointer-events: none; }
.savings-lines i { position: absolute; width: 1900px; height: 620px; border: 1px solid #81abff0d; border-radius: 50%; left: 10%; top: -410px; transform: rotate(-26deg); }
.savings-lines i:nth-child(2) { left: 6%; top: -375px; }
.savings-lines i:nth-child(3) { left: 2%; top: -340px; }
.savings-visual { height: 640px; width: 100%; position: relative; }
.savings-aura { position: absolute; width: 670px; height: 670px; left: -80px; top: 2px; background: radial-gradient(ellipse,#2362ff56,transparent 58%); }
.savings-phone-stage { position: absolute; left: 154px; top: 44px; transform: rotate(-12deg); z-index: 2; }
.phone-savings { width: 266px; height: 576px; border-radius: 41px; padding: 5px; font-size: 12.5px; box-shadow: 0 0 0 1px #66788d,1px 8px 0 #0c192e,0 40px 55px #00000055; }
.phone-savings .phone-shell { border-width: 5px; border-radius: 35px; }
.phone-savings .phone-notch { width: 70px; height: 16px; top: 7px; }
.phone-savings .phone-status { height: 31px; padding: 2px 20px 0; font-size: 8px; }
.phone-savings .phone-app { height: calc(100% - 31px); padding: 8px 16px 12px; }
.phone-savings .phone-app-header { padding-bottom: 20px; }
.phone-savings .phone-app-header .device-brand { font-size: 25px; }
.phone-savings .phone-app-header > .icon { width: 15px; height: 15px; }
.phone-savings .phone-balance { padding: 17px; border-radius: 12px; }
.phone-savings .phone-section-title { margin-top: 20px; margin-bottom: 12px; }
.phone-savings .phone-target { gap: 9px; }
.phone-savings .phone-target img { width: 54px; height: 62px; }
.phone-savings .phone-target-progress { margin-top: 12px; height: 4px; }
.phone-savings .phone-nav { padding-top: 12px; }
.phone-savings .phone-nav .icon { width: 18px; height: 18px; }
.phone-savings .phone-nav small { font-size: .58em; }
.savings-loop { position: absolute; width: 470px; height: 189px; border: 2px solid #347bff75; border-bottom-color: #5eacff; border-radius: 50%; box-shadow: inset 0 -12px 35px #2484ff18,0 6px 18px #147dff20; background: linear-gradient(10deg,#388fff10 20%,transparent 48%); }
.loop-one { left: 19px; top: 127px; transform: rotate(-27deg); }
.loop-two { left: 45px; top: 341px; transform: rotate(21deg); width: 453px; }
.savings-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 17px 19px; border: 1px solid #80b5ff4d; border-radius: 14px; background: linear-gradient(120deg,#1d4073d9,#123164ed); box-shadow: 0 10px 30px #00000016; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.savings-float strong,.savings-float span { display: block; }
.savings-float strong { font-size: 12px; font-weight: 650; color: white; }
.savings-float span { font-size: 10px; color: #bad1f4; margin-top: 3px; }
.savings-float .float-icon { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #3f83ff; color: white; }
.savings-float .float-icon .icon { width: 17px; height: 17px; }
.savings-float > .icon { width: 31px; height: 31px; color: #99c0ff; }
.float-top { left: -2px; top: 206px; transform: rotate(-4deg); }
.float-bottom { left: 303px; bottom: 114px; transform: rotate(4deg); white-space: nowrap; }
.float-bottom strong { font-size: 12px; margin-top: 5px; }
.savings-copy { padding-left: 33px; padding-top: 35px; padding-bottom: 35px; }
.savings-copy h2 { font-size: clamp(38px,3.5vw,51px); color: white; line-height: 1.14; margin-bottom: 24px; }
.savings-copy h2 span { color: #adcdff; }
.savings-copy > p { max-width: 460px; color: #becee7; font-size: 17px; line-height: 1.8; margin-bottom: 28px; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; align-items: center; gap: 11px; }
.check-list li > .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #edf3ff; color: #4b7df6; stroke-width: 2.5; flex-shrink: 0; }
.savings-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 33px; }
.savings-list li { color: #dae5f6; font-size: 15px; }
.savings-list li > .icon { width: 20px; height: 20px; color: #b5d1ff; background: #2c5793; padding: 4px; }
.savings-caption { display: block; color: #8a9dbc; font-size: 10px; margin-top: 16px; }

/* 10 — User and seller feature grid */
.benefits-section { padding-bottom: 96px; }
.benefit-card { display: flex; flex-direction: column; padding: 23px 20px 26px; background: #fff; border: 1px solid var(--w-line); border-radius: 16px; box-shadow: 0 4px 13px #172f5903; transition: border-color .2s,box-shadow .2s; }
.benefit-card:hover { border-color: #c7d8ff; box-shadow: 0 10px 20px #193c6b07; }
.benefit-card .icon-tile { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 20px; }
.benefit-card .icon-tile .icon { width: 23px; height: 23px; }
.benefit-card h3 { font-size: 16px; line-height: 1.4; margin-bottom: 9px; min-height: 23px; }
.benefit-card p { font-size: 13px; line-height: 1.7; margin-bottom: 0; color: #65748c; }

/* 11 — Membership comparison */
.premium-section { background: linear-gradient(120deg,#f7faff,#f1f6ff 70%,#f9fbff); border-top: 1px solid #edf2fb; border-bottom: 1px solid #edf2fb; }
.premium-copy h2 { margin-bottom: 23px; font-size: clamp(32px,2.9vw,42px); }
.premium-copy > p { margin-bottom: 20px; font-size: 16px; max-width: 340px; line-height: 1.7; }
.premium-copy .premium-note { font-size: 12px; line-height: 1.7; color: #8190a7; padding-top: 3px; margin-bottom: 23px; }
.premium-copy .text-link { font-size: 12px; gap: 7px; }
.membership-card { border: 1px solid #dee7f5; border-radius: 20px; padding: 32px 30px 28px; display: flex; flex-direction: column; position: relative; min-height: 443px; }
.membership-card.standard { background: #ffffffc9; }
.membership-top { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.membership-top > span:last-child { font-size: 8px; letter-spacing: .11em; font-weight: 750; color: #8997ae; }
.membership-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: #f1f5fc; color: #677d9e; }
.membership-icon .icon { width: 20px; height: 20px; }
.membership-card h3 { font-size: 27px; margin-bottom: 11px; letter-spacing: -.03em; }
.membership-card > p { font-size: 13px; line-height: 1.65; color: #65748c; margin-bottom: 23px; }
.membership-card .check-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.membership-card .check-list li { font-size: 13px; color: #64758f; line-height: 1.4; }
.membership-card .check-list li > .icon { width: 17px; height: 17px; }
.membership-card .btn { margin-top: auto; min-height: 46px; font-size: 13px; padding: 12px 16px; }
.membership-card.premium { background: radial-gradient(ellipse at 104% 5%,#285ecd 0%,transparent 57%),var(--w-navy); border-color: #254784; box-shadow: 0 18px 38px #1c458321; color: white; }
.membership-badge { position: absolute; top: -13px; right: 22px; padding: 6px 13px; background: var(--w-blue); color: #fff; font-size: 10px; font-weight: 650; line-height: 1.4; border-radius: 7px; border: 1px solid #4b80ff; box-shadow: 0 3px 8px #2563ff15; }
.premium .membership-icon { background: #588eff20; color: #88b2ff; }
.premium .membership-top > span:last-child { color: #a9c4f2; }
.premium h3 { color: white; }
.premium > p { color: #b7c8e4; }
.premium .check-list li { color: #d1dff3; }
.premium .check-list li > .icon { background: #357cf6; color: #fff; }

/* 12 — Seller onboarding */
.sellers-section { padding-bottom: 95px; }
.sellers-section .section-heading { margin-bottom: 25px; }
.seller-intro { max-width: 810px; margin-bottom: 40px; font-size: 17px; line-height: 1.7; }
.seller-card { background: linear-gradient(160deg,#fcfdff,#fff); }
.seller-process { display: flex; align-items: center; gap: 34px; padding: 28px 30px; border: 1px solid #e5ecf7; border-radius: 16px; background: #f8faff; margin-top: 30px; }
.seller-process-title { padding-right: 30px; border-right: 1px solid #dde6f5; min-width: 222px; }
.seller-process-title > span { display: block; font-size: 9px; font-weight: 750; letter-spacing: .1em; color: #7e94b6; margin-bottom: 7px; }
.seller-process-title > strong { display: block; font-size: 15px; line-height: 1.4; font-weight: 750; }
.seller-process-steps { display: grid; grid-template-columns: repeat(4,1fr); width: 100%; gap: 26px; }
.seller-process-steps > div { display: flex; align-items: center; gap: 11px; position: relative; }
.seller-process-steps > div > span { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 10px; font-weight: 750; color: var(--w-blue); background: #eaf1ff; border-radius: 50%; }
.seller-process-steps strong { font-size: 12px; font-weight: 650; line-height: 1.35; }
.seller-process-steps .icon { width: 13px; height: 13px; position: absolute; right: -15px; color: #a4b8d9; }
.seller-disclosure { margin: 17px 5px 0; font-size: 11px; line-height: 1.7; color: #8895aa; max-width: 1050px; }

/* 13 — Module previews */
.modules-section { padding-top: 85px; padding-bottom: 96px; background: linear-gradient(#f8faff,#fff); border-top: 1px solid #f0f3f9; }
.module-card { border: 1px solid #e5ecf6; border-radius: 16px; background: white; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s,transform .2s; }
.module-card:hover { transform: translateY(-4px); border-color: #c2d4fa; }
.module-art { height: 157px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 60%,#e9f0ff,#f6f8fc); position: relative; }
.module-art img { width: 144px; height: 154px; object-fit: contain; filter: drop-shadow(0 8px 4px #264c7110); }
.module-art-0 img { width: 146px; height: 146px; }
.module-art-1 img { height: 152px; }
.module-art-3 { background: radial-gradient(ellipse at 50% 60%,#f1ede9,#f8f8f8); }
.module-art-3 img { height: 153px; width: 150px; }
.module-copy { padding: 19px 17px 22px; }
.module-copy h3 { font-size: 15px; margin-bottom: 9px; font-weight: 750; }
.module-copy p { font-size: 12px; line-height: 1.6; color: #65748c; margin-bottom: 0; }
.module-goal { position: relative; transform: rotate(-9deg); }
.mini-phone { border: 4px solid #25354b; background: linear-gradient(#fcfdff,#e4eeff); width: 71px; height: 124px; border-radius: 14px; padding-top: 30px; text-align: center; box-shadow: 5px 8px 9px #5c789229; position: relative; }
.mini-phone-notch { width: 28px; height: 6px; border-radius: 10px; background: #25354b; position: absolute; top: 4px; left: 17px; }
.mini-phone > .icon { width: 30px; height: 30px; color: var(--w-blue); margin-bottom: 7px; }
.mini-phone i { display: block; height: 5px; width: 43px; background: #cadbff; margin: 7px auto; border-radius: 5px; }
.mini-phone i:last-child { width: 28px; background: #80a8ff; }
.module-goal > span { position: absolute; z-index: 2; right: -28px; top: 9px; display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 14px; background: white; box-shadow: 0 6px 15px #385d8920; transform: rotate(12deg); }
.module-goal > span .icon { width: 27px; height: 27px; fill: #ff6d8f; stroke: #ed6685; stroke-width: 1; }
.module-bell { position: relative; color: #3c73fb; transform: rotate(10deg); }
.module-bell > .icon { width: 79px; height: 79px; fill: #5489ff; stroke: #2760ed; stroke-width: 1; filter: drop-shadow(4px 7px 0 #a1bffe) drop-shadow(0 14px 10px #638bc34d); }
.module-bell > span { position: absolute; right: 6px; top: 5px; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 4px solid #82aafa; }
.module-blog { width: 130px; height: 140px; position: relative; margin-top: 10px; }
.blog-paper { width: 83px; height: 113px; border: 1px solid #dce3ef; border-radius: 7px; background: #fff; position: absolute; box-shadow: 4px 6px 15px #4b6f9a12; }
.blog-paper.back { left: 30px; top: 3px; transform: rotate(19deg); background: #e6edfa; }
.blog-paper.front { left: 20px; top: 7px; transform: rotate(-14deg); padding: 9px; }
.blog-paper-picture { width: 100%; height: 48px; border-radius: 3px; background: linear-gradient(140deg,#2563ff,#a1c4ff); display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 9px; }
.blog-paper i { display: block; height: 4px; border-radius: 4px; background: #dce5f2; margin: 5px 0; }
.blog-paper i:last-child { width: 40px; }

/* 14 — FAQ */
.faq-section { padding-top: 84px; padding-bottom: 108px; }
.faq-intro { position: sticky; top: 135px; }
.faq-intro h2 { margin-bottom: 23px; }
.faq-intro > p { font-size: 15px; line-height: 1.75; max-width: 300px; margin-bottom: 26px; }
.faq-emblem { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; border-radius: 21px; background: #f2f6ff; color: #89adff; transform: rotate(-8deg); border: 1px solid #e7eefc; }
.faq-emblem .icon { width: 34px; height: 34px; stroke-width: 1.4; }
.faq-accordion { --bs-accordion-border-color: var(--w-line); --bs-accordion-border-radius: 12px; --bs-accordion-inner-border-radius: 11px; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-color: var(--w-navy); --bs-accordion-active-bg: #f8faff; }
.faq-accordion .accordion-item { border: 1px solid var(--w-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: white; }
.faq-accordion .accordion-item:last-child { margin-bottom: 0; }
.faq-accordion .accordion-header { font-size: 16px; }
.faq-accordion .accordion-button { gap: 20px; font-size: 15px; line-height: 1.5; font-weight: 700; padding: 20px 23px; background: transparent; color: var(--w-navy); box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--w-blue); background: #fbfcff; }
.faq-accordion .accordion-button::after { display: none; }
.faq-plus { display: inline-flex; color: #90a3c0; align-items: center; margin-left: auto; flex-shrink: 0; }
.faq-plus .icon { width: 17px; height: 17px; transition: transform .25s; }
.accordion-button:not(.collapsed) .faq-plus .icon { transform: rotate(45deg); color: var(--w-blue); }
.faq-accordion .accordion-button:focus-visible { outline: 3px solid #7ea5ff; outline-offset: -3px; }
.faq-accordion .accordion-body { font-size: 14px; color: #72829b; line-height: 1.85; padding: 0 23px 23px; background: #fbfcff; }

/* 15 — Closing CTA and footer */
.final-section { padding-bottom: 22px; }
.final-cta { padding: 55px 59px; border: 1px solid #233f70; border-radius: 25px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 10% 120%,#244c94 0%,transparent 50%),radial-gradient(ellipse at 105% 0%,#1e4991 0%,transparent 58%),var(--w-navy); }
.final-cta h2 { font-size: 37px; line-height: 1.18; color: #fff; margin-bottom: 17px; }
.final-cta .eyebrow { font-size: 10px; margin-bottom: 18px; }
.final-cta p { color: #acc0df; font-size: 14px; line-height: 1.65; max-width: 480px; margin: 0; }
.final-actions { display: flex; gap: 13px; justify-content: flex-end; }
.final-actions .btn { font-size: 12px; gap: 9px; padding: 13px 16px; min-height: 46px; }
.final-actions .icon { width: 15px; height: 15px; }
.final-cta .final-note { font-size: 10px; color: #839abb; margin-top: 16px; text-align: right; }
.cta-orbit { position: absolute; width: 710px; height: 310px; border: 1px solid #609dff55; border-radius: 50%; pointer-events: none; background: linear-gradient(20deg,transparent,#3c89ff20); box-shadow: 0 0 30px #3c88ff0a,inset 0 -15px 20px #1a5bca33; }
.cta-orbit-left { bottom: -255px; left: -264px; transform: rotate(27deg); }
.cta-orbit-right { top: -187px; right: -468px; transform: rotate(-37deg); border-bottom-width: 2px; }
.site-footer { background: #fff; padding: 47px 0 24px; }
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-bottom: 35px; }
.footer-brand .brand-wordmark { font-size: 34px; }
.footer-brand p { font-size: 12px; margin: 12px 0 0; color: #8a97ac; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 12px; font-weight: 650; color: #657690; }
.footer-nav a:hover { color: var(--w-blue); }
.footer-bottom { border-top: 1px solid #edf1f6; padding-top: 21px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-bottom > p { font-size: 10px; color: #97a3b6; margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 11px; color: #76859e; }
.legal-links:empty { display: none; }
.footer-top-link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: #7487a4; }
.footer-top-link .icon { width: 13px; height: 13px; }
.back-to-top { position: fixed; width: 42px; height: 42px; bottom: 24px; right: 23px; background: #fff; border: 1px solid #e0e8f4; border-radius: 12px; box-shadow: 0 6px 20px #17315a0d; z-index: 1000; color: var(--w-blue); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top .icon { width: 18px; height: 18px; }
.mobile-cta { display: none; }

/* 16 — Preview-only connection modal */
.preview-modal-content { border: 1px solid #e6ecf5; border-radius: 22px; padding: 36px; box-shadow: 0 20px 80px #0f172a22; }
.preview-modal-content > .icon-tile { margin-bottom: 24px; }
.preview-modal-content > .eyebrow { font-size: 10px; margin-bottom: 12px; }
.preview-modal-content h2 { font-size: 30px; margin-bottom: 16px; }
.preview-modal-content p { font-size: 15px; line-height: 1.7; }
.preview-modal-content .preview-note { color: #91a0b4; font-size: 11px; margin: 15px 0 22px; }
.preview-instruction { background: #f3f7ff; padding: 16px; border: 1px solid #e7eefb; border-radius: 10px; font-size: 13px; color: #6b7b94; line-height: 1.8; }
.preview-instruction code { color: #2563ff; font-size: 12px; }
.modal-close { position: absolute; top: 15px; right: 15px; border: 0; background: transparent; padding: 6px; color: #7284a0; border-radius: 8px; }
.modal-close .icon { width: 20px; height: 20px; }
.noscript-note { background: #eff4ff; padding: 16px 25px; text-align: center; font-size: 13px; }

/* 17 — Responsive layouts */
@media (min-width:1400px) {
  .container { max-width: 1320px; }
}
@media (min-width:1200px) and (max-width:1399.98px) {
  .container { max-width: 1184px; }
  .navbar-brand { margin-right: 22px; }
  .navbar-nav { gap: 5px; }
  .nav-actions { margin-left: 17px; }
  .nav-actions .btn { font-size: 11px; padding-inline: 13px; gap: 6px; }
  .hero-row { min-height: 657px; }
  .device-stage { transform: translate(-50%,-50%) scale(.85); }
  .hero-device-stage { height: 500px; }
  .hero h1 { font-size: 61px; }
  .hero-description { max-width: 440px; font-size: 16px; }
  .hero-actions .btn { font-size: 14px; padding-inline: 20px; gap: 13px; }
  .feature-card { padding: 25px; }
  .feature-card h3 { font-size: 19px; }
  .savings-phone-stage { left: 121px; }
  .savings-float { padding: 13px; }
  .float-top { left: -4px; top: 215px; }
  .float-bottom { left: 244px; bottom: 90px; }
  .savings-copy { padding-left: 21px; }
  .savings-loop { left: 0; width: 434px; }
  .savings-visual { height: 636px; }
  .membership-card { padding: 27px 24px; }
  .membership-top { gap: 8px; }
  .membership-top > span:last-child { font-size: 7px; }
  .seller-process-title { min-width: 203px; padding-right: 23px; }
  .seller-process { gap: 24px; padding: 26px; }
  .seller-process-steps { gap: 19px; }
  .seller-process-steps > div { gap: 7px; }
  .seller-process-steps strong { font-size: 11px; }
  .module-copy { padding: 17px 13px; }
  .module-copy h3 { font-size: 14px; }
  .final-cta { padding: 48px 45px; }
  .final-actions { gap: 9px; }
  .final-actions .btn { font-size: 11px; padding-inline: 13px; }
}
@media (max-width:1199.98px) {
  .navbar-collapse { padding: 24px 0 12px; }
  .navbar-nav { gap: 4px; }
  .navbar .nav-link { font-size: 15px; padding: 10px 4px; }
  .nav-actions { margin: 17px 0 0; }
  .nav-actions .btn { min-height: 46px; font-size: 13px; padding: 11px 18px; }
  .navbar { min-height: 79px; }
  .navbar-brand { margin-right: 0; }
  .brand-wordmark { font-size: 34px; }
}
@media (min-width:992px) and (max-width:1199.98px) {
  :root { --w-section: 85px; }
  .container { max-width: 990px; }
  .hero-row { min-height: 662px; padding-top: 55px; }
  .hero-copy { padding-right: 6px; }
  .hero h1 { font-size: 52px; }
  .hero-description { font-size: 16px; max-width: 415px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { font-size: 12px; padding: 12px 15px; gap: 10px; min-height: 48px; }
  .hero-highlights { margin-top: 27px; gap: 10px; max-width: 425px; }
  .hero-highlights p { font-size: 11px; }
  .hero-device-stage { height: 439px; }
  .device-stage { transform: translate(-50%,-50%) scale(.72); }
  .device-figure figcaption { font-size: 9px; margin-top: 12px; }
  .floating-goal { right: 3px; }
  .feature-card { min-height: 284px; }
  .savings-visual { height: 580px; }
  .savings-phone-stage { left: 111px; top: 37px; transform: rotate(-12deg) scale(.91); transform-origin: top left; }
  .float-top { top: 200px; left: -7px; padding: 12px; gap: 8px; }
  .float-top strong { font-size: 10px; }
  .float-top span { font-size: 9px; }
  .float-bottom { left: 185px; bottom: 74px; padding: 12px; }
  .float-bottom strong { font-size: 11px; }
  .savings-loop { width: 375px; left: 0; }
  .savings-copy { padding-left: 17px; }
  .savings-copy h2 { font-size: 41px; }
  .savings-copy > p { font-size: 15px; }
  .savings-list { gap: 16px; }
  .savings-list li { font-size: 12px; gap: 8px; }
  .premium-copy h2 { font-size: 33px; }
  .premium-copy > p { font-size: 14px; }
  .membership-card { padding: 26px 20px; }
  .membership-card h3 { font-size: 23px; }
  .membership-top > span:last-child { font-size: 7px; letter-spacing: .06em; }
  .membership-top { gap: 7px; }
  .membership-icon { width: 27px; height: 27px; }
  .membership-card > p { font-size: 11px; }
  .membership-card .check-list li { font-size: 11px; }
  .membership-card .check-list li > .icon { width: 15px; height: 15px; }
  .seller-process { flex-direction: column; align-items: stretch; gap: 20px; padding: 26px 30px; }
  .seller-process-title { border: 0; display: flex; align-items: center; gap: 18px; }
  .seller-process-title > span { margin: 0; }
  .final-cta { padding: 45px 36px; }
  .final-cta h2 { font-size: 33px; }
  .final-actions { flex-direction: column; align-items: flex-end; }
  .final-actions .btn { min-width: 187px; }
}
@media (max-width:991.98px) {
  :root { --w-section: 80px; }
  .hero-row { padding-top: 52px; padding-bottom: 36px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: 67px; }
  .hero-description { max-width: 540px; }
  .hero-highlights { max-width: 510px; }
  .hero-media { margin-top: 22px; }
  .hero-device-stage { height: 545px; }
  .device-stage { transform: translate(-50%,-50%) scale(.91); }
  .device-figure figcaption { margin-top: 5px; }
  .hero-halo { right: -260px; top: 400px; }
  .section-description { max-width: 580px; }
  .intro-section { padding-bottom: 75px; }
  .how-section { padding-top: 70px; padding-bottom: 76px; }
  .step p { max-width: 270px; }
  .step-body { padding-right: 10px; }
  .step { padding-bottom: 8px; }
  .savings-section { padding: 67px 0 50px; }
  .savings-copy { padding: 0 24px; order: -1; }
  .savings-copy h2 { font-size: 49px; }
  .savings-copy > p { max-width: 560px; }
  .savings-list { max-width: 575px; }
  .savings-visual { height: 592px; max-width: 600px; margin: 0 auto; }
  .savings-phone-stage { left: 175px; top: 21px; }
  .float-top { left: 12px; top: 179px; }
  .float-bottom { left: 326px; bottom: 96px; }
  .savings-aura { width: 700px; top: -70px; left: -20px; }
  .loop-one { left: 40px; top: 95px; }
  .loop-two { left: 68px; top: 331px; }
  .benefits-section { padding-bottom: 80px; }
  .benefit-card { padding: 26px; }
  .benefit-card h3 { font-size: 18px; }
  .benefit-card p { font-size: 14px; }
  .premium-copy { margin-bottom: 25px; }
  .premium-copy > p { max-width: 530px; }
  .premium-copy h2 { font-size: 43px; }
  .seller-process { flex-direction: column; gap: 22px; align-items: stretch; }
  .seller-process-title { border: 0; display: flex; align-items: center; gap: 18px; }
  .seller-process-title > span { margin: 0; }
  .seller-process-steps { gap: 21px; }
  .seller-process-steps > div { gap: 8px; }
  .seller-process-steps strong { font-size: 11px; }
  .seller-disclosure { font-size: 10px; }
  .modules-section { padding-top: 80px; padding-bottom: 80px; }
  .module-copy h3 { font-size: 17px; }
  .module-copy p { font-size: 13px; }
  .faq-section { padding-top: 66px; padding-bottom: 80px; }
  .faq-intro > p { max-width: 460px; margin-bottom: 0; }
  .faq-emblem { display: none; }
  .final-cta { padding: 43px; }
  .final-actions { justify-content: flex-start; flex-wrap: wrap; }
  .final-cta .final-note { text-align: left; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: 24px; }
  .footer-bottom { flex-wrap: wrap; }
}
@media (max-width:767.98px) {
  .row.g-5 { --bs-gutter-x: 32px; }
  .container { --bs-gutter-x: 40px; }
  :root { --w-section: 67px; }
  h2 { font-size: 35px; }
  .section-heading { margin-bottom: 33px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; }
  .section-description { font-size: 15px; }
  .hero-row { padding-top: 39px; padding-bottom: 31px; }
  .hero h1 { font-size: 55px; }
  .hero-description { font-size: 16px; }
  .hero-highlights { margin-top: 28px; }
  .hero-media { margin-top: 18px; }
  .hero-device-stage { height: 452px; }
  .device-stage { transform: translate(-50%,-50%) scale(.745); }
  .hero-actions .btn { font-size: 13px; padding-inline: 18px; gap: 13px; }
  .feature-card { padding: 25px; }
  .feature-card h3 { font-size: 20px; }
  .feature-card p { font-size: 14px; }
  .feature-card .text-link { font-size: 12px; }
  .step-body { padding-right: 5px; }
  .step h3 { font-size: 20px; }
  .step p { font-size: 14px; }
  .how-note { font-size: 11px; align-items: flex-start; margin-top: 24px; }
  .how-note .icon { margin-top: 2px; }
  .savings-section { padding-top: 65px; padding-bottom: 23px; }
  .savings-copy { padding-inline: 20px; }
  .savings-copy h2 { font-size: 42px; }
  .savings-copy > p { font-size: 15px; }
  .savings-list li { font-size: 13px; gap: 10px; }
  .savings-visual { height: 532px; margin-top: 0; }
  .savings-phone-stage { left: 125px; top: 20px; transform: rotate(-12deg) scale(.9); transform-origin: top left; }
  .float-top { left: 0; top: 180px; padding: 12px; gap: 9px; }
  .savings-float strong { font-size: 10px; }
  .savings-float span { font-size: 9px; }
  .savings-float .float-icon { width: 25px; height: 25px; }
  .float-bottom { left: 230px; bottom: 85px; padding: 13px; }
  .savings-float > .icon { width: 23px; height: 23px; }
  .savings-loop { width: 397px; height: 170px; }
  .loop-one { left: -7px; top: 69px; }
  .loop-two { left: 21px; top: 274px; }
  .premium-copy h2 { font-size: 37px; }
  .membership-card { min-height: 420px; }
  .membership-card h3 { font-size: 28px; }
  .membership-card .check-list { gap: 17px; }
  .membership-top > span:last-child { font-size: 9px; }
  .membership-card > p { font-size: 14px; }
  .membership-card .check-list li { font-size: 14px; }
  .premium-section .row > .col-md-6 + .col-md-6 { margin-top: 36px; }
  .seller-process { padding: 23px; }
  .seller-process-title { flex-direction: column; align-items: flex-start; gap: 7px; }
  .seller-process-steps { grid-template-columns: 1fr 1fr; row-gap: 19px; }
  .seller-process-steps strong { font-size: 12px; }
  .seller-process-steps > div:nth-child(2) .icon { display: none; }
  .seller-intro { font-size: 15px; margin-bottom: 31px; }
  .sellers-section { padding-bottom: 66px; }
  .module-art { height: 165px; }
  .module-copy { padding: 20px 19px; }
  .module-copy h3 { font-size: 16px; }
  .faq-accordion .accordion-button { padding: 18px 20px; font-size: 14px; }
  .faq-accordion .accordion-body { padding: 0 20px 20px; font-size: 13px; }
  .final-cta { padding: 34px 30px; border-radius: 20px; }
  .final-cta h2 { font-size: 32px; }
  .final-cta p { font-size: 13px; }
  .final-actions { gap: 10px; }
  .final-actions .btn { font-size: 12px; padding-inline: 15px; }
  .final-cta .eyebrow { font-size: 9px; }
  .site-footer { padding-bottom: 93px; padding-top: 34px; }
  .footer-nav { gap: 14px 24px; }
  .footer-bottom { gap: 16px; }
  .footer-bottom > p { font-size: 9px; }
  .footer-top-link { font-size: 10px; }
  .legal-links { order: 3; flex-basis: 100%; }
  .mobile-cta { display: flex; gap: 10px; position: fixed; z-index: 1029; bottom: 0; width: 100%; padding: 11px 16px max(11px, env(safe-area-inset-bottom)); border-top: 1px solid #e1e9f6; background: #ffffffeb; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateY(110%); transition: transform .24s; }
  .mobile-cta.visible { transform: translateY(0); }
  .mobile-cta .btn { flex: 1; min-height: 43px; font-size: 12px; padding: 10px; gap: 9px; }
  .mobile-cta .btn .icon { width: 15px; height: 15px; }
  .back-to-top { bottom: 84px; right: 15px; width: 35px; height: 35px; border-radius: 10px; }
}
@media (max-width:575.98px) {
  :root { --w-section: 60px; }
  .container { --bs-gutter-x: 38px; }
  .navbar { min-height: 73px; padding: 10px 0; }
  .brand-wordmark { font-size: 32px; }
  .nav-actions { flex-wrap: wrap; gap: 10px; }
  .nav-actions .btn { font-size: 12px; gap: 9px; padding-inline: 14px; }
  h2 { font-size: 33px; }
  .hero-row { padding-top: 28px; }
  .hero h1 { font-size: clamp(38px,10.45vw,57px); line-height: 1.075; letter-spacing: -.044em; margin-bottom: 23px; }
  .hero-title-br { display: inline; }
  .launch-pill { font-size: 8px; gap: 8px; margin-bottom: 23px; letter-spacing: .06em; }
  .hero-description { font-size: 15px; line-height: 1.75; max-width: 440px; margin-bottom: 24px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { font-size: 12px; padding: 12px 15px; min-height: 48px; gap: 11px; }
  .hero-note { font-size: 10px; gap: 6px; margin-top: 14px; }
  .hero-highlights { gap: 7px; margin-top: 24px; padding-top: 20px; }
  .hero-highlights > div > span { width: 36px; height: 36px; border-radius: 11px; }
  .hero-highlights .icon { width: 20px; height: 20px; }
  .hero-highlights p { font-size: 10px; line-height: 1.5; }
  .hero-media { margin-top: 13px; }
  .hero-device-stage { height: calc((100vw - 38px) * .88); }
  .device-stage { transform: translate(-50%,-50%) scale(var(--stage-scale,.56)); }
  .device-figure figcaption { font-size: 8px; margin: 14px 0 0; }
  .hero-halo { width: 750px; height: 800px; right: -280px; top: 350px; }
  .feature-card { min-height: 255px; padding: 26px; }
  .card-top { margin-bottom: 20px; }
  .feature-card h3 { font-size: 22px; }
  .feature-card p { font-size: 15px; max-width: 350px; }
  .feature-card .text-link { font-size: 14px; }
  .intro-section { padding-bottom: 64px; }
  .how-section { padding-top: 56px; padding-bottom: 62px; }
  .steps { --bs-gutter-y: 0; }
  .steps > div { padding-top: 0; padding-bottom: 0; }
  .step { display: flex; gap: 23px; padding-bottom: 30px; position: relative; }
  .step-marker { width: 35px; flex: 0 0 auto; margin: 0; align-items: flex-start; position: relative; }
  .step-line { position: absolute; width: 1px; height: calc(100% - 26px); left: 17px; top: 43px; margin: 0; background: #dce7fb; }
  .step-line::after { display: none; }
  .steps > div:last-child .step-line { display: none; }
  .step-body { padding-top: 0; }
  .step-icon { display: none; }
  .step h3 { font-size: 21px; margin-bottom: 8px; padding-top: 3px; }
  .step p { font-size: 14px; max-width: 330px; }
  .steps > div:last-child .step { padding-bottom: 0; }
  .how-note { margin-top: 27px; font-size: 10px; }
  .savings-section { padding-top: 57px; padding-bottom: 7px; }
  .savings-copy { padding-inline: 19px; }
  .savings-copy h2 { font-size: 39px; margin-bottom: 20px; }
  .savings-copy > p { font-size: 15px; }
  .savings-list { gap: 16px; }
  .savings-list li { font-size: 12px; gap: 9px; }
  .savings-list li > .icon { width: 18px; height: 18px; }
  .savings-copy .btn { font-size: 13px; }
  .savings-caption { font-size: 9px; }
  .savings-visual-col { padding-left: 0; padding-right: 0; }
  .savings-visual { width: 380px; height: 466px; left: 50%; transform: translateX(-50%); margin-left: 0; margin-top: -10px; }
  .savings-phone-stage { left: 103px; top: 2px; transform: rotate(-12deg) scale(.79); }
  .savings-float { padding: 10px 11px; border-radius: 10px; gap: 8px; }
  .savings-float strong { font-size: 8px; }
  .savings-float span { font-size: 7.2px; }
  .savings-float .float-icon { width: 22px; height: 22px; }
  .savings-float .float-icon .icon { width: 13px; height: 13px; }
  .float-top { left: 2px; top: 143px; }
  .float-bottom { left: 185px; bottom: 96px; }
  .float-bottom strong { font-size: 9px; }
  .float-bottom .icon { width: 21px; height: 21px; }
  .savings-loop { width: 340px; height: 145px; }
  .loop-one { left: 17px; top: 67px; }
  .loop-two { left: 18px; top: 257px; }
  .benefit-card { padding: 25px; }
  .benefit-card .icon-tile { margin-bottom: 19px; }
  .benefit-card h3 { font-size: 19px; }
  .benefit-card p { font-size: 15px; }
  .benefits-section { padding-bottom: 62px; }
  .premium-copy h2 { font-size: 36px; }
  .premium-copy > p { font-size: 15px; }
  .membership-card { padding: 30px; }
  .membership-card .btn { font-size: 14px; }
  .seller-intro { margin-bottom: 30px; }
  .seller-process { margin-top: 23px; padding: 21px; }
  .seller-process-steps { gap: 21px 19px; }
  .seller-process-steps strong { font-size: 10px; }
  .seller-process-steps > div { gap: 7px; }
  .seller-process-steps > div > span { width: 25px; height: 25px; font-size: 9px; }
  .seller-process-steps .icon { width: 10px; right: -12px; }
  .seller-disclosure { font-size: 10px; }
  .module-art { height: 140px; }
  .module-art img { height: 138px; width: 129px; }
  .module-copy { padding: 17px 14px; }
  .module-copy h3 { font-size: 14px; }
  .module-copy p { font-size: 11px; line-height: 1.65; }
  .module-card { border-radius: 13px; }
  .module-blog { transform: scale(.87); }
  .module-bell { transform: rotate(10deg) scale(.9); }
  .module-goal { transform: rotate(-9deg) scale(.9); }
  .modules-section { padding-top: 62px; padding-bottom: 62px; }
  .faq-section { padding-top: 57px; padding-bottom: 67px; }
  .faq-intro h2 { margin-bottom: 19px; }
  .faq-accordion .accordion-button { padding: 17px 17px; font-size: 13px; gap: 12px; }
  .faq-accordion .accordion-body { padding: 0 17px 19px; font-size: 13px; }
  .final-section .container { --bs-gutter-x: 26px; }
  .final-cta { padding: 34px 23px; }
  .final-cta h2 { font-size: 30px; }
  .final-cta p { font-size: 12px; }
  .final-cta .eyebrow { font-size: 8px; letter-spacing: .11em; }
  .final-actions { flex-direction: column; gap: 11px; }
  .final-actions .btn { font-size: 13px; min-height: 48px; }
  .final-cta .final-note { font-size: 9px; text-align: center; }
  .footer-main { padding-bottom: 27px; }
  .footer-nav { gap: 14px 19px; font-size: 11px; }
  .footer-brand p { font-size: 11px; }
  .footer-bottom { gap: 12px; }
  .footer-top-link { margin-left: auto; }
  .preview-modal-content { padding: 28px; }
  .preview-modal-content h2 { font-size: 27px; }
  .preview-modal-content .btn { white-space: normal; font-size: 13px; }
}
@media (max-width:359.98px) {
  .row.g-5 { --bs-gutter-x: 30px; }
  .container { --bs-gutter-x: 30px; }
  .hero h1 { font-size: 37px; }
  .launch-pill { font-size: 7px; gap: 6px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; font-size: 13px; }
  .hero-description { font-size: 14px; }
  .hero-note { font-size: 9px; }
  .hero-highlights p { font-size: 9px; }
  .savings-visual { transform: translateX(-50%) scale(.86); margin-top: -25px; margin-bottom: -32px; transform-origin: 50% 0; }
  .savings-copy h2 { font-size: 34px; }
  .savings-list li { font-size: 11px; }
  .module-copy { padding: 15px 11px; }
  .module-copy h3 { font-size: 13px; }
  .module-copy p { font-size: 10px; }
  .module-art { height: 123px; }
  .module-art img { height: 122px; }
  .seller-process { padding: 19px 16px; }
  .seller-process-steps > div { gap: 5px; }
  .seller-process-steps strong { font-size: 9px; }
  .seller-process-steps > div > span { width: 23px; height: 23px; }
  .final-cta h2 { font-size: 28px; }
  .mobile-cta .btn { font-size: 11px; gap: 6px; }
}

/* 18 — Motion and print accessibility */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header { position: static; }
  .mobile-cta,.back-to-top,.navbar-toggler,.modal,.nav-actions { display: none !important; }
  .collapse { display: block !important; }
  .accordion-body { padding: 15px !important; }
  .section { padding: 34px 0; }
  .hero-row { min-height: auto; }
  .feature-card,.membership-card,.benefit-card,.module-card,.accordion-item { break-inside: avoid; }
  .savings-section,.final-cta,.membership-card.premium { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-footer { padding-bottom: 0; }
}

/* Consistent type across Bootstrap controls, modal and editable UI mockups. */
html, body, h1, h2, h3, h4, h5, h6, button, input, optgroup, select, textarea,
.btn, .form-control, .form-select, .accordion-button, .modal, .navbar,
.brand-wordmark, .device-brand, code, pre, kbd, samp, svg text {
  font-family: var(--w-font);
  font-optical-sizing: auto;
}