/* =====================================================================
   TAG AND TAP - marketing and legal pages
   Loads on top of public.css, which owns the fonts and colour tokens.
   ===================================================================== */

body.doc{
  background:var(--paper); color:var(--ink); text-align:left;
  display:flex; flex-direction:column; min-height:100vh;
}

/* --- header ---------------------------------------------------------- */
.site-hd{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:860px; width:100%; margin:0 auto;
  padding:22px 22px 18px; border-bottom:1px solid var(--line);
}
.site-brand{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--f-mn); font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.site-brand i{width:6px;height:6px;border-radius:50%;background:var(--signal);display:block}
.site-nav{display:flex;gap:18px}
.site-nav a{
  font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
}
.site-nav a:hover{color:var(--ink)}

/* --- document body --------------------------------------------------- */
.doc-wrap{
  max-width:720px; width:100%; margin:0 auto; flex:1;
  padding:44px 22px 60px; text-align:left;
}

.doc-wrap h1{
  font-family:var(--f-ui); font-weight:800; font-size:clamp(30px,6vw,42px);
  letter-spacing:-.04em; line-height:1.04; margin:0 0 10px; text-wrap:balance;
}
.doc-wrap .updated{
  font-family:var(--f-mn); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 34px; padding-bottom:22px; border-bottom:1px solid var(--line);
}
.doc-wrap h2{
  font-family:var(--f-ui); font-weight:700; font-size:20px;
  letter-spacing:-.028em; margin:38px 0 10px; scroll-margin-top:20px;
}
.doc-wrap h3{
  font-family:var(--f-ui); font-weight:600; font-size:15.5px;
  letter-spacing:-.01em; margin:24px 0 6px;
}
.doc-wrap p,.doc-wrap li{font-size:15.5px; line-height:1.62; color:var(--ink-2)}
.doc-wrap p{margin:0 0 13px}
.doc-wrap b,.doc-wrap strong{color:var(--ink); font-weight:600}
.doc-wrap ul{margin:0 0 15px; padding-left:20px}
.doc-wrap li{margin-bottom:7px}
.doc-wrap a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

.lede-big{font-size:17.5px !important; color:var(--ink) !important; margin-bottom:20px !important}

/* Callout — used for the things a reviewer or a worried owner
   most needs to see. Signal orange earns its place here. */
.note{
  border-left:3px solid var(--signal); background:var(--card);
  border-radius:0 var(--r-card) var(--r-card) 0;
  padding:15px 18px; margin:20px 0;
}
.note p{margin:0; color:var(--ink)}
.note p + p{margin-top:9px}

/* Data table for the privacy disclosures */
.tbl-scroll{overflow-x:auto; margin:18px 0 22px; -webkit-overflow-scrolling:touch}
table.data{
  border-collapse:collapse; width:100%; min-width:520px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; font-size:14px;
}
table.data th{
  text-align:left; font-family:var(--f-mn); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:bottom;
}
table.data td{
  padding:13px 14px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top; line-height:1.5;
}
table.data tr:last-child td{border-bottom:0}
table.data td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}

/* --- footer ---------------------------------------------------------- */
.site-ft{
  border-top:1px solid var(--line); padding:28px 22px 40px;
  max-width:720px; width:100%; margin:0 auto;
}
.site-ft p{margin:0 0 9px; font-size:13.5px; color:var(--ink-2)}
.site-ft b{color:var(--ink)}
.ft-links a{color:var(--ink-2); text-decoration:none}
.ft-links a:hover{text-decoration:underline}
.ft-small{
  font-family:var(--f-mn); font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-top:14px !important;
}

/* --- forms (support, password reset) --------------------------------- */
.form-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:22px; margin-top:8px;
}
.field{margin-bottom:16px}
.field label{
  display:block; font-family:var(--f-mn); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.field input,.field textarea{
  width:100%; font-family:var(--f-ui); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  padding:13px 14px; -webkit-appearance:none;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.5}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(16,19,23,.07);
}
.field .err{color:#C22A17; font-size:13px; margin-top:6px; font-weight:500}

.msg{padding:14px 16px; border-radius:11px; margin-bottom:18px; font-size:14.5px; font-weight:500}
.msg.ok{background:#E8F6EE; color:#155E3B; border:1px solid #BFE3CE}
.msg.bad{background:#FCEBE8; color:#8E2417; border:1px solid #F3C8C0}

.doc-wrap .btn{max-width:none}

@media (max-width:520px){
  .site-nav{gap:14px}
  .site-nav a{font-size:12.5px}
  .doc-wrap{padding:32px 18px 48px}
}