/* Privacy Policy Helper — page-specific styles.
   The design system (tokens, nav, typography, bands, fonts) is inherited
   from styles.css, which must be linked BEFORE this file. */

/* hero — simple dark band that clears the fixed nav */
.hero{
  background:var(--night);color:#fff;
  display:block;min-height:0;overflow:visible;
  padding:calc(66px + 44px) 0 56px;
}
.hero .lede{max-width:60ch;color:rgba(255,255,255,.72);margin:18px 0 0}

/* disclaimer */
.disclaimer{background:var(--paper-2);border-left:3px solid var(--signal);padding:16px 20px;margin:0;font-size:.93rem;color:var(--ink-soft)}
.disclaimer b{color:var(--ink)}

/* layout */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;padding:44px 0}
@media(max-width:900px){.grid{grid-template-columns:1fr;gap:34px}}

/* form */
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.field .hint{font-family:var(--body);font-size:.82rem;color:var(--ink-soft);margin:5px 0 0;text-transform:none;letter-spacing:0;font-weight:400}
input[type=text],input[type=email],input[type=url],select,textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line-light);border-radius:3px;padding:11px 13px;
}
textarea{resize:vertical;min-height:66px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;text-transform:none;letter-spacing:0}
.check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--signal)}
.section-label{font-family:var(--display);font-weight:400;font-size:1.28rem;margin:30px 0 16px;padding-top:20px;border-top:1px solid var(--line-light)}
.section-label:first-of-type{margin-top:0;padding-top:0;border-top:0}

/* output */
.out-wrap{position:sticky;top:86px}
.out-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.out-head h2{margin:0;font-size:1.28rem;font-weight:400}
.out-toggle{display:inline-flex;border:1px solid var(--line-light);border-radius:3px;overflow:hidden;margin-bottom:14px}
.seg{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:0;background:transparent;color:var(--ink-soft);padding:7px 13px;cursor:pointer;transition:background .15s,color .15s}
.seg + .seg{border-left:1px solid var(--line-light)}
.seg.on{background:var(--night);color:#fff}
.btn{font-family:var(--body);font-size:13px;font-weight:500;border:0;cursor:pointer;padding:9px 15px;border-radius:3px;background:var(--night);color:#fff;transition:background .15s}
.btn:hover{background:var(--canopy-2)}
.btn.copied{background:#2E7D5B}
.btn-row{display:flex;gap:9px;margin-left:auto}
.output{background:var(--night);color:#e9efe9;border-radius:4px;padding:24px 24px 26px;font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word;max-height:640px;overflow:auto}
.output .ph{color:var(--signal);font-weight:500}
.output h4{color:#fff;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.02em;margin:18px 0 6px}
.output h4:first-child{margin-top:0}

/* checklist — sits on shared .band .band-paper-2; grid of hairline-separated cards */
.todo{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-light)}
@media(max-width:760px){.todo{grid-template-columns:1fr}}
.todo li{background:var(--paper-2);padding:22px 24px}
.todo .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--signal);margin-bottom:8px}
.todo h3{margin-bottom:7px}
.todo p{margin:0;color:var(--ink-soft);font-size:.94rem}

/* footer — compact variant of the shared dark footer */
.foot{background:var(--night);color:rgba(255,255,255,.6);padding:30px 0;font-size:.85rem;border-top:1px solid var(--line-dark)}
.foot a{color:rgba(255,255,255,.8)}