/* Scutter site — the app's own language: grey canvas, white cards, near-black type,
   and the brand lime used as a FILL only (text on it is near-black `--on-accent`;
   an accent glyph or link on a light surface takes `--accent-deep`). Tokens mirror
   docs/tokens.json, so a palette change there has one place to land here. */
:root {
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --inset: #F8FAFB;
  --ink: #0A0A0A;
  --ink-2: #6B7280;
  --ink-3: #858B95;
  --accent: #BCD200;
  --accent-deep: #5C6B00;
  --accent-tint: #F1F7CE;
  --on-accent: #0A0A0A;
  --line: #E6E9EE;
  --hue-lime: #9CB000;
  --hue-violet: #7357DB;
  --hue-amber: #E8962E;
  --hue-teal: #0E9AA7;
  --hue-green: #2E9E57;
  --hue-slate: #6E7C91;
  --hue-pink: #D4568C;
  --hue-coral: #E0653C;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 4px 24px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.14), 0 4px 16px rgba(16, 24, 40, 0.05);
  --maxw: 1080px;
  --readw: 720px;
  /* One number owns the air between two sections; a section takes half of it on each
     side, so the gap is the token itself however the sections are ordered. */
  --sec: 104px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1014; --surface: #1A1D22; --inset: #22262C;
    --ink: #F5F6F8; --ink-2: #9BA0A8; --ink-3: #8A909A;
    --accent: #DEF22C; --accent-deep: #DCEE6A; --accent-tint: #2C3400;
    --line: #2C3037;
    --hue-lime: #DEF22C; --hue-violet: #A996F5; --hue-amber: #F5B955; --hue-teal: #45C2CD;
    --hue-green: #63C883; --hue-slate: #94A2B5; --hue-pink: #F08BB4; --hue-coral: #FF8A62;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: var(--readw); }

/* Nav — the only floating layer, so it is the only thing wearing glass. */
.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
}
/* Over the hero the nav rides on lime, which is light in both schemes, so it drops the
   glass and forces near-black type rather than inheriting the dark-mode ink. It also
   stops being sticky there: scrolling away beats trying to re-tint it halfway down. */
.nav.on-lime { position: relative; z-index: 2; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.on-lime .brand { color: #0A0A0A; }
.nav.on-lime nav a { color: rgba(10, 10, 10, 0.66); }
.nav.on-lime nav a:hover { color: #0A0A0A; }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; font-weight: 500; }
.nav nav a { color: var(--ink-2); }

/* Hero — the app's Results banner: lime that fades out under the content that
   overlaps it. Lime is light in both schemes, so this block never inverts. */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 0 20px 0;
  color: #0A0A0A;
}
/* The lime is a backdrop that ends partway down, so the phone below it sits against the
   page and keeps an edge. The ramp fades the SAME lime's alpha, in eased steps, rather
   than interpolating its RGB towards the page colour: two stops from lime to grey pass
   through a muddy olive, and an RGB ramp would also have to be written twice for dark
   mode. `transparent` is spelled out as rgba(…, 0) for the same reason — the keyword is
   transparent *black*, which greys the tail out in Safari. */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: clamp(460px, 74%, 820px);
  background: linear-gradient(180deg,
    rgba(201, 222,  46, 1)    0%,
    rgba(203, 223,  54, 0.97) 12%,
    rgba(208, 226,  70, 0.90) 24%,
    rgba(214, 230,  92, 0.79) 36%,
    rgba(221, 235, 119, 0.64) 48%,
    rgba(228, 239, 148, 0.47) 60%,
    rgba(234, 243, 178, 0.31) 71%,
    rgba(240, 247, 205, 0.17) 81%,
    rgba(244, 250, 226, 0.07) 90%,
    rgba(247, 252, 240, 0)    100%);
}
.hero .hero-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding-top: 34px; }
.hero h1 .nb { display: inline; }
@media (min-width: 620px) { .hero h1 .nb { display: block; } }
.hero h1 { font-size: clamp(30px, 6.4vw, 60px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 16px; }
.hero p { font-size: clamp(17px, 2.2vw, 20px); color: rgba(10, 10, 10, 0.72); max-width: 30em; margin: 0 auto; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  padding: 9px 18px; border-radius: 999px; background: rgba(10, 10, 10, 0.08);
  color: #0A0A0A; font-size: 14px; font-weight: 600;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0A0A0A; opacity: .45; }
.hero-mascot {
  position: absolute; color: #0A0A0A; opacity: .13; pointer-events: none;
  width: 150px; top: -14px;
}
.hero-mascot.left { left: -40px; transform: rotate(-8deg); }
.hero-mascot.right { right: -40px; transform: rotate(8deg); }
@media (max-width: 720px) { .hero-mascot { width: 96px; top: 6px; } .hero-mascot.left { left: -26px; } .hero-mascot.right { right: -26px; } }

/* iPhone, drawn in CSS: 62pt screen radius and a ~13pt black border, the same
   proportions as the App Store frames. */
.phone { width: 100%; max-width: 252px; margin: 0 auto; background: #0A0A0A; border-radius: 40px; padding: 8px; box-shadow: var(--shadow-lg); }
.phone img { border-radius: 32px; width: 100%; height: auto; }
.phone.lg { max-width: 340px; }
.hero-phone { margin: 42px auto 0; max-width: 268px; }
/* In dark mode the black body sits on a near-black page, so the device loses its
   outline; a hairline gives it back without lighting the frame up. */
@media (prefers-color-scheme: dark) {
  .phone { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.11); }
}

section { padding: calc(var(--sec) / 2) 0; }
/* The closing card brings its own generous bottom padding, so the section adds none. */
section.tight { padding: calc(var(--sec) / 2) 0 0; }
.hero + main > section:first-child { padding-top: calc(var(--sec) * 0.82); }
.eyebrow { color: var(--accent-deep); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
h2.sec { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 12px; }
.lede { color: var(--ink-2); font-size: 18px; max-width: 34em; margin: 0 0 8px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* What Scutter finds — one hue per category, exactly as the app colours them. */
.finds { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; margin-top: 36px; }
.find { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.find b { display: flex; align-items: center; gap: 9px; font-size: 16.5px; letter-spacing: -0.01em; }
.find b::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--hue, var(--hue-lime)); flex: none; }
.find p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }

/* Alternating feature rows. */
.feature { display: grid; grid-template-columns: 1fr 252px; gap: 56px; align-items: center; }
.feature + .feature { margin-top: 72px; }
.feature.flip { grid-template-columns: 252px 1fr; }
.feature.flip .feature-text { order: 2; }
.feature h3 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; margin: 0 0 12px; }
.feature p { color: var(--ink-2); margin: 0 0 12px; }
.ticks { list-style: none; padding: 0; margin: 16px 0 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 8px; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: 11px; width: 6px; height: 3px;
  border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg);
}
@media (max-width: 860px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 28px; }
  .feature.flip .feature-text { order: 0; }
  .feature + .feature { margin-top: 56px; }
}

/* Big statement card. */
/* The two promises are a pair, not a sequence: side by side on a wide screen, and
   when they do stack they keep the card gap rather than the section gap. */
.statements { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: stretch; }
.statement { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow); text-align: center; position: relative; overflow: hidden; }
.statement .mascot { width: 84px; margin: 0 auto 14px; color: var(--ink); opacity: .9; }
.statement h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.03em; font-weight: 800; margin: 0 0 12px; text-wrap: balance; }
/* Body copy reads left inside a column this narrow; only the heading stays centred. */
.statement p { color: var(--ink-2); max-width: 44em; margin: 0 auto; text-align: left; }
.statement .then { margin-top: 14px; }
.statement .more { margin-top: auto; padding-top: 18px; text-align: center; }
.split { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: auto; padding-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; font-weight: 600; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--hue-lime); font-style: normal; }
.chip.cloud i { background: var(--hue-violet); }

/* Plans. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 36px; }
.plan { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.plan h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.plan .sub { color: var(--ink-3); font-size: 14.5px; margin: 0 0 16px; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--ink-2); font-size: 15.5px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.plan.pro { background: linear-gradient(100deg, #A8C400, #D8EE3A); color: var(--on-accent); }
.plan.pro .sub { color: rgba(10, 10, 10, .62); }
.plan.pro li { color: rgba(10, 10, 10, .78); }
.plan.pro li::before { background: rgba(10, 10, 10, .55); }
.badge { display: inline-block; background: rgba(10, 10, 10, .12); color: #0A0A0A; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.fineprint { color: var(--ink-3); font-size: 13.5px; margin-top: 18px; }

/* FAQ. */
.faq { margin-top: 30px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 650; font-size: 16.5px;
  display: flex; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 22px 20px; color: var(--ink-2); }
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Closing call. */
.closing { text-align: center; padding: 76px 20px 84px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.closing .mascot { width: 110px; margin: 0 auto 18px; color: var(--ink); }
.closing h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; font-weight: 800; margin: 0 0 10px; }
.closing p { color: var(--ink-2); max-width: 30em; margin: 0 auto; }

/* Legal pages. */
.legal { padding: 40px 0 0; max-width: var(--readw); }
.legal h1 { font-size: clamp(30px, 6vw, 42px); letter-spacing: -0.03em; font-weight: 800; margin: 0 0 6px; }
.meta { color: var(--ink-3); font-size: 14px; margin: 0 0 28px; }
.legal h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 38px 0 8px; }
.legal h3 { font-size: 17px; font-weight: 700; margin: 24px 0 4px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16.5px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--ink); }
.callout { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; margin: 22px 0; box-shadow: var(--shadow); }
.callout p { margin: 0; color: var(--ink); }

/* Footer. */
footer.site { margin-top: calc(var(--sec) * 0.7); padding: 30px 0 52px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
footer.site nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
footer.site a { color: var(--ink-2); }
footer.site .legal-line { flex-basis: 100%; color: var(--ink-3); font-size: 13px; margin: 0; }
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-in { padding: 12px 20px; gap: 10px; }
  .nav nav { gap: 6px 14px; font-size: 14px; }
  .brand { font-size: 17px; }
  :root { --sec: 72px; }
  footer.site nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}