/* One stylesheet for every page and every language.
   Phone first: the layout starts as a single column and widens at 700px and
   again at 1000px, because most people meeting this site are holding a phone
   and the ones who are not have plenty of room to spare. */
:root { --ink:#141821; --muted:#5d6672; --accent:#1f6f43; --accent-soft:#e8f2ec;
        --bg:#f7f8fa; --card:#fff; --line:#e4e8ee; --shadow:0 1px 2px rgba(20,24,33,.05),
        0 8px 24px -12px rgba(20,24,33,.12); }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e9edf2; --muted:#9aa5b2; --accent:#4cbd84; --accent-soft:#16241d;
          --bg:#0d1014; --card:#161a20; --line:#242a33;
          --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); }
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       -webkit-font-smoothing:antialiased }
.wrap { max-width:1060px; margin:0 auto; padding:0 20px }
a { color:var(--accent) }

/* header */
.top { display:flex; align-items:center; justify-content:space-between;
       gap:16px; flex-wrap:wrap; padding:18px 0 }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none;
         color:var(--ink); font-weight:700; letter-spacing:-.01em; font-size:1.05rem }
.brand svg { width:26px; height:26px; flex:none }

/* hero */
.hero { padding:28px 0 8px }
.kicker { display:inline-block; background:var(--accent-soft); color:var(--accent);
          font-size:.78rem; font-weight:600; letter-spacing:.04em;
          text-transform:uppercase; padding:5px 11px; border-radius:99px;
          margin-bottom:16px }
h1 { font-size:clamp(1.8rem,5.5vw,2.9rem); line-height:1.15; margin:0 0 14px;
     letter-spacing:-.025em }
.lede { color:var(--muted); font-size:clamp(1rem,2.4vw,1.15rem); margin:0 0 6px;
        max-width:62ch }

/* sections */
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.07em;
     color:var(--muted); margin:40px 0 14px; font-weight:600 }
h3 { margin:0 0 4px; font-size:1.15rem; letter-spacing:-.01em }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:20px; margin-bottom:14px; box-shadow:var(--shadow) }
.card p:last-child { margin-bottom:0 }
ul { margin:0; padding-left:0; list-style:none }
li { margin-bottom:11px; padding-left:28px; position:relative }
li svg { position:absolute; left:0; top:4px; width:18px; height:18px;
         color:var(--accent) }

/* the app cards */
.apps { display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:700px){ .apps { grid-template-columns:1fr 1fr } }
a.app { display:flex; gap:16px; align-items:flex-start; text-decoration:none;
        color:inherit; background:var(--card); border:1px solid var(--line);
        border-radius:14px; padding:20px; box-shadow:var(--shadow);
        transition:border-color .15s, transform .15s }
a.app:hover { border-color:var(--accent); transform:translateY(-1px) }
a.app img { width:56px; height:56px; border-radius:13px; flex:none }
.meta { color:var(--muted); font-size:.93rem; margin:6px 0 0 }
.more { color:var(--accent); font-weight:600; font-size:.9rem;
        display:inline-block; margin-top:10px }

/* two columns where there is room */
.split { display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:860px){ .split { grid-template-columns:1fr 1fr } }

/* buttons */
.get { display:block; text-align:center; background:var(--accent); color:#fff;
       text-decoration:none; font-weight:600; padding:15px; border-radius:11px;
       box-shadow:var(--shadow) }
.ghost { display:inline-block; text-align:center; border:1px solid var(--line);
         color:var(--accent); text-decoration:none; font-weight:600;
         padding:13px 18px; border-radius:11px; background:var(--card) }

/* forms, used by the contact page the server renders */
.field { margin-bottom:14px }
.field label { display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px }
input,textarea,select { width:100%; font:inherit; padding:11px 12px;
    border:1px solid var(--line); border-radius:10px; background:var(--bg);
    color:var(--ink) }
textarea { resize:vertical }
button { font:inherit; font-weight:600; cursor:pointer; border:1px solid var(--accent);
         background:var(--accent); color:#fff; padding:13px 20px; border-radius:11px }
.msg { padding:12px 14px; border-radius:11px; margin-bottom:16px;
       background:var(--accent-soft); border:1px solid var(--accent) }
.msg.bad { background:transparent; border-color:#b3261e; color:#b3261e }

/* language switcher and footer */
/* The site's own links, between the brand and the languages. On a phone
   they wrap onto their own line rather than squeezing the brand out. */
.site { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.92rem;
        font-weight:600; margin-right:auto }
.site a { color:var(--muted); text-decoration:none }
.site a:hover { color:var(--accent) }
.site a.here { color:var(--ink) }
@media (max-width:640px){ .site { order:3; width:100%; margin:0 } }

.langs { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.85rem }
.langs a { color:var(--muted); text-decoration:none }
.langs a:hover { color:var(--accent); text-decoration:underline }
.langs .here { color:var(--ink); font-weight:600 }
.back { display:inline-block; color:var(--muted); text-decoration:none;
        margin:18px 0 6px; font-size:.92rem }
footer { border-top:1px solid var(--line); margin-top:44px; padding:22px 0 40px;
         color:var(--muted); font-size:.88rem; display:flex; gap:14px;
         flex-wrap:wrap; justify-content:space-between; align-items:center }