/* ==========================================================
   IMT Maritime Guides — Phase 2 V3
   Isolated responsive layer for the 50 new SEO pages only.
   Desktop / Laptop / iPad / Tablet / Mobile
   ========================================================== */

.phase2-v3{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
.phase2-v3 *, .phase2-v3 *::before, .phase2-v3 *::after{box-sizing:border-box}
.phase2-v3 img,.phase2-v3 svg,.phase2-v3 video,.phase2-v3 iframe{max-width:100%;height:auto}
.phase2-v3 a{overflow-wrap:anywhere}
.phase2-v3 .content{min-width:0}
.phase2-v3 .content p,
.phase2-v3 .content li{overflow-wrap:break-word}

/* section hierarchy */
.phase2-v3 .section-kicker{
  margin:0 0 8px;
  color:var(--imt-blue,#087bb5);
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.phase2-v3 .section-intro{
  max-width:780px;
  color:#526d80;
  font-size:1.03rem;
  line-height:1.72;
  margin:0 0 24px;
}

/* Workflow */
.phase2-v3 .workflow-section{padding-top:4px}
.phase2-v3 .workflow-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:26px 0 22px;
}
.phase2-v3 .workflow-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:15px;
  align-items:start;
  min-width:0;
  min-height:146px;
  padding:22px;
  border:1px solid var(--imt-line,#dce8ee);
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  box-shadow:0 6px 18px rgba(9,57,84,.05);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.phase2-v3 .workflow-card:hover{
  transform:translateY(-2px);
  border-color:#abd8e8;
  box-shadow:0 12px 28px rgba(8,52,79,.09);
}
.phase2-v3 .workflow-number{
  width:42px;height:42px;
  border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--imt-blue,#087bb5),var(--imt-cyan,#16b7d9));
  color:#fff;
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  box-shadow:0 7px 16px rgba(8,123,181,.18);
}
.phase2-v3 .workflow-card h3{
  margin:1px 0 7px!important;
  color:var(--imt-navy,#07384f);
  font-size:1.05rem!important;
  line-height:1.28;
}
.phase2-v3 .workflow-card p{
  margin:0;
  color:#5b7385;
  line-height:1.62;
  font-size:.95rem;
}
.phase2-v3 .evidence-panel{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:19px 21px;
  border-radius:13px;
  border:1px solid #cbeaf5;
  background:#eef9fd;
}
.phase2-v3 .evidence-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--imt-blue,#087bb5);
  font-weight:900;
  box-shadow:0 5px 14px rgba(8,123,181,.10);
}
.phase2-v3 .evidence-panel strong{color:var(--imt-navy,#07384f)}
.phase2-v3 .evidence-panel p{margin:3px 0 0;color:#536f82;line-height:1.58}

/* Competence */
.phase2-v3 .competence-section{padding-top:4px}
.phase2-v3 .competence-copy{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin:24px 0 28px;
}
.phase2-v3 .competence-card{
  min-width:0;
  padding:21px;
  border-radius:14px;
  border:1px solid var(--imt-line,#dce8ee);
  background:#fff;
  box-shadow:0 5px 16px rgba(9,57,84,.045);
}
.phase2-v3 .competence-card .mini-label{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:var(--imt-sky,#eaf7fb);
  color:var(--imt-blue,#087bb5);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.phase2-v3 .competence-card p{
  margin:10px 0 0;
  color:#5a7284;
  font-size:.95rem;
  line-height:1.65;
}
.phase2-v3 .mistakes-panel{
  padding:24px;
  border:1px solid var(--imt-line,#dce8ee);
  border-radius:15px;
  background:#f8fbfd;
  margin:8px 0 28px;
}
.phase2-v3 .mistakes-panel h3{margin:0 0 17px!important}
.phase2-v3 .mistakes-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 18px;
}
.phase2-v3 .mistake-item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:10px 0;
  min-width:0;
}
.phase2-v3 .mistake-item span{
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff1ef;
  color:#bc4a3d;
  font-weight:900;
  line-height:1;
}
.phase2-v3 .mistake-item p{margin:0;color:#526d80;font-size:.94rem;line-height:1.55}

/* CTA */
.phase2-v3 .cta-v3{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:27px!important;
}
.phase2-v3 .cta-v3-copy{min-width:0}
.phase2-v3 .cta-v3 h3{margin:0 0 8px!important;color:#fff!important}
.phase2-v3 .cta-v3 p:not(.eyebrow){margin:0!important;max-width:590px}
.phase2-v3 .cta-v3 .btn{flex:0 0 auto}

/* general responsive protection */
.phase2-v3 table{max-width:100%}
.phase2-v3 .sources a{word-break:break-word}

/* Laptop */
@media (min-width:992px) and (max-width:1199px){
  .phase2-v3 .imt-header-wrap,
  .phase2-v3 .wrap{width:min(1080px,calc(100% - 36px))}
  .phase2-v3 .imt-nav{gap:12px!important}
  .phase2-v3 .imt-nav a{font-size:13px!important}
}

/* iPad / tablet landscape */
@media (min-width:768px) and (max-width:991px){
  .phase2-v3 .imt-header-wrap,
  .phase2-v3 .wrap{width:calc(100% - 32px)}
  .phase2-v3 .imt-header-wrap{display:block}
  .phase2-v3 .imt-brand{display:flex;justify-content:center;margin-bottom:6px}
  .phase2-v3 .imt-logo{width:68px!important;height:68px!important}
  .phase2-v3 .imt-nav{
    display:flex!important;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    justify-content:flex-start!important;
    gap:10px!important;
    padding:5px 0 8px;
  }
  .phase2-v3 .imt-nav::-webkit-scrollbar{display:none}
  .phase2-v3 .imt-nav a{flex:0 0 auto;font-size:12.5px!important}
  .phase2-v3 .hero{padding-top:44px!important;padding-bottom:44px!important}
  .phase2-v3 .hero h1{font-size:clamp(32px,5vw,46px)!important;line-height:1.08!important}
  .phase2-v3 .workflow-grid{gap:14px}
  .phase2-v3 .workflow-card{padding:18px}
  .phase2-v3 .competence-copy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phase2-v3 .cta-v3{align-items:flex-start}
}

/* Tablet portrait / large mobile */
@media (min-width:600px) and (max-width:767px){
  .phase2-v3 .imt-header-wrap,
  .phase2-v3 .wrap{width:calc(100% - 28px)}
  .phase2-v3 .imt-header-wrap{display:block}
  .phase2-v3 .imt-brand{display:flex;justify-content:center;margin-bottom:6px}
  .phase2-v3 .imt-logo{width:64px!important;height:64px!important}
  .phase2-v3 .imt-nav{
    display:flex!important;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    justify-content:flex-start!important;
    gap:9px!important;
    padding:6px 0;
  }
  .phase2-v3 .imt-nav::-webkit-scrollbar{display:none}
  .phase2-v3 .imt-nav a{flex:0 0 auto;font-size:12px!important}
  .phase2-v3 .hero h1{font-size:clamp(30px,7vw,40px)!important;line-height:1.08!important}
  .phase2-v3 .workflow-grid,
  .phase2-v3 .competence-copy,
  .phase2-v3 .mistakes-grid{grid-template-columns:1fr}
  .phase2-v3 .workflow-card{min-height:0}
  .phase2-v3 .cta-v3{display:block!important}
  .phase2-v3 .cta-v3 .btn{display:inline-flex;margin-top:18px;white-space:normal;text-align:center}
}

/* Phones */
@media (max-width:599px){
  .phase2-v3{font-size:15px!important;line-height:1.65}
  .phase2-v3 .imt-header-wrap,
  .phase2-v3 .wrap{width:calc(100% - 24px)}
  .phase2-v3 .imt-header-wrap{display:block!important}
  .phase2-v3 .imt-brand{display:flex!important;justify-content:center!important;margin-bottom:7px!important}
  .phase2-v3 .imt-logo{width:60px!important;height:60px!important}
  .phase2-v3 .imt-nav{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:8px!important;
    justify-content:flex-start!important;
    padding:6px 2px 7px!important;
  }
  .phase2-v3 .imt-nav::-webkit-scrollbar{display:none}
  .phase2-v3 .imt-nav a{
    flex:0 0 auto!important;
    font-size:11.5px!important;
    padding:7px 8px!important;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .phase2-v3 .imt-breadcrumb{font-size:12px!important;line-height:1.45!important}
  .phase2-v3 .hero{padding:30px 0!important}
  .phase2-v3 .hero h1{font-size:clamp(27px,9vw,36px)!important;line-height:1.08!important;letter-spacing:-.02em}
  .phase2-v3 .hero .lede{font-size:15px!important;line-height:1.6!important}
  .phase2-v3 .content h2{font-size:clamp(23px,7vw,29px)!important;line-height:1.18!important}
  .phase2-v3 .content h3{font-size:18px!important;line-height:1.25!important}
  .phase2-v3 .btn{max-width:100%;white-space:normal!important;text-align:center;min-height:44px}
  .phase2-v3 .workflow-grid,
  .phase2-v3 .competence-copy,
  .phase2-v3 .mistakes-grid{grid-template-columns:1fr;gap:12px}
  .phase2-v3 .workflow-card{
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
    min-height:0;
    padding:16px;
    border-radius:12px;
  }
  .phase2-v3 .workflow-number{width:36px;height:36px;border-radius:9px;font-size:11px}
  .phase2-v3 .workflow-card p,
  .phase2-v3 .competence-card p,
  .phase2-v3 .mistake-item p{font-size:14px!important;line-height:1.55!important}
  .phase2-v3 .competence-card{padding:17px}
  .phase2-v3 .mistakes-panel{padding:17px}
  .phase2-v3 .evidence-panel{
    grid-template-columns:36px minmax(0,1fr);
    padding:15px;
    gap:11px;
  }
  .phase2-v3 .evidence-icon{width:32px;height:32px}
  .phase2-v3 .cta-v3{display:block!important;padding:20px!important}
  .phase2-v3 .cta-v3 .btn{
    display:flex!important;
    width:100%!important;
    justify-content:center!important;
    margin-top:16px!important;
  }
  .phase2-v3 .toc{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .phase2-v3 .toc .wrap{display:flex;min-width:max-content;gap:10px}
  .phase2-v3 .sources a{word-break:break-word!important;overflow-wrap:anywhere!important}
}

/* Extra-small phones */
@media (max-width:380px){
  .phase2-v3 .imt-header-wrap,
  .phase2-v3 .wrap{width:calc(100% - 20px)}
  .phase2-v3 .hero h1{font-size:27px!important}
  .phase2-v3 .workflow-card{grid-template-columns:34px minmax(0,1fr);padding:14px}
  .phase2-v3 .workflow-number{width:32px;height:32px}
  .phase2-v3 .cta-v3{padding:17px!important}
}

/* Touch devices */
@media (hover:none) and (pointer:coarse){
  .phase2-v3 .workflow-card:hover{transform:none}
  .phase2-v3 .btn,.phase2-v3 button{min-height:44px}
}