/* MyTripKeeper — shared site styles (no build step; plain CSS)
   Palette pulled from the app icon: deep teal, route blue, pin orange. */

:root{
  --teal-deep:#153b3e; --teal:#1f5c55; --mint:#dff0e2; --mint-soft:#eef7ef;
  --blue:#2f7ef0; --orange:#f5843b; --ink:#1c2a28; --ink-soft:#48605b;
  --paper:#fdfdfb; --card:#ffffff; --line:#dde8e0;
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --mint:#1b3230; --mint-soft:#132523; --ink:#e8f1ec; --ink-soft:#a4bfb6;
    --paper:#0f1d1c; --card:#16302d; --line:#24443f;
  }
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.6;
}
a{color:var(--blue)}
.wrap{max-width:980px; margin:0 auto; padding:0 20px}
.wrap.narrow{max-width:760px}

/* ---- header & nav ---- */
header.site{
  background:linear-gradient(160deg,var(--teal-deep) 0%,var(--teal) 70%,#2a6b5f 100%);
  color:#f2faf4;
}
header.site.tall{padding-bottom:64px}
header.site.sub{padding-bottom:38px}
nav.site{display:flex; align-items:center; gap:14px; padding:18px 0; flex-wrap:wrap}
nav.site .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; color:#f2faf4; text-decoration:none}
nav.site .brand img{width:36px; height:36px; border-radius:9px}
nav.site .spacer{flex:1}
nav.site .links{display:flex; gap:4px 14px; flex-wrap:wrap; font-size:.95rem}
nav.site .links a{color:#d6e9dc; text-decoration:none; padding:4px 2px}
nav.site .links a:hover{color:#fff}
nav.site .links a.here{color:#fff; font-weight:600; border-bottom:2px solid var(--orange)}
.langs{display:flex; gap:6px}
.langs button{
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#f2faf4;
  border-radius:999px; padding:4px 12px; font-size:.85rem; cursor:pointer;
}
.langs button.on{background:#f2faf4; color:var(--teal-deep); font-weight:600}

/* sub-page hero (title strip under the nav) */
.subhero h1{font-size:clamp(1.7rem,4vw,2.5rem); padding-top:10px; letter-spacing:-.02em}
.subhero p{color:#d6e9dc; margin-top:8px; font-size:1.05rem; max-width:44em}

/* ---- landing hero ---- */
.hero{display:flex; gap:36px; align-items:center; padding-top:36px; flex-wrap:wrap}
.hero .txt{flex:1 1 380px}
.hero h1{font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.15; letter-spacing:-.02em}
.hero h1 em{font-style:normal; color:#ffc79b}
.hero p.lead{margin:18px 0 26px; font-size:1.12rem; color:#d6e9dc; max-width:34em}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; text-decoration:none; border-radius:999px; padding:12px 22px;
  font-weight:600; font-size:1rem;
}
.btn.primary{background:var(--orange); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn.ghost{border:1.5px solid rgba(255,255,255,.5); color:#f2faf4}
.hero .art{flex:0 1 340px; min-width:260px}
.hero svg{width:100%; height:auto; display:block}

/* ---- sections ---- */
section{padding:56px 0}
h2{font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.01em; margin-bottom:10px}
.kicker{color:var(--orange); font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em}
.intro p{max-width:44em; font-size:1.08rem; color:var(--ink-soft); margin-top:10px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:28px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px;
}
.card .emoji{font-size:1.7rem}
.card h3{margin:10px 0 6px; font-size:1.08rem}
.card p{color:var(--ink-soft); font-size:.96rem}
a.card{display:block; text-decoration:none; color:inherit}
a.card:hover{border-color:var(--blue)}

.band{background:var(--mint-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band .inner{display:flex; gap:28px; align-items:center; flex-wrap:wrap}
.band .inner > div{flex:1 1 340px}
.band h2 .lock{font-size:1.3em}
.band p{color:var(--ink-soft); max-width:40em; margin-top:8px}

.beta{text-align:center}
.beta .pill{
  display:inline-block; background:var(--mint-soft); border:1px solid var(--line);
  color:var(--ink-soft); border-radius:999px; padding:4px 14px; font-size:.85rem; margin-bottom:14px;
}
.beta p{max-width:38em; margin:10px auto 24px; color:var(--ink-soft)}

/* ---- features page ---- */
.fsec{padding:52px 0}
.fsec.tint{background:var(--mint-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fsec .head{display:flex; gap:32px; align-items:center; flex-wrap:wrap}
.fsec .head .txt{flex:1 1 380px}
.fsec .head .art{flex:0 1 260px; min-width:200px}
.fsec .head .art svg{width:100%; height:auto; display:block}
.fsec .head p{color:var(--ink-soft); max-width:40em; margin-top:8px; font-size:1.04rem}

/* ---- prose pages (privacy) ---- */
main.prose{padding:40px 0 30px}
main.prose h2{font-size:1.25rem; margin:30px 0 8px}
main.prose p, main.prose li{color:var(--ink-soft)}
main.prose ul{padding-left:1.3em; margin-top:6px}
main.prose li{margin:5px 0}
.tldr{background:var(--mint-soft); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:34px}
.tldr strong{display:block; margin-bottom:6px}

/* ---- support page ---- */
.steps{counter-reset:step; margin-top:24px; display:grid; gap:14px}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px 18px 64px; position:relative;
}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:18px; top:18px; width:30px; height:30px;
  background:var(--orange); color:#fff; font-weight:700; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
}
.step h3{font-size:1.02rem; margin-bottom:4px}
.step p{color:var(--ink-soft); font-size:.95rem}

.faq{margin-top:26px; display:grid; gap:10px}
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:0 18px;
}
.faq summary{
  cursor:pointer; font-weight:600; padding:15px 0; list-style:none;
  display:flex; align-items:baseline; gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋"; color:var(--orange); font-weight:700; flex:0 0 auto}
.faq details[open] summary::before{content:"−"}
.faq .a{padding:2px 0 16px; color:var(--ink-soft); font-size:.96rem}
.faq .a p{margin-bottom:8px}
.faq .a p:last-child{margin-bottom:0}
.faq .a code{background:var(--mint-soft); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.88em}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:26px}
.contact-grid .card{text-align:center}
.contact-grid .btn{margin-top:12px; font-size:.95rem; padding:10px 18px}
.btn.solid{background:var(--blue); color:#fff}

/* ---- 404 ---- */
.oops{text-align:center; padding:80px 0}
.oops .big{font-size:4rem}
.oops p{color:var(--ink-soft); margin:12px auto 26px; max-width:34em}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--ink-soft); font-size:.9rem}
footer.site .inner{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
footer.site .spacer{flex:1}
footer.site a{color:var(--ink-soft)}