/*
 * DNA Health Communications — News Awareness
 * The exact design from the original app, scoped under .na-root and namespaced
 * with the `na-` prefix so it never clashes with the host WordPress theme.
 */

.na-root{
  --paper:#F4EEE1; --card:#FBF8F1; --ink:#29241E; --stone:#6E6557;
  --clay:#B0743C; --clay-deep:#8A5A2C; --line:#E2D8C6;
  background:var(--paper); color:var(--ink); line-height:1.5;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; font-feature-settings:'ss01','cv01';
  scroll-behavior:smooth;
  /* Full-bleed: break out of the theme's centered/padded content column so the
     app reaches every screen edge (no white border left/right/top/bottom). */
  position:relative;
  width:auto;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  margin-bottom:0;
  overflow-x:hidden;
}
/* Neutralize default page gutters on views that render the app. Loaded only on
   pages that contain the shortcodes, so it won't affect the rest of the site. */
body.na-page{margin:0; padding:0; overflow-x:hidden}
body.na-page .na-root{margin-top:0; margin-bottom:0}
/* Reset within the app so the host theme can't bleed in. */
.na-root,.na-root *{box-sizing:border-box}
.na-root a{color:inherit; text-decoration:none}
.na-root h1,.na-root h2,.na-root h3,.na-root p,.na-root legend{margin:0; padding:0}
.na-root button,.na-root input,.na-root select,.na-root textarea{font-family:inherit; color:inherit}
.na-root img{display:block; max-width:100%; border:0; box-shadow:none}
.na-root fieldset{border:none; margin:0; padding:0; min-width:0}

.na-root .na-serif{font-family:'Spectral',Georgia,serif}
.na-root .na-mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.na-root .na-wrap{max-width:1120px; margin:0 auto; padding:0 24px}
@media(min-width:640px){.na-root .na-wrap{padding:0 32px}}
.na-root .na-eyebrow{font-family:'IBM Plex Mono',monospace; text-transform:uppercase;
  letter-spacing:.22em; font-size:.7rem; color:var(--clay)}

.na-root .na-brand,.na-root .na-link,.na-root .na-btn-light,.na-root .na-btn-ghost,.na-root .na-btn-dark{cursor:pointer}

/* header */
.na-root .na-header{position:relative; z-index:5; height:64px;
  background:rgba(244,238,225,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(226,216,198,.8)}
.na-root .na-hdr{height:64px; display:flex; align-items:center; justify-content:space-between}
.na-root .na-brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.na-root .na-brand img{height:36px; width:auto; display:block}
.na-root .na-brand .na-bn{display:flex; flex-direction:column; line-height:1}
.na-root .na-brand .na-bn b{font-family:'Spectral',serif; font-weight:600; font-size:1.125rem; letter-spacing:.03em; color:var(--ink)}
.na-root .na-brand .na-bn small{font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.22em; color:rgba(110,101,87,.85); margin-top:2px}
.na-root .na-nav{display:flex; align-items:center; gap:24px}
.na-root .na-nav a.na-link{font-size:.875rem; font-weight:500; color:var(--stone); text-decoration:none; display:none}
@media(min-width:640px){.na-root .na-nav a.na-link{display:inline}}
.na-root .na-nav a.na-link:hover{color:var(--ink)}
.na-root .na-btn-dark{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper);
  border-radius:9999px; padding:8px 16px; font-size:.875rem; font-weight:500; text-decoration:none;
  border:none; cursor:pointer; transition:background .2s}
.na-root .na-btn-dark:hover{background:var(--clay-deep)}

/* hero */
.na-root .na-hero{position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,#29241E 0%,#5E3F23 55%,#8A5A2C 100%)}
.na-root .na-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4}
.na-root .na-hero-scrim{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,24,20,.78),rgba(28,24,20,.45) 45%,rgba(28,24,20,.82))}
.na-root .na-hero-in{position:relative; padding-top:56px; padding-bottom:80px}
@media(min-width:640px){.na-root .na-hero-in{padding-top:80px; padding-bottom:112px}}
.na-root .na-hero .na-eyebrow{color:#E9C9A1}
.na-root .na-hero h1{font-family:'Spectral',serif; color:var(--paper); margin:20px 0 0; max-width:48rem;
  font-size:2.25rem; line-height:1.08; font-weight:600}
@media(min-width:640px){.na-root .na-hero h1{font-size:3rem}}
@media(min-width:768px){.na-root .na-hero h1{font-size:3.75rem}}
.na-root .na-hero p.na-lead{color:rgba(244,238,225,.8); max-width:36rem; margin:20px 0 0; font-size:1rem; line-height:1.6}
@media(min-width:640px){.na-root .na-hero p.na-lead{font-size:1.125rem}}
.na-root .na-hero-cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:36px}
.na-root .na-btn-light{display:inline-flex; align-items:center; gap:8px; background:var(--paper); color:var(--ink);
  border-radius:9999px; padding:12px 20px; font-size:.875rem; font-weight:500; text-decoration:none; transition:background .2s}
.na-root .na-btn-light:hover{background:#fff}
.na-root .na-btn-ghost{display:inline-flex; align-items:center; gap:8px; color:var(--paper);
  border:1px solid rgba(244,238,225,.4); border-radius:9999px; padding:12px 20px; font-size:.875rem; font-weight:500; text-decoration:none; transition:background .2s}
.na-root .na-btn-ghost:hover{background:rgba(244,238,225,.1)}
.na-root .na-hero-stats{display:flex; flex-wrap:wrap; gap:16px 40px; margin:48px 0 0; padding:24px 0 0;
  border-top:1px solid rgba(244,238,225,.15)}
.na-root .na-hero-stats .na-hs{display:flex; align-items:baseline; gap:8px}
.na-root .na-hero-stats .na-hs b{font-family:'Spectral',serif; font-weight:500; font-size:1.5rem; color:var(--paper)}
.na-root .na-hero-stats .na-hs span{font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:rgba(244,238,225,.6)}

/* sections */
.na-root .na-section{padding:80px 0}
@media(min-width:640px){.na-root .na-section{padding:96px 0}}
.na-root #na-stories,.na-root #na-form{scroll-margin-top:24px}
.na-root .na-sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.na-root .na-sec-head h2{font-family:'Spectral',serif; color:var(--ink); margin:8px 0 0; font-size:1.875rem; line-height:1.2; max-width:36rem; font-weight:600}
@media(min-width:640px){.na-root .na-sec-head h2{font-size:2.25rem}}
.na-root .na-sec-count{font-family:'IBM Plex Mono',monospace; font-size:.875rem; color:rgba(110,101,87,.7); display:none}
@media(min-width:640px){.na-root .na-sec-count{display:block}}
.na-root .na-grid{display:grid; grid-template-columns:1fr; gap:24px; margin-top:40px}
@media(min-width:640px){.na-root .na-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.na-root .na-grid{grid-template-columns:1fr 1fr 1fr}}

.na-root .na-card{display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line);
  background:var(--card); border-radius:16px; box-shadow:0 1px 2px rgba(41,36,30,.04);
  transition:transform .3s, box-shadow .3s}
.na-root .na-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(41,36,30,.35)}
.na-root .na-art{position:relative; aspect-ratio:4/3; overflow:hidden; background:rgba(41,36,30,.05)}
.na-root .na-art-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.na-root .na-badge{position:absolute; left:12px; top:12px; display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); padding:4px 12px; border-radius:9999px;
  color:#fff; font-size:.72rem; font-weight:500}
.na-root .na-badge .na-dot{width:6px; height:6px; border-radius:9999px}
.na-root .na-statband{position:absolute; inset:auto 0 0 0; display:flex; flex-wrap:wrap; gap:4px 16px;
  padding:32px 12px 10px; background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.na-root .na-statband .na-stat{font-family:'IBM Plex Mono',monospace; font-size:.72rem; line-height:1; color:rgba(255,255,255,.55)}
.na-root .na-statband .na-stat b{font-weight:500; color:rgba(255,255,255,.95)}
.na-root .na-card-body{display:flex; flex-direction:column; flex:1; padding:24px}
.na-root .na-card-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.na-root .na-caption{font-family:'Spectral',serif; font-style:italic; font-size:.8rem; color:rgba(110,101,87,.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.na-root .na-card-title{font-family:'Spectral',serif; font-size:1.5rem; line-height:1.15; color:var(--ink); margin:12px 0 0; font-weight:600}
.na-root .na-card-desc{font-size:.95rem; line-height:1.6; color:var(--stone); margin:12px 0 0}
.na-root .na-card-foot{margin-top:auto; padding-top:24px}
.na-root .na-meta{font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:rgba(110,101,87,.8); margin:0}
.na-root .na-source{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.875rem; font-weight:500; color:var(--clay); text-decoration:none; transition:color .2s}
.na-root .na-source:hover{color:var(--clay-deep)}
.na-root .na-source .na-arr{font-size:.9rem}

/* divider */
.na-root .na-rule{border:none; border-top:1px solid var(--line)}

/* form */
.na-root .na-form-head h2{font-family:'Spectral',serif; color:var(--ink); margin:8px 0 0; font-size:1.875rem; font-weight:600}
@media(min-width:640px){.na-root .na-form-head h2{font-size:2.25rem}}
.na-root .na-form-head p{color:var(--stone); margin:12px 0 0}
.na-root .na-narrow{max-width:36rem; margin:0 auto}
.na-root form.na-card2{border:1px solid var(--line); background:var(--card); border-radius:16px; padding:24px; margin-top:32px}
@media(min-width:640px){.na-root form.na-card2{padding:32px}}
.na-root .na-flabel{display:block; font-family:'Spectral',serif; font-size:1.125rem; color:var(--ink); font-weight:500}
.na-root .na-finput{margin-top:8px; width:100%; border:1px solid var(--line); background:rgba(244,238,225,.4);
  border-radius:12px; padding:12px 16px; color:var(--ink); font-size:1rem; font-family:inherit}
.na-root .na-finput::placeholder{color:rgba(110,101,87,.5)}
.na-root .na-finput:focus{outline:none; border-color:var(--clay); background:var(--card); box-shadow:none}
.na-root .na-block{margin-top:28px}
.na-root legend.na-flabel{padding:0}
.na-root .na-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.na-root .na-chip{cursor:pointer; border:1px solid var(--line); background:rgba(244,238,225,.4); color:var(--ink);
  border-radius:9999px; padding:8px 16px; font-size:.875rem; transition:border-color .2s,background .2s,color .2s}
.na-root .na-chip:hover{border-color:rgba(176,116,60,.5)}
.na-root .na-chip input{position:absolute; opacity:0; width:0; height:0}
.na-root .na-chip.na-sel{border-color:var(--clay); background:var(--clay); color:#fff}
.na-root .na-opts{display:grid; gap:10px; margin-top:16px}
.na-root .na-opt{display:flex; align-items:center; gap:12px; cursor:pointer; border:1px solid var(--line);
  background:rgba(244,238,225,.4); border-radius:12px; padding:12px 16px; transition:border-color .2s,background .2s}
.na-root .na-opt:hover{border-color:rgba(176,116,60,.5)}
.na-root .na-opt.na-sel{border-color:var(--clay); background:rgba(176,116,60,.06)}
.na-root .na-opt input{position:absolute; opacity:0; width:0; height:0}
.na-root .na-box{flex:none; width:20px; height:20px; border-radius:6px; border:1px solid rgba(110,101,87,.4);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s,background .2s}
.na-root .na-opt.na-sel .na-box{border-color:var(--clay); background:var(--clay)}
.na-root .na-tick{color:var(--paper); font-size:.8rem; line-height:1; opacity:0; transition:opacity .2s}
.na-root .na-opt.na-sel .na-tick{opacity:1}
.na-root .na-opt-label b{font-weight:600; color:var(--ink)}
.na-root .na-optsub{color:var(--stone)}
.na-root .na-err{color:var(--clay-deep); font-size:.875rem; margin:8px 0 0}
.na-root .na-banner{margin-top:28px; border:1px solid rgba(176,116,60,.4); background:rgba(176,116,60,.06);
  color:var(--clay-deep); border-radius:12px; padding:12px 16px; font-size:.875rem}
.na-root .na-submit{margin-top:28px; display:inline-flex; width:100%; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:var(--paper); border:none; border-radius:9999px; padding:14px 24px;
  font-weight:500; font-size:1rem; cursor:pointer; transition:background .2s; font-family:inherit}
@media(min-width:640px){.na-root .na-submit{width:auto}}
.na-root .na-submit:hover{background:var(--clay-deep)}
.na-root .na-submit[disabled]{opacity:.7; cursor:not-allowed}
.na-root .na-spin{width:16px; height:16px; border:2px solid rgba(244,238,225,.3); border-top-color:var(--paper);
  border-radius:9999px; animation:na-spin .7s linear infinite; display:inline-block}
@keyframes na-spin{to{transform:rotate(360deg)}}

.na-root .na-success{max-width:36rem; margin:0 auto; border:1px solid var(--line); background:var(--card);
  border-radius:16px; padding:40px; text-align:center}
.na-root .na-success .na-ring{width:56px; height:56px; border-radius:9999px; background:rgba(176,116,60,.12); color:var(--clay);
  display:flex; align-items:center; justify-content:center; margin:0 auto; font-size:1.6rem}
.na-root .na-success h2{font-family:'Spectral',serif; font-size:1.5rem; color:var(--ink); margin:20px 0 0; font-weight:600}
.na-root .na-success p{color:var(--stone); margin:8px 0 0}
.na-root .na-btn-outline{display:inline-flex; align-items:center; justify-content:center; margin-top:28px;
  border:1px solid var(--line); border-radius:9999px; padding:10px 20px; font-size:.875rem; font-weight:500;
  color:var(--ink); background:none; cursor:pointer; font-family:inherit; transition:background .2s}
.na-root .na-btn-outline:hover{background:var(--paper)}

/* footer */
.na-root .na-footer{border-top:1px solid var(--line)}
.na-root .na-foot{display:flex; flex-direction:column; gap:16px; padding-top:40px; padding-bottom:40px}
@media(min-width:640px){.na-root .na-foot{flex-direction:row; align-items:center; justify-content:space-between}}
.na-root .na-foot .na-fbrand{display:flex; align-items:center; gap:12px}
.na-root .na-foot .na-fbrand img{height:32px}
.na-root .na-foot .na-fbrand b{font-family:'Spectral',serif; font-weight:600; font-size:1rem; letter-spacing:.03em}
.na-root .na-foot .na-fbrand small{font-family:'IBM Plex Mono',monospace; font-size:.6rem; text-transform:uppercase; letter-spacing:.22em; color:rgba(110,101,87,.7)}
.na-root .na-foot p{max-width:28rem; font-size:.875rem; color:rgba(110,101,87,.7); margin:0}

.na-root .na-note{background:rgba(176,116,60,.08); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.na-root .na-note .na-wrap{padding-top:14px; padding-bottom:14px}
.na-root .na-note p{margin:0; font-size:.8rem; color:var(--stone)}
.na-root .na-note b{color:var(--ink)}

/* results viewer (same aesthetic) */
.na-root .na-summary{display:flex; flex-wrap:wrap; gap:16px; margin-top:40px}
.na-root .na-statcard{flex:1; min-width:150px; border:1px solid var(--line); background:var(--card); border-radius:16px; padding:20px 24px}
.na-root .na-statcard b{display:block; font-family:'Spectral',serif; font-size:2rem; font-weight:600; color:var(--ink); line-height:1.1}
.na-root .na-statcard span{display:block; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(110,101,87,.8)}
.na-root .na-results{margin-top:32px; border:1px solid var(--line); background:var(--card); border-radius:16px; overflow:hidden}
.na-root .na-table-wrap{overflow-x:auto}
.na-root .na-table{width:100%; border-collapse:collapse; font-size:.9rem}
.na-root .na-table th,.na-root .na-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.na-root .na-table th{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:rgba(110,101,87,.9); background:rgba(244,238,225,.5); white-space:nowrap}
.na-root .na-table tbody tr:last-child td{border-bottom:none}
.na-root .na-table tbody tr:hover{background:rgba(244,238,225,.35)}
.na-root .na-table td.na-td-name{font-family:'Spectral',serif; font-weight:600; color:var(--ink); white-space:nowrap}
.na-root .na-table td.na-td-when{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:rgba(110,101,87,.85); white-space:nowrap}
.na-root .na-table td.na-td-num{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:rgba(110,101,87,.7)}
.na-root .na-pill{display:inline-block; border:1px solid var(--line); border-radius:9999px; padding:2px 10px; font-size:.72rem; margin:2px 4px 2px 0; background:rgba(176,116,60,.08); color:var(--clay-deep)}
.na-root .na-pill.na-pill-none{background:rgba(244,238,225,.5); color:rgba(110,101,87,.7)}
.na-root .na-empty{margin-top:40px; border:1px dashed var(--line); border-radius:16px; padding:48px 24px; text-align:center; color:var(--stone)}