/* Shared styles for the Yumloop text pages (privacy, support).
   Same visual language as the landing page: flat, square, solid blue and white. */

:root{
  --blue:#140FD7;
  --ink:#06062B;
  --paper:#FFFFFF;
  --line:#D6D7E4;
  --muted:#565877;
  --rule-blue:rgba(255,255,255,.26);
  --pad:clamp(20px,3.6vw,56px);
  --sans:Archivo,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05; text-wrap:balance}

.wrap{width:100%; max-width:1560px; margin:0 auto; padding:0 var(--pad)}
.col{max-width:70ch}

.skip{position:absolute; left:-9999px; top:0; z-index:99; background:#fff; color:var(--blue); padding:12px 18px; font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}

.lab{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase}

/* masthead */
.top{background:var(--blue); color:#fff; border-bottom:1px solid var(--rule-blue)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px}
.top a{text-decoration:none}
.top img{height:52px; width:auto}  /* v3 logo is the stacked lockup: it needs real height, not a wordmark's 15px */
.top .back{color:rgba(255,255,255,.72); font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase}
.top .back:hover{color:#fff}

/* head block */
.head{padding:clamp(48px,6vw,84px) 0 clamp(30px,3vw,44px); border-bottom:1px solid var(--ink)}
.head .lab{color:var(--blue); display:block; margin-bottom:16px}
.head h1{font-size:clamp(38px,6vw,74px)}
.head .stamp{margin:22px 0 0; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.06em}

/* body */
main{padding-bottom:clamp(56px,7vw,96px)}
section{padding:clamp(30px,3.4vw,44px) 0; border-bottom:1px solid var(--line)}
section h2{font-size:clamp(21px,2.1vw,26px); margin-bottom:14px; letter-spacing:-.02em}
section p{margin:0 0 16px; color:var(--ink)}
section p:last-child{margin-bottom:0}
section ul{margin:0 0 16px; padding-left:0; list-style:none}
section li{position:relative; padding-left:26px; margin-bottom:12px}
section li::before{content:""; position:absolute; left:0; top:11px; width:12px; height:1px; background:var(--blue)}
section li:last-child{margin-bottom:0}
section a{color:var(--blue); text-decoration:none; border-bottom:1px solid var(--line)}
section a:hover{border-bottom-color:var(--blue)}
strong{font-weight:600}

/* definition rows */
.rows{border-top:1px solid var(--ink); margin:4px 0 0}
.rows > div{
  display:grid; grid-template-columns:clamp(120px,15vw,190px) minmax(0,1fr);
  gap:0 28px; padding:18px 0; border-bottom:1px solid var(--line);
}
.rows .lab{color:var(--muted); padding-top:4px}
.rows p{margin:0}
@media (max-width:680px){
  .rows > div{grid-template-columns:1fr; gap:8px 0}
}

/* mail callout */
.mail{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 20px;
  margin-top:clamp(34px,4vw,48px); padding:26px 0 0; border-top:1px solid var(--ink);
}
.mail .lab{color:var(--muted)}
.mail a{
  font-size:clamp(22px,3vw,34px); font-weight:800; letter-spacing:-.03em;
  text-decoration:none; color:var(--blue); line-height:1;
}
.mail a:hover{text-decoration:underline; text-underline-offset:6px}

.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:15.5px; padding:15px 26px;
  border:1px solid var(--blue); background:var(--blue); color:#fff;
  transition:background .15s linear, color .15s linear;
}
.btn:hover{background:var(--ink); border-color:var(--ink)}

/* footer */
footer{background:var(--ink); color:rgba(255,255,255,.62); padding:32px 0; font-size:14px}
.foot{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between}
footer img{height:34px; width:auto; opacity:.85}
footer a{color:rgba(255,255,255,.62); text-decoration:none}
footer a:hover{color:#fff}
.foot nav{display:flex; gap:24px; flex-wrap:wrap}