@font-face{font-family:'Fraunces';font-weight:700;font-display:swap;src:url('/assets/Fraunces-Bold.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url('/assets/Fredoka-Bold.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('/assets/Fredoka-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:400;font-display:swap;src:url('/assets/Nunito-Regular.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url('/assets/Nunito-Bold.woff2') format('woff2')}

:root{
  --water:#e0f4fb; --ink:#14313a; --muted:#4f6a72; --coral:#ff9d72; --teal:#2bb8ad;
  --deep:#0d2027; --panel:#ffffff; --line:#bcdde7;
  /* Text-safe teal: the brand teal is decorative only - white on #2bb8ad is 2.5:1, which fails WCAG AA */
  --teal-text:#146b63;
  --serif:'Fraunces',Georgia,serif; --display:'Fredoka',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--water);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-text)}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:19px}
p{margin:0}

.cta{display:inline-block;background:var(--coral);color:#3b1d0e;font-family:var(--body);font-weight:700;
  text-decoration:none;padding:15px 34px;border-radius:999px;font-size:18px;border:2px solid transparent}
.cta:hover{filter:brightness(1.05)}
.cta:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
a:focus-visible,summary:focus-visible,.demo-table button:focus-visible{outline:3px solid var(--teal-text);outline-offset:2px}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

/* Header */
.top{padding-block:20px}
.top .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.top nav a{font-weight:700;text-decoration:none;color:var(--ink)}
.top .cta{padding:9px 20px;font-size:16px}
.top .cta.ghost{border-color:var(--teal-text);color:var(--teal-text)}
.top .cta.ghost:hover{background:var(--teal-text);color:#fff}

/* Hero */
.hero{padding-block:24px 56px}
.hero .wrap{display:grid;gap:40px;grid-template-columns:1.05fr .95fr;align-items:center}
.hero h1{font-size:clamp(30px,4.2vw,44px);margin-top:26px}
.lockup{display:flex;align-items:center;gap:18px}
.lockup-mark{display:grid;place-items:center;width:clamp(84px,11vw,112px);aspect-ratio:1;
  border-radius:24px;box-shadow:0 10px 26px rgba(13,32,39,.18);
  /* Same teal badge the app draws behind the pufferfish (header.py .specix-icon-badge) */
  background:linear-gradient(155deg,var(--teal),color-mix(in srgb,var(--teal) 70%,black))}
.lockup-mark img{width:74%;height:74%}
.lockup-name{font-family:var(--serif);font-weight:700;font-size:clamp(50px,7.4vw,76px);line-height:1;letter-spacing:-.015em}
.rule{display:block;width:74px;height:8px;border-radius:99px;background:var(--coral);margin:10px 0 12px}
.tagline{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--teal-text);font-size:clamp(13px,1.5vw,15px)}
.hero p.lede{margin-top:18px;font-size:19px;color:var(--muted);max-width:56ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.free-note{font-size:15px;color:var(--muted);margin-top:14px}
.phone{background:var(--deep);border-radius:28px;padding:10px;box-shadow:0 18px 44px rgba(13,32,39,.28);justify-self:center;width:min(300px,100%)}
.phone video{border-radius:20px;width:100%}

/* Sections */
section{padding-block:56px}
section.alt{background:var(--panel)}
.section-head{max-width:62ch;margin-bottom:34px}
.section-head p{color:var(--muted);margin-top:12px}

.steps{list-style:none;padding:0;margin:0;display:grid;gap:22px;grid-template-columns:repeat(3,1fr);counter-reset:step}
.steps li{counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--teal-text);color:#fff;font-family:var(--display);font-weight:700;margin-bottom:12px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted);font-size:16px}

.features{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0;padding:0;list-style:none}
/* White cards on the water ground, each headed by one of the three brand colours in rotation -
   the six cards used to be pale blue on pale blue, which read as one flat block. */
.features li{background:var(--panel);border:1px solid var(--line);border-top:6px solid var(--teal);
  border-radius:16px;padding:22px 20px 20px;box-shadow:0 6px 18px rgba(20,49,58,.06)}
.features li:nth-child(3n+2){border-top-color:var(--coral)}
.features li:nth-child(3n){border-top-color:var(--teal-text)}
/* An emoji per card instead of a plain dot, matching the app's own "Why SpeciX" list */
.features h3{margin-bottom:8px;display:flex;align-items:baseline;gap:10px}
.features .ico{font-size:22px;line-height:1;flex:none}
.features p{color:var(--muted);font-size:16px}

/* Pricing */
.price-lead{display:flex;gap:18px;align-items:flex-start;background:var(--water);border:2px solid var(--teal);
  border-radius:18px;padding:22px;margin-bottom:26px}
.price-lead .big{font-family:var(--display);font-weight:700;font-size:22px}
.plans{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.plans caption{text-align:left;color:var(--muted);font-size:15px;padding-bottom:10px}
.plans th,.plans td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.plans th{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.plans tbody td:first-child{font-weight:700}
.table-scroll{overflow-x:auto}
.price-note{margin-top:22px;color:var(--muted);font-size:16px;max-width:70ch}

/* FAQ */
.faq{display:grid;gap:14px}
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
section.alt details{background:var(--water)}
summary{font-family:var(--display);font-weight:600;font-size:17px;cursor:pointer}
summary::marker{color:var(--teal-text)}
details p{margin-top:10px;color:var(--muted)}

/* Closing + footer */
.closing{background:var(--deep);color:#eaf6f9;text-align:center}
.closing h2{color:#fff}
.closing p{color:#b6d3da;margin:14px auto 26px;max-width:52ch}
footer{padding-block:34px;font-size:15px;color:var(--muted)}
footer .wrap{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted)}
footer .sep{margin-left:auto}

/* Interactive demo */
.demo-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.demo-picker button{font-family:var(--body);font-weight:700;font-size:15px;cursor:pointer;
  background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:9px 18px}
.demo-picker button[aria-pressed="true"]{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.demo-picker button:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
.demo-grid{display:grid;gap:24px;grid-template-columns:1.15fr .85fr;align-items:start}
.demo-photo{margin:0}
.demo-frame{position:relative;display:inline-block;line-height:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--deep);max-width:100%}
.demo-frame img{max-width:100%;max-height:70vh;width:auto}
/* Same overlay the app draws (header.py .specix-hl): the species' box is the content area, and
   padding plus the negative margin grow the rectangle outward around it, so the frame never sits
   on top of a small subject. */
.demo-box{position:absolute;box-sizing:content-box;padding:3px;margin:-6px;
  border:3px solid var(--coral);border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,32,42,.28);
  transition:left 280ms cubic-bezier(.4,0,.2,1),top 280ms cubic-bezier(.4,0,.2,1),
             width 280ms cubic-bezier(.4,0,.2,1),height 280ms cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.demo-box{transition:none}}
.demo-caption{font-size:14px;color:var(--muted);line-height:1.5;margin-top:10px}
.demo-table{width:100%;border-collapse:collapse;font-size:16px}
.demo-table caption{text-align:left;font-family:var(--display);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-bottom:8px}
.demo-table th{text-align:left;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--line)}
.demo-table td{padding:0;border-bottom:1px solid var(--line)}
.demo-table button{width:100%;display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  background:none;border:0;font:inherit;font-family:var(--body);color:inherit;text-align:left;cursor:pointer;padding:11px 10px}
.demo-table button:hover{background:var(--water)}
section.alt .demo-table button:hover{background:var(--panel)}
.demo-table button[aria-pressed="true"]{background:var(--teal-text);color:#fff}
.demo-table .sci{display:block;font-size:13px;font-style:italic;color:var(--muted)}
.demo-table button[aria-pressed="true"] .sci{color:#dff5f2}
.demo-table .score{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-detail{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
section.alt .demo-detail{background:var(--water)}
.demo-detail h3{font-size:20px}
.demo-detail .sci-name{font-style:italic;color:var(--muted);font-size:15px}
.demo-detail .chain{font-size:14px;color:var(--muted);margin-top:6px}
.demo-detail dl{margin:14px 0 0;display:grid;gap:12px}
.demo-detail dt{font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--teal-text)}
.demo-detail dd{margin:2px 0 0;font-size:15px;color:var(--muted)}
.demo-detail .hint{color:var(--muted);font-size:15px}
.demo-detail a{font-weight:700}
.demo-foot{margin-top:18px;font-size:14px;color:var(--muted)}

@media (max-width:820px){
  .demo-grid{grid-template-columns:1fr}
  .hero .wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}