/* The front page, from design round 10. The four documents use `styles.css` and never load this.

   No inline style anywhere, because the CSP forbids it and `site.test.ts` fails on it (D-316). The
   hero instrument and the bar's mark are inline SVG whose fills are the classes below, which is how
   they follow the theme without a `style` attribute.

   **Archivo is named and not hosted.** The display face the round drew with is not in `assets/`: the
   site ships no web font, for the reason `styles.css` gives, so the stack falls back to the system
   face and `font-stretch` has nothing to act on. Recorded as E-052. See D-329. */
:root{
  --bg:#1E2226;--band:#15181B;--card:#262A2F;--line:#353A40;--ink:#F2EFE8;--mute:#ABA79D;
  --teal:#5DCDBF;--stem:#E8E4DB;--bar:#5DCDBF;--g1:#23272B;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{--bg:#F4F1EA;--band:#E9E4D9;--card:#FBF8F2;--line:#D9D3C6;--ink:#1D2024;--mute:#5C584F;
    --teal:#1C766E;--stem:#22262A;--bar:#22262A;--g1:#FBF8F2}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.landing{background:var(--bg);color:var(--ink);font:17px/1.5 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
h1,h2{font-family:var(--display);font-stretch:112%;font-weight:800;margin:0;text-wrap:balance}
h2{font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-.02em}
.lede{margin:16px 0 0;max-width:36em;color:var(--mute);font-size:19px;text-wrap:pretty}

.i-ground{fill:var(--g1)} .i-stem{fill:var(--stem)} .i-bar{fill:var(--bar)}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:112%;font-weight:800;font-size:19px}
.brand-icon{width:30px;height:30px;border-radius:7px;display:block}
.top-nav{display:flex;gap:20px;font-size:15px}
.top-nav a{color:var(--mute);text-decoration:none}
.top-nav a:hover{color:var(--ink)}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:24px;padding-bottom:88px}
.instrument{width:min(520px,86vw);height:auto;display:block}
.hero h1{font-size:clamp(44px,7vw,84px);line-height:1;letter-spacing:-.03em;margin-top:40px}
.hero .lede{margin-top:20px;max-width:34em}
.get{margin-top:32px;min-height:54px;display:flex;align-items:center}
.store-badge img{display:block;height:52px;width:auto}
.get-note{margin:0;font-size:15px;color:var(--mute)}

.features{padding-bottom:104px}
.features h2{margin-bottom:36px}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.shots img{width:100%;height:auto;border-radius:18px;display:block;scroll-snap-align:start}
.feature-list{margin:48px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:32px}
.feature-list div{padding:18px 0;border-top:1px solid var(--line)}
.feature-list dt{font-weight:600}
.feature-list dd{margin:4px 0 0;color:var(--mute);font-size:16px;text-wrap:pretty}

.privacy{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.privacy-grid{padding-top:104px;padding-bottom:104px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:start}
.eyebrow{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.privacy h2{font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.025em}
.nots{list-style:none;margin:0;padding:0}
.nots li{padding:16px 0;border-top:1px solid var(--line);font-size:22px;font-weight:600}
.nots li:last-child{border-bottom:1px solid var(--line)}
.fine{margin:24px 0 0;color:var(--mute);font-size:16px;text-wrap:pretty}

.pro{padding-top:104px;padding-bottom:104px}
.prices{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.prices li{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:6px}
.p-name{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.p-amt{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:44px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p-per{color:var(--mute);font-size:15px}

.foot{border-top:1px solid var(--line)}
.foot-row{padding-top:28px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px}
.foot-nav a{color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--teal)}
.foot-name{color:var(--mute)}