/* ============================================================
   THE POWER OF NO — concept (Courage · Modern)
   Theme: slate-blue (#3E5C76) · firm clay-red (#B0413E) ·
   cool paper (#F4F2EE) · ink (#22262B). Dark-mode-safe.
   ============================================================ */
.page-saying-no {
    --sn-paper:#F4F2EE; --sn-paper-2:#E8E4DC;
    --sn-slate:#3E5C76; --sn-slate-d:#2C4860;
    --sn-red:#B0413E; --sn-ink:#22262B; --sn-mute:#6B7079;
    --c-gold:var(--sn-slate); --c-bg:var(--sn-paper); --c-ink:var(--sn-ink); --c-mute:var(--sn-mute); --c-accent:var(--sn-slate);
    background:var(--sn-paper); color:var(--sn-ink);
}
[data-theme="dark"] .page-saying-no, [data-theme="dark"].page-saying-no {
    --sn-paper:#121417; --sn-paper-2:#1A1D21; --sn-ink:#E7E3DA; --sn-mute:#A2A7AE;
    --sn-slate:#7FA0BD; --sn-slate-d:#9DB8D0; --sn-red:#D8736F;
    --c-bg:#121417; --c-ink:#E7E3DA; --c-mute:#A2A7AE; background:#121417; color:#E7E3DA;
}

.sn-section { padding:var(--s-10,4rem) 0; position:relative; }
.sn-section-head { max-width:820px; margin:0 auto var(--s-7,2.5rem); text-align:center; }
.sn-eyebrow { font-family:var(--f-mono,monospace); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sn-slate-d); margin-bottom:var(--s-3,0.75rem); }
.sn-h2 { font-family:var(--f-serif,serif); font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.22; color:var(--sn-ink); margin-bottom:var(--s-4,1rem); font-weight:600; }
.sn-h2 em { font-style:italic; color:var(--sn-slate-d); font-weight:500; }
.sn-sub { font-size:1.05rem; line-height:1.7; color:var(--sn-mute); max-width:70ch; margin:0 auto; }
.sn-sub em { color:var(--sn-slate-d); font-style:italic; } .sn-sub b { color:var(--sn-ink); }
.sn-data { font-family:var(--f-mono,monospace); font-feature-settings:"tnum"; }

.sn-field { display:block; margin-bottom:var(--s-3,0.75rem); }
.sn-field-label { display:block; font-size:0.92rem; color:var(--sn-ink); font-weight:500; margin-bottom:4px; }
.sn-hint-inline { font-weight:400; color:var(--sn-mute); font-size:0.84em; font-style:italic; }
.sn-input, .sn-textarea, .sn-select {
    width:100%; padding:0.65rem 0.85rem; border:1px solid rgba(62,92,118,0.35); border-radius:4px;
    background:var(--sn-paper); color:var(--sn-ink); font-family:inherit; font-size:1rem; box-sizing:border-box;
}
.sn-textarea { resize:vertical; line-height:1.55; font-family:var(--f-serif,serif); font-size:1.05rem; }
.sn-input:focus, .sn-textarea:focus, .sn-select:focus { outline:none; border-color:var(--sn-slate); }
[data-theme="dark"] .sn-input, [data-theme="dark"] .sn-textarea, [data-theme="dark"] .sn-select { background:#0D0F11; color:#E7E3DA; }
.sn-slider { appearance:none; width:100%; height:6px; border-radius:3px; outline:none; background:rgba(62,92,118,0.25); }
.sn-slider::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border-radius:50%; background:var(--sn-slate); border:2px solid var(--sn-paper); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.sn-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--sn-slate); border:2px solid var(--sn-paper); cursor:pointer; }
.sn-slider-wrap { display:flex; align-items:center; gap:var(--s-2,0.5rem); }
.sn-range-out { flex:0 0 24px; text-align:right; font-family:var(--f-mono,monospace); color:var(--sn-slate-d); font-weight:600; }

.sn-result { max-width:800px; margin:var(--s-5,1.25rem) auto 0; padding:var(--s-5,1.25rem); background:var(--sn-paper-2); border-left:3px solid var(--sn-slate); border-radius:4px; text-align:center; }
[data-theme="dark"] .sn-result { background:#1A1D21; }
.sn-result-tag { font-family:var(--f-mono,monospace); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--sn-slate-d); margin-bottom:var(--s-2,0.5rem); }
.sn-result-synth { font-family:var(--f-serif,serif); font-style:italic; font-size:1.1rem; line-height:1.65; color:var(--sn-ink); max-width:62ch; margin:0 auto; }

.sn-form { max-width:1000px; margin:0 auto; background:var(--sn-paper); border:1px solid rgba(62,92,118,0.3); padding:var(--s-5,1.25rem); border-radius:4px; }
[data-theme="dark"] .sn-form { background:#16191C; }

.page-saying-no .fade-up { opacity:0; transform:translateY(16px); animation:snFade 0.7s ease-out forwards; }
.page-saying-no .fade-up.delay-1{animation-delay:.12s;} .page-saying-no .fade-up.delay-2{animation-delay:.24s;}
.page-saying-no .fade-up.delay-3{animation-delay:.36s;} .page-saying-no .fade-up.delay-4{animation-delay:.48s;}
@keyframes snFade { to { opacity:1; transform:translateY(0); } }

/* hero */
.sn-hero { position:relative; min-height:78vh; padding:var(--s-12,5rem) 0 var(--s-10,4rem); background:linear-gradient(180deg,var(--sn-paper) 0%,var(--sn-paper-2) 100%); overflow:hidden; }
[data-theme="dark"] .sn-hero { background:linear-gradient(180deg,#121417 0%,#1A1D21 100%); }
.sn-hero-canvas { position:absolute; inset:0; pointer-events:none; }
.sn-kanji { position:absolute; right:4%; top:50%; transform:translateY(-50%); font-family:var(--f-serif,serif); font-size:clamp(200px,34vw,460px); font-weight:800; color:var(--sn-slate); opacity:0.06; line-height:1; user-select:none; letter-spacing:-0.03em; }
[data-theme="dark"] .sn-kanji { opacity:0.1; }
.sn-hero-content { position:relative; z-index:1; max-width:720px; }
.sn-hero-title { font-family:var(--f-serif,serif); font-size:clamp(2.4rem,5.4vw,4.2rem); line-height:1.08; color:var(--sn-ink); margin:var(--s-4,1rem) 0; font-weight:600; }
.sn-hero-title span, .sn-hero-title em { display:block; }
.sn-hero-title em { font-style:italic; color:var(--sn-slate-d); font-weight:500; padding-left:0.8em; }
.sn-hero-sub, .sn-hero-promise { font-size:1.08rem; line-height:1.78; color:var(--sn-mute); margin-bottom:var(--s-4,1rem); max-width:62ch; }
.sn-hero-sub b { color:var(--sn-ink); font-weight:600; } .sn-hero-sub em, .sn-hero-promise em { color:var(--sn-slate-d); font-style:italic; }
.sn-hero-cta { display:flex; flex-wrap:wrap; gap:var(--s-3,0.75rem); margin-top:var(--s-6,1.5rem); }

/* alternating section bg */
.sn-cost, .sn-boundary, .sn-pause, .sn-voices { background:var(--sn-paper-2); }
[data-theme="dark"] .sn-cost, [data-theme="dark"] .sn-boundary, [data-theme="dark"] .sn-pause { background:#1A1D21; }

/* yes audit */
.sn-audit-list { display:flex; flex-direction:column; gap:var(--s-3,0.75rem); margin-bottom:var(--s-3,0.75rem); }
.sn-audit-row { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s-3,0.75rem); align-items:center; }
@media (max-width:700px){ .sn-audit-row { grid-template-columns:1fr; } }
.sn-toggle { display:flex; gap:4px; background:var(--sn-paper-2); padding:4px; border-radius:4px; }
[data-theme="dark"] .sn-toggle { background:#0D0F11; }
.sn-opt { flex:1; display:flex; align-items:center; justify-content:center; padding:0.5rem; border-radius:3px; cursor:pointer; font-size:0.84rem; color:var(--sn-mute); transition:all .15s; }
.sn-opt input { position:absolute; opacity:0; pointer-events:none; }
.sn-opt:has(input:checked) { background:var(--sn-slate); color:#fff; font-weight:500; }
.sn-opt-fear:has(input:checked) { background:var(--sn-red); }

/* cost / script grids */
.sn-cost-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3,0.75rem); }
@media (max-width:600px){ .sn-cost-grid { grid-template-columns:1fr; } }

/* pleaser */
.sn-pl-row { display:grid; grid-template-columns:1fr 180px; gap:var(--s-3,0.75rem); align-items:center; padding:var(--s-3,0.75rem) 0; border-bottom:1px dashed rgba(62,92,118,0.2); }
.sn-pl-row:last-of-type { border-bottom:none; }
@media (max-width:600px){ .sn-pl-row { grid-template-columns:1fr; } }
.sn-pl-q { font-size:0.98rem; color:var(--sn-ink); }

/* boundary */
.sn-bd-grid { display:flex; flex-direction:column; gap:var(--s-3,0.75rem); margin-bottom:var(--s-3,0.75rem); }
.sn-bd-row { display:grid; grid-template-columns:140px 1fr; gap:var(--s-3,0.75rem); align-items:center; }
@media (max-width:600px){ .sn-bd-row { grid-template-columns:1fr; } }
.sn-bd-label { font-family:var(--f-serif,serif); font-size:1.1rem; color:var(--sn-ink); }
.sn-bd-track { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s-2,0.5rem); }
.sn-bd-end { font-family:var(--f-mono,monospace); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--sn-mute); }
.sn-bd-worst { font-family:var(--f-serif,serif); font-size:1.7rem; color:var(--sn-red); font-style:italic; margin:var(--s-2,0.5rem) 0; }

/* script */
.sn-script-result { text-align:left; }
.sn-script-text { font-family:var(--f-serif,serif); font-size:1.15rem; line-height:1.7; color:var(--sn-ink); margin:0 0 var(--s-3,0.75rem); }
.sn-copied { margin-left:12px; color:var(--sn-slate-d); font-size:0.88rem; }

/* guilt pills + generic pills */
.sn-guilt-q { font-family:var(--f-mono,monospace); font-size:0.84rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--sn-slate-d); margin:var(--s-3,0.75rem) 0 var(--s-2,0.5rem); }
.sn-guilt-options { display:flex; flex-wrap:wrap; gap:var(--s-2,0.5rem); margin-bottom:var(--s-4,1rem); }
.sn-pill { display:inline-flex; align-items:center; gap:8px; padding:0.5rem 0.9rem; background:var(--sn-paper-2); border:1px solid rgba(62,92,118,0.3); border-radius:999px; cursor:pointer; font-size:0.9rem; color:var(--sn-ink); transition:all .15s; }
[data-theme="dark"] .sn-pill { background:#0D0F11; }
.sn-pill input { position:absolute; opacity:0; pointer-events:none; }
.sn-pill-mark { width:12px; height:12px; border-radius:50%; border:2px solid var(--sn-mute); background:var(--sn-paper); position:relative; }
.sn-pill input:checked ~ .sn-pill-mark { border-color:var(--sn-slate); }
.sn-pill input:checked ~ .sn-pill-mark::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:5px; height:5px; background:var(--sn-slate); border-radius:50%; }
.sn-pill:has(input:checked) { background:rgba(62,92,118,0.12); border-color:var(--sn-slate); }

/* streak cards */
.sn-streak-card { max-width:680px; margin:0 auto; text-align:center; padding:var(--s-5,1.25rem); background:var(--sn-paper); border:1px solid rgba(62,92,118,0.3); border-radius:4px; }
[data-theme="dark"] .sn-streak-card { background:#16191C; }
.sn-streak { margin-top:var(--s-3,0.75rem); font-family:var(--f-mono,monospace); font-size:0.96rem; color:var(--sn-slate-d); font-weight:500; }

/* hold */
.sn-hold-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-2,0.5rem); margin-bottom:var(--s-3,0.75rem); }
.sn-hold-card { display:flex; align-items:center; gap:var(--s-2,0.5rem); padding:var(--s-3,0.75rem); background:var(--sn-paper-2); border:1px solid rgba(62,92,118,0.22); border-left:3px solid var(--sn-slate); border-radius:4px; cursor:pointer; transition:all .15s; }
[data-theme="dark"] .sn-hold-card { background:#14171A; }
.sn-hold-card:hover { transform:translateY(-1px); }
.sn-hold-card input { position:absolute; opacity:0; pointer-events:none; }
.sn-hold-mark { flex:0 0 14px; width:14px; height:14px; border:2px solid var(--sn-mute); border-radius:50%; background:var(--sn-paper); position:relative; }
.sn-hold-card input:checked ~ .sn-hold-mark { border-color:var(--sn-slate); }
.sn-hold-card input:checked ~ .sn-hold-mark::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:var(--sn-slate); border-radius:50%; }
.sn-hold-card:has(input:checked), .sn-hold-card.is-active { background:rgba(62,92,118,0.1); border-color:var(--sn-slate); }
.sn-hold-label { font-size:0.92rem; line-height:1.4; color:var(--sn-ink); }

/* voices */
.sn-voices { background:linear-gradient(180deg,#2C4860 0%,#1C3146 100%); color:#EAF0F5; }
.sn-voices .sn-h2 { color:#EAF0F5; } .sn-voices .sn-h2 em { color:#B9D2E6; }
.sn-voices .sn-eyebrow { color:#B9D2E6; } .sn-voices .sn-sub { color:rgba(234,240,245,0.78); } .sn-voices .sn-sub em { color:#B9D2E6; }
.sn-quote-card { background:rgba(234,240,245,0.06); border:1px solid rgba(185,210,230,0.3); padding:var(--s-7,2.5rem) var(--s-6,1.5rem); border-radius:4px; text-align:center; }
.sn-quote-mark { font-family:var(--f-serif,serif); font-size:5rem; color:#B9D2E6; line-height:1; margin-bottom:var(--s-2,0.5rem); opacity:0.7; }
.sn-quote-text { font-family:var(--f-serif,serif); font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.5; color:#EAF0F5; margin-bottom:var(--s-4,1rem); font-style:italic; }
.sn-quote-cite { display:flex; flex-direction:column; gap:4px; margin-bottom:var(--s-4,1rem); }
.sn-quote-author { font-family:var(--f-mono,monospace); font-size:0.92rem; color:#B9D2E6; letter-spacing:0.1em; text-transform:uppercase; }
.sn-quote-source { font-size:0.84rem; color:rgba(234,240,245,0.55); font-style:italic; }
.sn-quote-actions { display:flex; justify-content:center; gap:var(--s-3,0.75rem); flex-wrap:wrap; }
.sn-quote-fav { background:transparent; border:1px solid rgba(185,210,230,0.4); color:#EAF0F5; padding:0.5rem 1rem; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:0.88rem; transition:all .15s; }
.sn-quote-fav:hover { border-color:#B9D2E6; color:#B9D2E6; }
.sn-quote-fav.is-favorited { background:#B9D2E6; color:#1C3146; border-color:#B9D2E6; }

/* final */
.sn-final { background:var(--sn-paper); text-align:center; padding:var(--s-12,5rem) 0; }
[data-theme="dark"] .sn-final { background:#121417; }
.sn-final-mark { font-family:var(--f-serif,serif); font-size:4.5rem; font-weight:800; color:var(--sn-slate); line-height:1; margin-bottom:var(--s-4,1rem); opacity:0.85; letter-spacing:-0.03em; }
.sn-final-quote { font-family:var(--f-serif,serif); font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.45; color:var(--sn-ink); font-style:italic; max-width:820px; margin:0 auto var(--s-3,0.75rem); font-weight:500; }
.sn-final-quote em { color:var(--sn-slate-d); }
.sn-final-cite { font-family:var(--f-mono,monospace); font-size:0.92rem; color:var(--sn-mute); letter-spacing:0.08em; margin-bottom:var(--s-5,1.25rem); }