/* The app's own tokens: AppColors.green / greenText / greenTint / ink.
     Same two greens, same 20-24px radii, same system-first type stack, so the
     page and the first screen read as one product. */
  :root{
    --green:#34C759;
    --green-deep:#249942;
    --green-tint:#E8F8EE;
    --ink:#111827;
    --ink-soft:#4B5563;
    --grey:#6B7280;
    --hairline:#E5E7EB;
    --radius:24px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:#fff;
    color:var(--ink);
    font:400 17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  /* Room above the mark. At 28px it sat against the browser chrome and read
   as clipped rather than as a margin. */
/* header.wrap, not header: the element is <header class="wrap">, and .wrap's
   padding:0 24px outranks a bare element selector, so every top padding set
   here was silently dropped and the mark sat against the browser chrome. */
header.wrap{padding:38px 24px 10px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
  .brand-mark{
    width:38px;height:38px;border-radius:12px;
    background:linear-gradient(135deg,var(--green),var(--green-deep));
    display:grid;place-items:center;
  }
  /* The mark is cropped to its own ink, so 'centred' here really is centred.
   It shipped 256x234 with 16px of empty pixels down one side and none at the
   top, which no amount of place-items could correct. */
  .brand-mark img{width:21px;height:auto;display:block}

  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:56px 0 72px}
  h1{
    font-size:clamp(34px,5.2vw,56px);line-height:1.08;letter-spacing:-.025em;
    margin:0 0 18px;font-weight:800;
  }
  h1 em{font-style:normal;color:var(--green-deep)}
  .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);margin:0 0 28px;max-width:34ch}

  .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--green);color:#fff;text-decoration:none;
    font-weight:700;font-size:16px;
    padding:15px 24px;border-radius:16px;
    box-shadow:0 8px 20px rgba(52,199,89,.28);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(52,199,89,.34)}
  .btn:active{transform:translateY(0)}
  .btn svg{width:20px;height:20px;flex:none}
  .note{font-size:14px;color:var(--grey)}

  /* A flat frame: thin even bezel, a big radius on the SHELL and a small one
     on the screen, so the corners never eat the app's own UI. The screenshots
     were cropped of their status bars for Play (which requires that), so the
     frame draws one — a phone without a clock reads as a picture of an app,
     not as an app on a phone.
     Everything inside scales in cqw, container query units on the screen
     itself, so one rule fits the lead phone and the two beside it. */
  .shots{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.6vw,18px)}
  .phone{
    position:relative;flex:0 0 auto;
    width:min(30%,202px);
    /* A concentric frame: the shell's radius is the screen's PLUS the bezel,
       or the two curves cross. At 30px over a 12px screen the shell cut 18px
       deeper than the screen did, so each corner lost its bezel and clipped
       the screenshot instead. 3 + 10 = 13. */
    padding:3px;border-radius:13px;
    /* Graphite, not black: a pure black rim reads as a cut-out against the
       white page, and the screenshots inside are mostly white. */
    background:linear-gradient(160deg,#565c65,#3d424a 58%,#4b5159);
    box-shadow:
      0 26px 54px rgba(17,24,39,.24),
      inset 0 0 0 1px rgba(255,255,255,.2);
  }
  .phone--lead{width:min(36%,240px);z-index:1}

  .screen{
    container-type:inline-size;
    position:relative;overflow:hidden;
    border-radius:10px;background:#fff;
  }
  .statusbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:3.4cqw 5cqw 1.6cqw;
    font:700 6.4cqw/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:#111827;background:#fff;
    /* px fallback for a browser without container query units */
    font-size:max(9px,6.4cqw);
  }
  .statusbar .sb-icons{display:flex;align-items:center;gap:1.6cqw}
  .statusbar svg{height:max(8px,5.6cqw);width:auto;display:block}
  .cam{
    position:absolute;top:3.2cqw;left:50%;transform:translateX(-50%);
    width:max(5px,3.4cqw);height:max(5px,3.4cqw);border-radius:50%;
    background:#22262c;box-shadow:inset 0 0 0 .6px rgba(255,255,255,.22);
  }
  .screen img{
    /* height:auto is load-bearing. The width/height attributes reserve the box
       before the image lands; without this the attribute height wins over the
       CSS width and every screenshot renders 98px wide and 1080px tall. */
    display:block;width:100%;height:auto;
  }

  .facts{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    background:var(--green-tint);border-radius:var(--radius);
    padding:26px;margin:0 0 72px;
  }
  .fact b{display:block;font-size:clamp(20px,3vw,26px);letter-spacing:-.02em}
  .fact span{font-size:14.5px;color:var(--ink-soft)}

  footer{border-top:1px solid var(--hairline);padding:26px 0 44px;color:var(--grey);font-size:14px}
  footer a{color:var(--grey)}
  .foot-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}


  /* sections below the fold */
  .section{padding:64px 0;border-top:1px solid var(--hairline)}
  .section h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;font-weight:800}
  .section .sub{color:var(--ink-soft);margin:0 0 34px;max-width:56ch}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{
    border:1px solid var(--hairline);border-radius:var(--radius);
    padding:24px;background:#fff;
  }
  .card .ico{
    width:44px;height:44px;border-radius:14px;background:var(--green-tint);
    display:grid;place-items:center;margin-bottom:14px;
  }
  .card .ico svg{width:22px;height:22px;color:var(--green-deep)}
  .card h3{margin:0 0 6px;font-size:17.5px;letter-spacing:-.01em}
  .card p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.5}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
  .step{position:relative;padding-left:52px}
  .step::before{
    counter-increment:step;content:counter(step);
    position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:12px;
    background:var(--green);color:#fff;display:grid;place-items:center;
    font-weight:800;font-size:16px;
  }
  .step h3{margin:4px 0 6px;font-size:17px}
  .step p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.5}

  .closing{
    background:linear-gradient(135deg,var(--green),var(--green-deep));
    color:#fff;border-radius:var(--radius);padding:clamp(28px,5vw,48px);
    display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
    margin:0 0 72px;
  }
  .closing h2{margin:0 0 6px;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.02em}
  .closing p{margin:0;opacity:.92;max-width:44ch}
  .btn--onGreen{background:#fff;color:var(--green-deep);box-shadow:0 10px 24px rgba(0,0,0,.14)}
  .btn--onGreen:hover{box-shadow:0 14px 30px rgba(0,0,0,.18)}

  @media (max-width:860px){
    .cov{grid-template-columns:1fr;gap:2px}
    .hero{grid-template-columns:1fr;gap:38px;padding:36px 0 56px;text-align:center}
    .lede{margin-left:auto;margin-right:auto}
    .cta{justify-content:center}
    .shots{align-items:flex-end}
    .facts{grid-template-columns:1fr;gap:14px;text-align:center}
    .cards,.steps{grid-template-columns:1fr}
    .section{padding:48px 0}
    .closing{text-align:center;justify-content:center}
  }
  @media (prefers-reduced-motion:reduce){.btn{transition:none}}

  /* ---- language switcher ------------------------------------------------ */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .langs{display:flex;flex-wrap:wrap;gap:4px;font-size:13.5px}
  .langs a{
    color:var(--grey);text-decoration:none;padding:5px 9px;border-radius:9px;
    text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  }
  .langs a:hover{background:var(--green-tint);color:var(--green-deep)}
  .langs a[aria-current="page"]{background:var(--green-tint);color:var(--green-deep)}
  .topnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .staff-link{
    display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
    border:1.5px solid var(--green-deep);color:var(--green-deep);background:#fff;
    font-weight:700;font-size:13.5px;letter-spacing:.02em;text-decoration:none;
  }
  .staff-link svg{width:15px;height:15px;flex:none}
  .staff-link:hover{background:var(--green-tint)}
  .staff-link:focus-visible{outline:3px solid var(--green);outline-offset:2px}

  /* ---- species chips ---------------------------------------------------- */
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{
    border:1px solid var(--hairline);border-radius:14px;padding:10px 14px;
    font-size:15px;line-height:1.35;
  }
  .chip b{font-weight:700}
  .chip i{display:block;font-style:italic;color:var(--grey);font-size:13.5px}

  /* ---- coverage --------------------------------------------------------- */
  /* Country on the left, its cities flowing on the right. Two shapes were tried
     first and both waste a screen of white: multicol balances 24 countries into
     a container taller than either column, and a card grid makes every row as
     tall as its tallest cell, so Germany's 42 cities leave a hole beside the
     United Kingdom's seven. Rows that stack cannot do either. */
  .coverage{display:grid;gap:2px}
  .cov{
    display:grid;grid-template-columns:210px 1fr;gap:4px 24px;
    padding:12px 0;border-top:1px solid var(--hairline);
  }
  .cov:first-child{border-top:0}
  .cov h3{margin:0;font-size:16px;letter-spacing:-.01em}
  .cov h3 span{display:block;color:var(--grey);font-weight:500;font-size:13.5px}
  .cov p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.55}

  /* ---- FAQ -------------------------------------------------------------- */
  .faq{border-top:1px solid var(--hairline)}
  .faq details{border-bottom:1px solid var(--hairline);padding:18px 0}
  .faq summary{
    cursor:pointer;font-weight:700;font-size:17px;letter-spacing:-.01em;
    list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--green-deep);font-size:22px;line-height:1;flex:none}
  .faq details[open] summary::after{content:"−"}
  .faq p{margin:12px 0 0;color:var(--ink-soft);max-width:70ch}

  .prose{color:var(--ink-soft);max-width:70ch}
  .prose p{margin:0 0 14px}