/* The four Maya colors trace a flowing arc around the actual product screens. */
.hero {
  background: radial-gradient(ellipse at 79% 43%, #fff 0%, #fffaf4 47%, #f7f2e8 100%);
  padding-block: 52px 76px;
}
.hero-grid { z-index: 1; gap: 50px; min-height: 610px; }
.hero .orb-rose { width: 300px; height: 300px; left: -170px; top: -120px; background: #edb2b8; opacity: .37; }
.hero .orb-blue { width: 230px; height: 230px; right: -145px; top: 260px; background: #b7e0ee; opacity: .4; }
.hero .orb-yellow { width: 230px; height: 230px; left: -140px; bottom: -160px; background: #edcf7b; opacity: .24; }
.hero h1 { font-size: clamp(28px, 3.3vw, 40px); white-space: normal; }
.hero-title-intro { display: inline-block; font-size: .72em; white-space: nowrap; }
.hero h1 em { color: #ae626d; }
.hero-sub-lead { color: var(--ink); font-weight: 800; }
.hero .badge { background: #fff9f3; color: #8b6357; border-color: #e7d0bd; }
.hero .kicker { color: #927451; }
.hero .devices { height: 570px; isolation: isolate; }
.hero-flow { position: absolute; z-index: 0; width: calc(100% + 88px); max-width: none; height: auto; top: -8px; left: -44px; overflow: visible; pointer-events: none; }
.hero .devices::after { content: ''; position: absolute; z-index: 0; height: 24px; left: 9%; right: 0; bottom: 35px; background: #9a8466; opacity: .1; border-radius: 50%; filter: blur(16px); }
.hero .laptop { z-index: 1; width: 86%; left: -7px; top: 130px; transform: rotate(-5deg); filter: drop-shadow(0 22px 22px rgba(87,73,47,.17)); }
.hero .laptop-screen { border-width: 9px; border-color: #49463e; background: #49463e; border-radius: 15px 15px 2px 2px; }
.hero .laptop-base { background: linear-gradient(#e5e1d8, #c2bdb0); }
.hero .hero-phone { z-index: 2; width: 151px; height: 309px; top: 227px; right: -2px; transform: rotate(7deg); border-width: 6px; border-color: #49463e; background: #49463e; border-radius: 29px; box-shadow: 0 22px 36px rgba(87,73,47,.22); }
.hero .hero-phone img { border-radius: 22px; }
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-grid { gap: 32px; }
  .hero .devices { height: 480px; }
  .hero .laptop { top: 120px; left: 0; }
  .hero .hero-phone { width: 132px; height: 270px; top: 196px; right: 0; }
  .hero-flow { width: calc(100% + 64px); left: -32px; top: 0; }
}
@media (max-width: 760px) {
  .hero { padding: 36px 0 36px; }
  .hero-grid { gap: 0; min-height: auto; }
  .hero h1 { font-size: clamp(25px, 6.45vw, 38px); }
  .hero-title-intro { font-size: clamp(16px, 4.6vw, 19px); }
  .hero .orb-rose { width: 225px; height: 225px; left: -140px; top: -100px; }
  .hero .orb-blue { width: 185px; height: 185px; right: -125px; top: auto; bottom: 110px; }
  .hero .orb-yellow { width: 165px; height: 165px; left: -108px; bottom: -94px; }
  .hero .devices { width: min(100%, 410px); height: auto; aspect-ratio: 1 / 1.17; margin-top: 30px; }
  .hero-flow { width: calc(100% + 38px); left: -19px; top: 0; }
  .hero .laptop { width: 85%; left: 4px; top: 25%; transform: rotate(-5deg); }
  .hero .laptop-screen { border-width: 6px; border-radius: 11px 11px 2px 2px; }
  .hero .laptop-base { height: 10px; margin-inline: -12px; }
  .hero .hero-phone { width: 34%; height: auto; aspect-ratio: 151 / 309; top: 43%; right: 1%; border-width: 5px; border-radius: 23px; }
  .hero .hero-phone img { border-radius: 17px; }
  .hero .devices::after { bottom: 10%; }
}
@media (max-width: 360px) {
  .hero .hero-phone { border-width: 4px; border-radius: 20px; }
  .hero .hero-phone img { border-radius: 15px; }
}

/* 流派対応（計算・用語の切り替え） */
/* 前後のセクションと波線でつながるよう、背景と波の色をそろえる（上：.tools #fbf8f1 → ここ #f7f2e8 → 下：.features #fff） */
.schools{background:#f7f2e8;--wave-fill:#fbf8f1}
.schools + .features{--wave-fill:#f7f2e8}
.school-card{margin:36px auto 0;max-width:720px;background:#fff;border:1px solid #eee8db;border-radius:22px;padding:28px 30px;box-shadow:0 8px 24px rgba(96,79,40,.06)}
.school-table{width:100%;border-collapse:collapse;font-size:15px}
.school-table th,.school-table td{padding:12px 10px;border-bottom:1px solid #eee8db;text-align:center}
.school-table thead th{font-size:13px;font-weight:800;color:var(--ink);background:#f7f2e8}
.school-table thead th:first-child{background:transparent}
.school-table tbody th{text-align:left;font-size:13px;font-weight:700;color:var(--body);white-space:nowrap}
.school-table tbody td{font-weight:800;color:var(--ink)}
.school-table tbody tr:last-child th,.school-table tbody tr:last-child td{border-bottom:0}
.school-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.school-points li{position:relative;padding-left:26px;font-size:14px;line-height:1.85;color:var(--body)}
.school-points li:before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:900}
.school-points b{color:var(--ink)}
@media(max-width:760px){.school-card{padding:18px 14px;border-radius:18px;margin-top:28px}.school-table{font-size:12px}.school-table th,.school-table td{padding:9px 5px}.school-table thead th{font-size:10.5px}.school-table tbody th{font-size:10.5px;white-space:normal}.school-points li{font-size:12.5px}}
@media(max-width:760px){.feature-grid > .feature-card:last-child:nth-child(odd){grid-column:1/-1}}