.guide-page{
  background:#fff;
  color:#102033;
}
.guide-wrap{
  max-width:1120px;
  margin:0 auto;
  padding:3rem 1rem 5rem;
}
.guide-hero{
  position:relative;
  overflow:hidden;
  min-height:280px;
  border-radius:0;
  background:#eef9ff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:3rem;
}
.guide-hero--green{ background:#f5ffe6; }
.guide-hero--blue{ background:#eaf8ff; }
.guide-hero__copy{
  position:relative;
  z-index:1;
}
.guide-hero__brand{
  display:block;
  margin-bottom:1.5rem;
  color:#18345d;
  font-weight:850;
}
.guide-hero h1{
  margin:0;
  color:#81c700;
  font-size:clamp(2.3rem, 5vw, 4.2rem);
  line-height:1.12;
  font-weight:900;
  letter-spacing:0;
  word-break:keep-all;
}
.guide-hero--blue h1{ color:#0784cf; }
.guide-hero p{
  margin:1rem 0 0;
  color:#6db600;
  font-size:clamp(1.35rem, 3vw, 2rem);
  font-weight:850;
}
.guide-hero--blue p{ color:#0784cf; }
.guide-hero__art{
  width:min(42vw, 390px);
  object-fit:contain;
}
.guide-nav{
  margin-top:2rem;
  padding:1.6rem;
  border:1px solid #e4eefb;
  border-radius:1.1rem;
  background:linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
}
.guide-nav__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.guide-nav__head span{
  color:#2f73ff;
  font-size:.95rem;
  font-weight:850;
}
.guide-nav__head strong{
  color:#102a4c;
  font-size:1.1rem;
  font-weight:900;
  word-break:keep-all;
}
.guide-nav__cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.guide-nav__card{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:116px;
  padding:1.1rem 1.2rem;
  border:1px solid #e7edf5;
  border-radius:1rem;
  background:#fff;
  color:#102033;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(15,23,42,.07);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.guide-nav__card:hover{
  transform:translateY(-3px);
  border-color:#b8d7ff;
  box-shadow:0 14px 28px rgba(37,99,235,.13);
}
.guide-nav__card.is-active{
  border-color:#78cfff;
  background:#f9fdff;
  box-shadow:0 0 0 2px rgba(0,198,255,.12), 0 14px 28px rgba(37,99,235,.12);
}
.guide-nav__icon{
  flex:0 0 70px;
  width:70px;
  height:70px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, #fff, #edf6ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 20px rgba(37,99,235,.12);
}
.guide-nav__icon img{
  width:78px;
  height:78px;
  object-fit:contain;
}
.guide-nav__text{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width:0;
}
.guide-nav__text strong{
  color:#102a4c;
  font-size:1.12rem;
  line-height:1.25;
  font-weight:900;
  word-break:keep-all;
}
.guide-nav__text small{
  color:#526176;
  font-size:.92rem;
  line-height:1.5;
  font-weight:650;
  word-break:keep-all;
}
.guide-section{
  margin-top:3.5rem;
}
.guide-section__title{
  margin:0;
  padding:1.15rem 1.35rem;
  border-radius:.8rem .8rem 0 0;
  background:#82c800;
  color:#fff;
  font-size:1.55rem;
  font-weight:900;
  line-height:1.3;
  word-break:keep-all;
}
.guide-section__title--blue{ background:#0784cf; }
.guide-step{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(280px, .85fr);
  gap:2.25rem;
  align-items:start;
  padding:2rem 1rem;
  border-bottom:1px solid #edf1f5;
}
.guide-step:last-child{
  border-bottom:0;
}
.guide-step__note{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding-top:.9rem;
}
.guide-step__num{
  flex:0 0 2rem;
  width:2rem;
  height:2rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ff2e3c;
  color:#fff;
  font-weight:900;
}
.guide-step__note p{
  margin:0;
  color:#102033;
  font-size:1.15rem;
  line-height:1.65;
  font-weight:800;
  word-break:keep-all;
}
.guide-step__note small{
  display:block;
  margin-top:.4rem;
  color:#415168;
  font-size:1rem;
  line-height:1.55;
  font-weight:650;
}
.guide-screen-img{
  width:100%;
  display:block;
  border:1px solid #e2e7ee;
  border-radius:.8rem;
  background:#f5f7fa;
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}
.guide-mock{
  position:relative;
  overflow:hidden;
  min-height:270px;
  border:1px solid #e2e7ee;
  border-radius:.8rem;
  background:#f5f7fa;
  box-shadow:0 10px 26px rgba(15,23,42,.10) inset;
  padding:1.2rem;
}
.guide-mock::before{
  content:"";
  display:block;
  height:22px;
  margin:-.25rem -.25rem 1rem;
  border-radius:.55rem .55rem .25rem .25rem;
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.mock-browser{
  background:#fff;
  border-radius:.7rem;
  box-shadow:0 8px 20px rgba(15,23,42,.14);
  padding:1rem;
}
.mock-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:28px;
  border-bottom:1px solid #edf1f5;
  margin-bottom:.9rem;
}
.mock-logo{
  width:88px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(90deg, #83c900, #0ca6db);
}
.mock-actions{
  display:flex;
  gap:.35rem;
}
.mock-pill{
  width:48px;
  height:20px;
  border-radius:999px;
  background:#416aa3;
}
.mock-hero{
  height:82px;
  border-radius:.45rem;
  background:linear-gradient(90deg, #dff5ff, #f1fbff);
  margin-bottom:.8rem;
}
.mock-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.55rem;
}
.mock-card{
  height:70px;
  border-radius:.55rem;
  background:#d9f4ce;
}
.mock-card:nth-child(2){ background:#e8ffc4; }
.mock-card:nth-child(3){ background:#d5efff; }
.mock-card:nth-child(4){ background:#ffe2d1; }
.mock-panel{
  background:#fff;
  border:1px solid #e4e9f0;
  border-radius:.65rem;
  padding:1rem;
  margin:.5rem auto;
  max-width:430px;
}
.mock-title{
  height:22px;
  width:40%;
  margin:0 auto 1rem;
  border-radius:999px;
  background:#102033;
  opacity:.82;
}
.mock-line{
  height:42px;
  border:1px solid #dbe2ea;
  border-radius:.45rem;
  margin:.7rem 0;
  background:#fff;
}
.mock-line.short{ width:68%; }
.mock-line.tint{ background:#eaf3ff; border-color:#cdddf4; }
.mock-button{
  height:42px;
  border-radius:.45rem;
  background:#416aa3;
}
.mock-list{
  display:grid;
  gap:.65rem;
}
.mock-list .mock-line{
  margin:0;
  height:56px;
}
.mock-calendar{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:.35rem;
}
.mock-calendar span{
  height:30px;
  border-radius:.35rem;
  background:#eef3f8;
}
.mock-time{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.mock-time span{
  height:36px;
  border-radius:.45rem;
  background:#cbd8ff;
  border:1px solid #8ca4e7;
}
.mock-time span:nth-child(n+5){ background:#fff2d9; border-color:#ead2a7; }
.focus-box{
  position:absolute;
  border:3px solid #ff2938;
  border-radius:.25rem;
  pointer-events:none;
}
.focus-top-right{ top:2.3rem; right:2.2rem; width:128px; height:36px; }
.focus-wide{ left:2rem; right:2rem; top:6rem; height:118px; }
.focus-form{ left:2rem; right:2rem; top:5rem; height:58px; }
.focus-panel{ top:4.7rem; right:1.65rem; width:42%; height:175px; }
.focus-list{ left:2rem; right:2rem; top:5.2rem; height:150px; }
.focus-calendar{ left:2rem; right:2rem; top:9rem; height:150px; }
.guide-video-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:2rem 0 -1rem;
  padding:.75rem 1.25rem;
  border-radius:999px;
  background:#416aa3;
  color:#fff;
  font-weight:850;
  text-decoration:none;
}
@media (max-width:768px){
  .guide-wrap{ padding:1.5rem 1rem 4.5rem; }
  .guide-hero{
    display:block;
    padding:2rem 1.25rem;
    text-align:left;
  }
  .guide-hero__art{
    width:100%;
    max-width:310px;
    margin:1.5rem auto 0;
  }
  .guide-nav{
    margin-top:1.25rem;
    padding:1rem;
    border-radius:.95rem;
  }
  .guide-nav__head{
    display:block;
    margin-bottom:.85rem;
  }
  .guide-nav__head strong{
    display:block;
    margin-top:.25rem;
    font-size:1rem;
  }
  .guide-nav__cards{
    grid-template-columns:1fr;
    gap:.75rem;
  }
  .guide-nav__card{
    min-height:92px;
    padding:.85rem;
    border-radius:.85rem;
  }
  .guide-nav__icon{
    flex-basis:58px;
    width:58px;
    height:58px;
    border-radius:15px;
  }
  .guide-nav__icon img{
    width:66px;
    height:66px;
  }
  .guide-nav__text strong{ font-size:1rem; }
  .guide-nav__text small{ font-size:.86rem; }
  .guide-section{ margin-top:2rem; }
  .guide-section__title{
    font-size:1.25rem;
    padding:1rem;
  }
  .guide-step{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1.35rem 0;
  }
  .guide-step__media{ width:100%; }
  .guide-step__note{ padding:0 .25rem; }
  .guide-step__note p{ font-size:1rem; }
  .guide-mock{ min-height:230px; padding:.9rem; }
  .mock-grid{ grid-template-columns:repeat(2, 1fr); }
  .focus-panel{ left:1.4rem; right:1.4rem; top:4.4rem; width:auto; }
}