/* ─────────────────────────────────────────────────────────────
   Shared styling for the legal pages (/privacy, /terms,
   /delete-account, /support).

   Deliberately a separate stylesheet rather than the inline
   <style> block landing.html uses: four pages sharing one set of
   rules must not mean four copies of it, and these pages are
   plain documents with no animation or scroll behaviour to
   inherit. Variables are copied from the landing page so the
   pages are unmistakably the same site.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:      #F6F9FF;
  --ink:        #0E1B33;
  --ink-soft:   #55637F;
  --magic:      #0B5FE3;
  --magic-deep: #0038D3;
  --magic-soft: #E4EEFF;
  --marker:     #FDC302;
  --line:       #D9E4F8;
  --radius:     18px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 20px}

/* ── Header ───────────────────────────────────────────────── */
header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:64px;
}
.brand{
  font-family:Fredoka,Nunito,sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.brand .mark{font-size:22px}
.btn{
  display:inline-block;
  background:var(--magic);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:15px;
  padding:9px 18px;
  border-radius:999px;
  white-space:nowrap;
}
.btn:hover{background:var(--magic-deep)}

/* ── Document body ────────────────────────────────────────── */
main{padding:40px 0 64px}

h1{
  font-family:Fredoka,Nunito,sans-serif;
  font-size:34px;
  line-height:1.2;
  margin:0 0 6px;
}
.updated{
  color:var(--ink-soft);
  font-size:15px;
  margin:0 0 32px;
}
h2{
  font-family:Fredoka,Nunito,sans-serif;
  font-size:22px;
  margin:38px 0 10px;
  padding-top:6px;
}
h3{font-size:18px;margin:26px 0 6px}
p,li{color:var(--ink)}
ul,ol{padding-left:22px}
li{margin:6px 0}
a{color:var(--magic)}
strong{font-weight:800}

/* A short summary panel at the top of the longer documents. The
   plain-language version is the one most people will actually
   read, so it is given real visual weight rather than hidden at
   the bottom. */
.summary{
  background:var(--magic-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 22px;
  margin:0 0 34px;
}
.summary p:first-child{margin-top:0}
.summary p:last-child{margin-bottom:0}

/* Used for the "we never store your photos" point, which is the
   single most reassuring fact about this service and deserves to
   be impossible to miss. */
.highlight{
  background:#FFF9E3;
  border:1px solid var(--marker);
  border-radius:var(--radius);
  padding:18px 22px;
  margin:24px 0;
}
.highlight p:first-child{margin-top:0}
.highlight p:last-child{margin-bottom:0}

table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0;
  font-size:15.5px;
}
th,td{
  text-align:left;
  vertical-align:top;
  padding:10px 12px;
  border:1px solid var(--line);
}
th{background:#fff;font-weight:800}

/* Numbered steps on the account-deletion page. */
.steps{counter-reset:step;list-style:none;padding:0}
.steps li{
  counter-increment:step;
  position:relative;
  padding-left:44px;
  margin:16px 0;
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:1px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--magic);
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}

/* ── Footer ───────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line);
  background:#fff;
  padding:24px 0;
  font-size:15px;
  color:var(--ink-soft);
}
.fbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--magic);text-decoration:underline}

@media(max-width:560px){
  body{font-size:16px}
  h1{font-size:28px}
  h2{font-size:20px}
  .wrap{padding:0 16px}
  table{font-size:14.5px}
  th,td{padding:8px 9px}
}