/* sections/privacy.html (#privacy): Security & Privacy. A dark band in both themes (.scheme-dark sets dark tokens).
   Header, a data-flow diagram (.priv-flow: Mac -> Noty server -> providers), six plain statements, the pledge. */
.privacy{background:radial-gradient(60% 50% at 18% 0%,rgba(53,99,244,.22),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(53,99,244,.10),transparent 70%),var(--night);
  border-block:1px solid var(--line);overflow:hidden}
.priv-head{margin-bottom:var(--space-8)}
.priv-head h2{font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem)}

/* ---- data flow ---- */
.priv-flow{--pf-dot:rgba(255,255,255,.07);position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;margin:0;
  padding:clamp(16px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-2xl);
  background:radial-gradient(circle,var(--pf-dot) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.pf-node{position:relative;padding:20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-2)}
.pf-head{display:flex;align-items:center;gap:12px}
.pf-name{font:700 var(--fs-body)/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.pf-badge{margin-left:auto}
.pf-mac{border-color:color-mix(in srgb,var(--ok) 34%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 7%,transparent),var(--shadow-3)}
.pf-items{list-style:none;display:grid;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.pf-items li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-xs);line-height:1.45;color:var(--ink-3)}
.pf-items b{display:block;color:var(--ink);font-size:var(--fs-s);font-weight:600}
.pf-i{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:1px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2)}
.pf-i svg{width:15px;height:15px}
.pf-hop p{margin-top:12px;font-size:var(--fs-s);line-height:1.5;color:var(--ink-2)}

/* connectors: vertical on phones and tablets, horizontal from 1024px */
.pf-link{position:relative;display:flex;align-items:center;justify-content:center;min-height:76px}
.pf-link::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);transform:translateX(-50%)}
.pf-link::after{content:"";position:absolute;left:50%;bottom:2px;width:9px;height:9px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateX(-50%) rotate(45deg)}
.pf-tag{position:relative;max-width:100%;padding:5px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--night);
  color:var(--ink-2);font-size:var(--fs-micro);font-weight:600;line-height:1.35;text-align:center}
@media (min-width:640px) and (max-width:1279.98px){
  .pf-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .priv-flow{grid-template-columns:minmax(0,1.4fr) minmax(108px,.52fr) minmax(0,1fr) minmax(108px,.52fr) minmax(0,1fr)}
  .pf-link{min-height:0;align-self:stretch}
  .pf-link::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:0;border-left:0;border-top:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);transform:none}
  .pf-link::after{left:auto;right:3px;top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}
  .pf-tag{position:absolute;left:6px;right:10px;bottom:calc(50% + 10px);padding:0;border:0;background:none;color:var(--ink-3);font-weight:600}
}

/* ---- six statements: hairline grid, no boxes ---- */
.priv-grid{display:grid;gap:var(--space-6) clamp(32px,4vw,56px);margin-top:var(--space-9);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.priv-grid{row-gap:var(--space-7);grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.priv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.priv{padding-top:var(--space-5);border-top:1px solid var(--line-2)}
.priv-icon{display:block;width:26px;height:26px;color:var(--accent)}
.priv-icon svg{width:26px;height:26px}
.priv h3{margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-h4);line-height:1.35;letter-spacing:-.01em}
.priv p{max-width:36ch;font-size:var(--fs-s);line-height:1.6;color:var(--ink-2)}

/* ---- the pledge + links ---- */
.priv-foot{display:grid;gap:var(--space-6);align-items:end;margin-top:var(--space-9);padding-top:var(--space-7);border-top:1px solid var(--line)}
@media (min-width:1280px){.priv-foot{grid-template-columns:minmax(0,1fr) auto}}
.priv-pledge{font:800 clamp(1.6rem,1.2rem + 1.6vw,2.5rem)/1.12 var(--font-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.priv-pledge-ai{display:block;color:var(--accent)}
.priv-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5)}
.priv-links .btn svg{width:16px;height:16px;transition:transform var(--d-2) var(--ease-out)}
.priv-links .btn:hover svg{transform:translateX(3px)}
.priv-mail{font-size:var(--fs-s);color:var(--ink-3)}
.priv-mail a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2)}
.priv-mail a:hover{color:var(--accent-hover)}
@media (max-width:479.98px){.priv-links .btn{width:100%}}