/* Mudroom legal pages — privacy, SMS terms, text message consent.

   Deliberately the same visual language as the landing page in index.html: same
   Gabarito/Schibsted Grotesk/DM Mono stack, same paper-and-moss palette, same 12px
   card radius and pill tags. These pages are filed with Twilio and read by people
   deciding whether to trust the thing, so they should not look like a different
   product from the one they arrived from.

   Single-theme, light only, for the same reason index.html is: every colour is painted
   explicitly so the page looks identical on every host ground. Do not add a dark
   variant here unless the landing page gets one too.

   The measure is narrower than the landing page's shell — this is long-form prose,
   not a marketing layout — but the furniture around it is identical. */
:root{
  --paper:#FFFDF9; --card:#FFFFFF; --ink:#1E2A24; --slate:#63726B;
  --moss:#1F6B57; --moss-ink:#175243; --clay:#D97B2E;
  --line:#E8E4D9; --line-soft:#F0EDE4; --wash:#EAF2ED;
  --display:"Gabarito",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--moss-ink)}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:3px}

.page{max-width:44rem;margin:0 auto;padding:0 1.5rem 5rem}

/* ---------- nav: the landing page's bar, same mark, same pill ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0}
.mark{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;
      color:var(--moss-ink);display:inline-flex;align-items:center;gap:.52rem;text-decoration:none}
.mark svg{width:30px;height:30px;flex:none}
.nav-cta{
  font-family:var(--body);font-weight:600;font-size:.875rem;
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;
  background:var(--card);color:var(--ink);text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.nav-cta:hover{background:var(--wash);border-color:var(--moss)}

/* ---------- masthead ---------- */
header.masthead{border-bottom:1px solid var(--line-soft);padding:2.5rem 0 2rem;margin-bottom:2.5rem}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,2.9rem);line-height:1.06;letter-spacing:-.033em;
  margin:0 0 .85rem;text-wrap:balance;
}
.updated{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss-ink);background:var(--wash);border:1px solid var(--line);
  border-radius:999px;padding:.28rem .7rem;display:inline-block;margin:0;
}

/* ---------- type ---------- */
h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.6rem);line-height:1.14;letter-spacing:-.024em;
  margin:2.75rem 0 .7rem;text-wrap:balance;
}
h3{font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;margin:0 0 .35rem}
p,li{text-wrap:pretty}
p{margin:0 0 1rem;color:var(--slate)}
.lede{font-size:1.125rem;color:var(--slate);margin-bottom:1.25rem}
b,strong{font-weight:600;color:var(--ink)}

ul{margin:0 0 1rem;padding-left:0;list-style:none}
li{position:relative;padding-left:1.25rem;margin-bottom:.6rem;color:var(--slate)}
li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--moss)}

kbd{
  font-family:var(--mono);font-size:.8125em;font-weight:500;
  background:var(--wash);color:var(--moss-ink);
  border:1px solid var(--line);padding:.1em .45em;border-radius:5px;
}

/* ---------- boxes: the landing page's card, same radius and ground ---------- */
.key,.record{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.25rem 1.375rem;margin:0 0 1.25rem;
}
.key p:last-child,.record p:last-child,.record p.last{margin-bottom:0}
.record{margin:1.5rem 0}
.record h3{margin:0 0 .9rem;color:var(--ink)}
.record p{font-size:.9375rem;margin:0 0 .9rem}

/* ---------- footer: matches .foot on the landing page ---------- */
footer{
  border-top:1px solid var(--line-soft);margin-top:3.5rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-family:var(--mono);font-size:.75rem;color:var(--slate);
}
footer a{color:var(--slate)}
.fmark{display:inline-flex;align-items:center;gap:.36rem;color:var(--moss-ink)}
.fmark svg{width:16px;height:16px;flex:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}