/* ============================================================================
   Privacy (public) — the promises, the privacy label, where things happen,
   locks and backups, and your controls.
   ========================================================================== */
.pv-hero { padding-top: clamp(120px, 14vw, 170px); padding-bottom: clamp(30px, 5vw, 60px); }
.pv-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.pv-hero .display { max-width: 12ch; }
.pv-hero .lede { margin-top: 22px; }
@media (max-width: 900px) { .pv-hero__grid { grid-template-columns: 1fr; } }
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.promise-c { padding: 24px; display: grid; gap: 12px; align-content: start; }
.promise-c .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.promise-c .ic svg { width: 22px; height: 22px; }
.promise-c h3 { margin: 0; font-family: var(--font-serif); font-size: 23px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.promise-c p { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 1000px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .promises { grid-template-columns: 1fr; } }
.where { display: grid; grid-template-columns: 1fr; gap: 14px; }
.where > .glass { max-width: 820px; width: 100%; justify-self: center; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; } }
.col { padding: 20px; display: grid; gap: 10px; }
.col h3 { margin: 0; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.col h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.col li { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; padding-left: 14px; position: relative; }
.col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.col li b { color: var(--ink); }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.control { padding: 24px; display: grid; gap: 10px; align-content: start; }

.control h3 { margin: 0; font-family: var(--font-serif); font-size: 24px; font-weight: 500; }
.control p { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 900px) { .controls { grid-template-columns: 1fr; } }
.policy-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 26px; }
.policy-cta p { margin: 0; color: var(--ink-2); max-width: 56ch; }
/* ---------------------------------------------------------------- 7 private: the boundary */
.boundary { width: 100%; height: auto; overflow: visible; }
.boundary text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; fill: var(--ink-2); }
.boundary .title { font-family: var(--font-ui); font-size: 13px; font-weight: 700; fill: var(--ink); letter-spacing: 0; }
.boundary .glass-edge { fill: rgba(255,255,255,.03); stroke: var(--accent-line); stroke-width: 1.5; }
.boundary .mod rect { fill: rgba(255,255,255,.05); stroke: var(--hair); }
.boundary .mod text { fill: var(--ink); font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.boundary .flow { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 7; animation: flow 1.4s linear infinite; opacity: .8; }
.boundary .opt { fill: none; stroke: var(--sand); stroke-width: 1.5; stroke-dasharray: 6 6; animation: flow 2.2s linear infinite; }
.boundary .none { stroke: var(--negative); stroke-width: 1.5; stroke-dasharray: 2 5; }
.boundary .srv rect { fill: rgba(255,255,255,.02); stroke: var(--ink-4); stroke-dasharray: 4 4; }
.boundary .srv--none rect { stroke: color-mix(in srgb, var(--negative) 60%, transparent); }
.boundary .cross { stroke: var(--negative); stroke-width: 2; stroke-linecap: round; }
.boundary .dot { fill: var(--accent); }
@keyframes flow { to { stroke-dashoffset: -20; } }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.facts3 div { padding: 14px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(255,255,255,.03); display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.facts3 b { color: var(--ink); font-size: 13.5px; }
@media (max-width: 640px) { .facts3 { grid-template-columns: 1fr; } }


.ctl-vis { display: grid; place-items: center; height: 220px; overflow: hidden; margin-bottom: 8px; border-radius: 18px; background: rgba(0,0,0,.18); border: 1px solid var(--hair); }
.ctl-vis--phone { place-items: start center; padding-top: 18px; }
.ctl-vis--phone .phone { --w: 190px; }
.zipfile { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid var(--glass-edge); }
.zipfile i { width: 44px; height: 52px; border-radius: 8px 14px 8px 8px; display: grid; place-items: center; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.zipfile b { display: block; font-size: 13.5px; }
.zipfile span { font-size: 12px; color: var(--ink-3); }
.erase-pill { display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: #F0917A; background: rgba(224,122,98,.1); border: 1px solid rgba(224,122,98,.35); }
.erase-pill svg { width: 16px; height: 16px; }