.ip-hero {
  position:relative;
  max-width:100%;
  overflow-x:clip;
  background:linear-gradient(180deg,var(--a-accent-06),var(--c-bg) 85%);
}
.ip-hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    linear-gradient(90deg,transparent 48%,var(--a-ink-04) 48%,var(--a-ink-04) 49%,transparent 49%) 0 0 / 180px 150px,
    linear-gradient(0deg,transparent 58%,var(--a-ink-04) 58%,var(--a-ink-04) 59%,transparent 59%) 0 0 / 180px 150px;
  mask-image:linear-gradient(90deg,var(--mask-solid),transparent 38%,transparent 62%,var(--mask-solid));
}
.ip-hero__inner { position:relative; padding-top:88px; padding-bottom:104px }
.ip-intro { max-width:780px; margin:0 auto 46px; text-align:center }
.ip-intro h1 { margin-top:18px }
.ip-intro p { max-width:660px; margin:24px auto 0; color:var(--c-muted); font-size:18px }
.ip-window { position:relative; width:min(100%,780px); margin-inline:auto; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--hl-inset),var(--sh-panel) }
.ip-window::before { content:""; position:absolute; top:-1px; left:14%; right:14%; height:2px; background:linear-gradient(90deg,transparent,var(--c-accent),var(--c-accent-2),transparent) }
.ip-window__bar { display:flex; align-items:center; gap:13px; min-height:40px; padding:0 18px; border-bottom:1px solid var(--c-border); border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--c-panel-2) }
.ip-window__dots { display:flex; gap:6px }
.ip-window__dots i { width:7px; height:7px; border-radius:50%; background:var(--c-border-strong) }
.ip-window__code,.ip-window__mark,.ip-note__key,.ip-guide__label { font:600 11px/1.5 var(--font-mono); letter-spacing:.09em }
.ip-window__code { color:var(--c-muted) }
.ip-window__mark { margin-left:auto; color:var(--c-faint) }
.ip-window__body { padding:32px }
.ip-window__heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px }
.ip-window__heading h2 { margin-top:8px; font-size:30px }
.ip-state { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-muted); font-size:13px }
.ip-state::before { content:""; width:7px; height:7px; flex:none; border-radius:50%; background:var(--c-faint) }
.ip-state.is-ready::before { background:var(--c-success) }
.ip-state.is-error::before { background:var(--c-warn) }
.ip-feedback { margin:12px 0 24px; color:var(--c-muted); font-size:14px }
.ip-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:0; overflow:hidden; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-border) }
.ip-results > div { min-width:0; padding:18px 20px; background:var(--c-panel) }
.ip-results > .ip-results__primary { grid-column:1 / -1; background:var(--a-accent-05) }
.ip-results dt { margin-bottom:7px; color:var(--c-muted); font-size:13px }
.ip-results dd { min-width:0; margin:0; overflow-wrap:anywhere; font-size:17px; font-weight:650; line-height:1.45 }
.ip-results__primary dd { font:700 clamp(22px,3vw,32px)/1.35 var(--font-mono); letter-spacing:-.02em }
.ip-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px }
.ip-actions button:disabled { opacity:.55; cursor:not-allowed; transform:none }
.ip-copy-note { min-height:1.5em; margin:10px 0 0; color:var(--c-accent-dark); font-size:13px }
.ip-reading__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.ip-note { min-width:0; padding:30px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--hl-inset),var(--sh-soft) }
.ip-note__key { color:var(--c-accent-dark) }
.ip-note h3 { margin:16px 0 12px }
.ip-note p { margin:0; color:var(--c-muted); font-size:15px }
.ip-guide { background:var(--c-ink); color:var(--c-on-ink) }
.ip-guide__inner { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:9%; padding-top:80px; padding-bottom:80px }
.ip-guide .eyebrow { color:var(--c-accent-2) }
.ip-guide h2 { margin-top:18px; color:var(--c-on-ink) }
.ip-guide__lead p { margin:20px 0 0; color:var(--c-on-ink-muted) }
.ip-guide__steps { display:grid; gap:0 }
.ip-guide__steps > div { padding:20px 0; border-bottom:1px solid var(--c-on-ink-line) }
.ip-guide__steps > div:first-child { padding-top:0 }
.ip-guide__steps > div:last-child { border-bottom:0; padding-bottom:0 }
.ip-guide__label { color:var(--c-accent-2) }
.ip-guide__steps p { margin:8px 0 0; color:var(--c-on-ink-muted); font-size:15px }
.ip-privacy { padding-top:72px; padding-bottom:96px }
.ip-privacy__panel { max-width:850px; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--hl-inset),var(--sh-soft) }
.ip-privacy h2 { margin-top:12px; font-size:30px }
.ip-privacy p { margin:14px 0 12px; color:var(--c-muted); font-size:15px }
.ip-privacy a { display:inline-flex; align-items:center; min-height:36px; color:var(--c-accent-dark); font-size:14px; font-weight:650; text-decoration:none }
.ip-privacy a:hover { text-decoration:underline; text-underline-offset:4px }
@media (max-width:768px) {
  .ip-hero__inner { padding-top:64px; padding-bottom:72px }
  .ip-guide__inner { grid-template-columns:1fr; gap:36px }
}
@media (max-width:640px) {
  .ip-hero__inner { padding-top:48px; padding-bottom:64px }
  .ip-intro { margin-bottom:32px }
  .ip-intro p { font-size:16px }
  .ip-window__body { padding:20px }
  .ip-window__heading h2 { font-size:26px }
  .ip-results { grid-template-columns:1fr }
  .ip-results > .ip-results__primary { grid-column:auto }
  .ip-results > div { padding:15px }
  .ip-reading__grid { grid-template-columns:1fr }
  .ip-note { padding:24px }
  .ip-guide__inner { padding-top:64px; padding-bottom:64px }
  .ip-privacy { padding-top:64px; padding-bottom:72px }
  .ip-privacy__panel { padding:24px }
}
@media (max-width:360px) {
  .ip-window__mark { display:none }
  .ip-actions .btn { width:100% }
}