/* Black Olive Studio — one stylesheet for every page.
   Plain CSS, no build step. Edit here, not in the pages. */

:root{
  --bg:#fbfaf7; --fg:#22241f; --muted:#6b6f66; --rule:#e2e0d8;
  --accent:#5c7a45; --card:#fff; --shot:#ebe3d4;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#141613; --fg:#e6e5df; --muted:#9a9e93; --rule:#2c2f29;
    --accent:#9dbd7f; --card:#1b1e19; --shot:#ebe3d4;
  }
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
.wrap.home{max-width:40rem;padding-top:5rem}

a{color:var(--accent)}

h1{font-size:1.875rem;font-weight:500;letter-spacing:-.015em;line-height:1.2;margin:0 0 .5rem}
h2{font-size:1.0625rem;font-weight:500;margin:2.5rem 0 .75rem;letter-spacing:-.005em}
h3{font-size:.9375rem;font-weight:500;margin:1.5rem 0 .35rem}
p{margin:0 0 .9rem}
ul{margin:0 0 .9rem;padding-left:1.15rem}
li{margin-bottom:.35rem}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}

/* Small uppercase section label, used where a page needs a quieter heading. */
.eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}

/* The legal pages run a slightly tighter scale than the marketing pages. */
.wrap.legal h1{font-size:1.75rem;line-height:1.25;margin:0 0 .4rem;letter-spacing:-.01em}
.wrap.legal h2{margin:2.25rem 0 .6rem}

.crumb{font-size:.875rem;color:var(--muted);margin-bottom:2rem}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

.tag{color:var(--muted);margin:0 0 3rem}
.lede{font-size:1.0625rem;color:var(--muted);margin:0 0 2rem}
.eff{color:var(--muted);font-size:.875rem;margin:0 0 2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}

.note{background:var(--card);border:1px solid var(--rule);border-radius:.6rem;padding:1rem 1.15rem;margin:0 0 2rem}
.note p{margin:0;font-size:.9375rem;color:var(--muted)}
.note p+p{margin-top:.6rem}

/* App card on the studio home page. */
.app{display:block;background:var(--card);border:1px solid var(--rule);border-radius:.75rem;padding:1.4rem 1.5rem;text-decoration:none;color:inherit}
.app:hover{border-color:var(--accent)}
.app h3{margin:0 0 .3rem;font-size:1.125rem;font-weight:500}
.app p{margin:0 0 .6rem;color:var(--muted);font-size:.9375rem}
.app .on{margin:0;font-size:.8125rem;color:var(--muted)}

/* Bordered link list. */
.links{list-style:none;margin:1rem 0 0;padding:0}
.links li{border-top:1px solid var(--rule)}
.links a{display:block;padding:.85rem .2rem;text-decoration:none}
.links a:hover{color:var(--fg)}

/* Definition lists: FAQ answers, contact rows, spec rows. */
dl{margin:0}
dt{font-weight:500;margin-top:1.25rem}
dd{margin:.25rem 0 0;color:var(--muted)}

dl.contact{margin:0}
dl.contact dt{font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:1.4rem}
dl.contact dt:first-child{margin-top:0}
dl.contact dd{margin:.15rem 0 0;color:var(--fg)}
dl.contact dd .hint{display:block;font-size:.875rem;color:var(--muted);margin-top:.15rem}

/* App page hero. */
.hero{display:flex;gap:1.25rem;align-items:center;margin:0 0 1.75rem}
.hero img{width:76px;height:76px;border-radius:1.05rem;border:1px solid var(--rule);flex:none}
.hero h1{margin:0 0 .2rem}
.hero p{margin:0;color:var(--muted);font-size:.9375rem}

/* Store links. Plain buttons on purpose — swap in the official
   App Store / Google Play badge artwork if you ever want the real marks. */
.stores{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .75rem;padding:0;list-style:none}
.stores a{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--rule);border-radius:.6rem;
  padding:.6rem 1.1rem;min-width:12.5rem;
}
.stores a:hover{border-color:var(--accent)}
.stores .small{display:block;font-size:.75rem;color:var(--muted);letter-spacing:.02em}
.stores .big{display:block;font-size:1rem;font-weight:500;line-height:1.35}
.storenote{font-size:.875rem;color:var(--muted);margin:0 0 2.5rem}

/* Screenshot strip. Scrolls sideways inside itself so the page never does. */
.shots{
  display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 0 .5rem;padding:0 0 1rem;list-style:none;
  -webkit-overflow-scrolling:touch;
}
.shots li{flex:none;width:min(64vw,255px);scroll-snap-align:center}
.shots img{
  display:block;width:100%;height:auto;border-radius:.75rem;
  border:1px solid var(--rule);background:var(--shot);
}
.shots figcaption{margin-top:.6rem;font-size:.875rem;line-height:1.5;color:var(--muted)}
.shots figure{margin:0}

/* Feature blocks, two across when there is room. */
.grid{display:grid;gap:.35rem 2rem;grid-template-columns:1fr}
@media(min-width:38rem){.grid{grid-template-columns:1fr 1fr}}
.grid h3{margin-top:1.4rem}
.grid p{font-size:.9375rem;color:var(--muted);margin:0}

footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.875rem}
footer p{margin:0 0 .4rem}