/* NEMORIA — design language */
:root {
  /* brand tokens: logo-horizontal-color.png (#001838 navy, #0038a8 blue, #0098b0 cyan, #e8f8f8 mist) + nemophila blue-violet */
  --nemo: #1f6fd1;
  --nemo-d: #0038a8;
  --cyan: #0098b0;
  --violet: #5b5bd6;
  --sky: #d9ecf6;
  --mist: #e8f8f8;
  --paper: #f8fbfd;
  --ink: #001838;
  --ink2: #3d4d66;
  --ink3: #5b6880;
  --line: rgba(0, 56, 168, .14);
  --night: #061a33;
  --night2: #0d2a52;
  --ok: #1f8a6a;
  --warn: #b5476a;
  --r: 18px;
  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --num: "Manrope", "Noto Sans JP", system-ui, sans-serif;
  --grad: linear-gradient(120deg, var(--cyan), var(--nemo-d) 55%, var(--violet));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: var(--nemo-d); }
button, input, select { font: inherit; }
.num { font-family: var(--num); font-feature-settings: "tnum"; letter-spacing: .01em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }

/* header */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px; display: flex; align-items: center; transition: background .3s, box-shadow .3s; }
.hd.solid, .hd.sub { background: rgba(249, 251, 255, .86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.hd .wrap { display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo img { height: 30px; width: auto; }
.logo b { font-family: var(--num); font-weight: 700; letter-spacing: .3em; font-size: 15px; }
.hd.over:not(.solid) .logo, .hd.over:not(.solid) nav a { color: var(--ink); }
.hd.over:not(.solid) .logo { opacity: 0; pointer-events: none; transition: opacity .3s; }
.hd nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.hd nav a { text-decoration: none; color: var(--ink2); font-size: 14px; font-weight: 500; }
.hd nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--nemo); }
.hd nav a.cta { color: #fff !important; background: var(--grad); padding: 8px 16px; border-radius: 999px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; width: 40px; height: 40px; color: inherit; }
.hd.over:not(.solid) .menu-btn { color: var(--ink); }

/* rail: the day's route */
.rail { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; opacity: 0; transition: opacity .4s; }
.rail.on { opacity: 1; }
.rail::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(var(--nemo), var(--violet)); opacity: .35; }
.rail a { position: relative; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink3); font-family: var(--num); font-size: 11px; height: 10px; }
.rail a i { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1.5px solid var(--nemo); flex: none; transition: transform .3s, background .3s; }
.rail a span { opacity: 0; transform: translateX(-4px); transition: .3s; white-space: nowrap; }
.rail a.act i { background: var(--nemo); transform: scale(1.35); box-shadow: 0 0 0 5px rgba(75, 127, 230, .15); }
.rail a.act span, .rail:hover a span { opacity: 1; transform: none; color: var(--ink2); }
.rail.dark a.act span, .rail.dark:hover a span { color: #c8d3ff; }
.pbar { position: fixed; top: 64px; left: 0; height: 2px; background: var(--grad); z-index: 49; width: 0; }

/* hero */
.hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #8aa6d8; }
.hero .ph { position: absolute; inset: 0; background: url(img/hero-road.jpg) center 62% / cover no-repeat; transform: scale(1.04); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.1) translate(-1.5%, -1%); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 80, .35) 0%, rgba(30, 50, 120, .05) 40%, rgba(17, 24, 52, .55) 100%); }
.hero svg.trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.trace .t-path { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 4 7; opacity: .85; }
.trace .t-dot { fill: #fff; }
.trace .t-ring { fill: none; stroke: #fff; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ring 3s ease-out infinite; }
@keyframes ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.trace text { fill: #fff; font-family: var(--num); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: rgba(17, 24, 52, .35); stroke-width: 3px; }
.hero .in { position: relative; z-index: 2; padding: 0 0 clamp(48px, 9vh, 96px); width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.hero .brand { display: flex; align-items: center; gap: 14px; font-family: var(--num); font-weight: 700; letter-spacing: .42em; font-size: clamp(18px, 1.6vw, 22px); margin: 0 0 18px; }
.hero .brand svg { width: 34px; height: 34px; }
.hero h1 { margin: 0; font-size: clamp(30px, 4.3vw, 58px); font-weight: 700; line-height: 1.32; letter-spacing: .04em; text-shadow: 0 2px 30px rgba(17, 24, 52, .35); }
.hero .acts { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; }
.btn.pri { background: #fff; color: var(--ink); }
.btn.grad { background: var(--grad); color: #fff; }
.btn.gh { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.btn.ln { background: #fff; color: var(--nemo-d); box-shadow: inset 0 0 0 1.5px var(--nemo); }
.hero .wind { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: repeating-linear-gradient(100deg, transparent 0 120px, rgba(255, 255, 255, .05) 120px 121px); animation: wind 9s linear infinite; mix-blend-mode: screen; }
@keyframes wind { to { background-position: 480px 0; } }

/* chapters */
.ch { position: relative; padding: clamp(72px, 9vw, 120px) 0; }
.ch.tight { padding: clamp(56px, 6vw, 84px) 0; }
.ch.mist { background: linear-gradient(180deg, var(--paper), var(--mist)); }
.ch.sky { background: radial-gradient(1000px 500px at 85% 0%, rgba(108, 99, 227, .12), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(75, 127, 230, .12), transparent 60%), #fff; }
.ch.night { background: radial-gradient(1100px 600px at 80% 0%, rgba(91, 91, 214, .32), transparent 60%), linear-gradient(180deg, var(--night) 0%, var(--night2) 100%); color: #e9eeff; }
.ch.dawn { background: linear-gradient(180deg, var(--night2) 0%, #1d4a80 9%, #b7dcee 26%, var(--paper) 52%); color: var(--ink); padding-top: 150px; }
.stamp { display: inline-flex; align-items: center; gap: 10px; font-family: var(--num); font-weight: 700; color: var(--nemo-d); font-size: 14px; letter-spacing: .08em; margin-bottom: 14px; }
.stamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--nemo); box-shadow: 0 0 0 4px rgba(75, 127, 230, .18); }
.night .stamp, .night .stamp i { color: #a9b8ff; }
.night .stamp i { background: #a9b8ff; box-shadow: 0 0 0 4px rgba(169, 184, 255, .2); }
.h2 { margin: 0 0 10px; font-size: clamp(26px, 3.1vw, 42px); line-height: 1.35; font-weight: 700; letter-spacing: .03em; }
.h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.night .h2 em { background: linear-gradient(120deg, #9fb7ff, #c3b9ff); -webkit-background-clip: text; background-clip: text; }
.lede { margin: 0; color: var(--ink2); font-size: 16px; }
.night .lede { color: #b8c3ea; }
.head2 { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 36px; }
.spec { margin-top: 28px; font-size: 13px; color: var(--ink2); }
.spec summary { cursor: pointer; color: var(--nemo-d); font-weight: 500; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.spec summary::before { content: "＋"; font-family: var(--num); }
.spec[open] summary::before { content: "−"; }
.spec dl { display: grid; grid-template-columns: 7em 1fr; gap: 4px 14px; margin: 12px 0 0; padding: 14px 16px; background: rgba(255, 255, 255, .7); border-radius: 12px; border: 1px solid var(--line); }
.spec dt { color: var(--ink3); }
.spec dd { margin: 0; }
.night .spec summary { color: #a9b8ff; }
.night .spec dl { background: rgba(255, 255, 255, .06); border-color: rgba(169, 184, 255, .2); }
.night .spec dt { color: #8f9cd0; }
.more { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--nemo-d); }
.more::after { content: "→"; font-family: var(--num); }
.night .more { color: #b6c4ff; }

/* surfaces */
.glass { background: rgba(255, 255, 255, .78); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px); box-shadow: 0 20px 60px -30px rgba(47, 95, 200, .35); }
.night .glass { background: rgba(255, 255, 255, .06); border-color: rgba(169, 184, 255, .18); box-shadow: none; }
.photo { border-radius: var(--r); overflow: hidden; position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--nemo-d); white-space: nowrap; }
.tag.v { background: #ece9ff; color: #5048c8; }
.tag.g { background: #e5f4ee; color: var(--ok); }
.tag.r { background: #fbe9ef; color: var(--warn); }
.tag.n { background: #eef0f6; color: var(--ink2); }
.ex { font-size: 11px; color: var(--ink3); letter-spacing: .06em; }
.night .ex { color: #8f9cd0; }

/* phone */
.phone { width: 270px; border-radius: 36px; padding: 10px; background: #0f1530; box-shadow: 0 30px 80px -30px rgba(17, 24, 52, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.phone .scr { border-radius: 28px; background: #fff; color: var(--ink); min-height: 470px; overflow: hidden; position: relative; font-size: 13px; }
.phone .bar { display: flex; justify-content: space-between; padding: 10px 18px 6px; font-family: var(--num); font-size: 11px; font-weight: 700; }
.phone .ttl { padding: 4px 16px 10px; font-weight: 700; font-size: 14px; border-bottom: 1px solid #eef1f8; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f1f3f9; gap: 10px; }
.row span { color: var(--ink2); }
.row b { font-family: var(--num); }
.rv b { transition: color .3s; }
.rv:not(.done) b { color: #c2c8db; }
.slotbar { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; }
.slot { font-family: var(--num); font-weight: 700; font-size: 13px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--nemo); color: var(--nemo-d); background: #fff; transition: .35s; }
.slot.off { border-color: #e2e6f0; color: #c2c8db; text-decoration: line-through; }
.slot.pick { background: var(--grad); color: #fff; border-color: transparent; }
.done-badge { margin: 14px 16px; padding: 12px; border-radius: 14px; background: var(--grad); color: #fff; font-weight: 700; text-align: center; opacity: 0; transform: translateY(6px); transition: .4s; }
.done-badge.on { opacity: 1; transform: none; }

/* lanes: phone vs page */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.lane.lose h3 { color: var(--warn); }
.lane.win h3 { color: var(--nemo-d); }
.lane.lose .track::before { background: repeating-linear-gradient(90deg, rgba(181, 71, 106, .4) 0 6px, transparent 6px 12px); }
.lane.win .track::before { background: var(--grad); opacity: .5; }
.ev.lost { background: #b5476a; color: #fff; border-color: transparent; font-weight: 700; }
.ev.lost small { color: rgba(255, 255, 255, .8); }
.lane.lose .ev:nth-child(3) { margin-left: auto; }
.lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 0 18px; }
.lane + .lane { margin-top: 26px; }
.lane h3 { margin: 0; font-size: 14px; color: var(--ink2); font-weight: 700; }
.track { position: relative; height: 62px; display: flex; align-items: center; gap: 8px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.ev { position: relative; z-index: 1; padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: .45s; white-space: nowrap; }
.ev small { display: block; font-family: var(--num); color: var(--ink3); font-size: 11px; }
.ev.bad { border-color: rgba(181, 71, 106, .35); color: var(--warn); }
.ev.good { background: var(--grad); color: #fff; border-color: transparent; }
.ev.good small { color: rgba(255, 255, 255, .8); }
.ev.on { opacity: 1; transform: none; }

/* night scrubber */
.nightgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: stretch; }
.scene { position: relative; border-radius: var(--r); overflow: hidden; min-height: 460px; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s; }
.scene .who { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.scene .who span { background: rgba(14, 20, 48, .62); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; backdrop-filter: blur(6px); width: max-content; }
.scene .who span b { font-family: var(--num); margin-right: 6px; }
.scene .note { position: absolute; right: 16px; bottom: 16px; z-index: 2; background: #fff; color: var(--ink); border-radius: 16px; padding: 12px 14px; width: 250px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(10px); transition: .5s; }
.scene .note.on { opacity: 1; transform: none; }
.scene .note b { font-family: var(--num); }
.scrub { margin-top: 18px; }
.scrub input { width: 100%; accent-color: #a9b8ff; }
.scrub .marks { display: flex; justify-content: space-between; font-family: var(--num); font-size: 12px; color: #9aa7da; }
.clock { font-family: var(--num); font-weight: 700; font-size: 44px; letter-spacing: .02em; line-height: 1; }
.night .phone .scr { min-height: 440px; }

/* calculator */
.calc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; overflow: hidden; }
.calc .in { padding: 34px; }
.calc .out { padding: 34px; background: linear-gradient(160deg, #001838, #0038a8 60%, #4f55c9); color: #fff; position: relative; }
.fld { margin-bottom: 26px; }
.fld label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 14px; }
.fld label output { font-family: var(--num); font-size: 26px; color: var(--ink); }
.fld input[type=range] { width: 100%; accent-color: var(--nemo); margin-top: 6px; }
.fld .hint { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); font-family: var(--num); }
.big { font-family: var(--num); font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.out .k { font-size: 13px; color: #c5cffb; margin-top: 18px; }
.out .k:first-child { margin-top: 0; }
.out .yr { font-family: var(--num); color: #c5cffb; font-size: 13px; }
.vs { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.vs select { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; padding: 6px 10px; }
.vs select option { color: var(--ink); }
.meter { grid-column: 1 / -1; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; position: relative; margin-top: 6px; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 99px; transition: width .5s; }
.meter u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #ffd27a; transition: left .5s; }
.foot-note { font-size: 12px; color: #aab6ea; margin-top: 16px; }

/* compare */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cmp .col { padding: 26px; border-radius: var(--r); position: relative; }
.cmp .col.gen { background: #f2f3f8; }
.cmp .col.nem { background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(47, 95, 200, .55); }
.cmp h3 { margin: 0 0 4px; font-size: 18px; }
.cmp .req { font-size: 13px; color: var(--ink2); margin-bottom: 16px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px dashed var(--line); }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps li { position: relative; padding: 9px 0 9px 30px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; opacity: .25; transition: opacity .4s; }
.steps li::before { content: ""; position: absolute; left: 7px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink3); }
.steps li::after { content: ""; position: absolute; left: 11.5px; top: 27px; bottom: -9px; width: 1px; background: #d6dbea; }
.steps li:last-child::after { display: none; }
.steps li.on { opacity: 1; }
.steps li b { font-family: var(--num); }
.nem .steps li::before { border-color: var(--nemo); }
.nem .steps li.on::before { background: var(--nemo); }
.gen .steps li .later { color: var(--warn); font-size: 12px; font-weight: 700; }
.cmp .end { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; opacity: 0; transition: .5s; }
.cmp .end.on { opacity: 1; }
.gen .end { background: #fff; color: var(--warn); }
.nem .end { background: var(--grad); color: #fff; }
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.verdict div { padding: 20px 24px; border-radius: var(--r); }
.verdict .a { background: #f2f3f8; }
.verdict .b { background: var(--grad); color: #fff; }
.verdict b { display: block; font-size: 20px; margin-bottom: 4px; }

/* estimate builder */
.est { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; margin-bottom: 10px; cursor: pointer; transition: .2s; }
.opt:hover { border-color: var(--nemo); }
.opt input { accent-color: var(--nemo); width: 18px; height: 18px; }
.opt .l { display: flex; gap: 12px; align-items: center; }
.opt .p { font-family: var(--num); font-weight: 700; color: var(--ink2); font-size: 14px; }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; }
.receipt { padding: 22px; }
.receipt .ln { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.receipt .ln span { color: var(--ink2); }
.receipt .tot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.receipt .tot b { font-family: var(--num); font-size: 32px; }
.dur { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; }
.dur .barw { flex: 1; height: 10px; border-radius: 99px; background: var(--mist); position: relative; overflow: hidden; }
.dur .barw i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad); border-radius: 99px; transition: width .4s; }

/* maps */
.mapbox { position: relative; border-radius: var(--r); overflow: hidden; background: #eaf0fb; }
.mapbox svg { display: block; width: 100%; height: auto; }
.m-land { fill: #f4f7fd; }
.m-water { fill: #cfe0fa; }
.m-road { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.m-road2 { fill: none; stroke: #dfe6f4; stroke-width: 2.5; }
.m-block { fill: #e6ecf8; }
.m-park { fill: #dcefe6; }
.m-lbl { font-size: 12px; fill: var(--ink3); font-family: var(--sans); }
.m-route { fill: none; stroke: url(#rg); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .2, 1); }
.on .m-route, .m-route.on { stroke-dashoffset: 0; }
.pin { transition: transform .9s cubic-bezier(.5, 0, .2, 1); }
.chain { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 18px; }
.chain div { padding: 12px 10px; border-top: 3px solid var(--sky); font-size: 12px; color: var(--ink3); transition: .4s; }
.chain div b { display: block; font-family: var(--num); font-size: 18px; color: var(--ink); margin-top: 2px; transition: .4s; }
.chain div.chg { border-top-color: var(--violet); }
.chain div.chg b { color: var(--violet); }
.toggle { display: inline-flex; background: var(--mist); border-radius: 999px; padding: 4px; gap: 4px; }
.toggle button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ink2); cursor: pointer; }
.toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -6px rgba(47, 95, 200, .5); }

/* 128 */
.km { display: grid; grid-template-columns: .85fr 1.15fr; gap: 26px; align-items: stretch; }
.cal { padding: 20px; }
.cal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cal td, .cal th { padding: 7px 8px; border-bottom: 1px solid #eef1f8; text-align: left; }
.cal th { color: var(--ink3); font-weight: 500; font-family: var(--num); width: 64px; }
.cal .busy { color: var(--ink2); background: #f2f3f8; border-radius: 8px; }
.cal .free { color: var(--nemo-d); font-weight: 700; }
.cal .free.x { color: #c2c8db; text-decoration: line-through; }
.cal .gapnote { color: var(--warn); font-size: 12px; font-weight: 700; }

/* nap / day bars */
.day { position: relative; padding: 18px 0 8px; }
.day .axis { display: flex; justify-content: space-between; font-family: var(--num); font-size: 11px; color: var(--ink3); margin-top: 6px; }
.lanebar { position: relative; height: 46px; background: #f1f4fb; border-radius: 12px; overflow: hidden; margin-top: 10px; }
.blk { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; transition: left .8s cubic-bezier(.5, 0, .2, 1), width .8s cubic-bezier(.5, 0, .2, 1), opacity .5s; white-space: nowrap; overflow: hidden; }
.blk.job { background: var(--grad); }
.blk.mv { background: #c9d6f5; color: var(--nemo-d); }
.blk.nap { background: repeating-linear-gradient(45deg, #fde7ee, #fde7ee 6px, #fff 6px, #fff 12px); color: var(--warn); }
.blk.newj { background: linear-gradient(120deg, #2f8f6a, #4b7fe6); }
.blk.maybe { background: transparent; border: 2px dashed var(--violet); color: var(--violet); }
.count { display: flex; gap: 18px; align-items: baseline; margin-top: 16px; flex-wrap: wrap; }
.count .big { color: var(--ink); }

/* demo */
.demo { display: grid; grid-template-columns: 330px 1fr; gap: 30px; align-items: start; }
.demo-guide ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.demo-guide li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.demo-guide li::before { content: counter(s); font-family: var(--num); font-weight: 800; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--nemo-d); font-size: 12px; flex: none; }
.demo-guide li span { color: var(--ink3); font-size: 12px; display: block; }
.demo-frame { position: relative; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 90px -45px rgba(47, 95, 200, .6); height: 760px; }
.demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-cover { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(600px 400px at 50% 40%, rgba(108, 99, 227, .14), transparent), linear-gradient(180deg, #fff, var(--mist)); padding: 30px; }
.demo-frame.cov { height: auto; }
.demo-frame.cov .demo-cover { position: relative; inset: auto; padding: 34px 26px 30px; }
.demo-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 26px; }
.demo-shots figure { margin: 0; }
.demo-shots img { width: 100%; height: auto; border-radius: 16px; border: 5px solid #001838; box-shadow: 0 24px 40px -24px rgba(0, 24, 56, .55); background: #fff; }
.demo-shots figure:nth-child(even) { transform: translateY(18px); }
.demo-shots figcaption { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink2); line-height: 1.45; }
.demo-shots figure:nth-child(even) figcaption { margin-top: 10px; }
.demo-cover .safe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

/* origin */
.origin { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; }
.origin .photo { aspect-ratio: 4 / 3; }
.hot { position: absolute; transform: translate(-50%, -50%); background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); white-space: nowrap; transition: .6s cubic-bezier(.5, 0, .2, 1); }
.hot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); margin-right: 6px; vertical-align: middle; }
.origin.merge .hot { left: 50% !important; top: 50% !important; opacity: 0; }
.origin .unify { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: .6s .4s; background: #fff; border-radius: 18px; padding: 16px 18px; width: 240px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.origin.merge .unify { opacity: 1; transform: translate(-50%, -50%); }
.born { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 14px; }
.born li { display: flex; gap: 8px; }
.born li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nemo); margin-top: 10px; flex: none; }

/* job flow */
.flow { position: relative; }
.stations { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0; position: relative; margin-bottom: 26px; }
.stations::before { content: ""; position: absolute; left: 5%; right: 5%; top: 17px; height: 2px; background: var(--sky); }
.stations .fillr { position: absolute; left: 5%; top: 17px; height: 2px; background: var(--grad); transition: width .6s; }
.st { position: relative; text-align: center; background: none; border: 0; cursor: pointer; padding: 0 2px; color: var(--ink3); font-size: 12px; font-weight: 700; }
.st i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--sky); margin: 11px auto 10px; transition: .3s; position: relative; z-index: 1; }
.st.past i { border-color: var(--nemo); background: var(--nemo); }
.st.act { color: var(--ink); }
.st.act i { transform: scale(1.5); border-color: var(--violet); background: #fff; box-shadow: 0 0 0 6px rgba(108, 99, 227, .15); }
.stage2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; min-height: 300px; }
.ticket { padding: 22px; position: relative; }
.ticket .hd2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ticket .stt { font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #fff; }
.ticket .ln { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #f0f2f8; }
.ticket .ln span { color: var(--ink2); }
.ticket .ln.new { animation: flash 1.2s ease; }
@keyframes flash { 0% { background: rgba(108, 99, 227, .18); } 100% { background: transparent; } }
.panel-txt h3 { margin: 0 0 6px; font-size: 22px; }
.panel-txt .who { font-size: 13px; color: var(--ink3); margin-bottom: 12px; }
.panel-txt .vis { margin-top: 14px; }

/* trust */
.trust { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; }
.trust .arrow { font-family: var(--num); font-size: 28px; color: var(--violet); }
.promise .ln { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.check { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f2f8; font-size: 14px; }
.check i { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; flex: none; }

/* scope picker */
.scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.scope button { border: 0; background: #fff; padding: 18px 14px; text-align: left; cursor: pointer; border-right: 1px solid var(--line); position: relative; transition: .25s; }
.scope button:last-child { border-right: 0; }
.scope button .q { font-size: 13px; color: var(--ink2); font-weight: 500; display: block; line-height: 1.5; }
.scope button .pl { display: block; font-weight: 700; margin-top: 8px; }
.scope button .pr { font-family: var(--num); font-weight: 800; font-size: 20px; }
.scope button.in { background: linear-gradient(180deg, #f3f6ff, #eaf0ff); }
.scope button.on { background: var(--grad); color: #fff; }
.scope button.on .q { color: rgba(255, 255, 255, .85); }
.payline { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; }
.payline b, .payback b { font-family: var(--num); font-size: 1.25em; }
.payback { margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--mist); color: var(--ink); font-size: 15px; border-left: 3px solid var(--nemo); }
.scope-out { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.incl { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; font-size: 14px; }
.incl li { break-inside: avoid; padding: 4px 0 4px 20px; position: relative; }
.incl li::before { content: "✓"; position: absolute; left: 0; color: var(--nemo); font-weight: 700; }
.incl li.new { font-weight: 700; }
.incl li.new::before { color: var(--violet); }

/* phone soon */
.soon { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink2); padding: 14px 18px; border-radius: 14px; background: #f2f3f8; }

/* footer */
.ft { background: var(--night); color: #c9d2f5; padding: 64px 0 40px; font-size: 14px; }
.ft .top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
.ft h2 { margin: 0 0 10px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; }
.ft a { color: #c9d2f5; text-decoration: none; display: block; padding: 3px 0; }
.ft a:hover { color: #fff; }
.ft .tg { font-size: 18px; color: #fff; font-weight: 700; margin: 14px 0 0; }
.ft .bt { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; color: #8f9cd0; }
.closer { position: relative; overflow: hidden; color: #fff; padding: 110px 0; background: #6d86c9; }
.closer .ph { position: absolute; inset: 0; background: url(img/hero-road.jpg) center 40% / cover; opacity: .9; }
.closer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 24, 52, .7), rgba(17, 24, 52, .1)); }
.closer .wrap { position: relative; z-index: 1; }
.closer h2 { font-size: clamp(26px, 3.2vw, 44px); margin: 0 0 22px; line-height: 1.35; }

/* subpages */
.sub-hero { padding: 120px 0 44px; background: radial-gradient(900px 420px at 90% 0%, rgba(108, 99, 227, .14), transparent 60%), radial-gradient(800px 400px at 0% 0%, rgba(75, 127, 230, .12), transparent 60%), var(--paper); position: relative; overflow: hidden; }
.sub-hero h1 { margin: 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.3; }
.sub-hero .lede { margin-top: 10px; max-width: 760px; }
.crumb { font-size: 12px; color: var(--ink3); margin-bottom: 14px; }
.crumb a { color: var(--ink3); text-decoration: none; }
.sub-hero svg.lines { position: absolute; right: -40px; top: 40px; width: 520px; opacity: .6; pointer-events: none; }

/* feature index */
.finder { position: sticky; top: 64px; z-index: 20; background: rgba(249, 251, 255, .92); backdrop-filter: blur(12px); padding: 14px 0; border-bottom: 1px solid var(--line); }
.finder .wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.finder input { flex: 1 1 280px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 15px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--ink2); }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.stage-sec { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.stage-sec h2 { margin: 0; font-size: 20px; position: sticky; top: 150px; align-self: start; }
.stage-sec h2 small { display: block; font-size: 12px; color: var(--ink3); font-weight: 500; font-family: var(--num); }
.frow { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 16px 0; border-bottom: 1px dashed var(--line); text-decoration: none; color: inherit; }
.frow:last-child { border-bottom: 0; }
.frow:hover h3 { color: var(--nemo-d); }
.frow h3 { margin: 0; font-size: 17px; }
.frow p { margin: 0; color: var(--ink2); font-size: 14px; grid-column: 1; }
.frow .pl { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.frow .cond { font-size: 12px; color: var(--ink3); grid-column: 1; }
.nohit { padding: 40px 0; color: var(--ink3); display: none; }

/* feature detail */
.fd-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fd-top.rev > :first-child { order: 2; }
.fd-vis { min-height: 320px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 40px; }
.facts > div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; color: var(--ink3); font-weight: 700; letter-spacing: .05em; }
.facts dd { margin: 4px 0 0; font-size: 15px; }
.happen { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.happen h2 { font-size: 18px; margin: 0 0 8px; }
.cant { list-style: none; padding: 0; margin: 0; }
.cant li { padding: 8px 0 8px 26px; position: relative; font-size: 14px; border-bottom: 1px dashed var(--line); }
.cant li::before { content: "×"; position: absolute; left: 4px; color: var(--warn); font-weight: 700; }
.cant li.c::before { content: "!"; color: #b98a1b; }
.related { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.related a { text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink); background: #fff; }
.planline { display: flex; gap: 4px; margin-top: 10px; }
.planline span { flex: 1; text-align: center; font-size: 11px; padding: 6px 2px; border-radius: 6px; background: #eef0f6; color: var(--ink3); font-weight: 700; }
.planline span.y { background: var(--grad); color: #fff; }
.planline span.p { background: #e6ebff; color: var(--nemo-d); }
.sect { padding: 26px 0; border-top: 1px solid var(--line); }
.sect h2 { margin: 0 0 6px; font-size: 20px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.matrix th, .matrix td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.matrix th { font-size: 12px; color: var(--ink3); font-weight: 700; }
.matrix td.y { color: var(--ok); font-weight: 700; }
.matrix td.n { color: var(--ink3); }
.matrix td.c { color: #8a6a12; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.plan { padding: 18px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; transition: .3s; }
.plan.on { border-color: transparent; background: var(--grad); color: #fff; transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(75, 127, 230, .9); }
.plan .nm { font-weight: 700; font-size: 14px; }
.plan .pr { font-family: var(--num); font-weight: 800; font-size: 24px; }
.plan .pr small { font-size: 12px; font-weight: 500; }
.plan .ds { font-size: 12px; color: var(--ink2); line-height: 1.5; }
.plan.on .ds { color: rgba(255, 255, 255, .85); }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.ptable { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.ptable th, .ptable td { padding: 10px 10px; border-bottom: 1px solid #eef1f8; text-align: center; }
.ptable th:first-child, .ptable td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 210px; }
.ptable thead th { font-size: 12px; color: var(--ink2); background: #f6f8fd; }
.ptable thead th:first-child { background: #f6f8fd; }
.ptable td.y { color: var(--nemo-d); font-weight: 800; }
.ptable td.n { color: #c8cde0; }
.ptable td.t { font-size: 12px; color: var(--ink2); }
.ptable tr.grp td { background: #f9fafe; font-weight: 700; font-size: 12px; color: var(--ink3); text-align: left; }
.ptable tr.grp td:first-child { background: #f9fafe; }
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.terms > div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.terms h3 { margin: 0 0 6px; font-size: 15px; }
.terms p { margin: 0; font-size: 14px; color: var(--ink2); }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 20px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--grad); opacity: .4; }
.timeline > div { position: relative; padding-top: 44px; padding-right: 14px; font-size: 13px; color: var(--ink2); }
.timeline > div::before { content: ""; position: absolute; top: 15px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--nemo); }
.timeline b { display: block; color: var(--ink); font-size: 15px; }

/* industries */
.ind { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 70px 0; border-bottom: 1px solid var(--line); }
.ind:nth-of-type(even) .photo { order: 2; }
.ind .photo { aspect-ratio: 4 / 3; }
.ind h2 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 32px); }
.dayline { list-style: none; padding: 0; margin: 18px 0; border-left: 2px solid var(--sky); }
.dayline li { position: relative; padding: 6px 0 6px 18px; font-size: 14px; }
.dayline li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--nemo); }
.dayline li b { font-family: var(--num); margin-right: 10px; }
.fixed-before { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; }

/* faq */
.faq-grp { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.faq-grp h2 { margin: 0; font-size: 18px; }
.faq details { border-bottom: 1px dashed var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::after { content: "＋"; color: var(--nemo); }
.faq details[open] summary::after { content: "−"; }
.faq .a { margin-top: 8px; color: var(--ink2); font-size: 15px; }

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
  .stations { grid-template-columns: repeat(5, 1fr); row-gap: 8px; }
  .stations::before, .stations .fillr { display: none; }
}
@media (max-width: 900px) {
  .rail { display: none; }
  .hd nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 10px 24px 20px; gap: 0; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .3); }
  .hd nav a { color: var(--ink) !important; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hd nav a.cta { text-align: center; margin-top: 10px; border: 0; }
  .hd.open nav { display: flex; }
  .menu-btn { display: block; }
  .lanes, .nightgrid, .calc, .cmp, .verdict, .est, .km, .demo, .origin, .stage2, .trust, .scope-out, .fd-top, .happen, .ind, .faq-grp, .stage-sec { grid-template-columns: 1fr; }
  .fd-top.rev > :first-child { order: 0; }
  .ind:nth-of-type(even) .photo { order: 0; }
  .trust .arrow { transform: rotate(90deg); justify-self: center; }
  .head2 { grid-template-columns: 1fr; }
  .scope { grid-template-columns: 1fr; }
  .scope button { border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .scope button .pl { grid-column: 1; margin-top: 2px; }
  .scope button .pr { grid-column: 2; grid-row: 1 / span 2; }
  .chain { grid-template-columns: repeat(3, 1fr); }
  .facts, .terms { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline > div { padding: 0 0 18px 30px; }
  .timeline > div::before { top: 4px; }
  .ft .top { grid-template-columns: 1fr 1fr; }
  .stage-sec h2 { position: static; }
  .incl { columns: 1; }
  .scene { min-height: 360px; }
  .demo-frame { height: 720px; border-radius: 18px; }
  .plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 36px); }
  .lane { grid-template-columns: 1fr; }
  .lane h3 { margin-bottom: 4px; }
  .track { height: auto; flex-wrap: wrap; padding: 6px 0; }
  .track::before { display: none; }
  .phone { width: 100%; max-width: 300px; margin: 0 auto; }
  .calc .in, .calc .out { padding: 22px; }
  .cmp .col { padding: 18px; }
  .stations { grid-template-columns: repeat(5, 1fr); }
  .st { font-size: 10.5px; }
  .facts, .terms { grid-template-columns: 1fr; }
  .scene .note { width: auto; left: 16px; }
  .ft .top { grid-template-columns: 1fr; }
  .born { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 30px; }
  .frow { grid-template-columns: 1fr; }
  .frow .pl { grid-row: auto; grid-column: 1; flex-direction: row; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* detail visual sequencer */
[data-seq] .s1, [data-seq] .s2, [data-seq] .s3, [data-seq] .s4, [data-seq] .s5, [data-seq] .s6 { opacity: 0; transform: translateY(8px); transition: opacity .55s, transform .55s; }
.on-1 .s1, .on-2 .s2, .on-3 .s3, .on-4 .s4, .on-5 .s5, .on-6 .s6 { opacity: 1; transform: none; }
.on-3 .x3, .on-4 .x4, .on-5 .x5 { opacity: .3; text-decoration: line-through; }
.vis { padding: 24px; }
.vline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vline .node { padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.vline .node small { display: block; font-weight: 500; color: var(--ink3); font-size: 11.5px; }
.vline .node.hl { background: var(--grad); color: #fff; border-color: transparent; }
.vline .node.hl small { color: rgba(255, 255, 255, .8); }
.vline .node.off { background: #f4f5f9; color: var(--ink3); }
.vline .arr { color: var(--violet); font-family: var(--num); font-weight: 800; }
.vgrid { display: grid; gap: 10px; }
.vgrid.c2 { grid-template-columns: 1fr 1fr; }
.vgrid.c3 { grid-template-columns: repeat(3, 1fr); }
.mini { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.mini h4 { margin: 0 0 6px; font-size: 13px; }
.mini .ln { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #edf0f7; }
.mini .ln:last-child { border-bottom: 0; }
.mini .ln span { color: var(--ink2); }
.paper { background: #fff; border-radius: 6px; padding: 18px; box-shadow: 0 20px 40px -24px rgba(17, 24, 52, .45); font-size: 12px; position: relative; }
.paper h4 { margin: 0 0 10px; font-size: 15px; letter-spacing: .3em; text-align: center; }
.paper .ln { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f0f2f8; }
.stack { position: relative; height: 280px; }
.stack .paper { position: absolute; width: 62%; }
.bars2 { display: grid; gap: 8px; }
.bars2 .b { display: grid; grid-template-columns: 90px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.bars2 .b i { display: block; height: 12px; border-radius: 99px; background: var(--grad); transition: width .8s; }
.bars2 .b.lo i { background: #e5c0cc; }
.bars2 .b b { font-family: var(--num); text-align: right; }
.calw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calw .cal-col { background: #fff; border-radius: 14px; border: 1px solid var(--line); padding: 10px; font-size: 12px; }
.calw .ev2 { margin: 6px 0; padding: 7px 9px; border-radius: 8px; font-weight: 700; }
.ev2.g { background: #e8f0ff; color: var(--nemo-d); }
.ev2.n { background: var(--grad); color: #fff; }
.ev2.busy { background: #f1f2f7; color: var(--ink2); }
.ev2.x { background: #fff; border: 1.5px dashed #e3b7c5; color: var(--warn); }

/* delay */
[data-delay] .d-a { transition: width 1s cubic-bezier(.5, 0, .2, 1); }
[data-delay] .d-buf { transition: left 1s cubic-bezier(.5, 0, .2, 1), width 1s cubic-bezier(.5, 0, .2, 1); }
[data-delay].late .d-a { width: 55.6% !important; }
[data-delay].late .d-buf { left: 55.6% !important; width: 5.5% !important; }
[data-delay] .d-msg { opacity: 0; transition: opacity .6s .9s; }
[data-delay].late .d-msg { opacity: 1; }
.pin { transition: transform .9s cubic-bezier(.5, 0, .2, 1); }

/* ===== I44 hero: logo → breeze → tagline (one pass) ===== */
.hero2 { position: relative; min-height: min(86svh, 780px); display: grid; place-items: center; overflow: hidden; text-align: center;
  background: radial-gradient(900px 420px at 18% 12%, rgba(0, 152, 176, .16), transparent 60%), radial-gradient(800px 420px at 85% 20%, rgba(91, 91, 214, .16), transparent 60%), linear-gradient(180deg, #f3f9fc 0%, #eaf4fa 55%, #dfeefa 100%); }
.hero2 .land { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: url(img/hero-road.jpg) center 70% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); opacity: .0; animation: landIn 1.6s 1.6s ease forwards; }
.hero2 .in { position: relative; z-index: 2; padding: 96px 24px 170px; }
.hero2 .logo-big { width: min(420px, 74vw); height: auto; margin: 0 auto; opacity: 0; filter: blur(8px); transform: scale(.96); animation: logoIn 1.1s .2s cubic-bezier(.3, .7, .2, 1) forwards; }
.hero2 svg.breeze { display: block; width: min(560px, 86vw); height: 60px; margin: 6px auto 0; overflow: visible; }
.breeze path { fill: none; stroke: url(#bz); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s .9s cubic-bezier(.5, 0, .2, 1) forwards; }
.breeze circle { opacity: 0; animation: fadeIn .4s 2.1s forwards; }
.hero2 h1 { margin: 4px 0 0; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.45; letter-spacing: .08em; font-weight: 700; color: var(--ink); opacity: 0; transform: translateY(10px); animation: up .9s 1.7s ease forwards; }
.hero2 .sub { margin: 14px 0 0; color: var(--ink2); font-size: clamp(14px, 1.2vw, 16px); opacity: 0; animation: fadeIn .8s 2.3s forwards; }
.hero2 .acts { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; opacity: 0; animation: fadeIn .8s 2.5s forwards; }
@keyframes logoIn { to { opacity: 1; filter: none; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes up { to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes landIn { to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .hero2 .logo-big, .hero2 h1, .hero2 .sub, .hero2 .acts, .hero2 .land, .breeze circle { animation: none; opacity: 1; filter: none; transform: none; }
  .hero2 .land { opacity: .9; } .breeze path { animation: none; stroke-dashoffset: 0; }
}

/* manga strip */
.daytl { margin-top: 34px; padding: 22px 24px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.tl-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; }
.tl-row + .tl-row { margin-top: 30px; }
.tl-k { font-size: 13px; font-weight: 700; color: #cfe0f6; }
.tl-bar { position: relative; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.tl-bar.line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, #0098b0, #5b5bd6); opacity: .7; }
.tl-bar .seg { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; border-radius: 8px; white-space: nowrap; overflow: hidden; transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.tl-bar .site { background: #2b4f86; color: #fff; }
.tl-bar .meal { background: #8a6a3a; color: #fff; }
.tl-bar .eve { background: #3c3f78; color: #fff; }
.tl-bar .sleep { background: #18213f; color: #9fb0d8; border: 1px dashed rgba(255, 255, 255, .25); }
.tl-bar .dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #7fd8ea; box-shadow: 0 0 0 5px rgba(127, 216, 234, .2); transform: scale(0); transition: transform .4s; }
.tl-bar .dot small, .tl-bar .dot em { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; }
.tl-bar .dot small { bottom: 18px; font: 600 11px var(--num); color: #9fdcef; }
.tl-bar .dot em { top: 18px; font-size: 11.5px; font-weight: 700; color: #fff; }
.tl-bar .dot.am { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); }
.daytl.on .seg { transform: scaleX(1); }
.daytl.on .dot { transform: scale(1); }
.daytl.on .dot:nth-child(2) { transition-delay: .3s; } .daytl.on .dot:nth-child(3) { transition-delay: .6s; } .daytl.on .dot:nth-child(4) { transition-delay: .9s; }
.tl-bar.line { margin-bottom: 18px; }
.tl-axis { display: flex; justify-content: space-between; margin: 8px 0 0 110px; font: 11px var(--num); color: #8fa3c8; }
.pain { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--warn); }
.manga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.manga figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #001838; }
.manga figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.manga figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 8px 12px; background: linear-gradient(0deg, rgba(0, 24, 56, .85), transparent); color: #fff; font-size: 13px; font-weight: 700; }
.manga figcaption b { font-family: var(--num); margin-right: 8px; }
.manga .x { position: absolute; top: 10px; right: 10px; background: #b5476a; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.after-row { display: grid; grid-template-columns: 1.1fr 300px 1fr; gap: 18px; align-items: center; margin-top: 18px; }
.after-row figure { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px #001838; position: relative; }
.after-row figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.split-label { display: flex; align-items: center; gap: 12px; margin: 30px 0 12px; font-weight: 700; }
.split-label::after { content: ""; flex: 1; height: 1px; background: rgba(169, 184, 255, .3); }
.night .split-label { color: #cfe6ff; }
.chainline { display: flex; align-items: center; gap: 0; margin-top: 14px; font-size: 13px; flex-wrap: wrap; }
.chainline span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
.chainline i { width: 28px; height: 2px; background: var(--grad); }
.chainline span.now { background: var(--grad); color: #fff; border-color: transparent; }
.m-pref { fill: none; stroke: #9fb3d6; stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.m-pref-l { font: 700 15px var(--sans, sans-serif); fill: #8796b8; letter-spacing: .2em; }
.kmtl { margin-top: 40px; }
.kmtl-bar { position: relative; height: 34px; border-radius: 10px; background: #eef2fb; }
.kmtl-bar i { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; border-radius: 10px; white-space: nowrap; overflow: hidden; }
.kmtl-bar .mv { background: linear-gradient(90deg, #0098b0, #0038a8); color: #fff; }
.kmtl-bar .pre { background: #dbe5fb; color: var(--nemo-d); }
.kmtl-bar b { position: absolute; top: -26px; transform: translateX(-50%); font: 700 12px var(--num); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.kmtl-bar b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 30px; background: currentColor; opacity: .6; }
.kmtl-bar .x { color: var(--warn); background: #fbeef2; text-decoration: line-through; }
.kmtl-bar .ok { color: #fff; background: var(--nemo-d); transform: translateX(-100%); }
.kmtl-bar .ok::after { left: auto; right: 0; }
.kmtl-ax { position: relative; height: 18px; margin-top: 6px; font: 11px var(--num); color: var(--ink3); }
.kmtl-ax span { position: absolute; white-space: nowrap; }
.kmres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 16px; border-top: 1px solid var(--line); }
.kmres div { padding: 12px 12px 12px 0; font-size: 12px; color: var(--ink3); }
.kmres b { display: block; font-family: var(--num); font-size: 22px; color: var(--ink); }
.kmres .bad b { color: var(--warn); text-decoration: line-through; }
.nap-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: center; }
.nap-grid figure { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px #001838; }
.seal { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
.seal img { width: 30px; height: 30px; }
/* mock chat / table */
.chat { background: #8cabd8; border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.chat .b { background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; max-width: 90%; }
.chat .h { font-size: 11px; color: #fff; font-weight: 700; }
.chat .btnx { display: block; margin-top: 8px; text-align: center; padding: 7px; border-radius: 10px; background: #06c755; color: #fff; font-weight: 700; }
.mtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border-radius: 12px; overflow: hidden; }
.mtable th, .mtable td { padding: 8px 10px; border-bottom: 1px solid #eef1f6; text-align: left; }
.mtable th { background: #f2f6fa; color: var(--ink3); font-weight: 700; }
.ind-vis { margin-top: 16px; }
.cap-list { columns: 2; column-gap: 28px; list-style: none; padding: 0; margin: 0; font-size: 14px; }
.cap-list li { break-inside: avoid; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cap-list li small { display: block; color: var(--ink3); font-size: 12px; }
@media (max-width: 900px) {
  .manga { grid-template-columns: 1fr 1fr; }
  .after-row, .nap-grid { grid-template-columns: 1fr; }
  .after-row .phone { margin: 0 auto; }
  .cap-list { columns: 1; }
  .kmres { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) { .manga { grid-template-columns: 1fr; } .hero2 .in { padding: 90px 18px 150px; } }
@media (max-width: 900px) {
  .lane.lose .ev:nth-child(3) { margin-left: 0; }
  .demo-shots { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .demo-shots figure:nth-child(even) { transform: none; }
}
@media (max-width: 560px) {
  .daytl { padding: 18px 12px 12px; }
  .tl-row { grid-template-columns: 52px 1fr; gap: 8px; }
  .tl-k { font-size: 11px; line-height: 1.3; }
  .tl-bar .seg { font-size: 10.5px; }
  .tl-bar .dot small { font-size: 9.5px; }
  .tl-bar .dot em { font-size: 10.5px; }
  .tl-axis { margin-left: 60px; font-size: 9.5px; }
  .kmtl-bar i { font-size: 11px; }
  .m-pref-l { font-size: 18px; }
  .demo-frame.cov .demo-cover { padding: 22px 14px 24px; }
}
/* ===== I49 ===== */
/* brand: hero sky continues through the page */
.ch:not(.sky):not(.mist):not(.night):not(.dawn) { background: radial-gradient(900px 420px at 100% 0%, rgba(126, 200, 232, .16), transparent 62%), radial-gradient(820px 440px at 0% 100%, rgba(108, 99, 227, .09), transparent 62%), var(--paper); }
.ch.mist { background: radial-gradient(1000px 460px at 12% 0%, rgba(126, 200, 232, .18), transparent 60%), linear-gradient(180deg, var(--paper), var(--mist)); }
.flow-sep { position: relative; height: 1px; z-index: 3; pointer-events: none; }
.flow-sep svg { position: absolute; left: 0; width: 100%; height: 90px; top: -45px; overflow: visible; }
.flow-sep path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3, .7, .2, 1); opacity: .75; }
.flow-sep circle { opacity: 0; transition: opacity .6s 2s; }
.flow-sep.on path { stroke-dashoffset: 0; }
.flow-sep.on circle { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flow-sep path { transition: none; stroke-dashoffset: 0; } .flow-sep circle { opacity: 1; transition: none; } }
/* eyebrow: now / with NEMORIA */
.hw-k, .hw-to { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; }
.hw-k { background: #fbeef2; color: var(--warn); }
.hw-to { background: var(--grad); color: #fff; }
.handwork { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin-top: 22px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.handwork ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: h; }
.handwork li { position: relative; font-size: 13px; padding: 6px 12px; border-radius: 10px; background: #fff; border: 1px dashed #e3b7c5; color: var(--ink2); transition: .5s; }
.handwork li + li::before { content: "→"; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); color: #c9a3b0; font-size: 11px; }
.handwork.on li { color: #b9b2c0; text-decoration: line-through; text-decoration-color: rgba(181, 71, 106, .6); background: #faf7f9; }
.handwork .hw-done { font-size: 15px; color: var(--nemo-d); }
.handwork.v { flex-direction: column; align-items: flex-start; }
.est-k { margin: 14px 0 6px; font-size: 12px; font-weight: 800; color: var(--nemo-d); letter-spacing: .06em; }
.est-k:first-child { margin-top: 0; }
.pdfnote { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--nemo-d); text-decoration: none; border-bottom: 1px solid rgba(0, 56, 168, .3); }
.pdfnote::before { content: "PDF"; font: 800 10px var(--num); background: var(--nemo-d); color: #fff; padding: 2px 5px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; }
/* address */
.addr-checks { display: grid; grid-template-columns: 1fr 1fr 1.3fr; margin-top: 26px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.addr-checks > div { position: relative; padding: 18px 20px 16px 20px; border-right: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: .5s; }
.addr-checks > div:last-child { border-right: 0; }
.addr-checks .k { display: block; font-size: 12px; color: var(--ink3); font-weight: 700; }
.addr-checks b { display: block; font: 800 24px var(--num); margin-top: 4px; }
.addr-checks i { position: absolute; right: 18px; top: 16px; font-style: normal; font: 800 34px var(--num); line-height: 1; }
.addr-checks .ok i { color: #2f8f6a; }
.addr-checks .ng { background: linear-gradient(180deg, #fff, #fdf1f5); }
.addr-checks .ng i, .addr-checks .ng b { color: var(--warn); }
.addr-checks small { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; }
[data-addr2].on .addr-checks > div { opacity: 1; transform: none; }
[data-addr2].on .addr-checks > div:nth-child(2) { transition-delay: .35s; } [data-addr2].on .addr-checks > div:nth-child(3) { transition-delay: .8s; }
.h3x { margin: 46px 0 0; font-size: clamp(24px, 2.8vw, 36px); font-weight: 800; letter-spacing: .02em; }
.h3x em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.addr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; margin-top: 20px; }
.addr-grid .handwork { margin-top: 0; }
.chain7 { display: grid; gap: 0; border-left: 2px solid #dbe5fb; margin-left: 8px; }
.chain7 > div { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0 8px 18px; font-size: 13px; color: var(--ink3); opacity: .25; transition: .45s; }
.chain7 > div::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid #b9c8ee; transition: .45s; }
.chain7 > div b { font: 700 15px var(--num); color: var(--ink); text-align: right; }
.chain7 > div.on { opacity: 1; }
.chain7 > div.on::before { background: var(--nemo); border-color: var(--nemo); }
.chain7 > div.goal { margin-top: 4px; padding: 12px 14px 12px 18px; border-radius: 0 12px 12px 0; }
.chain7 > div.goal.on { background: var(--grad); color: rgba(255, 255, 255, .85); }
.chain7 > div.goal.on b { color: #fff; font-size: 18px; }
.a2-fee { fill: none; stroke: #7a86a8; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s .3s; }
.a2-mv { fill: none; stroke: url(#rg2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s 1s; }
.a2-tag { opacity: 0; transition: opacity .5s calc(1.4s + var(--d)); }
[data-addr2].on .a2-fee, [data-addr2].on .a2-mv { stroke-dashoffset: 0; }
[data-addr2].on .a2-tag { opacity: 1; }
.bridge { margin: 30px 0 0; padding: 16px 20px; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 152, 176, .08), rgba(91, 91, 214, .08)); font-size: 15px; color: var(--ink2); }
.bridge b { color: var(--ink); }
/* delay */
.dl-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 130px; gap: 16px; align-items: center; opacity: 0; transform: translateY(8px); transition: .5s; }
.dl-row + .dl-row { margin-top: 14px; }
.dl-k { font-size: 12.5px; font-weight: 700; color: var(--ink2); line-height: 1.45; }
.dl-row .lanebar { margin-top: 0; height: 52px; }
.dl-res { font-size: 12.5px; color: var(--ink3); line-height: 1.45; }
.dl-res b { font-size: 15px; }
.dl-row.bad .dl-res b, .dl-row.bad .dl-k { color: var(--warn); }
.dl-row.good .dl-res b { color: var(--nemo-d); }
.blk.next { background: #e9edf6; color: var(--ink3); border: 1.5px dashed #b9c3da; }
.blk.over { background: repeating-linear-gradient(45deg, #fde7ee, #fde7ee 6px, #fff 6px, #fff 12px); color: var(--warn); z-index: 2; width: 0 !important; }
.delay2.on .blk.over { width: 16.7% !important; transition-delay: .8s; }
.delay2 .d-buf { background: #e6ecfb !important; color: #2f5fc8 !important; }
.delay2.on .dl-row { opacity: 1; transform: none; }
.delay2.on .dl-row.good { transition-delay: 1.4s; }
.dl-ax { display: flex; justify-content: space-between; font: 11px Manrope; color: #8a93b0; margin: 6px 146px 0 136px; }
/* origin */
.origin2 { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; }
.origin2 .photo { position: relative; aspect-ratio: 4 / 3.4; }
.origin2 .proof { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
.origin2 .proof img { width: 38px; height: 38px; flex: none; }
.origin2 .proof b { display: block; font-size: 15px; }
.origin2 .proof span { display: block; font-size: 12.5px; color: var(--ink2); }
.needs-h { display: grid; grid-template-columns: 1fr 34px .8fr; font-size: 11.5px; font-weight: 800; color: var(--ink3); letter-spacing: .06em; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.needs-h span:last-child { grid-column: 3; }
.needs { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.needs li { counter-increment: n; display: grid; grid-template-columns: 1fr 34px .8fr; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-8px); transition: .5s; }
.needs .need { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.needs .need::before { content: "「"; color: var(--ink3); } .needs .need::after { content: "」"; color: var(--ink3); }
.needs i { height: 2px; background: var(--grad); margin: 0 8px; position: relative; }
.needs i::after { content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: #5b5bd6; }
.needs .made { font-size: 13px; color: var(--nemo-d); background: #eef3ff; padding: 5px 10px; border-radius: 10px; justify-self: start; }
[data-needs].on .needs li { opacity: 1; transform: none; }
/* after: next */
.next-gen { margin-top: 36px; }
.ng-h { margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; }
.ng-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin-top: 12px; font-size: 13px; }
.ng-flow span { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
.ng-flow span.ok { background: var(--grad); color: #fff; border-color: transparent; }
.ng-flow i { width: 26px; height: 2px; background: var(--grad); }
/* industries io */
.io { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.io-in, .io-out { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.io-in { flex: 1.3; } .io-out { flex: 1; }
.io span { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.io-in span { background: #fff; border: 1px solid var(--line); color: var(--ink2); }
.io-out span { background: var(--grad); color: #fff; }
.io-ar { flex: none; width: 22px; position: relative; }
.io-ar::before { content: ""; position: absolute; left: 0; right: 4px; top: 50%; height: 2px; background: var(--grad); }
.io-ar::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -4px; border: 5px solid transparent; border-left-color: #5b5bd6; border-right: 0; }
.indgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 24px; }
.indc { text-decoration: none; color: inherit; display: block; }
.indc h3 { margin: 12px 0 4px; font-size: 18px; }
.indc .pain { font-size: 13.5px; line-height: 1.6; }
/* decision path */
.decide { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 26px; padding: 0; font-size: 12px; }
.decide li { position: relative; }
.decide li + li::before { content: ""; display: inline-block; width: 18px; height: 1.5px; background: #c9d4ee; vertical-align: middle; margin: 0 4px; }
.decide a { text-decoration: none; color: var(--ink3); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; }
.decide li.past a { color: var(--nemo-d); }
.decide li.past a::before { content: "✓ "; }
.decide li.on a { background: var(--grad); color: #fff; }
.decide li:last-child a { border-color: rgba(0, 56, 168, .35); color: var(--nemo-d); }
/* plan reach */
.reach { display: flex; align-items: center; margin-top: 20px; font-size: 12.5px; font-weight: 800; color: var(--nemo-d); }
.reach span { white-space: nowrap; }
.reach i { flex: 1; height: 3px; margin: 0 10px; border-radius: 3px; background: linear-gradient(90deg, #8fd3e3, #5b5bd6); opacity: .7; }
.terms-big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 22px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.terms-big > div { padding: 20px 22px; border-right: 1px solid var(--line); }
.terms-big > div:last-child { border-right: 0; }
.terms-big b { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.terms-big span { font-size: 13px; color: var(--ink2); }
@media (max-width: 900px) {
  .addr-checks { grid-template-columns: 1fr; }
  .addr-checks > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .addr-grid, .origin2 { grid-template-columns: 1fr; }
  .indgrid { grid-template-columns: 1fr; }
  .terms-big { grid-template-columns: 1fr 1fr; }
  .terms-big > div:nth-child(2) { border-right: 0; }
  .terms-big > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dl-row { grid-template-columns: 1fr; gap: 6px; }
  .dl-ax { margin: 6px 0 0; }
  .reach { font-size: 11px; } .reach i { margin: 0 5px; }
}
@media (max-width: 560px) {
  .needs li, .needs-h { grid-template-columns: 1fr; }
  .needs i { display: none; }
  .needs .made { margin-top: 4px; }
  .needs-h span:last-child { display: none; }
  .decide { font-size: 11px; }
  .decide li + li::before { width: 8px; margin: 0 2px; }
  .decide a { padding: 3px 7px; }
}
.dl-row .lanebar { overflow: visible; }
.arrive { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--warn); border-radius: 2px; z-index: 4; opacity: 0; transition: opacity .4s 1s; }
.arrive span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 800; color: #fff; background: var(--warn); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.delay2.on .arrive { opacity: 1; }
.receipt.pulse { animation: rpulse 1.2s ease; }
@keyframes rpulse { 0% { box-shadow: 0 0 0 0 rgba(91, 91, 214, .45); } 100% { box-shadow: 0 0 0 18px rgba(91, 91, 214, 0); } }
.reach { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; padding-bottom: 10px; }
.reach::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #bfe6ef, #0098b0 30%, #0038a8 65%, #5b5bd6); }
.reach span { padding-left: 14px; position: relative; }
.reach span + span::before { content: "→"; position: absolute; left: -4px; color: #9aaad0; }
@media (max-width: 900px) { .reach { display: none; } }
.stage2 { align-items: start; } .stage2 .panel-txt { padding-top: 24px; }
.t-s { display: none; }
@media (max-width: 560px) {
  .delay2 .t-l { display: none; } .delay2 .t-s { display: inline; }
  .delay2 .blk { font-size: 10.5px; }
  .arrive span { right: auto; left: 50%; top: -14px; transform: translate(-50%, -100%); font-size: 10.5px; }
  .dl-row.bad .lanebar { margin-top: 26px; }
}
/* I51 */
.reach span { white-space: normal; line-height: 1.35; padding-right: 6px; }
.est-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.est-acts span { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.pdfbtn { background: #fff; border: 1.5px solid var(--nemo-d); color: var(--nemo-d); }
.pdfbtn::before { content: "PDF"; font: 800 10px var(--num); background: var(--nemo-d); color: #fff; padding: 2px 5px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; }
.gobtn { background: var(--grad); color: #fff; }
/* pin */
.pin-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: start; margin-top: 26px; }
.pinmock { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 30px 60px -40px rgba(0, 24, 56, .45); }
.pm-h { font-weight: 800; font-size: 16px; }
.pm-l { margin: 6px 0 10px; font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.pm-map { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.pm-map svg { display: block; width: 100%; height: auto; }
.pm-pin { transform: translate(150px, 78px); transition: transform 1.3s cubic-bezier(.5, 0, .2, 1); }
[data-pin].moved .pm-pin { transform: translate(298px, 150px); }
.pm-addr { opacity: .35; transition: opacity .5s; }
[data-pin].moved .pm-addr { opacity: 1; }
.pm-btns { display: flex; gap: 8px; margin-top: 12px; }
.pm-btns span { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; padding: 10px 6px; border-radius: 10px; }
.pm-b2 { border: 1px solid var(--line); color: var(--ink2); }
.pm-b1 { background: var(--grad); color: #fff; transition: box-shadow .4s; }
[data-pin].ok .pm-b1 { box-shadow: 0 0 0 4px rgba(91, 91, 214, .25); }
.pm-ok { position: absolute; left: 50%; top: 46%; transform: translate(-50%, 6px); opacity: 0; transition: .4s; background: #111834; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
[data-pin].ok .pm-ok { opacity: 1; transform: translate(-50%, 0); }
.pin-ex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pin-ex li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink2); }
.pin-ex b { display: block; font-size: 14px; color: var(--ink); }
.pin-flow, .late-flow, .trust3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; font-size: 13px; }
.pin-flow span, .trust3 span { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
.pin-flow span.ok, .trust3 span.ok, .late-flow span.ok { background: var(--grad); color: #fff; border-color: transparent; }
.pin-flow i, .late-flow i, .trust3 i { width: 22px; height: 2px; background: var(--grad); }
.pin-res { margin: 16px 0 6px; font-size: 16px; }
/* nap candidates */
.cand-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 26px; }
.cand { padding: 20px; }
.cand-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.cand-prev { font-size: 12.5px; font-weight: 800; color: #fff; background: #111834; padding: 4px 10px; border-radius: 999px; }
.cand-r { display: grid; grid-template-columns: 112px repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(6px); transition: .5s; }
.cand-h { border-top: 0; font: 700 12px var(--num); color: var(--ink3); text-align: center; opacity: 1; transform: none; }
.cand-k b { display: block; font-size: 14px; } .cand-k small { font-size: 11.5px; color: var(--ink3); }
.cd { text-align: center; font-weight: 800; border-radius: 8px; padding: 7px 0; font-size: 14px; }
.cd.no { color: #b9c3da; background: #f5f7fc; }
.cd.yes { color: var(--nemo-d); background: #e6ecfb; }
.cd.yes.gain { color: #fff; background: var(--grad); }
.r-fix .cd.yes { background: #e9edf6; color: var(--ink2); }
[data-cand].on .cand-r { opacity: 1; transform: none; }
[data-cand].on .r-a { transition-delay: .7s; } [data-cand].on .r-b { transition-delay: 1.3s; } [data-cand].on .r-c { transition-delay: 1.9s; }
.cand-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink2); display: flex; gap: 8px; align-items: flex-start; }
.cand-note .lg { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--grad); margin-top: 3px; }
.dayc { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 4px 12px; align-items: center; margin-top: 10px; }
.dayc-k { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.dayc .lanebar { margin-top: 0; }
.dayc-n { font: 800 20px var(--num); color: var(--ink2); text-align: right; }
.dayc.good .dayc-n { color: var(--nemo-d); }
.cand-side .axis { margin-right: 82px; }
.close-l { position: absolute; top: 0; bottom: 0; width: 2px; background: #b5476a; opacity: .5; }
/* km pair */
.pair2 { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pair2 span { font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink2); }
.pair2 span.on { background: var(--grad); color: #fff; border-color: transparent; }
.kmnext { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.kmnext b { font-family: var(--num); } .kmnext em { font-style: normal; font-weight: 800; color: #2f8f6a; margin-left: auto; }
/* late: arrival window */
.delay3 .dl-row .lanebar { overflow: visible; }
.blk.closed { background: repeating-linear-gradient(45deg, #fde7ee, #fde7ee 6px, #fff 6px, #fff 12px); color: var(--warn); z-index: 1; }
.blk.win { background: linear-gradient(90deg, rgba(0, 152, 176, .85), rgba(91, 91, 214, .85)); }
.delay3 .blk.next { z-index: 2; background: #fff; }
.delay3.on .dl-row { opacity: 1; transform: none; }
.delay3.on .dl-row.good { transition-delay: 1.2s; }
.delay3.on .arrive { opacity: 1; }
.arrive.ok { background: #2f8f6a; } .arrive.ok span { background: #2f8f6a; }
.arrive span { top: -16px; transform: translate(0, -50%); right: auto; left: 6px; }
.delay3 .dl-row .lanebar { margin-top: 18px; }
.late-flow span { padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; max-width: 300px; }
.late-flow small { display: block; font-size: 11px; color: var(--ink3); font-weight: 700; }
.late-flow span.ok small { color: rgba(255, 255, 255, .8); }
.samedata { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.samedata b { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--nemo-d); }
@media (max-width: 900px) {
  .pin-grid, .cand-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pin-ex { grid-template-columns: 1fr; }
  .cand-r { grid-template-columns: 70px repeat(5, minmax(0, 1fr)); gap: 3px; }
  .cand-k b { font-size: 12.5px; } .cand-k small { font-size: 10.5px; }
  .cd { font-size: 12px; padding: 6px 0; }
  .cand-h { font-size: 10.5px; }
  .delay3 .t-l { display: none; } .delay3 .t-s { display: inline; }
  .delay3 .blk { font-size: 10.5px; }
  .late-flow i { display: none; } .late-flow { gap: 6px; }
  .late-flow span { max-width: none; width: 100%; }
}
.daxis { display: flex; justify-content: space-between; font: 11px var(--num); color: #8a93b0; margin-top: 6px; }
.cand-note span { flex: 1; }
.h2sub { margin: -6px 0 0; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--ink2); }
@media (max-width: 560px) {
  .dayc .blk.mv { font-size: 0; }
  .delay3 .blk.next { font-size: 0; }
  .delay3 .arrive span { font-size: 10px; }
}
/* I53 value */
.value { margin-top: 26px; }
.v-step { display: flex; align-items: center; gap: 12px; margin: 38px 0 14px; }
.v-step:first-child { margin-top: 6px; }
.v-step h3 { margin: 0; font-size: clamp(18px, 1.9vw, 24px); }
.v-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 14px var(--num); display: grid; place-items: center; }
.vstages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.vstages::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #8fd3e3, #0038a8 60%, #5b5bd6); opacity: .6; }
.vst { position: relative; padding: 32px 10px 0 0; }
.vst::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--nemo); }
.vst b { display: block; font-size: 15px; margin-bottom: 6px; }
.vst ul { list-style: none; margin: 0; padding: 0; }
.vst li { font-size: 13px; color: var(--ink2); padding: 3px 0; line-height: 1.45; }
.vbar-wrap { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.vbar { display: flex; gap: 4px; min-height: 92px; }
.vseg { min-width: 0; border-radius: 12px; padding: 10px 12px; background: #e9eef8; display: flex; flex-direction: column; justify-content: center; }
.vseg span { font-size: 12px; font-weight: 700; color: var(--ink3); }
.vseg b { font: 800 clamp(16px, 1.7vw, 22px) var(--num); color: var(--ink); }
.vseg small { font-size: 11px; color: var(--ink3); line-height: 1.35; }
.vseg.plus { background: repeating-linear-gradient(45deg, #f4f6fb, #f4f6fb 6px, #fff 6px, #fff 12px); border: 1.5px dashed #b9c3da; }
.vtotal { margin-top: 12px; font-size: 14px; color: var(--ink2); text-align: right; }
.vtotal b { font: 800 clamp(22px, 2.4vw, 30px) var(--num); color: var(--ink); margin-left: 6px; }
.vjudge { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(90deg, rgba(0, 152, 176, .08), rgba(91, 91, 214, .08)); }
.vjudge p { margin: 0 0 10px; font-weight: 700; }
.vj { display: flex; flex-wrap: wrap; gap: 6px; }
.vj span { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink2); }
.vj span + span::before { content: "→ "; color: #9aaad0; }
.vj span:last-child { background: var(--grad); color: #fff; border-color: transparent; }
.vj span:last-child::before { color: rgba(255, 255, 255, .7); }
.vchain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; font-size: 13.5px; }
.vchain span { padding: 8px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
.vchain span.ok { background: var(--grad); color: #fff; border-color: transparent; }
.vchain i { width: 22px; height: 2px; background: var(--grad); }
.vwhy p { margin: 14px 0 0; color: var(--ink2); max-width: 880px; }
.vwhy .more { margin-left: 8px; }
.vprice { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.vp-cmp { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; align-items: stretch; }
.vp-cmp > div { border-radius: 16px; padding: 16px 18px; background: #f4f6fb; }
.vp-cmp span { display: block; font-size: 13px; font-weight: 700; color: var(--ink3); }
.vp-cmp b { font: 800 clamp(24px, 2.6vw, 34px) var(--num); color: var(--ink2); }
.vp-cmp small { font-size: 13px; font-weight: 700; margin-left: 4px; }
.vp-cmp .vp-nem { background: var(--grad); }
.vp-nem span, .vp-nem b { color: #fff !important; }
.vp-nem b { font-size: clamp(32px, 3.6vw, 46px) !important; }
.vpay { margin: 16px 0 0; font-size: 17px; }
.vpay b { font-size: 22px; color: var(--nemo-d); }
.vref ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink2); }
.vref p { font-size: 13px; color: var(--ink2); margin: 8px 0 0; }
.v-link { margin: 12px 0 0; font-size: 14px; color: var(--ink2); }
.v-link a { font-weight: 700; margin-left: 6px; }
@media (max-width: 900px) {
  .vstages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .vbar { flex-direction: column; }
  .vseg { flex: none !important; }
  .vp-cmp { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vstages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vchain i { display: none; } .vchain { gap: 6px; } .vchain span { width: 100%; }
  .vtotal { text-align: left; }
}
.vnote { margin: 6px 0 0; text-align: right; }
@media (max-width: 560px) { .vnote { text-align: left; } }

/* I55 plan matrix / steps / boundary */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mlegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 13px; color: var(--ink2); }
.mlegend span { display: inline-flex; align-items: center; gap: 6px; }
.mlegend .sym { font-style: normal; font-weight: 700; color: var(--nemo-d); width: 1.2em; text-align: center; }
.mlegend .lbx { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: #eef4fb; color: var(--nemo-d); }
.mtable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
.mtable caption { text-align: left; font-size: 12.5px; color: var(--ink3); padding: 0 0 8px; caption-side: top; }
.mtable th, .mtable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mtable thead th { background: #f3f7fc; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.4; }
.mtable thead th:first-child, .mtable thead th:last-child { text-align: left; }
.mtable thead .num { font-weight: 500; color: var(--ink3); font-size: 11.5px; }
.mtable tbody th[scope=row] { text-align: left; font-weight: 500; width: 25%; }
.mtable tbody th[scope=row] a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink3); }
.mtable tr.grp th { background: #f8fbfd; font-size: 12px; color: var(--nemo-d); font-weight: 700; text-align: left; padding: 7px 8px; letter-spacing: .04em; }
.mtable td.st { text-align: center; white-space: nowrap; }
.mtable .sym { font-weight: 700; font-size: 15px; }
.mtable .st-y .sym { color: var(--nemo-d); }
.mtable .st-c .sym { color: #b07a10; }
.mtable .st-n .sym { color: #c3cad6; }
.mtable .st .lb { font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: #eef4fb; color: var(--nemo-d); }
.mtable .st-x .lb { background: none; padding: 0; color: var(--ink); font-size: 13px; }
.mtable td.cond { font-size: 12px; color: var(--ink2); width: 27%; line-height: 1.55; }
.mtable.lim { margin-top: 0; }
.lim-h { margin: 28px 0 8px; font-size: 16px; }
.psteps { margin: 0; border-top: 1px solid var(--line); }
.pstep { display: grid; grid-template-columns: 13em 1fr; gap: 6px 20px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.pstep dt { display: flex; flex-direction: column; }
.pstep dt .num { font-size: 13px; color: var(--ink3); }
.pstep dd { margin: 0; font-size: 14px; color: var(--ink2); }
.pstep dd b { color: var(--ink); font-weight: 700; }
.pstep dd a { margin-left: 8px; font-size: 13px; }
.pstep.key { background: linear-gradient(90deg, rgba(31, 111, 209, .07), transparent); border-left: 3px solid var(--nemo); padding-left: 12px; }
.bound { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.bound li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.bound li b { font-size: 14.5px; }
.bound li span { font-size: 13px; color: var(--ink2); }
.demo-scope { margin: 16px 0 0; font-size: 13px; }
.demo-scope div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); }
.demo-scope dt { font-weight: 700; color: var(--ink); }
.demo-scope dd { margin: 0; color: var(--ink2); }
@media (max-width: 760px) {
  .mtable, .mtable tbody, .mtable tr, .mtable th, .mtable td, .mtable caption { display: block; width: auto !important; }
  .mtable { border: 0; background: none; }
  .mtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mtable tr.grp th { background: none; padding: 16px 0 6px; border: 0; }
  .mtable tbody tr:not(.grp) { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 6px; }
  .mtable tbody tr:not(.grp) > th { grid-column: 1 / -1; border: 0; padding: 0 0 4px; font-weight: 700; }
  .mtable td.st { border: 0; padding: 4px 6px; text-align: left; background: #f8fbfd; border-radius: 8px; white-space: normal; display: flex; flex-direction: column; gap: 0; font-size: 12px; }
  .mtable td.st::before { content: attr(data-plan); font-size: 10.5px; color: var(--ink3); line-height: 1.3; }
  .mtable td.st-n { opacity: .55; }
  .mtable td.cond { grid-column: 1 / -1; border: 0; padding: 6px 0 0; }
  .mtable td.cond:has(.vh:only-child) { display: none; }
  .mtable.lim tbody tr { grid-template-columns: repeat(3, 1fr); }
  .pstep { grid-template-columns: 1fr; }
  .bound { grid-template-columns: 1fr; }
  .demo-scope div { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== I61 story: four chapters, one object each ===== */
.s-chap { margin: 0 0 12px; }
.s-chap span { display: inline-block; font-family: var(--num); font-weight: 800; font-size: 12px; letter-spacing: .24em; color: var(--nemo-d); padding: 4px 12px; border-radius: 999px; border: 1.5px solid currentColor; }
.night .s-chap span { color: #a9b8ff; }
.s-h { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.3; }
.s-sub { margin: 8px 0 0; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink2); font-weight: 500; }
.night .s-sub { color: #b8c3ea; }
.s-facts { margin-top: 30px; }
.s-replay { display: block; margin: 16px auto 0; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 13px; color: var(--ink2); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; }
[data-stage].end .s-replay { opacity: 1; pointer-events: auto; }
.night .s-replay { color: #b8c3ea; border-color: rgba(169, 184, 255, .35); }
.s-mini { margin: 18px 0 0; font-size: 12px; color: var(--ink3); }

/* chapter 1: one phone */
.s-c1 { background: radial-gradient(900px 520px at 50% 0%, rgba(91, 91, 214, .1), transparent 60%), linear-gradient(180deg, #fff, var(--mist)); }
.c1-stage { display: grid; grid-template-columns: 270px 360px 1fr; gap: 52px; align-items: center; margin-top: 40px; }
.c1-qs { display: flex; flex-direction: column; gap: 10px; }
.c1-q { position: relative; padding: 12px 18px; border-radius: 22px 22px 22px 6px; background: #fff; border: 1px solid var(--line); opacity: .38; transition: opacity .4s, transform .4s, border-color .4s, box-shadow .4s; }
.c1-q b { display: block; font-size: 20px; line-height: 1.35; transition: font-size .4s, color .4s; }
.c1-q span { display: block; max-height: 0; overflow: hidden; font-size: 15px; font-weight: 700; color: var(--nemo-d); transition: max-height .4s; }
.c1-q.on { opacity: 1; border-color: var(--nemo-d); transform: translateX(8px); box-shadow: 0 16px 30px -20px rgba(0, 56, 168, .5); }
.c1-q.done { opacity: 1; background: transparent; border-color: transparent; padding-top: 4px; padding-bottom: 4px; }
.c1-q.done b { font-size: 14px; color: var(--ink3); font-weight: 700; }
.c1-q.done span { max-height: 40px; font-size: 17px; }
.c1-q.q-all b { font-size: 22px; }
.c1-q.q-all.done b { font-size: 15px; color: var(--nemo-d); }
.c1-q.q-go { margin-top: 6px; }
.c1-q.q-go.on { background: var(--grad); border-color: transparent; color: #fff; }
.c1-q.q-go small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: .9; }
.c1-mid { display: flex; flex-direction: column; align-items: center; }
.c1-phone { width: 360px; border-radius: 48px; padding: 12px; background: #0f1530; box-shadow: 0 50px 100px -40px rgba(0, 24, 56, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.c1-scr { border-radius: 38px; background: #fff; height: 650px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.c1-bar { display: flex; justify-content: space-between; padding: 14px 26px 4px; font-size: 13px; font-weight: 700; }
.c1-ttl { padding: 6px 22px 14px; font-weight: 700; font-size: 16px; position: relative; }
.c1-body { flex: 1; display: grid; padding: 22px 20px; min-height: 0; overflow: hidden; }
.c1-body > div { grid-area: 1 / 1; opacity: 0; transform: translateX(28px); transition: opacity .45s, transform .45s; pointer-events: none; }
.c1-body > div.on { opacity: 1; transform: none; pointer-events: auto; }
.c1-body > div.past { transform: translateX(-28px); }
.c1-body .q { margin: 0 0 16px; font-size: 22px; font-weight: 700; }
.c1-body .opt { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e1e7f2; margin-bottom: 10px; font-size: 16px; }
.c1-body .opt.on { border-color: var(--nemo-d); background: #eef4fd; }
.c1-body .opt i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--nemo-d); color: #fff; display: grid; place-items: center; font-size: 13px; }
.c1-body .qty { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 16px; font-weight: 700; }
.c1-body .qty b { display: flex; align-items: center; gap: 14px; }
.c1-body .qty i { font-style: normal; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #c9d3e6; display: grid; place-items: center; color: var(--nemo-d); }
.c1-body .qty u { text-decoration: none; font-size: 26px; }
.c1-body .seg { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.c1-body .seg span { flex-basis: 100%; font-size: 15px; color: var(--ink2); }
.c1-body .seg b { flex: 1; text-align: center; padding: 13px; border-radius: 12px; border: 1.5px solid #e1e7f2; font-size: 17px; }
.c1-body .seg b.on { border-color: var(--nemo-d); background: #eef4fd; color: var(--nemo-d); }
.c1-body .inp span { display: block; font-size: 15px; color: var(--ink2); margin: 0 0 6px; }
.c1-body .inp b { display: block; padding: 13px 14px; border: 1.5px solid var(--nemo); border-radius: 12px; font-size: 18px; font-weight: 500; margin-bottom: 16px; }
.c1-body .big { padding: 28px 22px; border-radius: 20px; background: linear-gradient(150deg, #eef4fd, #f2efff); display: flex; flex-direction: column; gap: 6px; }
.c1-body .big small { font-size: 15px; color: var(--ink2); }
.c1-body .big b { font-size: 40px; line-height: 1.25; }
.c1-body .big.ok { flex-direction: row; align-items: center; gap: 16px; background: #e8f6f0; }
.c1-body .big.ok i { font-style: normal; width: 56px; height: 56px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 28px; flex: none; }
.c1-body .big.ok b { font-size: 25px; color: var(--ok); }
.c1-body .wk { margin: -6px 0 16px; font-size: 15px; color: var(--ink2); }
.c1-body .doc { border: 1px solid #dfe5f0; border-radius: 12px; padding: 18px; box-shadow: 0 16px 30px -22px rgba(0, 24, 56, .4); display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.c1-body .doc b { font-size: 18px; text-align: center; letter-spacing: .3em; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.c1-body .doc span { display: flex; justify-content: space-between; }
.c1-body .doc em { font-style: normal; }
.c1-body .doc .t { border-top: 1px solid #dfe5f0; padding-top: 10px; font-weight: 700; }
.c1-body .doc .t em { font-size: 20px; color: var(--nemo-d); }
.c1-body .pdf { margin-top: 16px; text-align: center; padding: 12px; border-radius: 12px; border: 1.5px solid var(--nemo-d); color: var(--nemo-d); font-weight: 700; }
.c1-body .slots { display: flex; flex-direction: column; gap: 10px; }
.c1-body .slots b { padding: 13px 16px; border-radius: 12px; border: 1.5px solid #e1e7f2; font-size: 17px; }
.c1-body .slots b.on { background: var(--nemo-d); border-color: var(--nemo-d); color: #fff; }
.c1-body .done { margin-top: 40px; padding: 30px 16px; border-radius: 20px; background: var(--grad); color: #fff; font-size: 30px; font-weight: 800; text-align: center; opacity: 0; transform: scale(.9); transition: .5s .3s; }
.c1-body .on .done { opacity: 1; transform: none; }
.c1-body .done small { display: block; font-size: 14px; font-weight: 500; }
.c1-sum { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 20px; border-top: 1px solid #eef1f8; background: #f7f9fd; min-height: 104px; align-content: flex-start; }
.c1-sum i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #d7e1f2; color: var(--nemo-d); opacity: 0; transform: scale(.7); transition: .35s; }
.c1-sum i.on { opacity: 1; transform: none; }
.c1-sum i:last-child.on { background: var(--grad); color: #fff; border-color: transparent; }
.c1-fig { margin: 0; position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(0, 24, 56, .6); }
.c1-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.c1-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 18px; background: linear-gradient(0deg, rgba(6, 26, 51, .9), transparent); color: #fff; font-size: 16px; font-weight: 700; }
.c1-fig figcaption b { display: block; font-size: 36px; line-height: 1.1; }
.c1-punch { margin: 28px 0 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.45; }
.c1-demo { margin-top: 52px; }
.c1-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.c1-demo-bar b { font-size: 17px; }
.c1-demo-bar small { display: block; font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.c1-demo .demo-frame.cov { display: none; }
.c1-demo .demo-frame { margin: 18px auto 0; max-width: 480px; height: 760px; }

/* chapter 2: one map, one day */
.s-c2 { background: radial-gradient(1000px 600px at 80% 0%, rgba(91, 91, 214, .3), transparent 60%), linear-gradient(180deg, #061a33, #0b2547); }
.c2-board { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "day day" "map caps" "map tl"; grid-template-rows: auto auto 1fr; margin-top: 34px; border-radius: 28px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid rgba(169, 184, 255, .2); }
.c2-day { grid-area: day; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px 26px; border-bottom: 1px solid rgba(169, 184, 255, .2); }
.c2-day p { margin: 0; display: grid; font-size: 17px; color: #dfe6ff; }
.c2-day p span { grid-area: 1 / 1; }
.c2-day p b { color: #fff; margin: 0 2px 0 6px; font-size: 19px; }
.c2-steps { display: flex; gap: 22px; }
.c2-steps button { background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 700; color: #7f8dbf; cursor: pointer; border-bottom: 2px solid transparent; transition: .3s; }
.c2-steps button.past { color: #b8c3ea; }
.c2-steps button.act { color: #fff; border-bottom-color: #6fe0c0; }
.c2-who { text-anchor: middle; fill: #6fe0c0; font-weight: 800; }
.b-gap { top: 8px; bottom: 8px; border-radius: 0 8px 8px 0; background: repeating-linear-gradient(135deg, rgba(169, 184, 255, .45) 0 4px, rgba(169, 184, 255, .12) 4px 8px); }
.gapt { top: 13px; margin-left: 8px; font-size: 12.5px; font-weight: 700; color: #c9d3f5; white-space: nowrap; }
.tr.work .tt { height: 40px; }
.tr.work .b-now { top: 6px; bottom: 6px; transition-delay: 3.4s; }
.c2-map { grid-area: map; background: #0a2a52; }
.c2-caps { grid-area: caps; display: grid; padding: 30px 30px 0; }
.c2-caps .c2-cap { grid-area: 1 / 1; }
.c2-svg { display: block; width: 100%; height: 100%; }
.c2-svg text { font-family: var(--sans); }
.c2-tlw { grid-area: tl; display: grid; padding: 0 30px 24px; }
.c2-p { grid-area: 1 / 1; opacity: 0; transition: opacity .5s; pointer-events: none; }
.c2-p.on { opacity: 1; pointer-events: auto; }
.c2-cap { margin: 0 0 24px; font-size: clamp(16px, 1.5vw, 19px); color: #b8c3ea; font-weight: 500; line-height: 1.55; }
.c2-cap b { display: block; color: #fff; font-size: clamp(20px, 2vw, 26px); }
.mp-sea { fill: #0a2a52; }
.mp-land { fill: #183b66; stroke: #3d6aa6; stroke-width: 1.2; stroke-linejoin: round; }
.mp-zoom .mp-land { stroke-width: 1.6; }
.mp-city { fill: #dfe6ff; }
.c2-lb.s { font-size: 18px; fill: #b8c3ea; }
.mp-pl.sea { fill: #5d86c4; font-style: italic; }
.mp-scale path { fill: none; stroke: #dfe6ff; stroke-width: 2.5; }
.mp-scale text { fill: #dfe6ff; font-size: 18px; font-weight: 700; text-anchor: middle; }
.mp-inset .bg { fill: rgba(6, 26, 51, .88); stroke: rgba(169, 184, 255, .35); }
.mp-inset path { fill: #3d6aa6; }
.mp-inset .hl { fill: rgba(255, 156, 186, .25); stroke: #ff9cba; stroke-width: 2; }
.mp-inset text { fill: #b8c3ea; font-size: 15px; font-weight: 700; }
.mp-credit { fill: #7f8dbf; font-size: 11px; }
.mp-pl { fill: #8aa3d3; font-size: 21px; font-weight: 700; }
.mp-route { fill: none; stroke: #7fb2ff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease; }
.c2-r.on .mp-route { stroke-dashoffset: 0; }
.c2-r.ra .mp-route { stroke: #6fe0c0; }
.c2-r.rb .mp-route { stroke: #c3b9ff; transition-delay: .35s; }
.c2-r.rc .mp-route { stroke: #ff9cba; transition-delay: .7s; }
.c2-t rect { fill: #fff; }
.c2-t text { font-size: 24px; font-weight: 800; fill: var(--night); text-anchor: middle; }
.c2-pt text { font-size: 22px; font-weight: 800; fill: #fff; text-anchor: middle; }
.c2-pt.p rect { fill: #3b4458; stroke: #fff; stroke-width: 2; }
.c2-pt.p text { font-size: 17px; }
.c2-pt circle { stroke: #fff; stroke-width: 3; }
.c2-pt.a circle { fill: #1f8a6a; }
.c2-pt.b circle, .c2-pt.n circle { fill: #5b5bd6; }
.c2-pt.c circle { fill: #b5476a; }
.c2-lb { font-size: 24px; font-weight: 700; fill: #dfe6ff; paint-order: stroke; stroke: #0a2a52; stroke-width: 4px; stroke-linejoin: round; }
.c2-stage [data-in] { transition: opacity .5s; }
.c2-stage [data-in]:not(.on) { opacity: 0; }
.mp-wide, .mp-zoom { transition: opacity .7s; }
.c2-car { fill: #fff; stroke: #1f8a6a; stroke-width: 4; transition: transform 1.4s ease .9s; }
.c2-go.on .c2-car { transform: translate(var(--dx), var(--dy)); }
.c2-sms rect { fill: #fff; }
.c2-sms text { font-size: 22px; font-weight: 700; fill: var(--night); }
.c2-sms .k { fill: #1f8a6a; font-weight: 800; }
.c2-sms.on { transition-delay: 1.9s; }
.c2-arr rect { fill: #1f8a6a; }
.c2-arr text { font-size: 22px; font-weight: 800; fill: #fff; text-anchor: middle; }
.c2-arr.on { transition-delay: 3s; }
.c2-ghost { fill: none; stroke: #ff9cba; stroke-width: 3; stroke-dasharray: 8 8; }
.c2-ghl rect { fill: #3a1f3a; stroke: #ff9cba; }
.c2-ghl text { fill: #ff9cba; font-size: 24px; font-weight: 800; text-anchor: middle; }
.mp-route.big { stroke-width: 7; }
.mp-route.big.n { stroke: #c3b9ff; stroke-width: 6; }
.c2-r.big.on .mp-route { transition: stroke-dashoffset 2.2s ease 1.2s; }
.c2-r.big.on .mp-route.n { transition-delay: 3.4s; transition-duration: .6s; }
.c2-ghl.on, .c2-ghost { transition-delay: .2s; }
.c2-km.on { transition-delay: 3.2s; }
.c2-km rect { fill: #fff; }
.c2-km .b { font-size: 34px; font-weight: 800; fill: var(--night); }
.c2-km .s { font-size: 20px; fill: var(--ink2); }
.tr { display: grid; grid-template-columns: 128px 1fr; align-items: center; min-height: 64px; }
.tr + .tr { border-top: 1px dashed rgba(169, 184, 255, .18); }
.tr.ax { border-top: 0; min-height: 30px; }
.tk b { display: block; font-size: 16px; color: #fff; line-height: 1.35; }
.tk small { font-size: 12.5px; color: #a9b8ff; font-family: var(--num); }
.tk em { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; }
.r-a .tk b, .r-a .tk em { color: #6fe0c0; }
.r-b .tk b, .r-b .tk em { color: #c3b9ff; }
.r-c .tk b, .r-c .tk em { color: #ff9cba; }
.tt { position: relative; height: 46px; }
.tt > i, .tt > b, .tt > em { position: absolute; font-style: normal; }
.b-prev, .b-now, .b-next { top: 8px; bottom: 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; padding-left: 10px; overflow: hidden; white-space: nowrap; }
.b-prev { background: #3b4458; color: #fff; }
.b-now { background: #6fe0c0; color: var(--night); font-weight: 800; opacity: 0; transition: .5s 1.6s; }
.b-next { background: #c3b9ff; color: var(--night); padding-left: 6px; }
.c2-p.on .b-now { opacity: 1; }
.mv { top: 18px; height: 10px; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(169, 184, 255, .75) 0 6px, transparent 6px 10px); transform-origin: left; transform: scaleX(0); transition: transform .8s .2s; }
.mv span { position: absolute; top: -18px; left: 2px; font-size: 11px; color: #a9b8ff; white-space: nowrap; }
.c2-p.on .mv { transform: none; }
.cd { top: 9px; transform: translateX(-50%) scale(.6); font-family: var(--num); font-size: 14px; font-weight: 700; padding: 4px 9px; border-radius: 8px; opacity: 0; transition: .4s; white-space: nowrap; }
.c2-p.on .cd { opacity: 1; transform: translateX(-50%); transition-delay: 1s; }
.cd.ok { background: #fff; color: var(--night); }
.r-a .cd.ok { background: #6fe0c0; }
.r-b .cd.ok { background: #c3b9ff; }
.r-c .cd.ok { background: #ff9cba; }
.cd.no { color: rgba(169, 184, 255, .5); }
.tax { position: relative; height: 24px; border-top: 1px solid rgba(169, 184, 255, .4); }
.tax span { position: absolute; top: 5px; transform: translateX(-50%); font-size: 12px; color: #8f9cd0; font-family: var(--num); }
.tr.yam .tt { height: 112px; }
.win { bottom: 8px; height: 40px; border-radius: 10px; background: linear-gradient(90deg, rgba(0, 152, 176, .55), rgba(91, 91, 214, .55)); border: 1px solid rgba(169, 184, 255, .6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: .5s .2s; z-index: 1; }
.win span { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.c2-p.on .win { opacity: 1; }
.dep { bottom: 50px; height: 22px; width: 0; border-left: 2px solid #fff; opacity: 0; transition: .4s .9s; }
.dep span { position: absolute; right: 6px; top: 0; font-size: 12px; color: #dfe6ff; white-space: nowrap; }
.go { bottom: 52px; height: 4px; background: #6fe0c0; border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform 1.2s 1.2s; }
.c2-p.on .dep { opacity: 1; }
.c2-p.on .go { transform: none; }
.smsb { top: 0; background: #fff; color: var(--night); border-radius: 12px 12px 12px 2px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: .5s 2s; }
.smsb b { background: var(--ok); color: #fff; font-family: var(--num); font-size: 10.5px; border-radius: 4px; padding: 1px 5px; margin-right: 6px; }
.c2-p.on .smsb { opacity: 1; transform: none; }
.arr { bottom: 48px; height: 26px; width: 0; border-left: 3px solid #6fe0c0; opacity: 0; transition: .5s 3s; z-index: 2; }
.arr::after { content: ""; position: absolute; left: -8px; bottom: -7px; width: 13px; height: 13px; border-radius: 50%; background: #6fe0c0; border: 2px solid var(--night); }
.arr span { position: absolute; left: 8px; top: -2px; font-size: 13px; font-weight: 800; color: #6fe0c0; white-space: nowrap; }
.c2-p.on .arr { opacity: 1; }
.tr.fixed .tt, .tr.real .tt { height: 58px; }
.mv30 { top: 24px; height: 10px; background: repeating-linear-gradient(90deg, rgba(255, 156, 186, .85) 0 6px, transparent 6px 10px); border-radius: 99px; }
.cd.ghostc { top: 14px; background: #3a1f3a; color: #ff9cba; border: 1px dashed #ff9cba; text-decoration: line-through; }
.xmark { top: 18px; margin-left: 34px; font-size: 12.5px; font-weight: 700; color: #ff9cba; white-space: nowrap; }
.tr.real .mv { top: 26px; height: 12px; }
.tr.real .mv span { top: -19px; }

/* chapter 3: one booking, five scenes */
.s-c3 { background: linear-gradient(180deg, var(--paper), #eef4fb); }
.c3-stage { display: grid; grid-template-columns: 190px 1fr; gap: 44px; margin-top: 40px; align-items: start; }
.c3-path { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.c3-path::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: 22px; width: 2px; background: #d5deec; }
.c3-path button { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 0; cursor: pointer; color: var(--ink3); transition: color .3s; }
.c3-path button::before { content: ""; position: absolute; left: -22px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: #d5deec; transition: .3s; }
.c3-path button b { display: block; font-size: 21px; line-height: 1.3; }
.c3-path button small { font-size: 13px; }
.c3-path button.past { color: var(--ink2); }
.c3-path button.past::before { background: var(--nemo-d); }
.c3-path button.act { color: var(--nemo-d); }
.c3-path button.act::before { background: var(--grad); box-shadow: 0 0 0 5px rgba(31, 111, 209, .16); }
.c3-scr { background: #fff; border-radius: 26px; box-shadow: 0 50px 100px -50px rgba(0, 24, 56, .5); border: 1px solid var(--line); overflow: hidden; }
.c3-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 16px 26px; background: var(--ink); color: #fff; font-size: 15px; }
.c3-head b { font-size: 17px; }
.c3-body { display: grid; padding: 34px; min-height: 450px; }
.c3-body > div { grid-area: 1 / 1; opacity: 0; transition: opacity .5s; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.c3-body > div.on { opacity: 1; pointer-events: auto; }
.c3-stage .s-replay { grid-column: 2; margin-top: 0; }
.k3 { width: 100%; }
.t3-k { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: var(--nemo-d); letter-spacing: .08em; }
.t3-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: 0 24px 40px -30px rgba(0, 24, 56, .4); }
.t3-card dl { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px 14px; margin: 0; font-size: 17px; }
.t3-card dt { color: var(--ink3); font-size: 14px; align-self: center; }
.t3-card dd { margin: 0; font-weight: 700; }
.t3-card dd small { font-size: 12px; color: var(--ink3); margin-left: 8px; font-weight: 500; }
.k3-book { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: center; }
.k3-pin .pn { width: 100%; display: block; border-radius: 18px; border: 1px solid var(--line); }
.k3-pin p { margin: 12px 0 0; font-size: 15px; color: var(--ink2); }
.k3-pin p b { display: block; font-size: 17px; color: var(--nemo-d); }
.pn-fix .pn-pin { transform: translate(128px, 74px); transition: transform 1s ease 2.2s; }
.c3-p.on .pn-fix .pn-pin { transform: translate(214px, 222px); }
.pn-ring { fill: none; stroke: #b5476a; stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0; transition: .4s 1s; }
.pn-arrow { fill: none; stroke: #5b5bd6; stroke-width: 3; stroke-dasharray: 6 5; opacity: 0; transition: .4s 1.8s; }
.c3-p.on .pn-ring, .c3-p.on .pn-arrow { opacity: 1; }
.pn-arrive .pn-pin { transform: translate(214px, 222px); }
.pn-route { fill: none; stroke: var(--nemo-d); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s; }
.pn-car { fill: #fff; stroke: var(--nemo-d); stroke-width: 4; transition: transform 1.6s; }
.c3-p.on .pn-route { stroke-dashoffset: 0; }
.c3-p.on .pn-car { transform: translate(194px, -78px); }
.k3-field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.k3-m { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.c3-p.on .k3-m { opacity: 1; transform: none; transition-delay: calc(var(--d) * 2.3s + .2s); }
.c3-p.on .k3-m .pn-route, .c3-p.on .k3-m .pn-car { transition-delay: calc(var(--d) * 2.3s + .7s); }
.c3-p.on .k3-m .t3-stamp { transition-delay: 1.4s; }
.k3-t { display: block; font-style: normal; font-size: 19px; font-weight: 800; color: var(--nemo-d); margin-bottom: 8px; white-space: nowrap; }
.k3-v { position: relative; height: 176px; border-radius: 16px; background: #eef3f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.k3-v .pn { width: 100%; height: 100%; }
.k3-v img { width: 100%; height: 100%; object-fit: cover; }
.k3-m p { margin: 10px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.t3-msg { background: #fff; border-radius: 16px 16px 16px 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 16px 30px -22px rgba(0, 24, 56, .4); font-size: 13px; width: 82%; }
.t3-msg small { font-size: 11.5px; color: var(--ink3); font-weight: 700; }
.t3-msg b { font-size: 17px; }
.t3-msg em { font-style: normal; margin-top: 6px; text-align: center; padding: 7px; border-radius: 10px; background: var(--ok); color: #fff; font-weight: 800; }
.t3-stamp { position: absolute; right: 10px; bottom: 12px; padding: 5px 12px; border: 3px solid #b5476a; color: #b5476a; font-weight: 800; font-size: 16px; border-radius: 10px; transform: rotate(-10deg) scale(1.6); opacity: 0; transition: .35s cubic-bezier(.3, 1.6, .5, 1); background: rgba(255, 255, 255, .92); white-space: nowrap; }
.c3-p.on .t3-stamp { opacity: 1; transform: rotate(-10deg); }
.t3-bub { background: #fff; border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 15px; line-height: 1.6; width: 84%; box-shadow: 0 16px 30px -22px rgba(0, 24, 56, .4); }
.t3-bub b { background: var(--ok); color: #fff; font-family: var(--num); font-size: 11px; padding: 2px 7px; border-radius: 5px; margin-right: 6px; vertical-align: 2px; }
.t3-bub span { font-weight: 800; font-size: 18px; color: var(--nemo-d); }
.k3-pay { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: center; }
.t3-pay { text-align: center; padding: 28px 20px; border-radius: 20px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.t3-pay small { font-size: 14px; color: var(--ink3); }
.t3-pay b { font-size: 44px; line-height: 1.15; }
.t3-pay span { font-size: 15px; color: var(--ink2); }
.t3-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.t3-doc { border: 1px solid #dfe5f0; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; box-shadow: 0 20px 34px -26px rgba(0, 24, 56, .45); opacity: 0; transform: translateY(14px); transition: .5s 1s; }
.t3-doc + .t3-doc { transition-delay: 1.6s; }
.c3-p.on .t3-doc { opacity: 1; transform: none; }
.t3-doc b { font-size: 16px; letter-spacing: .3em; text-align: center; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.t3-doc span { display: flex; justify-content: space-between; gap: 8px; }
.t3-doc em { font-style: normal; }
.t3-doc .t { border-top: 1px solid #dfe5f0; padding-top: 8px; font-weight: 800; }
.t3-doc .t em { color: var(--nemo-d); }
.k3-cap { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: 17px; font-weight: 800; color: var(--nemo-d); opacity: 0; transition: .5s 2.6s; }
.c3-p.on .k3-cap { opacity: 1; }
.k3-done { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
.t3-done { width: 200px; height: 200px; border-radius: 50%; border: 6px solid var(--nemo-d); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--nemo-d); transform: rotate(-10deg) scale(1.4); opacity: 0; transition: .4s cubic-bezier(.3, 1.6, .5, 1) .3s; }
.c3-p.on .t3-done { transform: rotate(-10deg); opacity: 1; }
.t3-done b { font-size: 48px; line-height: 1.1; letter-spacing: .1em; }
.t3-done span { font-size: 22px; font-weight: 700; }
.t3-q { display: flex; flex-direction: column; gap: 10px; }
.t3-q .t3-qh { border: 0; padding: 0; font-size: 14px; font-weight: 800; color: var(--ink3); }
.t3-q p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); font-size: 16px; font-weight: 700; }
.t3-q i { font-style: normal; flex: none; font-size: 14px; font-weight: 800; color: var(--ok); padding: 4px 12px; border-radius: 999px; background: #e8f6f0; opacity: 0; transition: .4s; }
.c3-p.on .t3-q i { opacity: 1; }
.c3-p.on .t3-q p:nth-child(2) i { transition-delay: 1.2s; }
.c3-p.on .t3-q p:nth-child(3) i { transition-delay: 1.8s; }
.c3-p.on .t3-q p:nth-child(4) i { transition-delay: 2.4s; }
.k3-next { display: grid; grid-template-columns: 1.25fr .55fr 1.2fr; gap: 18px; align-items: center; }
.k3-n { opacity: 0; transition: opacity .5s; }
.c3-p.on .k3-n { opacity: 1; transition-delay: calc(var(--d) * 2.2s + .2s); }
.k3-n p { margin: 10px 0 0; text-align: center; font-size: 14.5px; font-weight: 700; }
.k3-ok { width: 104px; height: 104px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--ok); color: var(--ok); display: grid; place-items: center; font-size: 22px; font-weight: 800; transform: rotate(-10deg); }
.t3-case { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; border-radius: 16px; border: 1.5px dashed #c3cad6; }
.t3-case img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.t3-case > div { display: flex; flex-direction: column; gap: 8px; }
.t3-tag { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #fff3c4; color: #6b5300; }
.t3-case b { font-size: 15px; line-height: 1.4; }
.t3-case span { height: 9px; border-radius: 5px; background: #e8edf5; }
.t3-case span.s { width: 60%; }
.t3-web { border-radius: 14px; border: 1px solid #d5deec; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 24, 56, .45); background: #fff; }
.t3-url { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef1f6; font-size: 12px; color: var(--ink2); }
.t3-url i { width: 9px; height: 9px; border-radius: 50%; background: #c9d0dc; }
.t3-url span { margin-left: 8px; }
.t3-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; padding: 14px; }
.t3-grid > div { aspect-ratio: 3 / 4; border-radius: 10px; background: #f2f5fa; }
.t3-grid .new { background: #fff; border: 2px solid var(--nemo-d); padding: 7px; display: flex; flex-direction: column; gap: 6px; position: relative; aspect-ratio: auto; }
.t3-grid .new img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.t3-grid .new b { font-size: 12.5px; line-height: 1.4; }
.t3-grid .new small { position: absolute; top: -10px; right: -8px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }

/* industries: photos, one line */
.s-fit { background: var(--paper); }
.s-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.s-ind { position: relative; display: block; height: clamp(240px, 26vw, 380px); overflow: hidden; color: #fff; text-decoration: none; }
.s-ind img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.s-ind:hover img { transform: scale(1.04); }
.s-ind b { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 20px; background: linear-gradient(0deg, rgba(0, 24, 56, .85), transparent); font-size: 20px; }
.s-fit-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; padding: 34px 0 64px; }
.s-fit-t p { margin: 0; font-size: 16px; color: var(--ink2); }
.s-fit-t p b { display: block; font-size: clamp(20px, 2vw, 26px); color: var(--ink); }

/* chapter 4: time builds up */
.s-c4 { position: relative; color: #fff; padding: clamp(84px, 9vw, 130px) 0; overflow: hidden; background: var(--night); }
.s-c4-bg { position: absolute; inset: 0; }
.s-c4-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.s-c4-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 51, .92), rgba(6, 26, 51, .8) 50%, rgba(6, 26, 51, .96)); }
.s-c4 .wrap { position: relative; }
[data-reveal] { transform: translateY(12px); transition: transform .7s; }
[data-reveal].on { transform: none; }
.o-time { position: relative; max-width: 980px; margin: 48px auto 0; }
.o-start { margin: 0; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.6; color: #c9d3f5; }
.o-line { list-style: none; margin: 30px 0 0; padding: 0; position: relative; }
.o-line::before { content: ""; position: absolute; left: 50%; top: -22px; bottom: -22px; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(180deg, rgba(169, 184, 255, .2), rgba(169, 184, 255, .6) 45%, #6fe0c0); }
.o-n { position: relative; width: calc(50% - 44px); margin-top: -34px; padding: 18px 22px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(169, 184, 255, .28); }
.o-n:first-child { margin-top: 0; }
.o-n.r { margin-left: auto; }
.o-n::after { content: ""; position: absolute; top: 24px; right: -52px; width: 16px; height: 16px; border-radius: 50%; background: #ff9cba; border: 3px solid var(--night); }
.o-n.r::after { right: auto; left: -52px; }
.o-q { margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; line-height: 1.45; }
.o-m { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #c9d3f5; }
.o-u { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: #6fe0c0; }
.o-now { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 44px auto 0; padding: 20px 24px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(111, 224, 192, .55); }
.o-now img { width: 44px; height: 44px; background: #fff; border-radius: 10px; padding: 4px; flex: none; }
.o-now p { margin: 0; font-size: 15px; line-height: 1.6; color: #dfe6ff; }
.o-now b { display: block; font-size: 22px; color: #fff; }
.o-now a { color: #b6c4ff; font-weight: 700; margin-left: 6px; }
.o-bridge { margin: 44px 0 0; text-align: center; font-size: 17px; line-height: 1.7; color: #dfe6ff; }
.o-bridge b { display: inline-block; margin-left: 10px; padding: 8px 20px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 18px; }
.s-c4 .s-mini { color: #8f9cd0; text-align: center; }

/* price: one receipt, one gap, one price */
.s-price { padding-top: clamp(64px, 7vw, 96px); }
.x-val { display: grid; grid-template-columns: 1fr .8fr 1fr; margin-top: 30px; align-items: stretch; }
.x-rcpt { background: #fff; padding: 24px 24px 30px; font-size: 14px; position: relative; box-shadow: 0 24px 50px -36px rgba(0, 24, 56, .5); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 95% 100%, 90% calc(100% - 10px), 85% 100%, 80% calc(100% - 10px), 75% 100%, 70% calc(100% - 10px), 65% 100%, 60% calc(100% - 10px), 55% 100%, 50% calc(100% - 10px), 45% 100%, 40% calc(100% - 10px), 35% 100%, 30% calc(100% - 10px), 25% 100%, 20% calc(100% - 10px), 15% 100%, 10% calc(100% - 10px), 5% 100%, 0 calc(100% - 10px)); }
.x-rc-h { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink3); text-align: center; padding-bottom: 10px; border-bottom: 1px dashed var(--ink3); }
.x-rcpt ol { list-style: none; margin: 0; padding: 0; }
.x-rcpt li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #d4dae6; opacity: 0; transition: .4s; }
.x-val.on-1 .x-rcpt li { opacity: 1; }
.x-val.on-1 .x-rcpt li:nth-child(2) { transition-delay: .2s; }
.x-val.on-1 .x-rcpt li:nth-child(3) { transition-delay: .4s; }
.x-val.on-1 .x-rcpt li:nth-child(4) { transition-delay: .6s; }
.x-rl b { display: block; font-size: 13.5px; }
.x-rl small { font-size: 11.5px; color: var(--ink3); }
.x-rcpt li > .num { font-size: 18px; white-space: nowrap; }
.x-rcpt li.plus > .num { color: var(--ink3); }
.x-rc-t { padding-top: 12px; }
.x-rc-t b { font-size: 32px; }
.x-rc-t small { font-size: 14px; font-weight: 500; }
.x-gap { padding: 30px 26px; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: .2; transition: .6s; }
.x-val.on-2 .x-gap { opacity: 1; }
.x-gap p { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.5; }
.x-jg { display: flex; flex-wrap: wrap; gap: 8px; }
.x-jg span { font-size: 12px; padding: 4px 9px; border-radius: 999px; }
.x-jg.broken span { background: #f2f3f8; color: var(--ink3); border: 1px dashed #c8cfdc; }
.x-jg.broken span:nth-child(odd) { transform: translateY(4px) rotate(-3deg); }
.x-jg.broken span:nth-child(3n) { transform: translateY(-3px) rotate(2deg); }
.x-jg.joined { gap: 0; margin-top: 14px; }
.x-jg.joined span { background: rgba(255, 255, 255, .16); color: #fff; border-radius: 0; padding: 4px 8px; border-right: 1px solid rgba(255, 255, 255, .25); }
.x-jg.joined span:first-child { border-radius: 999px 0 0 999px; }
.x-jg.joined span:last-child { border-radius: 0 999px 999px 0; border-right: 0; }
.x-nem { background: linear-gradient(150deg, #0038a8, #5b5bd6); color: #fff; border-radius: 22px; padding: 28px 26px; opacity: .2; transform: translateY(10px); transition: .7s; }
.x-val.on-3 .x-nem { opacity: 1; transform: none; }
.x-nem-k { font-size: 13px; font-weight: 700; opacity: .85; }
.x-nem > b { display: block; font-size: clamp(36px, 4vw, 52px); line-height: 1.2; margin-top: 4px; }
.x-nem > b small { font-size: 14px; font-weight: 500; }
.x-nem-w { margin: 18px 0 16px; font-size: 16px; font-weight: 800; }

/* start */
.s-terms { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 44px; margin: 0 0 32px; }
.s-terms b { display: block; font-size: clamp(26px, 3vw, 40px); font-family: var(--num); line-height: 1.2; }
.s-terms span { font-size: 13px; opacity: .92; }

@media (max-width: 1100px) {
  .c1-stage { grid-template-columns: 240px 1fr; gap: 36px; }
  .c1-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .c1-punch { margin: 0; }
  .c3-stage { grid-template-columns: 170px 1fr; gap: 28px; }
  .k3-field { grid-template-columns: 1fr 1fr; }
  .k3-v { height: 150px; }
  .x-val { grid-template-columns: 1fr 1fr; }
  .x-val .x-nem { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .s-h { font-size: 27px; }
  .s-h em { display: inline-block; }
  .c1-stage { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; }
  .c1-qs { display: grid; width: 100%; max-width: 340px; margin: 0 auto; }
  .c1-q { grid-area: 1 / 1; opacity: 0; transform: none; }
  .c1-q.done { opacity: 0; }
  .c1-q.on { opacity: 1; transform: none; }
  .c1-q b, .c1-q.q-all b { font-size: 22px; }
  .c1-phone { width: min(340px, 100%); border-radius: 44px; }
  .c1-scr { height: 610px; }
  .c1-side { grid-template-columns: 1fr; gap: 0; }
  .c1-fig img { aspect-ratio: 16 / 10; }
  .c1-fig figcaption b { font-size: 30px; }
  .c1-punch { font-size: 23px; margin-top: 18px; }
  .c1-demo { margin-top: 36px; }
  .c1-demo-bar { flex-direction: column; align-items: flex-start; padding: 18px; }
  .c1-demo .demo-frame { height: 680px; }
  .c2-board { margin-top: 26px; }
  .c2-day { padding: 14px 16px; }
  .c2-day p { font-size: 15px; }
  .c2-steps { gap: 16px; }
  .c2-steps button { font-size: 13px; }
  .gapt { font-size: 11px; }
  .c2-board { grid-template-columns: 1fr; grid-template-areas: "day" "caps" "map" "tl"; grid-template-rows: auto; border-radius: 20px; }
  .c2-caps { padding: 18px 16px 14px; }
  .c2-tlw { padding: 16px 14px 14px; }
  .c2-cap { font-size: 14px; margin-bottom: 16px; }
  .c2-cap b { font-size: 19px; }
  .tr { grid-template-columns: 1fr; min-height: 0; padding: 6px 0 4px; }
  .tk { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
  .tk b, .tk em { display: inline; }
  .tr.ax .tk { display: none; }
  .cd { font-size: 12px; padding: 3px 6px; }
  .tr.yam .tt { height: 116px; }
  .smsb { font-size: 11.5px; }
  .xmark { margin-left: 28px; font-size: 11.5px; }
  .b-prev, .b-now, .b-next { font-size: 11px; padding-left: 6px; }
  .c3-stage { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .c3-path { display: flex; justify-content: space-between; padding: 0; margin-bottom: 12px; }
  .c3-path::before, .c3-path button::before, .c3-path button small { display: none; }
  .c3-path button { width: auto; padding: 6px 0; border-bottom: 2px solid transparent; }
  .c3-path button b { font-size: 15px; }
  .c3-path button.act { border-bottom-color: var(--nemo-d); }
  .c3-stage .s-replay { grid-column: auto; margin-top: 14px; }
  .c3-head { padding: 12px 16px; font-size: 13px; gap: 2px 10px; }
  .c3-head b { font-size: 15px; }
  .c3-body { padding: 20px 16px; min-height: 500px; }
  .t3-card { padding: 16px 18px; }
  .t3-card dl { font-size: 15px; gap: 8px 12px; }
  .k3-book { grid-template-columns: 1fr; gap: 16px; }
  .k3-pin { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
  .k3-pin p { margin: 0; font-size: 13.5px; }
  .k3-pin p b { font-size: 15px; }
  .k3-field { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .k3-t { font-size: 15px; margin-bottom: 6px; }
  .k3-v { height: 124px; }
  .k3-m p { font-size: 13px; margin-top: 6px; }
  .t3-msg { width: 90%; padding: 8px 10px; }
  .t3-msg b { font-size: 14px; }
  .t3-msg em { padding: 5px; }
  .t3-stamp { font-size: 13px; padding: 3px 8px; }
  .t3-bub { width: 92%; padding: 10px; font-size: 12.5px; }
  .t3-bub span { font-size: 14px; }
  .k3-pay { grid-template-columns: 1fr; gap: 14px; }
  .t3-pay { padding: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; }
  .t3-pay b { font-size: 34px; }
  .t3-docs { gap: 10px; }
  .t3-doc { padding: 12px; font-size: 12px; gap: 7px; }
  .t3-doc b { font-size: 14px; letter-spacing: .15em; }
  .k3-cap { font-size: 15px; }
  .k3-done { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .t3-done { width: 150px; height: 150px; }
  .t3-done b { font-size: 38px; }
  .t3-done span { font-size: 18px; }
  .t3-q { width: 100%; }
  .t3-q p { font-size: 14px; padding: 11px 14px; }
  .k3-next { grid-template-columns: 1fr; gap: 12px; }
  .k3-n p { margin-top: 6px; font-size: 13.5px; }
  .k3-ok { width: 64px; height: 64px; font-size: 15px; border-width: 3px; }
  .t3-case { grid-template-columns: 84px 1fr; padding: 10px; }
  .t3-grid { padding: 10px; }
  .s-strip { grid-template-columns: 1fr; }
  .s-ind { height: 170px; }
  .s-ind b { font-size: 18px; padding: 40px 18px 14px; }
  .s-fit-t { padding: 26px 0 50px; }
  .o-time { margin-top: 30px; }
  .o-start { text-align: left; padding-left: 30px; font-size: 16px; }
  .o-line { margin-top: 20px; }
  .o-line::before { left: 8px; margin-left: 0; }
  .o-n, .o-n.r { width: auto; margin: 14px 0 0 30px; padding: 14px 16px; }
  .o-n:first-child { margin-top: 0; }
  .o-n::after, .o-n.r::after { left: -30px; right: auto; top: 18px; }
  .o-q { font-size: 17px; }
  .o-m { font-size: 14px; }
  .o-now { margin: 26px 0 0; padding: 16px; align-items: flex-start; }
  .o-now b { font-size: 19px; }
  .o-bridge { text-align: left; font-size: 15px; margin-top: 30px; }
  .o-bridge b { display: table; margin: 10px 0 0; font-size: 16px; }
  .s-c4 .s-mini { text-align: left; }
  .x-val { grid-template-columns: 1fr; }
  .x-gap { padding: 22px 0; }
  .s-terms { grid-template-columns: repeat(2, auto); gap: 14px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .c1-body > div, .c1-sum i, .c2-p, [data-in], .mp-wide, .mp-zoom, .mp-route, .mv, .cd, .c3-body > div, .c3-body *, [data-reveal], .x-rcpt li, .x-gap, .x-nem { transition: none !important; }
}
.c2-cap b.c2-q { font-size: clamp(26px, 2.8vw, 38px); color: #ff9cba; margin-bottom: 6px; }
@media (max-width: 560px) {
  .c2-board { margin-inline: -18px; border-radius: 0; border-inline: 0; }
  .c2-cap b.c2-q { font-size: 27px; }
}

/* ===== I64 basics + growth ===== */
.s-bs { background: #f5f7fc; }
.s-bs .s-sub, .s-gr .s-sub { color: var(--ink2); }
.bs-flow { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 3px solid transparent; border-image: linear-gradient(90deg, #0098b0, #0038a8 60%, #5b5bd6) 1; }
.bs-st { padding: 16px 12px 18px; border-right: 1px dashed #d5dcef; position: relative; }
.bs-st:last-child { border-right: 0; }
.bs-st::before { content: ""; position: absolute; top: -9px; left: 12px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #0038a8; }
.bs-k { margin: 6px 0 12px; }
.bs-k b { display: block; font-size: 18px; color: var(--ink); }
.bs-k small { font-size: 12.5px; color: var(--ink2); }
.bs-st ul { list-style: none; margin: 0; padding: 0; }
.bs-st li { padding: 7px 0; border-top: 1px solid #e4e9f5; }
.bs-st li a { display: block; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.4; }
.bs-st li a:hover { color: #0038a8; text-decoration: underline; }
.bs-st li em { display: block; font-style: normal; font-size: 11.5px; color: #5048c8; margin-top: 2px; }
.bs-note { margin: 16px 0 0; font-size: 13px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.bs-box { background: #fff; border: 1px solid #dfe5f3; border-radius: 20px; padding: 22px 22px 16px; }
.bs-box h3 { margin: 0 0 12px; font-size: 19px; }
.bs-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bs-t th { text-align: left; vertical-align: top; white-space: nowrap; padding: 10px 12px 10px 0; font-size: 14px; color: #0038a8; }
.bs-t td { padding: 10px 8px 10px 0; vertical-align: top; color: var(--ink2); line-height: 1.55; }
.bs-t td b { display: block; color: var(--ink); font-size: 13px; }
.bs-t td.pl { white-space: nowrap; font-size: 12px; color: #5048c8; font-weight: 700; padding-right: 0; }
.bs-t tr + tr { border-top: 1px solid #e9edf7; }
.bs-box .ex { margin: 10px 0 0; }
.s-gr { background: #fff; }
.gr-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; margin-top: 30px; align-items: center; }
.gr-map { display: block; width: 100%; border-radius: 20px; }
.gr-tier { padding: 16px 0; border-top: 1px solid #e4e9f5; }
.gr-tier h3 { margin: 0 0 8px; font-size: 15px; color: #5048c8; }
.gr-tier ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.8; }
.s-gr > .wrap > .ex { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; }
@media (max-width: 1100px) {
  .bs-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
  .bs-st:nth-child(4) { border-right: 0; }
}
@media (max-width: 760px) {
  .bs-flow { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid #0038a8; border-image: linear-gradient(180deg, #0098b0, #0038a8 60%, #5b5bd6) 1; margin-left: 8px; }
  .bs-st { border-right: 0; padding: 4px 0 18px 20px; }
  .bs-st::before { top: 8px; left: -10px; }
  .bs-st ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .bs-st li { border: 1px solid #dfe5f3; border-radius: 12px; padding: 6px 10px; background: #fff; }
  .bs-st li a { font-size: 13.5px; }
  .bs-two, .gr-body { grid-template-columns: 1fr; }
  .bs-box { padding: 18px 14px 12px; }
  .bs-t th { white-space: normal; width: 5.5em; }
  .bs-t td.pl { white-space: normal; width: 4.5em; }
}
@media (prefers-reduced-motion: reduce) { .bs-st[data-reveal] { opacity: 1; transform: none; transition: none; } }
.c2-chain { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 14px; color: #b8c3ea; }
.c2-chain span::after { content: "→"; margin: 0 7px; color: #6f7fb3; }
.c2-chain b { color: #6fe0c0; font-size: 16px; }
.c2-chain-s { color: #dfe6ff; }
.c2-chain-s b { color: #fff; }
.o-daily { margin: 26px 0 0; font-size: clamp(16px, 1.6vw, 19px); color: #cfd8f5; }
.o-daily b { display: block; color: #fff; }
@media (max-width: 760px) { .c2-chain { font-size: 12.5px; } .c2-chain span::after { margin: 0 4px; } }

/* ===== I65 final polish ===== */
h1, h2, h3, .s-h { word-break: auto-phrase; text-wrap: balance; }
.ex { font-size: 12px; letter-spacing: .04em; }
.ch.dawn { padding-top: 110px; }
.c1-fig img { object-position: right center; }
.frow[hidden], .stage-sec[hidden] { display: none; }
.frow .fhit { display: block; grid-column: 1; margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--nemo-d); }
.frow .fhit[hidden] { display: none; }
.mp-credit-h { display: none; }
.planline span { word-break: auto-phrase; font-size: 12px; line-height: 1.35; }
.chat .h { font-size: 12px; color: #0a2a52; }
.pain { word-break: auto-phrase; text-wrap: balance; }
.mini .ln { gap: 12px; }
.mini .ln b { white-space: nowrap; }
@media (max-width: 760px) {
  .mp-credit { display: none; }
  .mp-credit-h { display: block; margin: 0; padding: 6px 12px 8px; font-size: 11.5px; line-height: 1.5; color: #9aa8d6; background: #0a2a52; }
  .bs-t, .bs-t tbody { display: block; }
  .bs-t tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 0; }
  .bs-t th { width: auto; white-space: nowrap; padding: 0 0 4px; }
  .bs-t td { padding: 0; }
  .bs-t td:not(.pl) { grid-column: 1 / -1; grid-row: 2; }
  .bs-t td.pl { grid-column: 2; grid-row: 1; width: auto; white-space: nowrap; text-align: right; }
  .mtable.pm { overflow: visible; }
  .mtable.pm thead { position: sticky; top: 64px; z-index: 4; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin: 0 0 6px; background: #f3f7fc; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 14px -10px rgba(0, 24, 56, .35); }
  .mtable.pm thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 6px 8px; }
  .mtable.pm thead th { display: block; padding: 0; border: 0; background: none; font-size: 10.5px; letter-spacing: -.03em; line-height: 1.3; text-align: center !important; }
  .mtable.pm thead .num { display: block; font-size: 10.5px; letter-spacing: 0; }
  .mtable.pm:not(.lim) thead th:first-child, .mtable.pm:not(.lim) thead th:last-child, .mtable.pm.lim thead th:first-child { display: none; }
  .mtable.pm tbody tr:not(.grp) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 8px; }
  .mtable.pm td.st { padding: 5px 2px; text-align: center; align-items: center; justify-content: center; font-size: 11.5px; line-height: 1.3; }
  .mtable.pm td.st::before { content: none; }
  .mtable.pm .st .lb { padding: 0; background: none; font-size: 11px; word-break: auto-phrase; }
  .mtable.pm .st-x .lb { font-size: 11px; letter-spacing: -.03em; }
  .mtable:not(.pm) { display: table; width: 100% !important; background: #fff; border: 1px solid var(--line); font-size: 12px; }
  .mtable:not(.pm) caption { display: table-caption; }
  .mtable:not(.pm) thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .mtable:not(.pm) tbody { display: table-row-group; }
  .mtable:not(.pm) tr, .mtable:not(.pm) tbody tr:not(.grp) { display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; }
  .mtable:not(.pm) th, .mtable:not(.pm) td { display: table-cell; width: auto !important; padding: 7px 6px; border-bottom: 1px solid var(--line); }
  .mtable:not(.pm) thead th { font-size: 11.5px; }
  .tl-row { grid-template-columns: 60px 1fr; }
  .tl-k { letter-spacing: -.02em; }
}
@media (max-width: 560px) {
  .ft .top { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .ft .top > :first-child { grid-column: 1 / -1; }
  .vgrid.c3 { grid-template-columns: 1fr; }
}

/* I2: one-price story — who / ROI / capacity / admin cost / comparison / transparency / trust */
.kick { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--nemo-d); background: rgba(31, 111, 209, .1); }
.night .kick { color: #cfe0ff; background: rgba(255, 255, 255, .12); }
.s-who { background: #fff; }
.who-for { margin: 0 0 14px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--nemo-d); }
.who-m { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.who-m li { display: flex; gap: 14px; align-items: baseline; padding: 16px 18px; border-radius: 14px; background: #f3f6fc; border: 1px solid #e3e9f6; font-size: 15px; }
.who-m b { flex: none; min-width: 3.4em; font-size: 15px; color: var(--nemo-d); }
.who-mid { margin: 30px 0 14px; font-weight: 700; font-size: 17px; }
.who-cs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.who-c { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, #f1f6ff, #f4f0ff); border: 1px solid #dfe5f6; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.who-c:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(0, 56, 168, .6); }
.who-c b { font-size: 16px; line-height: 1.45; }
.who-c span { font-size: 13px; color: var(--ink2); }
.who-end { margin: 22px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 17px; }
.who-end b { font-size: clamp(20px, 2.2vw, 26px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.roi { margin-top: 28px; padding: 26px 28px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 60px -34px rgba(0, 56, 168, .45); }
.roi-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.roi-eq span { display: flex; flex-direction: column; }
.roi-eq small { font-size: 12px; color: var(--ink3); }
.roi-eq b { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; }
.roi-eq span.up b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.roi-eq i { font-style: normal; font-family: var(--num); font-size: 26px; color: var(--ink3); }
.roi-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed #d4dae6; }
.roi-vs span { font-size: 13px; color: var(--ink3); }
.roi-vs b { font-size: 22px; }
.roi-vs em { font-style: normal; font-weight: 800; color: var(--ok); font-size: 17px; }
.roi-src { margin: 12px 0 0; font-size: 13.5px; color: var(--ink2); }

.cap-box { margin-top: 30px; padding: 22px 24px 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.cap-r { display: grid; grid-template-columns: 210px minmax(0, 1fr) 150px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf1f8; }
.cap-r.ax { border-bottom: 0; padding: 0 0 6px; }
.cap-k b { display: block; font-size: 14px; }
.cap-k small, .cap-n small { display: block; font-size: 12px; color: var(--ink3); line-height: 1.45; }
.cap-t { position: relative; height: 44px; border-radius: 10px; background: #f1f4fa; }
.cap-t i { position: absolute; top: 6px; bottom: 6px; border-radius: 7px; font-style: normal; font-size: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.cap-t i.w { background: var(--grad); color: #fff; font-weight: 700; }
.cap-t i.m { background: repeating-linear-gradient(135deg, #c9d6f1 0 6px, #e3eaf8 6px 12px); color: var(--ink2); }
.cap-t i.s { background: #e3e7ef; color: var(--ink3); }
.fix .cap-t i.w { background: #7d8db0; }
.cap-n b { font-size: 26px; line-height: 1.2; }
.near .cap-n b { color: var(--ok); }
.cap-ax { position: relative; height: 18px; }
.cap-ax span { position: absolute; transform: translateX(-50%); font-family: var(--num); font-size: 11px; color: var(--ink3); }
.cap-sum { margin: 22px 0 8px; font-size: 17px; }
.cap-sum b { color: var(--nemo-d); }

.cost-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; margin-top: 30px; align-items: start; }
.cost-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 20px; }
.cost-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.cost-t thead th { text-align: left; font-size: 12px; color: var(--ink3); padding: 12px 10px 8px 0; font-weight: 700; }
.cost-t tbody th { text-align: left; font-weight: 700; padding: 11px 12px 11px 0; vertical-align: top; width: 46%; }
.cost-t td { padding: 11px 0; color: var(--ink2); vertical-align: top; }
.cost-t tbody tr { border-top: 1px solid #edf1f8; }
.cost-calc { padding: 26px; }
.cost-calc .hint { justify-content: flex-start; }
.cost-out { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 14px; background: linear-gradient(160deg, #001838, #0038a8 60%, #4f55c9); color: #fff; }
.cost-out span { font-size: 13px; color: #c5cffb; }
.cost-out b { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.2; }
.cost-calc .foot-note { color: var(--ink3); }
.cost-end { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; font-size: 16px; }
.cost-end b { font-size: clamp(20px, 2.2vw, 26px); color: var(--nemo-d); }
.cost-end i { font-style: normal; font-family: var(--num); font-size: 22px; color: var(--ink3); }

.vs-wrap { margin-top: 28px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.vs-t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vs-t thead th { padding: 14px 16px; text-align: left; font-size: 14px; background: #eef1f7; color: var(--ink2); }
.vs-t thead th:last-child { background: var(--grad); color: #fff; }
.vs-t tbody th { text-align: left; padding: 14px 16px; width: 15%; white-space: nowrap; color: var(--nemo-d); vertical-align: top; }
.vs-t td { padding: 14px 16px; vertical-align: top; }
.vs-t td.g { color: var(--ink3); }
.vs-t td.n { font-weight: 700; background: #f5f7ff; }
.vs-t tbody tr { border-top: 1px solid #edf1f8; }
.s-vs .ex { margin: 12px 0 0; }

.s-clear .s-h em { -webkit-text-fill-color: transparent; }
.s-clear .s-sub { color: #cfe0f6; }
.clear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.clear-box { padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(169, 184, 255, .25); }
.clear-box h3 { margin: 0 0 12px; font-size: 18px; color: #fff; }
.clear-box p { margin: 10px 0 0; color: #d6e1f7; font-size: 15px; }
.clear-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.clear-l li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14px; font-weight: 700; }
.clear-l li::before { content: "✓ "; color: #7fe0c6; }
.clear-note { margin: 24px 0 0; color: #cfe0f6; font-size: 15px; max-width: 900px; }
.src { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(169, 184, 255, .25); }
.src h3 { margin: 0 0 14px; font-size: 17px; color: #fff; }
.src-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.src-l li { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--ink); }
.src-h { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; }
.src-h span { color: var(--ink3); }
.src-l a { font-weight: 700; font-size: 14.5px; color: var(--nemo-d); }
.src-l p:last-child { margin: 8px 0 0; font-size: 13.5px; color: var(--ink2); }
.s-clear .ex { color: #aab6ea; margin: 12px 0 0; }

.be { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.be li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.be li span { font-size: 13px; color: var(--ink3); }
.be li span b { font-size: 18px; color: var(--ink); }
.be li > b { font-size: 30px; line-height: 1.2; }
.be li.key { background: var(--grad); border-color: transparent; color: #fff; }
.be li.key span, .be li.key span b { color: rgba(255, 255, 255, .9); }
.be-one { margin: 18px 0 0; font-size: 16px; }
.x-h { margin: 40px 0 0; font-size: 18px; }

.trust-in { display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; max-width: 960px; }
.trust-in img { width: 96px; height: 96px; border-radius: 22px; background: #fff; padding: 10px; box-shadow: 0 16px 40px -24px rgba(0, 56, 168, .6); }
.trust-p { margin: 16px 0 10px; font-size: 16px; }

@media (max-width: 1100px) {
  .who-cs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-r { grid-template-columns: 170px minmax(0, 1fr) 120px; }
}
@media (max-width: 760px) {
  .who-m { grid-template-columns: 1fr; gap: 8px; }
  .who-m li { padding: 12px 14px; font-size: 14px; }
  .who-cs { grid-template-columns: 1fr; }
  .roi { padding: 20px; }
  .roi-eq { gap: 6px 12px; }
  .roi-eq b { font-size: 26px; }
  .roi-eq i { font-size: 20px; }
  .cap-box { padding: 14px 14px 6px; }
  .cap-r { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .cap-k { grid-column: 1; }
  .cap-n { grid-column: 2; grid-row: 1; text-align: right; }
  .cap-n small { display: none; }
  .cap-t, .cap-ax { grid-column: 1 / -1; }
  .cap-r.ax > div:empty { display: none; }
  .cap-t i span { display: none; }
  .cost-grid, .clear-grid, .src-l { grid-template-columns: 1fr; }
  .cost-box { padding: 4px 14px; }
  .cost-t thead { display: none; }
  .cost-t tbody tr { display: block; padding: 10px 0; }
  .cost-t tbody th, .cost-t td { display: block; width: auto; padding: 0; }
  .cost-t td { margin-top: 2px; font-size: 13.5px; }
  .vs-t thead { display: none; }
  .vs-t tbody tr { display: grid; grid-template-columns: 1fr; padding: 12px 14px; }
  .vs-t tbody th { padding: 0 0 6px; width: auto; }
  .vs-t td { padding: 4px 0; font-size: 14px; }
  .vs-t td.g::before { content: "一般的な日時受付型　"; display: block; font-size: 11px; color: var(--ink3); font-weight: 400; }
  .vs-t td.n { background: none; }
  .vs-t td.n::before { content: "NEMORIA　"; display: block; font-size: 11px; color: var(--nemo-d); }
  .be { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be li > b { font-size: 24px; }
  .trust-in { grid-template-columns: 1fr; gap: 16px; }
  .trust-in img { width: 64px; height: 64px; }
}
.cap-ax span:first-child { transform: none; }
.cap-ax span:last-child { transform: translateX(-100%); }

/* I3: secondary CTA (document request), request form, document, unsubscribe */
.acts-sub { margin: 14px 0 0; font-size: 14px; }
.acts-sub a { color: inherit; opacity: .85; text-underline-offset: 3px; }
.cta2 { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta2 p { flex-basis: 100%; margin: 0 0 2px; font-size: 15px; color: var(--ink2); }
.night .cta2 p { color: #cfe0f6; }

.doc-req { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; padding: 10px 0 80px; }
.doc-req-l h2 { font-size: 20px; margin: 0 0 14px; }
.doc-req-ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc-req-ch li { padding: 14px 16px 14px 42px; position: relative; border-radius: 14px; background: #f3f6fc; border: 1px solid #e3e9f6; font-weight: 700; font-size: 15px; }
.doc-req-ch li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--grad); }
.doc-req-n { margin: 18px 0 0; font-size: 14px; color: var(--ink2); }
.doc-form, .doc-done, .unsub { padding: 28px; border-radius: var(--r); }
.f-row { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.f-row > label, .f-row legend { display: flex; gap: 8px; align-items: baseline; font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.f-row em, .f-check em { font-style: normal; font-size: 11px; color: #fff; background: var(--nemo-d); border-radius: 4px; padding: 1px 6px; }
.f-row small { font-weight: 400; font-size: 12px; color: var(--ink3); }
.f-row input:not([type=checkbox]):not([type=radio]), .f-row select { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd8ea; background: #fff; color: var(--ink); }
.f-row input:focus, .f-row select:focus { outline: 2px solid rgba(31, 111, 209, .35); border-color: var(--nemo); }
.f-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.f-opt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid #cfd8ea; background: #fff; font-size: 14px; cursor: pointer; }
.f-opt:has(input:checked) { border-color: var(--nemo); background: #eef4ff; font-weight: 700; }
.f-opt input { margin: 0; accent-color: var(--nemo); }
.f-err { margin: 6px 0 0; font-size: 13px; color: #c62828; min-height: 0; }
.f-err:empty { display: none; }
.f-row.err input:not([type=checkbox]):not([type=radio]), .f-row.err select, .f-row.err .f-opt { border-color: #e57373; }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-purpose { margin: 4px 0 14px; padding: 14px 16px; border-radius: 12px; background: #f4f7fc; font-size: 13.5px; color: var(--ink2); }
.f-purpose p { margin: 0; }
.f-purpose p + p { margin-top: 4px; }
.f-check label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.f-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--nemo); flex: none; }
.f-check span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.f-check small { flex-basis: 100%; font-size: 12px; color: var(--ink3); }
.f-submit { width: 100%; justify-content: center; margin-top: 6px; }
.f-submit:disabled { opacity: .6; }
.f-status { margin: 10px 0 0; font-size: 14px; color: #c62828; }
.f-status:empty { display: none; }
.doc-done h2 { margin: 4px 0 8px; font-size: 26px; }
.doc-done-k { margin: 0; font-weight: 700; color: var(--nemo-d); }
.doc-done-next { margin-top: 24px; padding-top: 18px; border-top: 1px dashed #d4dae6; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-done-next p { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink2); }
.doc-done-next .btn.gh, .doc-cta .btn.gh { background: transparent; color: var(--nemo-d); box-shadow: none; backdrop-filter: none; text-decoration: underline; text-underline-offset: 3px; }

.doc-hero { padding: 120px 0 50px; background: linear-gradient(170deg, #eef4ff, #f5f1ff 70%, #fff); }
.doc-hero-k { margin: 0 0 10px; font-family: var(--num); font-weight: 700; letter-spacing: .08em; color: var(--nemo-d); font-size: 13px; }
.doc-hero h1 { margin: 0; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.2; }
.doc-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.doc-hero .lede { max-width: 760px; }
.doc-toc { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.doc-toc a { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .8); border: 1px solid #e1e7f4; text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.doc-toc span { font-family: var(--num); color: var(--nemo-d); font-size: 12px; }
.doc-body { max-width: 980px; padding-bottom: 60px; }
.doc-sec { padding: 56px 0 8px; border-bottom: 1px solid #edf1f8; scroll-margin-top: 80px; }
.doc-sec h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; }
.doc-sec p { font-size: 16px; line-height: 1.9; }
.doc-n { margin: 0 0 4px; font-family: var(--num); font-weight: 800; font-size: 14px; color: var(--nemo-d); letter-spacing: .06em; }
.doc-lead { font-size: 19px !important; font-weight: 700; }
.doc-sec.dark { margin: 24px -28px 0; padding: 48px 28px 32px; border-radius: var(--r); background: linear-gradient(160deg, #001838, #0b2a6b 60%, #2b2f8c); color: #fff; border: 0; }
.doc-sec.dark p { color: #dbe5fa; }
.doc-sec.dark .doc-n { color: #9fc0ff; }
.lbl { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.lbl.cur { background: #e3f4ee; color: #1f6b52; }
.lbl.road { background: #fff3dc; color: #8a5a00; }
.lbl.vis { background: #efe9ff; color: #4b3aa8; }
.doc-name, .doc-real, .doc-logic, .doc-road, .doc-origin { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.doc-name { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc-name li { padding: 16px; border-radius: 14px; background: linear-gradient(160deg, #f1f6ff, #f4f0ff); border: 1px solid #dfe5f6; }
.doc-name b { display: block; font-family: var(--num); font-size: 20px; color: var(--nemo-d); }
.doc-name span { font-size: 14px; }
.doc-real li, .doc-logic li, .doc-road li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #edf1f8; font-size: 15px; }
.doc-real b, .doc-logic b, .doc-road b { color: var(--nemo-d); }
.doc-origin li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 3px solid var(--nemo); background: #f6f8fd; border-radius: 0 10px 10px 0; font-size: 15px; }
.doc-origin span { color: var(--ink3); }
.doc-moments { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.doc-moments li { padding: 12px 14px; border-radius: 12px; background: #f3f6fc; font-size: 14.5px; }
.doc-moments b { display: inline-block; min-width: 3.4em; color: var(--nemo-d); }
.doc-fact { padding: 14px 18px; border-radius: 12px; background: #eef7f3; border: 1px solid #cfe9dd; }
.doc-fact b { color: #1f6b52; }
.doc-shown { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-shown li { padding: 7px 13px; border-radius: 999px; background: #eef4ff; font-weight: 700; font-size: 14px; }
.doc-shown li::before { content: "✓ "; color: var(--ok); }
.doc-src { margin-top: 10px; }
.doc-src li { border: 1px solid var(--line); }
.doc-t { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 10px 0; }
.doc-t th { text-align: left; width: 26%; padding: 12px 12px 12px 0; vertical-align: top; color: var(--nemo-d); }
.doc-t td { padding: 12px 12px 12px 0; vertical-align: top; color: var(--ink2); }
.doc-t td:nth-child(2) { white-space: nowrap; color: var(--ink); }
.doc-t tr { border-top: 1px solid #edf1f8; }
.doc-plans { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-plans li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.doc-plans li.key { background: var(--grad); color: #fff; border-color: transparent; }
.doc-plans .num { font-size: 30px; font-weight: 800; }
.doc-plans small { font-size: 13px; opacity: .9; }
.doc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 30px; }
.unsub { max-width: 640px; margin: 10px 0 80px; }
.unsub p { margin: 0 0 14px; font-size: 16px; }

@media (max-width: 900px) {
  .doc-req { grid-template-columns: 1fr; gap: 24px; }
  .doc-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-name { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .doc-form, .doc-done, .unsub { padding: 20px; }
  .doc-hero { padding: 96px 0 34px; }
  .doc-real li, .doc-logic li, .doc-road li { grid-template-columns: 1fr; gap: 2px; }
  .doc-moments { grid-template-columns: 1fr; }
  .doc-sec.dark { margin: 24px -16px 0; padding: 40px 16px 24px; }
  .doc-t, .doc-t tbody, .doc-t tr, .doc-t th, .doc-t td { display: block; width: auto; }
  .doc-t tr { padding: 10px 0; }
  .doc-t th, .doc-t td { padding: 0; }
  .doc-t td:nth-child(2) { margin: 2px 0; }
  .doc-plans { grid-template-columns: 1fr; }
  .cta2 .btn, .doc-cta .btn, .doc-done-next .btn { flex: 1 1 100%; justify-content: center; }
}

/* I6: TOP — 読むサイトから、見れば分かるサイトへ */
.s-issue { background: radial-gradient(1000px 500px at 85% 0%, rgba(108, 99, 227, .10), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(75, 127, 230, .10), transparent 60%), #fff; text-align: center; }
br.sp { display: none; }
.pf-h { margin: 0 0 clamp(28px, 4vw, 48px); font-size: clamp(34px, 5vw, 64px); line-height: 1.3; letter-spacing: .08em; font-weight: 700; color: var(--ink); }
.sx { max-width: 980px; margin: 0 auto; }
.sx-ax, .sx-row { display: grid; grid-template-columns: 110px 1fr 1fr; column-gap: 56px; align-items: center; }
.sx-ax { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--ink3); }
.sx-row { margin-top: 18px; padding: 18px 0; }
.sx-row.post { border-top: 1px dashed #cfd6ea; }
.sx-k { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: .08em; text-align: left; }
.sx-row.pre .sx-k { color: var(--nemo-d); }
.sx-row.post .sx-k { color: var(--violet); }
.sx-c { position: relative; display: grid; justify-items: center; }
.sx-c + .sx-c::before { content: "→"; position: absolute; left: -44px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 700; color: #b4bdd6; }
.scr-t { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink2); }
.scr-bk, .scr-inv, .scr-web { width: 100%; max-width: 330px; border-radius: 20px; background: #fff; text-align: left; box-shadow: 0 22px 50px -30px rgba(0, 24, 56, .5); }
.scr-bk { padding: 16px 18px; border: 2px solid rgba(31, 111, 209, .5); }
.scr-big { margin: 6px 0 4px; display: flex; align-items: baseline; gap: 10px; }
.scr-big small { font-size: 13px; font-weight: 700; color: var(--ink3); }
.scr-big b { font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scr-big b small, .scr-inv b small, .scr-web b small { font-size: .4em; margin-left: 2px; }
.scr-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; font-size: 11.5px; color: var(--ink3); }
.scr-mini li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted #e1e6f2; }
.scr-mini b { font-weight: 600; }
.scr-btn { margin: 12px 0 0; padding: 9px; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--grad); }
.scr-inv { padding: 16px 20px 18px; border-top: 6px solid #d5dbea; }
.scr-inv b { display: block; margin: 4px 0 8px; font-size: clamp(38px, 4vw, 52px); font-weight: 800; line-height: 1.05; }
.scr-inv em { display: inline-block; padding: 3px 12px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 800; color: #fff; }
.scr-inv.same { opacity: .62; }
.scr-inv.same b { color: var(--ink2); }
.scr-inv.same em { background: var(--ok); }
.scr-inv.late { border-top-color: var(--violet); transform: rotate(-1.5deg); box-shadow: 0 26px 60px -26px rgba(80, 72, 200, .55); }
.scr-inv.late b { color: var(--violet); }
.scr-inv.late em { background: var(--violet); }
.scr-web { overflow: hidden; border: 1px solid var(--line); }
.scr-bar { margin: 0; display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #eef1f8; }
.scr-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9d0e2; }
.scr-bar span { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--ink3); letter-spacing: .1em; }
.scr-web .scr-t { padding: 14px 20px 0; }
.scr-web b { display: block; padding: 0 20px 18px; font-size: clamp(52px, 5.4vw, 72px); font-weight: 800; line-height: 1.1; color: #1f8ad1; }
.pf-add { margin: 30px auto 0; display: inline-grid; gap: 8px; text-align: left; }
.pf-add p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14.5px; }
.pf-add em { min-width: 4.2em; padding: 2px 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; text-align: center; color: #fff; background: var(--ok); }
.pf-add .ng em { background: var(--violet); }
.pf-add span { padding: 3px 10px; border-radius: 8px; background: #eef3fa; font-weight: 700; }
.pf-add span.new { background: #e3edfb; color: var(--nemo-d); }
.pf-add span.up { background: #eeeefb; color: var(--violet); }
.pf-add i { font-style: normal; color: var(--ink3); }
.pf-add b { font-size: 16px; }
.pf-src { margin: 20px auto 0; max-width: 820px; font-size: 12px; color: var(--ink3); }
.pf-src > span { font-weight: 700; margin-right: 6px; }
.pf-src a { margin: 0 8px; font-weight: 700; color: var(--nemo-d); }
.pf-src a span { margin-left: 6px; font-weight: 500; color: var(--ink3); }
.pf-src small { display: block; margin-top: 4px; font-size: 11.5px; }
.pf-ans { margin: clamp(64px, 8vw, 104px) auto 0; max-width: 960px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; text-align: left; }
.pf-ans-s { margin: 18px 0 0; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: .06em; color: var(--nemo-d); }
.pf-ans .phone .scr { min-height: 0; }
.pf-ans .row b { color: var(--ink); }
.pf-agree { margin: 12px 16px 6px; padding: 11px; border-radius: 999px; text-align: center; font-weight: 700; color: #fff; background: var(--grad); }
/* ひとりで — 一日の着信 */
.dy { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.dy::before { content: ""; position: absolute; left: 4%; right: 4%; top: 58px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ffd38a, #ff9cba, #8b84f0, #3a4a9c); }
.dy-s { display: grid; justify-items: center; gap: 6px; text-align: center; }
.dy-s > b { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; }
.dy-s > .num { position: relative; z-index: 1; padding: 4px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font-size: 14px; font-weight: 700; }
.dy-ring { margin-top: 10px; position: relative; padding: 12px 14px 12px; border-radius: 16px; background: #fff; border: 2px solid #ff9cba; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.4; box-shadow: 0 16px 34px -24px rgba(181, 71, 106, .7); }
.dy-ring::before { content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; background: #fff; border-left: 2px solid #ff9cba; border-top: 2px solid #ff9cba; transform: translateX(-50%) rotate(45deg); }
.dy-ring em { display: block; margin-bottom: 4px; font-style: normal; font-size: 11px; letter-spacing: .12em; color: #b5476a; }
.dy-ring em::before { content: "📞 "; }
.dy.on .dy-ring { animation: dyRing .45s calc(var(--d, 0) * .3s + .2s) both; }
@keyframes dyRing { 0% { transform: none; } 45% { transform: scale(1.08) rotate(-3deg); } 100% { transform: none; } }
.dy-to { margin: 38px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.dy-jobs { margin: 0; display: flex; gap: 8px; }
.dy-jobs span { padding: 8px 16px; border-radius: 999px; background: #f1f3f9; color: var(--ink2); font-weight: 700; font-size: 16px; text-decoration: line-through; text-decoration-color: #b5476a; text-decoration-thickness: 3px; }
.dy-arr { font-style: normal; font-size: 28px; color: var(--nemo-d); font-weight: 800; }
.dy-arr::before { content: "→"; }
.dy-nem { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 18px 40px -22px rgba(31, 111, 209, .8); }
.dy-nem img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 3px; }
/* 営業時間外 — 漫画の流れ */
.nf { margin-top: 30px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.nf + .nf { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(169, 184, 255, .25); }
.nf-k { margin: 0; justify-self: start; white-space: nowrap; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.nf.nf-lose .nf-k { background: rgba(255, 255, 255, .12); color: #c9d3f5; }
.nf.nf-win .nf-k { background: var(--grad); color: #fff; }
.nf-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 150px; gap: 26px; align-items: center; }
.nf.nf-win .nf-r { grid-template-columns: 1fr 250px 1fr; }
.nf-f { margin: 0; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.nf-f img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.nf-f figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; background: linear-gradient(0deg, rgba(0, 24, 56, .9), transparent); color: #fff; font-size: 15px; font-weight: 800; }
.nf-f figcaption b { font-family: var(--num); font-size: 12px; margin-right: 8px; color: #ffd38a; }
.nf-r > * + *::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: #8f9bd1; font-weight: 800; }
.nf-r > * { position: relative; overflow: visible; }
.nf-f { overflow: visible; }
.nf-f img { border-radius: 14px; }
.nf-f figcaption { border-radius: 0 0 14px 14px; }
.nf-end { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 3px solid #ff9cba; color: #ffb8cc; text-align: center; transform: rotate(-8deg); }
.nf-end b { font-size: 19px; line-height: 1.35; }
.nf.nf-win .phone { width: 250px; justify-self: center; }
.nf.nf-win .phone .scr { min-height: 0; }
.nf.nf-win .rv b { color: var(--ink); }
.nf.nf-win .done-badge { opacity: 1; transform: none; }
.s-gr .gr-body { margin-top: 22px; align-items: start; }
/* ROI */
.roi-bars { margin-top: 22px; display: grid; gap: 10px; }
.roi-bars p { margin: 0; display: grid; grid-template-columns: 110px 1fr 130px; gap: 14px; align-items: center; }
.roi-bars span { font-size: 13px; font-weight: 700; color: var(--ink2); }
.roi-bars i { display: block; height: 22px; border-radius: 6px; }
.roi-bars .g i { background: var(--grad); }
.roi-bars .s i { background: #cfd6e6; }
.roi-bars b { font-size: 22px; text-align: right; }
/* 事務 — いま自分で ↔ NEMORIAが */
.mp { padding: 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.mp-h { margin: 0 0 10px; display: grid; grid-template-columns: 1fr 44px 1fr; font-size: 13px; letter-spacing: .1em; color: var(--ink3); }
.mp-h .n { grid-column: 3; color: var(--nemo-d); }
.mp ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp li { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; }
.mp-y { padding: 8px 12px; border-radius: 10px; background: #f1f3f9; color: var(--ink3); font-weight: 700; font-size: 14.5px; text-decoration: line-through; text-decoration-color: rgba(120, 128, 160, .6); }
.mp li > i { height: 2px; margin: 0 6px; background: linear-gradient(90deg, #cfd6e6, var(--nemo)); position: relative; }
.mp li > i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--nemo); }
.mp-n { padding: 8px 12px; border-radius: 10px; background: #e7f0fc; color: var(--nemo-d); font-weight: 800; font-size: 14.5px; }
.mp.on li { animation: mpIn .5s calc(var(--i) * .08s) both; }
@keyframes mpIn { from { transform: translateX(-10px); } to { transform: none; } }
/* 違い — 2つの画面 */
.vx { margin-top: 30px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: stretch; }
.vx-p { padding: 22px; border-radius: var(--r); }
.vx-p.g { background: #f3f5fa; }
.vx-p.n { background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 26px 60px -36px rgba(31, 111, 209, .6); }
.vx-k { margin: 0 0 14px; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--ink2); }
.vx-p.n .vx-k { color: var(--nemo-d); }
.vx-scr { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.vx-t { margin: 0 0 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; }
.vx-sl { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-sl b { padding: 8px 14px; border-radius: 10px; border: 1.5px solid #cfd6e6; font-size: 16px; }
.vx-p.n .vx-sl b { border-color: var(--nemo); color: var(--nemo-d); }
.vx-p.n .vx-sl b.x { border-color: #e1e5ef; color: #b9c0d3; text-decoration: line-through; }
.vx-ch { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.vx-ch span { padding: 5px 12px; border-radius: 999px; background: #e7f0fc; color: var(--nemo-d); font-size: 13.5px; font-weight: 700; }
.vx-ch span + span::before { content: "＋"; margin: 0 6px 0 -2px; color: var(--ink3); }
.vx.on .vx-ch span { animation: mpIn .4s calc(var(--i) * .15s + .2s) both; }
/* 機能の大分類 */
.bx { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; counter-reset: bx; }
.bx a { height: 100%; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 18px 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); position: relative; transition: transform .2s, box-shadow .2s; }
.bx a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(31, 111, 209, .7); }
.bx b { font-size: 34px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx span { font-size: 14px; font-weight: 800; text-align: center; }
.bx li + li a::before { content: "›"; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); color: #b4bdd6; font-weight: 800; }
/* 分析 — ヒートマップと進み方 */
.gr-fun { padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: grid; gap: 10px; }
.gr-fh { margin: 0 0 4px; font-size: 14px; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; }
.gr-fh small { font-size: 11.5px; font-weight: 700; color: var(--ink3); padding: 2px 8px; border-radius: 999px; background: #eef1f8; }
.gr-fun > p:not(.gr-fh):not(.ex) { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.gr-fun i { display: block; height: 20px; width: var(--w); border-radius: 6px; background: var(--grad); transform-origin: left; }
.gr-fun.on i { animation: grW .8s both; }
@keyframes grW { from { transform: scaleX(.3); } to { transform: none; } }
.gr-fun b { text-align: right; font-size: 16px; }
.gr-fun .ex { margin: 0; }
/* 生まれた — 困ったこと → 機能 */
.o-m { display: flex; align-items: center; gap: 8px; }
.o-m i { font-style: normal; color: #ff9cba; font-weight: 800; }
.o-n .o-m { color: #6fe0c0; font-weight: 800; font-size: 16px; }
/* 料金 — 単価ごとの件数 */
.be2 { list-style: none; margin: 30px auto 0; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: end; }
.be2 li { display: grid; justify-items: center; gap: 8px; }
.be2 li > b { font-size: 22px; color: var(--ink2); }
.be2 li > i { display: block; width: 100%; max-width: 110px; height: calc(var(--h) * 26px); border-radius: 10px 10px 4px 4px; background: #d7deec; }
.be2 li > span { font-size: 13px; font-weight: 700; color: var(--ink3); }
.be2 li > span b { font-size: 15px; color: var(--ink2); }
.be2 li.key > b { font-size: 34px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.be2 li.key > i { background: var(--grad); }
.be2 li.key > span, .be2 li.key > span b { color: var(--nemo-d); }
.be-one { margin: 26px 0 0; text-align: center; font-size: 15px; color: var(--ink2); }
.be-one .more { margin-left: 10px; }
@media (prefers-reduced-motion: reduce) { .dy.on .dy-ring, .mp.on li, .vx.on .vx-ch span, .gr-fun.on i { animation: none; } }
@media (max-width: 1100px) {
  .bx { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bx li + li a::before { display: none; }
  .nf { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  br.sp { display: inline; }
  .sx-ax, .sx-row { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .sx-ax span { display: none; }
  .sx-k { grid-column: 1 / -1; margin-bottom: 10px; font-size: 22px; }
  .sx-row { margin-top: 6px; padding: 14px 0; align-items: start; }
  .sx-c + .sx-c::before { left: -20px; font-size: 18px; }
  .scr-bk { padding: 12px; }
  .scr-t { font-size: 11.5px; }
  .scr-big { flex-direction: column; align-items: flex-start; gap: 0; }
  .scr-big b { font-size: 32px; }
  .scr-mini { grid-template-columns: 1fr; font-size: 10px; }
  .scr-btn { font-size: 11.5px; padding: 7px; }
  .scr-inv { padding: 12px 12px 14px; }
  .scr-inv b { font-size: 32px; }
  .scr-inv em { font-size: 11px; padding: 2px 8px; }
  .scr-web .scr-t { padding: 10px 12px 0; }
  .scr-web b { padding: 0 12px 14px; font-size: 40px; }
  .pf-add { display: grid; justify-items: center; }
  .pf-add p { font-size: 12px; gap: 3px 4px; justify-content: center; }
  .pf-add span { padding: 2px 6px; }
  .pf-add em { min-width: 0; padding: 2px 7px; }
  .pf-add b { font-size: 14px; }
  .pf-src a { display: inline-block; margin: 2px 6px; }
  .pf-ans { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .dy { grid-template-columns: 1fr; gap: 12px; padding-left: 26px; }
  .dy::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; background: linear-gradient(180deg, #ffd38a, #ff9cba, #8b84f0, #3a4a9c); }
  .dy-s { grid-template-columns: 52px 64px 1fr; align-items: center; justify-items: start; text-align: left; gap: 8px; }
  .dy-s > b { font-size: 16px; }
  .dy-s > .num { font-size: 12px; padding: 2px 8px; }
  .dy-ring { margin: 0; padding: 8px 10px; font-size: 13px; }
  .dy-ring::before { display: none; }
  .dy-ring em { display: inline; margin: 0 6px 0 0; }
  .dy-to { flex-direction: column; gap: 10px; }
  .dy-jobs span { font-size: 14px; padding: 6px 12px; }
  .dy-arr { transform: rotate(90deg); }
  .nf-r { grid-template-columns: 1fr 1fr; gap: 14px 22px; }
  .nf.nf-win .nf-r { grid-template-columns: 1fr; }
  .nf.nf-win .nf-f img { aspect-ratio: 16 / 9; }
  .nf.nf-win .phone { width: 250px; }
  .nf-r > * + *::before { display: none; }
  .nf-f figcaption { font-size: 13px; padding: 18px 8px 6px; }
  .nf-end { width: 120px; justify-self: center; }
  .nf-end b { font-size: 15px; }
  .roi-bars p { grid-template-columns: 76px 1fr 96px; gap: 8px; }
  .roi-bars b { font-size: 17px; }
  .mp { padding: 16px 12px; }
  .mp-h, .mp li { grid-template-columns: 1fr 26px 1fr; }
  .mp-y, .mp-n { font-size: 12.5px; padding: 7px 8px; }
  .vx { grid-template-columns: 1fr; gap: 14px; }
  .bx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bx li:last-child { grid-column: 1 / -1; }
  .bx a { grid-auto-flow: column; justify-content: start; gap: 10px; padding: 12px 14px; }
  .bx b { font-size: 26px; }
  .bx span { text-align: left; font-size: 13.5px; }
  .gr-fun > p:not(.gr-fh):not(.ex) { grid-template-columns: 104px 1fr; font-size: 12px; }
  .be2 { gap: 8px; }
  .be2 li > b { font-size: 17px; }
  .be2 li.key > b { font-size: 24px; }
  .be2 li > i { height: calc(var(--h) * 18px); }
  .be2 li > span { font-size: 11px; text-align: center; }
  .be2 li > span b { font-size: 12.5px; }
}
/* I9: pricing — one plan */
.p3 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; align-items: stretch; }
.p3 > div { padding: 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.p3-n { border: 2px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box !important; box-shadow: 0 26px 60px -36px rgba(31, 111, 209, .6); }
.p3-k { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--ink2); }
.p3-n .p3-k { color: var(--nemo-d); }
.p3-p { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; }
.p3-p b { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.1; }
.p3-n .p3-p b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p3-p small { font-size: 13px; color: var(--ink3); font-weight: 700; }
.p3-s { margin: 6px 0 0; font-size: 14.5px; font-weight: 800; }
.p3-d { margin: 6px 0 0; font-size: 13.5px; color: var(--ink2); }
.p3-t { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #eef4fd; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.p3-t p { margin: 0; font-size: 13px; color: var(--ink2); }
.p3-t p b { margin-right: 8px; font-size: 15px; color: var(--nemo-d); }
.p3-t ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.p3-t li { padding: 3px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--nemo-d); }
.p3-t .p3-back { font-weight: 700; color: var(--ink3); }
.p3-t .p3-back::before { content: "↩ "; }
.qk { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--ink3); }
.qa { margin: 4px 0 18px !important; font-size: clamp(28px, 3.4vw, 42px) !important; }
.one { display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 10px; padding: 22px; border-radius: var(--r); background: #f5f8fd; }
.one-in { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.one-in span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #d6e2f4; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.one-arr { height: 3px; background: var(--grad); position: relative; }
.one-arr::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 10px solid #5b5bd6; }
.one-to { margin: 0; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--grad); color: #fff; font-size: 20px; font-weight: 800; line-height: 1.3; box-shadow: 0 20px 50px -24px rgba(31, 111, 209, .8); }
.one.on .one-in span { animation: mpIn .4s calc(var(--i) * .04s) both; }
.one-say { margin: 18px 0 0; font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; line-height: 1.6; }
.one-cut { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.one-cut s { padding: 4px 10px; border-radius: 8px; background: #f3f0f7; color: #8a7f9c; font-size: 12.5px; font-weight: 700; text-decoration-color: #b5476a; text-decoration-thickness: 2px; }
.w55 { border-radius: var(--r); background: #fff; border: 1px solid var(--line); padding: 8px 22px 14px; }
.w55-h, .w55-r { display: grid; grid-template-columns: 1fr 40px 1.6fr; align-items: center; gap: 8px; }
.w55-h { margin: 8px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--ink3); }
.w55-h span:last-child { color: var(--nemo-d); }
.w55-r { padding: 10px 0; border-top: 1px solid #edf1f8; }
.w55-g { font-size: 14.5px; color: var(--ink3); font-weight: 700; }
.w55-r i { font-style: normal; color: #b4bdd6; font-weight: 800; text-align: center; }
.w55-n { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.free-say { margin: 0; font-size: 16px; color: var(--ink2); }
.free-say a { margin-left: 10px; font-weight: 700; }
@media (max-width: 760px) {
  .p3 { grid-template-columns: 1fr; }
  .p3 > div { padding: 18px; }
  .one { grid-template-columns: 1fr; justify-items: center; padding: 16px; }
  .one-arr { width: 3px; height: 34px; background: linear-gradient(180deg, #0098b0, #5b5bd6); }
  .one-arr::after { right: auto; left: -6px; top: auto; bottom: -8px; border: 7px solid transparent; border-top: 10px solid #5b5bd6; }
  .one-in { justify-content: center; }
  .one-in span { font-size: 12.5px; padding: 5px 10px; }
  .one-to { width: 110px; height: 110px; font-size: 18px; }
  .w55 { padding: 6px 14px 10px; }
  .w55-h, .w55-r { grid-template-columns: 1fr 22px 1.5fr; gap: 6px; }
  .w55-g { font-size: 12.5px; }
  .w55-n { font-size: 13.5px; }
}