/* ============================================================
   STEEZEWEB · shared styles for the document pages
   (privacy, terms, faq, 404). index.html keeps its own inline
   stylesheet; these pages are plain documents and only need the
   chrome, the type scale and the footer.
   Tokens are duplicated from index.html deliberately: changing a
   brand colour means changing it in both places.
   ============================================================ */

:root{
  --ground:#f4f3f0;
  --card:#ffffff;
  --ink:#1c2b3a;
  --pink:#ff9ecb;
  --green:#b7e892;
  --blue:#3f7fd1;            /* decorative: focus rings, accents */
  --blue-ink:#3169b7;        /* text-on-light: 5.48:1 on white, 4.93:1 on the ground */
  --hair:rgba(28,43,58,.14);
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
  --gutter:clamp(18px,4vw,44px);
  --nav-h:82px;              /* pill height plus the 12px it floats by */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;color:var(--ink);background:var(--ground);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  background-image:radial-gradient(rgba(28,43,58,.13) 1px,transparent 1.1px);
  background-size:19px 19px;
}
/* the same paper grain the home page carries */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='190' height='190' filter='url(%23n)' opacity='0.5'/></svg>");
}
a{color:inherit;text-decoration:none}
::selection{background:var(--pink);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;font-size:14px}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative}
.m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5d6670}   /* ink3, not 55% ink: 11px mono at .55 is 3.29:1 */
.dim{color:rgba(28,43,58,.62)}

/* ---------- NAV PILL ---------- */
/* The same floating pill index.html carries, rebuilt in plain CSS so these
   documents wear the site's chrome rather than the old menu bar. It does not
   condense on scroll -- there is no hero here to clear -- so it renders in
   the compact state from the start. */
.nav{position:fixed;inset-inline:0;top:0;z-index:80;display:flex;justify-content:center;padding:12px 12px 0}
.nav-pill{position:relative;display:flex;width:100%;max-width:var(--wrap);align-items:center;gap:16px;
  border:1px solid rgba(28,43,58,.2);border-radius:999px;background:rgba(255,255,255,.82);
  padding:8px 12px;backdrop-filter:blur(8px);
  box-shadow:0 18px 44px -22px rgba(28,43,58,.42),0 2px 0 rgba(28,43,58,.06)}

.nav-mark{display:flex;flex-shrink:0;align-items:center;gap:8px;padding-left:8px;color:var(--ink)}
.nav-mark i{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);
  border-radius:6px;background:var(--pink);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-mark i b{display:block;width:7px;height:7px;border-radius:1px;background:var(--ink)}
.nav-mark:hover i{transform:rotate(-9deg)}
.nav-mark span{font-size:15px;font-weight:600;letter-spacing:-.02em}

.nav-links{display:none;flex:1;align-items:center;gap:4px}
.nav-link{display:inline-flex;align-items:center;min-height:24px;border-radius:999px;padding:7px 12px;
  font-size:13.5px;font-weight:500;color:#59636d;transition:background-color .15s ease,color .15s ease}
.nav-link:hover{background:rgba(28,43,58,.06);color:var(--ink)}
.nav-link[aria-current="page"]{background:rgba(28,43,58,.07);color:var(--ink)}

.nav-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-stamp{display:none}
/* Specific enough to beat .btn, which is declared later in this file. */
.nav-pill .nav-cta{padding:9px 20px;font-size:13.5px;gap:0}

.nav-burger{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--card);cursor:pointer;padding:0}
.nav-burger span{position:relative;display:block;width:16px;height:11px}
.nav-burger i{position:absolute;left:0;display:block;width:100%;height:1.5px;border-radius:999px;
  background:var(--ink);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav-burger i:nth-child(1){top:0}
.nav-burger i:nth-child(2){top:5px}
.nav-burger i:nth-child(3){top:10px}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){transform:scaleX(0)}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.nav-panel{position:absolute;inset-inline:12px;top:calc(100% + 6px);display:none;overflow:hidden;
  border:1px solid rgba(28,43,58,.2);border-radius:20px;background:var(--card);
  box-shadow:0 18px 44px -22px rgba(28,43,58,.42)}
.nav-panel.is-open{display:block}
.nav-panel-link,.nav-panel a{display:block;border-bottom:1px solid var(--hair);padding:16px 24px;font-size:15px;font-weight:500}
.nav-panel a:last-child{border-bottom:0;color:#5d6670}
.nav-panel-link[aria-current="page"]{color:var(--ink);background:rgba(28,43,58,.05)}
.nav-panel a:active{background:rgba(28,43,58,.06)}

/* Read progress. A privacy policy is a long scroll and the hairline is the
   one honest signal of how much is left. */
.nav-progress{position:absolute;inset-inline:16px;bottom:3px;height:1px;overflow:hidden;border-radius:999px;
  background:rgba(28,43,58,.1);pointer-events:none}
.nav-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:var(--pink)}

@media (min-width:768px){
  .nav-links{display:flex}
  .nav-end{margin-left:0;gap:12px}
  .nav-burger{display:none}
  .nav-panel{display:none!important}
}
@media (min-width:1024px){
  .nav-stamp{display:inline;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:#5d6670}
}

/* ---------- WINDOW FRAME ---------- */
.win{background:var(--card);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 60px rgba(28,43,58,.16),0 3px 10px rgba(28,43,58,.07)}
.win-bar{height:34px;background:#eceae5;border-bottom:1px solid var(--hair);display:flex;
  align-items:center;gap:6px;padding:0 12px}
.win-bar i{width:9px;height:9px;border-radius:50%;display:block}
.win-bar i:nth-child(1){background:#f4867e}
.win-bar i:nth-child(2){background:#f5c451}
.win-bar i:nth-child(3){background:#8fd08a}
.win-bar span{margin:0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#5d6670}   /* ink3, not 55% ink: 11px mono at .55 is 3.29:1 */

/* ---------- DOCUMENT ---------- */
.doc{padding:calc(var(--nav-h) + clamp(24px,4vw,56px)) 0 clamp(50px,7vw,90px)}
.doc .win-body{padding:clamp(26px,4.5vw,60px)}
.doc h1{font-weight:600;letter-spacing:-.04em;line-height:1.03;margin:10px 0 0;
  font-size:clamp(2rem,5vw,3.4rem);text-wrap:balance}
.doc .standfirst{margin:16px 0 0;font-size:clamp(15.5px,1.4vw,18px);color:rgba(28,43,58,.75);max-width:62ch}
.doc .updated{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.doc h2{font-weight:600;letter-spacing:-.025em;line-height:1.15;font-size:clamp(1.25rem,2.4vw,1.7rem);
  margin:38px 0 0;max-width:34ch;text-wrap:balance}
.doc h3{font-weight:600;font-size:17px;margin:26px 0 0;letter-spacing:-.015em}
.doc p{margin:12px 0 0;max-width:70ch;color:rgba(28,43,58,.82)}
.doc ul{margin:12px 0 0;padding-left:22px;max-width:70ch;color:rgba(28,43,58,.82)}
.doc li{margin:7px 0}
.doc li::marker{color:var(--pink)}
.doc strong{font-weight:600;color:var(--ink)}
.doc a:not(.btn){color:var(--blue-ink);border-bottom:1.5px solid rgba(49,105,183,.45)}
.doc a:not(.btn):hover{border-bottom-color:var(--blue-ink)}

/* a callout for the things a reader most needs to notice */
.doc .note-box{margin-top:22px;padding:16px 18px;border:1.5px solid var(--hair);border-radius:12px;
  background:var(--ground)}
.doc .note-box p{margin:0;max-width:none}
.doc .note-box p + p{margin-top:9px}

/* ---------- FAQ ---------- */
.faq{margin-top:30px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-weight:600;font-size:clamp(16px,1.7vw,18.5px);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);
  translate:0 -60%;rotate:45deg;transition:rotate .2s ease}
.faq details[open] summary::after{rotate:-135deg}
.faq summary:hover{color:var(--blue-ink)}
.faq .answer{padding:0 0 20px}
.faq .answer p:first-child{margin-top:0}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:999px;background:var(--pink);color:var(--ink);border:1.5px solid var(--ink);
  box-shadow:0 4px 0 var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn-ghost{background:var(--card)}
.btn-lg{font-size:clamp(15px,1.4vw,17px);padding:16px 32px}

/* ---------- 404 ---------- */
.lost{text-align:center;padding:calc(var(--nav-h) + clamp(30px,6vw,80px)) 0 clamp(50px,9vw,110px)}
.lost h1{font-size:clamp(2.6rem,8vw,5.4rem);font-weight:600;letter-spacing:-.045em;line-height:.98;margin:14px 0 0}
.lost .pinkw{color:var(--pink);-webkit-text-stroke:1.5px var(--ink)}
.lost p{margin:18px auto 0;max-width:48ch;color:rgba(28,43,58,.75)}
.lost .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.lost .win{max-width:520px;margin:clamp(34px,5vw,54px) auto 0}
.lost .win-body{padding:34px 26px;background:#eceae5}
.lost .filerow{display:flex;align-items:center;gap:12px;justify-content:center;font-family:var(--mono);
  font-size:12px;color:rgba(28,43,58,.6)}

/* ---------- FOOTER ---------- */
.sky{margin-top:clamp(40px,6vw,80px);position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#1d4f96 0%,#2a67ac 52%,#3576ba 100%);
  padding:clamp(44px,6vw,74px) 0 0}
.sky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.1px);background-size:6px 6px}
.sky .inner{position:relative;z-index:3;padding:0 var(--gutter)}
.sky h2{font-weight:600;letter-spacing:-.035em;font-size:clamp(1.6rem,4vw,2.6rem);color:#fff;
  margin:12px 0 0;line-height:1.05}
.sky p{margin:12px auto 0;max-width:46ch;color:#fff}
/* Solid, not dimmed: 10px mono at 75% white sits near 3.6:1 on the pale end
   of the sky gradient, under the 4.5 small text needs. */
.sky .m{color:#fff}
.sky .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.sky .btn-ghost{background:rgba(255,255,255,.94)}
.skyfoot{position:relative;z-index:3;margin-top:clamp(36px,5vw,60px);display:flex;flex-wrap:wrap;gap:10px 22px;
  align-items:center;justify-content:center;padding:16px var(--gutter);
  border-top:1px solid rgba(255,255,255,.25)}
.skyfoot a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);
  display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
.skyfoot a:hover{color:#fff;border-bottom-color:#fff}
.skyfoot a[aria-current="page"]{color:#fff;border-bottom-color:#fff}

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