/* ═══════════════════════════════════════════════
   TRITON — MYTE Subscription Landing Page Styles
   Global design system: ../global.css
   ═══════════════════════════════════════════════ */

/* Font Awesome icon sizes (page-specific) */
.pain-icon i{font-size:1.4rem;color:var(--aq)}
.step-icon i{font-size:1.3rem;color:var(--aq)}
.inc-icon i{font-size:1.4rem;color:var(--aq)}

/* Section header width constraints */
.myte-pg .s-hdr-60{max-width:60ch}
.myte-pg .s-hdr-55{max-width:55ch}

/* Testimonial placeholder height */
.myte-pg .testi-photo .image-placeholder{min-height:240px}


/* ════════════════════════════════════════════════
   HERO — Coral background + product image
   ════════════════════════════════════════════════ */
.myte-hero{display:flex;align-items:stretch}
.myte-hero .hero-bg{position:absolute;inset:0;background:url('../../media/images/backgrounds/icp-hero-coral-tank.jpg') center/cover no-repeat}
.myte-hero .hero-bg::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(3,47,79,.55);mix-blend-mode:multiply}
.myte-hero .hero-bg::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(1,24,39,.6) 0%,rgba(1,24,39,.2) 30%,rgba(1,24,39,.25) 55%,rgba(1,24,39,.96) 100%)}
.myte-hero .hero-ct{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:clamp(2rem,4vw,5rem)}
.myte-hero .hero-text{min-width:0;align-self:end}
.hero-product{position:relative;z-index:2;align-self:center;justify-self:center}
.hero-product img{max-height:65vh;width:auto;object-fit:contain;filter:drop-shadow(0 20px 60px rgba(0,0,0,.5))}
.myte-pg .hero-t{font-size:clamp(2.6rem,5.5vw,4.8rem);max-width:22ch}


/* ════════════════════════════════════════════════
   PAIN — Problem Section
   ════════════════════════════════════════════════ */
.pain{background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.6) 100%);position:relative;overflow:hidden}
.pain-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.75);margin-bottom:2rem;max-width:58ch}
.pain-body strong{color:var(--aq);font-weight:700}

.pain-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(3rem,6vw,4.5rem)}
.pain-card{padding:clamp(2rem,3vw,2.8rem);background:rgba(1,24,39,.6);border:1px solid rgba(133,255,199,.1);position:relative;overflow:hidden;transition:all .4s;display:flex;flex-direction:column}
.pain-card:hover{border-color:rgba(133,255,199,.3);transform:translateY(-4px)}
.pain-card .pain-icon{margin-bottom:1.2rem}
.pain-card h3{font-family:var(--h);font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem}
.pain-card p{font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.68)}


/* ════════════════════════════════════════════════
   HOW IT WORKS — 4 Steps
   ════════════════════════════════════════════════ */
.hiw{background:var(--bp);position:relative;overflow:hidden}
.hiw::before{content:'';position:absolute;inset:0;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 1l27 15.5v31L28 63 1 47.5v-31z' fill='none' stroke='%2385FFC7' stroke-width='.4'/%3E%3C/svg%3E");background-size:56px 97px}
.hiw>*{position:relative;z-index:1}

.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid rgba(133,255,199,.1);border-bottom:2px solid rgba(133,255,199,.1);margin-top:clamp(3rem,6vw,4.5rem)}
.hiw-step{padding:clamp(2.5rem,4vw,3.5rem) 2rem;border-right:1px solid rgba(133,255,199,.06);position:relative;transition:background .3s}
.hiw-step:last-child{border-right:none}
.hiw-step:hover{background:rgba(0,100,102,.08)}
.hiw-step-n{font-family:var(--h);font-weight:900;font-size:5rem;color:var(--aq);opacity:.1;line-height:.8;margin-bottom:1.2rem;letter-spacing:-.03em}
.hiw-step .step-icon{margin-bottom:1.2rem}
.hiw-step h3{font-family:var(--h);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.hiw-step p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.68)}


/* ════════════════════════════════════════════════
   ELEMENTS STRIP — 15 Elements Periodic Table Style
   ════════════════════════════════════════════════ */
.elstrip{background:var(--mr);position:relative;overflow:hidden}
.elstrip::before{content:'';position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 1l27 15.5v31L28 63 1 47.5v-31z' fill='none' stroke='%2385FFC7' stroke-width='.6'/%3E%3C/svg%3E");background-size:56px 97px}
.elstrip>*{position:relative;z-index:1}

.el-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:clamp(3rem,6vw,4.5rem)}
.el-tile{padding:1.5rem 1.2rem;background:rgba(1,24,39,.5);border:1px solid rgba(133,255,199,.12);text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:default;position:relative;overflow:hidden}
.el-tile:hover{border-color:rgba(133,255,199,.5);transform:translateY(-6px);background:rgba(0,100,102,.2);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.el-tile .el-sym{font-family:var(--h);font-weight:900;font-size:2.2rem;color:var(--aq);line-height:1;margin-bottom:.3rem;transition:transform .3s}
.el-tile:hover .el-sym{transform:scale(1.1)}
.el-tile .el-name{font-family:var(--h);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.6rem}

/* Element function — always visible */
.el-tile .el-func{padding:.6rem 0 0;font-size:.82rem;line-height:1.4;color:rgba(255,255,255,.75);border-top:1px solid rgba(133,255,199,.12);margin-top:.5rem}

/* Bottle indicator — which bottle the element belongs to */
.el-bottle{font-family:var(--h);font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bp);background:var(--aq);padding:.2em .6em;display:inline-block;margin-top:.4rem}


/* ════════════════════════════════════════════════
   WHAT'S INCLUDED — Feature Cards
   ════════════════════════════════════════════════ */
.incl{background:var(--bp);position:relative;overflow:hidden}
.incl::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 30% 50%,rgba(0,100,102,.12) 0%,transparent 70%)}
.incl>*{position:relative;z-index:1}

.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(3rem,6vw,4.5rem)}
.incl-card{padding:clamp(2rem,3vw,2.5rem);background:rgba(1,24,39,.55);border:1px solid rgba(133,255,199,.1);transition:all .4s;display:flex;flex-direction:column}
.incl-card:hover{border-color:rgba(133,255,199,.3);transform:translateY(-4px)}
.incl-card .inc-icon{margin-bottom:1.2rem}
.incl-card h3{font-family:var(--h);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem}
.incl-card p{font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.68);flex:1}
/* The wide card spans 2 columns */
.incl-card-wide{grid-column:1/3}
.incl-card-wide .incl-inner{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}


/* ════════════════════════════════════════════════
   AUTHORITY / SCIENCE — GBR + 500K
   ════════════════════════════════════════════════ */
.authority{position:relative;overflow:hidden}
.authority-bg{position:absolute;inset:0;z-index:0}
.authority-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(1,24,39,.94) 0%,rgba(3,47,79,.85) 35%,rgba(0,100,102,.5) 100%)}
.authority>*:not(.authority-bg){position:relative;z-index:1}

.auth-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:clamp(4rem,8vw,6rem);border-bottom:2px solid rgba(133,255,199,.1);padding-bottom:clamp(3rem,6vw,4.5rem)}
.auth-stat{position:relative;padding:0 clamp(1.5rem,3vw,2.5rem);min-width:0}
.auth-stat:first-child{padding-left:0}
.auth-stat:last-child{padding-right:0}
.auth-stat::after{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:rgba(133,255,199,.12)}
.auth-stat:last-child::after{display:none}
.auth-stat .as-n{font-family:var(--h);font-weight:900;font-size:clamp(3rem,5.5vw,5rem);color:var(--aq);line-height:.9;letter-spacing:-.03em}
.auth-stat .as-l{font-size:1.05rem;color:rgba(255,255,255,.55);margin-top:.5rem;line-height:1.4}

.auth-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.78);max-width:72ch;margin-bottom:2rem}

/* Partner logos marquee — unique spacing */
.auth-partners{margin-top:clamp(3rem,6vw,5rem);padding:1.5rem 0;border-top:1px solid rgba(133,255,199,.06);border-bottom:1px solid rgba(133,255,199,.06)}


/* ════════════════════════════════════════════════
   SYSTEM INTEGRATION — MYTE + Core7
   ════════════════════════════════════════════════ */
.sysint{background:var(--mr);position:relative;overflow:hidden}
.sysint::before{content:'';position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 1l13 7.5v15L14 31 1 23.5v-15z' fill='none' stroke='%2385FFC7' stroke-width='.6'/%3E%3C/svg%3E");background-size:28px 49px}
.sysint>*{position:relative;z-index:1}

.sysint-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.75);margin-top:1rem;max-width:62ch}
.sysint-body strong{color:var(--aq);font-weight:700}
.sysint-diagram{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;margin-top:clamp(3rem,6vw,4.5rem)}
.sysint-block{padding:clamp(2rem,3vw,2.8rem);background:rgba(1,24,39,.6);border:1px solid rgba(133,255,199,.12);text-align:center;transition:all .4s}
.sysint-block:hover{border-color:rgba(133,255,199,.3);transform:translateY(-4px)}
.sysint-block h3{font-family:var(--h);font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem;color:var(--aq)}
.sysint-block p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.68)}
.sysint-plus{font-family:var(--h);font-weight:900;font-size:3rem;color:var(--aq);opacity:.3}


/* ════════════════════════════════════════════════
   SOCIAL PROOF — Testimonials
   ════════════════════════════════════════════════ */
.proof{background:var(--bp);position:relative;overflow:hidden}
.proof::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 70% 50%,rgba(0,100,102,.1) 0%,transparent 70%)}
.proof>*{position:relative;z-index:1}


/* ════════════════════════════════════════════════
   PRICING — Region Toggle + Tier Cards
   ════════════════════════════════════════════════ */
.pricing{background:linear-gradient(180deg,var(--bp) 0%,var(--mr) 100%);position:relative;overflow:hidden}

.region-toggle{display:flex;gap:0;border:1px solid rgba(133,255,199,.2);width:fit-content;margin:0 auto clamp(3rem,6vw,4.5rem)}
.region-btn{font-family:var(--h);font-weight:900;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:.9em 2.2em;background:transparent;border:none;color:rgba(255,255,255,.45);cursor:pointer;transition:all .3s;position:relative}
.region-btn.active{background:var(--aq);color:var(--bp)}
.region-btn:hover:not(.active){color:var(--aq);background:rgba(133,255,199,.06)}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2rem}
.price-tier{padding:clamp(2rem,3vw,2.8rem);background:rgba(1,24,39,.6);border:1px solid rgba(133,255,199,.1);text-align:center;transition:all .4s;position:relative;display:flex;flex-direction:column}
.price-tier:hover{border-color:rgba(133,255,199,.3);transform:translateY(-4px)}
.price-tier.popular{border:2px solid rgba(133,255,199,.4);background:rgba(0,100,102,.15)}
.price-tier.popular::before{content:'POPULAR';position:absolute;top:-1px;left:50%;transform:translateX(-50%);font-family:var(--h);font-weight:900;font-size:.6rem;letter-spacing:.14em;color:var(--bp);background:var(--aq);padding:.3em 1.4em}
.price-tank{font-family:var(--h);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aq);opacity:.75;margin-bottom:1rem}
.price-amount{font-family:var(--h);font-weight:900;font-size:clamp(2.4rem,4vw,3.2rem);color:var(--w);line-height:1;margin-bottom:.3rem}
.price-amount .price-curr{font-size:.55em;opacity:.55;vertical-align:super}
.price-period{font-size:.88rem;color:rgba(255,255,255,.4);margin-bottom:1.5rem}
.price-tier .btn{margin-top:auto}

/* Large systems card */
.price-large{padding:clamp(2rem,3vw,2.5rem);background:rgba(1,24,39,.5);border:1px solid rgba(133,255,199,.08);text-align:center;margin-top:1rem}
.price-large p{font-size:1.05rem;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:1rem}
.price-large strong{color:var(--aq)}

.price-note{font-size:.95rem;color:rgba(255,255,255,.45);text-align:center;margin-top:1.5rem;line-height:1.6}
.price-note a{color:var(--aq);text-decoration:underline;text-underline-offset:3px}


/* ════════════════════════════════════════════════
   FAQ — page background
   ════════════════════════════════════════════════ */
.myte-faq{background:var(--bp)}


/* ════════════════════════════════════════════════
   FINAL CTA — Multi-path
   ════════════════════════════════════════════════ */
.final-cta{padding:clamp(10rem,20vw,16rem) 0;position:relative;overflow:hidden;text-align:center}
.final-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(0,100,102,.35) 0%,var(--bp) 70%)}
.final-cta>*{position:relative;z-index:1}
.final-cta h2{font-family:var(--h);font-weight:900;font-size:clamp(2.8rem,5.5vw,5rem);text-transform:uppercase;line-height:.95;letter-spacing:-.02em;margin-bottom:clamp(3rem,6vw,4.5rem)}


/* ════════════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE
   ════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media(max-width:1024px){
  .hero-product img{max-height:55vh}
  .pain-cards{grid-template-columns:1fr 1fr}
  .hiw-steps{grid-template-columns:1fr 1fr}
  .el-grid{grid-template-columns:repeat(3,1fr)}
  .incl-grid{grid-template-columns:1fr 1fr}
  .incl-card-wide{grid-column:1/-1}
  .auth-stats{grid-template-columns:repeat(3,1fr)}
  .sysint-diagram{grid-template-columns:1fr}
  .sysint-plus{transform:none;text-align:center;padding:1rem 0}
  .price-grid{grid-template-columns:1fr 1fr}
}

/* ── Mobile (≤768px) ── */
@media(max-width:768px){
  /* Hero */
  .myte-hero{align-items:flex-end}
  .myte-hero .hero-ct{grid-template-columns:1fr;text-align:center}
  .myte-hero .hero-ey{justify-content:center}
  .myte-hero .hero-btns{justify-content:center}
  .hero-product{justify-self:center;order:-1}
  .hero-product img{max-height:none;width:min(70vw,320px);height:auto}
  .myte-pg .hero-t{font-size:clamp(2rem,8vw,3rem)}

  /* Pain */
  .pain-cards{grid-template-columns:1fr}

  /* How it works */
  .hiw-steps{grid-template-columns:1fr}
  .hiw-step{padding:1.8rem 1.5rem;border-right:none;border-bottom:1px solid rgba(133,255,199,.06)}
  .hiw-step:last-child{border-bottom:none}
  .hiw-step-n{font-size:3.5rem}

  /* Elements */
  .el-grid{grid-template-columns:repeat(2,1fr)}

  /* Included */
  .incl-grid{grid-template-columns:1fr}
  .incl-card-wide{grid-column:auto}
  .incl-card-wide .incl-inner{grid-template-columns:1fr}

  /* Authority */
  .auth-stats{grid-template-columns:1fr;gap:2rem;border-bottom:none;padding-bottom:0}
  .auth-stat{padding:0;padding-bottom:1.5rem;border-bottom:1px solid rgba(133,255,199,.06)}
  .auth-stat::after{display:none}

  /* System Integration */
  .sysint-diagram{grid-template-columns:1fr}
  .sysint-plus{transform:none;text-align:center;padding:1rem 0}

  /* Pricing */
  .price-grid{grid-template-columns:1fr}
  .region-toggle{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .region-btn{padding:.9em 1.5em}

  /* Final CTA */
  .final-cta{padding:clamp(6rem,14vw,10rem) 0}
  .final-cta h2{font-size:clamp(2rem,8vw,3rem)}
}

/* ── Small mobile (≤480px) ── */
@media(max-width:480px){
  .myte-pg .hero-t{font-size:clamp(1.7rem,7vw,2.4rem)}
  .el-grid{grid-template-columns:repeat(2,1fr)}
  .el-tile{padding:1rem .8rem}
  .el-tile .el-sym{font-size:1.8rem}
  .el-tile .el-name{font-size:.65rem}
  .hiw-step-n{font-size:2.8rem}
  .price-amount{font-size:clamp(2rem,6vw,2.6rem)}
}