/* =========================================================
   1. Design tokens and global defaults
   ========================================================= */
:root{
  --coral:#e57373;
  --coral-dark:#c65353;
  --aqua:#b9eae3;
  --purple:#ba68c8;
  --green:#aed581;
  --yellow:#ffd54f;
  --ink:#263238;
  --muted:#607078;
  --paper:#fffdf9;
  --line:#e7e2dc;
  --shadow:0 18px 45px rgba(38,50,56,.11);
  --radius:22px;
  --max:1180px
}

.blog-share{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.5rem}
.blog-share h2{font-size:1.25rem;margin:0 0 1rem}
.blog-share-links{display:flex;flex-wrap:wrap;gap:.65rem}
.blog-share-links a{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:.9rem;font-weight:700;padding:.55rem .9rem;text-decoration:none}
.blog-share-links a:hover{background:var(--aqua);border-color:var(--coral)}
.blog-performance-stats .stat-card{cursor:default}

/* =========================================================
   The Winning Tool
   ========================================================= */

/* Section spacing */
.winning-tool-page .page-banner{
  padding:2.25rem 0 1.75rem
}

.tool-compass-section{
  padding:1.5rem 0 0
}

.tool-component-nav{
  margin-top:.5rem
}

.tool-landing{
  padding:1.5rem 0 3.5rem
}

/* Compass heading */
.tool-compass-heading{
  margin-bottom:1rem
}

@keyframes elliot-link-glow{
  0%,100%{
    filter:drop-shadow(0 0 4px rgba(229,115,115,.5)) drop-shadow(0 0 8px rgba(185,234,227,.45))
  }
  50%{
    filter:drop-shadow(0 0 9px rgba(229,115,115,.95)) drop-shadow(0 0 18px rgba(185,234,227,.9))
  }
}

/* Interactive compass */
.tool-compass-interactive{
  align-items:stretch;
  display:grid;
  gap:2rem;
  grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr);
  margin:.75rem auto .5rem;
  max-width:1120px
}

.winning-starburst{
  display:block;
  height:auto;
  margin:0;
  max-width:720px;
  overflow:visible;
  width:100%
}

.winning-starburst .component path,
.winning-starburst .area path{
  stroke:#fff;
  stroke-width:3;
  transition:filter .18s
}

.winning-starburst a:hover path,
.winning-starburst a:focus path,
.winning-starburst .component-static:hover path{
  filter:brightness(1.12)
}

.winning-starburst text{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  pointer-events:none;
  text-anchor:middle
}

.winning-starburst .component-label{
  fill:#172126;
  font-size:16px
}

.winning-starburst .area-label{
  fill:#fff;
  font-size:22px;
  text-decoration:underline
}

.winning-starburst .area-note{
  fill:#fff;
  font-size:15px;
  font-weight:600
}

.winning-starburst .wellness-ring{
  fill:none;
  stroke:#000;
  stroke-width:42
}

.winning-starburst .wellness-label{
  fill:#fff;
  font-size:20px;
  letter-spacing:.02em
}

.winning-starburst .keyhole{
  fill:#111
}

/* Live definition panel beside the compass */
.compass-preview-panel{
  background:linear-gradient(145deg,#fff 0%,#fff9f5 55%,#edf9f7 100%);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  display:flex;
  min-height:460px;
  overflow:hidden;
  position:relative
}

.compass-preview-elliot{
  align-items:center;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  inset:0;
  justify-content:center;
  padding:2rem;
  position:absolute;
  text-decoration:none;
  z-index:1
}

.compass-preview-elliot img{
  animation:elliot-link-glow 2.2s ease-in-out infinite;
  display:block;
  height:auto;
  max-height:72%;
  object-fit:contain;
  transition:filter .25s ease,opacity .25s ease,transform .25s ease;
  width:min(270px,82%)
}

.compass-preview-elliot span{
  font-size:.9rem;
  font-weight:800;
  margin-top:.5rem;
  transition:opacity .2s ease
}

.compass-preview-elliot:hover img,
.compass-preview-elliot:focus img{
  filter:drop-shadow(0 0 8px rgba(229,115,115,.95)) drop-shadow(0 0 18px rgba(185,234,227,.95));
  transform:scale(1.04)
}

.compass-preview-elliot:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:-7px
}

.compass-preview-copy{
  align-self:center;
  opacity:0;
  padding:2.5rem;
  pointer-events:none;
  position:relative;
  transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  visibility:hidden;
  width:100%;
  z-index:2
}

.compass-preview-copy h3{
  font-size:clamp(1.65rem,2.4vw,2.25rem)
}

.compass-preview-copy > p:not(.eyebrow){
  font-size:1.05rem
}

.compass-preview-panel.has-preview .compass-preview-elliot{
  pointer-events:none
}

.compass-preview-panel.has-preview .compass-preview-elliot img{
  animation:none;
  filter:none;
  opacity:.12;
  transform:scale(1.12)
}

.compass-preview-panel.has-preview .compass-preview-elliot span{
  opacity:0
}

.compass-preview-panel.has-preview .compass-preview-copy{
  opacity:1;
  pointer-events:auto;
  transform:none;
  visibility:visible
}

.winning-starburst [data-compass-item].is-previewing path,
.winning-starburst [data-compass-item].is-previewing .wellness-ring{
  filter:brightness(1.13) drop-shadow(0 0 5px rgba(38,50,56,.32))
}

.compass-preview-field + .compass-preview-field{
  border-top:1px solid var(--line);
  margin-top:1.5rem;
  padding-top:1.5rem
}

.compass-preview-field small{
  display:block;
  margin:-.25rem 0 .45rem
}

/* Accessible text navigation below the compass */
.tool-topic-links{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.tool-topic-link{
  background:#fff;
  border-left:7px solid var(--coral);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(38,50,56,.08);
  font-weight:800;
  padding:.8rem 1rem;
  text-decoration:none
}

.tool-topic-link span{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase
}

.tool-topic-instructional{border-color:#47b4d1}
.tool-topic-physical{border-color:#59b31c}
.tool-topic-communication{border-color:#9f2572}
.tool-topic-emotional{border-color:#ff7440}
.tool-topic-wellness{border-color:#111}

/* Membership cards */
.tool-plan-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.tool-plan{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem
}

.tool-plan-premium{
  border-top:7px solid var(--purple)
}

.tool-price{
  font-size:2rem;
  font-weight:800
}

.tool-price small{
  font-size:1rem;
  font-weight:600
}

.tool-access-note{
  margin-top:1.5rem;
  text-align:center
}

/* Free and Premium member resource library */
.tool-library{
  padding:3rem 0 4.5rem
}

.tool-library-section + .tool-library-section{
  border-top:1px solid var(--line);
  margin-top:3rem;
  padding-top:3rem
}

.tool-library-heading{
  align-items:flex-end;
  display:flex;
  gap:1rem;
  justify-content:space-between;
  margin-bottom:1.5rem
}

.tool-library-heading .eyebrow{
  margin-bottom:.35rem
}

.tool-resource-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.tool-resource-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(38,50,56,.08);
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:1.5rem
}

.tool-resource-card h3{
  margin-top:.9rem
}

.tool-resource-card p{
  flex:1 1 auto
}

.tool-resource-card > a{
  color:var(--coral-dark);
  font-weight:800
}

.tool-resource-locked{
  background:linear-gradient(145deg,#fff,#faf5fc);
  border-color:#d7a9df
}

.tool-access-free{
  align-self:flex-start;
  background:#eaf8f6;
  color:#276c62
}

.tool-access-premium{
  align-self:flex-start;
  background:#f3e4f6;
  color:#74347e
}

.compact-empty-state{
  padding:1.5rem
}

.compact-empty-state p{
  margin:0
}

@media(max-width:900px){
  .tool-compass-interactive{
    grid-template-columns:1fr
  }

  .winning-starburst{
    margin:0 auto;
    max-width:680px
  }

  .compass-preview-panel{
    min-height:360px
  }
}

@media(max-width:800px){
  .tool-compass-heading{
    text-align:left
  }

  .tool-topic-links,
  .tool-plan-grid,
  .tool-resource-grid{
    grid-template-columns:1fr
  }

  .tool-library-heading{
    align-items:flex-start;
    flex-direction:column
  }

  .winning-starburst .component-label{
    font-size:14px
  }

  .winning-starburst .area-label{
    font-size:18px
  }
}

@media(prefers-reduced-motion:reduce){
  .compass-preview-elliot img{
    animation:none;
    filter:drop-shadow(0 0 8px rgba(229,115,115,.8)) drop-shadow(0 0 14px rgba(185,234,227,.75))
  }

  .compass-preview-copy,
  .compass-preview-elliot img{
    transition:none
  }
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65
}

h1,h2,h3{
  margin:0 0 .65rem;
  line-height:1.12;
  letter-spacing:-.035em
}

h1{
  font-size:clamp(2rem,4vw,3rem)
}

h2{
  font-size:clamp(1.65rem,3vw,2.35rem)
}

h3{
  font-size:1.35rem
}

p{
  margin:.25rem 0 1rem
}

a{
  color:inherit
}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin-inline:auto
}

.skip-link{
  position:absolute;
  left:-999px;
  top:8px;
  background:#fff;
  padding:.75rem;
  z-index:100
}

.skip-link:focus{
  left:8px
}

/* =========================================================
   2. Header and primary navigation
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,253,249,.94);
  border-bottom:1px solid rgba(38,50,56,.08);
  backdrop-filter:blur(12px)
}

.nav-wrap{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  font-size:1.08rem;
  letter-spacing:-.02em
}

.brand img{
  width:54px;
  height:54px;
  object-fit:contain
}

.brand strong{
  color:var(--coral-dark)
}

.site-nav{
  display:flex;
  align-items:center;
  gap:1.8rem
}

.site-nav>a{
  font-size:.94rem;
  font-weight:700;
  text-decoration:none
}

.site-nav>a:not(.button):hover,.site-nav>a.active{
  color:var(--coral-dark)
}

.nav-toggle{
  display:none;
  border:0;
  background:var(--ink);
  color:#fff;
  padding:.55rem .8rem;
  border-radius:9px;
  font-weight:700
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.55rem 1rem;
  border:2px solid var(--coral);
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease
}

.button:hover{
  background:var(--coral-dark);
  border-color:var(--coral-dark);
  transform:translateY(-2px)
}

.button-small{
  min-height:36px;
  padding:.38rem .75rem;
  font-size:.86rem
}

.button-ghost{
  background:rgba(255,255,255,.9);
  color:var(--ink);
  border-color:#fff
}

.button-dark{
  background:var(--ink);
  border-color:var(--ink)
}

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.7rem
}

/* =========================================================
   3. Landing-page hero
   ========================================================= */
.hero{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#293438
}

.hero-image{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(23,32,35,.9) 0%,rgba(23,32,35,.65) 45%,rgba(23,32,35,.08) 76%),url('../images/cover-image.jpg') center/cover no-repeat
}

.hero-content{
  position:relative;
  z-index:2;
  padding-block:7rem
}

.hero-copy{
  max-width:720px;
  color:#fff
}

.hero-copy h1 span{
  color:var(--aqua)
}

.hero-copy>p:not(.eyebrow){
  font-size:1.22rem;
  max-width:660px;
  color:#eef4f3
}

.hero-elliot{
  position:absolute;
  z-index:3;
  right:max(2vw,20px);
  bottom:-15px;
  width:clamp(145px,17vw,245px);
  filter:drop-shadow(0 15px 18px rgba(0,0,0,.25))
}

.eyebrow{
  margin:0 0 .75rem;
  color:var(--coral-dark);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase
}

.hero .eyebrow{
  color:var(--yellow)
}

/* =========================================================
   4. Landing-page content sections
   ========================================================= */
.intro-section,.framework-section,.elephant-section,.blog-section,.cta-section{
  padding:6.5rem 0
}

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7rem;
  align-items:start
}

.intro-grid>div:last-child{
  font-size:1.12rem
}

.callout{
  margin-top:1.5rem;
  padding:1.1rem 1.25rem;
  border-left:5px solid var(--coral);
  background:#fff1ef;
  font-weight:700
}

.framework-section{
  background:#f6f2ed
}

.section-heading{
  max-width:690px;
  margin-bottom:2.5rem
}

.section-heading.centered{
  text-align:center;
  margin-inline:auto
}

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem
}

.pillar{
  position:relative;
  min-height:260px;
  padding:1.55rem;
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(38,50,56,.07);
  overflow:hidden
}

.pillar span{
  display:block;
  margin-bottom:3rem;
  font-size:.78rem;
  font-weight:900;
  opacity:.65
}

.pillar p{
  font-size:.95rem
}

.pillar:after{
  content:"";
  position:absolute;
  width:85px;
  height:85px;
  border:2px solid rgba(255,255,255,.55);
  border-radius:50%;
  right:-25px;
  bottom:-25px
}

.pillar.coral{
  background:#f3a2a2
}

.pillar.aqua{
  background:var(--aqua)
}

.pillar.green{
  background:var(--green)
}

.pillar.purple{
  background:#d6a0df
}

.pillar.yellow{
  background:var(--yellow)
}

.elephant-section{
  background:#fff
}

.elephant-grid{
  display:grid;
  grid-template-columns:minmax(240px,420px) 1fr;
  gap:6rem;
  align-items:center
}

.elephant-grid>img{
  width:100%;
  max-height:360px;
  object-fit:contain
}

.elephant-grid p:not(.eyebrow){
  font-size:1.15rem
}

.text-link{
  display:inline-block;
  color:var(--coral-dark);
  font-weight:900;
  text-decoration:none
}

.text-link span,.post-card a span{
  display:inline-block;
  transition:.2s
}

.text-link:hover span,.post-card a:hover span{
  transform:translateX(4px)
}

.blog-section{
  background:#f9f7f3
}

.heading-row{
  max-width:none;
  display:flex;
  justify-content:space-between;
  align-items:end
}

.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem
}

.post-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(38,50,56,.06)
}

.post-accent{
  height:9px
}

.accent-1{
  background:var(--coral)
}

.accent-2{
  background:var(--aqua)
}

.accent-3{
  background:var(--purple)
}

.post-body{
  padding:1.6rem
}

.post-body time{
  display:block;
  margin-bottom:.8rem;
  color:var(--muted);
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em
}

.post-card a{
  color:var(--coral-dark);
  font-weight:900;
  text-decoration:none
}

.cta-section{
  background:var(--paper)
}

.cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:3.3rem;
  border-radius:30px;
  background:var(--yellow);
  box-shadow:var(--shadow)
}

.cta-card>div{
  max-width:760px
}

.cta-card .eyebrow{
  color:#684f00
}

/* =========================================================
   5. Footer
   ========================================================= */
.site-footer{
  padding:4rem 0 2rem;
  background:var(--ink);
  color:#d8e1e3
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:4rem
}

.footer-grid-two{
  grid-template-columns:2fr 1fr
}

.footer-grid h2{
  font-size:1rem;
  letter-spacing:0;
  color:#fff
}

.footer-grid a:not(.brand){
  display:block;
  margin:.45rem 0;
  color:#d8e1e3;
  text-decoration:none
}

.footer-grid a:hover{
  color:var(--aqua)
}

.footer-brand{
  color:#fff;
  margin-bottom:1rem
}

.footer-brand img{
  width:64px
}

.small{
  font-size:.82rem;
  color:#9dabad;
  margin-top:1.5rem
}

.site-credit{
  margin-top:.25rem
}

.footer-grid .site-credit a{
  display:inline;
  margin:0;
  color:var(--aqua);
  font-weight:700;
  text-decoration:none
}

.footer-grid .site-credit a:hover{
  text-decoration:underline
}

/* =========================================================
   6. Forms, authentication, and dashboards
   ========================================================= */
.page-banner{
  padding:4rem 0 3rem;
  background:linear-gradient(135deg,#fff1ef,#eaf8f6)
}

.page-banner p{
  max-width:700px;
  font-size:1.08rem
}

.form-page{
  padding:4rem 0 6rem
}

.form-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:3rem;
  align-items:start
}

.form-card,.login-card,.dashboard-card{
  padding:2rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

.form-section-title{
  margin-top:2rem;
  margin-bottom:.75rem;
  font-size:1.25rem;
  line-height:1.3;
  letter-spacing:-.015em
}

.login-layout{
  display:grid;
  grid-template-columns:minmax(0,560px) 300px;
  justify-content:center;
  gap:3rem;
  align-items:center
}

.login-side{
  text-align:center
}

.login-side img{
  width:230px;
  max-width:100%
}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem
}

.field{
  margin-bottom:1.15rem
}

.field.full{
  grid-column:1/-1
}

.field label,.field legend{
  display:block;
  margin-bottom:.35rem;
  font-weight:800
}

.field input,.field select,.field textarea{
  width:100%;
  min-height:48px;
  padding:.7rem .85rem;
  border:1px solid #bdc7ca;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit
}

.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid rgba(185,234,227,.75);
  border-color:#5ba99d
}

.checkbox{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  margin:.8rem 0
}

.checkbox input{
  width:18px;
  height:18px;
  min-height:0;
  margin-top:.3rem;
  flex:0 0 auto
}

.agreement{
  padding:1rem;
  border-radius:12px;
  background:#f7f5f1;
  font-size:.93rem
}

.agreement p:last-child{
  margin-bottom:0
}

.required{
  color:#b32323
}

.help{
  font-size:.86rem;
  color:var(--muted)
}

.alert{
  margin:0 0 1.2rem;
  padding:.9rem 1rem;
  border-radius:10px;
  font-weight:700
}

.alert-error{
  background:#fde8e8;
  color:#8a1c1c
}

.alert-success{
  background:#e5f6ed;
  color:#175f36
}

.sidebar-card{
  padding:1.5rem;
  background:var(--aqua);
  border-radius:var(--radius);
  position:sticky;
  top:110px
}

.sidebar-card h2{
  font-size:1.45rem
}

.system-check{
  margin-bottom:1rem;
  padding:1rem 1.1rem;
  border-left:5px solid;
  border-radius:10px;
  background:#f7f5f1
}

.system-check p{
  margin-bottom:0
}

.check-pass{
  border-color:#4d8b59;
  background:#e5f6ed
}

.check-fail{
  border-color:#b32323;
  background:#fde8e8
}

.sidebar-card img{
  display:block;
  width:150px;
  margin:-2.8rem auto 1rem
}

.sidebar-card ul{
  padding-left:1.2rem
}

.auth-links{
  margin-top:1rem;
  font-size:.92rem
}

.password-toggle{
  display:flex;
  align-items:center;
  gap:.45rem;
  width:max-content;
  margin:-.35rem 0 1rem;
  color:var(--muted);
  font-size:.9rem;
  cursor:pointer
}

.password-toggle input{
  width:17px;
  height:17px;
  margin:0
}

.login-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem
}

.login-action-row>a{
  color:var(--coral-dark);
  font-size:.9rem;
  font-weight:800;
  text-decoration:none
}

.login-action-row>a:hover{
  text-decoration:underline
}

.admin-page{
  background:#eff2f3;
  min-height:100vh
}

.admin-bar{
  background:var(--ink);
  color:#fff;
  padding:1rem 0
}

.admin-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.dashboard-wrap{
  padding:3rem 0
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:2rem 0
}

.stat-card{
  padding:1.4rem;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line)
}

.stat-card strong{
  display:block;
  font-size:2rem
}

.dashboard-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem
}

.empty-state{
  padding:2rem;
  text-align:center;
  background:#f7f5f1;
  border-radius:14px
}

/* Administration directories and account details */
.admin-bar-content{
  gap:2rem
}

.admin-bar-content>div:first-child{
  display:flex;
  flex-direction:column
}

.admin-bar-content>div:first-child span{
  color:#b8c4c7;
  font-size:.82rem
}

.admin-nav{
  display:flex;
  align-items:center;
  gap:.4rem
}

.admin-nav a{
  padding:.5rem .8rem;
  border-radius:8px;
  color:#d8e1e3;
  font-size:.9rem;
  font-weight:750;
  text-decoration:none
}

.admin-nav a:hover,.admin-nav a.active{
  background:rgba(185,234,227,.14);
  color:var(--aqua)
}

a.stat-card{
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease
}

a.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(38,50,56,.1)
}

.stat-grid-four{
  grid-template-columns:repeat(4,1fr)
}

.admin-heading-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:1.5rem
}

.admin-heading-row p:last-child{
  margin-bottom:0
}

.result-count{
  padding:.45rem .75rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:.85rem;
  font-weight:800;
  white-space:nowrap
}

.admin-filters{
  display:grid;
  grid-template-columns:minmax(220px,2fr) minmax(180px,1fr) minmax(160px,1fr) auto;
  gap:1rem;
  align-items:end;
  margin-bottom:1.5rem;
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff
}

.admin-filters .field{
  margin-bottom:0
}

.filter-actions{
  display:flex;
  gap:.5rem;
  padding-bottom:1px
}

.button-muted{
  border-color:#d2d9da;
  background:#eef1f1;
  color:var(--ink)
}

.button-muted:hover{
  border-color:#c4ccce;
  background:#e1e6e7;
  color:var(--ink)
}

.alert-info{
  background:#e7f6f4;
  color:#235f57
}

.admin-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(38,50,56,.05)
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem
}

.admin-table th,.admin-table td{
  padding:1rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle
}

.admin-table th{
  background:#f4f6f6;
  color:#526167;
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap
}

.admin-table tbody tr:last-child td{
  border-bottom:0
}

.admin-table tbody tr:hover{
  background:#fffaf7
}

.admin-table td>span:not(.status-badge){
  display:block;
  color:var(--muted);
  font-size:.8rem
}

.status-badge{
  display:inline-flex;
  align-items:center;
  padding:.26rem .55rem;
  border-radius:999px;
  font-size:.76rem;
  font-weight:850
}

.status-active{
  background:#e5f6ed;
  color:#176b35
}

.status-pending{
  background:#fff3cf;
  color:#775700
}

.status-suspended,.status-disabled{
  background:#fde8e8;
  color:#922323
}

.status-archived{
  background:#e9edef;
  color:#59686e
}

.status-draft{
  background:#eef1f1;
  color:#526167
}

.status-scheduled{
  background:#ede4f3;
  color:#6f3479
}

.status-in_review{
  background:#fff3cf;
  color:#775700
}

.status-approved{
  background:#e5f6ed;
  color:#176b35
}

.verified-label{
  margin-top:.3rem;
  color:#36765b!important
}

.muted{
  color:var(--muted)
}

.table-action{
  color:var(--coral-dark);
  font-weight:850;
  text-decoration:none
}

.table-action:hover{
  text-decoration:underline
}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.5rem
}

.pagination a{
  color:var(--coral-dark);
  font-weight:850;
  text-decoration:none
}

.pagination span{
  color:var(--muted);
  font-size:.9rem
}

.back-link{
  display:inline-block;
  margin-bottom:1.25rem;
  color:var(--coral-dark);
  font-weight:850;
  text-decoration:none
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem
}

.detail-card{
  padding:1.6rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(38,50,56,.05)
}

.detail-card-wide{
  grid-column:1/-1
}

.detail-card h2{
  font-size:1.25rem
}

.detail-card dl{
  margin:0
}

.detail-card dl>div{
  display:grid;
  grid-template-columns:minmax(150px,1fr) 2fr;
  gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--line)
}

.detail-card dl>div:last-child{
  border-bottom:0
}

.detail-card dt{
  color:var(--muted);
  font-size:.85rem;
  font-weight:750
}

.detail-card dd{
  margin:0;
  font-weight:700
}

.heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
  flex-wrap:wrap
}

.admin-form-container{
  max-width:900px
}

.form-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:1.5rem
}

.audit-filters{
  grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto
}

.audit-details summary{
  color:var(--coral-dark);
  font-weight:800;
  cursor:pointer
}

.audit-details div{
  min-width:320px;
  margin-top:.6rem
}

.audit-details pre{
  max-width:480px;
  max-height:220px;
  overflow:auto;
  padding:.65rem;
  border-radius:8px;
  background:#f2f4f4;
  font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

/* Blog administration and public articles */
.admin-dashboard-section{
  margin-top:1.25rem
}

.dashboard-card+.dashboard-card{
  margin-top:1.25rem
}

.review-card{
  margin-bottom:1.25rem;
  padding:1.25rem;
  border-left:5px solid var(--purple);
  border-radius:12px;
  background:#f6edf8
}

.review-card p:last-child{
  margin-bottom:0
}

.button-danger{
  border-color:#a92d2d;
  background:#a92d2d;
  color:#fff
}

.button-danger:hover{
  border-color:#842020;
  background:#842020
}

.review-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem
}

.blog-review-preview{
  margin-bottom:1.25rem
}

.blog-review-image{
  display:block;
  width:100%;
  max-height:480px;
  margin:1.5rem 0;
  border-radius:14px;
  object-fit:cover
}

.review-content{
  max-width:none;
  padding:1.5rem 0 0
}

.review-form{
  margin-top:1.25rem
}

/* Google Analytics administration */
.analytics-range{
  display:flex;
  align-items:center;
  gap:.65rem
}

.analytics-range label{
  font-size:.85rem;
  font-weight:800
}

.analytics-range select{
  min-height:42px;
  padding:.5rem .75rem;
  border:1px solid #bdc7ca;
  border-radius:9px;
  background:#fff;
  font:inherit
}

.analytics-setup{
  max-width:850px
}

.analytics-setup code,.path-display{
  display:block;
  overflow-wrap:anywhere
}

.path-display{
  margin-bottom:1rem;
  padding:.8rem;
  border-radius:8px;
  background:#f2f4f4
}

.analytics-panel{
  margin-bottom:1.25rem
}

.analytics-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem
}

.analytics-panel-heading>span{
  color:var(--muted);
  font-size:.82rem
}

.analytics-chart{
  display:flex;
  align-items:flex-end;
  gap:clamp(2px,.6vw,8px);
  height:230px;
  margin-top:1.5rem;
  padding:1rem 0 0;
  border-bottom:1px solid #cfd7d9
}

.analytics-bar-wrap{
  display:flex;
  flex:1 1 0;
  align-items:center;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  min-width:3px
}

.analytics-bar{
  width:100%;
  min-height:3px;
  border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--coral),var(--coral-dark))
}

.analytics-bar-wrap small{
  height:22px;
  padding-top:4px;
  color:var(--muted);
  font-size:.65rem
}

.analytics-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem
}

.analytics-panel-wide{
  grid-column:1/-1
}

.analytics-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--line)
}

.analytics-list>div:last-child{
  border-bottom:0
}

.analytics-list strong{
  white-space:nowrap
}

.analytics-footer-link{
  text-align:right
}

.analytics-footer-link a{
  color:var(--coral-dark);
  font-weight:850;
  text-decoration:none
}

.blog-filters{
  grid-template-columns:minmax(220px,2fr) minmax(170px,1fr) minmax(180px,1fr) auto
}

.table-actions{
  display:flex;
  gap:.75rem;
  white-space:nowrap
}

.blog-editor-container{
  max-width:1180px
}

.blog-editor-form{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:1.25rem;
  align-items:start
}

.blog-editor-sidebar{
  display:grid;
  gap:1.25rem;
  position:sticky;
  top:105px
}

.blog-editor-sidebar .form-card h2{
  font-size:1.25rem
}

.blog-editor-form textarea#content{
  min-height:480px;
  border-top-left-radius:0;
  border-top-right-radius:0;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.92rem;
  line-height:1.55
}

.editor-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  padding:.55rem;
  border:1px solid #bdc7ca;
  border-bottom:0;
  border-radius:10px 10px 0 0;
  background:#f2f5f5
}

.editor-toolbar button{
  min-height:32px;
  padding:.3rem .55rem;
  border:1px solid #cbd3d5;
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:.78rem;
  font-weight:750;
  cursor:pointer
}

.editor-toolbar button:hover{
  border-color:var(--coral);
  color:var(--coral-dark)
}

.blog-save-actions{
  align-items:stretch;
  flex-direction:column
}

.featured-image-preview{
  display:block;
  width:100%;
  max-height:220px;
  margin-bottom:1rem;
  border-radius:12px;
  object-fit:cover
}

.post-card-image{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover
}

.category-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:.75rem;
  padding:.3rem .65rem;
  border-radius:999px;
  color:#263238;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase
}

.category-emotional,.category-background-emotional{background:#f3a2a2}
.category-instructional,.category-background-instructional{background:#b9eae3}
.category-physical,.category-background-physical{background:#aed581}
.category-communication,.category-background-communication{background:#d6a0df}
.category-personal_health,.category-background-personal_health{background:#ffd54f}
.category-background-unassigned{background:#dfe4e5}

.category-border-emotional{border-top-color:#f3a2a2!important}
.category-border-instructional{border-top-color:#b9eae3!important}
.category-border-physical{border-top-color:#aed581!important}
.category-border-communication{border-top-color:#d6a0df!important}
.category-border-personal_health{border-top-color:#ffd54f!important}
.category-border-unassigned{border-top-color:#dfe4e5!important}

.blog-index-section{
  padding-top:4rem
}

.featured-story{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-top:10px solid;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow)
}

.featured-story-copy{
  padding:clamp(2rem,5vw,4rem)
}

.featured-story-copy h3{
  max-width:760px;
  font-size:clamp(2rem,4vw,3.25rem)
}

.featured-subtitle,.blog-subtitle{
  margin:.25rem 0 1.1rem;
  color:#526167;
  font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:650;
  line-height:1.4
}

.featured-description{
  max-width:720px;
  margin:1.4rem 0 1.6rem;
  font-size:1.06rem
}

.featured-story-image,
.featured-story-visual{
  width:100%;
  height:100%;
  min-height:430px
}

.featured-story-image{
  display:block;
  object-fit:cover
}

.featured-story-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem
}

.featured-story-visual img{
  width:min(85%,320px);
  filter:drop-shadow(0 15px 20px rgba(38,50,56,.18))
}

.blog-byline{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.2rem;
  color:var(--muted);
  font-size:.86rem;
  font-weight:750
}

.blog-byline time,
.post-body .blog-byline time{
  display:inline;
  margin:0;
  color:inherit;
  font:inherit;
  letter-spacing:0;
  text-transform:none
}

.blog-byline.compact{
  margin:.75rem 0;
  font-size:.78rem
}

.blog-more-heading{
  margin-top:4rem
}

.post-subtitle{
  margin-top:-.25rem;
  color:#526167;
  font-weight:650
}

.blog-article-header .category-badge{
  margin-bottom:1rem
}

.preview-notice{
  padding:.75rem 0;
  background:var(--yellow);
  color:#584500
}

.preview-notice a{
  font-weight:800
}

.blog-article-header{
  max-width:850px
}

.blog-featured-wrap{
  max-width:960px;
  padding-top:3rem
}

.blog-featured-image{
  display:block;
  width:100%;
  max-height:540px;
  border-radius:var(--radius);
  object-fit:cover;
  box-shadow:var(--shadow)
}

.blog-article-content{
  max-width:800px;
  padding-top:3rem;
  padding-bottom:6rem;
  font-size:1.08rem
}

.blog-article-content h2,
.blog-article-content h3{
  margin-top:2.2rem
}

.blog-article-content blockquote{
  margin:2rem 0;
  padding:1rem 1.25rem;
  border-left:5px solid var(--coral);
  background:#fff1ef;
  font-weight:650
}

/* =========================================================
   7. Responsive layouts
   ========================================================= */
@media(max-width:900px){
.site-nav{
  display:none;
  position:absolute;
  left:20px;
  right:20px;
  top:75px;
  flex-direction:column;
  align-items:stretch;
  padding:1rem;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow)
}

.site-nav.open{
  display:flex
}

.nav-toggle{
  display:block
}

.hero{
  min-height:620px
}

.hero-image{
  background:linear-gradient(90deg,rgba(23,32,35,.88),rgba(23,32,35,.45)),url('../images/cover-image.jpg') center/cover
}

.hero-elliot{
  opacity:.4
}

.intro-grid,.elephant-grid,.form-shell,.login-layout,.blog-editor-form,.featured-story{
  grid-template-columns:1fr;
  gap:2.5rem
}

.pillar-grid{
  grid-template-columns:repeat(2,1fr)
}

.pillar:last-child{
  grid-column:1/-1
}

.post-grid{
  grid-template-columns:1fr
}

.sidebar-card{
  position:static
}

.blog-editor-sidebar{
  position:static
}

.featured-story-image,
.featured-story-visual{
  min-height:300px
}

.admin-bar-content{
  align-items:flex-start!important;
  flex-direction:column;
  gap:.8rem
}

.admin-nav{
  width:100%;
  overflow-x:auto
}

.stat-grid-four{
  grid-template-columns:repeat(2,1fr)
}

.admin-filters{
  grid-template-columns:1fr 1fr
}

.audit-filters{
  grid-template-columns:1fr 1fr auto
}

.footer-grid{
  grid-template-columns:1fr 1fr
}

.footer-grid>div:first-child{
  grid-column:1/-1
}

}

@media(max-width:560px){
.container{
  width:min(100% - 28px,var(--max))
}

.nav-wrap{
  min-height:72px
}

.brand img{
  width:45px;
  height:45px
}

.brand span{
  font-size:.92rem
}

.hero-content{
  padding-block:5rem
}

.hero{
  min-height:610px
}

.intro-section,.framework-section,.elephant-section,.blog-section,.cta-section{
  padding:4.5rem 0
}

.pillar-grid,.field-grid,.stat-grid,.footer-grid{
  grid-template-columns:1fr
}

.pillar:last-child,.footer-grid>div:first-child{
  grid-column:auto
}

.heading-row,.cta-card{
  display:block
}

.heading-row>a{
  margin-top:1rem
}

.cta-card{
  padding:2rem
}

.cta-card .button{
  margin-top:1rem
}

.form-card,.login-card{
  padding:1.35rem
}

.login-action-row{
  align-items:flex-start;
  flex-direction:column
}

.admin-heading-row{
  display:block
}

.result-count{
  display:inline-flex;
  margin-top:.5rem
}

.admin-filters,.detail-grid,.stat-grid-four{
  grid-template-columns:1fr
}

.analytics-grid{
  grid-template-columns:1fr
}

.analytics-panel-wide{
  grid-column:auto
}

.audit-filters{
  grid-template-columns:1fr
}

.detail-card-wide{
  grid-column:auto
}

.detail-card dl>div{
  grid-template-columns:1fr;
  gap:.15rem
}

}