/* The wystapp.org pages (index.html, how-it-works.html, legal/*.html). The colours are the app's own
   (Frontend/lib/Utilities/sign_up_style.dart): the pale lavender page in light mode, the near-black
   plum in dark mode, following the visitor's phone or computer setting. Each page fits on one
   screen, with the footer at the bottom. */
:root{
  color-scheme:light;
  --bg:#f6f2fb;
  --surface:#fff;
  --ink:#231433;
  --muted:#65577a;
  --line:#d5cce3;
  --accent:#8444c2;
  --accent-text:#5d2d8a;
  --wash:rgba(132,68,194,.14);
  --bezel:#231433;
  --badge-bg:#231433;
  --badge-ink:#fff;
  --shadow:0 30px 60px -30px rgba(70,20,120,.35);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0f0b16;
    --surface:#1d1727;
    --ink:#fff;
    --muted:#c4bbd3;
    --line:#3a3150;
    --accent-text:#d1bae8;
    --wash:rgba(132,68,194,.28);
    --bezel:#2a2236;
    --badge-bg:#1d1727;
    --badge-ink:#fff;
    --shadow:0 30px 60px -30px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Soft purple washes in two corners, as on the admin console's sign-in. */
  background:
    radial-gradient(1000px 600px at 85% 110%,var(--wash),transparent 60%),
    radial-gradient(800px 500px at 0% -10%,var(--wash),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* The Wyst logo, large and faint behind every page; it stays put while the page scrolls. */
body::before{
  content:"";position:fixed;z-index:0;pointer-events:none;
  width:min(900px,120vw);aspect-ratio:453/486;
  right:-14%;bottom:-26%;
  background:url(/images/logo.png) center/contain no-repeat;
  opacity:.07;transform:rotate(-12deg);
}
@media (prefers-color-scheme:dark){body::before{opacity:.09}}
header,main,footer{position:relative;z-index:1}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 32px}

/* Header */
header{padding:20px 0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:10px}
nav{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
nav a{text-decoration:none;color:var(--muted);padding:10px 14px;border-radius:999px}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);background:var(--wash)}
nav a.cta{background:var(--accent);color:#fff;margin-left:6px}
nav a.cta:hover{background:#6f37a6;color:#fff}

/* The page's one screen */
main{flex:1;display:flex;align-items:center;padding:8px 0 24px}

.eyebrow{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wash);color:var(--accent-text);
  font-size:13px;font-weight:700;
  padding:7px 14px;border-radius:999px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.kicker{color:var(--accent-text);font-size:14px;font-weight:700}
.accent{color:var(--accent)}
@media (prefers-color-scheme:dark){.accent{color:#b893dc}}

/* Home */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1{
  font-size:clamp(42px,5.4vw,68px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
}
.lede{font-size:19px;color:var(--muted);max-width:46ch}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:14px;
  background:var(--badge-bg);color:var(--badge-ink);
  border:1px solid var(--line);
}
.store small{display:block;font-size:11px;opacity:.8;line-height:1.2}
.store span{font-weight:650;font-size:15px;line-height:1.2}

.hero-art{position:relative;display:flex;justify-content:center}
.phone{
  position:relative;
  /* As tall as the screen allows, so the page never needs scrolling. */
  height:clamp(380px,calc(100dvh - 190px),660px);
  aspect-ratio:1080/2316;
  background:var(--bezel);
  border-radius:44px;
  padding:9px;
  box-shadow:var(--shadow);
}
/* The screen: a strip of the app's own background above the screenshot (its status bar is cropped
   off), so the rounded corners never cut into the app's header. */
.phone picture{display:block;height:100%;padding-top:7%;border-radius:36px;overflow:hidden;background:var(--bg)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.tag{
  position:absolute;z-index:1;white-space:nowrap;
  font-size:14px;font-weight:700;
  padding:8px 16px;border-radius:999px;
  background:var(--surface);color:var(--accent-text);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.tag.t1{right:calc(100% - 12px);top:20%;transform:rotate(-6deg);background:var(--accent);color:#fff;border-color:transparent}
.tag.t2{left:calc(100% - 12px);top:44%;transform:rotate(5deg)}
.tag.t3{right:calc(100% - 12px);bottom:22%;transform:rotate(3deg)}

/* How it works */
.how{display:flex;flex-direction:column;gap:40px}
.how-head{display:flex;flex-direction:column;gap:12px;max-width:760px}
.how h1{font-size:clamp(34px,4.2vw,52px);line-height:1.05;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.how-head p{font-size:18px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;
}
.step h2{font-size:17px;margin:2px 0 4px}
.step p{font-size:15px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px}
.card .icon{
  width:44px;height:44px;border-radius:13px;
  background:var(--wash);color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.card h3{font-size:17px;margin-bottom:6px}
.card p{font-size:14px;color:var(--muted)}

/* Legal pages (legal/privacy.html, legal/terms.html): long documents, so they scroll like a normal
   page instead of fitting on one screen, on a card in the page's colours. */
main.legal{display:block;padding:8px 14px 48px}
.doc{
  max-width:780px;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:40px 44px;
  line-height:1.65;
  overflow-wrap:break-word;
}
.doc h1{font-size:clamp(30px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-bottom:6px}
.doc .meta{color:var(--muted);font-size:14px;margin-bottom:28px}
.doc h2{font-size:20px;letter-spacing:-.01em;margin:36px 0 10px;color:var(--accent-text)}
.doc p,.doc ul{margin:0 0 14px}
.doc ul{padding-left:22px}
.doc li{margin-bottom:6px}
.doc a{color:var(--accent-text)}
.doc .table{overflow-x:auto;margin:10px 0 18px}
.doc table{border-collapse:collapse;width:100%}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.doc th{color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.doc .other{margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}

/* Footer */
footer{border-top:1px solid var(--line);padding:18px 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer .links{display:flex;align-items:center;gap:20px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
footer .social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--wash);color:var(--accent-text)}

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{gap:20px}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  header{padding:14px 0}
  .brand span{display:none}
  nav{gap:2px;font-size:14px}
  nav a{padding:9px 11px}
  nav a.cta{margin-left:2px}
  main{align-items:flex-start;padding-top:12px}
  .hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-copy{text-align:center;align-items:center}
  .eyebrow{align-self:center;justify-content:center;text-align:center;font-size:12px}
  .lede{font-size:17px}
  .stores{justify-content:center}
  .phone{height:min(520px,72dvh)}
  .tag{display:none}
  .how{gap:28px}
  .steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .card{padding:18px}
  footer .wrap{justify-content:center;text-align:center}
  .doc{padding:26px 20px;border-radius:18px}
  .doc th,.doc td{padding:8px 6px;font-size:14px}
}
@media (max-width:420px){
  .cards{grid-template-columns:1fr}
}

/* Short laptop screens: tighten so the footer still fits without scrolling. */
@media (min-width:761px) and (max-height:780px){
  header{padding:14px 0}
  main{padding:0 0 16px}
  .how{gap:28px}
  .how-head{gap:8px}
  .card{padding:18px}
  .card .icon{margin-bottom:12px}
}