#management-iceberg{
  --ink:var(--public-ink,#10213c);
  --muted:var(--public-muted,#526074);
  --accent:var(--public-blue,#2563eb);
  --accent-dark:#1d4ed8;
  --line:rgba(7,22,51,.12);
  --max:1120px;
  --glass-border:rgba(255,255,255,.58);
  --glass-blur:24px;
}
#management-iceberg *{box-sizing:border-box}
#management-iceberg{scroll-behavior:smooth}
#management-iceberg{
  margin:0;
  font-family:inherit;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#management-iceberg a{color:inherit;text-decoration:none}
#management-iceberg a:focus-visible{outline:3px solid rgba(37,99,235,.5);outline-offset:4px;border-radius:8px}
#management-iceberg.page{
  overflow:hidden;
  background:#eaf1ff;
}
#management-iceberg .wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
#management-iceberg .hero{text-align:center;padding:62px 0 8px}
#management-iceberg .hero h1{
  margin:0;

  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:800
}
#management-iceberg .hero h1 span{color:var(--accent)}
#management-iceberg .hero p{
  max-width:760px;
  margin:20px auto 0;
  color:var(--muted);
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.35;
  font-weight:500
}
#management-iceberg .iceberg-stage{
  position:relative;
  width:min(1080px,100%);
  height:760px;
  margin:0 auto;
  isolation:isolate;
}
#management-iceberg .iceberg-art{
  position:absolute;
  z-index:1;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(630px,82vw);
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
}
#management-iceberg .marker{
  position:absolute;
  z-index:5;
  left:1%;
  color:var(--accent);
  font-weight:700;
  font-size:clamp(22px,2vw,31px);
  line-height:1.03;
  letter-spacing:-.03em
}
#management-iceberg .marker--top{top:92px;left:calc(50% - 310px)}
#management-iceberg .marker--bottom{top:300px;max-width:245px;transform:translateY(5rem)}
#management-iceberg .marker::after{
  content:"";
  display:inline-block;
  width:66px;
  height:2px;
  margin-left:12px;
  vertical-align:middle;
  background:var(--accent);
  opacity:.78
}
#management-iceberg .visible-card {
    position: absolute;
    z-index: 6;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    width: min(280px,29%);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 26px;
    color: var(--ink);
    background: rgb(255 255 255 / 0%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 18px 45px rgba(6,45,78,.14),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.25);
    backdrop-filter: blur(var(--glass-blur))
    saturate(170%)
    contrast(1.02);
    -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(170%)
    contrast(1.02);
    font-size: 19px;
    line-height: 1.15;
    font-weight: 700;
    overflow: hidden;
    isolation: isolate;
}
#management-iceberg .visible-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(90% 55% at 30% -5%, rgba(255,255,255,.78), transparent 62%),
    linear-gradient(115deg, rgba(255,255,255,.18), transparent 42%);
  pointer-events:none;
}
#management-iceberg .visible-card::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:7px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  opacity:.9;
  pointer-events:none;
}
#management-iceberg .underwater-title{display:none}
#management-iceberg .cards{
  position:absolute;
  z-index:7;
  top:270px;
  left:50%;
  transform:translateX(-50%);
  width:min(590px,62%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
#management-iceberg .card {
    position: relative;
    min-height: 90px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 13px;
    background: rgb(255 255 255 / 0%);
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(4,46,82,.09),
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(6px)
    saturate(145%)
    contrast(1.01);
    -webkit-backdrop-filter: blur(16px)
    saturate(145%)
    contrast(1.01);
    overflow: hidden;
    isolation: isolate;
}
#management-iceberg .card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(90% 45% at 30% -5%, rgba(255,255,255,.44), transparent 65%),
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 38%);
  pointer-events:none;
}
#management-iceberg .card__icon{
  width:50px;
  height:50px;
  border-radius:15px;
  display:grid;
  place-items:center;

  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.24));

  border:1px solid rgba(255,255,255,.62);

  color:var(--accent);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 6px 18px rgba(5,56,94,.09);

  backdrop-filter:blur(12px) saturate(155%);
  -webkit-backdrop-filter:blur(12px) saturate(155%);
}
#management-iceberg .card__icon--glass{
  color:var(--accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.20));
  border:1px solid rgba(255,255,255,.60);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 7px 20px rgba(5,56,94,.09);
}
#management-iceberg .visible-card svg, #management-iceberg .card svg, #management-iceberg .benefit svg{
  width:25px;height:25px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round
}
#management-iceberg .card h3{
  display:block;
  margin:0;
  font-size:17px;
  line-height:1.12;
  letter-spacing:-.02em
}
#management-iceberg .card small{
  display:block;
  margin-top:4px;
  color:#526176;
  font-size:13px;
  line-height:1.25;
  font-weight:500
}
#management-iceberg .cta{
  max-width:900px;
  margin:-10px auto 0;
  padding:0 0 78px;
  text-align:center
}
#management-iceberg .cta h2{
  margin:0;
  font-size:clamp(30px,3.2vw,42px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:800
}
#management-iceberg .cta h2 span{color:var(--accent)}
#management-iceberg .cta>p{
  margin:16px auto 26px;
  color:var(--muted);
  font-size:20px;
  font-weight:500
}
#management-iceberg .actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
#management-iceberg .button{
  min-height:58px;
  padding:0 30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:17px;
  font-weight:700;
  transition:transform .18s ease,box-shadow .18s ease
}
#management-iceberg .button--primary{
  color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  box-shadow:0 12px 30px rgba(37,99,235,.18)
}
#management-iceberg .button--secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.70);
  box-shadow:
    0 8px 22px rgba(7,22,51,.07),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%)
}
#management-iceberg .button:hover{transform:translateY(-1px)}
#management-iceberg .benefits{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
#management-iceberg .benefit{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:start;
  gap:10px;
  text-align:left
}
#management-iceberg .benefit__icon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  color:var(--accent);background:#eef4ff
}
#management-iceberg .benefit b{display:block;font-size:15px}
#management-iceberg .benefit > div > span{
  display:block;margin-top:3px;
  color:var(--muted);font-size:13px;
  line-height:1.25;font-weight:600
}


@media(max-width:999px){
  #management-iceberg .marker{display:none}
#management-iceberg .iceberg-stage{height:790px}
#management-iceberg .iceberg-art{width:min(630px,90vw)}
#management-iceberg .underwater-title{
    display:block;
    position:absolute;
    z-index:7;
    top:245px;
    left:50%;
    width:min(590px,82%);
    margin:0;
    transform:translate(-50%,5rem);
    color:#063d67;
    font-size:24px;
    line-height:1.02;
    letter-spacing:-.03em;
    font-weight:700;
    text-shadow:0 1px 0 rgba(255,255,255,.45)
  }
#management-iceberg .cards{
    top:315px;
    width:min(590px,84%);
    transform:translate(-50%,5rem)
  }
#management-iceberg .benefits{grid-template-columns:repeat(3,1fr)}
}


@media(max-width:640px){
  #management-iceberg .wrap{width:min(calc(100% - 22px),var(--max))}
#management-iceberg .hero{text-align:left;padding:34px 0 10px}
#management-iceberg .hero h1{font-size:clamp(34px,9vw,38px)}
#management-iceberg .hero p{margin-top:14px;font-size:18px}
#management-iceberg .iceberg-stage{
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    height:760px;
    min-height:760px;
    max-height:none;
    margin:0;
    overflow:hidden;
  }
#management-iceberg .iceberg-art{
    top:0;
    width:max(124vw,494px);
    max-width:none;
  }
#management-iceberg .marker{display:block}
#management-iceberg .marker::after{width:44px}
#management-iceberg .marker--top{
    top:max(100px,20vw);
    left:18px;
    font-size:23px
  }
#management-iceberg .marker--bottom{display:none}
#management-iceberg .visible-card{
    top:max(98px,calc(28vw - 3rem));
    width:min(68vw,290px);
    min-width:0;
    padding:14px 16px;
    font-size:17px;
    border-radius:22px;
    backdrop-filter:blur(6px) saturate(145%);
    -webkit-backdrop-filter:blur(20px) saturate(145%);
  }
#management-iceberg .underwater-title{
    display:block;
    position:absolute;
    z-index:7;
    top:max(218px,43vw);
    left:20px;
    width:calc(100% - 40px);
    margin:0;
    color:#063d67;
    font-size:24px;
    line-height:1.02;
    letter-spacing:-.03em;
    font-weight:700;
    text-shadow:0 1px 0 rgba(255,255,255,.45);
    transform:translateY(5rem)
  }
#management-iceberg .cards{
    top:max(260px,50vw);
    width:calc(100vw - 28px);
    grid-template-columns:1fr 1fr;
    gap:10px;
    transform:translate(-50%,5rem)
  }
#management-iceberg .card{
    min-height:148px;
    padding:14px;
    grid-template-columns:1fr;
    align-content:start;
    gap:9px;
    border-radius:20px;
  }
#management-iceberg .card__icon{
    width:44px;height:44px;border-radius:14px
  }
#management-iceberg .card h3{font-size:15.5px}
#management-iceberg .card small{font-size:13px;line-height:1.3}
#management-iceberg .cta{margin:0 auto;padding:6px 0 52px}
#management-iceberg .cta h2{font-size:clamp(28px,7.5vw,34px)}
#management-iceberg .cta>p{margin-top:13px;font-size:17px}
#management-iceberg .actions{flex-direction:column}
#management-iceberg .button{width:100%}
#management-iceberg .benefits{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:29px
  }
}


@media(max-width:390px){
  #management-iceberg .iceberg-stage{
    height:750px;
    min-height:750px
  }
#management-iceberg .marker--top{
    top:96px;
    font-size:21px
  }
#management-iceberg .visible-card{
    top:92px;
    font-size:16px;
    border-radius:22px
  }
#management-iceberg .underwater-title{
    top:226px;
    font-size:21px
  }
#management-iceberg .cards{
    top:276px;
    width:calc(100vw - 22px);
    grid-template-columns:1fr 1fr;
    gap:8px
  }
#management-iceberg .card{
    min-height:146px;
    padding:12px
  }
#management-iceberg .card h3{font-size:14.8px}
#management-iceberg .card small{font-size:12.8px;line-height:1.28}
#management-iceberg .benefits{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  #management-iceberg *{scroll-behavior:auto!important;transition:none!important}
}

/* Keep the mobile diagram readable as text wraps or grows. */
#management-iceberg .hero p{line-height:1.6}
#management-iceberg .cta h2{line-height:1.15;letter-spacing:-.035em}
#management-iceberg .button{border-radius:10px;font-size:15px;min-height:48px}
#management-iceberg .benefit__icon{margin-top:0}
@media(max-width:640px){
  #management-iceberg .wrap{width:calc(100% - 40px)}
  #management-iceberg .marker--top{display:none}
  #management-iceberg .iceberg-stage{height:auto;min-height:0;padding:330px 0 72px}
  #management-iceberg .underwater-title{top:168px;transform:none;font-size:22px;line-height:1.2}
  #management-iceberg .cards{position:relative;top:-115px;left:auto;transform:none;margin:0 auto;width:calc(100% - 40px)}
  #management-iceberg .visible-card{top:56px;font-size:16px}
  #management-iceberg .card{min-width:0;min-height:150px}
  #management-iceberg .card h3{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
  #management-iceberg .card small{font-size:13px;line-height:1.45}
}

/* Desktop: introduction beside the diagram; CTA spans both columns. */
@media(min-width:1000px){
  #management-iceberg > .wrap{
    display:grid;
    grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap:32px;
    align-items:center;
    padding-top:40px;
  }
  #management-iceberg .hero{text-align:left;padding:0;align-self:start;margin-top:80px}
  #management-iceberg .hero h1{text-wrap:balance}
  #management-iceberg .hero p{margin-left:0;margin-right:0;font-size:18px}
  #management-iceberg .iceberg-stage{width:100%;height:710px;margin:0}
  #management-iceberg .iceberg-art{width:630px;max-width:110%}
  #management-iceberg .visible-card{width:250px;font-size:17px}
  #management-iceberg .marker--top{left:100px;top:92px;font-size:20px}
  #management-iceberg .marker--top::after{width:30px;margin-left:6px}
  #management-iceberg .marker--bottom{display:none}
  #management-iceberg .underwater-title{display:block;position:absolute;z-index:7;top:222px;left:0;width:100%;margin:0;text-align:center;font-size:22px;line-height:1.2;color:#063d67}
  #management-iceberg .cards{top:270px;width:min(590px,96%)}
  #management-iceberg .card{
    padding:0 14px;
    gap:10px;
    grid-template-columns:42px minmax(0,1fr);
    min-width:0;
  }
  #management-iceberg .card__icon{width:42px;height:42px}
  #management-iceberg .card h3{font-size:15px;line-height:1.3}
  #management-iceberg .card small{line-height:1.4}
  #management-iceberg .cta{grid-column:1 / -1;width:100%;margin:0 auto;padding-top:8px}
}

#management-iceberg .hero-actions{margin-top:24px;display:flex;justify-content:center}
@media(min-width:1000px){
  #management-iceberg .hero-actions{justify-content:flex-start}
}
@media(max-width:640px){
  #management-iceberg .hero-actions{justify-content:flex-start}
}

/* One icon palette and consistent strokes across the diagram and benefits. */
#management-iceberg .card__icon,
#management-iceberg .card__icon--glass,
#management-iceberg .benefit__icon{
  color:var(--accent);
  background:rgb(240 245 255 / 0%);
  /* border:1px solid #dbe4f0; */
  flex-shrink:0;
}
#management-iceberg .hero .signup-note{
  max-width:430px;
  margin:12px auto 0;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
@media(min-width:1000px){
  #management-iceberg .hero .signup-note{margin-left:0;margin-right:0}
}