/* ═══════════════════════════════════════════════
   Reef Dosing Systems — Page-Specific Styles
   Global design system: ../global.css
   ═══════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
.hero-t{font-size:clamp(2.8rem,6.5vw,6rem);max-width:18ch}


/* ════════════════════════════════════════════════
   DEFINITION BLOCK — GEO first paragraph after hero
   ════════════════════════════════════════════════ */
.dos-def{background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.4) 100%);padding:clamp(4rem,8vw,6rem) 0;position:relative}
.dos-def p{font-size:clamp(1.1rem,1.3vw,1.25rem);line-height:1.85;color:rgba(255,255,255,.78);max-width:80ch}


/* ════════════════════════════════════════════════
   PATH OVERVIEW — 4-column path comparison cards
   ════════════════════════════════════════════════ */
.dos-paths-bg{background:linear-gradient(180deg,rgba(3,47,79,.4) 0%,var(--bp) 100%)}

.dos-paths{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:stretch;padding-top:30px}
.dos-path-item{position:relative;display:flex}
.dos-path{
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,2.5vw,2.2rem);
  background:rgba(1,24,39,.65);
  border:1px solid rgba(133,255,199,.1);
  position:relative;overflow:hidden;
  transition:all .45s cubic-bezier(.16,1,.3,1);
  flex:1 1 auto;width:100%
}
.dos-path:hover{border-color:rgba(133,255,199,.3);transform:translateY(-6px)}

/* Recommended card highlight */
.dos-path--rec{
  background:linear-gradient(145deg,rgba(0,100,102,.35) 0%,rgba(1,24,39,.7) 80%);
  border:2px solid rgba(133,255,199,.3)
}
.dos-path__ribbon{
  position:absolute;top:28px;right:-58px;
  width:210px;text-align:center;
  font-family:var(--h);font-weight:900;font-size:.58rem;letter-spacing:.12em;
  color:var(--bp);background:var(--aq);
  padding:.5em 0;transform:rotate(45deg);z-index:3;
  pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25)
}

.dos-path__img{height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;overflow:hidden}
.dos-path__img img{max-height:160px;width:auto;max-width:100%;object-fit:contain;transition:transform .5s}
.dos-path:hover .dos-path__img img{transform:scale(1.06) translateY(-4px)}

.dos-path__name{font-family:var(--h);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:1rem}

.dos-path__pros,.dos-path__cons{margin-bottom:.8rem}
.dos-path__pros li,.dos-path__cons li{
  font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.7);
  display:flex;align-items:flex-start;gap:.6em;margin-bottom:.35rem
}
.dos-path__pros li::before{content:'\f00c';font-family:'Font Awesome 6 Pro';font-weight:300;color:var(--aq);font-size:.8rem;flex-shrink:0;margin-top:.2em}
.dos-path__cons li::before{content:'\f068';font-family:'Font Awesome 6 Pro';font-weight:300;color:rgba(255,255,255,.3);font-size:.7rem;flex-shrink:0;margin-top:.25em}

.dos-path__note{margin-top:auto;padding-top:1rem;font-size:.88rem;color:rgba(133,255,199,.6);font-weight:700;font-family:var(--h);text-transform:uppercase;letter-spacing:.06em}


/* ════════════════════════════════════════════════
   CORE7 DEEP-DIVE — Chemistry & comparison table
   ════════════════════════════════════════════════ */
.dos-deepdive-bg{background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.45) 50%,var(--bp) 100%)}

/* Chemistry key figures strip */
.dos-chem-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:clamp(2.5rem,5vw,4rem) 0}
.dos-chem-fig{
  padding:1.5rem 1.8rem;
  background:rgba(0,100,102,.12);
  border:1px solid rgba(133,255,199,.15);
  text-align:center
}
.dos-chem-fig .num-lg{margin-bottom:.3rem}
.dos-chem-fig p{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.4}

/* Configuration comparison table */
.dos-config-table{width:100%;border-collapse:collapse;margin-top:clamp(2rem,4vw,3rem)}
.dos-config-table th,.dos-config-table td{
  padding:1rem 1.2rem;text-align:left;
  border-bottom:1px solid rgba(133,255,199,.08);
  font-size:1rem;line-height:1.5
}
.dos-config-table thead th{
  font-family:var(--h);font-weight:900;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--aq);
  border-bottom:2px solid rgba(133,255,199,.2);
  padding-bottom:.8rem
}
.dos-config-table tbody td{color:rgba(255,255,255,.72)}
.dos-config-table tbody tr:hover{background:rgba(0,100,102,.06)}
.dos-config-table .check{color:var(--aq);font-weight:700}
.dos-config-table .cross{color:rgba(255,255,255,.25)}
.dos-config-table .rec-row td{background:rgba(0,100,102,.1)}

/* Config sub-heading */
.dos-config-label{
  font-family:var(--h);font-weight:900;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--aq);
  margin-top:clamp(3rem,6vw,5rem);margin-bottom:1.5rem
}

/* Overflow wrapper for wide tables */
.dos-table-wrap{overflow-x:auto}

/* Contextual margin helpers */
.dos-mt-sm{margin-top:1rem}
.dos-mt-md{margin-top:1.5rem}
.dos-mt-lg{margin-top:2rem}

/* CaRx image order on desktop */
.dos-carx-img-first{order:-1}

/* Infusion hub icon accent */
.dos-hub-path h4 i{color:var(--aq);margin-right:.5rem}

/* Infusion closing text */
.dos-infusion-close{text-align:center;margin-top:clamp(2rem,4vw,3rem);max-width:60ch;margin-left:auto;margin-right:auto}

/* Infusion placeholder sizing */
.dos-infusion-ph{min-height:280px;min-width:160px}

/* MYTE CTA left-aligned */
.dos-myte-cta{text-align:left}

/* CEO Quote section */
.dos-quote-bg{background:var(--bp)}
.dos-quote-inner{max-width:60ch;margin:0 auto}

/* Stats bar duplicate for seamless loop */
.stats-dup{display:contents}

/* Base vs Reef image placeholders */
.dos-vs-images{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:clamp(2rem,4vw,3rem)}
.dos-vs-img{display:flex;align-items:center;justify-content:center;min-height:240px}
.dos-vs-img img{max-height:280px;width:auto;max-width:100%;object-fit:contain}


/* ════════════════════════════════════════════════
   PREPARATION — Tab layout for mixing instructions
   ════════════════════════════════════════════════ */
.dos-prep-bg{background:var(--bp)}

.dos-tabs{display:flex;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.dos-tab{
  font-family:var(--h);font-weight:900;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.8em 2em;
  background:rgba(1,24,39,.6);border:1px solid rgba(133,255,199,.1);
  color:rgba(255,255,255,.5);cursor:pointer;
  transition:all .3s;
  -webkit-user-select:none;user-select:none
}
.dos-tab:hover{border-color:rgba(133,255,199,.25);color:var(--w)}
.dos-tab.active{background:rgba(0,100,102,.25);border-color:var(--aq);color:var(--aq)}

.dos-tab-panel{display:none}
.dos-tab-panel.active{display:block}

/* Step cards within prep */
.dos-step{
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;
  padding:1.5rem 0;
  border-bottom:1px solid rgba(133,255,199,.06);
  align-items:start
}
.dos-step:last-child{border-bottom:none}
.dos-step__num{
  font-family:var(--h);font-weight:900;font-size:2.2rem;
  color:var(--aq);opacity:.3;line-height:1;min-width:2.5rem;text-align:center
}
.dos-step__title{font-family:var(--h);font-weight:900;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.dos-step__body{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.72)}
.dos-step__body strong{color:var(--aq);font-weight:700}

/* Kit size info */
.dos-kit-note{
  margin-top:clamp(2rem,4vw,3rem);
  padding:1.5rem 2rem;
  background:rgba(0,100,102,.1);
  border-left:3px solid var(--aq)
}
.dos-kit-note p{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.72)}


/* ════════════════════════════════════════════════
   BALLING & CaRx — Product sections (2-col layout)
   ════════════════════════════════════════════════ */
.dos-balling-bg{background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.5) 100%)}
.dos-carx-bg{background:linear-gradient(180deg,rgba(3,47,79,.5) 0%,var(--bp) 100%)}

.dos-prod-img{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
.dos-prod-img img{max-height:380px;width:auto;max-width:100%;object-fit:contain;transition:transform .6s}
.dos-prod-img:hover img{transform:scale(1.04)}

.dos-prod-specs{display:grid;gap:.5rem;margin-top:1.5rem}
.dos-spec{
  display:flex;align-items:center;gap:.8rem;
  padding:.8rem 1.2rem;
  background:rgba(0,100,102,.08);
  border:1px solid rgba(133,255,199,.08);
  font-size:.95rem;color:rgba(255,255,255,.72)
}
.dos-spec i{color:var(--aq);font-size:.9rem;width:1.2rem;text-align:center;flex-shrink:0}


/* ════════════════════════════════════════════════
   BASE vs REEF — Side-by-side comparison
   ════════════════════════════════════════════════ */
.dos-vs-bg{background:var(--bp)}

.dos-vs{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:clamp(2.5rem,5vw,4rem)}
.dos-vs-card{
  padding:clamp(2rem,3vw,2.8rem);
  background:rgba(1,24,39,.6);
  border:1px solid rgba(133,255,199,.1);
  transition:all .4s
}
.dos-vs-card:hover{border-color:rgba(133,255,199,.25)}
.dos-vs-card h3{font-family:var(--h);font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1rem}
.dos-vs-card p{font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.72);margin-bottom:1rem}
.dos-vs-marker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--h);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--aq);margin-bottom:1rem
}
.dos-vs-marker i{font-size:.75rem}


/* ════════════════════════════════════════════════
   INFUSION HUB — Central connecting element
   ════════════════════════════════════════════════ */
.dos-infusion-bg{
  background:linear-gradient(135deg,rgba(0,100,102,.25) 0%,var(--bp) 40%,rgba(3,47,79,.4) 100%);
  position:relative
}

.dos-hub{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(2rem,4vw,3rem);align-items:center;margin-top:clamp(3rem,6vw,5rem)}
.dos-hub-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.dos-hub-center img{max-height:320px;width:auto;filter:drop-shadow(0 20px 60px rgba(133,255,199,.15))}
.dos-hub-center .badge{margin-top:.5rem}

.dos-hub-paths{display:grid;gap:1.2rem}
.dos-hub-path{
  padding:1.2rem 1.5rem;
  background:rgba(1,24,39,.5);
  border:1px solid rgba(133,255,199,.08);
  transition:all .3s
}
.dos-hub-path:hover{border-color:rgba(133,255,199,.25);transform:translateX(4px)}
.dos-hub-path:last-child:hover{transform:translateX(-4px)}
.dos-hub-path h4{font-family:var(--h);font-weight:900;font-size:.88rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.dos-hub-path p{font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.5}


/* ════════════════════════════════════════════════
   ICP INTEGRATION — Feedback loop
   ════════════════════════════════════════════════ */
.dos-icp-bg{background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.3) 100%)}

.dos-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(3rem,6vw,4.5rem)}
.dos-loop-step{
  padding:clamp(1.5rem,2.5vw,2rem);
  background:rgba(1,24,39,.6);
  border:1px solid rgba(133,255,199,.08);
  position:relative;text-align:center;
  transition:all .4s
}
.dos-loop-step:hover{border-color:rgba(133,255,199,.2)}
.dos-loop-step i{font-size:1.8rem;color:var(--aq);opacity:.6;margin-bottom:1rem;display:block}
.dos-loop-step h4{font-family:var(--h);font-weight:900;font-size:.88rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.dos-loop-step p{font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.5}
.dos-loop-arrow{display:none}/* Arrows hidden, flow implied by layout */


/* ════════════════════════════════════════════════
   MYTE BRIDGE — Upsell section
   ════════════════════════════════════════════════ */
.dos-myte-bg{background:linear-gradient(180deg,rgba(3,47,79,.3) 0%,var(--bp) 100%)}

.dos-myte-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.dos-myte-visual img{max-height:340px;width:auto;max-width:100%;object-fit:contain}


/* ════════════════════════════════════════════════
   FAQ — Inherits global styles, background only
   ════════════════════════════════════════════════ */
.dos-faq-bg{background:var(--bp)}


/* ════════════════════════════════════════════════
   MULTI-PATH CTA — Final conversion section
   ════════════════════════════════════════════════ */
.dos-cta{
  text-align:center;
  padding:clamp(7rem,14vw,12rem) 0;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bp) 0%,rgba(0,100,102,.3) 50%,var(--bp) 100%)
}
.dos-cta .s-inner{position:relative;z-index:1}
.dos-cta h2{font-family:var(--h);font-weight:900;font-size:clamp(2.4rem,5vw,4.5rem);text-transform:uppercase;line-height:.95;letter-spacing:-.02em;margin-bottom:1.5rem}
.dos-cta p{font-size:clamp(1.1rem,1.3vw,1.25rem);color:rgba(255,255,255,.72);line-height:1.75;max-width:55ch;margin:0 auto 3rem}
.dos-cta-btns{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.dos-cta-btns__row{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center}


/* ════════════════════════════════════════════════
   RESPONSIVE — Page-specific
   ════════════════════════════════════════════════ */

@media(max-width:1024px){
  .dos-paths{grid-template-columns:1fr 1fr}
  .dos-chem-strip{grid-template-columns:1fr 1fr}
  .dos-hub{grid-template-columns:1fr;gap:2.5rem}
  .dos-hub-center{order:-1}
  .dos-hub-paths{width:100%;min-width:0}
  .dos-hub-path{box-sizing:border-box;width:100%}
  .dos-loop{grid-template-columns:1fr 1fr}
  .dos-vs{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .hero-t{font-size:clamp(2.2rem,8vw,3.2rem)}

  .dos-paths{grid-template-columns:1fr}
  .dos-path__ribbon{top:22px;right:-60px;width:190px;font-size:.52rem}

  .dos-chem-strip{grid-template-columns:1fr}

  /* table horizontal scroll stays intact at 768 — card layout kicks in at 640 */

  .dos-tabs{flex-wrap:wrap}
  .dos-tab{flex:1;min-width:0;text-align:center;font-size:.72rem;padding:.7em 1em}

  .dos-step{grid-template-columns:1fr}
  .dos-step__num{font-size:1.5rem}

  .dos-prod-img{min-height:220px}
  .dos-prod-img img{max-height:260px}

  .dos-vs{grid-template-columns:1fr}
  .dos-vs-images{grid-template-columns:1fr}
  .dos-carx-img-first{order:0}

  .dos-hub{grid-template-columns:1fr}
  .dos-hub-center img{max-height:240px}

  .dos-loop{grid-template-columns:1fr}

  .dos-myte-visual{min-height:220px}
  .dos-myte-visual img{max-height:240px}

  .dos-cta h2{font-size:clamp(1.8rem,7vw,2.8rem)}
  .dos-cta-btns{flex-direction:column;align-items:center}
  .dos-cta-btns__row{flex-direction:column;align-items:center}
  .dos-cta-btns .btn,.dos-cta-btns__row .btn{width:100%;max-width:400px}
}

@media(max-width:480px){
  .dos-path__img{height:140px}
  .dos-path__img img{max-height:120px}
}

/* ── CONFIG TABLE → CARD LAYOUT on mobile ────────────────────── */
@media(max-width:640px){
  .dos-table-wrap{overflow:hidden}

  /* flatten table into block elements */
  .dos-config-table,
  .dos-config-table thead,
  .dos-config-table tbody,
  .dos-config-table tr,
  .dos-config-table td{display:block;width:100%;box-sizing:border-box}

  /* hide the header row visually but keep it accessible */
  .dos-config-table thead tr{
    position:absolute;top:-9999px;left:-9999px;visibility:hidden
  }

  /* each row = a card */
  .dos-config-table tbody tr{
    background:rgba(1,24,39,.65);
    border:1px solid rgba(133,255,199,.12);
    border-radius:8px;
    margin-bottom:1rem;
    padding:1.2rem;
    font-size:.9rem
  }
  .dos-config-table .rec-row{
    border-color:rgba(133,255,199,.35);
    background:rgba(0,100,102,.15)
  }

  /* first cell = card title */
  .dos-config-table td:first-child{
    font-family:var(--h);font-weight:900;
    font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;
    color:#fff;
    padding:0 0 .75rem;
    margin-bottom:.5rem;
    border-bottom:1px solid rgba(133,255,199,.12)
  }

  /* data cells: label stacked above value */
  .dos-config-table td:not(:first-child){
    display:block;
    padding:.65rem 0 .2rem;
    border-bottom:none;
    line-height:1.5
  }
  /* thin separator between attribute rows */
  .dos-config-table td:not(:first-child) + td:not(:first-child){
    border-top:1px solid rgba(133,255,199,.07);
    padding-top:.7rem
  }
  .dos-config-table td:not(:first-child)::before{
    content:attr(data-label);
    display:block;
    margin-bottom:.25rem;
    font-size:.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
    color:rgba(255,255,255,.38)
  }
}