:root {
  --green: #0c6848;
  --green-dark: #063d2b;
  --green-pale: #d9f0e4;
  --green-mist: #f4faf7;
  --accent: #72e79d;
  --orange: #72e79d;
  --ink: #010101;
  --muted: #666;
  --line: #e3e6e5;
  --paper: #fff;
  --soft-gray: #f1f1f1;
  --radius: 16px;
  --shadow: 0 14px 40px rgba(0, 89, 42, .11);
}
.legacy-content { display:block; }
.lone-site { display:none; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
main p { text-wrap: pretty; }
main h1, main h2, main h3 { text-wrap: balance; }
.container { width: min(920px, calc(100% - 40px)); margin-inline: auto; }
.container.wide { width: min(880px, calc(100% - 40px)); }
.container.narrow { width: min(850px, calc(100% - 40px)); }
.section-kicker {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .15em;
  text-align: center;
}
.section-kicker.light { color: #fff; }
.section-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 32px);
  line-height: 1.4;
  font-weight: 900;
  text-align: center;
  letter-spacing: .01em;
}
.section-intro { max-width: 720px; margin: 10px auto 34px; color: var(--muted); text-align: center; }
.subsection-title { margin: 52px 0 24px; font-size: 18px; font-weight: 900; text-align: center; }
.button {
  display: inline-flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 999px;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .13); }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #0b62ff; outline-offset: 3px; }
.button-white { color: var(--green); background: #fff; }
.button-green { color: #fff; background: var(--green); }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 57px;
  border-bottom: 1px solid #d6d6d6;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
}
.header-inner {
  width: min(880px, calc(100% - 40px));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; gap: 8px; align-items: center; color: #122319; }
.brand img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.brand strong { font-family: Arial, sans-serif; font-size: 27px; font-weight: 900; letter-spacing: .03em; }
.desktop-nav { display: flex; align-items: center; gap: 24px; }
.desktop-nav a { color: #333; font-weight: 500; white-space: nowrap; }
.desktop-nav a:hover { color: var(--green); }
.header-cta {
  padding: 10px 25px;
  border-radius: 999px;
  color: #073d2b;
  background: var(--orange);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

/* Hero */
.hero {
  padding-top: 57px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #167656 0%, #167656 43%, #d9f0e2 67%, #fff 100%);
}
.hero::before { position: absolute; z-index: 0; top: -24%; right: -14%; width: 76%; height: 142%; border-radius: 50%; background: radial-gradient(ellipse at 48% 50%, rgba(88,238,166,.45) 0 4%, rgba(88,238,166,.18) 18%, transparent 42%), radial-gradient(ellipse at 72% 25%, rgba(177,255,217,.55) 0 3%, transparent 24%), radial-gradient(ellipse at 69% 73%, rgba(118,238,177,.38) 0 3%, transparent 27%); filter: blur(20px); content: ""; opacity: .8; transform-origin: 48% 50%; animation: heroMistConverge 12s ease-in-out infinite; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(13, 90, 65, .18) 0%, rgba(13, 90, 65, .08) 43%, rgba(255,255,255,0) 67%);
  pointer-events: none;
}
.hero-inner { width: 100%; max-width: 960px; min-height: 712px; margin: 0 auto; padding: 72px 40px 64px; position: relative; z-index: 3; }
.hero-copy { width: 520px; }
.lowest-label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 27px;
  color: rgba(255,255,255,.96);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .08em;
}
.lowest-label::before {
  content: "";
  display: block;
  width: 4px;
  height: 38px;
  border-radius: 99px;
  background: linear-gradient(180deg, #95ffd4 0%, #15d987 100%);
  box-shadow: 0 0 9px rgba(82,255,175,.95), 0 0 24px rgba(37,240,146,.58);
  animation: labelGlow 2.8s ease-in-out infinite;
}
.lowest-label span {
  display: block;
  text-shadow: 0 1px 18px rgba(105,255,190,.25);
}
@keyframes labelGlow { 0%,100% { opacity:.72; transform:scaleY(.88); } 50% { opacity:1; transform:scaleY(1); } }
.hero h1 { margin: 0; font-size: 54px; line-height: 1.2; font-weight: 900; letter-spacing: -.035em; }
.hero-lead { margin: 28px 0 12px; line-height: 1.8; }
.hero-lead strong { border-bottom: 5px solid rgba(255, 255, 255, .65); }
.hero-sub { margin: 0 0 24px; padding-left: 14px; border-left: 3px solid #fff; font-weight: 900; }
.hero .button { min-width: 295px; }
.hero-offer { position: absolute; z-index: 5; right: 40px; bottom: 112px; display: flex; width: 310px; height: 78px; align-items: center; justify-content: center; color: #ffe83c; text-align: center; }
.hero-offer::before, .hero-offer::after { position: absolute; top: -18px; width: 70px; height: 50px; content: ""; filter: drop-shadow(0 0 7px rgba(255,232,38,.95)); animation: heroOfferAccentPulse 1.65s ease-in-out infinite; }
.hero-offer::before { left: -10px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50' viewBox='0 0 70 50'%3E%3Cg fill='%23fff23d'%3E%3Cpath d='M8 38 8 27 32 38Z'/%3E%3Cpath d='M22 17 31 9 38 34Z'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-offer::after { top: -18px; right: -10px; width: 70px; height: 50px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50' viewBox='0 0 70 50'%3E%3Cg fill='%23fff23d'%3E%3Cpath d='M48 17 39 9 32 34Z'/%3E%3Cpath d='M32 41 60 17 60 29Z'/%3E%3Cpath d='M38 45 62 32 62 43Z'/%3E%3C/g%3E%3C/svg%3E"); animation-delay: -.82s; }
.hero-offer strong { display: flex; align-items: center; justify-content: center; color: #ffe83c; font-size: 30px; font-weight: 900; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0,0,0,.4); white-space: nowrap; }
.hero-offer strong span:first-child { margin-right: 6px; color: #ffe83c; font-size: 28px; letter-spacing: .08em; }
.hero-offer strong span:last-child { margin-left: 7px; color: #ffe83c; font-size: 30px; letter-spacing: .04em; }
.hero-offer strong b { display: inline-block; margin: 0; color: #fff23d; font-family: Arial, sans-serif; font-size: 90px; line-height: 1; letter-spacing: -.08em; text-shadow: 0 0 12px rgba(255,230,41,.45); }
@keyframes heroOfferAccentPulse {
  0%, 100% { opacity: .52; filter: drop-shadow(0 0 4px rgba(255,232,38,.58)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,245,116,1)) drop-shadow(0 0 22px rgba(255,212,0,.75)); }
}
.presented-by { display: flex; align-items: center; gap: 12px; margin-top: 25px; font-size: 18px; font-weight: 900; letter-spacing: .14em; }
.presented-by img { width: 42px; border-radius: 6px; }
.hero-phones { position: absolute; inset: -92px -10% auto auto; z-index: 0; display: flex; width: 58%; gap: 16px; align-items: flex-start; transform: rotate(-8deg); transform-origin: top right; pointer-events: none; }
.phone-clip { width: 190px; flex-shrink: 0; overflow: hidden; }
.phone-column {
  width: 100%;
  will-change: transform;
}
.phone-column img { width: 100%; height: auto; border-radius: 12px; }
.phone-a { animation: phoneFallDown 22s linear infinite; }
.phone-b { animation: phoneFallDown 30s linear -10s infinite; }
.phone-c { animation: phoneFallDown 26s linear -6s infinite; }

/* White LINE bubbles stream along luminous paths into the L-ONE core. */
.hero-absorption { position: absolute; z-index: 2; top: 124px; right: clamp(-30px, 4vw, 72px); width: 430px; height: 430px; pointer-events: none; }
.hero-absorption::before { display: none; }
.hero-absorption::after { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 15deg, transparent 0 6%, rgba(78,223,151,.35) 7% 8%, transparent 9% 18%, rgba(78,223,151,.28) 19% 20%, transparent 21% 34%, rgba(78,223,151,.32) 35% 36%, transparent 37% 50%, rgba(78,223,151,.26) 51% 52%, transparent 53% 70%, rgba(78,223,151,.3) 71% 72%, transparent 73%); -webkit-mask: radial-gradient(circle, transparent 0 35%, #000 36% 37%, transparent 38%); mask: radial-gradient(circle, transparent 0 35%, #000 36% 37%, transparent 38%); content: ""; opacity: .75; }
.absorption-core { position: absolute; z-index: 3; top: 130px; left: 130px; display: grid; width: 170px; height: 170px; place-items: center; border: 8px solid rgba(202,255,226,.9); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff 0 45%, #eefdf5 100%); box-shadow: 0 0 0 16px rgba(79,231,153,.25), 0 18px 44px rgba(3,106,61,.25); }
.absorption-core::after { position: absolute; inset: -29px; border: 1px solid rgba(30,191,113,.35); border-radius: 50%; box-shadow: 0 0 25px rgba(67,235,149,.55); content: ""; }
.absorption-core img { width: 78px; height: 78px; margin-top: 8px; object-fit: contain; mix-blend-mode: multiply; }
.absorption-core span { position: absolute; bottom: 22px; color: #075d3e; font-family: Arial, sans-serif; font-size: 15px; font-weight: 900; letter-spacing: .05em; }
.absorption-orbit { position: absolute; z-index: 2; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(141,255,194,.25), 0 9px 20px rgba(3,123,67,.27); animation: absorbIntoLone 8s cubic-bezier(.55,.08,.55,1) infinite; }
.absorption-orbit span { position: relative; box-sizing: border-box; display: grid; width: 100%; height: 100%; place-items: center; border: 8px solid #62dba0; border-radius: inherit; color: #078b50; background: #fff; font-family: Arial, sans-serif; font-size: 10px; font-weight: 900; letter-spacing: -.5px; }
.absorption-orbit span::after { position: absolute; right: 6px; bottom: 3px; width: 11px; height: 11px; border-right: 4px solid #62dba0; border-bottom: 4px solid #62dba0; background: #fff; content: ""; transform: rotate(24deg) skew(-10deg); }
.orbit-one { --start-x: 255px; --start-y: -170px; --start-scale: 1.65; animation-delay: 0s; }
.orbit-two { --start-x: 285px; --start-y: 125px; --start-scale: 1.35; animation-delay: -.8s; }
.orbit-three { --start-x: -455px; --start-y: 170px; --start-scale: 1.55; animation-delay: -1.6s; }
.orbit-four { --start-x: -430px; --start-y: -155px; --start-scale: 1.25; animation-delay: -2.4s; }
.orbit-five { --start-x: 22px; --start-y: -250px; --start-scale: 1.45; animation-delay: -3.2s; }
.orbit-six { --start-x: 52px; --start-y: 246px; --start-scale: 1.2; animation-delay: -4s; }
.orbit-seven { --start-x: 330px; --start-y: -18px; --start-scale: 1.4; animation-delay: -4.8s; }
.orbit-eight { --start-x: -500px; --start-y: 12px; --start-scale: 1.35; animation-delay: -5.6s; }
.orbit-nine { --start-x: 185px; --start-y: 224px; --start-scale: 1.55; animation-delay: -6.4s; }
.orbit-ten { --start-x: -365px; --start-y: -235px; --start-scale: 1.3; animation-delay: -7.2s; }
.orbit-eleven { --start-x: -590px; --start-y: -70px; --start-scale: 1.7; animation-delay: -1.15s; }
.orbit-twelve { --start-x: -545px; --start-y: 268px; --start-scale: 1.2; animation-delay: -2.95s; }
.orbit-thirteen { --start-x: -610px; --start-y: -272px; --start-scale: 1.48; animation-delay: -4.15s; }
.orbit-fourteen { --start-x: -475px; --start-y: 95px; --start-scale: 1.68; animation-delay: -6.05s; }
.orbit-fifteen { --start-x: -690px; --start-y: 190px; --start-scale: 1.28; animation-delay: -7.65s; }
.hero-absorption > p { position: absolute; right: 26px; bottom: 0; margin: 0; color: #197152; font-family: Arial, sans-serif; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
@keyframes absorbIntoLone {
  0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(var(--start-scale)); }
  10%, 57% { opacity: 1; }
  78% { opacity: 1; transform: translate(0, 0) scale(.52); }
  88%, 100% { opacity: 0; transform: translate(0, 0) scale(.05); }
}

@keyframes phoneFallDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
@keyframes heroMistConverge { 0%, 100% { opacity: .45; transform: translate(12%, 2%) scale(1.15); } 50% { opacity: .92; transform: translate(-8%, 0) scale(.76); } }

/* Deep-green, luminous hero direction: contacts converge on the L-ONE console. */
.site-header { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 62px; border: 0; border-radius: 0; background: rgba(255,255,255,.98); box-shadow: 0 8px 28px rgba(0,35,22,.18); transform: none; }
.header-inner { width: calc(100% - 64px); max-width: none; }
.brand img { width: 40px; height: 40px; }
.desktop-nav { gap: clamp(22px, 3vw, 48px); }
.desktop-nav a { color: #161616; font-weight: 800; }
.header-cta { padding: 15px 34px; color: #fff; background: linear-gradient(120deg, #003e2c 0%, #005436 44%, #003d2a 100%); box-shadow: 0 7px 16px rgba(0,62,44,.28); font-size: 15px; }
.hero { padding-top: 88px; background: radial-gradient(circle at 74% 49%, rgba(2,240,121,.37) 0 2%, rgba(2,240,121,.11) 18%, transparent 41%), radial-gradient(circle at 90% 15%, rgba(0,218,110,.3), transparent 25%), linear-gradient(120deg, #003e2c 0%, #005436 44%, #003d2a 100%); }
.hero::before { top: -32%; right: -10%; width: 92%; height: 160%; background: radial-gradient(ellipse at 55% 50%, rgba(41,255,147,.58) 0 2%, rgba(14,230,121,.16) 18%, transparent 42%), radial-gradient(circle at 72% 24%, rgba(65,255,166,.58) 0 1%, transparent 8%), radial-gradient(circle at 87% 70%, rgba(65,255,166,.45) 0 1%, transparent 10%), radial-gradient(circle at 35% 72%, rgba(65,255,166,.35) 0 1%, transparent 12%); filter: blur(10px); opacity: .9; }
.hero::after { background: linear-gradient(90deg, rgba(0,30,20,.38) 0%, rgba(0,30,20,.12) 45%, transparent 72%); }
.hero-inner { max-width: 1280px; min-height: 620px; padding: 74px 40px 42px; }
.hero-copy { width: min(900px, calc(100vw - 80px)); }
.hero h1 { max-width: 520px; }
.hero h1 { font-size: clamp(48px, 5vw, 66px); line-height: 1.24; }
.hero-lead { font-size: 18px; }
.hero-absorption { top: 102px; right: -54px; width: 620px; height: 620px; }
.hero-absorption::after { inset: 12px; background: repeating-conic-gradient(from 0deg, rgba(119,255,188,.9) 0 .13deg, transparent .14deg 17deg); -webkit-mask: radial-gradient(circle, transparent 0 27%, #000 28% 30%, transparent 31%); mask: radial-gradient(circle, transparent 0 27%, #000 28% 30%, transparent 31%); opacity: .78; }
.absorption-core { top: 216px; left: 216px; width: 188px; height: 188px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 53%, rgba(255,255,255,.94) 64%, rgba(237,255,245,.52) 77%, transparent 100%); box-shadow: 0 0 58px 26px rgba(35,255,144,.54), 0 20px 55px rgba(0,0,0,.22); -webkit-mask: radial-gradient(circle, #000 0 59%, rgba(0,0,0,.92) 70%, transparent 100%); mask: radial-gradient(circle, #000 0 59%, rgba(0,0,0,.92) 70%, transparent 100%); }
.absorption-core::after { display: none; }
.absorption-core img { width: 95px; height: 95px; margin-top: 0; }
.absorption-core span { bottom: 27px; color: #10261b; font-size: 19px; }
.absorption-orbit { width: 80px; height: 80px; margin: -40px; border-radius: 50%; background: linear-gradient(145deg, #27ee92, #00b95b); box-shadow: 0 0 24px rgba(28,255,142,.7), 0 12px 26px rgba(0,30,18,.34); }
.absorption-orbit span { border: 0; color: #fff; background: transparent; font-size: 17px; letter-spacing: -1px; }
.absorption-orbit span::after { display: none; }
.orbit-one { --start-x: 145px; --start-y: -265px; --start-scale: 1.28; }
.orbit-two { --start-x: 292px; --start-y: 115px; --start-scale: 1.16; }
.orbit-three { --start-x: -620px; --start-y: 120px; --start-scale: 1.24; }
.orbit-four { --start-x: -180px; --start-y: -155px; --start-scale: 1.1; }
.orbit-five { --start-x: -24px; --start-y: -300px; --start-scale: 1.18; }
.orbit-six { --start-x: 22px; --start-y: 305px; --start-scale: 1.1; }
.orbit-seven { --start-x: 345px; --start-y: -25px; --start-scale: 1.2; }
.orbit-eight { --start-x: -585px; --start-y: -145px; --start-scale: 1.14; }
.orbit-nine { --start-x: 194px; --start-y: 265px; --start-scale: 1.24; }
.orbit-ten { --start-x: -138px; --start-y: -264px; --start-scale: 1.14; }
.hero-spark { position: absolute; z-index: 1; width: var(--spark-size, 7px); height: var(--spark-size, 7px); border-radius: 50%; background: #20f486; box-shadow: 0 0 12px 4px rgba(31,255,134,.72); animation: heroSpark 2.8s ease-in-out infinite var(--spark-delay, 0s); }
.spark-one { top: 8%; left: 54%; --spark-size: 8px; --spark-delay: -.4s; }.spark-two { top: 17%; left: 84%; --spark-size: 5px; --spark-delay: -1.7s; }.spark-three { top: 31%; left: 7%; --spark-size: 6px; --spark-delay: -2.1s; }.spark-four { top: 43%; left: 91%; --spark-size: 9px; --spark-delay: -.9s; }.spark-five { top: 58%; left: 13%; --spark-size: 4px; --spark-delay: -2.6s; }.spark-six { top: 70%; left: 78%; --spark-size: 7px; --spark-delay: -1.3s; }.spark-seven { top: 83%; left: 43%; --spark-size: 5px; --spark-delay: -2.3s; }.spark-eight { top: 24%; left: 66%; --spark-size: 4px; --spark-delay: -.1s; }.spark-nine { top: 76%; left: 94%; --spark-size: 6px; --spark-delay: -1.9s; }.spark-ten { top: 49%; left: 27%; --spark-size: 5px; --spark-delay: -.6s; }.spark-eleven { top: 9%; left: 25%; --spark-size: 4px; --spark-delay: -1.1s; }.spark-twelve { top: 92%; left: 63%; --spark-size: 8px; --spark-delay: -2.5s; }
@keyframes heroSpark { 0%,100% { opacity: .18; transform: scale(.45); } 48% { opacity: 1; transform: scale(1.25); } }
.hero-left-sparks { position: absolute; z-index: 2; inset: 122px auto 0 0; width: 48%; pointer-events: none; }
.hero-left-sparks i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #20f486; box-shadow: 0 0 12px 4px rgba(31,255,134,.58); animation: heroSpark 3.1s ease-in-out infinite; }
.hero-left-sparks i:nth-child(1) { top: 18%; left: 7%; animation-delay: -.5s; }.hero-left-sparks i:nth-child(2) { top: 32%; left: 28%; width: 3px; height: 3px; animation-delay: -1.9s; }.hero-left-sparks i:nth-child(3) { top: 46%; left: 8%; width: 7px; height: 7px; animation-delay: -2.6s; }.hero-left-sparks i:nth-child(4) { top: 58%; left: 39%; width: 4px; height: 4px; animation-delay: -1.2s; }.hero-left-sparks i:nth-child(5) { top: 70%; left: 18%; width: 3px; height: 3px; animation-delay: -2.1s; }.hero-left-sparks i:nth-child(6) { top: 25%; left: 46%; width: 6px; height: 6px; animation-delay: -.8s; }.hero-left-sparks i:nth-child(7) { top: 82%; left: 42%; animation-delay: -1.6s; }.hero-left-sparks i:nth-child(8) { top: 12%; left: 37%; width: 3px; height: 3px; animation-delay: -2.8s; }
.hero-absorption > p { right: 46px; bottom: 7px; color: rgba(220,255,236,.8); }
.hero-contrast { display: grid; grid-template-columns: 260px 2px minmax(0, 1fr); gap: 20px; align-items: center; width: min(900px, calc(100vw - 80px)); max-width: none; margin-top: 62px; }
.hero-contrast .hero-lead { margin: 0; font-size: 17px; line-height: 1.8; }
.hero-contrast .hero-lead strong { white-space: nowrap; }
.hero-contrast .hero-sub { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.85; white-space: nowrap; }
.mobile-break { display: none; }
.hero-divider { display: block; width: 2px; height: 112px; background: linear-gradient(transparent, rgba(255,255,255,.95) 20%, rgba(107,255,182,.9) 52%, rgba(255,255,255,.95) 80%, transparent); box-shadow: 0 0 16px rgba(117,255,189,.7); }
.hero-cta-float { position: absolute; right: 40px; bottom: 28px; z-index: 4; }

/* Video */
.protections { padding: 18px 20px 14px; position: relative; z-index: 3; overflow: hidden; color: #0c6848; background: #fff; text-align: center; }
.protections > p { margin: 0 0 8px; font-weight: 700; }
.protection-viewport { width: min(950px, 100%); margin-inline: auto; overflow: hidden; }
.protection-items { display: flex; width: max-content; gap: 0; border: 1px solid rgba(12,104,72,.2); border-radius: 8px; overflow: hidden; animation: protection-scroll 24s linear infinite; }
.protection-items span { display: flex; width: 188px; min-height: 100px; flex-direction: column; flex-shrink: 0; gap: 7px; align-items: center; justify-content: center; padding: 10px 7px; border-right: 1px solid rgba(12,104,72,.16); background: #f1fbf5; font-weight: 700; }
.protection-items span:last-child { border-right: 1px solid rgba(12,104,72,.16); }
.protection-items b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 6px; color: #fff; background: #0c6848; font-size: 18px; }
.protection-items svg { width: 26px; height: 26px; }
@keyframes protection-scroll { to { transform: translateX(-50%); } }
.video-section { padding: 36px 20px; color: #fff; background: linear-gradient(135deg, #0c6848, #07533a); }
.video-inner { max-width: 640px; margin: 0 auto; }
.video-title { margin: 0 0 20px; font-size: clamp(18px, 4vw, 24px); font-weight: 900; text-align: center; }
.video-preview {
  display: block;
  width: min(66vw, 280px);
  margin-inline: auto;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 6px solid #07533a;
  border-radius: 24px;
  background: #000;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.video-preview video { width: 100%; aspect-ratio: 440 / 960; object-fit: cover; }
.tap-label { position: absolute; z-index: 2; left: 50%; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; transform: translateX(-50%); border-radius: 4rem; color: #fff; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tap-label svg { flex: 0 0 auto; }

/* Problems */
.problems { padding: 48px 0 34px; background: var(--green-mist); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.problem-card { min-height: 100%; padding: 24px 20px 22px; text-align: center; border: 1px solid rgba(20,125,83,.22); border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: 0 12px 28px rgba(7,82,54,.07); }
.problem-card h3 { min-height: 58px; margin: 0 0 18px; font-size: 17px; line-height: 1.55; font-weight: 900; }
.problem-card h3 em { color: #ec3f36; font-style: normal; }
.problem-card img { display: block; width: 160px; height: 160px; margin: 0 auto; object-fit: contain; border-radius: 22px; background: #053f2f; box-shadow: 0 10px 20px rgba(4,74,52,.16); }
.problem-card p { margin: 18px 0 0; color: #555; font-size: 14px; line-height: 1.8; text-align: left; }
.problem-carousel-dots { display: none; }
.problem-carousel-arrow { display: none; }
.solve-arrow { max-width: 680px; margin: 30px auto 0; padding: 18px 28px 14px; border: 1px solid rgba(10,128,78,.28); border-radius: 16px; color: var(--green); background: linear-gradient(135deg,#f6fffa,#e4faee); box-shadow: 0 14px 30px rgba(6,90,57,.10); font-size: clamp(20px,3vw,28px); font-weight: 950; letter-spacing: .02em; text-align: center; }
.solve-arrow span { display: block; margin-top: 4px; font-size: 30px; line-height: 1; }

/* Mechanism */
.mechanism { padding: 48px 0; background: #fff; }
.mechanism-title { white-space: nowrap; }
.mechanism-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 42px 0 32px; }
.mechanism-card { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; border: 2px solid rgba(12, 104, 72, .25); border-radius: 14px; background: var(--green-mist); text-align: center; }
.mechanism-art { width: 148px; flex-shrink: 0; }
.mechanism-art svg { display: block; width: 100%; height: auto; }
.channel-hub-art { position: relative; width: 164px; height: 116px; }
.lone-channel-mark { position: absolute; z-index: 2; top: 31px; left: 54px; display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border: 2px solid #0c6848; border-radius: 14px; background: #fff; box-shadow: 0 5px 12px rgba(12,104,72,.16); }
.lone-channel-mark img { width: 50px; height: 50px; object-fit: contain; mix-blend-mode: multiply; }
.channel { position: absolute; z-index: 2; display: grid; min-width: 38px; height: 21px; padding: 0 4px; place-items: center; border-radius: 6px; color: #fff; font-size: 7px; font-weight: 900; letter-spacing: -.2px; line-height: 1; }
.channel.line { top: 0; left: 3px; background: #06c755; }
.channel.telegram { top: 0; right: 0; background: #229ed9; }
.channel.whatsapp { bottom: 0; left: 1px; background: #25d366; }
.channel.wechat { bottom: 0; right: 0; background: #19a844; }
.channel.kakao { right: 0; top: 48px; background: #f6df00; color: #3a3000; }
.channel-arrow { position: absolute; z-index: 1; color: #0c6848; font-size: 19px; font-weight: 900; line-height: 1; }
.channel-arrow.a1 { top: 24px; left: 41px; transform: rotate(26deg); }
.channel-arrow.a2 { top: 24px; right: 39px; transform: rotate(25deg); }
.channel-arrow.a3 { bottom: 23px; left: 40px; transform: rotate(25deg); }
.channel-arrow.a4 { top: 50px; right: 39px; }
.channel-arrow.a5 { bottom: 24px; right: 39px; transform: rotate(25deg); }
.mechanism-card h3 { margin: 0 0 6px; color: #010101; font-size: 15px; line-height: 1.4; font-weight: 900; }
.mechanism-card h3 span { display: inline-block; }
.mechanism-card p { margin: 0; color: #555; font-size: 13px; line-height: 1.7; }
/* Unified L-ONE control-system icon tiles. */
.mechanism-card { gap: 15px; padding: 26px 20px; border: 1px solid rgba(54, 209, 139, .32); border-radius: 16px; background: linear-gradient(145deg, #fff 0%, #f5fffa 100%); box-shadow: 0 16px 28px rgba(6,90,57,.06); }
.mechanism-art { position: relative; display: grid; width: 148px; height: 148px; place-items: center; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 18%, #167b59 0%, #07543d 53%, #023525 100%); box-shadow: 0 18px 0 -10px rgba(46,244,156,.4), 0 17px 28px rgba(6,126,75,.25); }
.mechanism-art::after { position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(83,255,179,.35), transparent 47%); content: ""; pointer-events: none; }
.mechanism-art svg { position: relative; z-index: 1; width: 78%; filter: brightness(0) invert(91%) sepia(78%) saturate(650%) hue-rotate(82deg) brightness(111%) contrast(102%); }
.channel-hub-art { width: 148px; height: 148px; }
.lone-channel-mark { top: 45px; left: 45px; border: 1px solid rgba(168,255,211,.75); background: linear-gradient(145deg, #eefff6, #8ff0bd); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.channel { min-width: 32px; height: 32px; padding: 0; border: 1px solid rgba(228,255,241,.54); border-radius: 50%; color: #fff !important; background: rgba(255,255,255,.13) !important; box-shadow: 0 0 12px rgba(97,255,181,.35); font-size: 5.5px; }
.channel.line { top: 12px; left: 14px; }.channel.telegram { top: 10px; right: 14px; }.channel.whatsapp { bottom: 13px; left: 12px; }.channel.wechat { bottom: 11px; right: 13px; }.channel.kakao { top: 58px; right: auto; left: 5px; }
.channel-arrow { color: #a7ffd0; font-size: 14px; text-shadow: 0 0 8px rgba(72,255,161,.7); }.channel-arrow.a1 { top: 38px; left: 43px; }.channel-arrow.a2 { top: 38px; right: 43px; }.channel-arrow.a3 { bottom: 38px; left: 43px; }.channel-arrow.a4 { top: 66px; right: 39px; }.channel-arrow.a5 { bottom: 37px; right: 43px; }
@media (max-width: 700px) {
  .mechanism-card { gap: 14px; padding: 14px 16px; }
  .mechanism-art, .channel-hub-art { width: 82px; height: 82px; border-radius: 13px; }
  .lone-channel-mark { top: 24px; left: 24px; width: 34px; height: 34px; border-radius: 9px; }
  .lone-channel-mark img { width: 25px; height: 25px; }
  .channel { min-width: 18px; height: 18px; font-size: 3px; }
  .channel.line { top: 6px; left: 7px; }.channel.telegram { top: 5px; right: 7px; }.channel.whatsapp { bottom: 6px; left: 6px; }.channel.wechat { bottom: 5px; right: 7px; }.channel.kakao { top: 32px; left: 2px; }
  .channel-arrow { font-size: 9px; }.channel-arrow.a1 { top: 20px; left: 24px; }.channel-arrow.a2 { top: 20px; right: 24px; }.channel-arrow.a3 { bottom: 20px; left: 24px; }.channel-arrow.a4 { top: 36px; right: 20px; }.channel-arrow.a5 { bottom: 19px; right: 24px; }
}
.migration-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 22px; padding: 28px; border-radius: var(--radius); background: var(--green-mist); }
.migration-flow figure { position: relative; margin: 0; text-align: center; }
.migration-flow img { height: 320px; margin-inline: auto; border-radius: 12px; box-shadow: var(--shadow); }
.migration-flow img.recovery-step-image { width: 100%; max-width: 190px; height: auto; display: block; }
.migration-flow figure:not(:last-child)::after { content: "→"; position: absolute; top: 42%; right: -18px; z-index: 1; color: var(--green); font-size: 24px; font-weight: 900; }
.migration-flow figcaption { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.6; }
.migration-flow figcaption span { display: grid; width: 23px; height: 23px; margin: 0 auto 6px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.migration-flow figcaption strong { display: block; font-size: 14px; }
.migration-flow figcaption small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.flow-arrow { color: var(--green); font-size: 24px; font-weight: 900; text-align: center; }
.chat-compare { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; }
.compare-card { min-height: 220px; padding: 24px; border: 1px solid #ddd; border-radius: 12px; }
.compare-card.good { border: 2px solid var(--green); background: #f3fff8; }
.compare-icon { display: inline-flex; padding: 3px 10px; border-radius: 7px; color: #fff; background: #777; font-size: 12px; font-weight: 900; }
.good .compare-icon { background: var(--green); }
.compare-card h4 { margin: 14px 0 8px; font-size: 16px; }
.good h4 { color: var(--green); }
.compare-card p { margin: 0; color: #555; font-size: 14px; }
.versus { font-size: 14px; font-weight: 900; text-align: center; }
.triple-defense { margin-top: 28px; padding: 24px; border-radius: 12px; color: #fff; background: #111; text-align: center; }
.triple-defense strong { color: #42e483; font-size: 20px; }

/* Future */
.future { padding: 48px 0; background: #fff; }
.future-story { margin-top: 36px; padding: 34px; border-radius: 18px; background: var(--green-mist); }
.story-label { display: inline-block; margin-bottom: 16px; padding: 5px 14px; border-radius: 999px; color: #fff; background: var(--green); font-size: 13px; font-weight: 900; }
.story-two .story-label { display: table; margin-inline: auto; text-align: center; }
.future-story h3 { margin: 0 0 30px; font-size: 28px; line-height: 1.6; font-weight: 900; text-align: center; }
.future-story h3 em { color: var(--green); font-style: normal; border-bottom: 6px solid #b8efd0; }
.journey-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.journey { padding: 26px; border-radius: 14px; background: #fff; text-align: center; }
.journey h4 { margin: 0 0 18px; font-size: 17px; }
.journey.old h4 { color: #777; }
.journey.new { border: 2px solid var(--green); }
.journey.new h4 { color: var(--green); }
.journey p { margin: 3px 0; font-weight: 700; }
.journey > span { color: #aaa; font-weight: 900; }
.journey strong { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ddd; }
.journey strong b { font-size: 30px; }
.journey.old strong b { color: #e64c43; }
.journey.new strong b { color: var(--green); }
.journey small { display: block; color: #777; }
.broadcast { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; border-radius: 10px; color: #fff; background: var(--green); font-weight: 900; }
.broadcast img { width: 32px; border-radius: 8px; }
.future-message { margin: 32px 0 0; font-size: 19px; line-height: 2; text-align: center; }
.future-message strong, .future-message em { color: var(--green); font-style: normal; font-weight: 900; }
.future-story.story-one { padding: 0; overflow: hidden; border: 2px solid var(--green); border-radius: 24px; background: linear-gradient(135deg, #f4faf7 0%, #dff0e7 100%); box-shadow: 0 4px 24px rgba(12, 104, 72, .12); }
.story-one-head { padding: 36px clamp(16px, 4.5vw, 32px) 0; text-align: center; }
.story-one .story-label { margin: 0 0 16px; padding: 6px 18px; border: 1.5px solid var(--green); color: var(--green); background: #fff; font-size: clamp(13px, 2.4vw, 15px); }
.future-story.story-one h3 { margin: 0 0 24px; color: #010101; font-weight: 900; line-height: 1; }
.story-question { display: block; font-size: clamp(18px, 5vw, 32px); line-height: 1.5; }
.story-question br { display: none; }
.story-loss { display: block; margin-top: 10px; font-size: clamp(15px, 3.2vw, 23px); line-height: 1.6; }
.future-story.story-one h3 em { border: 0; color: var(--green); }
.compare-flow { margin-bottom: 0; padding: 0 clamp(14px, 4vw, 32px) clamp(28px, 5vw, 36px); }
.cf-origin { width: fit-content; margin: 0 auto; padding: 14px 32px; border: 1px solid #e5e5e5; border-radius: 999px; background: #fff; text-align: center; }
.cf-sns { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--green); font-size: 13px; font-weight: 900; }
.cf-sns svg { display: block; width: 34px; height: 34px; }
.cf-fork { display: block; width: min(480px, 92%); margin: -2px auto -4px; overflow: visible; }
.cf-cols { display: grid; grid-template-columns: 1fr 1fr; max-width: 760px; margin: 0 auto; gap: 16px; }
.cf-col { display: flex; min-width: 0; flex-direction: column; padding: 20px 20px 22px; border-radius: 14px; }
.cf-col--old { border: 1px solid #ddd; background: #f6f6f6; }
.cf-col--listy { border: 2px solid var(--green); background: #fff; box-shadow: 0 4px 18px rgba(12, 104, 72, .12); }
.cf-badge { align-self: center; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 900; white-space: nowrap; }
.cf-badge--old { background: #555; }
.cf-badge--listy { background: var(--green); }
.cf-steps { color: #555; font-size: 13px; line-height: 1.5; text-align: center; }
.cf-col--listy .cf-steps { color: #333; }
.cf-step-arrow { color: #bbb; font-size: 12px; }
.cf-col--listy .cf-step-arrow { color: var(--green); }
.cf-negative { display: inline-flex; gap: 5px; align-items: center; justify-content: center; color: #b63535; font-weight: 900; }
.cf-negative::before { display: inline-grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #d94a4a; content: "✕"; font-size: 11px; line-height: 1; }
.cf-result { margin-top: auto; padding-top: 10px; border-top: 1px dashed #ccc; text-align: center; }
.cf-col--listy .cf-result { border-top-color: rgba(12, 104, 72, .35); }
.cf-result-label { margin: 0; color: #888; font-size: 10px; font-weight: 700; }
.cf-num { margin: 2px 0; font-size: clamp(26px, 8.5vw, 56px); font-weight: 900; line-height: 1.1; white-space: nowrap; }
.cf-num span { font-size: .35em; }
.cf-num--old { color: #9e9e9e; }
.cf-num--listy { color: var(--green); }
.cf-result-note { margin: 0; color: #e53935; font-size: 10px; font-weight: 700; }
.cf-continue { display: grid; grid-template-columns: 1fr 1fr; max-width: 760px; margin: 0 auto; gap: 16px; align-items: start; }
.cf-ban-next, .cf-next { display: flex; flex-direction: column; align-items: center; }
.cf-ban-card { display: flex; width: 100%; height: 170px; min-height: 170px; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; padding: 14px 12px; border: 1px solid #e3e3e3; border-radius: 14px; color: #555; background: #f8f8f8; box-shadow: 0 4px 18px rgba(0,0,0,.05); text-align: center; }
.cf-ban-card strong { display: block; color: #cf3333; font-size: clamp(30px, 7vw, 46px); font-weight: 950; letter-spacing: .04em; line-height: 1; }
.cf-ban-down { display: block; width: min(180px, 100%); height: 81px; margin: 2px 0 -15px; overflow: visible; }
.cf-ban-card p { margin: 7px 0 3px; color: #333; font-size: clamp(13px, 3vw, 17px); font-weight: 900; line-height: 1.35; }
.cf-ban-card span { color: #777; font-size: 11px; font-weight: 700; }
.cf-down { position: relative; z-index: 1; display: block; width: min(300px, 100%); height: 96px; margin: 2px 0 -28px; overflow: visible; }
.cf-broadcast { display: flex; width: 100%; height: 170px; min-height: 170px; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; padding: 14px 12px; border-radius: 14px; color: #fff; background: var(--green); box-shadow: 0 4px 18px rgba(12, 104, 72, .25); text-align: center; }
.cf-broadcast-icon { display: block; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 14px; object-fit: contain; box-shadow: 0 0 0 4px #fff; }
.cf-broadcast-title { margin: 0; font-size: clamp(14px, 3.8vw, 18px); font-weight: 900; line-height: 1.3; }
.cf-broadcast-desc { margin: 2px 0 0; opacity: .92; font-size: 13px; font-weight: 700; }
.cf-punch { max-width: 760px; margin: 14px auto 0; color: #010101; font-size: clamp(14px, 3.6vw, 19px); font-weight: 900; line-height: 1.9; text-align: center; }
.cf-punch strong { color: var(--green); }
.story-two > p { max-width: 760px; margin: 0 auto 28px; color: #444; }
.future-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.future-lists > div { padding: 24px; border-radius: 14px; background: #fff; }
.future-lists h4 { margin: 0 0 14px; font-size: 17px; }
.future-lists ul { margin: 0; padding: 0; list-style: none; }
.future-lists li { position: relative; margin: 11px 0; padding-left: 34px; }
.without li::before, .with li::before { position: absolute; top: 1px; left: 0; display: grid; width: 18px; height: 18px; place-items: center; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 3px; background: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
.without li::before { content: "✕"; color: #e64c43; }
.with { border: 2px solid var(--green); }
.with h4 { color: var(--green); }
.with li::before { content: "✓"; color: var(--green); }
.example-panel { margin-top: 36px; padding: 34px 34px 28px; border-radius: 18px; color: #fff; background: #111; text-align: center; }
.example-panel h3 { margin: 0 0 24px; font-size: 24px; line-height: 1.55; }
.sample-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: hidden; border-radius: 12px; }
.sample-grid img { width: 100%; height: 390px; object-fit: cover; }
.example-panel small { display: block; margin-top: 8px; color: #aaa; }
.example-panel p { margin: 16px 0 0; }

/* One-step QR switch */
.use-cases { padding: 48px 0; background: #fff; text-align: center; }
.qr-switch-visual { display: flex; max-width: 610px; gap: 28px; align-items: center; justify-content: center; margin: 32px auto 16px; }
.qr-card { display: grid; gap: 12px; width: 190px; padding: 18px; border: 1px solid #d8e3dc; border-radius: 16px; background: #f8fbf9; color: #55665c; font-size: 12px; font-weight: 800; }
.qr-card i { position: relative; display: grid; width: 112px; height: 112px; place-items: center; margin: auto; overflow: hidden; background: #fff center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cg fill='%2314231a'%3E%3Cpath d='M3 3h28v28H3zm6 6v16h16V9zM69 3h28v28H69zm6 6v16h16V9zM3 69h28v28H3zm6 6v16h16V75z' fill-rule='evenodd'/%3E%3Cpath d='M38 5h6v6h-6zm9 0h6v6h-6zm9 0h6v6h-6zm-18 9h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm-27 9h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm-27 15h6v6h-6zm9 0h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm9 0h6v6h-6zm9 0h6v6h-6zm-45 9h6v6h-6zm18 0h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm-45 9h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm-45 9h6v6h-6zm18 0h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm9 0h6v6h-6zm-45 9h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm9 0h6v6h-6zm18 0h6v6h-6zm-45 9h6v6h-6zm36 0h6v6h-6z'/%3E%3C/g%3E%3C/svg%3E"); box-shadow: inset 0 0 0 7px #fff; }
.qr-card.is-lone { border-color: #43bd7c; background: #effbf4; color: #0c6848; box-shadow: 0 10px 22px rgba(8,126,73,.1); }
.qr-card.is-lone i { background-color: #fff; }
.qr-card i { background-image: url("assets/qr-dummy.png"); background-size: 100% 100%; }
.qr-code img { display: none; }
.qr-code span { position: absolute; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; box-sizing: border-box; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #06c755; box-shadow: 0 2px 8px rgba(0,0,0,.24); font-size: 9px; font-style: normal; font-weight: 950; line-height: 1; }
.qr-code--lone span { width: 42px; background: #0c6848; font-size: 8px; }
.qr-card strong { color: #0c6848; font-size: 12px; }
.qr-switch-visual > b { color: #0c6848; font-size: 34px; }
.qr-switch-note { margin: 0; color: #52665b; font-size: 14px; font-weight: 700; }
.usecase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 34px; }
.usecase-grid article { padding: 24px 18px; border: 1px solid #dce8e1; border-radius: 14px; background: #fff; box-shadow: 0 8px 26px rgba(0,80,37,.06); }
.usecase-grid .emoji { font-size: 29px; }
.usecase-grid h3 { margin: 8px 0 14px; font-size: 17px; }
.usecase-grid ul { margin: 0; padding: 0; list-style: none; color: #555; font-size: 13px; }
.usecase-grid li { position: relative; margin: 10px 0; padding-left: 18px; }
.usecase-grid li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }

/* Step delivery */
.step-delivery { padding: 48px 0; background: #fff; }
.step-lead { max-width: 800px; margin: 26px auto 30px; padding: 22px 28px; border-radius: 12px; background: var(--green-mist); font-weight: 800; text-align: center; }
.step-lead strong { color: var(--green); }
.timeline { display: grid; max-width: 820px; margin-inline: auto; position: relative; gap: 12px; }
.timeline::before { display: none; }
.timeline article { display: grid; grid-template-columns: 130px 1fr; gap: 20px; min-height: 118px; align-items: center; padding: 18px 22px; border: 1px solid #d5e6dd; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(0,74,34,.05); }
.timeline-badge { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.timeline-badge b { display: grid; width: 65px; height: 65px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 21px; }
.timeline-badge span { font-size: 12px; font-weight: 900; }
.timeline h3 { margin: 0 0 4px; font-size: 17px; }
.timeline p { margin: 0; color: #666; }
.mini-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.mini-features article { padding: 24px; border-radius: 14px; background: var(--green-mist); }
.mini-features article > div { font-size: 27px; }
.mini-features h4 { margin: 8px 0; font-size: 16px; }
.mini-features p { margin: 0; color: #555; font-size: 13px; }
.dashboard-shot { margin: 38px 0 0; }
.dashboard-shot img { width: 100%; border-radius: 14px; border: 1px solid #dce6e0; box-shadow: var(--shadow); }
.dashboard-shot figcaption { max-width: 760px; margin: 14px auto 0; color: #666; font-size: 13px; text-align: center; }

/* Features */
.features { padding: 48px 0; background: var(--green-mist); }
.features-label { margin: 8px 0 16px; color: #0c6848; font-size: clamp(26px, 4.8vw, 48px); font-weight: 900; letter-spacing: -.04em; line-height: 1.25; text-align: center; }
.features .section-title { margin-top: 8px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-grid article { overflow: hidden; border: 1px solid #e1e7e4; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0, 74, 34, .05); }
.feature-image { height: 145px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid #e5e8e6; background: #f7faf8; }
.feature-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feature-image--logo { background: #fff; }
.feature-image--logo img { object-fit: contain; object-position: center; padding: 12px 29%; }
.official-equals-visual { display: grid; grid-template-columns: 72px 38px 72px; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lone-symbol { display: block; width: 72px; height: 72px; background: url('assets/lone-logo-mark.png') center / 110px 110px no-repeat; }
.official-account-symbol { display: block; width: 72px; height: 72px; transform: translateX(8px); background: url('assets/line-official-account-symbol.png') center / 278px auto no-repeat; }
.official-equals-visual span { display: grid; width: 38px; height: 72px; place-items: center; color: #086c43; font-size: 33px; font-weight: 800; line-height: 1; }
.feature-image--messaging img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.feature-image--ai { background: #effaf3; }
.feature-image--ai img { object-fit: contain; object-position: center; }
.feature-image--distribution img { object-fit: contain; object-position: center; }
.feature-image--webchat { background: #fff; }
.feature-image--webchat img { object-fit: contain; object-position: center; }
.feature-image--translation { background: #f6fcf8; }
.feature-image--translation img { object-fit: contain; object-position: center; }
.feature-image--mypage { background: #0b1110; }
.feature-image--mypage img { object-fit: contain; object-position: center; }
.feature-grid h3 { margin: 18px 20px 8px; font-size: 16px; }
.feature-grid p { margin: 0 20px 22px; color: #555; font-size: 13px; }
.more-button { display: block; min-width: 390px; margin: 28px auto 0; padding: 15px 28px; border: 2px solid var(--green); border-radius: 999px; color: var(--green); background: transparent; font-weight: 900; cursor: pointer; }
.more-button span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.more-button[aria-expanded="true"] span { transform: rotate(180deg); }
.extra-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 24px; }
.extra-features[hidden] { display: none; }
.extra-features article { padding: 18px; border: 1px solid #e2e8e4; border-radius: 12px; background: #fff; }
.extra-features article span { font-size: 23px; }
.extra-features article .extra-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #91caaa; border-radius: 9px; color: #0c6848; background: #effaf4; font-family: Arial, sans-serif; font-size: 19px; font-weight: 900; line-height: 1; }
.extra-features h4 { margin: 6px 0 4px; font-size: 15px; }
.extra-features p { margin: 0; color: #666; font-size: 12px; }
.special-features { margin-top: 30px; padding: 36px 32px; border-radius: 18px; background: var(--green-pale); }
.special-features > h3 { margin: 0 0 28px; font-size: 24px; text-align: center; }
.special-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.special-grid article { padding: 24px; border-radius: 13px; background: #fff; }
.special-grid article > div { font-size: 26px; }
.special-grid h4 { margin: 8px 0; font-size: 16px; }
.special-grid p { margin: 0; color: #555; font-size: 13px; }

/* User voices */
.story-section { padding: 58px 0; overflow: hidden; background: var(--green-mist); }
.voices-marquee { width: 100vw; margin: 34px calc(50% - 50vw) 0; overflow: hidden; }
.voices-track { display: flex; width: max-content; gap: 20px; padding: 4px 10px; animation: voices-scroll 28s linear infinite; }
.voices-track:hover { animation-play-state: paused; }
.voices-track article { display: flex; width: min(390px, calc(100vw - 52px)); min-height: 210px; flex-direction: column; padding: 26px; border: 1px solid #d8e7df; border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(0,74,34,.07); }
.voices-track article > span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.voices-track p { margin: 16px 0; color: #333; font-size: 15px; line-height: 1.85; font-weight: 700; }
.voices-track strong { margin-top: auto; padding-top: 12px; border-top: 1px solid #e5e5e5; color: #617168; font-size: 12px; }
@keyframes voices-scroll { to { transform: translateX(calc(-50% - 10px)); } }

/* Who L-ONE is for */
.for-you-section { padding: 72px 0; background: #fff; }
.for-you-section .container.wide { width: min(1100px, calc(100% - 40px)); }
.for-you-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 34px; }
.for-you-grid article { position: relative; min-height: 266px; padding: 21px 17px; overflow: hidden; border: 1px solid rgba(12,104,72,.45); border-radius: 12px; background: linear-gradient(135deg, #effaf4, #fff); box-shadow: 0 8px 22px rgba(0,74,34,.05); }
.for-you-grid article::after { position: absolute; right: -18px; bottom: -30px; width: 84px; height: 84px; border: 14px solid rgba(12,104,72,.07); border-radius: 50%; content: ""; }
.for-you-grid span { position: relative; z-index: 1; color: var(--green); font-family: Arial, sans-serif; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.for-you-grid h3 { position: relative; z-index: 1; margin: 18px 0 10px; color: #13231c; font-size: clamp(13px, 1.45vw, 18px); letter-spacing: -.06em; white-space: nowrap; }
.for-you-grid p { position: relative; z-index: 1; margin: 0; color: #52625a; font-size: 12px; line-height: 1.75; }
.for-you-grid ul { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.for-you-grid li { position: relative; margin: 9px 0; padding-left: 17px; color: #43574d; font-size: 12px; line-height: 1.55; }
.for-you-grid li::before { position: absolute; left: 0; color: var(--green); content: "✓"; font-weight: 900; }
.for-you-grid .partner-highlight { color: #c98600; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,.8); }

/* Ownership */
.ownership-section { position: relative; isolation: isolate; overflow: hidden; padding: 74px 0; background: radial-gradient(circle at 88% 15%, #16744d 0, #073d2b 30%, #04271c 68%, #031c14 100%); color: #fff; }
.ownership-lights { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.ownership-lights i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #a4ffcb; box-shadow: 0 0 8px 3px #62ffab, 0 0 22px 8px rgba(40,255,144,.85); animation: ownershipParticle 2.55s ease-in-out infinite; animation-delay: calc(var(--d) * -1s); }
@keyframes ownershipParticle { 0%,100% { opacity: .14; transform: scale(.45); } 25% { opacity: .95; transform: scale(1); } 47% { opacity: .26; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.25); } }
.ownership-section::before, .ownership-section::after { position: absolute; z-index: 0; border-radius: 50%; background: #8cffce; content: ""; filter: brightness(2.1); animation: ownershipSpark 2.9s ease-in-out infinite; pointer-events: none; }
.ownership-section > .container { position: relative; z-index: 1; }
.ownership-section::before { top: 14%; right: 9%; width: 6px; height: 6px; box-shadow: 0 0 24px 9px rgba(42,240,143,.55), -72px -58px 0 -2px rgba(42,240,143,.58), -190px 90px 0 -2px rgba(42,240,143,.75), -275px -38px 0 -1px rgba(42,240,143,.46), -420px 310px 0 -1px rgba(42,240,143,.6), -520px 52px 0 -2px rgba(42,240,143,.42), -720px 118px 0 -2px rgba(42,240,143,.65), -640px 252px 0 -1px rgba(42,240,143,.52), -80px 430px 0 -2px rgba(42,240,143,.75), -235px 400px 0 -1px rgba(42,240,143,.48), -535px 505px 0 -1px rgba(42,240,143,.55), -305px 620px 0 -2px rgba(42,240,143,.5), -800px 390px 0 -1px rgba(42,240,143,.65), -890px 540px 0 -2px rgba(42,240,143,.44); }
.ownership-section::after { bottom: 18%; left: 8%; width: 4px; height: 4px; box-shadow: 0 0 24px 9px rgba(42,240,143,.55), 78px 42px 0 -1px rgba(42,240,143,.48), 180px -80px 0 -1px rgba(42,240,143,.7), 285px 112px 0 -2px rgba(42,240,143,.47), 415px -225px 0 -1px rgba(42,240,143,.6), 510px 36px 0 -1px rgba(42,240,143,.56), 695px -45px 0 -2px rgba(42,240,143,.75), 920px -280px 0 -1px rgba(42,240,143,.55), 370px 230px 0 -2px rgba(42,240,143,.65), 780px 115px 0 -1px rgba(42,240,143,.5), 1020px 185px 0 -2px rgba(42,240,143,.52), 630px 330px 0 -1px rgba(42,240,143,.48); animation-delay: -1.9s; }
@keyframes ownershipSpark { 0%,100% { opacity: .78; } 45% { opacity: 1; } 60% { opacity: .88; } 78% { opacity: 1; } }
.ownership-heading { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.ownership-heading .section-kicker { color: #80f0ae; }
.ownership-heading h2 { margin: 0; color: #fff; font-size: clamp(28px, 4vw, 42px); line-height: 1.35; }
.ownership-heading p { margin: 16px 0 0; color: #c7d9d0; font-size: 15px; }
.ownership-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: 64px; align-items: center; }
.ownership-section .section-title { color: #fff; }
.ownership-copy { max-width: 620px; }
.ownership-all-in { margin: 0 0 18px !important; color: #a7f6c4 !important; font-size: 17px !important; font-weight: 800; line-height: 1.55 !important; letter-spacing: .03em; }
.ownership-all-in strong { display: inline-block; color: #ffe83c; font-size: 31px; letter-spacing: .05em; text-shadow: 0 0 13px rgba(255, 232, 60, .3); }
.ownership-copy p { margin: 0 0 18px; color: #d2d2d2; font-size: 16px; line-height: 1.9; }
.ownership-copy .ownership-lead { margin-top: 26px; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.55; }
.ownership-copy h3 { margin: 0; color: #fff; font-size: 22px; line-height: 1.55; }
.ownership-card { padding: 30px; border: 1px solid rgba(175,255,207,.36); border-radius: 18px; background: linear-gradient(145deg, rgba(13,84,55,.88), rgba(3,42,29,.96)); box-shadow: 0 20px 55px rgba(0,0,0,.27); }
.ownership-mark { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; color: #111; background: #72e79d; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.ownership-card ul { display: grid; gap: 0; margin: 22px 0; padding: 0; list-style: none; }
.ownership-card li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.13); }
.ownership-card li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.ownership-card li b { color: #72e79d; font-size: 12px; letter-spacing: .08em; }
.ownership-card li span { font-size: 15px; font-weight: 800; line-height: 1.45; }
.ownership-card li small { color: #aaa; font-size: 12px; font-weight: 500; }
.ownership-card > p { margin: 0; color: #dadada; font-size: 14px; line-height: 1.8; }
.ownership-card > p strong { color: #fff; font-size: 16px; }

/* Pricing */
.pricing { padding: 48px 0; background: var(--soft-gray); }
.offer-ribbon { width: min(720px, 100%); margin: 34px auto 0; padding: 13px 24px; border-radius: 12px 12px 0 0; color: #fff; background: var(--orange); text-align: center; }
.offer-ribbon span { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 900; }
.offer-ribbon strong { font-size: 19px; }
.zero-fee { width: min(720px, 100%); margin-inline: auto; padding: 28px 34px; border-radius: 14px; background: #fff; text-align: center; }
.zero-fee h3 { margin: 0 0 14px; font-size: 22px; }
.zero-fee h3 em { color: var(--green); font-size: 1.28em; font-style: normal; }
.zero-fee p { margin: 0; color: #555; }
.zero-fee strong { color: var(--green); }
.migration-campaign { display: grid; gap: 7px; margin: 22px auto 0; padding: 23px 18px; border: 2px solid #75dca5; border-radius: 12px; background: linear-gradient(135deg, #effaf4, #d8f8e6); box-shadow: 0 10px 22px rgba(8,126,73,.12); }
.migration-campaign span { color: #287152; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.migration-campaign strong { color: #143e2d; font-size: 26px; line-height: 1.2; }
.migration-campaign strong em { color: var(--green); font-size: 1.34em; font-style: normal; }
.migration-campaign small { color: #62776c; font-size: 10px; }
.delivery-cost { width: min(720px, 100%); margin: 24px auto 0; padding: 27px 34px; border: 1px solid #cce4d5; border-radius: 14px; background: #f7fcf9; text-align: center; }
.delivery-cost .section-kicker { margin-bottom: 8px; color: var(--green); font-size: 10px; }
.delivery-cost h3 { margin: 0 0 12px; font-size: 20px; }
.delivery-cost h3 em { color: var(--green); font-style: normal; }
.delivery-cost p:last-child { margin: 0; color: #52665b; font-size: 13px; line-height: 1.8; }
.delivery-cost p strong { display: block; margin-bottom: 8px; color: #0c6848; font-size: 14px; }
.delivery-zero { display: block; margin: -3px 0 14px; color: #0c6848; font-size: clamp(29px, 4vw, 35px); font-weight: 950; letter-spacing: -.04em; line-height: 1.05; }
.asset-message { margin: 25px 0; font-size: 17px; font-weight: 900; text-align: center; }
.pricing-card { overflow: hidden; border: 2px solid var(--green); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.price-head { display: grid; min-height: 200px; place-content: center; gap: 8px; padding: 26px; color: #fff; background: var(--green); text-align: center; }
.price-head > span { font-size: 15px; font-weight: 900; letter-spacing: .12em; }
.price-head > b { display: inline-block; justify-self: center; padding: 5px 12px; border-radius: 99px; color: #155d43; background: #d9f0e2; font-size: 13px; }
.price-head > .price-position { position: relative; padding: 9px 42px 11px; border-top: 1px solid rgba(199,255,219,.82); border-bottom: 1px solid rgba(199,255,219,.82); border-radius: 0; color: #f2fff6; background: linear-gradient(90deg, transparent, rgba(179,255,207,.17), transparent); box-shadow: none; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 3.8vw, 34px); font-weight: 700; letter-spacing: .18em; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.price-head > .price-position::before { position: absolute; top: 50%; left: 13px; width: 5px; height: 5px; border-radius: 50%; background: #aaf7c5; box-shadow: 0 0 10px #aaf7c5; content: ""; transform: translateY(-50%); }
.price-head > strong { font-size: clamp(50px, 7vw, 72px); line-height: .95; letter-spacing: -.04em; }
.price-head > strong small { font-size: 17px; letter-spacing: 0; }
.price-head p { margin: 5px 0 0; font-size: 13px; font-weight: 700; }
.price-subplans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(720px, calc(100% - 36px)); margin: 20px auto 0; }
.price-subplans > div { display: grid; align-content: start; gap: 5px; padding: 16px; border: 1px solid #cfe3d8; border-radius: 11px; background: #f7fcf9; text-align: center; }
.price-subplans span { color: #24533f; font-size: 13px; font-weight: 900; }
.price-subplans strong { color: var(--green); font-size: 28px; line-height: 1; }
.price-subplans small { font-size: 11px; }
.price-subplans p { margin: 0; color: #617168; font-size: 11px; }
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; padding: 28px 50px 8px; font-size: 13px; }
.included-grid span { color: #444; }
.included-grid span:only-child { grid-column: 1 / -1; text-align: center; }
.included-grid span::first-letter { color: var(--green); }
.pricing-card .button { display: flex; width: min(440px, calc(100% - 40px)); margin: 25px auto 30px; }
.pricing-free-note { margin: 18px auto 0 !important; padding: 12px 18px; border: 1px solid rgba(12,104,72,.22); border-radius: 10px; color: #285644; background: rgba(255,255,255,.7); font-size: 14px; font-weight: 700; text-align: center; }
.pricing-free-note strong { color: var(--green); font-weight: 900; }
.pricing-option { width: min(620px, calc(100% - 40px)); margin: 25px auto 0; padding: 24px 28px 21px; border: 1px solid rgba(12,104,72,.18); border-radius: 14px; background: linear-gradient(135deg, #f5fbf7, #e8f5ec); text-align: center; }
.pricing-option h3 { margin: 0; color: #1b4232; font-size: 20px; }
.pricing-option-price { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 16px; padding: 14px 12px; border-radius: 10px; background: #fff; box-shadow: 0 7px 18px rgba(10,82,55,.07); }
.pricing-option-price span { color: #456557; font-size: 13px; font-weight: 700; text-align: left; }
.pricing-option-price span small { display: inline-block; margin-top: 3px; color: #789187; font-size: 10px; font-weight: 700; }
.pricing-option-price strong { padding: 4px 9px; border-radius: 99px; color: var(--green); background: #e4f5e9; font-size: 12px; white-space: nowrap; }
.pricing-option-price b { color: var(--green); font-size: 24px; letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.pricing-option-price small { margin-left: 3px; color: #587267; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.pricing-option-description { margin: 13px 0 0; color: #60756b; font-size: 12px; line-height: 1.8; text-align: left; }
.pricing-option-description strong { margin-right: 4px; color: #24714f; font-weight: 900; }
.pricing-note { margin: 16px auto 0; color: #777; font-size: 11px; text-align: center; }

/* Flow */
.flow-section { padding: 48px 0; background: #fff; }
.flow-list { display: grid; width: min(650px, 100%); margin: 28px auto 0; gap: 14px; }
.flow-list article { display: grid; grid-template-columns: 58px 1fr; gap: 18px; min-height: 106px; padding: 18px; position: relative; border: 1px solid #d5e6dd; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(0,74,34,.05); }
.flow-list article:not(:last-child)::before { content: ""; position: absolute; z-index: 0; left: 44px; top: calc(100% - 2px); height: 18px; width: 2px; background: #caefda; }
.flow-list article > span { position: relative; z-index: 1; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-weight: 900; }
.flow-list h3 { margin: 3px 0 4px; font-size: 16px; }
.flow-list p { margin: 0; color: #666; font-size: 13px; }

/* FAQ */
.faq { padding: 64px 0; background: #fff; }
.faq-list { margin-top: 28px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; min-height: 72px; padding: 16px 44px 16px 0; position: relative; font-weight: 900; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 10px; color: var(--green); font-size: 24px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary span { margin-right: 6px; }
.faq details p { margin: 0 0 20px; padding: 17px 22px; border-radius: 10px; color: #555; background: var(--green-mist); }
.faq details p span { color: var(--green); font-weight: 900; }

/* Contact and footer */
.contact { padding: 48px 0; background: var(--green-pale); text-align: center; }
.contact > .container > p { color: #555; }
.contact-card { width: min(475px, 100%); margin: 28px auto 0; padding: 35px 32px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.contact-card h3 { margin: 0; font-size: 21px; }
.contact-card p { color: #666; }
.contact-card .button { width: 100%; min-height: 64px; margin-top: 10px; border-radius: 12px; }
.site-footer { padding: 40px 0; background: #fff; }
.terms-page { min-height: 100vh; padding-top: 62px; background: #f5f8f6; }
.terms-hero { padding: 78px 0 58px; color: #fff; background: linear-gradient(135deg, #073d2b, #0b8051); text-align: center; }
.terms-hero .section-kicker { color: #a8f7c8; }
.terms-hero h1 { margin: 10px 0 12px; font-size: clamp(34px, 5vw, 54px); }
.terms-hero p { margin: 0; color: #d8efe2; }
.terms-content { max-width: 900px; margin-top: 28px; padding: 58px 50px 72px; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(0,54,31,.08); }
.terms-content #terms-body > p, .terms-content section p { color: #4c5952; line-height: 2; white-space: pre-line; }
.terms-content #terms-body > p { margin: 0; padding: 16px 0; }
.terms-content section { padding: 25px 0 8px; border-bottom: 1px solid #dfe8e2; }
.terms-content h1 { margin: 0 0 18px; color: #123526; font-size: clamp(26px, 4vw, 36px); }
.terms-content h2 { margin: 0 0 10px; color: #123526; font-size: 19px; }
.terms-content section p { margin: 0; }
.terms-date { margin: 34px 0 22px; color: #74827b; line-height: 1.8; }
.terms-back { display: inline-flex; }
.footer-inner { display: flex; align-items: center; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #14231a; }
.footer-brand img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.footer-brand strong { font-family: Arial, sans-serif; font-size: 28px; font-weight: 900; letter-spacing: .03em; }
.footer-inner p { margin: 0; color: #777; font-size: 11px; line-height: 1.7; }
.footer-inner nav { display: flex; gap: 22px; margin-left: auto; color: #555; font-size: 12px; }
.footer-inner a:hover { color: var(--green); }
.mobile-sticky-cta { display: none; }

/* Video modal */
.video-modal { position: fixed; inset: 0; z-index: 100; padding: 50px 24px; background: rgba(0,0,0,.87); }
.video-modal[hidden] { display: none; }
.video-modal-inner { display: grid; height: 100%; place-items: center; }
.video-modal video { width: min(1100px, 100%); max-height: calc(100vh - 100px); border-radius: 12px; background: #000; }
.video-close { position: absolute; right: 20px; top: 12px; border: 0; color: #fff; background: transparent; font-size: 38px; cursor: pointer; }

@media (max-width: 900px) {
  .desktop-nav { gap: 18px; }
  .hero-phones { right: -12%; opacity: .78; }
  .hero::after { background: linear-gradient(90deg, rgba(26,118,88,1) 0%, rgba(26,118,88,.96) 50%, rgba(26,118,88,.15) 100%); }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .lone-site section { padding:72px 20px; }.lone-hero { padding-top:112px!important; }.lone-hero-grid,.split,.compare-diagram,.before-after>div,.plans>div { grid-template-columns:1fr; gap:28px; }.lone-hero h1 { font-size:40px; }.lone-site h2 { font-size:34px; }.dashboard-mock { margin-top:8px; }.problem-list,.feature-cards { grid-template-columns:1fr; }.problem-list article { padding:18px; }.hub { grid-template-columns:repeat(2,1fr); }.hub b { grid-column:1/3; grid-row:auto; }.onboarding ol { grid-template-columns:1fr; }.onboarding li { grid-template-columns:58px 1fr; align-items:center; }.plans .featured { transform:none; }.hero-actions { align-items:flex-start; flex-direction:column; }.button-outline { margin:12px 0 0; }
  html { scroll-padding-top: 66px; }
  body { font-size: 14px; padding-bottom: 68px; }
  .container, .container.wide, .container.narrow { width: min(100% - 32px, 560px); }
  .section-title { font-size: 26px; line-height: 1.5; }
  .section-intro { margin-bottom: 26px; }
  .site-header { top: 0; width: 100%; height: 48px; border-radius: 0; }
  .header-inner { width: calc(100% - 28px); }
  .brand { gap: 5px; }
  .brand img { width: 30px; height: 30px; }
  .brand strong { font-size: 21px; }
  .desktop-nav { display: none; }
  .header-cta { padding: 10px 20px; font-size: 12px; }

  .hero { padding-top: 48px; }
  .hero::after { background: linear-gradient(180deg, rgba(0,30,20,.28) 0%, rgba(0,30,20,.46) 54%, rgba(0,30,20,.68) 91%); }
  .hero-inner { width: 100%; min-height: 630px; padding: 50px 20px 34px; }
  .hero-copy { width: 100%; }
  .lowest-label { gap: 11px; margin-bottom: 20px; font-size: 18px; }
  .lowest-label::before { width: 3px; height: 28px; }
  .hero h1 { font-size: 32px; line-height: 1.3; letter-spacing: -.02em; }
  .hero-contrast { grid-template-columns: 1fr; gap: 14px; width: 100%; margin-top: 32px; }
  .hero-contrast .hero-lead, .hero-contrast .hero-sub { font-size: 14px; white-space: normal; }
  .mobile-break { display: block; }
  .hero-divider { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 20%, rgba(107,255,182,.9) 52%, rgba(255,255,255,.95) 80%, transparent); }
  .hero-cta-float { position: static; width: fit-content; margin: 40px 0 0; }
  .hero-offer { position: relative; right: auto; bottom: auto; width: min(100%, 360px); height: 66px; margin: 24px 0 12px; }
  .hero-offer::before, .hero-offer::after { top: -18px; }
  .hero-offer::before { left: 35px; }
  .hero-offer::after { right: 40px; }
  .hero-offer strong { font-size: 20px; }
  .hero-offer strong span:first-child { margin-right: 4px; font-size: 19px; }
  .hero-offer strong span:last-child { margin-left: 4px; font-size: 20px; }
  .hero-offer strong b { font-size: 68px; }
  .hero .button { min-width: 270px; min-height: 56px; }
  .hero-cta-float { display: flex; width: 270px; margin: 12px auto 0; }
  .presented-by { margin-top: 25px; font-size: 15px; }
  .hero-absorption { top: 86px; right: -88px; width: 340px; height: 340px; opacity: .78; transform: scale(.82); transform-origin: top right; }
  .absorption-core { top: 76px; left: 76px; width: 188px; height: 188px; }

  .video-section { padding: 36px 20px; }
  .protection-viewport { width: calc(100% + 40px); margin-left: -20px; }
  .protection-items span { width: 130px; min-height: 90px; padding: 8px 3px; font-size: 10px; line-height: 1.35; }
  .protection-items b { width: 32px; height: 32px; font-size: 15px; }

  .problems, .mechanism, .future, .use-cases, .step-delivery, .features, .story-section, .for-you-section, .ownership-section, .pricing, .flow-section, .contact { padding: 54px 0; }
  .problem-grid, .mechanism-grid, .journey-compare, .future-lists, .mini-features, .special-grid, .story-cards, .included-grid { grid-template-columns: 1fr; }
  .problem-carousel-wrap { position: relative; }
  .problem-grid { display: flex; gap: 12px; margin-top: 28px; padding: 2px 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
  .problem-grid::-webkit-scrollbar { display: none; }
  .problem-card { flex: 0 0 min(84vw, 310px); max-width: none; min-height: 100%; margin-inline: 0; scroll-snap-align: start; }
  .problem-card h3 { min-height: 0; }
  .problem-card p { text-align: center; }
  .problem-carousel-dots { display: flex; justify-content: center; gap: 8px; margin: 2px 0 20px; }
  .problem-carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #a8cbbb; cursor: pointer; transition: width .2s ease, background .2s ease; }
  .problem-carousel-dots button[aria-current="true"] { width: 24px; background: var(--green); }
  .problem-carousel-arrow { display: grid; position: absolute; z-index: 2; top: 50%; width: 34px; height: 54px; place-items: center; padding: 0; border: 1px solid rgba(11, 101, 71, .18); border-radius: 12px; color: #08714b; background: rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(4,80,53,.14); line-height: 0; transform: translateY(-50%); cursor: pointer; backdrop-filter: blur(6px); }
  .problem-carousel-arrow svg { display: block; width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
  .problem-carousel-arrow--prev { left: -10px; }
  .problem-carousel-arrow--next { right: -10px; }
  .mechanism-grid { gap: 10px; }
  .mechanism-title { white-space: normal; }
  .mechanism-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
  .mechanism-art { width: 82px; }
  .channel-hub-art { width: 104px; height: 82px; }
  .lone-channel-mark { top: 21px; left: 34px; width: 39px; height: 39px; border-radius: 10px; }
  .lone-channel-mark img { width: 35px; height: 35px; }
  .channel { min-width: 27px; height: 15px; padding: 0 2px; border-radius: 4px; font-size: 5px; }
  .channel.kakao { top: 34px; }
  .channel-arrow { font-size: 12px; }
  .channel-arrow.a1 { top: 17px; left: 26px; }
  .channel-arrow.a2 { top: 17px; right: 24px; }
  .channel-arrow.a3 { bottom: 16px; left: 25px; }
  .channel-arrow.a4 { top: 35px; right: 24px; }
  .channel-arrow.a5 { bottom: 16px; right: 24px; }
  .mechanism-card h3 { margin-bottom: 4px; font-size: 14px; }
  .mechanism-card p { font-size: 12px; }
  .migration-flow { grid-template-columns: 1fr; padding: 24px 12px; }
  .migration-flow img { height: 300px; }
  .migration-flow img.recovery-step-image { max-width: 220px; }
  .migration-flow figure:not(:last-child)::after { top: auto; right: auto; bottom: -31px; left: calc(50% - 8px); transform: rotate(90deg); }
  .flow-arrow { transform: rotate(90deg); }
  .chat-compare { grid-template-columns: 1fr; gap: 12px; }
  .versus { margin: -5px 0; }
  .triple-defense { text-align: center; }

  .future-story { padding: 26px 18px; }
  .future-story h3 { font-size: 21px; text-align: left; }
  .future-story h3 br { display: none; }
  .future-story.story-two h3 { text-align: center; }
  .future-story.story-two h3 br { display: block; }
  .story-two .story-label { display: table; margin-inline: auto; text-align: center; }
  .future-story.story-one h3 { text-align: center; }
  .future-story.story-one h3 br { display: block; }
  .story-one-head { padding: 30px 16px 0; }
  .compare-flow { padding-inline: 14px; }
  .cf-origin { padding: 12px 26px; }
  .cf-cols, .cf-continue { gap: 10px; }
  .cf-col { padding: 14px 12px 16px; }
  .cf-badge { font-size: 11px; }
  .cf-steps { font-size: 11px; }
  .cf-step-arrow { font-size: 10px; }
  .cf-ban-card span, .cf-broadcast-desc { font-size: 10px; }
  .future-message { font-size: 16px; text-align: left; }
  .sample-grid { grid-template-columns: 1fr 1fr; }
  .sample-grid img { height: 245px; }
  .example-panel { padding: 28px 16px 24px; }
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase-grid article { padding: 22px; }
  .for-you-grid { grid-template-columns: 1fr; gap: 10px; }
  .for-you-grid article { min-height: 0; padding: 20px 18px; }
  .for-you-grid h3 { margin: 13px 0 7px; font-size: 16px; }
  .for-you-grid p { font-size: 11px; }
  .for-you-grid li { font-size: 11px; }
  .ownership-heading { margin-bottom: 32px; }
  .ownership-heading h2 { font-size: 28px; }

  .step-lead { padding: 20px; text-align: left; }
  .timeline::before { left: 25px; }
  .timeline article { grid-template-columns: 105px 1fr; gap: 13px; min-height: 150px; }
  .timeline-badge { gap: 8px; }
  .timeline-badge b { width: 52px; height: 52px; }
  .timeline-badge span { max-width: 42px; }
  .mini-features { gap: 12px; }
  .dashboard-shot img { border-radius: 8px; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { max-width: 340px; margin-inline: auto; }
  .feature-image { height: 170px; }
  .more-button { min-width: 0; width: 100%; padding-inline: 12px; font-size: 13px; }
  .extra-features { grid-template-columns: 1fr 1fr; }
  .qr-switch-visual { gap: 11px; }.qr-card { width: 132px; padding: 13px 8px; }.qr-card i { width: 82px; height: 82px; }.qr-switch-visual > b { font-size: 24px; }.qr-switch-note { padding-inline: 16px; font-size: 13px; }
  .special-features { padding: 32px 18px; }
  .special-features > h3 { font-size: 21px; }

  .story-cards article { min-height: 0; }
  .ownership-inner { grid-template-columns: 1fr; gap: 30px; }
  .ownership-all-in strong { font-size: 27px; }
  .ownership-copy .ownership-lead { font-size: 18px; }
  .ownership-card { padding: 24px 20px; }
  .price-head { padding: 23px 14px; }
  .price-head > strong { font-size: 52px; }
  .price-subplans > div { grid-template-rows: auto 34px auto; }
  .price-subplans strong { display: flex; align-items: flex-end; justify-content: center; min-height: 34px; }
  .price-subplans strong small { display: block; margin: 0 0 3px 4px; line-height: 1; }
  .included-grid { padding: 24px; }
  .pricing-free-note { padding: 11px 14px; font-size: 13px; }
  .pricing-option { width: calc(100% - 32px); padding: 20px 14px 17px; }
  .pricing-option h3 { font-size: 19px; }
  .pricing-option-price { grid-template-columns: 1fr; gap: 6px; padding: 14px; text-align: center; }
  .pricing-option-price span, .pricing-option-price b { text-align: center; }
  .pricing-option-price b { font-size: 25px; }
  .pricing-option-description { font-size: 11px; text-align: center; }
  .zero-fee, .delivery-cost { padding: 24px 18px; }
  .zero-fee h3 { font-size: 19px; }
  .migration-campaign strong { font-size: 18px; }

  .faq { padding: 58px 0; }
  .faq summary { min-height: 72px; padding-right: 35px; line-height: 1.55; }
  .faq details p { padding: 16px; }
  .contact-card { padding: 30px 20px; }
  .site-footer { padding: 32px 0; }
  .footer-inner { flex-wrap: wrap; }
  .footer-inner nav { flex-basis: 100%; margin-left: 0; }
  .mobile-sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .protection-items { animation: none; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 30px; }
  .hero-lead { font-size: 13px; }
  .hero-sub { font-size: 13px; }
  .extra-features { grid-template-columns: 1fr; }
  .section-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* MECHANISM: four consistent control-system tiles */
.mechanism-image-board { max-width: 920px; margin: 40px auto 32px; overflow: hidden; border: 1px solid rgba(54, 209, 139, .25); border-radius: 22px; background: #f8fffb; box-shadow: 0 20px 42px rgba(6, 90, 57, .10); }
.mechanism-image-board img { display: block; width: 100%; height: auto; }
.mechanism-grid { display: none; }
.mechanism-grid { align-items: stretch; }
.mechanism-card { min-height: 312px; justify-content: flex-start; }
.mechanism-art svg { width: 100%; height: 100%; filter: none; }
.mechanism-line { fill: none; stroke: #9cfdc6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mechanism-node { fill: #0e7453; stroke: #b9ffda; stroke-width: 2; }
.mechanism-person { fill: none; stroke: #e0ffed; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mechanism-shield { fill: rgba(86, 240, 163, .12); stroke: #a6ffd0; stroke-width: 3; stroke-linejoin: round; }
.mechanism-alert { fill: #ffcc62; stroke: #fff0c3; stroke-width: 2; }
.mechanism-alert-mark { fill: none; stroke: #60440d; stroke-width: 2.5; stroke-linecap: round; }
.mechanism-window { fill: rgba(195,255,224,.07); stroke: #b9ffda; stroke-width: 2.5; }
.mechanism-dashboard { fill: none; stroke: #a6ffd0; stroke-width: 4; stroke-linecap: round; }
.mechanism-bubble { fill: rgba(184,255,216,.12); stroke: #b9ffda; stroke-width: 2.2; stroke-linejoin: round; }
.mechanism-center { fill: #d8ffea; stroke: #8ff7bb; stroke-width: 3; }
.mechanism-lmark { fill: #07533d; }

@media (max-width: 700px) {
  .mechanism-image-board { margin: 28px 0 24px; border-radius: 14px; }
  .mechanism-card { min-height: 0; flex-direction: column; padding: 20px 16px; text-align: center; }
  .mechanism-art { width: 120px; height: 120px; border-radius: 16px; }
  .mechanism-card h3 { font-size: 15px; }
  .mechanism-card p { font-size: 13px; }
}

/* Four independent image tiles, preserving the exact approved artwork. */
.mechanism-image-board { display: none; }
.mechanism-grid { display: grid; }
.mechanism-art::after,
.mechanism-art svg { display: none; }
.mechanism-art { background-color: #04392c; background-repeat: no-repeat; background-position: center; background-size: cover; border: 1px solid rgba(144,255,198,.28); box-shadow: 0 12px 26px rgba(3,61,44,.30), 0 0 20px rgba(41,233,143,.14); filter: saturate(.82) brightness(.78) contrast(1.08); }
.mechanism-card:nth-child(1) .mechanism-art { background-image: url("assets/mechanism-icon-distribution.png"); }
.mechanism-card:nth-child(2) .mechanism-art { background-image: url("assets/mechanism-icon-protection.png"); }
.mechanism-card:nth-child(3) .mechanism-art { background-image: url("assets/mechanism-icon-rescue.png"); }
.mechanism-card:nth-child(4) .mechanism-art { background-image: url("assets/mechanism-icon-ban-monitor.png"); }

/* Mobile-only carousels for the two MECHANISM groups. */
.mechanism-carousel-dots,
.mechanism-carousel-arrow { display: none; }

@media (max-width: 700px) {
  .mechanism-carousel-wrap { position: relative; }
  .mechanism-grid[data-mobile-carousel],
  .migration-flow[data-mobile-carousel] {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin: 26px 0 0;
    padding: 2px 0 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .mechanism-grid[data-mobile-carousel]::-webkit-scrollbar,
  .migration-flow[data-mobile-carousel]::-webkit-scrollbar { display: none; }
  .mechanism-grid[data-mobile-carousel] .mechanism-card {
    flex: 0 0 min(84vw, 310px);
    min-height: 100%;
    scroll-snap-align: start;
  }
  .mechanism-grid[data-mobile-carousel] .mechanism-art {
    margin-inline: auto;
  }
  .migration-flow[data-mobile-carousel] {
    padding: 2px 0 12px;
    border-radius: 0;
    background: transparent;
  }
  .migration-flow[data-mobile-carousel] figure {
    flex: 0 0 min(84vw, 310px);
    min-height: 100%;
    padding: 18px 14px;
    border-radius: 14px;
    background: var(--green-mist);
    scroll-snap-align: start;
  }
  .migration-flow[data-mobile-carousel] img.recovery-step-image {
    display: block;
    max-width: 220px;
    margin-inline: auto;
  }
  .migration-flow[data-mobile-carousel] figure:not(:last-child)::after { display: none; }
  .mechanism-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 3px 0 22px;
  }
  .mechanism-carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #a8cbbb;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
  }
  .mechanism-carousel-dots button[aria-current="true"] { width: 24px; background: var(--green); }
  .mechanism-carousel-arrow {
    display: grid;
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 34px;
    height: 54px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(11, 101, 71, .18);
    border-radius: 12px;
    color: #08714b;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 20px rgba(4,80,53,.14);
    line-height: 0;
    transform: translateY(-50%);
    cursor: pointer;
    backdrop-filter: blur(6px);
  }
  .mechanism-carousel-arrow svg {
    display: block;
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mechanism-carousel-arrow--prev { left: -10px; }
  .mechanism-carousel-arrow--next { right: -10px; }
}