/* ============================================================================
   Condy — "Your ID" page
   ----------------------------------------------------------------------------
   Sibling of free-page.css: same cream ground, same eyebrow/flow/clarity
   rhythm, so the two explainer pages read as one pair.

   One deliberate difference. The free page's hero card is GREEN because its
   number is money ($0 cost, $300 reward) — design-system.css § 1 reserves
   green for cash and orange for Condy. The number on THIS page (documents
   held: 0) is neither, so its card is warm ink instead of green. Using the
   money colour for a document count would quietly break that rule.
   ========================================================================= */

.privacy-page { background:#faf8f0 }
#privacy { background:radial-gradient(ellipse at 90% 0%,#e8dbb977,transparent 45%); padding:54px 24px 36px }
.pv-wrap { max-width:1120px; margin:auto }
.pv-eyebrow { display:block; margin-bottom:16px; font:600 11px/1.3 var(--font); letter-spacing:.14em; text-transform:uppercase; color:#8a6a32 }

/* --- Hero ----------------------------------------------------------------- */
.pv-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; margin-bottom:58px }
.pv-hero h1 { font:500 clamp(36px,4.2vw,58px)/1.06 var(--font); letter-spacing:-.05em; max-width:13ch; margin:0 }
.pv-intro { font-size:16px; line-height:1.7; color:#756a59; margin:24px 0 0; max-width:49ch }

/* The counterpart to .fr-zero. Warm ink, not money green — see the note above.
   The concentric rings read as a seal; they are the same device as the free
   page's, so the two cards are recognisably a set. */
.pv-vault { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 85% 15%,#6b4a2a77,transparent 65%),linear-gradient(130deg,#2a1c12,#4a3121); color:#fdf3e2; border:1px solid #6d4c2f; border-radius:26px; padding:34px; box-shadow:0 22px 45px -25px #2a1c1288 }
.pv-vault::after { content:""; z-index:-1; position:absolute; width:320px; height:320px; right:-150px; top:-85px; border:1px solid #e8d18e44; border-radius:50%; box-shadow:0 0 0 25px #e8d18e0a,0 0 0 50px #e8d18e0a,0 0 0 75px #e8d18e0a }
.pv-vault > span { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#e3d2b4 }
.pv-vault > strong { display:block; font:600 108px/1.1 var(--font); letter-spacing:-.07em; margin:12px 0; color:#f2dfa5 }
.pv-vault p { font-size:15px; line-height:1.6; margin:0 0 26px }
.pv-checks { display:flex; flex-wrap:wrap; gap:10px 16px; padding-top:20px; border-top:1px solid #fff3; font-size:11px; color:#e6dac6 }

/* --- Shared section headings ---------------------------------------------- */
.pv-route h2,.pv-clarity h2,.pv-why h2 { font:500 clamp(25px,2.6vw,33px)/1.15 var(--font); letter-spacing:-.035em; margin:0 0 25px }

/* --- The route your ID takes ---------------------------------------------- */
.pv-flow { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; gap:22px; margin:0 }
.pv-flow li { position:relative; background:#fffdf8; border:1px solid #e2d9c6; border-radius:20px; padding:26px }
.pv-flow li:not(:last-child)::after { content:"→"; position:absolute; right:-24px; top:70px; z-index:1; width:26px; text-align:center; background:#faf8f0; color:#9d834c; font-size:24px }
.pv-flow-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px }
.pv-step { font-size:11px; letter-spacing:.1em; color:#9b865b }
.pv-flow-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#f4ece0; color:#8a5a14; font:600 20px/1 var(--font) }
/* The middle stop is the one that leaves us, so it carries the away-tint. */
.pv-flow li[data-where="away"] .pv-flow-icon { background:#edf1e5; color:#367453 }
.pv-flow h3 { font:500 27px/1.2 var(--font); margin:0 0 12px; letter-spacing:-.035em }
.pv-flow strong { font-size:13px; font-weight:600; color:#7b6744 }
.pv-flow li[data-where="away"] strong { color:#44634b }
.pv-flow p,.pv-clarity p { font-size:14px; line-height:1.7; color:#756a59; margin:12px 0 0 }

/* --- Why it isn't us ------------------------------------------------------ */
.pv-why { display:grid; grid-template-columns:.8fr 1.5fr; align-items:center; gap:44px; margin:36px 0 42px; padding:32px 38px; background:radial-gradient(ellipse at 5% 0%,#f5e2aa,transparent 70%),#efe6cf; border:1px solid #dccc9e; border-radius:24px }
.pv-why .pv-who { font:500 clamp(30px,3.4vw,42px)/1.1 var(--font); letter-spacing:-.05em; color:#5a3d22; margin:0 }
.pv-why .pv-who span { display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8a6a32; margin-bottom:10px }
.pv-why h2 { margin-bottom:12px }
.pv-why p { font-size:14px; line-height:1.65; color:#786546; margin:0 0 18px }
.pv-why a { display:inline-flex; gap:22px; align-items:center; font-size:13px; font-weight:600; color:#8a4a20; text-decoration:none; border-bottom:1px solid #a99d6b; padding-bottom:6px }

/* --- What that means ------------------------------------------------------ */
.pv-clarity > div { display:grid; grid-template-columns:repeat(3,1fr); gap:30px }
.pv-clarity article { border-top:1px solid #dacfba; padding-top:20px }
.pv-clarity h3 { font-size:16px; font-weight:600; margin:0 }

@media(max-width:760px) {
 #privacy { padding:32px 22px }
 .pv-hero { grid-template-columns:1fr; gap:26px; margin-bottom:38px }
 .pv-hero h1 { max-width:16ch }
 .pv-vault { padding:26px }
 .pv-vault > strong { font-size:86px }
 .pv-flow,.pv-clarity > div { grid-template-columns:1fr; gap:18px }
 .pv-flow li:not(:last-child)::after { display:none }
 .pv-flow-top { margin-bottom:18px }
 .pv-why { grid-template-columns:1fr; gap:24px; padding:26px }
}