/* ==========================================================================
   HOUND — South African GSP Community Platform
   Design system: field-club editorial. Khaki / Sand / Bone / Charcoal / Signal Orange.
   ========================================================================== */

:root{
  --khaki: #4A4938;
  --khaki-deep: #3A3929;
  --sand: #D6C3A3;
  --sand-deep: #C4AE87;
  --bone: #F4F0E7;
  --bone-dim: #EAE3D3;
  --orange: #FF5A1F;
  --orange-deep: #E44C15;
  --charcoal: #1C1D1A;
  --charcoal-soft: #26271F;
  --ink: #1C1D1A;
  --ink-70: rgba(28,29,26,.7);
  --ink-50: rgba(28,29,26,.5);
  --line: rgba(28,29,26,.14);
  --line-light: rgba(244,240,231,.18);
  --line-light-strong: rgba(244,240,231,.32);

  --font-head: 'Geom Graphic', 'Futura', 'Century Gothic', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-soft: 0 20px 60px -25px rgba(28,29,26,.35);
  --shadow-card: 0 12px 34px -18px rgba(28,29,26,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,figure,blockquote{margin:0;}
img{max-width:100%;display:block;}
button{font:inherit;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
input,select,textarea{font:inherit;color:inherit;}

body{
  font-family:var(--font-body);
  background:var(--bone);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  overflow-x:hidden;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--charcoal);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--orange);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--sand);}
.eyebrow.on-dark::before{background:var(--orange);}

.section-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-50);
}

.h1{font-size:clamp(38px,5.6vw,72px);}
.h2{font-size:clamp(30px,4vw,48px);}
.h3{font-size:clamp(22px,2.6vw,30px);}
.lede{
  font-size:clamp(17px,1.6vw,20px);
  color:var(--ink-70);
  max-width:560px;
  line-height:1.6;
}

.section{
  padding:112px 0;
  position:relative;
}
@media (max-width:768px){
  .section{padding:72px 0;}
}
.section--bone{background:var(--bone);}
.section--sand{background:var(--sand);}
.section--khaki{background:var(--khaki); color:var(--bone);}
.section--khaki h1,.section--khaki h2,.section--khaki h3{color:var(--bone);}
.section--charcoal{background:var(--charcoal); color:var(--bone);}
.section--charcoal h1,.section--charcoal h2,.section--charcoal h3{color:var(--bone);}

.section-head{
  max-width:720px;
  margin-bottom:56px;
}
.section-head .h2{margin-top:14px;}
.section-head .lede{margin-top:16px; max-width:640px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .lede{margin-left:auto;margin-right:auto;}
.section-head.split{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  max-width:none;
}
@media (max-width:700px){
  .section-head.split{flex-direction:column; align-items:flex-start; gap:20px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border-radius:3px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--orange);
  color:var(--bone);
}
.btn-primary:hover{background:var(--orange-deep);}
.btn-secondary{
  background:transparent;
  border-color:var(--khaki);
  color:var(--khaki);
}
.btn-secondary:hover{background:var(--khaki); color:var(--bone);}
.section--khaki .btn-secondary,
.section--charcoal .btn-secondary{
  border-color:var(--line-light-strong);
  color:var(--bone);
}
.section--khaki .btn-secondary:hover,
.section--charcoal .btn-secondary:hover{
  background:var(--bone); color:var(--charcoal); border-color:var(--bone);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:none;
  text-decoration:underline;
  text-underline-offset:4px;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
  padding:8px 0;
}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:900;
  background:rgba(244,240,231,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.nav-logo{
  font-family:var(--font-head);
  font-size:24px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--charcoal);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.nav-logo span{
  width:7px;height:7px;border-radius:50%;
  background:var(--orange);
  display:inline-block;
  transform:translateY(-9px);
}
@media (min-width:921px){ .nav-logo{margin-right:28px;} }
@media (max-width:480px){
  .nav-logo .os-tag{display:none;}
  .nav-right .btn{padding:11px 14px; font-size:12px;}
}
.nav-logo .os-tag{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--khaki);
  opacity:.7;
  align-self:center;
  margin-left:2px;
}
.footer-brand .nav-logo .os-tag{color:var(--sand);opacity:.6;}
.dash .nav-logo .os-tag,
.command-teaser .nav-logo .os-tag{color:var(--sand);opacity:.55;}
.nav-links{
  display:flex;
  gap:34px;
  align-items:center;
}
.nav-links a{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-70);
  transition:color .2s;
  position:relative;
}
.nav-links a:hover{color:var(--charcoal);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-signin{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-70);
}
.nav-signin:hover{color:var(--charcoal);}
.nav-burger{
  display:none;
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:3px;
  background:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:"";
  display:block;
  width:18px;height:2px;
  background:var(--charcoal);
  position:relative;
  transition:.25s;
}
.nav-burger span::before{position:absolute;top:-6px;width:18px;}
.nav-burger span::after{position:absolute;top:6px;width:18px;}

.mobile-menu{
  display:none;
  position:fixed;
  inset:78px 0 0 0;
  background:var(--bone);
  z-index:850;
  padding:32px 28px;
  overflow-y:auto;
}
.mobile-menu.open{display:block;}
.mobile-menu a{
  display:block;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-head);
  font-size:22px;
}
.mobile-menu .btn{margin-top:28px;}

@media (max-width:920px){
  .nav-links{display:none;}
  .nav-signin{display:none;}
  .nav-burger{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--charcoal);
  color:var(--bone);
  padding:64px 0 150px;
}
.hero-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(100deg, rgba(28,29,26,.94) 8%, rgba(28,29,26,.72) 42%, rgba(28,29,26,.28) 78%), url('../img/hero-gsp.jpg');
  background-size:cover;
  background-position:70% 38%;
  z-index:0;
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.hero-copy{max-width:580px;}
.hero-copy .h1{color:var(--bone); margin-top:20px;}
.hero-copy .h1 em{
  font-style:italic;
  color:var(--sand);
}
.hero-copy .lede{
  color:rgba(244,240,231,.82);
  margin-top:22px;
  max-width:520px;
}
.hero-cta-row{
  display:flex;
  gap:16px;
  margin-top:38px;
  flex-wrap:wrap;
}
.hero-reassure{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:34px;
  font-size:13px;
  color:rgba(244,240,231,.62);
  letter-spacing:.02em;
}
.hero-reassure .dot{opacity:.5;}

/* Floating dog ID card */
.hero-card-wrap{
  position:relative;
  display:flex;
  justify-content:center;
}
.id-card{
  width:340px;
  background:rgba(244,240,231,.08);
  border:1px solid var(--line-light-strong);
  backdrop-filter:blur(18px);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-soft);
  animation:floatCard 6s ease-in-out infinite;
}
@keyframes floatCard{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.id-card-photo{
  width:100%;
  height:210px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
}
.id-card-photo img{width:100%;height:100%;object-fit:cover;}
.id-card-status{
  position:absolute;
  top:12px;left:12px;
  background:var(--orange);
  color:var(--bone);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:2px;
}
.id-card-body{padding-top:16px;}
.id-card-name{
  font-family:var(--font-head);
  font-size:22px;
  color:var(--bone);
}
.id-card-breed{
  font-size:13px;
  color:rgba(244,240,231,.6);
  margin-top:2px;
}
.id-card-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 16px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line-light);
}
.id-card-meta div{font-size:11px; color:rgba(244,240,231,.55); text-transform:uppercase; letter-spacing:.06em;}
.id-card-meta strong{display:block; font-size:13px; color:var(--bone); font-weight:600; margin-top:3px; text-transform:none; letter-spacing:0;}
.id-card-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
  margin-bottom:26px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 9px;
  border-radius:2px;
  background:rgba(244,240,231,.1);
  border:1px solid var(--line-light-strong);
  color:var(--sand);
}
.badge::before{content:"✓"; color:var(--orange); font-weight:900;}
.hero-qr-float{
  position:absolute;
  right:-28px;
  bottom:-58px;
  background:var(--bone);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  gap:12px;
  animation:qrPulse 2.6s ease-in-out infinite;
  z-index:2;
}
@keyframes qrPulse{
  0%,100%{box-shadow:var(--shadow-soft);}
  50%{box-shadow:0 0 0 10px rgba(255,90,31,.08), var(--shadow-soft);}
}
.hero-qr-float img,.hero-qr-float canvas{width:64px;height:64px;}
.hero-qr-float .qr-copy{font-size:11px; color:var(--ink-70); line-height:1.3; max-width:110px;}
.hero-qr-float .qr-copy strong{display:block; color:var(--charcoal); font-size:12px;}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-card-wrap{margin-top:56px;}
  .hero-qr-float{right:8px;}
}
@media (max-width:520px){
  .id-card{width:100%; max-width:340px;}
}

/* ---------- Problem / flow diagram ---------- */
.flow-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:36px 0 8px;
}
.flow-chip{
  padding:12px 18px;
  background:var(--bone-dim);
  border:1px solid var(--line);
  border-radius:3px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-70);
}
.flow-arrow{color:var(--orange); font-size:16px;}
.flow-result{
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 26px;
  background:var(--khaki);
  color:var(--bone);
  border-radius:3px;
  font-family:var(--font-head);
  font-size:19px;
}
.flow-result::before{content:"→"; color:var(--orange);}

/* ---------- HOUND ID big card ---------- */
.hound-id-card{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
}
.hound-id-photo{position:relative; min-height:340px;}
.hound-id-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.hound-id-idtag{
  position:absolute;top:16px;left:16px;
  background:var(--charcoal);
  color:var(--sand);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  padding:8px 12px;
  border-radius:2px;
}
.hound-id-info{padding:36px 40px;}
.hound-id-info .id-num{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
}
.hound-id-info h3{margin-top:8px;}
.hound-id-info .breed-line{color:var(--ink-70); font-size:14px; margin-top:4px;}
.id-fact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 28px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.id-fact{}
.id-fact .lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50);}
.id-fact .val{font-size:15px; font-weight:600; margin-top:4px; color:var(--charcoal);}
.id-fact .val.tag-good{color:#3E6B4A;}
@media (max-width:860px){
  .hound-id-card{grid-template-columns:1fr;}
  .hound-id-photo{min-height:260px;}
}

/* ---------- 3-step QR scan ---------- */
.steps-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:20px;
}
.step-card{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
}
.step-num{
  font-family:var(--font-head);
  font-size:15px;
  color:var(--orange);
  font-weight:700;
}
.step-card h4{margin-top:14px; font-size:19px; font-family:var(--font-head); font-weight:600;}
.step-card p{margin-top:10px; font-size:14.5px; color:var(--ink-70);}
@media (max-width:820px){.steps-row{grid-template-columns:1fr;}}

.phone-mock{
  width:270px;
  border-radius:32px;
  border:8px solid var(--charcoal);
  background:var(--charcoal);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  margin:0 auto;
}
.phone-mock .screen{
  background:var(--bone);
  min-height:520px;
  border-radius:24px;
  overflow:hidden;
}
.phone-notch{
  height:22px;
  background:var(--charcoal);
  display:flex;
  justify-content:center;
}
.phone-notch::after{content:""; width:70px; height:14px; background:#000; border-radius:0 0 10px 10px; margin-top:0;}

.privacy-callout{
  margin-top:56px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
  background:var(--khaki);
  color:var(--bone);
  padding:28px 32px;
  border-radius:var(--radius);
}
.privacy-callout .tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.privacy-callout .tag{
  font-size:11.5px; padding:6px 11px; border:1px solid var(--line-light-strong); border-radius:2px; color:var(--sand);
}
.privacy-icon{
  width:52px;height:52px;
  border-radius:50%;
  border:1px solid var(--line-light-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  color:var(--orange);
}
@media (max-width:640px){.privacy-callout{grid-template-columns:1fr;}}

/* ---------- Found dog section ---------- */
.found-wrap{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:60px;
  align-items:center;
}
.found-phone{
  background:var(--charcoal-soft);
  border:1px solid var(--line-light);
  border-radius:20px;
  padding:22px;
}
.found-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,90,31,.14);
  border:1px solid rgba(255,90,31,.4);
  color:var(--orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  padding:6px 12px;
  border-radius:2px;
}
.found-status .dot-live{width:6px;height:6px;border-radius:50%;background:var(--orange); animation:blink 1.4s infinite;}
@keyframes blink{50%{opacity:.25;}}
.found-name{font-family:var(--font-head); font-size:30px; margin-top:16px; color:var(--bone);}
.found-copy{color:rgba(244,240,231,.68); margin-top:8px; font-size:15px;}
.found-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.found-note{
  margin-top:28px;
  padding:16px 18px;
  background:rgba(244,240,231,.06);
  border:1px solid var(--line-light);
  border-radius:var(--radius-sm);
  font-size:13px;
  color:rgba(244,240,231,.65);
}
@media (max-width:900px){.found-wrap{grid-template-columns:1fr;}}

/* ---------- Feature card grids ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:20px;
}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}

.feature-card{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:var(--sand-deep);}
.feature-icon{
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);
  margin-bottom:16px;
}
.feature-card h4{font-size:17px; font-family:var(--font-head); font-weight:600;}
.feature-card p{margin-top:8px; font-size:14px; color:var(--ink-70);}

/* ---------- Breeders / editorial split ---------- */
.editorial-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.editorial-split .img-side{min-height:460px; position:relative;}
.editorial-split .img-side img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.editorial-split .copy-side{
  background:var(--khaki);
  color:var(--bone);
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.editorial-split .copy-side h2{color:var(--bone);}
.editorial-split ul{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;}
.editorial-split li{
  font-size:13.5px;
  color:rgba(244,240,231,.78);
  padding-left:16px;
  position:relative;
}
.editorial-split li::before{content:"—"; position:absolute; left:0; color:var(--orange);}
.editorial-split .fine{margin-top:26px; font-size:12.5px; color:rgba(244,240,231,.5); max-width:440px;}
@media (max-width:900px){
  .editorial-split{grid-template-columns:1fr;}
  .editorial-split .img-side{min-height:280px;}
  .editorial-split ul{grid-template-columns:1fr;}
  .editorial-split .copy-side{padding:36px 28px;}
}

/* ---------- Find a GSP questionnaire ---------- */
.quiz-panel{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:36px;
}
.quiz-q{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50);}
.quiz-options{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.quiz-opt{
  padding:12px 10px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}
.quiz-opt:hover, .quiz-opt.active{border-color:var(--orange); background:rgba(255,90,31,.06); color:var(--orange-deep);}
.quiz-fields{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.quiz-result{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.quiz-result .r-label{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange);}
.quiz-result .r-value{font-family:var(--font-head); font-size:22px; margin-top:4px;}
@media (max-width:640px){.quiz-options{grid-template-columns:1fr 1fr;} .quiz-fields{grid-template-columns:1fr;}}

/* ---------- Clubs dashboard mock ---------- */
.club-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.club-dash{
  background:rgba(244,240,231,.06);
  border:1px solid var(--line-light);
  border-radius:var(--radius-lg);
  padding:28px;
}
.club-dash-head{display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line-light);}
.club-dash-head .name{font-family:var(--font-head); font-size:17px; color:var(--bone);}
.club-dash-head .status{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); border:1px solid var(--line-light-strong); padding:4px 8px; border-radius:2px;}
.club-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px;}
.club-stat{padding:16px; background:rgba(244,240,231,.05); border-radius:var(--radius-sm); border:1px solid var(--line-light);}
.club-stat .n{font-family:var(--font-head); font-size:28px; color:var(--bone);}
.club-stat .l{font-size:11px; color:rgba(244,240,231,.55); text-transform:uppercase; letter-spacing:.06em; margin-top:4px;}
@media (max-width:900px){.club-wrap{grid-template-columns:1fr;}}

/* ---------- Field timeline ---------- */
.timeline{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:30px;
}
.timeline-step{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.timeline-step:last-child{border-bottom:none;}
.timeline-step .t-idx{font-family:var(--font-head); font-size:14px; color:var(--orange); font-weight:700;}
.timeline-step .t-label{font-size:16px; font-weight:600;}
@media (max-width:640px){.timeline-step{grid-template-columns:60px 1fr;}}

/* ---------- Community feed ---------- */
.feed-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}
.feed-card{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.feed-tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:2px;
  background:var(--bone-dim);
  color:var(--khaki);
}
.feed-tag.orange{background:rgba(255,90,31,.12); color:var(--orange-deep);}
.feed-card p{margin-top:14px; font-size:15px; font-weight:600; color:var(--charcoal); line-height:1.4;}
.feed-meta{margin-top:14px; font-size:12px; color:var(--ink-50);}
@media (max-width:920px){.feed-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.feed-grid{grid-template-columns:1fr;}}

/* ---------- Health snapshot ---------- */
.health-panel{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
}
.illustrative-tag{
  position:absolute;
  top:20px;right:20px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-50);
  border:1px dashed var(--line);
  padding:5px 10px;
  border-radius:2px;
}
.health-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:8px;}
.health-metric .bar-track{height:6px; background:var(--bone-dim); border-radius:4px; margin-top:10px; overflow:hidden;}
.health-metric .bar-fill{height:100%; background:var(--khaki); border-radius:4px;}
.health-metric .m-label{font-size:12.5px; font-weight:600; color:var(--ink-70);}
.health-metric .m-val{font-family:var(--font-head); font-size:20px; margin-top:8px;}
@media (max-width:820px){.health-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Academy / knowledge ---------- */
.academy-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:20px;
}
.academy-item{
  background:var(--bone);
  padding:24px 20px;
  font-size:14px;
  font-weight:600;
}
@media (max-width:820px){.academy-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.academy-grid{grid-template-columns:1fr;}}

/* ---------- Ecosystem diagram ---------- */
.ecosystem{
  position:relative;
  max-width:760px;
  margin:56px auto 0;
  aspect-ratio:1/1;
}
.eco-center{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:150px;height:150px;
  border-radius:50%;
  background:var(--orange);
  color:var(--bone);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:24px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 0 0 14px rgba(255,90,31,.08), 0 0 0 28px rgba(255,90,31,.05);
  z-index:2;
}
.eco-node{
  position:absolute;
  width:118px;
  padding:12px 10px;
  text-align:center;
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  box-shadow:var(--shadow-card);
  z-index:1;
}
.eco-line{position:absolute; background:var(--line); height:1px; transform-origin:0 0; z-index:0;}
@media (max-width:700px){
  .ecosystem{max-width:100%;}
  .eco-node{width:96px; font-size:10.5px; padding:9px 6px;}
  .eco-center{width:110px;height:110px;font-size:18px;}
}

/* ---------- Trust section ---------- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:20px;
}
.trust-item{padding-top:24px; border-top:2px solid var(--orange);}
.trust-item h4{font-size:18px; font-family:var(--font-head); font-weight:600;}
.trust-item p{margin-top:10px; font-size:14.5px; color:var(--ink-70);}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr;}}

/* ---------- Registration steps ---------- */
.reg-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:20px;
}
.reg-step{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
}
.reg-step .r-num{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--khaki);
  color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  font-weight:700;
  font-family:var(--font-head);
}
.reg-step h4{margin-top:16px; font-size:15.5px; font-family:var(--font-body); font-weight:700;}
.reg-step ul{margin-top:12px;}
.reg-step li{font-size:13px; color:var(--ink-70); padding:3px 0;}
@media (max-width:920px){.reg-steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.reg-steps{grid-template-columns:1fr;}}

/* ---------- Founding community form ---------- */
.role-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:20px;
}
.role-btn{
  padding:16px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  background:var(--bone);
  transition:.2s;
}
.role-btn:hover{border-color:var(--orange);}
.role-btn.active{background:var(--orange); border-color:var(--orange); color:var(--bone);}
@media (max-width:820px){.role-grid{grid-template-columns:1fr 1fr;}}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-50); margin-bottom:7px;}
.field input,.field select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bone);
  font-size:14.5px;
}
.field input:focus,.field select:focus{outline:none; border-color:var(--orange);}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}

.success-panel{
  display:none;
  text-align:center;
  padding:50px 20px;
}
.success-panel.show{display:block;}
.success-panel .ok-mark{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--orange);
  color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  margin:0 auto 20px;
}
.success-panel h3{font-family:var(--font-head);}
.success-panel p{margin-top:10px; color:var(--ink-70);}

/* ---------- Pointstead teaser ---------- */
.pointstead-band{
  background:var(--sand);
  padding:64px 0;
}
.pointstead-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.pointstead-mark{
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--khaki);
}
.pointstead-inner h3{margin-top:8px; max-width:420px;}
.pointstead-inner p{margin-top:10px; color:var(--khaki); max-width:420px; font-size:14.5px; opacity:.85;}

/* ---------- Final CTA ---------- */
.final-cta{
  background:linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
  color:var(--bone);
  text-align:center;
  padding:110px 0;
}
.final-cta h2{color:var(--bone);}
.final-cta p{max-width:520px; margin:20px auto 0; color:rgba(244,240,231,.9); font-size:17px;}
.final-cta .hero-cta-row{justify-content:center;}
.final-cta .btn-secondary{border-color:rgba(244,240,231,.6); color:var(--bone);}
.final-cta .btn-secondary:hover{background:var(--bone); color:var(--orange-deep); border-color:var(--bone);}
.final-cta .btn-primary{background:var(--charcoal);}
.final-cta .btn-primary:hover{background:#000;}

/* ---------- Footer ---------- */
.footer{
  background:var(--charcoal);
  color:rgba(244,240,231,.7);
  padding:80px 0 32px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line-light);
}
.footer-brand .nav-logo{color:var(--bone);}
.footer-brand p{margin-top:14px; font-size:14px; max-width:260px; color:rgba(244,240,231,.55);}
.footer-col h5{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,240,231,.4); margin-bottom:16px;}
.footer-col a{display:block; padding:6px 0; font-size:14px; color:rgba(244,240,231,.75); transition:.2s;}
.footer-col a:hover{color:var(--orange);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  font-size:12.5px;
  color:rgba(244,240,231,.4);
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom a{color:rgba(244,240,231,.6);}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr; gap:36px 24px;}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:1fr;}
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-sticky-cta{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:800;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(244,240,231,.96);
  border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
}
@media (max-width:760px){
  .mobile-sticky-cta{display:block;}
  body{padding-bottom:74px;}
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(28,29,26,.62);
  z-index:1000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--bone);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:620px;
  padding:0;
  box-shadow:var(--shadow-soft);
  animation:modalIn .3s var(--ease);
}
@keyframes modalIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 30px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:20px;}
.modal-close{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:none;
  cursor:pointer;
  font-size:16px;
}
.modal-body{padding:28px 30px 34px;}
.modal-progress{
  display:flex;
  gap:6px;
  margin-bottom:22px;
}
.modal-progress .p-dot{
  height:3px;
  flex:1;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.modal-progress .p-dot i{display:block; height:100%; width:0; background:var(--orange); transition:width .3s;}
.modal-step{display:none;}
.modal-step.active{display:block;}
.modal-step-title{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50); margin-bottom:18px;}
.modal-nav{display:flex; justify-content:space-between; margin-top:26px; gap:12px;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-top:20px;}
.checkbox-row input{margin-top:3px;}
.checkbox-row label{font-size:13px; color:var(--ink-70);}

/* ---------- Reveal animation ----------
   Progressive enhancement: content is visible by default. Only once JS has
   confirmed IntersectionObserver is wired up (body.js-reveal-ready) do
   .reveal / .feature-card elements hide, ready to animate in on scroll.
   This guarantees content is never stuck invisible if a script fails to load. */
.reveal, .feature-card{opacity:1; transform:none;}
body.js-reveal-ready .reveal,
body.js-reveal-ready .feature-card{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
body.js-reveal-ready .reveal.in,
body.js-reveal-ready .feature-card.in{opacity:1; transform:translateY(0);}

/* ---------- Misc ---------- */
.divider-line{height:1px; background:var(--line); width:100%;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:900px){.two-col{grid-template-columns:1fr; gap:36px;}}

.qr-box{
  background:var(--bone);
  padding:16px;
  border-radius:var(--radius-sm);
  display:inline-block;
}
.qr-box canvas,.qr-box img{display:block;}

/* ==========================================================================
   Dog profile page (/dog/bruno)
   ========================================================================== */
.demo-banner{
  background:var(--charcoal);
  color:var(--sand);
  text-align:center;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  padding:10px 16px;
}
.demo-banner strong{color:var(--orange);}

.profile-header{
  background:var(--khaki);
  color:var(--bone);
  padding:48px 0 60px;
}
.profile-head-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:36px;
  align-items:flex-start;
}
.profile-photo{
  width:150px;height:150px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(244,240,231,.25);
  flex-shrink:0;
}
.profile-photo img{width:100%;height:100%;object-fit:cover;}
.profile-name-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.profile-name-row h1{color:var(--bone); font-size:clamp(30px,4vw,42px);}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:20px;
  background:rgba(62,167,92,.16);
  color:#7CD79A;
  border:1px solid rgba(124,215,154,.35);
}
.status-pill .dot{width:6px;height:6px;border-radius:50%;background:#7CD79A;}
.profile-sub{margin-top:6px; font-size:15px; color:rgba(244,240,231,.68);}
.profile-id{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand); margin-top:10px;
}
.profile-facts{
  display:flex;
  gap:28px;
  margin-top:20px;
  flex-wrap:wrap;
}
.profile-facts div{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(244,240,231,.5);}
.profile-facts strong{display:block; font-size:14px; color:var(--bone); text-transform:none; letter-spacing:0; margin-top:3px; font-weight:600;}
.profile-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.profile-qr-block{
  background:var(--bone);
  padding:16px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.profile-qr-block .cap{font-size:10.5px; color:var(--ink-50); margin-top:8px; text-transform:uppercase; letter-spacing:.06em;}
.profile-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}

.profile-tabs{
  position:sticky;
  top:0;
  z-index:400;
  background:rgba(244,240,231,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.profile-tabs-inner{display:flex; gap:8px; padding:14px 0;}
.profile-tabs a{
  padding:9px 16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-radius:20px;
  color:var(--ink-70);
  white-space:nowrap;
  transition:.2s;
}
.profile-tabs a:hover{background:var(--bone-dim);}

.profile-section{padding:64px 0; border-bottom:1px solid var(--line);}
.profile-section h2{font-size:26px;}
.visibility-tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:2px;
  background:var(--bone-dim);
  color:var(--ink-50);
  margin-left:12px;
  vertical-align:middle;
}
.visibility-tag.public{background:rgba(62,167,92,.12); color:#3E6B4A;}

.pedigree-tree{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
  max-width:520px;
}
.pedigree-box{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  background:var(--bone);
}
.pedigree-box .role{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange);}
.pedigree-box .name{font-family:var(--font-head); font-size:16px; margin-top:4px;}

.result-table{width:100%; border-collapse:collapse; margin-top:20px;}
.result-table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-50); padding:10px 14px; border-bottom:1px solid var(--line);
}
.result-table td{padding:14px 14px; border-bottom:1px solid var(--line); font-size:14px;}
.result-table tr:last-child td{border-bottom:none;}

.doc-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-top:10px; background:var(--bone);
}
.doc-row .d-name{font-weight:600; font-size:14.5px;}
.doc-row .d-meta{font-size:12px; color:var(--ink-50); margin-top:3px;}
.doc-lock{font-size:11px; color:var(--ink-50); border:1px solid var(--line); padding:5px 10px; border-radius:2px;}

.contact-card{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  max-width:480px;
  box-shadow:var(--shadow-card);
}
@media (max-width:820px){
  .profile-head-grid{grid-template-columns:1fr; text-align:left;}
  .profile-qr-block{justify-self:start;}
}

/* ==========================================================================
   Club Dashboard — internal / logged-in admin view.
   Deliberately a different register from the public site: dark, structured,
   frosted-glass SaaS-dashboard treatment. This is the screen a club committee
   member logs into, not a marketing surface, so it earns a different mode.
   ========================================================================== */
.dash{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,90,31,.08), transparent 60%),
    var(--charcoal);
  color:var(--bone);
  display:grid;
  grid-template-columns:260px 1fr;
}
@media (max-width:960px){
  .dash{grid-template-columns:1fr;}
}

/* ---- Sidebar ---- */
.dash-sidebar{
  background:rgba(244,240,231,.03);
  border-right:1px solid var(--line-light);
  padding:26px 20px;
  display:flex;
  flex-direction:column;
  gap:28px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
@media (max-width:960px){
  .dash-sidebar{
    position:relative; height:auto; border-right:none;
    border-bottom:1px solid var(--line-light);
    flex-direction:column; align-items:stretch; gap:14px;
    padding:16px 0 14px;
  }
  .dash-sidebar > .dash-logo,
  .dash-sidebar > .dash-club-name{ margin:0 20px; }
  .dash-sidebar .dash-nav{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:0 20px 4px;
    -webkit-overflow-scrolling:touch;
  }
  .dash-sidebar .dash-nav .grp-label{display:none;}
  .dash-sidebar .dash-nav button{
    width:auto;
    flex:none;
    white-space:nowrap;
    background:rgba(244,240,231,.05);
    border:1px solid var(--line-light);
  }
  .dash-sidebar .dash-nav button.active{border-color:var(--orange);}
  .dash-back{ margin:0 20px; padding-top:0; border-top:none; }
}
.dash-logo{
  font-family:var(--font-head);
  font-size:22px;
  font-weight:700;
  color:var(--bone);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.dash-logo span{width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;transform:translateY(-8px);}
.dash-club-name{
  font-size:12px;
  color:rgba(244,240,231,.5);
  letter-spacing:.04em;
  padding-bottom:18px;
  border-bottom:1px solid var(--line-light);
}
.dash-club-name strong{display:block; font-size:14px; color:var(--sand); font-weight:600; margin-top:4px;}
.dash-nav{display:flex; flex-direction:column; gap:2px;}
.dash-nav button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:rgba(244,240,231,.62);
  font-size:13.5px;
  font-weight:600;
  padding:11px 12px;
  border-radius:6px;
  cursor:pointer;
  transition:.18s;
}
.dash-nav button:hover{background:rgba(244,240,231,.05); color:var(--bone);}
.dash-nav button.active{background:rgba(255,90,31,.12); color:var(--orange);}
.dash-nav .grp-label{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(244,240,231,.32); padding:16px 12px 4px;
}
.dash-nav .grp-label:first-child{padding-top:0;}
.dash-back{
  margin-top:auto;
  font-size:12.5px;
  color:rgba(244,240,231,.5);
  padding-top:18px;
  border-top:1px solid var(--line-light);
}
.dash-back:hover{color:var(--sand);}

/* ---- Main ---- */
.dash-main{padding:32px 40px 80px; min-width:0;}
@media (max-width:640px){.dash-main{padding:24px 18px 60px;}}
.dash-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:32px;
  flex-wrap:wrap;
  gap:16px;
}
.dash-topbar h1{color:var(--bone); font-size:clamp(24px,3vw,32px);}
.dash-topbar .sub{color:rgba(244,240,231,.5); font-size:13.5px; margin-top:4px;}
.dash-illustrative{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,240,231,.45); border:1px dashed var(--line-light-strong);
  padding:6px 11px; border-radius:2px;
}

.dash-panel{display:none;}
.dash-panel.active{display:block;}

.dash-stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:32px;
}
@media (max-width:820px){.dash-stat-row{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.dash-stat-row{grid-template-columns:1fr;}}
.dash-stat{
  background:rgba(244,240,231,.045);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:20px 22px;
  backdrop-filter:blur(6px);
  min-width:0;
}
.dash-stat .v{font-family:var(--font-head); font-size:30px; color:var(--bone);}
.dash-stat .l{font-size:12px; color:rgba(244,240,231,.5); margin-top:4px;}
.dash-stat .delta{font-size:11.5px; margin-top:8px; color:#7CD79A; font-weight:600;}
.dash-stat .delta.warn{color:var(--orange);}

.dash-card{
  background:rgba(244,240,231,.04);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:26px;
  margin-bottom:24px;
  backdrop-filter:blur(6px);
  min-width:0;
}
.dash-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  gap:12px;
  flex-wrap:wrap;
}
.dash-card-head h3{font-size:16px; font-family:var(--font-body); font-weight:700; color:var(--bone);}
.dash-card-head .count{font-size:12px; color:rgba(244,240,231,.45);}

.dash-grid-2{display:grid; grid-template-columns:1.3fr 1fr; gap:24px;}
@media (max-width:900px){.dash-grid-2{grid-template-columns:1fr;}}

/* ---- Tables ---- */
.dash-table{width:100%; border-collapse:collapse;}
.dash-table th{
  text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(244,240,231,.4); padding:9px 12px; border-bottom:1px solid var(--line-light);
  white-space:nowrap;
}
.dash-table td{
  padding:13px 12px; border-bottom:1px solid rgba(244,240,231,.06); font-size:13.5px; color:rgba(244,240,231,.85);
  white-space:nowrap;
}
.dash-table tr:last-child td{border-bottom:none;}
.dash-table-wrap{overflow-x:auto;}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:5px 10px; border-radius:20px;
}
.pill-good{background:rgba(124,215,154,.14); color:#7CD79A;}
.pill-warn{background:rgba(255,90,31,.14); color:var(--orange);}
.pill-neutral{background:rgba(244,240,231,.08); color:rgba(244,240,231,.65);}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

/* ---- Leaderboard ---- */
.leaderboard{display:flex; flex-direction:column; gap:2px;}
.lb-row{
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 10px;
  border-radius:6px;
}
.lb-row:nth-child(odd){background:rgba(244,240,231,.03);}
.lb-rank{font-family:var(--font-head); font-size:15px; color:var(--sand);}
.lb-rank.top{color:var(--orange);}
.lb-name{font-size:13.5px; font-weight:600; color:var(--bone);}
.lb-meta{font-size:11.5px; color:rgba(244,240,231,.45); margin-top:2px;}
.lb-score{font-family:var(--font-head); font-size:16px; color:var(--bone);}

/* ---- Avatar chip ---- */
.chip-person{display:flex; align-items:center; gap:10px;}
.chip-avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--khaki); color:var(--sand);
  display:flex;align-items:center;justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}

/* ---- Small action buttons within dashboard ---- */
.dash-card .btn{padding:9px 16px; font-size:11.5px;}
.dash-btn-row{display:flex; gap:10px; flex-wrap:wrap;}

/* ---- Calendar strip ---- */
.cal-strip{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;}
.cal-day{
  flex-shrink:0; width:74px; text-align:center; padding:14px 8px;
  border:1px solid var(--line-light); border-radius:var(--radius-sm);
  background:rgba(244,240,231,.03);
}
.cal-day.active{border-color:var(--orange); background:rgba(255,90,31,.08);}
.cal-day .d{font-size:10.5px; color:rgba(244,240,231,.45); text-transform:uppercase;}
.cal-day .n{font-family:var(--font-head); font-size:20px; color:var(--bone); margin-top:4px;}
.cal-day .tag{font-size:9.5px; color:var(--orange); margin-top:4px; font-weight:700;}

/* ---- Document / newsletter rows reuse .doc-row from profile page (dark override) ---- */
.dash-card .doc-row{background:rgba(244,240,231,.03); border-color:var(--line-light);}
.dash-card .doc-row .d-name{color:var(--bone);}
.dash-card .doc-row .d-meta{color:rgba(244,240,231,.5);}
.dash-card .doc-lock{border-color:var(--line-light-strong); color:rgba(244,240,231,.5);}

/* ==========================================================================
   HOUND Check — record completeness view (not a quality score).
   ========================================================================== */
.hcheck-panel{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
}
.hcheck-overall{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.hcheck-overall .n{font-family:var(--font-head); font-size:44px; color:var(--charcoal);}
.hcheck-overall .l{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-50);}
.hcheck-note{font-size:12px; color:var(--ink-50); margin-top:2px;}
.hcheck-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 32px;}
.hcheck-metric .m-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.hcheck-metric .m-label{font-size:13.5px; font-weight:600; color:var(--charcoal);}
.hcheck-metric .m-pct{font-family:var(--font-head); font-size:16px; color:var(--orange-deep);}
@media (max-width:640px){.hcheck-grid{grid-template-columns:1fr;}}

/* ---- Pedigree — multi-generation tree ---- */
.ped-tree{margin-top:28px; display:flex; flex-direction:column; gap:22px;}
.ped-branch{display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center;}
.ped-branch .ped-parent{border-left:3px solid var(--orange);}
.ped-branch.dam-side .ped-parent{border-left-color:var(--khaki);}
.ped-grandparents{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pedigree-box.small{padding:12px 14px;}
.pedigree-box.small .name{font-size:13.5px;}
.pedigree-box .verify{font-size:10px; color:var(--ink-50); margin-top:4px; text-transform:uppercase; letter-spacing:.05em;}
@media (max-width:700px){.ped-branch{grid-template-columns:1fr;}}

/* ---- Lifetime traceability timeline ---- */
.lifecycle{display:flex; flex-direction:column; margin-top:24px;}
.lc-step{
  display:grid;
  grid-template-columns:110px 24px 1fr;
  gap:4px 18px;
  padding-bottom:26px;
  position:relative;
}
.lc-step::before{
  content:"";
  position:absolute;
  left:120px; top:22px; bottom:-4px;
  width:1px;
  background:var(--line);
}
.lc-step:last-child::before{display:none;}
.lc-step .lc-date{font-size:12px; color:var(--ink-50); padding-top:3px; text-align:right;}
.lc-step .lc-dot{width:14px;height:14px;border-radius:50%;background:var(--bone); border:2px solid var(--orange); margin-top:2px;}
.lc-step.future .lc-dot{border-color:var(--line); background:var(--bone-dim);}
.lc-step .lc-body{padding-bottom:4px;}
.lc-step .lc-title{font-weight:700; font-size:14.5px; color:var(--charcoal);}
.lc-step .lc-meta{font-size:12.5px; color:var(--ink-50); margin-top:2px;}
.lc-step.future .lc-title{color:var(--ink-50); font-weight:600;}
@media (max-width:600px){
  .lc-step{grid-template-columns:70px 20px 1fr;}
  .lc-step::before{left:80px;}
}

/* ---- Analyse a Pairing ---- */
.pairing-select-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  max-width:760px;
  margin:28px auto 0;
}
.pairing-plus{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--khaki);
  color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-size:20px;
  flex-shrink:0;
}
.pairing-dog-select{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
}
.pairing-dog-select .role{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--orange);}
.pairing-dog-select select{
  width:100%; margin-top:12px; padding:12px 14px;
  border:1px solid var(--line); border-radius:3px; background:var(--bone); font-size:14.5px; font-weight:600;
}
@media (max-width:700px){.pairing-select-row{grid-template-columns:1fr; text-align:center;} .pairing-plus{margin:0 auto;}}

.pairing-report{
  max-width:820px;
  margin:36px auto 0;
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--shadow-card);
  display:none;
}
.pairing-report.show{display:block;}
.pairing-metrics{display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; margin-top:24px;}
.pairing-metric{padding:16px 0; border-bottom:1px solid var(--line);}
.pairing-metric .pm-label{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-50);}
.pairing-metric .pm-value{font-family:var(--font-head); font-size:19px; margin-top:6px; color:var(--charcoal);}
.pairing-metric .pm-value.good{color:#3E6B4A;}
.pairing-confidence{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.pairing-confidence .pc-num{font-family:var(--font-head); font-size:38px; color:var(--orange-deep);}
.pairing-confidence .pc-bar{flex:1; min-width:160px;}
@media (max-width:640px){.pairing-metrics{grid-template-columns:1fr;}}

/* ---- Breeder / Vet directory ---- */
.directory-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px;}
@media (max-width:980px){.directory-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.directory-grid{grid-template-columns:1fr;}}
.dir-card{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.dir-card .dir-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.dir-card h4{font-size:16.5px; font-family:var(--font-head); font-weight:600;}
.dir-card .dir-loc{font-size:12.5px; color:var(--ink-50); margin-top:3px;}
.dir-card .dir-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px;}
.dir-tag{font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:5px 9px; border-radius:2px; background:var(--bone-dim); color:var(--khaki); text-transform:uppercase;}
.dir-verified{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#3E6B4A; display:flex; align-items:center; gap:5px;}
.dir-verified::before{content:"✓";}
.dir-card .dir-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.dir-card .dir-stats div{font-size:11px; color:var(--ink-50); text-transform:uppercase; letter-spacing:.04em;}
.dir-card .dir-stats strong{display:block; font-size:15px; color:var(--charcoal); font-weight:700; text-transform:none; margin-top:2px;}

.filter-bar{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.filter-bar select{
  padding:11px 14px; border:1px solid var(--line); border-radius:3px; background:var(--bone);
  font-size:13.5px; font-weight:600; pointer-events:none; min-width:160px;
}

.profile-feature{
  background:var(--khaki); color:var(--bone);
  border-radius:var(--radius-lg);
  padding:40px;
  margin-top:32px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:center;
}
.profile-feature .pf-badge{
  width:64px;height:64px; border-radius:50%; background:rgba(255,90,31,.14); border:1px solid var(--line-light-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:22px; color:var(--orange); flex-shrink:0;
}
.profile-feature h3{color:var(--bone); font-size:22px;}
.profile-feature .pf-stats{display:flex; gap:32px; margin-top:16px; flex-wrap:wrap;}
.profile-feature .pf-stats div{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(244,240,231,.55);}
.profile-feature .pf-stats strong{display:block; font-size:20px; color:var(--bone); font-family:var(--font-head); margin-top:3px;}
@media (max-width:700px){.profile-feature{grid-template-columns:1fr; text-align:center;} .profile-feature .pf-badge{margin:0 auto;} .profile-feature .pf-stats{justify-content:center;}}

/* ---- Opportunities feed ---- */
.opp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px;}
@media (max-width:980px){.opp-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.opp-grid{grid-template-columns:1fr;}}
.opp-card{background:var(--bone); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:10px;}
.opp-cat{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange);}
.opp-card h5{font-size:15px; font-family:var(--font-head); font-weight:600; margin-top:2px;}
.opp-meta{font-size:12px; color:var(--ink-50);}
.opp-card .btn{margin-top:auto; align-self:flex-start; padding:9px 16px; font-size:11.5px;}

/* ---- Identity to Intelligence flow ---- */
.i2i-flow{display:flex; flex-direction:column; gap:0; max-width:420px; margin:36px auto 0;}
.i2i-step{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; background:var(--bone); border:1px solid var(--line); border-radius:var(--radius-sm);
  position:relative;
}
.i2i-step + .i2i-step{margin-top:22px;}
.i2i-step + .i2i-step::before{
  content:"↓"; position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  color:var(--orange); font-size:16px; font-weight:700;
}
.i2i-step .i2i-num{font-family:var(--font-head); color:var(--orange); font-weight:700; font-size:14px; width:24px; flex-shrink:0;}
.i2i-step .i2i-label{font-size:14.5px; font-weight:700; color:var(--charcoal);}

/* ---- HOUND Command teaser (public landing, dark) ---- */
.command-teaser{
  background:var(--charcoal); color:var(--bone);
  border-radius:var(--radius-lg);
  padding:44px;
  margin-top:28px;
}
.command-teaser .ct-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px;}
@media (max-width:820px){.command-teaser .ct-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.command-teaser .ct-grid{grid-template-columns:1fr;}}
.command-teaser .ct-stat{background:rgba(244,240,231,.05); border:1px solid var(--line-light); border-radius:var(--radius-sm); padding:16px 18px;}
.command-teaser .ct-stat .n{font-family:var(--font-head); font-size:24px;}
.command-teaser .ct-stat .l{font-size:11px; color:rgba(244,240,231,.5); text-transform:uppercase; letter-spacing:.05em; margin-top:3px;}

/* ---- Memberships list (profile) ---- */
.membership-list{display:flex; flex-direction:column; gap:2px; max-width:520px;}
.membership-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-top:10px; background:var(--bone);
}
.membership-row .mr-name{font-weight:600; font-size:14.5px;}
.membership-row .mr-meta{font-size:12px; color:var(--ink-50); margin-top:2px;}

/* ==========================================================================
   TACTICAL / FIELD-INTELLIGENCE DESIGN SYSTEM
   Shared motifs used across the hero, field intelligence panel, and any
   "command" or "trace" framed component. Additive — does not alter the
   base editorial system used by long-form copy sections.
   ========================================================================== */

:root{
  --mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --tac-line: rgba(74,73,56,.22);          /* khaki-tinted grid line, light bg */
  --tac-line-dark: rgba(244,240,231,.14);  /* bone-tinted grid line, dark bg */
}

/* ---- coordinate grid backdrop ---- */
.tac-grid-bg{
  position:relative;
  background-image:
    linear-gradient(var(--tac-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tac-line) 1px, transparent 1px);
  background-size:34px 34px;
}
.tac-grid-bg.on-dark{
  background-image:
    linear-gradient(var(--tac-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--tac-line-dark) 1px, transparent 1px);
}

/* ---- topographic / contour texture, very low-opacity, decorative only ---- */
.tac-contour-bg{position:relative; isolation:isolate;}
.tac-contour-bg::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='%234A4938' stroke-opacity='0.14' stroke-width='1'><ellipse cx='120' cy='140' rx='60' ry='40'/><ellipse cx='120' cy='140' rx='100' ry='72'/><ellipse cx='120' cy='140' rx='150' ry='112'/><ellipse cx='300' cy='300' rx='50' ry='34'/><ellipse cx='300' cy='300' rx='92' ry='64'/></g></svg>");
  background-repeat:no-repeat;
  background-position:right -40px bottom -40px;
  background-size:520px 520px;
}

/* ---- corner ticks: camera-viewfinder brackets on a container ---- */
.tac-corners{position:relative;}
.tac-corners::before, .tac-corners::after,
.tac-corners .tc-tl, .tac-corners .tc-br{
  content:""; position:absolute; width:16px; height:16px; z-index:2;
  border-color:var(--orange); border-style:solid; border-width:0;
}
.tac-corners::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.tac-corners::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* ---- status / label chips ---- */
.tac-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono);
  font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px 4px 7px;
  border:1px solid currentColor;
  border-radius:3px;
  color:var(--khaki);
  background:rgba(74,73,56,.05);
}
.tac-tag i{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.tac-tag.on-dark{background:rgba(244,240,231,.06);}
.tac-tag.status-verified{color:#3C6E4C;}
.tac-tag.status-active{color:var(--orange);}
.tac-tag.status-trace{color:#6E7FA3;}
.tac-tag.status-field{color:var(--khaki);}
.tac-tag.status-scan{color:var(--orange);}
.tac-tag.status-pending{color:var(--ink-50, #8a8873);}

/* ---- coordinate / data readout text ---- */
.tac-coord{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--ink-50, rgba(28,29,26,.5));
}
.tac-coord.on-dark{color:rgba(244,240,231,.5);}
.tac-coord b{color:inherit; font-weight:700;}

/* ---- reticle / crosshair accent, small inline mark ---- */
.tac-reticle{
  display:inline-block; width:14px; height:14px; position:relative; flex-shrink:0;
}
.tac-reticle::before, .tac-reticle::after{
  content:""; position:absolute; background:currentColor;
}
.tac-reticle::before{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.tac-reticle::after{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }

/* ---- scan sweep, subtle, respects reduced motion ---- */
.tac-scan{position:relative; overflow:hidden;}
.tac-scan::after{
  content:"";
  position:absolute; left:0; right:0; height:40%;
  background:linear-gradient(to bottom, rgba(255,90,31,0) 0%, rgba(255,90,31,.08) 50%, rgba(255,90,31,0) 100%);
  animation:tac-scan-sweep 5s linear infinite;
}
@keyframes tac-scan-sweep{
  0%{ top:-40%; }
  100%{ top:100%; }
}
@media (prefers-reduced-motion: reduce){
  .tac-scan::after{ animation:none; display:none; }
}

/* ---- rangefinder tick rule, horizontal divider with tick marks ---- */
.tac-rule{
  height:1px;
  background-image:repeating-linear-gradient(90deg, var(--tac-line) 0 1px, transparent 1px 8px);
  margin:20px 0;
}
.tac-rule.on-dark{background-image:repeating-linear-gradient(90deg, var(--tac-line-dark) 0 1px, transparent 1px 8px);}

/* ---- Hero: HOUND OS™ command identity ---- */
.hero-copy .h1{letter-spacing:.01em;}
.hero-tagline{
  font-family:var(--font-head);
  font-size:clamp(15px,1.6vw,19px);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sand);
  margin-top:14px;
  line-height:1.5;
}
.hero-tagline b{color:var(--orange);}
.id-card-coord{
  position:absolute; bottom:10px; right:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.02em;
  color:rgba(244,240,231,.85);
  background:rgba(28,29,26,.55);
  padding:3px 7px;
  border-radius:2px;
}

/* ==========================================================================
   FIELD INTELLIGENCE PANEL — homepage system-view widget
   ========================================================================== */
.intel-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:22px;
  margin-top:32px;
}
@media (max-width:900px){ .intel-grid{grid-template-columns:1fr;} }

.intel-map{
  background:rgba(244,240,231,.04);
  border:1px solid var(--line-light);
  border-radius:var(--radius-lg);
  padding:18px;
}
.intel-map-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line-light);
}
.intel-map-body{position:relative;}
.intel-map-body svg{width:100%; height:auto; display:block;}
.intel-map-marker{ }
.intel-map-marker circle.pulse{ animation:intelPulse 2.4s ease-out infinite; transform-origin:center; }
@keyframes intelPulse{
  0%{opacity:.55; transform:scale(1);}
  100%{opacity:0; transform:scale(2.6);}
}
@media (prefers-reduced-motion: reduce){
  .intel-map-marker circle.pulse{ animation:none; opacity:0; }
}
.intel-map-legend{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line-light);
  font-size:11px; color:rgba(244,240,231,.6);
}
.intel-map-legend span{display:inline-flex; align-items:center; gap:6px;}
.intel-map-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;}

.intel-side{display:flex; flex-direction:column; gap:16px;}
.intel-stat-row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.intel-stat{
  background:rgba(244,240,231,.04);
  border:1px solid var(--line-light);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}
.intel-stat .n{font-family:var(--font-head); font-size:24px; color:var(--bone);}
.intel-stat .l{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(244,240,231,.5); margin-top:3px;}

.intel-readout{
  background:rgba(244,240,231,.04);
  border:1px solid var(--line-light);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  flex:1;
}
.ir-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line-light);
}
.ir-row:last-child{border-bottom:none;}
.ir-row span{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(244,240,231,.5);}
.ir-row b{font-weight:600; text-align:right;}

/* ==========================================================================
   WHY HOUND OS™ — VALUE CHAIN PAGE
   ========================================================================== */

/* ---------- Sticky stakeholder jump nav ---------- */
.stakeholder-nav{
  position:sticky; top:0; z-index:45;
  background:var(--charcoal);
  border-bottom:1px solid var(--line-light);
  overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.stakeholder-nav::-webkit-scrollbar{height:0;}
.stakeholder-nav .snav-inner{display:inline-flex; gap:2px; padding:0 16px;}
.stakeholder-nav a{
  display:inline-block; padding:14px 15px;
  font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,240,231,.5); border-bottom:2px solid transparent;
}
.stakeholder-nav a:hover, .stakeholder-nav a.active{color:var(--bone); border-bottom-color:var(--orange);}

/* ---------- Central commercial story / network-effect chain ---------- */
.chain-flow{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 6px; margin-top:36px; max-width:920px; margin-left:auto; margin-right:auto;}
.chain-flow .flow-chip{white-space:nowrap; font-size:12.5px;}
.chain-flow .flow-arrow{font-size:13px;}

/* ---------- Value exchange two-column ---------- */
.value-exchange-grid{display:grid; grid-template-columns:1fr 1fr; margin-top:40px; border:1px solid var(--line-light-strong);}
.ve-col{padding:34px 32px;}
.ve-col + .ve-col{border-left:1px solid var(--line-light-strong);}
.ve-col h3{font-family:var(--font-head); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin-bottom:18px;}
.ve-col ul{display:flex; flex-direction:column; gap:10px;}
.ve-col li{font-size:14.5px; padding-left:17px; position:relative;}
.ve-col li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--orange);}
.ve-statement{text-align:center; margin-top:34px; font-family:var(--font-head); font-weight:700; font-size:clamp(19px,2.6vw,27px); max-width:760px; margin-left:auto; margin-right:auto; line-height:1.3;}
@media (max-width:760px){
  .value-exchange-grid{grid-template-columns:1fr;}
  .ve-col + .ve-col{border-left:none; border-top:1px solid var(--line-light-strong);}
}

/* ---------- Stakeholder editorial sections ---------- */
.stakeholder{border-top:1px solid var(--line-light); scroll-margin-top:52px;}
.stakeholder-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.stakeholder--reverse .stakeholder-grid{grid-template-columns:1.15fr 0.85fr;}
.stakeholder--reverse .stakeholder-index{order:2;}
.stakeholder--reverse .stakeholder-answers{order:1;}
@media (max-width:900px){
  .stakeholder-grid, .stakeholder--reverse .stakeholder-grid{grid-template-columns:1fr; gap:26px;}
  .stakeholder--reverse .stakeholder-index{order:1;}
  .stakeholder--reverse .stakeholder-answers{order:2;}
}
.stakeholder-index .idx-num{font-family:var(--font-head); font-size:52px; line-height:1; color:var(--orange); opacity:.9;}
.stakeholder-index .idx-label{display:block; margin-top:4px; font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7;}
.stakeholder-title{margin-top:16px;}
.stakeholder-value{margin-top:12px; font-size:15px; opacity:.82; max-width:420px; line-height:1.55;}
.stakeholder-gains{display:flex; flex-wrap:wrap; gap:7px; margin-top:22px;}
.stakeholder-gains span{
  font-family:var(--mono, ui-monospace, monospace); font-size:10px; letter-spacing:.03em; text-transform:uppercase;
  padding:5px 9px; border:1px solid currentColor; opacity:.6;
}
.stakeholder-cta{margin-top:24px;}
.stakeholder-answers .sa-row{padding:18px 0; border-top:1px solid var(--line-light);}
.stakeholder-answers .sa-row:first-child{border-top:none; padding-top:0;}
.stakeholder-answers .sa-q{display:block; font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:7px;}
.stakeholder-answers .sa-row p{font-size:14.5px; line-height:1.62;}
.stakeholder-fine{margin-top:20px; font-size:12px; opacity:.55; line-height:1.5;}

/* ---------- Revenue grid ---------- */
.revenue-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light-strong); margin-top:40px; border:1px solid var(--line-light-strong);}
.revenue-card{background:var(--charcoal); padding:26px 24px;}
.revenue-card h4{font-family:var(--font-head); font-size:15px; letter-spacing:.01em; color:var(--bone);}
.revenue-card .rc-who{margin-top:10px; font-family:var(--mono, ui-monospace, monospace); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange);}
.revenue-card p{margin-top:8px; font-size:13px; line-height:1.55; color:rgba(244,240,231,.62);}
@media (max-width:920px){.revenue-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.revenue-grid{grid-template-columns:1fr;}}

/* ---------- Priority / rollout steps ---------- */
.priority-steps{margin-top:40px; border-top:1px solid var(--line-light-strong);}
.priority-step{display:grid; grid-template-columns:64px 1fr 1.2fr; gap:20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line-light-strong);}
.priority-step .ps-num{font-family:var(--font-head); font-size:26px; color:var(--orange);}
.priority-step .ps-title{font-family:var(--font-head); font-size:16.5px; letter-spacing:.01em;}
.priority-step .ps-purpose b{display:block; font-family:var(--mono, ui-monospace, monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; font-weight:400;}
.priority-step .ps-purpose span{font-size:13px; color:var(--ink-50);}
@media (max-width:700px){.priority-step{grid-template-columns:1fr; gap:6px;}}
.priority-later{margin-top:26px; display:flex; flex-wrap:wrap; gap:8px;}
.priority-later span{font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; border:1px solid var(--line-light-strong); color:var(--ink-50);}

/* ---------- Four pillars ---------- */
.pillars-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-light-strong); margin-top:40px; border:1px solid var(--line-light-strong);}
.pillar-card{background:var(--bone); padding:26px 22px;}
.pillar-card .pc-tag{font-family:var(--mono, ui-monospace, monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange);}
.pillar-card h4{margin-top:12px; font-family:var(--font-head); font-size:18px;}
.pillar-card p{margin-top:10px; font-size:13px; line-height:1.55; color:var(--ink-50);}
@media (max-width:920px){.pillars-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pillars-grid{grid-template-columns:1fr;}}

/* ---------- POINTSTEAD category grid ---------- */
.ps-category-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-light-strong); margin-top:36px; border:1px solid var(--line-light-strong);}
.ps-category{background:var(--charcoal); padding:22px 18px;}
.ps-category h5{font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange);}
.ps-category ul{margin-top:12px; display:flex; flex-direction:column; gap:6px;}
.ps-category li{font-size:12.5px; color:rgba(244,240,231,.72);}
@media (max-width:980px){.ps-category-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.ps-category-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.ps-category-grid{grid-template-columns:1fr;}}

/* ---------- Generic radial hub diagram (hero + final network visual) ---------- */
.hub-diagram{position:relative; width:100%; max-width:640px; margin:48px auto 0; aspect-ratio:1/1;}
.hub-diagram.hub-lg{max-width:820px;}
.hub-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:132px; height:132px; border-radius:50%;
  background:var(--orange); color:var(--bone);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-head); font-size:15px; font-weight:700; letter-spacing:.01em; line-height:1.2;
  box-shadow:0 0 0 12px rgba(255,90,31,.08), 0 0 0 24px rgba(255,90,31,.05);
  z-index:2; padding:8px;
}
.hub-node{
  position:absolute; width:104px; padding:10px 8px; text-align:center;
  background:rgba(244,240,231,.05); border:1px solid var(--line-light);
  font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bone); z-index:1;
}
@media (max-width:700px){
  .hub-diagram{max-width:100%;}
  .hub-node{width:84px; font-size:9px; padding:8px 5px;}
  .hub-center{width:104px; height:104px; font-size:12.5px;}
}
/* Frosted-glass contrast variant for hub diagrams that sit over a photo (hero) */
.hub-on-photo .hub-node{
  background:rgba(28,29,26,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:rgba(244,240,231,.3);
}
.hub-on-photo .hub-center{
  box-shadow:0 0 0 12px rgba(255,90,31,.16), 0 0 0 26px rgba(28,29,26,.35);
}

/* ---------- Chain arrow list (identity -> commerce) ---------- */
.chain-arrow-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin-top:30px;}
.chain-arrow-row span{
  font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--line-light-strong); color:var(--bone);
}
.chain-arrow-row i{color:var(--orange); font-style:normal; font-size:13px;}

/* ---------- Puppy pack flow ---------- */
.flow-vertical{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:30px;}
.flow-vertical .flow-chip{width:max-content;}
.flow-vertical .flow-arrow{display:block;}

/* ---------- Retention alert ticker (owner section) ---------- */
.alert-ticker{display:flex; flex-direction:column; gap:8px; margin-top:22px;}
.alert-ticker div{
  font-size:12.5px; padding:9px 12px; background:rgba(255,90,31,.07); border-left:2px solid var(--orange);
  font-family:var(--mono, ui-monospace, monospace); letter-spacing:.01em;
}