
/* =========================================================
   S07 — Try it now
   Short CTA section on one white Premium Glass surface.
   No nested cards.
   ========================================================= */

.try-wrap{
  max-width:1600px;
  margin:0 auto 74px;
  padding:0 28px;
  position:relative;
}

.try-glass{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:rgba(249,252,255,.875);
  backdrop-filter:blur(30px) saturate(126%);
  -webkit-backdrop-filter:blur(30px) saturate(126%);
  box-shadow:
    0 24px 72px rgba(7,27,59,.18),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(59,106,171,.04);
}

.try-intro{
  padding:50px 58px 28px;
  text-align:center;
}

.try-kicker{
  margin:0 0 13px;
  color:#4d8aca;
  font-size:15px;
  line-height:1.6;
  font-weight:600;
  letter-spacing:.03em;
}

.try-intro h2{
  margin:0;
  color:#082f74;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:clamp(44px,3.18vw,52px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:.002em;
  word-break:normal;
  line-break:strict;
  text-wrap:balance;
}

.try-lead{
  max-width:1040px;
  margin:22px auto 0;
  color:#17395f;
  font-size:clamp(16px,1.02vw,19px);
  line-height:1.78;
  font-weight:400;
  text-wrap:pretty;
}

.try-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 58px;
  border-top:1px solid rgba(47,98,161,.14);
  border-bottom:1px solid rgba(47,98,161,.14);
}

.try-point{
  min-width:0;
  padding:30px 34px 32px;
}

.try-point + .try-point{
  border-left:1px solid rgba(47,98,161,.14);
}

.try-num{
  display:block;
  margin:0 0 9px;
  color:#3183e8;
  font-size:16px;
  line-height:1;
  font-weight:500;
  letter-spacing:.04em;
}

.try-point h3{
  margin:0;
  color:#092f70;
  font-size:clamp(19px,1.30vw,24px);
  line-height:1.42;
  font-weight:600;
  letter-spacing:-.01em;
  word-break:normal;
  line-break:strict;
  text-wrap:balance;
}

.try-point p{
  margin:10px 0 0;
  color:#29496c;
  font-size:clamp(14px,.93vw,17px);
  line-height:1.70;
  font-weight:400;
  text-wrap:pretty;
}

.try-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:22px 58px 38px;
}

.try-primary-cta{
  margin-top:0;
  background:
    radial-gradient(120% 180% at 8% -20%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.14) 34%,
      transparent 60%),
    radial-gradient(70% 150% at 90% 110%,
      rgba(110,192,255,.24) 0%,
      rgba(255,255,255,.04) 50%,
      transparent 76%),
    linear-gradient(112deg,
      rgba(34,126,255,.86),
      rgba(19,87,207,.88) 46%,
      rgba(14,58,163,.92));
}

.try-action-note{
  margin:12px 0 0;
  color:#587391;
  font-size:14px;
  line-height:1.55;
  font-weight:400;
  text-align:center;
}

.try-business-note{
  margin:8px 0 0;
  color:#315f91;
  font-size:14px;
  line-height:1.60;
  font-weight:500;
  text-align:center;
}

/* Tablet */
@media(max-width:1200px){
  .try-wrap{padding:0 20px;margin-bottom:56px}
  .try-intro{padding:43px 42px 26px}
  .try-points{margin:0 42px}
  .try-point{padding:27px 24px 29px}
  .try-point h3{font-size:18px}
  .try-point p{font-size:14px}
  .try-actions{padding:20px 42px 34px}
}

/* Mobile */
@media(max-width:760px){
  .try-wrap{padding:0 10px;margin-bottom:40px}
  .try-glass{
    border-radius:26px;
    background:rgba(249,252,255,.875);
  }

  .try-intro{
    padding:31px 20px 22px;
    text-align:left;
  }

  .try-kicker{
    margin-bottom:10px;
    font-size:13px;
  }

  .try-intro h2{
    font-size:31px;
    line-height:1.34;
    text-wrap:pretty;
  }

  .try-desktop-break{display:none}

  .try-lead{
    margin-top:18px;
    font-size:15px;
    line-height:1.76;
  }

  .try-points{
    display:block;
    margin:0 20px;
  }

  .try-point{
    padding:22px 0 23px;
  }

  .try-point + .try-point{
    border-left:0;
    border-top:1px solid rgba(47,98,161,.14);
  }

  .try-num{
    font-size:14px;
    margin-bottom:7px;
  }

  .try-point h3{
    font-size:18px;
    line-height:1.42;
    text-align:left;
  }

  .try-point p{
    margin-top:7px;
    font-size:14px;
    line-height:1.62;
    text-align:left;
  }

  .try-actions{
    padding:18px 20px 30px;
  }

  .try-primary-cta{
    margin-top:0;
    width:min(100%,330px);
  }

  .try-action-note,
  .try-business-note{
    font-size:13px;
    line-height:1.62;
  }
}

@media(max-width:370px){
  .try-intro h2{font-size:28px}
}


/* =========================================================
   V39 — S07: two ways to try
   Existing S07 heading and 01-03 stay unchanged.
   Below them, Market and Business App are shown as two rows.
   ========================================================= */

.try-modes-intro{
  margin:0 58px;
  padding:34px 0 28px;
  text-align:center;
}

.try-modes-kicker{
  margin:0 0 9px;
  color:#4d8aca;
  font-size:14px;
  line-height:1.6;
  font-weight:600;
  letter-spacing:.03em;
}

.try-modes-intro h3{
  margin:0;
  color:#082f74;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:clamp(30px,2.05vw,38px);
  line-height:1.4;
  font-weight:700;
}

.try-modes-intro > p:last-child{
  max-width:1040px;
  margin:15px auto 0;
  color:#29496c;
  font-size:clamp(15px,.98vw,18px);
  line-height:1.72;
  font-weight:400;
  text-wrap:pretty;
}

.try-mode{
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);
  gap:50px;
  align-items:center;
  margin:0 58px;
  padding:38px 0 42px;
}

.try-mode-copy{
  min-width:0;
}

.try-mode-label{
  margin:0 0 9px;
  color:#3f80c2;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.02em;
}

.try-mode-copy h3{
  margin:0;
  color:#082f74;
  font-size:clamp(23px,1.55vw,29px);
  line-height:1.48;
  font-weight:600;
  word-break:normal;
  line-break:strict;
  text-wrap:balance;
}

.try-mode-body{
  margin:15px 0 0;
  color:#29496c;
  font-size:clamp(15px,.98vw,18px);
  line-height:1.72;
  font-weight:400;
  text-wrap:pretty;
}

.try-mode-list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

.try-mode-list li{
  position:relative;
  margin:8px 0 0;
  padding-left:19px;
  color:#24496f;
  font-size:14px;
  line-height:1.58;
  font-weight:500;
}

.try-mode-list li::before{
  content:"";
  position:absolute;
  left:1px;
  top:.64em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#3f8ee8;
  box-shadow:0 0 10px rgba(63,142,232,.24);
}

.try-mode .try-primary-cta{
  margin-top:24px;
  width:min(100%,390px);
}

.try-app-cta{
  font-size:18px;
  gap:26px;
}

.try-mode-note{
  margin:11px 0 0;
  color:#627891;
  font-size:13px;
  line-height:1.62;
  font-weight:400;
}

.try-mode-visuals{
  min-width:0;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:18px;
  align-items:center;
}

.try-app-visuals{
  grid-template-columns:1fr 1fr;
}

.try-mode-visuals figure{
  min-width:0;
  margin:0;
}
.try-mode-visuals figure{
  display:flex;
  flex-direction:column;
  height:100%;
}

.try-mode-visual-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:360px;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
  overflow:visible;
}


.try-market-visuals .try-mode-visual-link{
  height:340px;
}

.try-app-visuals{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

.try-app-visuals .try-mode-visual-link{
  height:320px;
}

.try-mode-visuals img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:18px;
  background:transparent;
  box-shadow:
    0 22px 42px rgba(11,42,85,.14),
    0 1px 0 rgba(255,255,255,.45);
}


.try-mode-visuals figcaption{
  margin-top:9px;
  color:#61758d;
  font-size:13px;
  line-height:1.55;
  font-weight:400;
  text-align:center;
}

.try-mode-divider{
  height:1px;
  margin:0 58px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(47,98,161,.16) 12%,
    rgba(47,98,161,.16) 88%,
    transparent
  );
}

/* App row gets a very subtle blue wash without becoming a nested card. */
.try-mode-app{
  position:relative;
}
.try-mode-app::before{
  content:"";
  position:absolute;
  inset:0 -20px;
  z-index:-1;
  background:linear-gradient(
    90deg,
    rgba(202,228,255,.15),
    rgba(215,235,255,.10),
    rgba(202,228,255,.06)
  );
  pointer-events:none;
}

/* The old simple actions area is no longer used after V39. */
.try-actions{display:none}

/* Tablet */
@media(max-width:1200px){
  .try-modes-intro{
    margin:0 42px;
    padding:30px 0 24px;
  }

  .try-mode{
    grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
    gap:34px;
    margin:0 42px;
    padding:34px 0 38px;
  }

  .try-mode-visuals{
    gap:13px;
  }

  .try-market-visuals .try-mode-visual-link{
    height:300px;
  }

  .try-app-visuals .try-mode-visual-link{
    height:250px;
  }

  .try-mode-copy h3{font-size:22px}
  .try-mode-body{font-size:15px}
  .try-mode-divider{margin:0 42px}
}

/* Mobile */
@media(max-width:760px){
  .try-modes-intro{
    margin:0 20px;
    padding:27px 0 21px;
    text-align:left;
  }

  .try-modes-kicker{font-size:13px}

  .try-modes-intro h3{
    font-size:27px;
    line-height:1.42;
  }

  .try-modes-intro > p:last-child{
    margin-top:13px;
    font-size:15px;
    line-height:1.72;
  }

  .try-mode{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:22px;
    margin:0 20px;
    padding:28px 0 31px;
  }

  .try-mode-label{font-size:13px}

  .try-mode-copy h3{
    font-size:21px;
    line-height:1.48;
    text-wrap:pretty;
  }

  .try-mode-body{
    margin-top:12px;
    font-size:15px;
    line-height:1.72;
  }

  .try-mode-list{
    margin-top:15px;
  }

  .try-mode-list li{
    font-size:14px;
    line-height:1.6;
  }

  .try-mode .try-primary-cta{
    width:min(100%,330px);
    margin-top:20px;
    align-self:center;
  }

  .try-app-cta{
    font-size:15px;
    gap:18px;
  }

  .try-mode-note{
    font-size:13px;
    text-align:center;
  }

  .try-mode-visuals,
  .try-app-visuals{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .try-mode-visuals img{
    width:100%;
    max-width:100%;
    max-height:none;
    border-radius:14px;
    box-shadow:0 14px 26px rgba(11,42,85,.13);
  }

  .try-mode-visual-link{
    height:auto;
    padding:0;
    background:transparent;
    box-shadow:none;
  }

  .try-market-visuals .try-mode-visual-link,
  .try-app-visuals .try-mode-visual-link{
    height:auto;
  }

  .try-mode-visuals figcaption{
    font-size:12.5px;
  }

  .try-mode-divider{
    margin:0 20px;
  }

  .try-mode-app::before{
    inset:0 -10px;
  }
}


/* =========================================================
   V40 — Mobile trial-flow order
   Desktop remains unchanged.
   Mobile: explanation -> screenshots -> CTA -> note.
   ========================================================= */
@media(max-width:760px){
  .try-mode{
    display:flex;
    flex-direction:column;
  }

  .try-mode-copy{
    display:contents;
  }

  .try-mode-label{order:1}
  .try-mode-copy h3{order:2}
  .try-mode-body{order:3}
  .try-mode-list{order:4}
  .try-mode-visuals{order:5}
  .try-mode .try-primary-cta{order:6}
  .try-mode-note{order:7}

  .try-mode .try-primary-cta{
    margin-top:2px;
  }

  .try-mode-note{
    margin-top:-4px;
  }
}
