:root {
      --bg: #07080f;
      --bg-light: #0d0e1a;
      --bg-card: rgba(255,255,255,0.035);
      --accent-blue: #4f8ef7;
      --accent-purple: #a855f7;
      --accent-pink: #ec4899;
      --accent-gold: #c9a84c;
      --text: #eeeef2;
      --text-muted: #8888a8;
      --text-dim: #555570;
      --border: rgba(255,255,255,0.07);
      --border-hover: rgba(168,85,247,0.25);
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'DM Sans', sans-serif;
      --font-mono: 'DM Mono', monospace;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 70% at 5% 15%, rgba(79,142,247,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 95% 5%, rgba(168,85,247,0.08) 0%, transparent 50%),
        radial-gradient(ellipse 80% 70% at 50% 95%, rgba(236,72,153,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 75% 55%, rgba(79,142,247,0.04) 0%, transparent 45%);
      pointer-events: none;
      z-index: 0;
      animation: ambientShift 25s ease-in-out infinite alternate;
    }
    @keyframes ambientShift {
      0% { opacity: 0.7; transform: scale(1) rotate(0deg); }
      100% { opacity: 1; transform: scale(1.08) rotate(1deg); }
    }
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
    }
    a { color: inherit; text-decoration: none; }
    .container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 1;
    }
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #000000;
      border-bottom: 1px solid var(--border);
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
    }
    .logo img {
      height: 80px;
      display: block;
      background: #000;
    }
    .nav-links {
      display: flex;
      gap: 40px;
      font-size: 0.825rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .nav-links a { color: var(--text-muted); transition: color 0.2s; }
    .nav-links a:hover { color: var(--text); }
    @media (max-width: 768px) { .nav-links { display: none; } }
    .hero {
      padding: 120px 0 80px;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp 0.8s 0.2s forwards;
    }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5.5vw, 4.5rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      animation: fadeUp 0.9s 0.4s forwards;
    }
    .hero h1 em {
      font-style: italic;
      background: linear-gradient(28deg, #fa8610, #f23d50 48%, #ec008c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-subtitle {
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 580px;
      margin: 0 auto 20px;
      line-height: 1.75;
      font-weight: 300;
      opacity: 0;
      animation: fadeUp 0.9s 0.6s forwards;
    }
    .hero-meta {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--text-dim);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 48px;
      opacity: 0;
      animation: fadeUp 0.9s 0.7s forwards;
    }
    .hero-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 0.9s 0.8s forwards;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .btn-primary {
      padding: 13px 28px;
      background: linear-gradient(105deg, #ffb05e, #ff65b5);
      color: #2e061c;
      border-radius: 6px;
      font-weight: 600;
      font-size: 0.875rem;
      letter-spacing: 0.02em;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(236,0,140,0.22);
    }
    .btn-secondary {
      padding: 13px 28px;
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--text-muted);
      border-radius: 6px;
      font-weight: 500;
      font-size: 0.875rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-secondary:hover {
      border-color: rgba(168,85,247,0.35);
      color: var(--text);
    }
    section {
      padding: 88px 0;
      position: relative;
      z-index: 1;
    }
    .section-tag {
      font-family: var(--font-mono);
      color: var(--accent-blue);
      font-size: 0.7rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 16px;
    }
    .section-tag.gold { color: var(--accent-gold); }
    .section-header {
      max-width: 680px;
      margin: 0 auto 64px;
      text-align: center;
    }
    h2 {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -0.02em;
    }
    .section-divider {
      width: 40px;
      height: 2px;
      background: linear-gradient(90deg, #fa8610, #f23d50 48%, #ec008c);
      border-radius: 2px;
      margin: 0 auto 28px;
    }
    .section-subtitle {
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.75;
      font-weight: 300;
    }
    .why-card {
      max-width: 800px;
      margin: 0 auto;
      background: var(--bg-card);
      border: 1px solid rgba(201,168,76,0.15);
      border-radius: 20px;
      padding: 56px 60px;
      position: relative;
      overflow: hidden;
    }
    .why-card::before {
      content: '';
      position: absolute;
      top: -80px; left: -80px;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(201,168,76,0.08), transparent 70%);
      pointer-events: none;
    }
    .why-card::after {
      content: '';
      position: absolute;
      bottom: -60px; right: -60px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(168,85,247,0.07), transparent 70%);
      pointer-events: none;
    }
    .why-card p {
      font-size: 1.05rem;
      line-height: 1.9;
      color: var(--text-muted);
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }
    .why-card p:last-child { margin-bottom: 0; }
    .why-card .pullquote {
      font-family: var(--font-display);
      font-size: 1.2rem;
      line-height: 1.7;
      color: var(--text);
      font-style: italic;
      border-left: 3px solid var(--accent-gold);
      padding-left: 24px;
      margin: 32px 0;
      position: relative;
      z-index: 1;
    }
    .why-card .closing {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-style: italic;
      color: var(--accent-gold);
      position: relative;
      z-index: 1;
      margin-top: 32px;
      margin-bottom: 0;
    }
    @media (max-width: 700px) { .why-card { padding: 36px 28px; } }
    .plain-grid {
      display: grid;
      gap: 16px;
      max-width: 960px;
      margin: 0 auto;
      grid-template-columns: repeat(2, 1fr);
    }
    @media (max-width: 700px) { .plain-grid { grid-template-columns: 1fr; } }
    .plain-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      transition: border-color 0.3s, transform 0.3s;
    }
    .plain-card:hover {
      border-color: var(--border-hover);
      transform: translateY(-3px);
    }
    .plain-icon {
      font-size: 1.5rem;
      margin-bottom: 16px;
      display: block;
    }
    .plain-card h3 {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--text);
    }
    .plain-card p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.7; }
    .tiers-list { max-width: 820px; margin: 0 auto; }
    .tier {
      padding: 28px 36px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      margin-bottom: 14px;
      transition: border-color 0.3s;
      position: relative;
      overflow: hidden;
    }
    .tier::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--accent-gold), var(--accent-purple));
      border-radius: 2px 0 0 2px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .tier:hover { border-color: rgba(201,168,76,0.2); }
    .tier:hover::before { opacity: 1; }
    .tier-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }
    .tier-badge {
      padding: 4px 10px;
      background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(168,85,247,0.1));
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--accent-gold);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .tier h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text); }
    .tier p { color: var(--text-muted); line-height: 1.7; font-size: 0.9375rem; }
    .tier ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
    .tier ul li { color: var(--text-muted); font-size: 0.9rem; padding-left: 20px; position: relative; line-height: 1.6; }
    .tier ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent-gold); font-size: 0.8rem; }
    .accountability-card {
      max-width: 780px;
      margin: 0 auto;
      background: linear-gradient(135deg, rgba(201,168,76,0.04), rgba(168,85,247,0.04));
      border: 1px solid rgba(201,168,76,0.12);
      border-radius: 20px;
      padding: 48px 52px;
      text-align: center;
    }
    .accountability-card .big-quote {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-style: italic;
      line-height: 1.5;
      color: var(--text);
      margin-bottom: 24px;
    }
    .accountability-card p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.75; max-width: 560px; margin: 0 auto; }
    @media (max-width: 700px) { .accountability-card { padding: 36px 28px; } }
    .download-section { background: linear-gradient(180deg, transparent, rgba(168,85,247,0.03), transparent); }
    .download-card {
      max-width: 700px;
      margin: 0 auto;
      background: var(--bg-card);
      border: 1px solid rgba(168,85,247,0.2);
      border-radius: 20px;
      padding: 52px 56px;
      text-align: center;
    }
    .download-card h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; }
    .download-card p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.75; margin-bottom: 36px; }
    .download-meta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
    .tag { padding: 4px 12px; background: rgba(168,85,247,0.08); color: var(--accent-purple); border-radius: 5px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; }
    .tag.gold { background: rgba(201,168,76,0.08); color: var(--accent-gold); }
    @media (max-width: 700px) { .download-card { padding: 36px 28px; } }
    .authors-grid { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 640px) { .authors-grid { grid-template-columns: 1fr; } }
    .author-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: border-color 0.3s; }
    .author-card:hover { border-color: var(--border-hover); }
    .author-label { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 12px; }
    .author-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
    .author-role { font-size: 0.8rem; color: var(--accent-purple); font-family: var(--font-mono); margin-bottom: 18px; }
    .author-card p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.65; }
    .ai-badge {
      display: inline-flex; align-items: center; position: relative; top: -0.6em;
      padding: 1px 4px; background: rgba(168,85,247,0.18); border: 1px solid rgba(168,85,247,0.3);
      border-radius: 3px; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600;
      color: var(--accent-purple); line-height: 1; letter-spacing: 0.05em;
    }
    footer {
      border-top: 1px solid var(--border); padding: 44px 0; text-align: center;
      color: var(--text-dim); font-size: 0.825rem; position: relative; z-index: 1;
      font-family: var(--font-mono); letter-spacing: 0.04em; background: #000;
    }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .back-to-top {
      position: fixed; bottom: 28px; right: 28px; width: 42px; height: 42px;
      background: rgba(7,8,15,0.9); border: 1px solid rgba(168,85,247,0.3);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 200; opacity: 0; transform: translateY(12px);
      transition: opacity 0.3s, transform 0.3s, border-color 0.2s; color: var(--accent-purple);
    }
    .back-to-top.visible { opacity: 1; transform: translateY(0); }
    .back-to-top:hover { border-color: rgba(168,85,247,0.6); }

.btn-primary svg path { stroke: currentColor; }

.why-card .accountability-qa strong { font-style: normal; font-weight: 700; }
.why-card .accountability-qa em { font-style: italic; }
/* Zune accents for the personal opening and its closing line. */
.why-card {
  border:1px solid transparent;
  background:linear-gradient(#111117,#111117) padding-box,
    linear-gradient(28deg,#fa8610,#f23d50 48%,#ec008c) border-box;
}
.why-card .closing {
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.6;
  background:linear-gradient(28deg,#fa8610,#f23d50 48%,#ec008c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.section-tag, .section-tag.gold { color: #ec008c; }

/* Compact reading layout below the personal opening; its styling is untouched. */
.bill-detail { padding:48px 0; }
.bill-detail > .container { max-width:1304px; display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px 48px; align-items:start; }
.bill-detail .section-header { text-align:left; margin:0; max-width:none; }
.bill-detail .section-header h2 { font-size:2.2rem; line-height:1.15; margin-bottom:16px; }
.bill-detail .section-tag { margin-bottom:12px; }
.bill-detail .section-divider { margin:0 0 18px; }
.bill-detail .section-subtitle { font-size:.9rem; line-height:1.75; margin:0; max-width:none; }
.bill-detail .plain-grid { max-width:none; margin:0; gap:14px 28px; }
.bill-detail .plain-card { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:10px; padding:20px 0; border:0; border-top:1px solid var(--border); border-radius:0; background:none; }
.bill-detail .plain-card:hover { transform:none; }
.bill-detail .plain-icon { margin:0; font-size:1.2rem; }
.bill-detail .plain-card h3 { margin:0; font-size:1.3rem; line-height:1.3; }
.bill-detail .plain-card p { margin:0; line-height:1.7; color:#aaa6b7; }
.accountability-section > .container { display:block; }
.bill-detail .accountability-card { max-width:none; display:grid; grid-template-columns:1fr 1.15fr; gap:40px; padding:30px 34px; text-align:left; align-items:center; }
.bill-detail .accountability-card .big-quote { font-size:1.8rem; line-height:1.45; margin:0; max-width:none; }
.bill-detail .accountability-card p { max-width:none; margin:0; color:#aaa6b7; }
.bill-detail .accountability-card .big-quote { color:var(--text); }
.bill-detail .tiers-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; max-width:none; margin:0; }
.bill-detail .tier { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:14px; margin:0; padding:24px; }
.bill-detail .tier-header { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:0; }
.bill-detail .tier h3 { font-size:1.3rem; line-height:1.3; }
.bill-detail .tier p { margin:0; color:#aaa6b7; }
.bill-detail .tier ul { margin:0; gap:10px; }
.bill-detail .tier li { color:#aaa6b7; }
.bill-detail .tier-badge { color:#ff62b9; background:#ec008c0c; border-color:#ec008c33; }
.bill-detail .tier ul li::before { color:#ff62b9; }
.bill-detail.download-section { background:none; }
.bill-detail.download-section > .container { display:block; }
.bill-detail .download-card { max-width:none; padding:30px 34px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 40px; text-align:left; align-items:start; }
.bill-detail .download-card h3 { margin:0; font-size:1.8rem; }
.bill-detail .download-card p { grid-column:1; margin:0; max-width:760px; color:#aaa6b7; }
.bill-detail .download-meta { grid-column:1; margin:0; justify-content:flex-start; gap:8px; }
.bill-detail .download-card .btn-primary { grid-column:2; grid-row:1/4; align-self:center; white-space:nowrap; }
.bill-detail .authors-grid { max-width:none; margin:0; gap:12px 28px; }
.bill-detail .author-card { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:10px; padding:20px 0; border:0; border-top:1px solid var(--border); border-radius:0; background:none; }
.bill-detail .author-label,.bill-detail .author-role,.bill-detail .author-name,.bill-detail .author-card p { margin:0; }
.bill-detail .author-label { color:#ec008c; }
.bill-detail .author-role { color:#ff62b9; line-height:1.6; }
.bill-detail .author-card p { color:#aaa6b7; }
.bill-detail .authors-grid + div { grid-column:2; text-align:left !important; margin-top:0 !important; }
@media(max-width:1050px) {
 .bill-detail > .container { grid-template-columns:190px minmax(0,1fr); column-gap:30px; }
 .bill-detail .download-card { grid-template-columns:1fr; }
 .bill-detail .download-card .btn-primary { grid-column:1; grid-row:auto; justify-self:start; }
}
@media(max-width:800px) {
 .bill-detail { padding:34px 0; }
 .bill-detail > .container { grid-template-columns:1fr; gap:24px; }
 .bill-detail .section-header h2 { font-size:2rem; }
 .bill-detail .accountability-card { grid-template-columns:1fr; gap:24px; padding:26px; }
 .bill-detail .authors-grid + div { grid-column:1; }
}
@media(max-width:600px) {
 .bill-detail .plain-grid,.bill-detail .tiers-list,.bill-detail .authors-grid { grid-template-columns:1fr; }
 .bill-detail .download-card { padding:24px; }
 .bill-detail .download-card .btn-primary { white-space:normal; }
}
/* Align the opening quote card with the lower sections. */
#why > .container { max-width:1304px; }
#why .why-card { max-width:none; }

#what .dyad-icon { display:block; width:40px; height:40px; margin:0; }

/* Read the personal opening alongside a vertical plain-language summary. */
.bill-intro-shell { max-width:1304px; padding:70px 32px 48px; margin:0 auto; position:relative; z-index:1; }
.bill-intro-shell > .section-header { margin-bottom:36px; }
.bill-intro-pair { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:36px; align-items:start; }
.bill-intro-pair > section { padding:0; min-width:0; }
.bill-intro-pair > section > .container { display:block; padding:0; max-width:none; }
.bill-intro-pair .why-card { padding:36px; }
.bill-intro-pair #what .section-header { margin:0 0 22px; }
.bill-intro-pair #what .plain-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.bill-intro-pair #what .plain-card { grid-row:auto; grid-template-rows:auto auto auto; row-gap:10px; padding:20px 0; }
@media(max-width:1000px) {
 .bill-intro-shell { padding-top:48px; }
 .bill-intro-pair { grid-template-columns:1fr; gap:40px; }
 .bill-intro-pair #what .plain-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; }
 .bill-intro-pair #what .plain-card { grid-row:span 3; grid-template-rows:subgrid; }
}
@media(max-width:600px) {
 .bill-intro-shell { padding-inline:24px; }
 .bill-intro-pair .why-card { padding:28px; }
 .bill-intro-pair #what .plain-grid { grid-template-columns:1fr; }
}

.bill-intro-pair #why .section-header { text-align:left; max-width:none; margin:0 0 22px; }
.bill-intro-pair #why .section-header h2 { font-size:2.2rem; line-height:1.15; margin-bottom:16px; }
.bill-intro-pair #why .section-tag { margin-bottom:12px; }
.bill-intro-pair #why .section-divider { margin:0 0 18px; }
@media(max-width:800px) { .bill-intro-pair #why .section-header h2 { font-size:2rem; } }
/* Let the summary breathe vertically alongside the longer personal passage. */
.bill-intro-pair #what .plain-card:first-child { border-top:0; }
@media(min-width:1001px) {
  .bill-intro-pair { align-items:stretch; }
  .bill-intro-pair #what > .container { display:flex; flex-direction:column; height:100%; }
  .bill-intro-pair #what .section-header { flex-shrink:0; }
  .bill-intro-pair #what .plain-grid { margin-block:auto; padding-block:24px; }
}
