:root {
  --bg: #fffaf0;
  --bg-soft: #f5f2e9;
  --surface: #ffffff;
  --surface-warm: #fff4cf;
  --ink: #171714;
  --muted: #6f6d64;
  --muted-2: #959188;
  --yellow: #ffc928;
  --yellow-deep: #f1aa00;
  --yellow-soft: #ffe58a;
  --line: rgba(23,23,20,.10);
  --line-strong: rgba(23,23,20,.16);
  --shadow: 0 28px 70px rgba(54, 42, 4, .10);
  --shadow-soft: 0 18px 45px rgba(54, 42, 4, .07);
  --container: 1240px;
  --radius-xl: 46px;
  --radius-lg: 34px;
  --radius-md: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button { border: 0; }
h1,h2,h3,p { margin-top: 0; }
::selection { background: var(--yellow); color: var(--ink); }

.section-shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.site-background { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.background-blob { position: absolute; border-radius: 999px; filter: blur(0); opacity: .75; }
.background-blob-one { width: 620px; height: 620px; top: -300px; right: -200px; background: radial-gradient(circle, rgba(255,201,40,.34), rgba(255,201,40,.04) 62%, transparent 72%); }
.background-blob-two { width: 620px; height: 620px; left: -390px; top: 50%; background: radial-gradient(circle, rgba(255,226,128,.32), rgba(255,226,128,.03) 64%, transparent 73%); }
.background-dots { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(rgba(23,23,20,.35) .75px, transparent .75px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 58%); }

.page-progress { position: fixed; z-index: 1200; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.page-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--yellow-deep), var(--yellow)); box-shadow: 0 0 18px rgba(255,201,40,.6); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: #7b7569;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,201,40,.17); }

.site-header { position: fixed; z-index: 100; top: 16px; right: 0; left: 0; padding-inline: 24px; pointer-events: none; }
.header-inner {
  display: flex;
  width: min(100%, var(--container));
  min-height: 66px;
  margin-inline: auto;
  padding: 8px 9px 8px 14px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(23,23,20,.08);
  border-radius: 22px;
  background: rgba(255,250,240,.76);
  box-shadow: 0 18px 55px rgba(75,62,19,.09), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
  transition: width 620ms var(--ease), min-height 360ms var(--ease), padding 360ms var(--ease), border-radius 360ms var(--ease), background 360ms ease, box-shadow 360ms ease, transform 620ms var(--ease);
}
.site-header.is-scrolled .header-inner { width: min(calc(100% - 12px), 790px); min-height: 54px; padding: 5px 6px 5px 11px; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 18px 48px rgba(75,62,19,.12); transform: translateY(-5px); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-icon { display: grid; width: 39px; height: 39px; place-items: center; overflow: hidden; border-radius: 12px; background: var(--yellow); box-shadow: 0 8px 18px rgba(158,108,0,.14), inset 0 1px 0 rgba(255,255,255,.65); transition: width 320ms var(--ease), height 320ms var(--ease), border-radius 320ms var(--ease); }
.site-header.is-scrolled .brand-icon { width: 32px; height: 32px; border-radius: 10px; }
.brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-size: 19px; font-weight: 850; letter-spacing: -.055em; text-transform: lowercase; }
.desktop-navigation { position: absolute; left: 50%; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); }
.desktop-navigation a { padding: 10px 14px; border-radius: 12px; color: #69665d; font-size: 13px; font-weight: 650; transition: color 180ms ease, background 180ms ease; }
.desktop-navigation a:hover, .desktop-navigation a.is-active { color: var(--ink); background: rgba(255,201,40,.18); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.nav-cta { display: inline-flex; min-height: 47px; padding: 0 16px; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 750; box-shadow: 0 10px 22px rgba(23,23,20,.14); transition: min-height 320ms var(--ease), padding 320ms var(--ease), transform 220ms var(--ease), box-shadow 220ms ease; }
.site-header.is-scrolled .nav-cta { min-height: 40px; padding-inline: 13px; border-radius: 12px; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(23,23,20,.20); }
.apple-mark { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.menu-toggle { position: relative; display: none; width: 46px; height: 46px; padding: 0; place-items: center; border-radius: 14px; background: var(--ink); cursor: pointer; }
.menu-toggle span { position: absolute; width: 18px; height: 1.5px; border-radius: 10px; background: #fff; transition: transform 280ms var(--ease); }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.menu-backdrop { position: fixed; z-index: 190; inset: 0; visibility: hidden; background: rgba(27,25,18,.22); opacity: 0; backdrop-filter: blur(8px); transition: opacity 240ms ease, visibility 240ms ease; }
.menu-backdrop.is-open { visibility: visible; opacity: 1; }
.mobile-menu { position: fixed; z-index: 200; top: 12px; right: 12px; bottom: 12px; display: flex; width: min(calc(100% - 24px), 420px); padding: 18px; flex-direction: column; visibility: hidden; border: 1px solid rgba(23,23,20,.08); border-radius: 30px; background: #fffdf7; box-shadow: -30px 30px 90px rgba(50,39,7,.18); opacity: 0; transform: translateX(calc(100% + 30px)); transition: transform 520ms var(--ease), opacity 240ms ease, visibility 240ms ease; }
.mobile-menu.is-open { visibility: visible; opacity: 1; transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-close { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border-radius: 14px; background: #f2eee4; color: var(--ink); cursor: pointer; }
.mobile-menu-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.mobile-navigation { display: grid; margin-top: 50px; }
.mobile-navigation a { display: grid; grid-template-columns: 38px 1fr auto; min-height: 72px; padding: 0 4px; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(25px, 8vw, 35px); font-weight: 730; letter-spacing: -.045em; transition: padding-left 220ms var(--ease); }
.mobile-navigation a:hover { padding-left: 8px; }
.mobile-navigation a > span { color: #000; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.mobile-navigation svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobile-menu-footer { margin-top: auto; padding-top: 24px; }
.mobile-menu-footer p { max-width: 280px; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.mobile-download-button { display: flex; min-height: 62px; padding: 0 18px; align-items: center; gap: 12px; border-radius: 17px; background: var(--ink); color: white; }
.mobile-download-button .apple-mark { width: 24px; height: 24px; }
.mobile-download-button span { display: grid; font-size: 18px; font-weight: 720; line-height: 1.05; }
.mobile-download-button small { font-size: 10px; font-weight: 600; letter-spacing: .02em; opacity: .72; }

.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, .9fr); min-height: 860px; padding-top: 136px; padding-bottom: 90px; align-items: center; gap: 66px; }
.hero-copy { position: relative; z-index: 4; padding-bottom: 20px; }
.hero-title { max-width: 760px; margin-bottom: 28px; font-size: clamp(64px, 7.5vw, 108px); line-height: .91; letter-spacing: -.073em; font-weight: 850; text-wrap: balance; }
.hero-title span { display: block; }
.hero-highlight { position: relative; width: max-content; max-width: 100%; z-index: 1; }
.hero-highlight::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -4%; bottom: .08em; height: .32em; border-radius: 999px; background: var(--yellow); transform: rotate(-1.3deg); }
.hero-lede { max-width: 650px; margin-bottom: 31px; color: var(--muted); font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.app-store-button { display: inline-flex; min-height: 63px; padding: 0 21px; align-items: center; gap: 12px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 16px 30px rgba(23,23,20,.14); transition: transform 220ms var(--ease), box-shadow 220ms ease; }
.app-store-button:hover { transform: translateY(-3px); box-shadow: 0 21px 38px rgba(23,23,20,.20); }
.app-store-button .apple-mark { width: 26px; height: 26px; }
.app-store-button > span { display: grid; font-size: 20px; font-weight: 760; letter-spacing: -.025em; line-height: 1.02; }
.app-store-button small { font-size: 10px; font-weight: 560; letter-spacing: .015em; opacity: .72; }
.secondary-action { display: inline-flex; min-height: 58px; padding: 0 6px 0 13px; align-items: center; gap: 11px; color: #393832; font-size: 14px; font-weight: 720; border-radius: 18px; transition: background 180ms ease, transform 220ms var(--ease); }
.secondary-action:hover { background: rgba(23,23,20,.045); transform: translateY(-2px); }
.action-circle { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--yellow); }
.action-circle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-row { display: flex; margin-top: 33px; align-items: center; flex-wrap: wrap; gap: 10px 18px; color: #77736a; font-size: 12px; font-weight: 650; }
.trust-row > span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { width: 16px; height: 16px; fill: none; stroke: #746f62; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hero-visual { position: relative; min-height: 690px; display: grid; place-items: center; isolation: isolate; }
.hero-sun { position: absolute; width: 560px; height: 560px; border-radius: 50%; background: linear-gradient(145deg, #ffd85f, #ffbd17); box-shadow: 0 45px 95px rgba(183,126,0,.19); }
.hero-sun::after { content: ""; position: absolute; inset: 18px; border-radius: inherit; border: 1px solid rgba(255,255,255,.36); }
.hero-ring { position: absolute; border: 1px solid rgba(23,23,20,.10); border-radius: 50%; }
.hero-ring-one { width: 665px; height: 665px; }
.hero-ring-two { width: 760px; height: 760px; opacity: .55; }
.device-stage { position: relative; z-index: 3; width: min(360px, 72%); transform-style: preserve-3d; transition: transform 360ms var(--ease); will-change: transform; }
.device-shadow { position: absolute; z-index: -1; left: 11%; right: 11%; bottom: -22px; height: 68px; border-radius: 50%; background: rgba(80,56,0,.28); filter: blur(28px); }
.device-frame { overflow: hidden; border-radius: 56px; filter: drop-shadow(0 30px 34px rgba(73,48,0,.20)); }
.device-frame img { width: 100%; height: auto; object-fit: contain; }
.hero-sticker { position: absolute; z-index: 6; border: 1px solid rgba(23,23,20,.10); background: rgba(255,255,255,.90); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); color: var(--ink); }
.hero-sticker-top { top: 13%; left: 0; padding: 15px 19px; border-radius: 22px; font-size: 13px; line-height: 1.22; transform: rotate(-5deg); }
.hero-sticker-top b { font-size: 17px; letter-spacing: -.03em; }
.hero-sticker-bottom { right: -1%; bottom: 13%; display: flex; padding: 12px 16px; align-items: center; gap: 8px; border-radius: 999px; color: #5f5a50; font-size: 12px; font-weight: 720; transform: rotate(3deg); }
.sticker-dot { width: 9px; height: 9px; border-radius: 50%; background: #4caf70; box-shadow: 0 0 0 5px rgba(76,175,112,.12); }

.signal-section { padding-bottom: 118px; }
.signal-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 58px; padding: 54px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-soft); }
.signal-intro h2 { max-width: 520px; margin-bottom: 0; font-size: clamp(48px, 5vw, 70px); line-height: .99; letter-spacing: -.055em; }
.signal-intro h2 span { display: inline-block; position: relative; }
.signal-intro h2 span::after { content: ""; position: absolute; left: -3px; right: -5px; bottom: 3px; height: 15px; background: var(--yellow); border-radius: 999px; z-index: -1; transform: rotate(-1deg); }
.signal-grid { display: grid; grid-template-columns: 1fr; }
.signal-grid article { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.signal-grid article:first-child { padding-top: 0; }
.signal-grid article:last-child { padding-bottom: 0; border-bottom: 0; }
.signal-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #fff2ba; color: #8c6900; font-size: 11px; font-weight: 850; }
.signal-grid strong { display: block; margin-bottom: 4px; font-size: 19px; letter-spacing: -.02em; }
.signal-grid p { max-width: 460px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.feature-section, .privacy-section, .pro-section { padding-bottom: 120px; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: end; gap: 72px; margin-bottom: 58px; }
.section-heading h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(50px, 5.7vw, 78px); line-height: .96; letter-spacing: -.06em; }
.section-heading > p { margin-bottom: 3px; color: var(--muted); font-size: 16px; line-height: 1.72; }
.feature-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feature-card { position: relative; overflow: hidden; min-height: 520px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset; transition: transform 260ms var(--ease), box-shadow 260ms ease, border-color 260ms ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: rgba(23,23,20,.14); }
.feature-card-large, .feature-card-upcoming { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .75fr) minmax(360px, 1fr); gap: 42px; align-items: center; }
.feature-card-large { background: linear-gradient(145deg, #fffdf8, #fff6dc); }
.feature-card-upcoming { background: linear-gradient(145deg, #fff0a5, #ffd75a); }
.feature-label { display: inline-flex; margin-bottom: 18px; color: #837b6d; font-size: 11px; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
.feature-card h3 { max-width: 520px; margin-bottom: 14px; font-size: clamp(36px, 3.5vw, 52px); line-height: 1; letter-spacing: -.055em; }
.feature-card p { max-width: 540px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.67; }
.feature-icon { display: grid; width: 51px; height: 51px; margin-bottom: 36px; place-items: center; border: 1px solid rgba(23,23,20,.08); border-radius: 16px; background: #fff2b2; }
.feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.balance-preview { position: relative; min-height: 390px; padding: 30px; overflow: hidden; border-radius: 28px; background: #181816; color: #fff; box-shadow: 0 26px 55px rgba(23,23,20,.18); }
.balance-preview::before { content: ""; position: absolute; top: -90px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,201,40,.44), transparent 70%); }
.balance-preview-top { position: relative; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.62); font-size: 13px; }
.balance-preview-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.balance-preview > strong { position: relative; display: block; margin-top: 30px; font-size: clamp(44px, 5vw, 65px); letter-spacing: -.055em; }
.balance-lines { display: flex; height: 130px; margin-top: 40px; align-items: end; gap: 10px; }
.balance-lines span { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(to top, #a96f00, var(--yellow)); transform-origin: bottom; transition: transform 450ms var(--ease); }
.balance-lines span:nth-child(1) { height: 39%; }.balance-lines span:nth-child(2) { height: 60%; }.balance-lines span:nth-child(3) { height: 47%; }.balance-lines span:nth-child(4) { height: 78%; }.balance-lines span:nth-child(5) { height: 65%; }.balance-lines span:nth-child(6) { height: 92%; }
.feature-card:hover .balance-lines span { transform: scaleY(1.06); }
.balance-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
.balance-summary div { display: flex; padding-top: 13px; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.11); }
.balance-summary small { color: rgba(255,255,255,.48); }.balance-summary b { color: var(--yellow-soft); }
.feature-card-organization { min-height: 690px; }
.merchant-list { display: grid; gap: 8px; margin-top: 30px; }
.merchant-row { display: grid; grid-template-columns: 43px 1fr auto; gap: 11px; padding: 9px; align-items: center; border: 1px solid rgba(23,23,20,.06); border-radius: 16px; background: #f9f7f1; transition: transform 200ms var(--ease), background 200ms ease; }
.merchant-row:hover { transform: translateX(4px); background: #fff4c6; }
.merchant-logo, .upcoming-logo { display: grid; width: 40px; height: 40px; padding: 8px; place-items: center; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23,23,20,.08); }
.merchant-logo img, .upcoming-logo img { width: 100%; height: 100%; object-fit: contain; }
.merchant-logo-netflix,.upcoming-logo-netflix,.merchant-logo-amazon,.upcoming-logo-amazon { background: #111; }
.merchant-logo-vodafone,.upcoming-logo-vodafone { background: #e60000; }
.merchant-logo-spotify,.upcoming-logo-spotify { background: #1ed760; }
.merchant-logo-mcdonalds { background: #da291c; }
.merchant-row > span:nth-child(2), .upcoming-row > span:nth-child(2) { min-width: 0; }
.merchant-row strong, .upcoming-row strong { display: block; font-size: 14px; letter-spacing: -.015em; }
.merchant-row small, .upcoming-row small { display: block; overflow: hidden; color: #8b877e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.merchant-row > b { color: #a3a097; font-size: 15px; }
.feature-card-insights { min-height: 690px; background: #f4f1e8; }
.insight-stat { display: flex; margin-top: 37px; align-items: center; justify-content: space-between; color: #7e7a70; font-size: 12px; }
.insight-stat strong { padding: 7px 10px; border-radius: 999px; background: #e8f5e9; color: #2f7b45; font-size: 12px; }
.insight-chart { position: absolute; right: 32px; bottom: 34px; left: 32px; height: 235px; padding-top: 20px; border-top: 1px solid var(--line); color: #d89d00; }
.insight-chart svg { width: 100%; height: 185px; overflow: visible; }
.chart-area { fill: url(#chart-fill); }.chart-line { fill: none; stroke: currentColor; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.chart-months { display: flex; justify-content: space-between; color: #928e84; font-size: 10px; }
.upcoming-preview { padding: 18px 20px; border: 1px solid rgba(23,23,20,.08); border-radius: 25px; background: rgba(255,255,255,.74); box-shadow: 0 20px 50px rgba(126,85,0,.08); }
.upcoming-header { display: flex; padding: 3px 0 13px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.upcoming-header span { font-size: 14px; font-weight: 760; }.upcoming-header small { color: #777268; font-size: 11px; }
.upcoming-row { display: grid; grid-template-columns: 41px 1fr auto; gap: 11px; padding: 12px 0; align-items: center; border-bottom: 1px solid rgba(23,23,20,.07); }
.upcoming-row:last-child { border-bottom: 0; }
.upcoming-row b { color: #8d877a; font-size: 11px; }

.privacy-card { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(0, 1fr); gap: 40px; padding: 62px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #1a1a17; color: #fffdf7; box-shadow: 0 35px 80px rgba(23,23,20,.14); }
.privacy-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.privacy-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.11); }
.privacy-ring-one { width: 430px; height: 430px; }.privacy-ring-two { width: 310px; height: 310px; }
.privacy-ring-one::after,.privacy-ring-two::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 20px rgba(255,201,40,.7); }
.privacy-ring-one::after { top: 29px; right: 91px; }.privacy-ring-two::after { bottom: 22px; left: 78px; }
.privacy-mark { position: relative; z-index: 2; width: 145px; height: 145px; overflow: hidden; border-radius: 40px; box-shadow: 0 34px 70px rgba(0,0,0,.33), 0 0 80px rgba(255,201,40,.13); }
.privacy-mark img { width: 100%; height: 100%; object-fit: cover; }
.privacy-badge { position: absolute; z-index: 4; display: inline-flex; padding: 11px 14px; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); font-size: 11px; font-weight: 700; backdrop-filter: blur(14px); }
.privacy-badge svg { width: 16px; height: 16px; fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.privacy-badge-one { top: 19%; left: 0; }.privacy-badge-two { right: -3%; bottom: 18%; }
.privacy-copy .eyebrow { color: rgba(255,255,255,.53); }
.privacy-copy h2 { margin-bottom: 22px; font-size: clamp(48px, 5.2vw, 75px); line-height: .96; letter-spacing: -.06em; }
.privacy-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 26px; color: rgba(255,255,255,.60); font-size: 16px; line-height: 1.7; }
.privacy-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.privacy-list li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.83); font-size: 13px; }
.privacy-list li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(255,201,40,.13); color: var(--yellow); }
.privacy-list svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pro-card { position: relative; overflow: hidden; padding: 58px; border-radius: var(--radius-xl); background: linear-gradient(145deg, #ffe175, #ffc928 54%, #ffb811); color: var(--ink); box-shadow: 0 36px 80px rgba(157,106,0,.18); }
.pro-background { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pro-background span { position: absolute; border: 1px solid rgba(23,23,20,.11); border-radius: 50%; }
.pro-background span:nth-child(1) { width: 500px; height: 500px; top: -230px; right: -90px; }.pro-background span:nth-child(2) { width: 280px; height: 280px; top: -100px; right: 10px; }.pro-background span:nth-child(3) { width: 180px; height: 180px; bottom: -90px; left: 9%; }
.pro-heading { position: relative; display: grid; grid-template-columns: 1fr minmax(280px, 390px); gap: 60px; align-items: end; padding-bottom: 45px; border-bottom: 1px solid rgba(23,23,20,.15); }
.pro-heading h2 { margin-bottom: 0; font-size: clamp(52px, 6vw, 82px); line-height: .95; letter-spacing: -.065em; }
.pro-heading > p { margin-bottom: 3px; color: rgba(23,23,20,.62); font-size: 15px; line-height: 1.7; }
.pro-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.pro-grid article { min-height: 285px; padding: 36px 25px 25px; border-right: 1px solid rgba(23,23,20,.14); }
.pro-grid article:first-child { padding-left: 0; }.pro-grid article:last-child { border-right: 0; }
.pro-icon { display: grid; width: 46px; height: 46px; margin-bottom: 48px; place-items: center; border: 1px solid rgba(23,23,20,.12); border-radius: 15px; background: rgba(255,255,255,.31); }
.pro-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pro-grid h3 { margin-bottom: 11px; font-size: 20px; letter-spacing: -.035em; }.pro-grid p { margin-bottom: 0; color: rgba(23,23,20,.60); font-size: 13px; line-height: 1.6; }
.pro-footer { position: relative; display: flex; padding-top: 26px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(23,23,20,.15); gap: 22px; }
.pro-footer p { margin-bottom: 0; color: rgba(23,23,20,.58); font-size: 13px; }.pro-footer a { display: inline-flex; min-height: 46px; padding: 0 17px; align-items: center; gap: 10px; border-radius: 14px; background: var(--ink); color: white; font-size: 13px; font-weight: 740; transition: transform 200ms var(--ease); }.pro-footer a:hover { transform: translateY(-2px); }
.pro-footer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.download-section { padding-bottom: 95px; }
.download-card { position: relative; min-height: 650px; display: flex; padding: 62px 30px; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-soft); }
.download-card::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--yellow); opacity: .98; }
.download-card::after { content: ""; position: absolute; width: 690px; height: 690px; border: 1px solid rgba(23,23,20,.08); border-radius: 50%; }
.download-orbit { position: absolute; z-index: 1; width: 610px; height: 610px; border: 1px dashed rgba(23,23,20,.15); border-radius: 50%; animation: spin 24s linear infinite; }
.download-orbit::after { content: ""; position: absolute; width: 18px; height: 18px; top: 52px; right: 109px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(23,23,20,.14); }
.download-icon { position: relative; z-index: 3; width: 95px; height: 95px; margin-bottom: 27px; border-radius: 28px; box-shadow: 0 24px 50px rgba(105,71,0,.20); }
.download-card .eyebrow { position: relative; z-index: 3; color: rgba(23,23,20,.58); }
.download-card h2 { position: relative; z-index: 3; margin-bottom: 18px; font-size: clamp(58px, 7vw, 92px); line-height: .91; letter-spacing: -.07em; }
.download-card h2 span { color: rgba(23,23,20,.42); }
.download-description { position: relative; z-index: 3; max-width: 560px; margin-bottom: 28px; color: rgba(23,23,20,.60); font-size: 15px; line-height: 1.65; }
.app-store-button-large { position: relative; z-index: 3; min-height: 67px; }
@keyframes spin { to { transform: rotate(360deg); } }

.site-footer { padding-bottom: 30px; }
.footer-top { display: flex; padding: 28px 0; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-top nav { display: flex; align-items: center; gap: 25px; }.footer-top nav a { color: var(--muted); font-size: 13px; transition: color 180ms ease; }.footer-top nav a:hover { color: var(--ink); }
.footer-bottom { display: flex; padding: 22px 0 0; align-items: center; justify-content: space-between; color: #969085; font-size: 11px; }
.footer-bottom p { margin-bottom: 0; }.footer-bottom a { display: inline-flex; align-items: center; gap: 8px; }.footer-bottom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }.footer-bottom a:hover svg { transform: translateY(-2px); }

.reveal-item { opacity: 0; transform: translateY(16px); animation: heroReveal .56s var(--ease) forwards; }
.hero .reveal-item:nth-child(1) { animation-delay: .04s; }.hero .reveal-item:nth-child(2) { animation-delay: .10s; }.hero .reveal-item:nth-child(3) { animation-delay: .16s; }.hero .reveal-item:nth-child(4) { animation-delay: .22s; }.hero-copy .reveal-item:nth-child(5) { animation-delay: .28s; }.hero-visual.reveal-item { animation-delay: .13s; transform: translateY(20px) scale(.985); }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0) scale(1); } }
.reveal-section { opacity: 0; transform: translateY(26px); transition: opacity .52s ease, transform .66s var(--ease); }
.reveal-section.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: minmax(0, .95fr) minmax(410px, .8fr); gap: 35px; }
  .hero-sun { width: 500px; height: 500px; }.hero-ring-one { width: 590px; height: 590px; }.hero-ring-two { width: 680px; height: 680px; }
  .signal-card { grid-template-columns: 1fr; }
  .pro-grid { grid-template-columns: repeat(2, 1fr); }.pro-grid article:nth-child(2) { border-right: 0; }.pro-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(23,23,20,.14); }
}

@media (max-width: 900px) {
  .section-shell { width: min(calc(100% - 32px), var(--container)); }
  .desktop-navigation, .header-actions .nav-cta { display: none; }.menu-toggle { display: grid; }
  .site-header { top: 10px; padding-inline: 16px; }.site-header.is-scrolled .header-inner { width: 100%; transform: translateY(0); }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 124px; gap: 40px; }
  .hero-copy { text-align: center; }.hero-title { margin-inline: auto; }.hero-highlight { margin-inline: auto; }.hero-lede { margin-inline: auto; }.hero-actions, .trust-row { justify-content: center; }
  .hero-visual { min-height: 650px; }.hero-sticker-top { left: 9%; }.hero-sticker-bottom { right: 8%; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .feature-card-large, .feature-card-upcoming { grid-template-columns: 1fr; }
  .privacy-card { grid-template-columns: 1fr; padding: 45px; }.privacy-visual { order: 2; min-height: 450px; }.privacy-copy { order: 1; }
  .pro-heading { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 680px) {
  .section-shell { width: min(calc(100% - 24px), var(--container)); }
  html { scroll-padding-top: 78px; }
  .site-header { padding-inline: 12px; }.header-inner { min-height: 58px; padding: 6px 7px 6px 10px; border-radius: 18px; }.brand-icon { width: 35px; height: 35px; border-radius: 11px; }.brand-name { font-size: 18px; }.menu-toggle { width: 43px; height: 43px; border-radius: 13px; }
  .hero { padding-top: 106px; padding-bottom: 72px; gap: 30px; }
  .eyebrow { margin-bottom: 17px; font-size: 10px; }
  .hero-title { margin-bottom: 22px; font-size: clamp(53px, 16vw, 72px); line-height: .92; letter-spacing: -.069em; }
  .hero-highlight::after { height: .28em; bottom: .1em; }
  .hero-lede { margin-bottom: 25px; font-size: 15px; line-height: 1.65; }
  .hero-actions { display: grid; gap: 8px; }.app-store-button { width: 100%; max-width: 330px; min-height: 61px; margin-inline: auto; justify-content: center; }.secondary-action { min-height: 52px; justify-content: center; }
  .trust-row { margin-top: 24px; gap: 10px 13px; font-size: 10px; }
  .hero-visual { min-height: 520px; }.hero-sun { width: 390px; height: 390px; }.hero-ring-one { width: 460px; height: 460px; }.hero-ring-two { width: 520px; height: 520px; }.device-stage { width: min(270px, 70%); }.device-frame { border-radius: 43px; }
  .hero-sticker-top { top: 11%; left: 0; padding: 11px 14px; border-radius: 17px; font-size: 10px; }.hero-sticker-top b { font-size: 13px; }.hero-sticker-bottom { right: 0; bottom: 10%; padding: 9px 12px; font-size: 9px; }
  .signal-section, .feature-section, .privacy-section, .pro-section { padding-bottom: 78px; }
  .signal-card { gap: 34px; padding: 29px 23px; border-radius: 29px; }.signal-intro h2 { font-size: clamp(43px, 13vw, 58px); }.signal-intro h2 span::after { height: 11px; }.signal-grid article { grid-template-columns: 45px 1fr; gap: 12px; padding: 17px 0; }.signal-number { width: 37px; height: 37px; }.signal-grid strong { font-size: 17px; }.signal-grid p { font-size: 13px; }
  .section-heading { margin-bottom: 34px; }.section-heading h2 { font-size: clamp(44px, 13vw, 62px); }.section-heading > p { font-size: 14px; }
  .feature-bento { grid-template-columns: 1fr; gap: 12px; }.feature-card, .feature-card-large, .feature-card-upcoming { grid-column: auto; min-height: auto; padding: 26px 22px; border-radius: 28px; }.feature-card-large, .feature-card-upcoming { gap: 28px; }.feature-card h3 { font-size: clamp(34px, 10vw, 46px); }.feature-card p { font-size: 13px; }.feature-icon { margin-bottom: 29px; }.balance-preview { min-height: 330px; padding: 22px; border-radius: 23px; }.balance-preview > strong { font-size: clamp(39px, 11vw, 52px); }.balance-lines { height: 100px; margin-top: 29px; }.merchant-list { margin-top: 26px; }.merchant-row { grid-template-columns: 40px 1fr auto; }.feature-card-organization { min-height: auto; }.feature-card-insights { min-height: 510px; }.insight-chart { right: 22px; bottom: 28px; left: 22px; height: 215px; }.upcoming-preview { padding: 15px; border-radius: 21px; }.upcoming-row { grid-template-columns: 38px 1fr auto; gap: 9px; }
  .privacy-card { gap: 20px; padding: 33px 23px 20px; border-radius: 30px; }.privacy-copy h2 { font-size: clamp(43px, 12vw, 60px); }.privacy-copy > p:not(.eyebrow) { font-size: 14px; }.privacy-visual { min-height: 360px; transform: scale(.88); }.privacy-ring-one { width: 370px; height: 370px; }.privacy-ring-two { width: 270px; height: 270px; }.privacy-mark { width: 125px; height: 125px; border-radius: 34px; }.privacy-badge-one { left: -4%; }.privacy-badge-two { right: -8%; }
  .pro-card { padding: 34px 23px; border-radius: 30px; }.pro-heading { padding-bottom: 34px; }.pro-heading h2 { font-size: clamp(48px, 14vw, 66px); }.pro-heading > p { font-size: 13px; }.pro-grid { grid-template-columns: 1fr; }.pro-grid article,.pro-grid article:first-child { min-height: auto; padding: 29px 0; border-right: 0; border-bottom: 1px solid rgba(23,23,20,.14); }.pro-grid article:last-child { border-bottom: 0; }.pro-icon { margin-bottom: 25px; }.pro-footer { align-items: stretch; flex-direction: column; }.pro-footer a { justify-content: space-between; }
  .download-section { padding-bottom: 70px; }.download-card { min-height: 580px; padding: 50px 20px; border-radius: 30px; }.download-card::before { width: 430px; height: 430px; }.download-card::after { width: 550px; height: 550px; }.download-orbit { width: 500px; height: 500px; }.download-icon { width: 84px; height: 84px; border-radius: 25px; }.download-card h2 { font-size: clamp(48px, 14vw, 66px); }.download-description { max-width: 340px; font-size: 13px; }.app-store-button-large { max-width: 310px; }
  .footer-top { padding: 26px 0; align-items: flex-start; flex-direction: column; gap: 25px; }.footer-top nav { width: 100%; justify-content: space-between; gap: 12px; }.footer-bottom { padding-top: 20px; align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 420px) {
  .hero-sun { width: 350px; height: 350px; }.hero-ring-one { width: 420px; height: 420px; }.hero-ring-two { width: 470px; height: 470px; }.device-stage { width: 255px; }.hero-sticker-top { left: -2%; }.hero-sticker-bottom { right: -3%; }
  .privacy-badge { font-size: 9px; }.privacy-badge-one { left: -10%; }.privacy-badge-two { right: -13%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-item, .reveal-section { opacity: 1; transform: none; }
}

/* ========================================================================== 
   Breev light creative refinements — v3
   ========================================================================== */

html { scroll-behavior: auto; }
body { overflow-x: clip; }
main, .site-footer { width: 100%; overflow: clip; }

/* Contact replaces the App Store shortcut in the desktop header. */
.contact-trigger {
  border: 1px solid rgba(23,23,20,.08);
  background: linear-gradient(135deg, #ffd95b, var(--yellow));
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(180,124,0,.16), inset 0 1px 0 rgba(255,255,255,.55);
}
.contact-trigger:hover { box-shadow: 0 17px 34px rgba(180,124,0,.22); }
.contact-mark { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* More intentional product proof chips in the hero. */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 650px);
  gap: 9px;
  margin-top: 34px;
}
.trust-row .trust-chip {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  min-height: 66px;
  padding: 10px 12px;
  align-items: center;
  border: 1px solid rgba(23,23,20,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.63);
  box-shadow: 0 12px 28px rgba(82,61,3,.055), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.trust-row .trust-icon {
  grid-row: 1 / 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffe98e, #ffc928);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(164,112,0,.12);
}
.trust-row .trust-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.trust-row .trust-chip b { align-self: end; color: #35332d; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.trust-row .trust-chip small { align-self: start; overflow: hidden; color: #8a8579; font-size: 8.5px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }

/* Replace the heavy black amount panel with a warm, airy money snapshot. */
.balance-preview-light {
  min-height: 390px;
  padding: 24px;
  border: 1px solid rgba(23,23,20,.085);
  background:
    radial-gradient(circle at 84% 10%, rgba(255,201,40,.22), transparent 36%),
    linear-gradient(145deg, #fffef9, #f7f3e7 72%);
  color: var(--ink);
  box-shadow: 0 24px 58px rgba(84,62,4,.10), inset 0 1px 0 #fff;
}
.balance-preview-light::before { display: none; }
.snapshot-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.snapshot-pill, .snapshot-trend { display: inline-flex; min-height: 30px; padding: 0 11px; align-items: center; border-radius: 999px; font-size: 9px; font-weight: 780; letter-spacing: .02em; }
.snapshot-pill { background: #fff; border: 1px solid var(--line); color: #716d63; }
.snapshot-trend { background: #eaf8e8; color: #357a45; }
.snapshot-main { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 148px; gap: 24px; margin-top: 41px; align-items: end; }
.snapshot-main small { display: block; margin-bottom: 7px; color: #8c877c; font-size: 10px; font-weight: 700; }
.snapshot-main strong { display: block; font-size: clamp(34px, 4vw, 54px); line-height: .95; letter-spacing: -.058em; }
.snapshot-main p { margin: 9px 0 0; color: #8b867c; font-size: 9px; }
.snapshot-bars { display: flex; height: 96px; align-items: end; gap: 8px; }
.snapshot-bars span { flex: 1; min-width: 8px; border-radius: 999px 999px 5px 5px; background: linear-gradient(#ffe9a3, #ffc928); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.snapshot-bars span:nth-child(1){height:33%}.snapshot-bars span:nth-child(2){height:49%}.snapshot-bars span:nth-child(3){height:43%}.snapshot-bars span:nth-child(4){height:72%}.snapshot-bars span:nth-child(5){height:62%}.snapshot-bars span:nth-child(6){height:94%}
.snapshot-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 35px; }
.snapshot-grid > div { display: grid; grid-template-columns: 31px 1fr; grid-template-rows: auto auto; min-width: 0; padding: 12px 10px; border: 1px solid rgba(23,23,20,.07); border-radius: 16px; background: rgba(255,255,255,.76); box-shadow: 0 10px 24px rgba(74,55,5,.05); }
.snapshot-icon { grid-row: 1 / 3; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 900; }
.snapshot-icon-income { background:#e8f8eb; color:#34814a; }.snapshot-icon-spent { background:#fff0ec; color:#dc5b54; }.snapshot-icon-upcoming { background:#e9f4ff; color:#427db1; }
.snapshot-grid small { color: #9a958b; font-size: 8px; }.snapshot-grid b { overflow: hidden; font-size: 10px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }

/* New light privacy story — no black block. */
.privacy-card-light {
  position: relative;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1fr);
  gap: 54px;
  padding: 62px;
  border: 1px solid rgba(23,23,20,.08);
  background:
    radial-gradient(circle at 86% 18%, rgba(255,201,40,.26), transparent 31%),
    linear-gradient(145deg, #fffef9 0%, #fff8e5 64%, #f3eee2 100%);
  color: var(--ink);
  box-shadow: 0 34px 78px rgba(91,67,5,.10);
}
.privacy-card-light::after { content:""; position:absolute; inset:14px; pointer-events:none; border:1px solid rgba(255,255,255,.75); border-radius: calc(var(--radius-xl) - 12px); }
.privacy-card-light .privacy-copy { position: relative; z-index: 2; }
.privacy-card-light .privacy-copy .eyebrow { color: #7b7569; }
.privacy-card-light .privacy-copy h2 { margin-bottom: 22px; color: var(--ink); font-size: clamp(48px,5vw,74px); line-height: .94; letter-spacing: -.06em; }
.privacy-card-light .privacy-copy h2 span { position: relative; display: inline-block; color: #6d685e; }
.privacy-card-light .privacy-copy h2 span::after { content:""; position:absolute; z-index:-1; left:-2%; right:-3%; bottom:.02em; height:.22em; border-radius:999px; background:rgba(255,201,40,.88); transform:rotate(-1deg); }
.privacy-card-light .privacy-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 28px; color: #706c63; font-size: 15px; line-height: 1.72; }
.privacy-actions { display: grid; gap: 9px; }
.privacy-proof { display: grid; grid-template-columns: 41px 1fr; grid-template-rows: auto auto; width: min(100%, 430px); min-height: 62px; padding: 9px 13px 9px 9px; align-items: center; column-gap: 11px; border: 1px solid rgba(23,23,20,.075); border-radius: 18px; background: rgba(255,255,255,.74); box-shadow: 0 10px 24px rgba(88,66,9,.05); }
.privacy-proof i { grid-row:1/3; display:grid; width:41px; height:41px; place-items:center; border-radius:14px; background:#fff0b9; color:#554713; }
.privacy-proof svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.privacy-proof b { align-self:end; font-size:11px; }.privacy-proof small { align-self:start; color:#938d81; font-size:9px; }

.privacy-stack { position: relative; min-height: 500px; display: grid; place-items: center; isolation: isolate; }
.privacy-glow { position:absolute; width:390px; height:390px; border-radius:50%; background:radial-gradient(circle, rgba(255,211,73,.72), rgba(255,201,40,.12) 56%, transparent 70%); filter:blur(3px); }
.privacy-orbit { position:absolute; border:1px solid rgba(70,57,16,.10); border-radius:50%; }
.privacy-orbit-a { width:430px; height:430px; }.privacy-orbit-b { width:330px; height:330px; border-style:dashed; }
.privacy-lock-card { position:relative; z-index:3; display:flex; width:min(100%,390px); min-height:124px; padding:20px; align-items:center; gap:16px; border:1px solid rgba(23,23,20,.09); border-radius:27px; background:rgba(255,255,255,.91); box-shadow:0 28px 60px rgba(92,65,0,.14); transform:rotate(-2deg); }
.privacy-lock-icon { display:grid; width:62px; height:62px; flex:0 0 auto; place-items:center; border-radius:20px; background:linear-gradient(145deg,#ffe995,#ffc928); box-shadow:0 12px 24px rgba(171,116,0,.15); }
.privacy-lock-icon svg { width:29px; height:29px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.privacy-lock-card small { display:block; margin-bottom:5px; color:#a29b8e; font-size:8px; font-weight:800; letter-spacing:.13em; }.privacy-lock-card strong { display:block; font-size:18px; line-height:1.1; letter-spacing:-.035em; }
.privacy-mini { position:absolute; z-index:4; display:grid; grid-template-columns:34px 1fr; width:230px; min-height:70px; padding:10px 12px; align-items:center; gap:10px; border:1px solid rgba(23,23,20,.075); border-radius:18px; background:rgba(255,255,255,.91); box-shadow:0 18px 38px rgba(89,64,0,.10); backdrop-filter:blur(10px); }
.privacy-mini > span { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; background:#f5efe1; color:#8e8777; font-size:8px; font-weight:850; }.privacy-mini b{display:block;font-size:10px}.privacy-mini small{display:block;margin-top:2px;color:#9a9385;font-size:8px;line-height:1.25}
.privacy-mini-one { top:14%; right:0; transform:rotate(3deg); }.privacy-mini-two { left:0; bottom:14%; transform:rotate(-3deg); }.privacy-mini-three { right:5%; bottom:1%; transform:rotate(1.5deg); }

/* Fix the muted final headline so “a better view.” reads clearly. */
.download-card h2 .download-highlight { position: relative; display: inline-block; z-index: 2; color: var(--ink); }
.download-card h2 .download-highlight::after { content:""; position:absolute; z-index:-1; left:-2%; right:-3%; bottom:.04em; height:.23em; border-radius:999px; background:#fff0a5; box-shadow:inset 0 -8px 0 rgba(255,201,40,.74); transform:rotate(-1deg); }

/* Contact popup */
.contact-modal { position: fixed; z-index: 1600; inset: 0; display: grid; padding: 20px; place-items: center; visibility: hidden; pointer-events: none; opacity: 0; transition: opacity 260ms ease, visibility 260ms ease; }
.contact-modal.is-open { visibility: visible; pointer-events: auto; opacity: 1; }
.contact-modal-backdrop { position:absolute; inset:0; background:rgba(34,31,22,.20); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.contact-dialog { position:relative; z-index:2; width:min(100%,540px); max-height:min(760px,calc(100vh - 40px)); overflow:auto; padding:34px; border:1px solid rgba(23,23,20,.09); border-radius:32px; background:linear-gradient(150deg,#fffefb,#fff8e7); box-shadow:0 38px 100px rgba(44,33,4,.22); transform:translateY(20px) scale(.975); transition:transform 420ms var(--ease); outline:none; }
.contact-modal.is-open .contact-dialog { transform:translateY(0) scale(1); }
.contact-close { position:absolute; top:17px; right:17px; display:grid; width:40px; height:40px; padding:0; place-items:center; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.8); color:var(--ink); cursor:pointer; }
.contact-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.contact-kicker { display:flex; align-items:center; gap:8px; margin-bottom:15px; color:#8a8477; font-size:10px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }.contact-kicker span{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,201,40,.16)}
.contact-dialog h2 { max-width:430px; margin-bottom:11px; padding-right:45px; font-size:clamp(38px,6vw,58px); line-height:.94; letter-spacing:-.057em; }
.contact-copy { max-width:430px; margin-bottom:24px; color:#777166; font-size:13px; line-height:1.62; }
.contact-form { display:grid; gap:11px; }.contact-form label{display:grid;gap:6px}.contact-form label>span{padding-left:3px;color:#777166;font-size:9px;font-weight:780;letter-spacing:.02em}
.contact-form input,.contact-form textarea { width:100%; border:1px solid rgba(23,23,20,.09); border-radius:16px; outline:none; background:rgba(255,255,255,.76); color:var(--ink); font:inherit; font-size:13px; transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.contact-form input{height:52px;padding:0 15px}.contact-form textarea{min-height:126px;padding:14px 15px;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(241,170,0,.68);background:#fff;box-shadow:0 0 0 4px rgba(255,201,40,.13)}
.contact-submit { display:flex; min-height:54px; margin-top:3px; padding:0 17px; align-items:center; justify-content:space-between; border-radius:16px; background:linear-gradient(135deg,#ffd85c,var(--yellow)); color:var(--ink); font-size:12px; font-weight:820; cursor:pointer; box-shadow:0 13px 26px rgba(169,113,0,.14); transition:transform 180ms var(--ease),box-shadow 180ms ease; }.contact-submit:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(169,113,0,.20)}.contact-submit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-status { min-height:18px; margin:0; color:#777166; font-size:10px; line-height:1.45; }
body.contact-open { overflow:hidden; }

@media (max-width: 900px) {
  .hero-copy, .hero-visual { width:100%; min-width:0; margin-inline:auto; }
  .hero-visual { left:auto; right:auto; transform:none; }
  .device-stage { margin-inline:auto; }
  .trust-row { margin-inline:auto; }
  .privacy-card-light { grid-template-columns:1fr; gap:24px; }
  .privacy-card-light .privacy-copy { order:1; }
  .privacy-card-light .privacy-stack { order:2; }
}

@media (max-width: 680px) {
  body { min-width:0; }
  .section-shell { width:calc(100% - 24px); max-width:100%; margin-left:auto; margin-right:auto; }
  .hero { width:calc(100% - 24px); margin-inline:auto; padding-left:0; padding-right:0; }
  .hero-copy { padding-inline:2px; text-align:center; }
  .hero-title { width:100%; max-width:100%; }
  .hero-highlight { width:auto; max-width:100%; margin-inline:auto; }
  .hero-visual { width:100%; min-height:535px; margin-inline:auto; overflow:visible; }
  .device-stage { width:min(268px,74vw); max-width:100%; left:0; right:0; }
  .hero-sticker-top { left:3%; }.hero-sticker-bottom { right:3%; }
  .trust-row { grid-template-columns:1fr; width:min(100%,340px); gap:8px; margin-top:22px; }
  .trust-row .trust-chip { grid-template-columns:36px 1fr; min-height:58px; padding:8px 10px; text-align:left; }
  .trust-row .trust-icon { width:36px;height:36px;border-radius:12px; }.trust-row .trust-chip b{font-size:11px}.trust-row .trust-chip small{font-size:8.5px}
  .snapshot-main { grid-template-columns:1fr; gap:18px; margin-top:29px; }.snapshot-main strong{font-size:clamp(35px,10.5vw,48px)}.snapshot-bars{height:74px}.snapshot-grid{grid-template-columns:1fr;margin-top:25px}.snapshot-grid>div{grid-template-columns:34px 1fr;min-height:54px;align-items:center}.snapshot-grid small{font-size:8px}.snapshot-grid b{font-size:10px}
  .privacy-card-light { padding:31px 21px 24px; border-radius:30px; }.privacy-card-light::after{inset:9px;border-radius:23px}.privacy-card-light .privacy-copy h2{font-size:clamp(41px,12vw,57px)}.privacy-card-light .privacy-copy>p:not(.eyebrow){font-size:13px}.privacy-proof{width:100%}.privacy-stack{min-height:390px; transform:none}.privacy-glow{width:300px;height:300px}.privacy-orbit-a{width:340px;height:340px}.privacy-orbit-b{width:255px;height:255px}.privacy-lock-card{width:min(92%,330px);min-height:106px;padding:16px;border-radius:23px}.privacy-lock-icon{width:52px;height:52px;border-radius:17px}.privacy-lock-card strong{font-size:15px}.privacy-mini{width:190px;min-height:62px;padding:8px 10px}.privacy-mini-one{top:7%;right:-3%}.privacy-mini-two{left:-2%;bottom:15%}.privacy-mini-three{right:-2%;bottom:0}
  .download-card h2 .download-highlight::after { height:.2em; }
  .contact-modal { padding:12px; align-items:end; }
  .contact-dialog { width:100%; max-height:calc(100dvh - 24px); padding:28px 18px 18px; border-radius:28px; transform:translateY(32px) scale(.99); }
  .contact-dialog h2 { padding-right:44px; font-size:clamp(38px,12vw,52px); }.contact-copy{font-size:12px}.contact-close{top:12px;right:12px}
}

@media (max-width: 420px) {
  .hero-visual { min-height:500px; }.device-stage{width:min(252px,73vw)}.hero-sticker-top{left:2%}.hero-sticker-bottom{right:2%}
  .privacy-mini-one{right:-7%}.privacy-mini-two{left:-7%}.privacy-mini-three{right:-5%}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .contact-dialog { transition:none; }
}
.mobile-contact-button { width:100%; border:0; background:linear-gradient(135deg,#ffd95b,var(--yellow)); color:var(--ink); cursor:pointer; box-shadow:0 12px 26px rgba(170,115,0,.14); }
.mobile-contact-button .contact-mark { width:23px; height:23px; }
.mobile-contact-button small { color:rgba(23,23,20,.58); opacity:1; }


/* ========================================================================== 
   Breev v4 tweaks requested by user
   ========================================================================== */

/* Put the phone visual first on mobile */
@media (max-width: 900px) {
  .hero-copy { order: 2; }
  .hero-visual { order: 1; margin-bottom: 6px; }
}

@media (max-width: 680px) {
  .hero { gap: 18px; }
  .hero-visual {
    order: 1;
    min-height: 500px;
    margin-inline: auto;
    margin-bottom: 8px;
    display: grid;
    place-items: center;
  }
  .hero-copy { order: 2; }
  .device-stage {
    width: min(276px, 76vw);
    margin-inline: auto;
  }
  .hero-sticker-top { top: 7%; left: 4%; }
  .hero-sticker-bottom { right: 4%; bottom: 9%; }
}

/* Remove the old small kicker above the contact dialog heading. */
.contact-kicker { display: none !important; }
.contact-dialog h2 { padding-top: 4px; }

/* Download section redesign */
.download-section { padding-bottom: 42px; }
.download-card {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .86fr);
  gap: 30px;
  padding: 42px;
  align-items: center;
  text-align: left;
  border-radius: 34px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 214, 94, .35), transparent 26%),
    linear-gradient(145deg, #fffefb, #f8f3e6 72%);
  box-shadow: 0 20px 50px rgba(79, 59, 8, .09);
}
.download-card::before,
.download-card::after,
.download-orbit,
.download-icon { display: none !important; }
.download-card-copy,
.download-card-visual {
  position: relative;
  z-index: 2;
}
.download-card-copy .eyebrow { margin-bottom: 16px; }
.download-card h2 {
  margin-bottom: 16px;
  font-size: clamp(54px, 6vw, 88px);
  line-height: .93;
  letter-spacing: -.066em;
}
.download-card h2 .download-highlight {
  color: #26241e;
}
.download-description {
  max-width: 560px;
  margin-bottom: 26px;
  color: #706b61;
  font-size: 16px;
}
.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.download-contact-button {
  display: inline-flex;
  min-height: 63px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(23,23,20,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 770;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(78,58,4,.07), inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform 220ms var(--ease), box-shadow 220ms ease, background 180ms ease;
}
.download-contact-button:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 18px 30px rgba(78,58,4,.10);
}
.download-contact-button .contact-mark { width: 18px; height: 18px; }
.download-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.download-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(23,23,20,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #4b483f;
  font-size: 12px;
  font-weight: 700;
}
.download-points i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #ffe07c;
  color: #2d2a22;
  font-style: normal;
  line-height: 1;
}
.download-card-visual {
  min-height: 420px;
  display: grid;
  place-items: center;
}
.download-card-visual::before {
  content: "";
  position: absolute;
  width: min(86%, 340px);
  height: min(86%, 340px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 208, 60, .9), rgba(255, 208, 60, .20) 57%, transparent 72%);
  filter: blur(2px);
}
.download-card-visual::after {
  content: "";
  position: absolute;
  width: min(100%, 420px);
  height: min(100%, 420px);
  border: 1px solid rgba(23,23,20,.08);
  border-radius: 50%;
}
.download-preview-card {
  position: absolute;
  border: 1px solid rgba(23,23,20,.08);
  border-radius: 26px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 24px 48px rgba(77, 57, 5, .11);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.download-preview-primary {
  position: relative;
  width: min(100%, 360px);
  min-height: 290px;
  padding: 22px;
  transform: rotate(-3deg);
}
.download-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 30px;
}
.download-preview-badge {
  display: inline-flex;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  border-radius: 999px;
  background: #f7f0d6;
  color: #706747;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.download-preview-head strong { font-size: 13px; }
.download-preview-balance small,
.download-preview-balance span {
  display: block;
  color: #8b857a;
}
.download-preview-balance small { margin-bottom: 8px; font-size: 10px; font-weight: 700; }
.download-preview-balance b {
  display: block;
  margin-bottom: 7px;
  font-size: clamp(36px, 5vw, 46px);
  line-height: .94;
  letter-spacing: -.06em;
}
.download-preview-balance span { font-size: 10px; }
.download-preview-bars {
  display: flex;
  height: 82px;
  margin-top: 26px;
  align-items: end;
  gap: 9px;
}
.download-preview-bars span {
  flex: 1;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #ffe58f, #ffc928);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.download-preview-bars span:nth-child(1){height:34%}
.download-preview-bars span:nth-child(2){height:56%}
.download-preview-bars span:nth-child(3){height:46%}
.download-preview-bars span:nth-child(4){height:74%}
.download-preview-bars span:nth-child(5){height:90%}
.download-preview-floating {
  top: 8%;
  right: 0;
  width: 170px;
  min-height: 120px;
  padding: 14px 16px;
  transform: rotate(4deg);
}
.download-preview-floating strong,
.download-preview-note strong { display: block; font-size: 15px; margin-bottom: 7px; }
.download-preview-floating p,
.download-preview-note small { margin: 0 0 10px; color: #7f796d; font-size: 11px; line-height: 1.45; }
.download-preview-floating b { font-size: 20px; letter-spacing: -.03em; }
.download-preview-note {
  left: 0;
  bottom: 6%;
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  width: 190px;
  padding: 14px 16px;
  transform: rotate(-5deg);
}
.download-note-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4caf70;
  margin-top: 4px;
  box-shadow: 0 0 0 6px rgba(76,175,112,.13);
}

/* Footer boxed fit */
.site-footer {
  padding-top: 0;
  padding-bottom: 28px;
}
.footer-box {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,244,233,.96));
  box-shadow: 0 18px 40px rgba(77, 56, 4, .06);
  overflow: hidden;
}
.footer-top,
.footer-bottom {
  padding-left: 26px;
  padding-right: 26px;
}
.footer-top {
  min-height: 100px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.footer-bottom {
  min-height: 72px;
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (max-width: 900px) {
  .download-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 32px 24px;
  }
  .download-card-copy {
    text-align: center;
  }
  .download-description,
  .download-actions,
  .download-points {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .download-card-visual {
    min-height: 360px;
  }
  .site-footer {
    padding-bottom: 22px;
  }
  .footer-top, .footer-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 680px) {
  .download-section { padding-bottom: 26px; }
  .download-card {
    padding: 26px 18px 22px;
    border-radius: 28px;
    gap: 18px;
  }
  .download-card h2 {
    font-size: clamp(46px, 13vw, 64px);
  }
  .download-description {
    max-width: 320px;
    margin-bottom: 18px;
    font-size: 13px;
  }
  .download-actions {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
  }
  .download-actions .app-store-button,
  .download-actions .download-contact-button {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .download-points {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 320px;
    gap: 8px;
  }
  .download-points span {
    width: 100%;
    justify-content: flex-start;
  }
  .download-card-visual {
    min-height: 290px;
  }
  .download-card-visual::before {
    width: 240px;
    height: 240px;
  }
  .download-card-visual::after {
    width: 300px;
    height: 300px;
  }
  .download-preview-primary {
    width: min(100%, 260px);
    min-height: 220px;
    padding: 16px;
    transform: rotate(-2deg);
  }
  .download-preview-balance b {
    font-size: clamp(29px, 8vw, 38px);
  }
  .download-preview-bars {
    height: 62px;
    margin-top: 18px;
    gap: 7px;
  }
  .download-preview-floating {
    top: -2%;
    right: 2%;
    width: 140px;
    min-height: 100px;
    padding: 12px;
  }
  .download-preview-note {
    left: 1%;
    bottom: -2%;
    width: 152px;
    padding: 11px 12px;
    gap: 10px;
  }
  .download-preview-floating strong, .download-preview-note strong { font-size: 13px; }
  .download-preview-floating p, .download-preview-note small { font-size: 9px; }

  .footer-box {
    border-radius: 24px;
  }
  .footer-top {
    min-height: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: flex-start;
    gap: 18px;
  }
  .footer-top nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .footer-bottom {
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 10px;
  }
}


/* ========================================================================== 
   Breev v5 — footer restoration, varied sample amounts, smoother header morph
   ========================================================================== */

/* Footer restored to the simple section-shell structure from the supplied code. */
.site-footer {
  padding-top: 0;
  padding-bottom: 30px;
  overflow: visible;
}
.site-footer .footer-box { display: contents; }
.footer-top {
  display: flex;
  min-height: 104px;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.footer-top nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.footer-top nav a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: color 180ms ease, transform 220ms var(--ease);
}
.footer-top nav a:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.footer-bottom {
  display: flex;
  min-height: 82px;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: #969085;
  font-size: 11px;
  background: transparent;
}
.footer-bottom p { margin: 0; }
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Header morph: a softer, premium transition between full and compact states. */
.site-header {
  transition: top 520ms cubic-bezier(.22,.8,.25,1), padding 520ms cubic-bezier(.22,.8,.25,1);
}
.header-inner {
  transform: translate3d(0,0,0) scale(1);
  transform-origin: 50% 0;
  will-change: width, min-height, padding, border-radius, transform, background-color, box-shadow;
  transition:
    width 760ms cubic-bezier(.16,1,.3,1),
    min-height 620ms cubic-bezier(.16,1,.3,1),
    padding 620ms cubic-bezier(.16,1,.3,1),
    border-radius 620ms cubic-bezier(.16,1,.3,1),
    background-color 500ms ease,
    box-shadow 620ms cubic-bezier(.16,1,.3,1),
    transform 760ms cubic-bezier(.16,1,.3,1),
    border-color 500ms ease;
}
.site-header.is-scrolled .header-inner {
  width: min(calc(100% - 12px), 790px);
  min-height: 54px;
  padding: 5px 6px 5px 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.91);
  border-color: rgba(23,23,20,.075);
  box-shadow: 0 17px 44px rgba(75,62,19,.13), 0 2px 8px rgba(75,62,19,.045);
  transform: translate3d(0,-4px,0) scale(.992);
}
.brand-icon {
  transition:
    width 560ms cubic-bezier(.16,1,.3,1),
    height 560ms cubic-bezier(.16,1,.3,1),
    border-radius 560ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms ease,
    transform 560ms cubic-bezier(.16,1,.3,1);
}
.site-header.is-scrolled .brand-icon { transform: rotate(-2deg) scale(.97); }
.brand-name {
  transition: font-size 560ms cubic-bezier(.16,1,.3,1), letter-spacing 560ms cubic-bezier(.16,1,.3,1), transform 560ms cubic-bezier(.16,1,.3,1);
}
.site-header.is-scrolled .brand-name {
  font-size: 18px;
  letter-spacing: -.05em;
  transform: translateX(-1px);
}
.desktop-navigation {
  transition: transform 700ms cubic-bezier(.16,1,.3,1), opacity 420ms ease;
}
.site-header.is-scrolled .desktop-navigation { transform: translateX(-50%) scale(.975); }
.desktop-navigation a {
  transition: color 180ms ease, background 180ms ease, padding 520ms cubic-bezier(.16,1,.3,1);
}
.site-header.is-scrolled .desktop-navigation a { padding: 8px 12px; }
.nav-cta {
  transition:
    min-height 560ms cubic-bezier(.16,1,.3,1),
    padding 560ms cubic-bezier(.16,1,.3,1),
    border-radius 560ms cubic-bezier(.16,1,.3,1),
    transform 220ms var(--ease),
    box-shadow 220ms ease;
}

@media (max-width: 900px) {
  .site-header.is-scrolled .header-inner {
    width: 100%;
    min-height: 54px;
    transform: translate3d(0,-2px,0) scale(.995);
  }
}

@media (max-width: 680px) {
  .footer-top {
    min-height: 0;
    padding: 26px 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
  .footer-top nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .footer-bottom {
    min-height: 0;
    padding: 20px 0 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}


/* ========================================================================== 
   Breev v6 — footer shell fix + smoother contact frost transition
   ========================================================================== */
.site-footer.section-shell {
  width: min(calc(100% - 48px), var(--container));
  max-width: var(--container);
  margin-inline: auto;
  padding-top: 0;
  padding-bottom: 30px;
  overflow: visible;
}
.site-footer .footer-top,
.site-footer .footer-bottom { width: 100%; }
.site-footer .footer-top { min-height: 104px; padding-inline: 0; }
.site-footer .footer-bottom { min-height: 82px; padding-inline: 0; }

.contact-modal {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 560ms;
}
.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.contact-modal-backdrop {
  opacity: 0;
  background: rgba(34,31,22,.18);
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  transform: translateZ(0);
  will-change: opacity;
  transition: opacity 560ms cubic-bezier(.16,1,.3,1);
}
.contact-modal.is-open .contact-modal-backdrop { opacity: 1; }
.contact-dialog {
  opacity: 0;
  transform: translate3d(0,26px,0) scale(.975);
  transform-origin: 50% 52%;
  will-change: opacity, transform;
  transition: opacity 300ms ease 65ms, transform 540ms cubic-bezier(.16,1,.3,1) 35ms;
}
.contact-modal.is-open .contact-dialog {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
.contact-modal:not(.is-open) .contact-dialog {
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.4,0,.2,1);
}
@media (max-width: 900px) {
  .site-footer.section-shell { width: min(calc(100% - 32px), var(--container)); }
}
@media (max-width: 680px) {
  .site-footer.section-shell {
    width: calc(100% - 24px);
    max-width: var(--container);
    padding-bottom: 22px;
  }
  .site-footer .footer-top { min-height: 0; padding: 24px 0; }
  .site-footer .footer-bottom { min-height: 0; padding: 18px 0 0; }
  .contact-modal { padding: 12px; align-items: end; }
  .contact-dialog { transform: translate3d(0,34px,0) scale(.988); }
  .contact-modal.is-open .contact-dialog { transform: translate3d(0,0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-modal, .contact-modal-backdrop, .contact-dialog { transition: none !important; }
}


/* ========================================================================== 
   Jotin v7 — mobile polish, fixed chart, new Plus section, image drag lock
   ========================================================================== */

/* Never let images create a draggable browser ghost. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Brand casing: Jotin should read as a product name, not a lowercase wordmark. */
.brand-name { text-transform: none; letter-spacing: -.045em; }

/* The old three download pills are intentionally retired. */
.download-points { display: none !important; }

/* Insight chart: give the line a real contained plotting surface instead of
   letting the SVG sit hard against a clipped card edge. */
.feature-card-insights {
  min-height: 650px;
  overflow: hidden;
}
.insight-chart {
  right: 28px;
  bottom: 28px;
  left: 28px;
  height: 245px;
  padding: 18px 18px 12px;
  border: 1px solid rgba(23,23,20,.07);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 30px rgba(73,55,8,.05);
  color: #d89d00;
}
.insight-chart svg {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
  padding: 8px 2px 0;
}
.insight-chart .chart-line { stroke-width: 3.2; }
.chart-months { padding: 2px 3px 0; }

/* New Jotin Plus section */
.jotin-plus-card {
  position: relative;
  overflow: hidden;
  padding: 48px;
  border: 1px solid rgba(23,23,20,.09);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 80% 14%, rgba(255,201,40,.32), transparent 28%),
    linear-gradient(145deg, #fffefb, #f3efe4 72%);
  box-shadow: var(--shadow-soft);
}
.jotin-plus-card::after {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-160px;
  bottom:-220px;
  border:1px solid rgba(23,23,20,.08);
  border-radius:50%;
  pointer-events:none;
}
.jotin-plus-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(390px,.86fr);
  gap: 60px;
  align-items: center;
  padding-bottom: 44px;
}
.jotin-plus-copy h2 {
  max-width: 720px;
  margin-bottom: 20px;
  font-size: clamp(52px, 6vw, 82px);
  line-height: .94;
  letter-spacing: -.065em;
}
.jotin-plus-copy h2 span { position: relative; display: inline-block; }
.jotin-plus-copy h2 span::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-2%; right:-3%; bottom:.06em;
  height:.24em;
  border-radius:999px;
  background:var(--yellow);
  transform:rotate(-1deg);
}
.jotin-plus-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.jotin-plus-cta {
  display:inline-flex;
  min-height:50px;
  padding:0 16px;
  align-items:center;
  gap:10px;
  border-radius:15px;
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:760;
  box-shadow:0 14px 28px rgba(23,23,20,.12);
  transition:transform 220ms var(--ease), box-shadow 220ms ease;
}
.jotin-plus-cta:hover { transform:translateY(-2px); box-shadow:0 18px 34px rgba(23,23,20,.16); }
.jotin-plus-cta svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }

.jotin-plus-flow {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 18px;
  border: 1px solid rgba(23,23,20,.075);
  border-radius: 28px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 20px 48px rgba(74,55,5,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
.plus-flow-line { position:absolute; left:42px; top:55px; bottom:55px; width:1px; background:rgba(23,23,20,.09); }
.plus-flow-step {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:48px 1fr 34px;
  min-height:78px;
  padding:11px 12px;
  align-items:center;
  gap:11px;
  border:1px solid rgba(23,23,20,.065);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 24px rgba(72,54,6,.045);
}
.plus-flow-step > span {
  display:grid;
  width:38px;height:38px;
  place-items:center;
  border-radius:13px;
  background:#fff0ac;
  color:#7d5e00;
  font-size:9px;
  font-weight:850;
}
.plus-flow-step small { display:block; margin-bottom:3px; color:#a0998c; font-size:8px; font-weight:850; letter-spacing:.12em; }
.plus-flow-step strong { display:block; font-size:14px; letter-spacing:-.025em; }
.plus-flow-step i { display:grid; width:30px;height:30px;place-items:center;border-radius:10px;background:#f5f1e8;font-style:normal;font-weight:800; }
.plus-flow-step-three > span, .plus-flow-step-three i { background:#e8f6e8; color:#337c46; }

.jotin-plus-features {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.jotin-plus-features article {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:15px;
  min-height:180px;
  padding:30px 26px 16px;
  border-right:1px solid var(--line);
}
.jotin-plus-features article:first-child { padding-left:0; }
.jotin-plus-features article:last-child { padding-right:0; border-right:0; }
.plus-feature-icon { display:grid;width:44px;height:44px;place-items:center;border-radius:15px;background:#ffdf73; }
.plus-feature-icon svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.jotin-plus-features h3 { margin:1px 0 8px;font-size:18px;letter-spacing:-.035em; }
.jotin-plus-features p { margin:0;color:var(--muted);font-size:12px;line-height:1.6; }

/* Tablet/mobile: rebuild the composition instead of only shrinking desktop. */
@media (max-width: 900px) {
  .jotin-plus-intro { grid-template-columns:1fr; gap:28px; }
  .jotin-plus-flow { max-width:560px; width:100%; margin-inline:auto; }
  .jotin-plus-features { grid-template-columns:1fr; }
  .jotin-plus-features article,
  .jotin-plus-features article:first-child,
  .jotin-plus-features article:last-child {
    min-height:0;
    padding:22px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .jotin-plus-features article:last-child { border-bottom:0; }
}

@media (max-width: 680px) {
  body { overflow-x: clip; }
  .section-shell { width: calc(100% - 20px); }

  /* Cleaner compact header on phones. */
  .site-header { top:8px; padding-inline:10px; }
  .header-inner {
    min-height:56px;
    padding:6px 6px 6px 9px;
    border-radius:18px;
    background:rgba(255,252,244,.88);
  }
  .site-header.is-scrolled .header-inner {
    width:100%; min-height:52px; transform:none;
    border-radius:16px;
  }
  .brand-icon { width:34px;height:34px;border-radius:10px; }
  .brand-name { font-size:18px; }
  .menu-toggle { width:42px;height:42px;border-radius:13px; }

  /* Hero phone first, with less empty space and fewer floating ornaments. */
  .hero { width:calc(100% - 20px); padding-top:86px; padding-bottom:60px; gap:18px; }
  .hero-visual { min-height:445px; overflow:hidden; border-radius:28px; }
  .hero-sun { width:330px;height:330px; }
  .hero-ring-one { width:390px;height:390px; }
  .hero-ring-two { width:450px;height:450px; }
  .device-stage { width:min(252px,72vw); }
  .hero-sticker-top { top:8%; left:5%; }
  .hero-sticker-bottom { display:none; }
  .hero-copy { padding:6px 3px 0; }
  .hero-title { font-size:clamp(50px,14.8vw,67px); }
  .hero-lede { max-width:340px; }
  .trust-row { display:none !important; }

  /* Mobile menu becomes a composed panel rather than three oversized raw rows. */
  .menu-backdrop {
    background:rgba(29,26,17,.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:opacity 420ms ease, visibility 420ms ease;
  }
  .mobile-menu {
    top:8px;right:8px;bottom:8px;
    width:calc(100% - 16px);
    padding:14px;
    border-radius:26px;
    background:
      radial-gradient(circle at 84% 4%, rgba(255,201,40,.22), transparent 23%),
      #fffdf8;
    box-shadow:0 32px 80px rgba(48,36,4,.18);
    transform:translate3d(0,28px,0) scale(.975);
    transform-origin:50% 100%;
    transition:transform 520ms var(--ease), opacity 300ms ease, visibility 300ms ease;
  }
  .mobile-menu.is-open { transform:translate3d(0,0,0) scale(1); }
  .mobile-menu-header { padding:2px 2px 8px; }
  .mobile-menu-close { width:42px;height:42px;border-radius:13px;background:#f3efe5; }
  .mobile-navigation { gap:9px; margin-top:24px; }
  .mobile-navigation a {
    grid-template-columns:34px minmax(0,1fr) 36px;
    min-height:82px;
    padding:10px 12px;
    border:1px solid rgba(23,23,20,.065);
    border-radius:20px;
    background:rgba(255,255,255,.74);
    box-shadow:0 10px 24px rgba(70,52,4,.04);
    font-size:initial;
  }
  .mobile-navigation a:hover { padding-left:12px; transform:translateY(-1px); }
  .mobile-navigation .menu-index { color:#aaa395; font-size:9px; font-weight:850; letter-spacing:.12em; }
  .mobile-navigation .menu-copy { display:grid; gap:3px; }
  .mobile-navigation .menu-copy b { font-size:21px; line-height:1; letter-spacing:-.045em; }
  .mobile-navigation .menu-copy small { color:#8a8479; font-size:10px; line-height:1.35; font-weight:560; }
  .mobile-navigation svg { width:18px;height:18px; justify-self:center; }
  .mobile-menu-footer { padding-top:18px; }
  .mobile-menu-footer p { max-width:260px;margin-bottom:12px;font-size:12px;line-height:1.5; }
  .mobile-download-button { min-height:58px;border-radius:17px;padding:0 15px; }
  .mobile-download-button span { font-size:16px; }

  /* Better mobile section rhythm */
  .signal-section,.feature-section,.privacy-section,.pro-section { padding-bottom:62px; }
  .signal-card,.feature-card,.privacy-card-light,.jotin-plus-card,.download-card { border-radius:26px; }
  .signal-card { padding:25px 19px; }
  .feature-card,.feature-card-large,.feature-card-upcoming { padding:23px 19px; }
  .section-heading { margin-bottom:28px; }
  .section-heading h2 { font-size:clamp(40px,11.5vw,54px); }

  .feature-card-insights { min-height:520px; }
  .insight-chart {
    right:18px; left:18px; bottom:18px;
    height:220px;
    padding:14px 12px 10px;
    border-radius:20px;
  }
  .insight-chart svg { height:160px; padding:10px 3px 0; }

  .privacy-card-light { padding:27px 18px 20px; }
  .privacy-stack { min-height:365px; }
  .privacy-mini { width:174px; }

  .jotin-plus-card { padding:28px 18px 18px; }
  .jotin-plus-intro { gap:22px; padding-bottom:24px; }
  .jotin-plus-copy { text-align:left; }
  .jotin-plus-copy h2 { font-size:clamp(45px,12.5vw,59px); }
  .jotin-plus-copy > p:not(.eyebrow) { font-size:13px; }
  .jotin-plus-cta { width:100%; justify-content:space-between; }
  .jotin-plus-flow { padding:11px; border-radius:22px; gap:8px; }
  .plus-flow-line { left:31px;top:44px;bottom:44px; }
  .plus-flow-step { grid-template-columns:36px 1fr 28px; min-height:68px; padding:8px 9px; border-radius:17px; }
  .plus-flow-step > span { width:30px;height:30px;border-radius:10px;font-size:8px; }
  .plus-flow-step small { font-size:7px; }
  .plus-flow-step strong { font-size:12px; }
  .plus-flow-step i { width:26px;height:26px;border-radius:9px;font-size:11px; }
  .jotin-plus-features article { grid-template-columns:42px 1fr; gap:12px; padding:18px 0; }
  .plus-feature-icon { width:40px;height:40px;border-radius:13px; }
  .jotin-plus-features h3 { font-size:16px; }

  .download-card { padding:25px 17px 20px; }
  .download-card-visual { min-height:275px; }

  .site-footer.section-shell { width:calc(100% - 20px); }
}

@media (max-width: 420px) {
  .hero-visual { min-height:420px; }
  .device-stage { width:min(236px,70vw); }
  .mobile-navigation a { min-height:76px; }
  .mobile-navigation .menu-copy b { font-size:19px; }
  .privacy-mini { width:160px; }
}


/* ========================================================================== 
   Jotin v8 — mobile navigation redesign + centered mobile footer
   ========================================================================== */

@media (max-width: 680px) {
  .menu-backdrop {
    background: rgba(24, 22, 16, .20);
    backdrop-filter: blur(8px) saturate(104%);
    -webkit-backdrop-filter: blur(8px) saturate(104%);
  }

  .mobile-menu {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 16px);
    padding: 14px;
    overflow: auto;
    border: 1px solid rgba(23,23,20,.08);
    border-radius: 30px;
    background:
      radial-gradient(circle at 86% -4%, rgba(255, 208, 61, .24), transparent 28%),
      linear-gradient(155deg, #fffdf9 0%, #fffaf0 100%);
    box-shadow: 0 28px 78px rgba(42, 32, 6, .22);
    transform: translate3d(0, 34px, 0) scale(.975);
    transform-origin: 50% 100%;
    opacity: 0;
    transition:
      transform 520ms cubic-bezier(.16,1,.3,1),
      opacity 280ms ease,
      visibility 0s linear 520ms;
  }

  .mobile-menu.is-open {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    transition-delay: 0s;
  }

  .mobile-menu-header {
    padding: 2px 2px 12px;
  }

  .mobile-menu-header .brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .mobile-menu-header .brand-name {
    font-size: 20px;
    letter-spacing: -.045em;
  }

  .mobile-menu-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(23,23,20,.055);
    border-radius: 14px;
    background: rgba(245,241,231,.86);
    transition: transform 200ms var(--ease), background 180ms ease;
  }

  .mobile-menu-close:active {
    transform: scale(.94);
  }

  .mobile-menu-intro {
    padding: 14px 4px 12px;
  }

  .mobile-menu-pill {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    border-radius: 999px;
    background: #fff0ad;
    color: #6f5910;
    font-size: 9px;
    font-weight: 840;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mobile-menu-intro p {
    margin: 10px 0 0;
    color: #6e695f;
    font-size: 13px;
    line-height: 1.45;
  }

  .mobile-navigation {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
  }

  .mobile-navigation a {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 34px;
    min-height: 70px;
    padding: 10px 10px;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(23,23,20,.06);
    border-radius: 19px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 8px 20px rgba(73,53,3,.035);
    color: var(--ink);
    transition:
      transform 200ms var(--ease),
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease;
  }

  .mobile-navigation a:active {
    transform: scale(.985);
    background: #fff;
  }

  .mobile-navigation .menu-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffe995, #ffc928);
    box-shadow: 0 9px 20px rgba(165,112,0,.11), inset 0 1px 0 rgba(255,255,255,.7);
  }

  .mobile-navigation .menu-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-navigation .menu-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .mobile-navigation .menu-copy b {
    font-size: 17px;
    line-height: 1.05;
    letter-spacing: -.035em;
  }

  .mobile-navigation .menu-copy small {
    overflow: hidden;
    color: #8d877b;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mobile-navigation .menu-arrow {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    justify-self: end;
    border-radius: 11px;
    background: #f6f1e5;
  }

  .mobile-navigation .menu-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-menu-footer {
    margin-top: 10px;
    padding-top: 0;
  }

  .mobile-menu-footer p {
    display: none;
  }

  .mobile-download-button.mobile-contact-button {
    display: grid;
    grid-template-columns: 38px 1fr 28px;
    width: 100%;
    min-height: 62px;
    padding: 8px 12px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 19px;
    background: linear-gradient(135deg, #ffd95b, #ffc928);
    color: var(--ink);
    box-shadow: 0 12px 26px rgba(170,115,0,.14);
  }

  .mobile-download-button.mobile-contact-button .contact-mark {
    width: 22px;
    height: 22px;
    justify-self: center;
  }

  .mobile-download-button.mobile-contact-button > span {
    display: grid;
    gap: 1px;
    text-align: left;
    font-size: 15px;
    line-height: 1.05;
  }

  .mobile-download-button.mobile-contact-button small {
    font-size: 8px;
    font-weight: 650;
    color: rgba(23,23,20,.58);
  }

  .mobile-contact-arrow {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Center both footer lines on mobile. */
  .site-footer .footer-bottom {
    display: flex;
    padding-top: 18px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .site-footer .footer-bottom p {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .site-footer .footer-bottom a {
    justify-content: center;
    margin-inline: auto;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .mobile-menu {
    right: 6px;
    bottom: 6px;
    left: 6px;
    padding: 12px;
    border-radius: 27px;
  }

  .mobile-navigation a {
    grid-template-columns: 40px minmax(0,1fr) 30px;
    min-height: 66px;
    padding: 9px;
    gap: 9px;
  }

  .mobile-navigation .menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .mobile-navigation .menu-copy b { font-size: 16px; }
  .mobile-navigation .menu-copy small { font-size: 9px; }
}


/* ==========================================================================
   Jotin v9 — unified Feather icon pack
   ========================================================================== */

/* All UI icons now come from one bundled Feather-style sprite. */
svg:has(use[href*="feather-icons.svg"]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-icon svg,
.menu-arrow svg,
.feature-icon svg,
.plus-feature-icon svg,
.privacy-proof svg,
.privacy-lock-icon svg,
.action-circle svg,
.contact-mark,
.mobile-contact-arrow,
.contact-close svg,
.contact-submit svg,
.footer-bottom svg {
  stroke-width: 1.8;
}
.menu-icon svg { width: 19px; height: 19px; }
.menu-arrow svg { width: 18px; height: 18px; }
.feature-icon svg, .plus-feature-icon svg { width: 23px; height: 23px; }
.privacy-proof svg { width: 17px; height: 17px; }
.privacy-lock-icon svg { width: 27px; height: 27px; }

/* Slightly more refined icon containers to suit the cleaner pack. */
.feature-icon, .plus-feature-icon, .menu-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px rgba(82,61,3,.06);
}

@media (max-width: 680px) {
  .menu-icon svg { width: 18px; height: 18px; }
  .feature-icon svg, .plus-feature-icon svg { width: 21px; height: 21px; }
}

img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }


/* ========================================================================== 
   Jotin v10 — Remix Icon CSS pack
   Uses: https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css
   ========================================================================== */

/* Unified icon rendering — no custom SVG sprite required. */
[class^="ri-"], [class*=" ri-"] {
  display: inline-block;
  flex: 0 0 auto;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.12em;
}

.contact-mark,
.mobile-contact-arrow,
.action-circle > i,
.menu-icon > i,
.menu-arrow > i,
.mobile-menu-close > i,
.footer-bottom a > i,
.contact-close > i,
.contact-submit > i,
.jotin-plus-cta > i {
  font-size: 1.15em;
}

.contact-mark { font-size: 19px; }
.mobile-contact-arrow { font-size: 20px; }
.mobile-menu-close > i { font-size: 24px; }
.menu-icon > i { font-size: 20px; }
.menu-arrow > i { font-size: 19px; }
.action-circle > i { font-size: 18px; }
.trust-icon > i { font-size: 18px; }
.feature-icon > i { font-size: 25px; }
.privacy-proof i > i { font-size: 18px; }
.privacy-lock-icon > i { font-size: 28px; }
.plus-feature-icon > i { font-size: 23px; }
.footer-bottom a > i { font-size: 17px; }
.contact-close > i { font-size: 22px; }
.contact-submit > i { font-size: 18px; }
.jotin-plus-cta > i { font-size: 18px; }
.apple-mark { font-size: 28px; }
.snapshot-icon > i { font-size: 14px; }

/* Keep existing containers but let the CSS icon inherit their color. */
.contact-mark,
.mobile-contact-arrow,
.menu-icon > i,
.menu-arrow > i,
.action-circle > i,
.trust-icon > i,
.feature-icon > i,
.privacy-proof i > i,
.privacy-lock-icon > i,
.plus-feature-icon > i,
.footer-bottom a > i,
.contact-close > i,
.contact-submit > i,
.jotin-plus-cta > i,
.snapshot-icon > i {
  color: currentColor;
}

/* Hide obsolete external SVG sprite if an old cached node somehow remains. */
svg use[href*="feather-icons.svg"] { display: none; }

/* Remix wrapper compatibility */
.trust-icon { font-style: normal; }
.privacy-proof .proof-icon {
  grid-row: 1 / 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
}
.privacy-proof .proof-icon > i { font-size: 18px; }