.passphrase-page { --pp-purple: #5a1b91; --pp-purple-dark: #32104f; --pp-violet: #d7b6f4; --pp-ink: #11121a; --pp-paper: #f5f3f8; --pp-cyan: #2ec4c7; color: var(--pp-ink); background: #fff; }
.passphrase-page *, .passphrase-page *::before, .passphrase-page *::after { box-sizing: border-box; }
.passphrase-page h1, .passphrase-page h2, .passphrase-page h3 { font-family: "Barlow Condensed", Inter, sans-serif; letter-spacing: 0; }
.passphrase-page h2 { margin: 0; font-size: 3.25rem; line-height: 1; text-transform: uppercase; }
.passphrase-page p { margin-top: 0; margin-bottom: 1.35em; line-height: 1.7; }
.passphrase-page h1 + p, .passphrase-page h2 + p, .passphrase-page h3 + p { margin-top: 1.35em; }
.passphrase-page p + p { margin-top: 1.35em; }
.passphrase-page p:last-child { margin-bottom: 0; }
.passphrase-hero { color: #fff; background: #0c0d14; border-bottom: 8px solid var(--pp-purple); }
.passphrase-hero__inner { padding-top: 28px; padding-bottom: 54px; }
.passphrase-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; color: #c9c4d2; font-size: .84rem; }
.passphrase-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.passphrase-hero__copy { max-width: 900px; margin-bottom: 34px; }
.passphrase-eyebrow { margin: 0 0 12px; color: var(--pp-purple); font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.passphrase-hero .passphrase-eyebrow, .passphrase-final-cta .passphrase-eyebrow { color: #dcbcff; }
.passphrase-hero h1 { max-width: 900px; margin: 0; font-size: 4.9rem; line-height: .92; text-transform: uppercase; letter-spacing: 0; }
.passphrase-hero__copy h2 { margin-top: 18px; color: #dcbcff; font-size: 2rem; line-height: 1.08; text-transform: none; }
.passphrase-hero__copy > p:last-child { max-width: 760px; margin: 20px 0 0; color: #dedbe4; font-size: 1.08rem; }
.passphrase-tool { position: relative; overflow: hidden; padding: 30px; color: var(--pp-ink); background: #fff; border: 1px solid #d9d5df; border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.passphrase-tool::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--pp-purple); }
.passphrase-tool__masthead, .passphrase-actions, .passphrase-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.passphrase-tool__label { margin: 0 0 4px; color: var(--pp-purple); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.passphrase-tool__masthead h2 { font-size: 2rem; }
.passphrase-local-badge { display: inline-flex; align-items: center; gap: 8px; color: #245e60; font-size: .85rem; font-weight: 800; text-transform: uppercase; }
.passphrase-local-badge svg, .passphrase-privacy-note svg, .passphrase-actions svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.passphrase-result-wrap { margin: 24px 0; padding: 22px 24px 24px; background: #f5f3f8; border: 1px solid #d9d4e0; border-left: 4px solid var(--pp-cyan); border-radius: 4px; }
.passphrase-result-label { margin: 0 0 8px; color: #565361; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.passphrase-result { display: block; min-height: 2.8em; overflow-wrap: anywhere; word-break: break-word; color: #2f0e49; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.65rem; font-weight: 800; line-height: 1.4; }
.passphrase-controls { align-items: flex-start; }
.passphrase-controls fieldset { flex: 1 1 0; min-width: 0; padding: 0; margin: 0; border: 0; }
.passphrase-controls legend { margin-bottom: 10px; font-weight: 800; }
.passphrase-segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.passphrase-segments--separators { grid-template-columns: repeat(3, 1fr); }
.passphrase-segments label { position: relative; }
.passphrase-segments input { position: absolute; inset: 0; opacity: 0; }
.passphrase-segments span { display: flex; min-height: 46px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid #cfcbd4; border-radius: 3px; cursor: pointer; font-weight: 700; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.passphrase-segments input:checked + span { color: #fff; background: var(--pp-purple); border-color: var(--pp-purple); }
.passphrase-segments input:focus-visible + span { outline: 3px solid #2ec4c7; outline-offset: 2px; }
.passphrase-advisory { min-height: 28px; margin: 18px 0; padding-left: 14px; border-left: 3px solid var(--pp-cyan); color: #41404a; }
.passphrase-advisory strong { color: var(--pp-ink); }
.passphrase-actions { justify-content: flex-start; }
.passphrase-actions button { cursor: pointer; }
.passphrase-actions .button { min-width: 260px; }
.passphrase-copy { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; color: var(--pp-purple); background: #fff; border: 2px solid var(--pp-purple); border-radius: 3px; font-family: "Barlow Condensed", Inter, sans-serif; font-size: 1rem; font-weight: 800; text-transform: uppercase; }
.passphrase-copy:hover, .passphrase-copy:focus-visible { color: #fff; background: var(--pp-purple); }
.passphrase-privacy-note { display: flex; max-width: 900px; align-items: flex-start; gap: 12px; margin: 24px 0 0; color: #d8d5dd; font-size: .95rem; }
.passphrase-privacy-note svg { color: var(--pp-cyan); }
.passphrase-hero-top { display:grid; grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr); gap:54px; align-items:center; margin-bottom:36px; }
.passphrase-hero-top .passphrase-hero__copy { max-width:none; }
.passphrase-hero-privacy { display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:center; margin:0; padding:28px 30px; background:#32104f; border-top:4px solid #7b35b4; }
.passphrase-hero-privacy--top { align-self:stretch; }
.passphrase-hero-privacy--old { display:none; }
.passphrase-hero-privacy__icon { display:grid; width:96px; height:96px; place-items:center; background:#fff; border-radius:50%; }
.passphrase-hero-privacy__icon svg { width:48px; height:58px; fill:none; stroke:var(--pp-purple); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.passphrase-hero-privacy h2 { margin:0 0 20px; color:#fff; font-size:2.2rem; }
.passphrase-hero-privacy p:not(.passphrase-eyebrow) { color:#ded8e5; }
.passphrase-section--privacy { display:none; }
.passphrase-section { padding: 88px 0; }
.passphrase-section__heading { max-width: 780px; margin-bottom: 42px; }
.passphrase-section__heading--center { margin-inline: auto; text-align: center; }
.passphrase-section__heading > p:last-child { color: #565661; font-size: 1.08rem; }
.passphrase-section__heading > h2 + p { margin-top: 1.35em; }
.passphrase-section__heading > p + p { margin-top: 1.35em; }
.passphrase-section--strength { background: var(--pp-paper); }
.passphrase-metrics { display: grid; grid-template-columns: .75fr 1fr 2fr 1.25fr; margin-bottom: 30px; background: #fff; border: 1px solid #ded9e4; border-top: 5px solid var(--pp-purple); }
.passphrase-metrics > div { min-width: 0; padding: 22px; border-right: 1px solid #e2dee7; }
.passphrase-metrics > div:last-child { border-right: 0; }
.passphrase-metrics span, .passphrase-metrics small { display: block; color: #66636d; font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.passphrase-metrics strong { display: block; overflow-wrap: anywhere; margin: 8px 0 3px; color: var(--pp-purple-dark); font-family: "Barlow Condensed", Inter, sans-serif; font-size: 1.55rem; line-height: 1.05; }
.passphrase-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #ded9e4; }
.passphrase-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
.passphrase-table th, .passphrase-table td { padding: 16px 18px; border-bottom: 1px solid #e6e2e9; }
.passphrase-table thead { color: #fff; background: #171721; }
.passphrase-table tbody tr.is-current { background: #eee2f8; box-shadow: inset 5px 0 var(--pp-purple); }
.passphrase-table tbody th span { display: inline-block; margin-left: 8px; padding: 3px 6px; color: #fff; background: var(--pp-purple); border-radius: 2px; font-size: .67rem; text-transform: uppercase; }
.passphrase-section--comic { background: #fff; }
.passphrase-comic-old { display:none; }
.passphrase-comic { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--pp-ink); }
.comic-panel { position: relative; min-width: 0; padding: 22px; border-right: 2px solid var(--pp-ink); background: #fbfafc; }
.comic-panel:last-child { border-right: 0; }
.comic-number { color: var(--pp-purple); font-family: "Barlow Condensed", sans-serif; font-size: .9rem; font-weight: 800; }
.comic-panel h3 { margin: 3px 0 14px; font-size: 1.55rem; text-transform: uppercase; }
.comic-scene { height: 120px; margin-bottom: 14px; padding: 4px; background: #eee8f3; border: 1px solid #d4ccda; }
.comic-scene svg { width: 100%; height: 100%; }
.comic-line { fill: none; stroke: #171721; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.comic-fill { fill: #fff; stroke: #171721; stroke-width: 3; }
.comic-accent { fill: none; stroke: var(--pp-purple); stroke-width: 5; stroke-linecap: round; }
.comic-panel p { margin: 10px 0 0; font-size: .88rem; line-height: 1.45; }
.comic-panel > code { display: block; overflow-wrap: anywhere; margin-top: 12px; padding: 9px; color: #fff; background: #171721; font-size: .82rem; }
.comic-screen { padding: 8px; text-align: center; color: #fff; background: #171721; }
.comic-compare { display: grid; gap: 8px; margin-bottom: 14px; }
.comic-compare div { min-width: 0; padding: 9px; background: #eee8f3; border-left: 4px solid var(--pp-purple); }
.comic-compare span { display: block; margin-bottom: 4px; color: #5d5863; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.comic-compare code { display: block; overflow-wrap: anywhere; font-size: .72rem; }
.comic-transcript { display:none; }
.comic-transcript summary, .passphrase-section--sources summary { padding: 16px 0; cursor: pointer; color: var(--pp-purple); font-weight: 800; }
.comic-transcript li { margin-bottom: 12px; line-height: 1.6; }
.passphrase-section--explain { background: #171721; color: #fff; }
.passphrase-prose-grid, .passphrase-two-column, .passphrase-privacy-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: start; gap: 80px; }
.passphrase-prose-main h2, .passphrase-section--estimate h2, .passphrase-section--safe h2, .passphrase-section--privacy h2 { font-size: 3.25rem; }
.passphrase-prose-main > p { color: #d9d8df; font-size: 1.06rem; }
.passphrase-callout { padding: 14px 18px; color: #fff !important; background: #2b163c; border-left: 5px solid var(--pp-cyan); }
.passphrase-key-visual { padding: 24px; color: var(--pp-ink); background: #fff; border-radius: 4px; }
.passphrase-key-visual span { display: block; font-weight: 800; }
.passphrase-key-visual div { margin-top: 10px; padding: 12px; text-align: center; color: #fff; background: #5a1b91; font-family: "Barlow Condensed", sans-serif; font-size: 3rem; font-weight: 800; }
.passphrase-key-visual div.is-large { background: #147b7e; }
.passphrase-key-visual p { margin: 5px 0 22px; color: #65616a; font-size: .85rem; }
.passphrase-section--estimate { background: #fff; }
.passphrase-two-column > div > p:not(.passphrase-eyebrow) { color: #55545e; font-size: 1.04rem; }
.passphrase-assumptions, .passphrase-checklist { margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--pp-purple); }
.passphrase-assumptions li, .passphrase-checklist li { position: relative; padding: 17px 16px 17px 48px; border-bottom: 1px solid #dedbe2; font-weight: 700; }
.passphrase-assumptions li::before, .passphrase-checklist li::before { content: ""; position: absolute; left: 17px; top: 21px; width: 12px; height: 7px; border-left: 3px solid var(--pp-cyan); border-bottom: 3px solid var(--pp-cyan); transform: rotate(-45deg); }
.passphrase-section--comparison { background: var(--pp-paper); }
.credential-comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; }
.credential-comparison > div { min-width: 0; padding: 28px; background: #fff; border: 1px solid #dcd8e1; border-top: 5px solid var(--pp-purple); }
.credential-comparison span { font-weight: 800; text-transform: uppercase; }
.credential-comparison code { display: block; overflow-wrap: anywhere; margin: 24px 0; color: var(--pp-purple-dark); font-size: 1.25rem; font-weight: 800; }
.credential-versus { align-self: center; color: var(--pp-purple); font-family: "Barlow Condensed", sans-serif; font-size: 2rem; }
.crack-comparison { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:20px; align-items:stretch; }
.crack-comparison__card { background:#fff; border:1px solid #dcd8e1; border-top:5px solid var(--pp-purple); padding:28px; }
.crack-comparison__card h3 { margin:0; font-family:"Barlow Condensed",sans-serif; font-size:2rem; text-transform:uppercase; }
.crack-comparison__sub { margin:4px 0 20px; color:#686471; }
.comparison-intro-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:48px; align-items:center; margin-bottom:44px; }
.comparison-intro-image { margin:0; align-self:stretch; overflow:hidden; background:#1d0c2e; box-shadow:0 16px 36px rgba(28,20,40,.16); }
.comparison-intro-image img { display:block; width:100%; height:100%; min-height:480px; object-fit:cover; }
.comparison-lesson { margin-top:24px !important; font-size:1.2rem; color:var(--pp-purple-dark); }
.comparison-perspective { max-width:900px; margin:28px auto 0 !important; padding:20px 24px; background:#f2edf8; border-left:5px solid var(--pp-purple); text-align:left; font-size:1.05rem; line-height:1.6; }
.crack-comparison__versus { align-self:center; color:var(--pp-purple); font-family:"Barlow Condensed",sans-serif; font-size:2rem; font-weight:800; }
.crack-row { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:17px 0; border-top:1px solid #e4e0e8; }
.crack-row div { min-width:0; }
.crack-row strong,.crack-row span { display:block; }
.crack-row strong { color:var(--pp-ink); }
.crack-row span { margin-top:3px; color:#686471; font-size:.88rem; }
.crack-row b { flex:0 0 145px; text-align:right; color:var(--pp-purple-dark); font-size:1.05rem; }
.comparison-callout { max-width: 1080px; margin: 42px auto 0; padding: 34px 40px; text-align: center; background: var(--pp-purple-dark); color: #fff; border-left: 8px solid var(--pp-purple); box-shadow: 0 14px 34px rgba(28,20,40,.16); }
.comparison-callout__eyebrow { margin: 0 0 12px; color: #d9c5ff; font-family: "Barlow Condensed", sans-serif; font-size: 1rem !important; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.comparison-callout > p:not(.comparison-callout__eyebrow) { max-width: 920px; margin: 0 auto; font-size: 1.35rem; line-height: 1.55; }
.comparison-callout code { padding: 2px 7px; background: rgba(255,255,255,.13); color: #fff; font-size: .95em; }
.comparison-callout strong { display: block; margin-top: 18px; color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 2.15rem; line-height: 1.05; text-transform: uppercase; }
.passphrase-section--safe { background: #fff; }
.passphrase-section--privacy { color: #fff; background: var(--pp-purple-dark); }
.passphrase-privacy-grid { grid-template-columns: 180px 1fr; align-items: center; }
.passphrase-privacy-mark { display: grid; width: 150px; height: 150px; place-items: center; background: #fff; border-radius: 50%; }
.passphrase-privacy-mark svg { width: 70px; height: 85px; fill: none; stroke: var(--pp-purple); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.passphrase-section--privacy p:not(.passphrase-eyebrow) { color: #e3dbe9; }
.passphrase-section--sources { padding: 64px 0; background: #f5f3f8; }
.passphrase-sources-heading, .passphrase-source-content { max-width: 1000px; margin-left:auto; margin-right:auto; }
.passphrase-sources-heading { margin-bottom:32px; }
.passphrase-sources-heading h2 { margin:0 0 18px; font-size:2.5rem; }
.passphrase-sources-heading > p:last-child { color:#565661; font-size:1.08rem; }
.passphrase-source-content { padding-bottom:14px; color:#55545e; }
.passphrase-source-content ul { margin:24px 0; padding-left:24px; }
.passphrase-source-content li { margin-bottom:12px; line-height:1.6; }
.passphrase-source-content a { color: var(--pp-purple); text-decoration: underline; text-underline-offset: 3px; }
.passphrase-final-cta { padding: 90px 0; text-align: center; color: #fff; background: #0c0d14; border-top: 8px solid var(--pp-cyan); }
.passphrase-final-cta .site-shell { max-width: 900px; }
.passphrase-final-cta h2 { font-size: 3.6rem; }
.passphrase-final-cta p:not(.passphrase-eyebrow) { max-width: 700px; margin: 20px auto 28px; color: #d8d5df; }
@media (max-width: 1050px) { .passphrase-hero-top { grid-template-columns:1fr; gap:30px; } .passphrase-comic { grid-template-columns: repeat(2, 1fr); } .comic-panel:nth-child(2) { border-right: 0; } .comic-panel:nth-child(-n+2) { border-bottom: 2px solid var(--pp-ink); } .passphrase-metrics { grid-template-columns: repeat(2, 1fr); } .passphrase-metrics > div:nth-child(2) { border-right: 0; } .passphrase-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #e2dee7; } }
@media (max-width: 760px) { .crack-comparison { grid-template-columns:1fr; } .crack-comparison__versus { text-align:center; } .crack-row b { flex-basis:125px; } .passphrase-page h2, .passphrase-prose-main h2, .passphrase-section--estimate h2, .passphrase-section--safe h2, .passphrase-section--privacy h2 { font-size: 2.5rem; } .passphrase-hero h1 { font-size: 3.4rem; } .passphrase-tool { padding: 22px; } .passphrase-tool__masthead, .passphrase-actions, .passphrase-controls { align-items: stretch; flex-direction: column; } .passphrase-actions .button, .passphrase-copy { width: 100%; } .passphrase-prose-grid, .passphrase-two-column, .passphrase-privacy-grid { grid-template-columns: 1fr; gap: 38px; } .passphrase-privacy-grid { text-align: center; } .passphrase-privacy-mark { margin: 0 auto; } .credential-comparison { grid-template-columns: 1fr; } .credential-versus { justify-self: center; } }
@media (max-width: 560px) { .passphrase-hero__inner { padding-top: 20px; } .passphrase-hero h1 { font-size: 2.85rem; } .passphrase-hero__copy h2 { font-size: 1.65rem; } .passphrase-tool__masthead { gap: 10px; } .passphrase-result { font-size: 1.2rem; } .passphrase-segments span { padding-inline: 6px; font-size: .85rem; } .passphrase-segments--separators { grid-template-columns: 1fr; } .passphrase-section { padding: 64px 0; } .passphrase-metrics { grid-template-columns: 1fr; } .passphrase-metrics > div { border-right: 0; border-bottom: 1px solid #e2dee7; } .passphrase-comic { grid-template-columns: 1fr; } .comic-panel { border-right: 0; border-bottom: 2px solid var(--pp-ink); } .comic-panel:last-child { border-bottom: 0; } .passphrase-final-cta h2 { font-size: 2.65rem; } }
@media (prefers-reduced-motion: reduce) { .passphrase-page *, .passphrase-page *::before, .passphrase-page *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; } }