/*
  XeleTrack LP CSS
  ========================
  役割ごとにセクション分けし、インデントと改行を整理した版です。
  デザイン・挙動・レスポンシブ設定の内容自体は変更していません。
*/

@import url("https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap");
/* =========================
   01. Design Tokens
========================= */

:root {
  --navy:#073466;
  --navy2:#0c4f8e;
  --green:#08ad78;
  --green2:#39c868;
  --blue:#1e78ec;
  --text:#18324c;
  --muted:#607184;
  --line:#dceaf1;
  --bg:#f6fbff;
  --white:#fff;
  --shadow:0 18px 55px rgba(22,91,126,.12);
  --radius:26px;
  --grad:linear-gradient(110deg,#27ca65 0%,#00a98d 42%,#1f73eb 100%);
}

/* =========================
   02. Reset / Base
========================= */

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:white;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

img {
  max-width:100%;
  display:block
}

.shell {
  width:min(1480px,calc(100% - 64px));
  margin:auto
}

/* =========================
   03. Header / Navigation
========================= */

.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(13,76,119,.08)
}

.header-inner {
  height:88px;
  display:flex;
  align-items:center;
  gap:34px
}

.brand {
  width:270px;
  display:flex;
  align-items:center
}

.brand img {
  width:100%;
  height:auto
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  font-weight:700;
  font-size:14px;
  color:#17395d
}

.desktop-nav a {
  transition:.2s
}

.desktop-nav a:hover {
  color:var(--green)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:12px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border-radius:999px;
  font-weight:800;
  line-height:1.2;
  transition:.25s;
  white-space:nowrap
}

.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(22,92,139,.15)
}

.btn-primary {
  background:var(--grad);
  color:white;
  border:0
}

.btn-outline {
  background:#fff;
  color:var(--navy);
  border:1.6px solid #1594c8
}

.btn.compact {
  padding:13px 22px;
  font-size:14px
}

.btn.large {
  padding:19px 35px;
  font-size:17px
}

.menu-button {
  display:none;
  border:0;
  background:transparent;
  font-size:24px;
  color:var(--navy);
  cursor:pointer
}

.mobile-menu {
  display:none
}

.section-decor {
  position:relative;
  overflow:hidden
}

/* =========================
   04. Hero
========================= */

.hero {
  min-height:780px;
  background:radial-gradient(circle at 75% 18%,#e7f9ff 0,rgba(231,249,255,0) 38%),linear-gradient(180deg,#fff 0%,#fbfeff 100%);
  display:flex;
  align-items:center
}

.hero:after,.solution:after,.video-section:after,.about:after,.pricing:after,.flow:after,.final-cta:after {
  content:"";
  position:absolute;
  inset:auto -15% -130px -15%;
  height:250px;
  background:linear-gradient(12deg,rgba(24,204,135,.12),rgba(32,126,241,.12));
  border-radius:50%;
  transform:rotate(-3deg);
  pointer-events:none
}

.hero-grid {
  display:grid;
  grid-template-columns:.9fr 1.15fr;
  align-items:center;
  gap:44px;
  position:relative;
  z-index:2;
  padding:78px 0
}

.eyebrow {
  font-size:13px;
  font-weight:900;
  letter-spacing:.22em;
  color:var(--navy2);
  margin:0 0 17px
}

.hero h1,.section-heading h2,.solution h2,.video-copy h2,.final-cta h2 {
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.12;
  color:#052f60
}

.hero h1 {
  font-size:clamp(44px,4.6vw,68px);
  margin:0 0 25px
}

.hero h1 span,.section-heading h2 span,.solution h2 span,.video-copy h2 span,.final-cta h2 span {
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.lead {
  font-size:18px;
  max-width:700px;
  margin:0;
  color:#36506a
}

.hero-actions,.center-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px
}

.quick-points {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:38px
}

.quick-points>div {
  display:grid;
  grid-template-columns:46px 1fr;
  gap:0 12px;
  align-items:center
}

.quick-points .icon {
  grid-row:1/3;
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e7faf3;
  color:#08a678;
  font-size:20px;
  font-weight:900
}

.quick-points b {
  font-size:14px;
  color:#103d68
}

.quick-points small {
  font-size:12px;
  color:var(--muted)
}

.hero-visual {
  position:relative;
  min-height:570px;
  display:flex;
  align-items:center;
  justify-content:center
}

.laptop-frame {
  width:90%;
  position:relative;
  z-index:2
}

.laptop-screen {
  background:#171b20;
  border-radius:22px 22px 9px 9px;
  padding:16px 16px 12px;
  box-shadow:var(--shadow)
}

.laptop-screen img {
  width:100%;
  border-radius:8px
}

.laptop-base {
  height:18px;
  background:linear-gradient(#dce4e8,#aeb8bd);
  width:108%;
  margin-left:-4%;
  clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);
  border-radius:0 0 18px 18px
}

.phone-frame {
  position:absolute;
  right:0;
  bottom:70px;
  width:22%;
  padding:7px;
  background:#111820;
  border-radius:28px;
  box-shadow:0 18px 35px rgba(17,58,92,.22);
  z-index:3
}

.phone-frame img {
  border-radius:22px
}

.hand-note {
  position:absolute;
  right:2%;
  top:-18px;
  color:#1565aa;
  font-size:22px;
  font-family:"Klee One","Yuji Syuku","Hiragino Maru Gothic ProN",cursive;
  font-weight:600;
  letter-spacing:.04em;
  transform:rotate(-6deg);
  line-height:1.55
}

.city-haze {
  position:absolute;
  inset:16% -10% 5% 12%;
  background:linear-gradient(180deg,rgba(162,225,255,.35),rgba(78,201,132,.16));
  filter:blur(28px);
  border-radius:50%
}

.leaf {
  position:absolute;
  width:280px;
  height:110px;
  background:linear-gradient(130deg,rgba(34,197,94,.12),rgba(14,165,233,.09));
  border-radius:100% 0 100% 0;
  transform:rotate(-18deg);
  pointer-events:none
}

.leaf-a {
  top:12%;
  right:4%
}

.leaf-b {
  bottom:6%;
  left:35%;
  transform:rotate(22deg);
  width:230px
}

.glow {
  position:absolute;
  border-radius:50%;
  filter:blur(30px);
  background:rgba(37,184,222,.13)
}

.glow-a {
  width:330px;
  height:330px;
  right:16%;
  top:23%
}

/* =========================
   05. Shared Section Styles
========================= */

.section {
  padding:110px 0
}

.section-heading {
  text-align:center;
  max-width:900px;
  margin:0 auto 50px
}

.section-heading h2 {
  font-size:clamp(38px,4.4vw,64px);
  margin:0 0 16px
}

.section-heading>p:last-child {
  font-size:18px;
  color:var(--muted);
  margin:0
}

/* =========================
   06. Problems
========================= */

.problems {
  background:linear-gradient(180deg,#f9fdff,#f3fbfe)
}

.problem-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.problem-card {
  background:#fff;
  border:1px solid #e2edf3;
  border-radius:24px;
  padding:30px;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:24px;
  align-items:center;
  box-shadow:0 12px 38px rgba(19,78,114,.07)
}

.round-icon {
  width:88px;
  height:88px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#e3fbef,#e8f5ff);
  color:#0aa37d;
  font-weight:900;
  font-size:28px
}

.problem-card h3 {
  margin:0 0 8px;
  color:#073466;
  font-size:22px;
  line-height:1.35
}

.problem-card p {
  margin:0;
  color:var(--muted)
}

.warning {
  margin-top:26px;
  background:#fff0f1;
  border:1px solid #ffd8dc;
  border-radius:21px;
  padding:20px 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px
}

.warning span {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#e83f4c;
  color:#fff;
  font-weight:900;
  font-size:24px
}

.warning p {
  margin:0;
  font-size:18px
}

.warning b {
  color:#d92735
}

/* =========================
   07. Solution
========================= */

.solution {
  background:#fff
}

.solution-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:center
}

.solution h2 {
  font-size:clamp(44px,5vw,70px);
  margin:0 0 22px
}

.solution-copy>p:not(.eyebrow) {
  font-size:18px;
  color:var(--muted)
}

.feature-mini-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:28px 0
}

.feature-mini-grid>div {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:0 14px;
  background:#f8fcff;
  border:1px solid #e1eef4;
  padding:15px 18px;
  border-radius:18px
}

.feature-mini-grid span {
  grid-row:1/3;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e7faf4;
  color:#0aa77c;
  font-size:22px;
  font-weight:900
}

.feature-mini-grid b {
  color:var(--navy);
  font-size:16px
}

.feature-mini-grid small {
  color:var(--muted)
}

.dashboard-card {
  background:#e8f8fb;
  border-radius:30px;
  padding:28px;
  box-shadow:var(--shadow);
  transform:rotate(1deg)
}

.dashboard-card img {
  border-radius:16px;
  box-shadow:0 15px 35px rgba(13,61,94,.14)
}

/* =========================
   08. Video
========================= */

.video-section {
  background:linear-gradient(180deg,#f7fcff,#fff)
}

.video-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:58px;
  align-items:center
}

.video-card {
  position:relative;
  background:#fff;
  border-radius:26px;
  padding:10px;
  border:1px solid #d9edf3;
  box-shadow:var(--shadow);
  cursor:pointer;
  overflow:hidden
}

.video-card img {
  border-radius:19px;
  aspect-ratio:16/9;
  object-fit:cover
}

.play-button {
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:92px;
  height:92px;
  border:0;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-size:31px;
  box-shadow:0 15px 36px rgba(13,109,178,.28);
  cursor:pointer
}

.video-meta {
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:20px 24px;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,25,45,.85));
  border-radius:0 0 19px 19px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}

.video-copy h2 {
  font-size:clamp(38px,4.2vw,60px);
  margin:0 0 18px
}

.video-copy>p:not(.eyebrow) {
  font-size:18px;
  color:var(--muted)
}

.cycle {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:34px 0
}

.cycle>div {
  text-align:center
}

.cycle span {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 8px;
  background:var(--grad);
  color:#fff;
  font-weight:900
}

.cycle b {
  display:block;
  color:var(--navy);
  font-size:20px
}

.cycle small {
  font-size:12px;
  color:var(--muted)
}

.cycle i {
  font-style:normal;
  color:#2ea8cc;
  font-size:27px
}

/* =========================
   09. About / Features
========================= */

.about {
  background:#f8fdff
}

.about-grid {
  display:grid;
  grid-template-columns:.75fr 1.35fr .75fr;
  gap:26px;
  align-items:center
}

.about-list {
  display:grid;
  gap:18px
}

.about-item {
  background:#fff;
  border:1px solid #deedf3;
  border-radius:20px;
  padding:18px;
  display:grid;
  grid-template-columns:60px 1fr;
  gap:15px;
  align-items:center
}

.about-item>span {
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8faf3;
  color:#08a679;
  font-weight:900
}

.about-item b {
  display:block;
  color:var(--navy);
  font-size:18px
}

.about-item small {
  color:var(--muted)
}

.about-device {
  padding:14px;
  background:white;
  border-radius:26px;
  box-shadow:var(--shadow)
}

.about-device img {
  border-radius:18px
}

.trust-strip {
  margin-top:38px;
  background:linear-gradient(90deg,#eefcf6,#edf8ff);
  border:1px solid #d7eee7;
  border-radius:22px;
  padding:20px 28px;
  display:flex;
  gap:24px;
  justify-content:center
}

.trust-strip b {
  color:#079b71
}

.trust-strip p {
  margin:0
}

/* =========================
   10. Pricing
========================= */

.pricing {
  background:linear-gradient(180deg,#fff,#f5fcff)
}

.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:900px;
  margin:0 auto
}

.price-card {
  position:relative;
  background:#fff;
  border:1px solid #d9e9f0;
  border-radius:28px;
  padding:38px;
  box-shadow:0 14px 40px rgba(18,79,117,.08)
}

.price-card.recommended {
  border:2px solid #12b781;
  box-shadow:0 19px 50px rgba(16,177,127,.13)
}

.recommended-badge {
  position:absolute;
  right:26px;
  top:-20px;
  background:var(--grad);
  color:#fff;
  border-radius:999px;
  padding:8px 19px;
  font-weight:900
}

.plan-name {
  font-size:30px;
  font-weight:900;
  color:#082f60;
  margin:0
}

.plan-sub {
  margin:5px 0 22px;
  color:var(--muted)
}

.price {
  padding:12px 0 22px;
  border-bottom:1px solid #e1edf2;
  margin-bottom:18px
}

.price strong {
  font-size:64px;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.price span {
  font-size:18px;
  font-weight:800;
  margin-left:6px;
  color:#0b3766
}

.price-card ul {
  list-style:none;
  margin:0;
  padding:0
}

.price-card li {
  padding:10px 0 10px 32px;
  border-bottom:1px solid #eef4f7;
  position:relative
}

.price-card li:before {
  content:"✓";
  position:absolute;
  left:0;
  top:10px;
  width:23px;
  height:23px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#def8ee;
  color:#079e73;
  font-weight:900
}

.pricing .center-actions {
  justify-content:center
}

/* =========================
   11. Flow
========================= */

.flow {
  background:#fbfeff
}

.flow-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px
}

.flow-card {
  background:#fff;
  border:1px solid #dcecf3;
  border-radius:23px;
  padding:25px 20px;
  text-align:center;
  box-shadow:0 12px 36px rgba(22,79,112,.06)
}

.flow-card em {
  display:block;
  font-style:normal;
  font-weight:900;
  font-size:34px;
  color:#0aa77d
}

.flow-card>span {
  width:76px;
  height:76px;
  margin:10px auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#e6faf3,#e9f5ff);
  font-size:28px;
  color:#0979bd;
  font-weight:900
}

.flow-card h3 {
  font-size:19px;
  color:var(--navy);
  margin:0 0 10px
}

.flow-card p {
  font-size:14px;
  color:var(--muted);
  margin:0 10
}

.flow-message {
  text-align:center;
  font-size:28px;
  font-weight:900;
  color:var(--navy);
  margin-top:42px
}

.flow-message span {
  color:#0aaa7c
}


.flow-play-button {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-size:15px;
  box-shadow:0 8px 20px rgba(13,109,178,.22);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.flow-video-meta {
  position:absolute;
  left:5px;
  right:5px;
  bottom:5px;
  padding:10px 12px;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,25,45,.88));
  border-radius:0 0 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-size:10px;
}

.flow-video-meta b {
  font-size:10px;
}

.flow-video-meta span {
  font-size:9px;
  opacity:.85;
}

/* =========================
   12. FAQ
========================= */

.faq {
  background:linear-gradient(180deg,#f7fcff,#fff)
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start
}

.faq-item {
  align-self:start;
  background:white;
  border:1px solid #dcebf2;
  border-radius:20px;
  padding:0 22px;
  box-shadow:0 10px 28px rgba(23,79,113,.06)
}

.faq-item summary {
  list-style:none;
  cursor:pointer;
  padding:22px 0;
  font-weight:800;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:12px
}

.faq-item summary::-webkit-details-marker {
  display:none
}

.faq-item summary span {
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff
}

.faq-item summary:after {
  content:"＋";
  margin-left:auto;
  color:#1686c4;
  font-size:20px
}

.faq-item[open] summary:after {
  content:"−"
}

.faq-item p {
  margin:0 0 22px;
  padding-left:46px;
  color:var(--muted)
}

/* =========================
   13. Final CTA
========================= */

.final-cta {
  padding:105px 0;
  background:radial-gradient(circle at 50% 100%,#ddf7ff,#fff 55%)
}

.final-cta-inner {
  text-align:center;
  position:relative;
  z-index:2
}

.final-cta h2 {
  font-size:clamp(42px,5vw,70px);
  margin:0 0 15px
}

.final-cta-inner>p:not(.eyebrow) {
  font-size:18px;
  color:var(--muted)
}

.final-cta .center-actions {
  justify-content:center
}

/* =========================
   14. Footer
========================= */

.site-footer {
  background:#fff;
  border-top:1px solid #e3edf2;
  padding:26px 0
}

.footer-inner {
  display:grid;
  grid-template-columns:220px 1fr auto;
  gap:35px;
  align-items:center
}

.footer-inner img {
  width:210px
}

.footer-links {
  display:flex;
  gap:28px;
  justify-content:center;
  font-size:13px;
  color:#496179
}

.footer-inner small {
  font-size:12px;
  color:#6d8192
}

/* =========================
   15. Animation
========================= */

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s ease
}

.reveal.show {
  opacity:1;
  transform:none
}

.delay-1 {
  transition-delay:.12s
}

.delay-2 {
  transition-delay:.22s
}

/* =========================
   16. Tablet
========================= */

@media(max-width:1100px) {
  .desktop-nav {
    display:none
  }

  .brand {
    width:220px
  }

  .menu-button {
    display:block
  }

  .mobile-menu.open {
    display:grid;
    padding:16px 32px 22px;
    gap:4px;
    background:#fff;
    border-top:1px solid #edf3f6
  }

  .mobile-menu a {
    padding:9px 0;
    font-weight:700
  }

  .hero {
    min-height:auto
  }

  .hero-grid,.solution-grid,.video-grid {
    grid-template-columns:1fr
  }

  .hero-visual {
    min-height:480px
  }

  .solution-copy {
    order:1
  }

  .dashboard-card {
    order:2
  }

  .about-grid {
    grid-template-columns:1fr 1fr
  }

  .about-device {
    grid-row:1/3;
    grid-column:2
  }

  .flow-grid {
    grid-template-columns:repeat(3,1fr)
  }

  .footer-inner {
    grid-template-columns:180px 1fr
  }

  .footer-inner small {
    grid-column:1/3;
    text-align:center
  }

}

/* =========================
   17. Mobile
========================= */

@media(max-width:720px) {
  .shell {
    width:min(100% - 32px,680px)
  }

  .site-header .shell {
    width:calc(100% - 28px)
  }

  .header-inner {
    height:68px;
    gap:8px
  }

  .brand {
    width:132px
  }

  .desktop-only {
    display:none!important
  }

  .btn.compact {
    padding:10px 13px;
    font-size:12px
  }

  .menu-button {
    font-size:21px;
    margin-left:auto
  }

  .hero-grid {
    padding:48px 0 68px;
    gap:12px
  }

  .hero h1 {
    font-size:38px
  }

  .lead {
    font-size:15px
  }

  .hero-actions {
    gap:10px
  }

  .hero-actions .btn {
    flex:1;
    padding:16px 18px;
    font-size:14px
  }

  .quick-points {
    grid-template-columns:1fr;
    gap:10px
  }

  .quick-points>div {
    grid-template-columns:42px 1fr
  }

  .hero-visual {
    min-height:330px;
    margin-top:10px
  }

  .laptop-frame {
    width:92%
  }

  .laptop-screen {
    padding:7px;
    border-radius:12px 12px 5px 5px
  }

  .phone-frame {
    width:25%;
    right:0;
    bottom:38px;
    border-radius:17px;
    padding:4px
  }

  .phone-frame img {
    border-radius:13px
  }

  .hand-note {
    font-size:14px;
    top:-24px;
    right:0;
    font-family:"Klee One","Yuji Syuku","Hiragino Maru Gothic ProN",cursive
  }

  .section {
    padding:72px 0
  }

  .section-heading {
    margin-bottom:30px
  }

  .section-heading h2,.solution h2,.video-copy h2,.final-cta h2 {
    font-size:36px
  }

  .section-heading>p:last-child,.solution-copy>p:not(.eyebrow),.video-copy>p:not(.eyebrow) {
    font-size:15px
  }

  .problem-grid,.pricing-grid,.faq-grid {
    grid-template-columns:1fr
  }

  .problem-card {
    grid-template-columns:68px 1fr;
    padding:22px;
    gap:14px
  }

  .round-icon {
    width:66px;
    height:66px;
    font-size:20px
  }

  .problem-card h3 {
    font-size:18px
  }

  .warning {
    align-items:flex-start;
    padding:18px
  }

  .warning p {
    font-size:15px
  }

  .solution-grid,.video-grid {
    gap:30px
  }

  .feature-mini-grid {
    margin:20px 0
  }

  .dashboard-card {
    padding:12px;
    border-radius:20px
  }

  .video-card {
    padding:5px;
    border-radius:18px
  }

  .video-card img {
    border-radius:13px
  }

  .play-button {
    width:68px;
    height:68px;
    font-size:23px
  }

  .video-meta {
    left:5px;
    right:5px;
    bottom:5px;
    padding:14px;
    font-size:12px
  }

  .cycle {
    gap:4px
  }

  .cycle b {
    font-size:17px
  }

  .cycle small {
    font-size:10px
  }

  .cycle i {
    font-size:19px
  }

  .about-grid {
    grid-template-columns:1fr
  }

  .about-device {
    grid-row:auto;
    grid-column:auto;
    order:-1
  }

  .trust-strip {
    display:block;
    padding:18px
  }

  .trust-strip b {
    display:block;
    margin-bottom:4px
  }

  .price-card {
    padding:28px
  }

  .price strong {
    font-size:54px
  }

  .center-actions {
    gap:10px
  }

  .center-actions .btn {
    flex:1;
    padding:16px 16px;
    font-size:14px
  }

  .flow-grid {
    grid-template-columns:1fr
  }

  .flow-card {
    text-align:left;
    display:grid;
    grid-template-columns:58px 74px 1fr;
    column-gap:12px;
    align-items:center;
    padding:18px
  }

  .flow-card em {
    font-size:26px
  }

  .flow-card>span {
    width:60px;
    height:60px;
    margin:0;
    font-size:22px
  }

  .flow-card h3 {
    font-size:18px
  }

  .flow-card p {
    grid-column:3;
    margin-top:2px
  }

  .flow-message {
    font-size:22px
  }

  .faq-item {
    padding:0 16px
  }

  .faq-item summary {
    font-size:14px
  }

  .faq-item p {
    font-size:13px;
    padding-left:0
  }

  .footer-inner {
    grid-template-columns:1fr;
    text-align:center
  }

  .footer-inner img {
    margin:auto;
    width:170px
  }

  .footer-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
  }

  .footer-inner small {
    grid-column:auto
  }

  .leaf {
    opacity:.55
  }

  /* Mobile header / CTA refinements */   .header-actions {
    margin-left:auto;
  }

  .mobile-menu {
    padding-left:16px;
    padding-right:16px;
  }

  .mobile-menu .mobile-contact {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:10px;
    padding:15px 18px;
    border:1.5px solid #1594c8;
    border-radius:999px;
    background:#fff;
    color:var(--navy);
    font-weight:800;
  }

  .hero-actions .btn-outline,   .center-actions .btn-outline {
    flex:0 0 100%;
    width:100%;
  }


  /* Solution section buttons: full width on mobile */
  .solution .btn {
    flex: 0 0 100%;
    width: 100%;
  }

  .flow-play-button {
    width:42px;
    height:42px;
    font-size:13px;
  }

  .flow-video-meta {
    left:4px;
    right:4px;
    bottom:4px;
    padding:8px 9px;
    font-size:9px;
  }

  .flow-video-meta b {
    font-size:9px;
  }

  .flow-video-meta span {
    font-size:8px;
  }

  /* Flow video: full width on mobile */
  .flow-card .video-card {
    grid-column:1 / -1;
    width:100%;
    margin-top:14px;
  }

  .flow-card .video-card img {
    width:100%;
    height:auto;
  }
}

/* =========================
   18. Video Playing State
========================= */

.video-card.playing {
  padding:0;
  aspect-ratio:16/9
}

.video-card.playing iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
  border-radius:24px
}