/* Tutatechno — shared styles for the hub and the privacy pages. */

:root{
  --paper:#F4F6F8;
  --card:#FFFFFF;
  --ink:#101319;
  --ink2:#59616F;
  --ink3:#8B93A2;
  --line:#E0E4EA;
  --accent:#2438C8;
  --signal:#0E6F57;
  --amber:#9A5B00;
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D0F14; --card:#151921; --ink:#EDEFF3; --ink2:#A0A8B6; --ink3:#6E7787;
    --line:#252B36; --accent:#8C9BFF; --signal:#4FC7A3; --amber:#E2A44F;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
code{font-family:var(--mono);font-size:.86em;background:var(--card);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px}
strong{font-weight:500;color:var(--ink)}

/* ---------- masthead ---------- */
.masthead{padding:64px 0 44px}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 22px;
}
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.eyebrow a:hover{color:var(--ink2)}
h1{
  font-family:var(--display);font-weight:800;font-size:clamp(40px,8vw,72px);
  letter-spacing:-.035em;line-height:.98;margin:0 0 18px;
}
.masthead.doc h1{font-size:clamp(32px,6vw,48px)}
.tagline{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--ink3);margin:0}
.legal-lead{color:var(--ink2);margin:0;max-width:64ch}
.sep{color:var(--ink3);padding:0 9px}

/* ---------- bands ---------- */
.band{border-top:1px solid var(--line);padding:44px 0}
.band-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 24px;
}

/* ---------- app cards (hub) ---------- */
.apps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.app{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.app-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.app-name{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.015em}
.status{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;border:1px solid var(--line);color:var(--ink3);
}
.status.dev{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.app-desc{color:var(--ink2);margin:0 0 14px;font-size:16px}
.app-links{font-family:var(--mono);font-size:12.5px;margin:0}
.app-links a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.app-links a:hover{border-bottom-color:var(--accent)}


/* ---------- record / definition rows ---------- */
.record{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 24px}
dl{margin:0}
.row{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.row:last-child{border-bottom:0}
.row dt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);flex:0 0 152px;padding-top:3px;margin:0;
}
.row dd{margin:0;flex:1 1 240px}
.fineprint{font-size:14px;color:var(--ink3);margin:16px 0 18px;max-width:62ch}

/* ---------- policy document ---------- */
.doc-body h2{
  font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.02em;
  margin:46px 0 12px;padding-top:26px;border-top:1px solid var(--line);
}
.doc-body h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.doc-body p{margin:0 0 15px;color:var(--ink2)}
.doc-body ul{margin:0 0 15px;padding-left:22px;color:var(--ink2)}
.doc-body li{margin-bottom:7px}
table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
th{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);font-weight:400;
}

footer{
  border-top:1px solid var(--line);margin-top:12px;padding:28px 0 56px;
  font-family:var(--mono);font-size:12px;color:var(--ink3);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--ink2)}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .fade{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
  .fade:nth-child(1){animation-delay:.02s}
  .fade:nth-child(2){animation-delay:.08s}
  .fade:nth-child(3){animation-delay:.14s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}