:root {
  --ink: #10131c;
  --muted: #667085;
  --line: #e7e9ef;
  --surface: rgba(255,255,255,.84);
  --green: #38e6a5;
  --green-deep: #0b9d71;
  --violet: #7c61ff;
  --blue: #39a8ff;
  --orange: #ffad5b;
  --red: #db3e56;
  --shadow: 0 28px 80px rgba(24, 29, 45, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f8fb;
  min-height: 100vh;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
a { color: inherit; }
.aurora { position: fixed; border-radius: 999px; filter: blur(80px); opacity: .22; pointer-events: none; z-index: -1; }
.aurora-one { width: 520px; height: 520px; background: #74f7c1; top: -250px; right: -130px; }
.aurora-two { width: 460px; height: 460px; background: #9a85ff; top: 410px; left: -280px; }
.site-header, main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header { height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 20px; letter-spacing: -.5px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 5px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; background: var(--ink); color: white; padding: 0 5px; box-shadow: 0 8px 22px rgba(16,19,28,.2); }
.brand-mark span:nth-child(2) { color: var(--green); font-weight: 900; transform: translateY(-1px); }
.brand-mark span { font-size: 12px; font-weight: 800; }
.site-header nav { display: flex; align-items: center; gap: 27px; color: #4d5362; font-size: 14px; }
.site-header nav a { text-decoration: none; }
.free-pill { padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(11,157,113,.22); background: rgba(56,230,165,.12); color: #087555; font-weight: 700; }
.hero { text-align: center; padding: 78px 0 88px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #596070; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.eyebrow span { width: 7px; height: 7px; border-radius: 99px; background: var(--green); box-shadow: 0 0 0 5px rgba(56,230,165,.13); }
h1 { font-size: clamp(47px, 7vw, 82px); line-height: .99; margin: 23px 0 23px; letter-spacing: -.062em; }
h1 em { font-style: normal; background: linear-gradient(100deg, #1ba775, #6a55f7 58%, #319fea); color: transparent; -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 765px; margin: 0 auto 37px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.search-shell { text-align: left; max-width: 920px; margin: auto; padding: 10px; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: var(--surface); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 3px; background: #f0f2f6; border-radius: 16px; }
.mode-tab { border: 0; color: #687080; background: transparent; padding: 13px 16px; border-radius: 13px; cursor: pointer; font-weight: 750; transition: .18s ease; }
.mode-tab span { margin-right: 5px; }
.mode-tab.active { background: white; color: var(--ink); box-shadow: 0 4px 16px rgba(32,38,56,.08); }
.mode-panel { display: none; padding: 28px 24px 20px; }
.mode-panel.active { display: block; }
label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 800; }
input, select { width: 100%; border: 1px solid #dfe2e9; background: white; color: var(--ink); border-radius: 12px; padding: 14px 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: #7664eb; box-shadow: 0 0 0 4px rgba(124,97,255,.11); }
.input-row { display: flex; gap: 9px; }
.field-help { color: #88909e; font-size: 12px; margin: 9px 2px 0; }
button { cursor: pointer; }
.primary-button, .secondary-button, .ghost-button { border: 0; border-radius: 12px; font-weight: 800; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.primary-button { background: var(--ink); color: white; min-height: 52px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; box-shadow: 0 11px 24px rgba(16,19,28,.18); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(16,19,28,.23); }
.primary-button b { color: var(--green); font-size: 21px; }
.primary-button.compact { min-height: 48px; }
.secondary-button { background: #edf0f5; color: #252a36; padding: 0 18px; }
.secondary-button:hover { background: #e3e7ee; }
.ghost-button { border: 1px solid var(--line); padding: 11px 16px; background: white; color: #4a5060; }
.search-footer { border-top: 1px solid var(--line); margin: 2px 14px 0; padding: 20px 10px 10px; display: grid; grid-template-columns: 150px 1fr; gap: 15px; align-items: end; }
.search-footer .primary-button { justify-self: end; min-width: 255px; }
.postcode { letter-spacing: .12em; font-weight: 800; }
.trust-row { margin: 23px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 23px; color: #747b89; font-size: 12px; }
.trust-row span::first-letter { color: var(--green-deep); }
.identified-product { margin: 0 24px 20px; border: 1px solid #dce9e4; background: #f4fbf8; border-radius: 15px; padding: 13px; display: flex; align-items: center; gap: 13px; }
.identified-product img { width: 58px; height: 58px; border-radius: 10px; object-fit: contain; background: white; }
.identified-product strong, .identified-product span { display: block; }
.identified-product span { font-size: 12px; color: var(--muted); margin-top: 4px; }
.photo-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.photo-drop { min-height: 180px; border: 1.5px dashed #cdd2dd; border-radius: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin: 0; cursor: pointer; color: #555c6b; background: #fafbfc; transition: border-color .2s, background .2s; }
.photo-drop:hover { border-color: #8572ef; background: #f8f7ff; }
.photo-drop input { display: none; }
.photo-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: white; box-shadow: 0 7px 20px rgba(35,40,54,.1); font-size: 22px; color: #6e59e7; margin-bottom: 6px; }
.photo-drop span:last-child { font-size: 12px; color: #8c93a1; font-weight: 500; }
.photo-preview-wrap { position: relative; border-radius: 17px; overflow: hidden; background: #111; min-height: 240px; }
.photo-preview-wrap img { width: 100%; max-height: 420px; object-fit: contain; display: block; }
.photo-preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.photo-status { color: #7e8694; font-size: 12px; margin-top: 11px; }
.detected-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.detect-chip { border: 1px solid #dfe3e9; background: white; border-radius: 999px; padding: 8px 12px; color: #3d4350; font-size: 12px; font-weight: 750; }
.detect-chip:hover { border-color: #826def; color: #614ed8; }
.results-section { padding: 88px 0; }
.results-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
h2 { font-size: clamp(33px, 4vw, 52px); line-height: 1.04; letter-spacing: -.045em; margin: 15px 0 10px; }
.results-heading p, .section-title-row p { margin: 0; color: var(--muted); }
.result-group { margin: 28px 0; padding: 26px; border-radius: 22px; background: white; border: 1px solid var(--line); box-shadow: 0 10px 38px rgba(32,38,54,.05); }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-title-row h3, .email-card h3 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.025em; }
.section-title-row select { width: auto; min-width: 210px; padding: 10px 13px; }
.result-cards { display: grid; gap: 12px; }
.result-card { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 17px; padding: 15px; }
.result-card.demo { border-style: dashed; }
.result-image { width: 92px; height: 92px; border-radius: 12px; background: #f6f7f9; object-fit: contain; }
.result-image.placeholder { display: grid; place-items: center; font-size: 27px; color: #a0a6b2; }
.result-title { font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
.result-details { display: flex; gap: 13px; flex-wrap: wrap; color: #737a88; font-size: 12px; }
.similarity-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.similarity-track { width: 110px; height: 6px; border-radius: 999px; background: #eceef2; overflow: hidden; }
.similarity-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7a65f2, #39d5a1); }
.similarity-row strong { font-size: 12px; }
.price-box { min-width: 145px; text-align: right; }
.price-box small { display: block; color: #858c99; font-size: 11px; }
.price-box b { display: block; font-size: 23px; margin: 3px 0 10px; letter-spacing: -.03em; }
.buy-link { display: inline-block; text-decoration: none; color: var(--ink); border: 1px solid #dfe2e8; border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 800; }
.shortcut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shortcut-card { border: 1px solid var(--line); border-radius: 14px; padding: 15px; text-decoration: none; transition: transform .15s, border-color .15s; }
.shortcut-card:hover { transform: translateY(-2px); border-color: #8d7cf0; }
.shortcut-card strong, .shortcut-card span { display: block; }
.shortcut-card span { color: var(--muted); font-size: 12px; margin-top: 5px; }
.savings-group { background: linear-gradient(145deg, #fff, #f8fbfa); }
.discount-empty { border: 1px dashed #ccd3d0; border-radius: 14px; padding: 20px; color: #6e776f; background: rgba(255,255,255,.65); }
.discount-card { border: 1px solid #dce8e3; background: white; border-radius: 14px; padding: 16px; display: flex; justify-content: space-between; gap: 20px; margin-top: 10px; }
.discount-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #eaf8f2; color: #087755; border-radius: 8px; padding: 7px 9px; font-weight: 900; }
.status-badge { font-size: 11px; padding: 5px 8px; border-radius: 999px; background: #f1f2f6; color: #616876; }
.email-card { margin-top: 28px; padding: 28px; border-radius: 22px; color: white; background: #121722; display: grid; grid-template-columns: .9fr 1.1fr; gap: 35px; align-items: center; box-shadow: var(--shadow); }
.email-card p { color: #aeb5c3; margin: 0; line-height: 1.55; }
.email-icon { color: var(--green); margin-bottom: 12px; font-size: 23px; }
.email-controls input { border-color: #353c49; background: #1b212d; color: white; }
.email-controls .primary-button { background: var(--green); color: #0e3125; box-shadow: none; }
.share-result { display: flex; gap: 8px; margin-top: 10px; }
.message { border-radius: 11px; padding: 11px 13px; font-size: 13px; margin-top: 12px; }
.message.error { color: #9c2438; background: #fff0f2; border: 1px solid #ffd5dc; }
.message.notice { color: #675313; background: #fff9df; border: 1px solid #f6e6a5; }
.message.success { color: #06704f; background: #eafff6; border: 1px solid #bfeedd; }
.provider-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; margin: 0 7px 7px 0; border-radius: 999px; background: #eceff4; color: #626a78; font-size: 11px; font-weight: 750; }
.provider-chip.live { background: #e9fbf4; color: #087554; }
.info-section, .matching-section { padding: 100px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.steps-grid article { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 23px; min-height: 220px; }
.steps-grid article > span { font-size: 12px; color: #7d6bed; font-weight: 900; }
.steps-grid h3 { margin: 48px 0 10px; }
.steps-grid p, .matching-section p { color: var(--muted); line-height: 1.6; }
.matching-section { border-top: 1px solid var(--line); }
.scale-card { background: white; border: 1px solid var(--line); border-radius: 22px; padding: 12px 24px; }
.scale-card > div { display: grid; grid-template-columns: 65px 80px 1fr 1.25fr; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.scale-card > div:last-child { border: 0; }
.scale { height: 7px; border-radius: 99px; }
.scale.exact { background: #32d59a; }
.scale.close { background: #6e8df5; }
.scale.similar { background: #a576ef; }
.scale.alternative { background: #f0a35c; }
.scale-card small { color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 35px 0 55px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
footer p { max-width: 600px; text-align: right; color: var(--muted); font-size: 12px; line-height: 1.55; }
.hidden { display: none !important; }
.loading { opacity: .65; pointer-events: none; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 850px) {
  .site-header nav a { display: none; }
  .hero { padding-top: 45px; }
  .shortcut-grid { grid-template-columns: repeat(2,1fr); }
  .result-card { grid-template-columns: 72px 1fr; }
  .result-image { width: 72px; height: 72px; }
  .price-box { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .price-box small, .price-box b { display: inline; }
  .info-section, .matching-section { grid-template-columns: 1fr; gap: 28px; }
  .email-card { grid-template-columns: 1fr; }
}
@media (max-width: 610px) {
  .site-header, main, footer { width: min(100% - 24px, 1180px); }
  .site-header { height: 72px; }
  .free-pill { display: none; }
  h1 { font-size: 45px; }
  .hero-copy { font-size: 16px; }
  .search-shell { border-radius: 19px; padding: 7px; }
  .mode-tab { font-size: 11px; padding: 12px 5px; }
  .mode-panel { padding: 22px 13px 16px; }
  .input-row { flex-direction: column; }
  .input-row .secondary-button { min-height: 45px; }
  .search-footer { grid-template-columns: 1fr; margin-inline: 5px; }
  .search-footer .primary-button { justify-self: stretch; min-width: 0; }
  .trust-row { gap: 10px 15px; }
  .results-heading { align-items: start; }
  .result-group { padding: 18px 13px; }
  .section-title-row { align-items: start; flex-direction: column; }
  .section-title-row select { width: 100%; }
  .result-card { grid-template-columns: 60px 1fr; gap: 11px; padding: 11px; }
  .result-image { width: 60px; height: 60px; }
  .shortcut-grid, .steps-grid { grid-template-columns: 1fr; }
  .email-card { padding: 22px 16px; }
  .share-result { flex-direction: column; }
  .scale-card > div { grid-template-columns: 56px 55px 1fr; }
  .scale-card small { grid-column: 3; }
  footer { flex-direction: column; align-items: start; }
  footer p { text-align: left; }
}