:root {
  color-scheme: light;
  --ink: #11231e;
  --ink-soft: #53625d;
  --forest: #0c211b;
  --forest-2: #17382e;
  --paper: #f7f5ee;
  --card: #fffef9;
  --line: rgba(17, 35, 30, .11);
  --lime: #d9ff72;
  --lime-deep: #a7e43c;
  --aqua: #72ddd1;
  --violet: #7673ec;
  --apricot: #ffbd78;
  --rose: #f28f83;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --shadow-soft: 0 12px 34px rgba(16, 40, 33, .09);
  --shadow-deep: 0 30px 80px rgba(13, 36, 30, .18);
  font-family: "Aptos", "Segoe UI Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #dce8e1; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(217, 255, 114, .48), transparent 25rem),
    radial-gradient(circle at 88% 86%, rgba(114, 221, 209, .38), transparent 28rem),
    #dce8e1;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.app-shell {
  width: min(100%, 460px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-deep);
  transition: background .4s ease, color .4s ease;
}

.topbar {
  min-height: 68px;
  padding: max(15px, env(safe-area-inset-top)) 20px 8px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 10;
}
.wordmark {
  justify-self: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.34rem;
  font-weight: 900;
  letter-spacing: -.065em;
}
.wordmark span { color: var(--violet); }
.prototype-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px 5px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .66rem;
  line-height: 1;
  font-weight: 850;
  background: rgba(255, 255, 255, .42);
}
.icon-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-button svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-hidden { visibility: hidden !important; pointer-events: none !important; }

.progress-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 11px;
  padding: 2px 22px 9px;
  position: relative;
  z-index: 9;
}
.progress-track { height: 4px; border-radius: 999px; overflow: hidden; background: rgba(17, 35, 30, .1); }
.progress-bar {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--violet), var(--aqua));
  border-radius: inherit;
  transition: width .48s cubic-bezier(.2, .8, .2, 1);
}
.progress-wrap > span {
  grid-column: 2;
  grid-row: 1;
  color: #6a7772;
  font-size: .73rem;
  font-weight: 750;
  line-height: 1;
}

.screen-stack { flex: 1; display: grid; }
.screen {
  display: none;
  grid-area: 1 / 1;
  align-content: start;
  position: relative;
  min-height: 100%;
  padding: 20px 22px 28px;
  animation: enter .42s cubic-bezier(.16, .8, .25, 1);
}
.screen.is-active { display: grid; }
@keyframes enter {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: none; }
}
.eyebrow {
  margin: 0 0 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 850;
  color: #64716d;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2 { text-wrap: balance; }
h1 {
  margin: 0;
  font-size: clamp(2.55rem, 11.7vw, 3.65rem);
  line-height: .96;
  letter-spacing: -.067em;
}
h1 span { color: var(--violet); }
h2 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 8.1vw, 2.55rem);
  line-height: 1.01;
  letter-spacing: -.055em;
}
h3 { margin: 0; font-size: 1rem; line-height: 1.26; letter-spacing: -.025em; }
.lead { margin: 17px 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; }
.lead.compact { font-size: 1rem; margin-top: 0; }
.muted { margin: 0 0 20px; color: #64736e; font-size: 1rem; line-height: 1.48; }
.fine-print { color: #78847f; font-size: .77rem; line-height: 1.45; text-align: center; }

.primary-button, .secondary-button, .text-button {
  border: 0;
  cursor: pointer;
  min-height: 56px;
  border-radius: 18px;
  font-weight: 820;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.primary-button {
  width: 100%;
  background: var(--forest);
  color: #fff;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 13px 26px rgba(12, 33, 27, .16);
}
.primary-button:hover { background: var(--forest-2); box-shadow: 0 16px 30px rgba(12, 33, 27, .21); }
.primary-button:active, .secondary-button:active, .scenario-card:active, .setup-card:active { transform: translateY(1px) scale(.995); }
.primary-button svg, .scenario-card svg, .setup-card svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.secondary-button { color: var(--ink); background: var(--card); border: 1px solid var(--line); padding: 13px 17px; box-shadow: 0 7px 18px rgba(17, 35, 30, .04); }
.secondary-button.full { width: 100%; }
.text-button { color: #57655f; background: transparent; padding: 10px; min-height: 44px; }

.app-shell[data-current-screen="welcome"] { background: var(--forest); color: #f9f8f2; }
.app-shell[data-current-screen="welcome"] .wordmark { color: #fff; }
.app-shell[data-current-screen="welcome"] .prototype-badge {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
}
.app-shell[data-current-screen="welcome"] .progress-track { background: rgba(255, 255, 255, .12); }
.app-shell[data-current-screen="welcome"] .progress-wrap > span,
.app-shell[data-current-screen="welcome"] footer { color: rgba(255, 255, 255, .5); }
.welcome-screen { align-content: start; padding-top: 7px; overflow: hidden; }
.ambient-orb {
  position: absolute;
  width: 360px;
  height: 360px;
  right: -190px;
  top: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 255, 114, .17), transparent 68%);
  filter: blur(3px);
}
.benefit-preview { height: 179px; margin: 1px 0 18px; position: relative; perspective: 700px; }
.benefit-card {
  width: 214px;
  min-height: 90px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .085);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
  display: grid;
  gap: 3px;
  position: absolute;
  animation: card-float 5s ease-in-out infinite;
}
.benefit-card span { color: var(--lime); font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.benefit-card strong { color: white; font-size: .94rem; }
.benefit-card small { color: rgba(255, 255, 255, .58); font-size: .74rem; }
.benefit-card-one { left: 0; top: 3px; transform: rotate(-5deg); }
.benefit-card-two { right: -22px; top: 43px; transform: rotate(5deg); animation-delay: -1.6s; }
.benefit-card-three { left: 28px; top: 91px; transform: rotate(-1.5deg); animation-delay: -3.1s; }
@keyframes card-float { 50% { translate: 0 -4px; } }
.benefit-preview-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--lime);
  color: var(--forest);
  display: grid;
  place-items: center;
  position: absolute;
  right: 5px;
  bottom: 0;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.08em;
  box-shadow: 0 12px 28px rgba(217, 255, 114, .22);
  transform: rotate(6deg);
}
.benefit-preview-mark span { color: var(--violet); }
.welcome-screen .eyebrow { color: var(--aqua); margin-bottom: 9px; }
.welcome-screen h1 { color: #fff; }
.welcome-screen h1 span { color: var(--lime); }
.welcome-screen .lead { color: rgba(249, 248, 242, .67); margin-top: 14px; font-size: 1rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 14px; }
.trust-row span {
  color: rgba(255, 255, 255, .78);
  font-size: .73rem;
  font-weight: 750;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
}
.welcome-screen .primary-button { background: var(--lime); color: var(--forest); box-shadow: 0 15px 32px rgba(217, 255, 114, .17); }
.welcome-screen .primary-button:hover { background: #e5ffa0; }
.welcome-screen .text-button { color: rgba(255, 255, 255, .56); margin-top: 4px; font-size: .8rem; }

.scan-screen h2 { max-width: 350px; }
.scan-visual { width: 150px; height: 150px; margin: 8px auto 18px; display: grid; place-items: center; position: relative; }
.scan-ring { position: absolute; inset: 0; border: 1px solid rgba(118, 115, 236, .3); border-radius: 50%; animation: pulse 2s ease-out infinite; }
.scan-ring.ring-two { inset: 18px; animation-delay: .7s; }
.scan-core { width: 64px; height: 64px; display: grid; place-items: center; background: var(--forest); color: var(--lime); border-radius: 22px; box-shadow: 0 12px 30px rgba(12, 33, 27, .2); }
.scan-core svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 2; }
@keyframes pulse { 0% { transform: scale(.72); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.05); opacity: 0; } }
.scan-list { list-style: none; padding: 0; margin: 0 0 17px; display: grid; gap: 8px; }
.scan-list li {
  min-height: 48px;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  background: rgba(255, 254, 249, .73);
  border: 1px solid var(--line);
  border-radius: 16px;
  opacity: .34;
  transform: translateX(-5px);
  transition: .32s ease;
}
.scan-list li.done { opacity: 1; transform: none; background: var(--card); box-shadow: 0 7px 20px rgba(17, 35, 30, .04); }
.scan-list .check { width: 25px; height: 25px; border-radius: 9px; background: #e8ebe5; color: transparent; display: grid; place-items: center; font-size: .8rem; font-weight: 900; }
.scan-list li.done .check { background: var(--lime); color: var(--ink); }
.scan-list li span:nth-child(2) { font-size: .91rem; font-weight: 720; }
.scan-list li strong { font-size: .86rem; }

.discovery-screen .result-count {
  min-height: 154px;
  border-radius: var(--radius-xl);
  padding: 22px;
  margin: 0 0 14px;
  color: white;
  background: radial-gradient(circle at 88% 18%, rgba(217, 255, 114, .26), transparent 34%), linear-gradient(145deg, var(--forest-2), var(--forest));
  box-shadow: 0 20px 42px rgba(12, 33, 27, .18);
  display: flex;
  align-items: end;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.result-count .result-label { position: absolute; right: 21px; top: 18px; color: var(--aqua); font-size: .69rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.result-count strong { color: var(--lime); font-size: 5.1rem; letter-spacing: -.09em; line-height: .82; }
.result-count > span:not(.result-label) { color: rgba(255, 255, 255, .77); font-size: 1rem; font-weight: 700; line-height: 1.22; padding-bottom: 2px; }
.discovery-screen > .muted { font-size: .88rem; margin-bottom: 14px; }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 12px; }
.category-grid article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 19px;
  min-height: 91px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  box-shadow: 0 6px 18px rgba(17, 35, 30, .035);
}
.category-grid article strong { font-size: 1.5rem; line-height: 1; letter-spacing: -.04em; }
.category-grid article small { grid-column: 1 / -1; color: #66746f; font-weight: 650; font-size: .78rem; }
.category-icon { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; }
.indigo { background: #e9e8ff; color: #514ec5; }
.coral { background: #ffe9e4; color: #c85a4d; }
.cyan { background: #def8f5; color: #1d8077; }
.gold { background: #fff0d7; color: #9b651f; }
.blue { background: #e4edff; color: #4366b1; }
.green { background: #e9f8d7; color: #4e7d24; }
.insight-card { display: flex; gap: 12px; align-items: center; color: white; border-radius: 18px; padding: 14px 15px; margin: 0 0 12px; background: linear-gradient(120deg, #706de8, #615eca); box-shadow: 0 10px 24px rgba(90, 87, 196, .2); }
.insight-card .spark { color: var(--lime); font-size: 1.4rem; }
.insight-card div { display: grid; gap: 2px; }
.insight-card small { color: rgba(255, 255, 255, .68); }
.insight-card strong { font-size: .88rem; }

.product-card {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin: 8px 0 13px;
}
.product-visual {
  height: 96px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(114, 221, 209, .32), transparent 55%), radial-gradient(circle at 30% 30%, #6868ac, #172a25 55%, #07100d);
  color: white;
  box-shadow: inset 0 0 0 6px #162721, 0 8px 18px rgba(8, 22, 18, .2);
}
.product-visual span { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; font-size: .62rem; letter-spacing: .16em; }
.product-card small { color: #6f7d78; }
.product-card h3 { margin: 4px 0 13px; }
.product-card p { margin: 0; font-weight: 850; }
.add-on-card { border-radius: var(--radius-lg); padding: 17px; background: linear-gradient(135deg, #eeedff, #f6f4ff); border: 1px solid rgba(118, 115, 236, .2); }
.add-on-copy { display: grid; grid-template-columns: 42px 1fr; gap: 11px; }
.shield-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #dcdcff; color: #504dc5; font-size: 1.45rem; }
.add-on-card p { margin: 4px 0 7px; color: #5d6d67; font-size: .84rem; }
.add-on-card strong { font-size: .95rem; }
.add-on-card .secondary-button { width: 100%; margin-top: 14px; border-color: rgba(118, 115, 236, .27); background: #fff; }
.checkout-line { display: flex; justify-content: space-between; padding: 18px 4px 8px; border-bottom: 1px solid var(--line); }
.checkout-line span { color: #6a7772; }
.checkout-line strong { font-size: 1.09rem; }

.coverage-screen .alert-mark { position: absolute; right: 22px; top: 19px; }
.alert-mark, .complete-mark, .prototype-mark {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  font-weight: 900;
  margin: 0 0 20px;
}
.alert-mark { background: var(--apricot); color: var(--forest); box-shadow: 0 10px 26px rgba(255, 189, 120, .24); transform: rotate(5deg); }
.warning { color: #9a5c1d; padding-right: 70px; }
.coverage-screen h2 { padding-right: 50px; }
.saving-card {
  min-height: 122px;
  display: grid;
  align-content: center;
  border-radius: var(--radius-lg);
  padding: 17px 19px;
  margin: 17px 0 12px;
  color: var(--forest);
  background: radial-gradient(circle at 92% 22%, rgba(255, 255, 255, .64), transparent 32%), linear-gradient(135deg, var(--lime), #c5f45e);
  box-shadow: 0 15px 32px rgba(167, 228, 60, .2);
}
.saving-card span { font-size: .76rem; font-weight: 820; text-transform: uppercase; letter-spacing: .11em; }
.saving-card strong { font-size: 2.65rem; line-height: .95; letter-spacing: -.07em; margin: 6px 0 3px; }
.saving-card small { font-size: .8rem; color: rgba(12, 33, 27, .63); font-weight: 650; }
.coverage-list { display: grid; gap: 9px; margin: 0 0 12px; }
.coverage-list article { display: grid; grid-template-columns: 42px 1fr; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 19px; padding: 13px; position: relative; box-shadow: 0 6px 18px rgba(17, 35, 30, .035); }
.coverage-icon { width: 40px; height: 40px; border-radius: 13px; background: #edf0e9; display: grid; place-items: center; }
.coverage-list small { color: #6c7974; }
.coverage-list h3 { margin: 2px 0 3px; }
.coverage-list p { margin: 0; padding-right: 70px; color: #5d6c66; font-size: .8rem; line-height: 1.4; }
.match { position: absolute; right: 12px; bottom: 12px; color: #416a22; background: #edf8de; border-radius: 999px; padding: 5px 8px; font-size: .64rem; font-weight: 820; }

.scenario-list { display: grid; gap: 12px; margin: 7px 0 17px; }
.scenario-card, .setup-card {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-lg);
  min-height: 106px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 7px 22px rgba(17, 35, 30, .045);
}
.scenario-card { display: grid; grid-template-columns: 48px 1fr 22px; align-items: center; gap: 12px; }
.scenario-card:hover, .setup-card:hover { border-color: rgba(118, 115, 236, .5); box-shadow: 0 13px 28px rgba(25, 49, 65, .09); }
.scenario-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: #ecebff; color: #4f4bc3; font-size: 1.27rem; }
.scenario-card:nth-child(2) .scenario-icon { background: #e1f7f4; color: #19786f; }
.scenario-card > span:nth-child(2), .setup-copy { display: grid; gap: 5px; }
.scenario-card small, .setup-card small { color: #66746f; line-height: 1.38; }
.scenario-card svg, .setup-card svg { color: #89938f; }
.tip-card { background: #e2f6f2; color: #346861; border-radius: 17px; padding: 13px 14px; font-size: .84rem; line-height: 1.45; }
.tip-card span { font-weight: 850; color: #197c70; }
.result-hero {
  color: white;
  border-radius: var(--radius-xl);
  padding: 21px;
  margin: 3px 0 14px;
  background: radial-gradient(circle at 87% 12%, rgba(217, 255, 114, .18), transparent 35%), var(--forest);
  box-shadow: 0 18px 40px rgba(12, 33, 27, .18);
}
.result-hero > span { display: inline-grid; place-items: center; width: 46px; height: 46px; background: var(--lime); color: var(--ink); border-radius: 15px; font-size: 1.28rem; margin-bottom: 21px; }
.result-hero small { color: var(--aqua); text-transform: uppercase; letter-spacing: .1em; font-weight: 760; }
.result-hero h2 { font-size: 1.92rem; margin: 6px 0 9px; }
.result-hero p { margin: 0; color: rgba(255, 255, 255, .7); line-height: 1.48; }
.rights-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.rights-list li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.rights-list li span { color: #64726d; text-align: right; }

.setup-options { display: grid; gap: 12px; margin: 7px 0 16px; }
.setup-card { position: relative; display: grid; grid-template-columns: 50px 1fr 21px; gap: 12px; align-items: center; padding: 18px 15px; }
.setup-card.recommended { border: 2px solid var(--violet); padding: 17px 14px; background: linear-gradient(135deg, #f3f2ff, #fffef9); }
.recommendation { position: absolute; right: 14px; top: -11px; background: var(--violet); color: white; padding: 5px 10px; border-radius: 999px; font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; box-shadow: 0 6px 16px rgba(118, 115, 236, .2); }
.setup-icon { width: 47px; height: 47px; border-radius: 15px; display: grid; place-items: center; font-weight: 900; }
.gmail-icon { color: #b2473e; background: #ffe9e5; }
.manual-icon { color: #176f66; background: #def6f2; font-size: 1.35rem; }
.privacy-note { display: flex; gap: 10px; align-items: flex-start; background: #edf1e9; border-radius: 17px; padding: 13px; }
.privacy-note p { margin: 0; font-size: .8rem; line-height: 1.46; }

.prototype-mark { background: var(--lime); color: var(--ink); box-shadow: 0 10px 26px rgba(167, 228, 60, .2); }
.truth-card { display: grid; gap: 10px; margin: 20px 0 16px; }
.truth-card > div { display: grid; grid-template-columns: 31px 1fr; gap: 10px; align-items: start; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 18px rgba(17, 35, 30, .035); }
.truth-card > div > span { width: 29px; height: 29px; border-radius: 10px; display: grid; place-items: center; background: #ecf9dc; color: #426b22; font-weight: 900; }
.truth-card p { margin: 0; display: grid; gap: 3px; }
.truth-card small { color: #697771; }

.price-card {
  color: white;
  border-radius: var(--radius-xl);
  padding: 22px;
  margin: 10px 0 4px;
  background: radial-gradient(circle at 92% 8%, rgba(217, 255, 114, .2), transparent 34%), linear-gradient(150deg, var(--forest-2), var(--forest));
  box-shadow: 0 22px 46px rgba(12, 33, 27, .23);
}
.price-head { display: flex; align-items: center; justify-content: space-between; font-weight: 850; font-size: 1.12rem; }
.price-pill { color: var(--ink); background: var(--lime); padding: 6px 10px; border-radius: 999px; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; }
.price { display: flex; align-items: baseline; gap: 6px; margin: 26px 0 21px; }
.price strong { font-size: 2.75rem; letter-spacing: -.07em; }
.price span { color: rgba(255, 255, 255, .58); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.price-card li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .79); font-size: .92rem; }
.price-card li span { color: var(--lime); font-weight: 900; }
.inverse { background: var(--lime); color: var(--ink); box-shadow: none; }
.inverse:hover { background: #e5ffa0; }
.price-card > small { display: block; color: rgba(255, 255, 255, .5); text-align: center; line-height: 1.42; margin-top: 10px; }
.pricing-screen > .text-button { margin-top: 6px; }

.complete-screen { text-align: center; align-content: center; }
.complete-mark { margin-inline: auto; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 11px rgba(217, 255, 114, .2); }
.session-summary { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin: 20px 0 12px; text-align: left; display: grid; gap: 10px; box-shadow: var(--shadow-soft); }
.session-summary div { display: flex; justify-content: space-between; gap: 16px; font-size: .84rem; }
.session-summary span { color: #68756f; }
.session-summary strong { text-align: right; }

footer { min-height: 38px; display: grid; place-items: center; padding: 7px 18px max(7px, env(safe-area-inset-bottom)); color: #7c8783; font-size: .68rem; letter-spacing: .035em; }
dialog { width: min(calc(100% - 28px), 420px); border: 0; border-radius: 27px; padding: 20px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-deep); }
dialog::backdrop { background: rgba(4, 18, 14, .72); backdrop-filter: blur(6px); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dialog-head h2 { font-size: 1.7rem; }
.dialog-head .icon-button { background: #e9ede6; font-size: 1.55rem; }
.research-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 15px 0; }
.research-summary article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px; display: grid; gap: 3px; }
.research-summary strong { font-size: 1.55rem; }
.research-summary span { color: #66736e; font-size: .76rem; }
.research-summary .wide { grid-column: 1 / -1; }

@media (min-width: 620px) {
  body { padding: 28px 0; }
  .app-shell { min-height: min(850px, calc(100vh - 56px)); border-radius: 38px; border: 1px solid rgba(255, 255, 255, .68); }
}
@media (max-height: 740px) {
  .screen { padding-top: 13px; }
  .benefit-preview { height: 140px; margin-bottom: 11px; }
  .benefit-card { min-height: 76px; padding: 9px 13px; }
  .benefit-card-two { top: 31px; }
  .benefit-card-three { top: 64px; }
  .benefit-preview-mark { width: 49px; height: 49px; }
  .welcome-screen h1 { font-size: 2.35rem; }
  .welcome-screen .lead { margin-top: 11px; }
  .welcome-screen .trust-row { margin-block: 13px 10px; }
  .scan-visual { width: 110px; height: 110px; margin-bottom: 10px; }
  .category-grid article { min-height: 78px; }
  .result-count strong { font-size: 4.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
