/* SealNest website — Privacy Policy, Terms of Use, Support and 404.
   Builder C. Linked after tokens.css. Every class here starts with  pg-.

   tokens.css already draws the long-form layout (.page .prose .prose-head .prose-meta
   .prose-draft .prose-summary), the questions (.faq), chips, the checklist and buttons.
   This file adds only what those do not cover. No hex colours: every colour is a token.

   Contents
     1. Words that wait for a value in site.config.js (.pg-unset)
     2. The short version: ticks that land once
     3. A list written as a sentence (.pg-list)
     4. Privacy: "We can't see" and "We can see"; whom a part is for; the security page's opening line
     5. Support: the email card, the demo link, steps and lists inside answers
     6. 404
     7. Print
*/

/* ---- 1. Words that wait for a value in site.config.js ----
   .pg-unset marks words gated (data-if / data-if-not) that site.config.js keeps OUT of the page today:
   the account sections while accountsLive is false, the plans while plans.onSale is false, and so on.
   Scripts on: js/site.js removes them, or keeps them once the switch turns. Scripts off (or before the
   config has been read): nothing would remove them, so they are hidden here and never show half-finished.
   tools/apply-config.js puts the marker on, or takes it off, to match the config; tools/check.js says
   if one is out of step. */
html:not(.cfg-ready) .pg-unset{display:none}

/* tokens.css means the "Draft" note to sit 28px above the summary card, and the card's heading to
   start at its top edge, but its own later rules (.prose p, .prose h2) outrank those two. The same
   values, restated so they win. (Reported to the foundation owner.) */
.prose .prose-draft{margin:0 0 28px}
.prose .prose-summary h2{margin-top:0}

/* ---- 2. The short version: each tick lands once, like the price ticks on the home page ----
   Finished state is the default. The "before" state exists only under html.motion and only
   until js/site.js adds .is-in (tokens.css already fades and lifts each .reveal line). */
html.motion .prose-summary .checklist li.reveal::before{transition:transform var(--dur-2) var(--ease-spring)}
html.motion .prose-summary .checklist li.reveal:not(.is-in)::before{transform:rotate(-45deg) scale(0)}
.prose-summary .checklist li:nth-child(1)::before{transition-delay:200ms}
.prose-summary .checklist li:nth-child(2){transition-delay:70ms}
.prose-summary .checklist li:nth-child(2)::before{transition-delay:270ms}
.prose-summary .checklist li:nth-child(3){transition-delay:140ms}
.prose-summary .checklist li:nth-child(3)::before{transition-delay:340ms}
.prose-summary .checklist li:nth-child(4){transition-delay:210ms}
.prose-summary .checklist li:nth-child(4)::before{transition-delay:410ms}
.prose-summary .checklist li:nth-child(5){transition-delay:280ms}
.prose-summary .checklist li:nth-child(5)::before{transition-delay:480ms}
.prose-summary .checklist li:nth-child(6){transition-delay:350ms}
.prose-summary .checklist li:nth-child(6)::before{transition-delay:550ms}
.prose-summary .checklist li:nth-child(7){transition-delay:420ms}
.prose-summary .checklist li:nth-child(7)::before{transition-delay:620ms}
.prose-summary .checklist li{font-size:17px;color:var(--ink)}
.prose-summary .checklist a{white-space:nowrap}

/* ---- 3. A list written as a sentence ----
   <span class="pg-list"><span data-if="keeps.passwords">passwords</span>…</span>
   Each part can be switched off in site.config.js; the commas and the "and" follow whatever
   is left, so the sentence always reads right: "a, b, c and d". */
.pg-list > span{white-space:nowrap}             /* "Wi-Fi" and "verification codes" never split */
.pg-list > span:nth-last-child(n+3)::after{content:", ";white-space:normal}   /* lines may still break between items */
.pg-list > span:nth-last-child(2)::after{content:" and ";white-space:normal}

/* ---- 4. Privacy: two cards, side by side on wide screens ---- */
.pg-see{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:22px 0 0}
/* Side by side only where both lists have room; the pair then sits a little wider than the text. */
@media (min-width:980px){
  .pg-see{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-left:-80px;margin-right:-80px}
}
.pg-see-card{display:flex;flex-direction:column;border-radius:var(--radius);padding:22px 22px 20px}
.pg-see-card--cant{background:var(--accent-soft)}
.pg-see-card--can{background:var(--surface);border:1px solid var(--line)}
.pg-see-head{display:flex;align-items:center;gap:12px}
.prose .pg-see-head h3{margin:0;font-size:20px;letter-spacing:-.01em;font-weight:700;color:var(--ink)}
.pg-tile{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px}
.pg-tile svg{width:22px;height:22px}
.pg-see-card--cant .pg-tile{background:var(--surface);color:var(--accent-ink)}
.pg-see-card--can .pg-tile{background:var(--surface-2);color:var(--them-ink)}
.prose .pg-see-list{list-style:none;padding:0;margin:14px 0 20px}
.prose .pg-see-list li{position:relative;margin:9px 0 0;padding-left:28px;line-height:1.5;color:var(--ink-2)}
.prose .pg-see-card--cant .pg-see-list li{color:var(--ink)}
/* "can't see": a small "no" sign — a ring with one stroke through it */
.pg-see-list--cant li::before{content:"";position:absolute;left:1px;top:.3em;width:15px;height:15px;
  border:2px solid var(--accent-ink);border-radius:50%}
.pg-see-list--cant li::after{content:"";position:absolute;left:8px;top:calc(.3em + 1px);width:2px;height:15px;
  background:var(--accent-ink);transform:rotate(45deg)}
/* "can see": a plain grey dot */
.pg-see-list--can li::before{content:"";position:absolute;left:5px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--them)}
/* one plain sentence at the foot of each card; both feet line up on wide screens */
.prose .pg-see-note{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
html.motion .pg-see .reveal:nth-child(2){transition-delay:90ms}

/* The paragraphs under the two cards */
.pg-see + p{margin-top:24px}

/* ---- 4b. Whom a part of a page is for ("This part applies to everyone ..."), and a page's opening line ---- */
.prose .pg-scope{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.prose .pg-lead{margin-top:20px;max-width:none;color:var(--ink-2)}
.prose .pg-tight + ul{margin-top:8px}

/* ---- 5. Support ---- */
.pg-contact{margin:0 0 8px;padding:28px 26px 26px;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.prose .pg-contact .say{margin:0;color:var(--ink);font-size:20px;font-weight:600;max-width:none}
/* the address as plain words: one tap selects all of it, ready to copy */
.prose .pg-contact .pg-addr{margin:10px 0 0;font-size:18px;line-height:1.4}
.pg-mail{margin-top:14px;max-width:100%;padding-left:24px;padding-right:24px}
.pg-mail svg{width:20px;height:20px;flex:0 0 auto}
.pg-mail span{overflow-wrap:anywhere}
.prose .pg-contact .fine{margin:16px auto 0;max-width:30em;line-height:1.5}
.pg-demo{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px}
.pg-demo svg{width:18px;height:18px;flex:0 0 auto}
.pg-demo:hover svg{transform:translateX(2px)}
html.motion .pg-demo svg{transition:transform var(--dur-1) var(--ease)}
.pg-faq-h{margin-top:40px}

/* a short list inside an answer, under one lead-in line */
.prose .faq .pg-tight{margin-bottom:8px}
.prose .faq .pg-points{margin:0 0 19px;padding-left:1.25em}
.prose .faq .pg-points li{margin:5px 0 0}

/* steps inside an answer */
.prose .faq .pg-steps{margin:0 0 19px;padding-left:1.4em}
.prose .faq .pg-steps li{margin:6px 0 0}

@media (max-width:640px){
  .pg-contact{padding:24px 18px 22px}
  .pg-mail{width:100%;padding-left:16px;padding-right:16px}
}

/* ---- 6. 404 ---- */
/* The page fills the window, so the footer sits at the bottom and the message sits in the middle. */
.pg-fill{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.pg-fill > main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
.pg-404{text-align:center;padding:24px 0 8px}
.pg-404-mark{width:72px;height:72px;margin:0 auto 28px;border-radius:18px}
.pg-404 h1{font-family:var(--font-slab);font-size:clamp(34px,5vw,54px)}
.pg-404 .btnrow{justify-content:center;margin-top:32px}

/* ---- 7. Print: the words, without the site around them ---- */
@media print{
  .skip,.site-header,.site-footer,.pg-demo,.pg-mail svg,.pg-tile{display:none}
  .page{padding:0}
  .prose-summary,.pg-see-card,.pg-contact{box-shadow:none;border:1px solid var(--line)}
}