/* Pentra LP — site stylesheet.
   Part 1 is the earlier six layers merged in cascade order (dead declarations removed).
   Part 2 (direction B) at the end sets the hero, the feature tiles, video, data, final CTA and the sticky bar. */

/* ---- from pentra.css ---- */
:root { --stage: #0e1117; --stage-2: #161a22; --stage-line: #272d38; --stage-text: #edf0f5; --stage-sub: #a6aebb; --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif; --wrap: 1200px; --gutter: 32px; --nav-h: 64px; --sec: 104px; }
* { box-sizing: border-box; }
*::before { box-sizing: border-box; }
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); font-family: var(--font); font-size: 16px; line-height: 1.8; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; overflow-x: clip; }
img { display: block; max-width: 100%; }
video { display: block; max-width: 100%; }
svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
input { font: inherit; color: inherit; }
h1 { margin: 0; }
h2 { margin: 0; }
h3 { margin: 0; }
h4 { margin: 0; }
p { margin: 0; }
ul { margin: 0; }
ol { margin: 0; }
dl { margin: 0; }
dd { margin: 0; }
figure { margin: 0; }
blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.nw { display: inline-block; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }
.h3 { font-size: 20px; line-height: 1.5; }
.body-s { font-size: 15px; line-height: 1.8; }
.note { font-size: 13.5px; line-height: 1.75; }
.sec { padding: var(--sec) 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 22px; border: 1px solid transparent; font-size: 15.5px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--t-fast) var(--ease); }
.btn:hover svg.arrow { transform: translateX(2px); }
.btn-ghost { background: #fff; color: var(--ink); }
.btn-lg { padding: 0 26px; }
.btn-sm { padding: 0 15px; }
.btn-block { width: 100%; }
.textlink { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 15px; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.textlink svg { width: 16px; height: 16px; flex: none; }
.play-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; }
.play-dot svg { width: 10px; height: 10px; margin-left: 2px; }
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 44px; }
.nav-logo { display: flex; flex: none; }
.nav-logo img { width: auto; }
.nav-links { display: flex; font-weight: 500; }
.nav-links a { text-decoration: none; padding: 8px 0; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-login { font-weight: 500; text-decoration: none; color: var(--sub); padding: 8px 0; }
.nav-login:hover { color: var(--ink); }
.nav-menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.nav-menu-btn svg { width: 22px; height: 22px; }
.nav-drawer { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49; background: #fff; border-bottom: 1px solid var(--line); padding: 4px 20px 22px; box-shadow: 0 24px 40px -24px rgba(19, 23, 32, .25); }
.nav-drawer a.dl { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 17px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.nav-drawer .btn { margin-top: 18px; }
.nav-drawer .note { margin-top: 10px; }
.sec-top { margin-bottom: 44px; }
.sec-top .body-s { margin-top: 14px; }
.dm-n { display: inline-grid; place-items: center; padding: 0 5px; margin-right: 8px; letter-spacing: .02em; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.1); color: inherit; }
.cand { display: grid; gap: 6px; width: 100%; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stage-line); background: transparent; color: var(--stage-text); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cand:hover { border-color: #3c4453; background: var(--stage-2); }
.cand[aria-checked="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.cand .why-tag { justify-self: start; background: transparent; color: var(--stage-sub); border-color: var(--stage-line); }
.cand[aria-checked="true"] .why-tag { background: var(--bg-soft); color: var(--ink-2); border-color: var(--line); }
.cand-t { font-size: 14.5px; line-height: 1.55; }
.cand-m { color: var(--stage-sub); font-variant-numeric: tabular-nums; }
.cand[aria-checked="true"] .cand-m { color: var(--sub); }
.src { white-space: nowrap; }
.src-ai { background: var(--navy-soft); color: var(--navy); }
.why-tag { font-size: 12px; padding: 1px 7px; border: 1px solid var(--line); white-space: nowrap; }
.dm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm-sel { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.dm-title { line-height: 1.5; margin-top: 6px; }
.dm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 8px; }
.dm-rule { color: var(--ink-2); padding-left: 10px; line-height: 1.5; }
.dm-rule b { color: var(--teal); margin-right: 6px; }
.dm-kpis { display: flex; gap: 16px; margin-left: auto; }
.dm-kpis div { display: flex; align-items: baseline; gap: 5px; }
.dm-kpis dt { font-size: 12.5px; color: var(--sub); }
.dm-kpis dd { font-size: 15px; font-variant-numeric: tabular-nums; }
.dm-kpis small { font-size: 12px; font-weight: 500; margin-left: 1px; }
.dm-kpis .dm-period dd { font-size: 12.5px; font-weight: 500; color: var(--sub); }
.rows-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 56px; gap: 20px; padding: 10px 0 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.rows-h .dm-n { background: var(--bg-soft); color: var(--sub); }
.ok-h .dm-n { background: var(--bg-soft); color: var(--sub); }
.rows-h span:last-child { text-align: center; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 56px; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: start; }
@keyframes row-flash { from { background: var(--navy-soft); } to { background: transparent; } }
.w-t { display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; }
.w-b { font-size: 13.5px; color: var(--sub); line-height: 1.65; margin: 3px 0 0 30px; }
.pri { flex: none; margin-top: 1px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn); }
.pri-h { background: var(--del-bg); color: var(--del); }
.pri-k { background: var(--bg-soft); color: var(--sub); }
.row-at { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--sub); margin-bottom: 3px; }
.off-tag { display: none; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 0 7px; border: 1px dashed var(--line-2); border-radius: 5px; }
.row.is-off .off-tag { display: inline-block; }
.ln { display: grid; grid-template-columns: 46px 1fr; gap: 8px; font-size: 15px; line-height: 1.6; padding: 2px 0; }
.ln i { font-style: normal; height: 21px; margin-top: 1px; display: grid; place-items: center; white-space: nowrap; }
.ln-del i { background: var(--del-bg); color: var(--del); }
.ln-del span { color: var(--del); text-decoration: line-through; text-decoration-thickness: 1px; }
.ln-ins i { background: var(--ins-bg); color: var(--ins); }
.ln-ins span { color: var(--ins); }
.ln-chg i { background: var(--warn-bg); color: var(--warn); }
.ln-chg span { color: var(--ink); }
.ln-keep i { background: var(--bg-soft); color: var(--sub); }
.ln-keep span { color: var(--sub); }
.row.is-off .ln span { color: var(--sub); font-weight: 400; text-decoration: none; }
.row.is-off .ln i { background: transparent; border: 1px solid var(--line-2); color: var(--sub); }
.row-adopt { display: grid; justify-items: center; gap: 3px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; padding-top: 2px; }
.row-adopt input { appearance: none; -webkit-appearance: none; margin: 0; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.row-adopt input::after { content: ""; border: solid #fff; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.row-adopt input:checked::after { opacity: 1; }
.row-adopt input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.row-na { font-weight: 500; color: var(--mute); cursor: default; padding-top: 4px; font-size: 12px; }
.row-keep .w-t { font-weight: 500; color: var(--sub); }
.rows-foot { font-size: 13px; color: var(--sub); padding: 10px 0 14px; line-height: 1.6; }
.rows-foot b { color: var(--ink-2); font-weight: 600; }
.ok-h { display: flex; align-items: center; font-size: 14px; margin-bottom: 8px; }
.ok-count { margin-left: 12px; font-size: 12.5px; color: var(--navy); background: var(--navy-soft); padding: 1px 8px; }
.ok-list { display: none; }
.risk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; background: var(--warn-bg); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.risk.is-done { background: var(--ins-bg); }
.risk.is-none { background: #fff; border: 1px solid var(--line); }
.risk-t { display: flex; gap: 8px; color: var(--warn); }
.risk.is-done .risk-t { color: var(--ins); }
.risk.is-none .risk-t { color: var(--sub); }
.mini { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.mini:hover { border-color: var(--ink); }
.ok-r { display: grid; grid-template-columns: auto auto; gap: 6px 8px; align-items: center; }
.ok-r .btn { --h: 42px; font-size: 14.5px; padding: 0 16px; border-radius: 10px; }
.pub-note { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--sub); }
.pub-msg { grid-column: 1 / -1; max-width: 360px; font-size: 13px; line-height: 1.6; color: var(--ink-2); background: var(--navy-soft); border-radius: 8px; padding: 8px 10px; }
.why-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.why-kpis div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.why-kpis dt { font-size: 12px; color: var(--sub); }
.why-kpis dd { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.3; }
.why-kpis small { font-size: 12px; font-weight: 500; margin-left: 1px; }
.why-q { font-size: 13.5px; color: var(--sub); margin: 10px 0 4px; }
.why-q b { color: var(--ink); margin: 0 4px 0 8px; }
.finds li { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.f-t { font-size: 15px; font-weight: 600; line-height: 1.55; }
.f-r { font-size: 13.5px; color: var(--sub); line-height: 1.65; margin-top: 2px; }
.why-next { font-size: 13.5px; color: var(--ink-2); margin-top: 12px; }
.rd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.rd-now { font-size: 14.5px; color: var(--sub); flex: 1 1 320px; }
.rd-now b { color: var(--ink); font-weight: 600; }
.rd-seg { display: none; }
.seg { display: inline-flex; border: 1px solid var(--line); padding: 3px; }
.seg button { height: 38px; padding: 0 16px; border: 0; background: none; font-size: 14px; color: var(--sub); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.legend { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--sub); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 0 6px; height: 20px; border-radius: 5px; display: grid; place-items: center; }
.lg-chg { background: var(--warn-bg); color: var(--warn); }
.lg-ins { background: var(--ins-bg); color: var(--ins); }
.lg-chk { background: #fff; color: var(--warn); border: 1px solid var(--warn-line); }
.rd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.rd-doc { border: 1px solid var(--line); padding: 24px 28px 28px; background: #fff; min-width: 0; }
.rd-doc[data-doc="before"] { background: #fbfbfa; }
.rd-label { font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 14px; display: flex; gap: 10px; align-items: baseline; }
.rd-label span { font-weight: 500; }
.rd-h { font-size: 20px; line-height: 1.55; margin-bottom: 10px; }
.rd-s { font-size: 17px; line-height: 1.6; margin: 18px 0 4px; }
.rd-p { font-size: 16px; line-height: 1.95; color: var(--ink-2); }
.rd-p + .rd-p { margin-top: 10px; }
.rd-cta { margin: 12px 0; padding: 12px 14px; border: 1px dashed var(--ins-line); border-radius: 10px; font-size: 15px; line-height: 1.75; }
.rd-btn { margin-top: 14px; }
.rd-btn-in { display: inline-block; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--ink); font-size: 14.5px; font-weight: 600; }
.mk-chg { border-radius: 3px; padding: 0 1px; }
.mk-ins { border-radius: 3px; padding: 0 1px; }
.mk-old { border-radius: 3px; padding: 0 1px; }
.mk-chg { background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn-line); }
.mk-ins { background: var(--ins-bg); box-shadow: inset 0 -2px 0 var(--ins-line); }
.mk-old { background: #f6eced; box-shadow: inset 0 -2px 0 #e7b9be; }
.mk-chg::after { display: inline-block; margin: 0 2px 0 4px; padding: 0 5px; border-radius: 4px; vertical-align: 2px; font-weight: 700; line-height: 17px; font-style: normal; }
.mk-ins::after { display: inline-block; margin: 0 2px 0 4px; padding: 0 5px; border-radius: 4px; vertical-align: 2px; font-weight: 700; line-height: 17px; font-style: normal; }
.mk-old::after { display: inline-block; margin: 0 2px 0 4px; padding: 0 5px; border-radius: 4px; vertical-align: 2px; font-weight: 700; line-height: 17px; font-style: normal; }
.mk-l { display: inline-block; margin: 0 2px 0 4px; padding: 0 5px; border-radius: 4px; vertical-align: 2px; font-weight: 700; line-height: 17px; font-style: normal; }
.mk-chg::after { content: "変更"; background: #fff; color: var(--warn); border: 1px solid var(--warn-line); }
.mk-ins::after { content: "追加"; background: #fff; color: var(--ins); border: 1px solid var(--ins-line); }
.mk-old::after { content: "変更対象"; background: #fff; color: var(--del); border: 1px solid #e7b9be; }
mark.chk { background: transparent; color: inherit; box-shadow: inset 0 -2px 0 var(--warn-line); }
.mk-l { background: #fff; color: var(--warn); border: 1px solid var(--warn-line); }
.serp-cap { font-size: 13px; color: var(--sub); margin-bottom: 8px; }
.serp { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fff; }
.serp-url { font-size: 13px; color: var(--sub); }
.serp-t { font-size: 18px; line-height: 1.5; color: #1f2a8a; font-weight: 500; margin: 2px 0 4px; }
.serp-d { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.serp-note { font-size: 14px; color: var(--sub); margin-top: 12px; }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.reasons li { display: grid; gap: 4px; align-content: start; padding: 22px 0 26px; border-top: 1px solid var(--line-2); }
.reasons .src { justify-self: start; margin-bottom: 4px; }
.reasons b { font-size: 19px; font-weight: 700; line-height: 1.45; }
.reasons .fix { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.reasons .fix::before { content: "→ "; color: var(--navy); font-weight: 700; }
.reasons .c { font-size: 14px; color: var(--sub); line-height: 1.7; margin-top: 2px; }
.more { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin-top: 8px; }
.more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-size: 15.5px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-state) var(--ease); }
.more[open] > summary svg { transform: rotate(180deg); }
.more-body { padding: 0 0 20px; font-size: 15px; line-height: 1.85; color: var(--ink-2); max-width: 52em; }
.more-body p + p { margin-top: 10px; }
.more-body table + p { margin-top: 10px; }
.mini-table { width: 100%; max-width: 420px; margin: 12px 0; font-size: 14.5px; }
.mini-table th { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.mini-table td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.mini-table th:first-child { text-align: left; }
.mini-table td:first-child { text-align: left; }
.mini-table thead th { font-size: 13px; color: var(--sub); font-weight: 600; }
.price-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.bill-note { font-size: 14px; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); overflow: hidden; }
.plan { display: grid; grid-template-rows: auto auto auto auto 1fr; padding: 26px 24px 28px; background: #fff; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
.badge { font-size: 12px; color: var(--navy); background: var(--navy-soft); padding: 2px 8px; white-space: nowrap; }
.plan-for { font-size: 14px; color: var(--sub); line-height: 1.65; margin-top: 6px; min-height: 3.3em; }
.price { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.price .y { font-size: 20px; }
.price .a { font-size: 36px; line-height: 1.1; }
.price .u { font-size: 14px; color: var(--sub); margin-left: 2px; }
.price-sub { font-size: 13.5px; color: var(--sub); margin-top: 6px; min-height: 2.9em; line-height: 1.6; }
.plan .btn { margin-top: 18px; width: 100%; }
.plan-cta-note { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.6; min-height: 3.2em; }
.plan-keys { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.plan-keys li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.plan-keys li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 5px; border: solid var(--navy); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.plan-keys li.no { color: var(--sub); }
.plan-keys li.no::before { border: 0; height: 1.5px; width: 9px; top: .78em; transform: none; background: var(--mute); }
.ent { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 16px; padding: 20px 24px; border: 1px solid var(--line); }
.ent b { font-size: 17px; margin-right: 12px; }
.ent span { font-size: 15px; color: var(--ink-2); }
.compare { margin-top: 16px; border: 1px solid var(--line); }
.compare > summary { list-style: none; cursor: pointer; padding: 18px 24px; font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; }
.compare > summary::-webkit-details-marker { display: none; }
.compare > summary svg { width: 18px; height: 18px; transition: transform var(--t-state) var(--ease); }
.compare[open] > summary svg { transform: rotate(180deg); }
.compare-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.ctable { width: 100%; min-width: 760px; font-size: 14.5px; }
.ctable th { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.ctable td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.ctable th:first-child { text-align: left; }
.ctable td:first-child { text-align: left; }
.ctable thead th { font-size: 13.5px; position: sticky; top: 0; background: #fff; }
.ctable tbody th { font-weight: 500; color: var(--ink-2); }
.ctable .grp th { background: var(--bg-soft); font-size: 13px; font-weight: 600; color: var(--sub); text-align: left; }
.ctable .nope { color: var(--mute); }
.price-foot { margin-top: 18px; display: grid; gap: 4px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 72px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-side .body-s { margin-top: 14px; }
.faq-side .textlink { margin-top: 14px; }
.faq-list { border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: start; padding: 20px 0; line-height: 1.65; }
.qa > summary::-webkit-details-marker { display: none; }
.qa .pm { position: relative; margin: 6px 0 0 auto; }
.qa .pm::before { content: ""; position: absolute; left: 0; right: 0; background: currentColor; transition: transform var(--t-state) var(--ease); }
.qa .pm::after { content: ""; position: absolute; left: 0; right: 0; background: currentColor; transition: transform var(--t-state) var(--ease); }
.qa .pm::after { transform: rotate(90deg); }
.qa[open] .pm::after { transform: rotate(0deg); }
.qa-a { padding: 0 40px 22px 0; line-height: 1.9; }
.qa-a p + p { margin-top: 10px; }
.qa-a a { color: var(--navy); text-underline-offset: 3px; }
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand img { height: 28px; width: auto; }
.foot-brand p { margin-top: 14px; color: var(--sub); line-height: 1.8; font-size: 13.5px; }
.foot h3 { font-size: 13px; margin-bottom: 10px; }
.foot ul { display: grid; gap: 4px; }
.foot li a { text-decoration: none; line-height: 2; }
.foot li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--sub); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vmodal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: #fff; }
.vmodal-box { background: #000; overflow: hidden; }
.vmodal video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vmodal-close { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #e9edf3; height: 34px; padding: 0 14px; font-size: 13px; cursor: pointer; }
.vmodal-close:hover { border-color: #fff; color: #fff; }
.vmodal-close { flex: none; }
@media (max-width: 1180px) { :root { --sec: 104px; } }
@media (max-width: 1180px) { .rows-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 52px; gap: 16px; } }
@media (max-width: 1180px) { .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 52px; gap: 16px; } }
@media (max-width: 1180px) { .dm-kpis { margin-left: 0; } }
@media (max-width: 1180px) { .ok-r { grid-template-columns: auto auto 1fr; } }
@media (max-width: 1180px) { .pub-note { grid-column: 3; grid-row: 1; } }
@media (max-width: 900px) { :root { --sec: 104px; } }
@media (max-width: 900px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rd-cols { gap: 14px; } }
@media (max-width: 900px) { .rd-doc { padding: 20px 20px 24px; } }
@media (max-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .plan:nth-child(3) { border-left: 0; } }
@media (max-width: 900px) { .plan:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 900px) { .faq-side { position: static; } }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 860px) { :root { --nav-h: 56px; --gutter: 16px; } }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 860px) { .nav-login { display: none; } }
@media (max-width: 860px) { .nav-right > .btn { display: none; } }
@media (max-width: 860px) { .nav-menu-btn { display: inline-flex; } }
@media (max-width: 760px) { :root { --sec: 104px; } }
@media (max-width: 760px) { body { font-size: 15.5px; } }
@media (max-width: 760px) { .sec-top { margin-bottom: 26px; } }
@media (max-width: 760px) { .cand { flex: none; width: 244px; scroll-snap-align: start; padding: 10px 12px; gap: 4px; } }
@media (max-width: 760px) { .cand-t { font-size: 14px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 760px) { .dm-sel { display: none; } }
@media (max-width: 760px) { .dm-title { margin-top: 4px; } }
@media (max-width: 760px) { .dm-meta { margin-top: 6px; } }
@media (max-width: 760px) { .dm-kpis { display: none; } }
@media (max-width: 760px) { .rows-h { display: none; } }
@media (max-width: 760px) { .row { gap: 6px 10px; padding: 12px 0; } }
@media (max-width: 760px) { .row-why { grid-column: 1; grid-row: 1; } }
@media (max-width: 760px) { .row-adopt { grid-column: 2; grid-row: 1 / span 2; align-self: start; } }
@media (max-width: 760px) { .row-chg { grid-column: 1; grid-row: 2; } }
@media (max-width: 760px) { .w-b { font-size: 13px; } }
@media (max-width: 760px) { .ln { font-size: 14.5px; } }
@media (max-width: 760px) { .row-keep .row-na { padding-top: 2px; } }
@media (max-width: 760px) { .rows-foot { padding-bottom: 0; } }
@media (max-width: 760px) { .ok-h { display: none; } }
@media (max-width: 760px) { .ok-list { display: grid; gap: 6px; margin-bottom: 12px; } }
@media (max-width: 760px) { .ok-list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); } }
@media (max-width: 760px) { .ok-mark { font-size: 11.5px; font-weight: 700; padding: 0 6px; height: 20px; margin-top: 1px; border-radius: 5px; display: grid; place-items: center; } }
@media (max-width: 760px) { .ok-list .is-on .ok-mark { background: var(--navy); color: #fff; } }
@media (max-width: 760px) { .ok-list .is-off .ok-mark { border: 1px dashed var(--line-2); color: var(--ink-2); } }
@media (max-width: 760px) { .ok-list .is-off { color: var(--sub); } }
@media (max-width: 760px) { .risk { padding: 10px 12px; } }
@media (max-width: 760px) { .ok-r { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) { .ok-r .btn { --h: 48px; width: 100%; } }
@media (max-width: 760px) { .pub-note { grid-column: 1; grid-row: auto; text-align: center; margin-top: -2px; } }
@media (max-width: 760px) { .pub-msg { max-width: none; } }
@media (max-width: 760px) { .rd-bar { gap: 10px; } }
@media (max-width: 760px) { .rd-seg { display: flex; width: 100%; } }
@media (max-width: 760px) { .rd-seg button { flex: 1; } }
@media (max-width: 760px) { .legend { font-size: 12.5px; } }
@media (max-width: 760px) { .rd-cols { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .rd[data-show="after"] .rd-doc[data-doc="before"] { display: none; } }
@media (max-width: 760px) { .rd[data-show="before"] .rd-doc[data-doc="after"] { display: none; } }
@media (max-width: 760px) { .rd-doc { padding: 18px 16px 20px; } }
@media (max-width: 760px) { .rd-h { font-size: 18px; } }
@media (max-width: 760px) { .rd-p { font-size: 15.5px; } }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .reasons li { padding: 16px 0 18px; grid-template-columns: 1fr auto; column-gap: 12px; } }
@media (max-width: 760px) { .reasons .src { grid-column: 2; grid-row: 1; margin: 2px 0 0; } }
@media (max-width: 760px) { .reasons b { grid-column: 1; grid-row: 1; font-size: 17px; } }
@media (max-width: 760px) { .reasons .fix { grid-column: 1 / -1; } }
@media (max-width: 760px) { .reasons .c { grid-column: 1 / -1; } }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .plan + .plan { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .plan { padding: 22px 18px 24px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 12px; align-items: start; } }
@media (max-width: 760px) { .plan > .plan-top { grid-column: 1; grid-row: 1; } }
@media (max-width: 760px) { .plan > .plan-for { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; min-height: 0; } }
@media (max-width: 760px) { .plan > div:nth-of-type(2) { grid-column: 2; grid-row: 1; text-align: right; } }
@media (max-width: 760px) { .plan > div:nth-of-type(2) .price { margin-top: 0; justify-content: flex-end; } }
@media (max-width: 760px) { .plan > div:nth-of-type(2) .price .a { font-size: 28px; } }
@media (max-width: 760px) { .plan > div:nth-of-type(2) .price-sub { margin-top: 0; font-size: 12.5px; min-height: 0; } }
@media (max-width: 760px) { .plan > div:nth-of-type(3) { grid-column: 1 / -1; grid-row: 3; } }
@media (max-width: 760px) { .plan > .plan-keys { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; padding-top: 14px; } }
@media (max-width: 760px) { .plan .btn { margin-top: 12px; } }
@media (max-width: 760px) { .plan-cta-note { margin-top: 6px; min-height: 0; } }
@media (max-width: 760px) { .ent { padding: 18px; } }
@media (max-width: 760px) { .compare > summary { padding: 16px 18px; } }
@media (max-width: 760px) { .price-tools { flex-direction: column; align-items: stretch; } }
@media (max-width: 760px) { .price-tools .seg { display: flex; } }
@media (max-width: 760px) { .price-tools .seg button { flex: 1; } }
@media (max-width: 760px) { .qa > summary { padding: 16px 0; } }
@media (max-width: 760px) { .qa-a { padding-right: 0; } }
@media (max-width: 760px) { .faq-grid { gap: 20px; } }
@media (max-width: 760px) { .foot { padding: 32px 0 24px; } }
@media (max-width: 760px) { .foot-grid { gap: 24px 12px; } }
@media (max-width: 760px) { .foot li a { font-size: 13.5px; line-height: 1.9; } }
@media (max-width: 760px) { .foot-brand p { margin-top: 8px; } }
@media (max-width: 760px) { .foot-bottom { margin-top: 20px; padding-top: 14px; } }
@media (max-width: 374px) { .cand { width: 226px; } }
@media (max-width: 374px) { .why-kpis dd { font-size: 18px; } }
@media (min-width: 761px) { .dm-title { grid-column: 1; grid-row: 1; margin: 0; } }
@media (min-width: 761px) { .dm-tags { grid-column: 2; grid-row: 1; align-self: center; } }
@media (min-width: 761px) { .dm-tags .dm-sel { display: none; } }
@media (min-width: 761px) { .dm-meta { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; } }
@media (min-width: 761px) { .rows-h { padding: 8px 0 6px; } }
@media (min-width: 761px) { .rows-foot { display: none; } }
@media (min-width: 761px) { .ok-h { margin-bottom: 6px; } }
@media (min-width: 761px) { .row { padding: 9px 0; } }
@media (min-width: 761px) { .rows-h { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) 56px; } }
@media (min-width: 761px) { .row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) 56px; } }
@media (max-width: 760px) { .w-b { margin-left: 0; } }
@media (max-width: 760px) { .row-chg { margin-left: 0; } }
@media (max-width: 760px) { .row { grid-template-columns: minmax(0, 1fr) 40px; } }
@media (max-width: 760px) { .ln { grid-template-columns: 42px 1fr; gap: 8px; } }
@media (max-width: 760px) { .row-chg { padding-top: 2px; } }
.rd-bar .rd-seg { display: none; }
@media (max-width: 760px) { .rd-bar .rd-seg { display: flex; } }
.cand-s { display: none; }

/* ---- from final.css ---- */
.screen { background: #fff; overflow: hidden; }
.pin { display: inline-grid; place-items: center; flex: none; line-height: 1; font-style: normal; font-variant-numeric: tabular-nums; }
.adopt { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.adopt input { appearance: none; -webkit-appearance: none; margin: 0; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.adopt input::after { content: ""; border: solid #fff; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.adopt input:checked::after { opacity: 1; }
.adopt input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@keyframes hc-flash { from { background: var(--navy-soft); } to { background: transparent; } }
#create .more { margin-top: 32px; }
@media (max-width: 760px) { .cand-t { display: none; } }
@media (max-width: 760px) { .cand-s { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; } }
@media (max-width: 760px) { .ok-count { margin-left: 0; margin-right: 8px; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }
@media (prefers-reduced-motion: reduce) { *::before { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }
@media (prefers-reduced-motion: reduce) { *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }
.rt-short { display: none; }
@media (max-width: 760px) { .rt-full { display: none; } }
@media (max-width: 760px) { .rt-short { display: inline; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .foot-grid > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .foot-grid > div:last-child ul { grid-template-columns: 1fr 1fr; column-gap: 12px; } }
.mk-chg::after { font-size: 11.5px; }
.mk-ins::after { font-size: 11.5px; }
.mk-old::after { font-size: 11.5px; }
.mk-l { font-size: 11.5px; }

/* ---- from refine.css ---- */
:root { --navy-deep: #12164a; --navy-deep-2: #1a1f5c; --navy-text: #e9ebff; --navy-sub: #b4b9e6; --teal-2: #0f8f9f; }
.readout { border-top: 1px solid var(--line); }
.readout > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; }
.readout > summary::-webkit-details-marker { display: none; }
.readout > summary:hover { background: var(--navy-soft); }
.readout-k { font-size: 12.5px; color: var(--navy); background: var(--navy-soft); padding: 2px 8px; }
.readout-t { font-size: 15px; color: var(--ink); }
.readout > summary svg { width: 18px; height: 18px; margin-left: auto; transition: transform var(--t-state) var(--ease); }
.readout[open] > summary svg { transform: rotate(180deg); }
.readout .rd { padding: 18px 20px 22px; }
.vmodal { width: min(1240px, 100vw - 32px); }
.vm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; color: #fff; }
.vm-title { font-size: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vm-sub { font-size: 13px; font-weight: 500; color: #c9cfe0; }
.vmodal-box { position: relative; }
.vmodal video { max-height: calc(100dvh - 210px); }
.vm-end { position: absolute; inset: auto 16px 64px 16px; display: grid; gap: 10px; justify-items: center; padding: 16px; border-radius: 12px; background: rgba(12, 14, 40, .9); color: #fff; text-align: center; font-size: 15px; line-height: 1.6; }
.vm-end > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vm-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.vm-ghost:hover { border-color: #fff; }
.vm-foot { padding-top: 12px; }
.vm-chapters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.vm-chapters button { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; min-height: 52px; padding: 6px 12px 6px 8px; border: 1px solid rgba(255,255,255,.22); color: #e9edf3; text-align: left; cursor: pointer; white-space: nowrap; }
.vm-chapters button:hover { border-color: #fff; }
.vm-chapters button[aria-current="true"] { color: var(--ink); border-color: #fff; }
.vm-n { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.16); }
.vm-chapters button[aria-current="true"] .vm-n { background: var(--navy); color: #fff; }
.vm-ct { font-size: 13.5px; }
.vm-cm { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .readout > summary { padding: 0 14px; min-height: 54px; gap: 8px; } }
@media (max-width: 760px) { .readout-t { font-size: 14px; } }
@media (max-width: 760px) { .readout .rd { padding: 14px; } }
@media (max-width: 760px) { .vmodal { width: 100vw; max-width: 100vw; margin: auto 0; } }
@media (max-width: 760px) { .vm-head { padding: 0 4px 8px; } }
@media (max-width: 760px) { .vm-title { font-size: 14.5px; } }
@media (max-width: 760px) { .vm-end { font-size: 14px; padding: 12px; } }
@media (max-width: 760px) { .vm-chapters { flex-direction: column; overflow: visible; max-height: 40dvh; overflow-y: auto; } }
@media (max-width: 760px) { .vm-chapters button { width: 100%; white-space: normal; } }
.readout-k { white-space: nowrap; flex: none; }
.vm-chapters button { background: #1b1f2e; }
.vm-chapters button[aria-current="true"] { background: #fff; }

/* ---- from polish.css ---- */
.vm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vm-fs { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.28); background: #1b1f2e; color: #fff; font-size: 14px; cursor: pointer; text-align: left; }
.vm-nextbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.28); font-size: 14px; cursor: pointer; text-align: left; }
.vm-fs svg { width: 16px; height: 16px; flex: none; }
.vm-fs span { font-size: 12.5px; font-weight: 500; color: #c9cfe0; }
.vm-nextbtn { background: #fff; color: var(--ink); border-color: #fff; margin-left: auto; }
.vm-fs:hover { border-color: #fff; }
.vm-all { margin-top: 10px; }
.vm-all > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; font-weight: 600; color: #fff; }
.vm-all > summary::-webkit-details-marker { display: none; }
.vm-all > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(45deg); margin: -4px 0 0 4px; transition: transform var(--t-state) var(--ease); }
.vm-all[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.vm-all > summary span { font-weight: 500; color: #c9cfe0; font-size: 13px; }
.vm-all .vm-chapters { margin-top: 6px; }
@media (max-width: 760px) { .vmodal { padding: 0 8px; } }
@media (max-width: 760px) { .vm-bar { flex-direction: column; align-items: stretch; } }
@media (max-width: 760px) { .vm-fs { width: 100%; margin-left: 0; justify-content: center; min-height: 48px; } }
@media (max-width: 760px) { .vm-nextbtn { width: 100%; margin-left: 0; justify-content: center; min-height: 48px; } }
@media (max-width: 760px) { .vm-all { margin-top: 6px; } }
@media (max-width: 760px) { .vm-all .vm-chapters { max-height: 34dvh; } }
@media (max-width: 760px) { .vm-end { inset: auto 8px 52px 8px; } }

/* ---- from design.css ---- */
:root { --bg: #ffffff; --bg-soft: #f6f6fa; --bg-sunk: #f2f2f7; --ink: #14152b; --ink-2: #2f3148; --sub: #555a71; --mute: #6c7087; --line: #e7e7ef; --line-2: #d6d7e2; --navy: #5b3fd6; --navy-ink: #4a2fc0; --navy-soft: #f1eefd; --navy-line: rgba(91, 63, 214, .32); --teal: #3757c4; --teal-soft: #edf1fc; --ins: #0d6440; --ins-bg: #e9f6ef; --ins-line: #a9d9bf; --del: #ad1f2d; --del-bg: #fcefef; --warn: #7f4f00; --warn-bg: #fdf3dc; --warn-line: #e8cd84; --stage-deep: #f6f6fa; --r-tag: 5px; --r-ctl: 8px; --r-btn: 10px; --r-panel: 12px; --r-frame: 16px; --sh-frame: 0 1px 2px rgba(15, 20, 27, .06), 0 10px 24px -12px rgba(15, 20, 27, .14), 0 34px 60px -40px rgba(15, 20, 27, .22); --t-fast: 160ms; --t-state: 260ms; --ease: cubic-bezier(.2, .6, .2, 1); --accent-text: #5332c8; }
body { color: var(--ink); font-feature-settings: "palt" 0; }
::selection { background: #dfe3f4; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.h2 { font-size: clamp(26px, 2.55vw, 38px); line-height: 1.36; font-weight: 600; letter-spacing: -.012em; font-feature-settings: "palt"; }
.h3 { font-weight: 600; }
.body-s { color: var(--sub); }
.sec-top .body-s { color: var(--sub); }
.sec-top { max-width: 720px; }
.sec-top .body-s { font-size: 16px; line-height: 1.85; }
.note { color: var(--sub); }
b { font-weight: 600; }
strong { font-weight: 600; }
.btn { border-radius: var(--r-btn); font-weight: 600; letter-spacing: .01em; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 80ms var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn-navy { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary:hover { background: var(--navy-ink); }
.btn-navy:hover { background: var(--navy-ink); }
.btn-ghost { border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-2); background: var(--bg-soft); }
.btn-lg { --h: 52px; border-radius: var(--r-btn); font-size: 15.5px; }
.btn-sm { --h: 36px; border-radius: var(--r-ctl); font-size: 14px; }
.src { border-radius: var(--r-tag); font-weight: 500; font-size: 12px; padding: 1px 6px; background: var(--teal-soft); color: var(--teal); }
.why-tag { border-radius: var(--r-tag); font-weight: 500; background: var(--bg-soft); border-color: var(--line); color: var(--ink-2); }
.badge { border-radius: var(--r-tag); font-weight: 500; }
.pin { font-weight: 600; }
.play-dot { border-color: var(--line-2); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.textlink { font-weight: 500; }
.textlink:hover .play-dot { border-color: var(--navy); background: var(--navy-soft); }
.adopt { font-weight: 500; font-size: 14.5px; }
.adopt input { width: 20px; height: 20px; border-radius: 5px; border-width: 1.5px; }
.row-adopt input { width: 20px; height: 20px; border-radius: 5px; border-width: 1.5px; }
.adopt input::after { width: 5px; height: 10px; border-width: 0 2px 2px 0; }
.row-adopt input::after { width: 5px; height: 10px; border-width: 0 2px 2px 0; }
.adopt input:checked { background: var(--navy); border-color: var(--navy); }
.row-adopt input:checked { background: var(--navy); border-color: var(--navy); }
.adopt:hover input:not(:checked) { border-color: var(--navy); }
.row-adopt:hover input:not(:checked) { border-color: var(--navy); }
.mini { height: 32px; border-radius: var(--r-ctl); font-weight: 500; }
.nav { background: rgba(255, 255, 255, .86); }
.nav-logo img { height: 28px; }
.nav-links { gap: 28px; font-size: 14.5px; }
.nav-links a { color: var(--sub); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-login { font-size: 14.5px; }
.screen { border: 1px solid rgba(15, 20, 27, .1); border-radius: var(--r-frame); box-shadow: var(--sh-frame); }
.dm-n { min-width: 22px; height: 18px; border-radius: var(--r-tag); font-size: 11px; font-weight: 600; }
.cand-t { font-weight: 500; }
.cand-m { font-size: 12.5px; }
.dm-title { font-weight: 600; font-size: 17px; }
.dm-rule { font-size: 13.5px; box-shadow: inset 2px 0 0 var(--teal); }
.dm-rule b { font-weight: 600; }
.dm-kpis dd { font-weight: 600; }
.rows-h { font-weight: 500; }
.w-t { font-weight: 600; font-size: 14.5px; }
.pri { width: 20px; height: 20px; border-radius: var(--r-tag); font-size: 11px; font-weight: 600; }
.ln i { border-radius: var(--r-tag); font-weight: 600; font-size: 11px; }
.ln-ins span { font-weight: 400; }
.ln-chg span { font-weight: 400; }
.row-adopt { font-weight: 500; }
.ok-h { font-weight: 600; }
.ok-count { border-radius: var(--r-tag); font-weight: 600; }
.risk { border-radius: var(--r-panel); }
.risk-t { font-weight: 600; }
.readout > summary { background: #fafbfc; }
.readout-k { border-radius: var(--r-tag); font-weight: 600; }
.readout-t { font-weight: 500; }
.rd-doc { border-radius: var(--r-panel); }
.rd-h { font-weight: 600; }
.rd-s { font-weight: 600; }
.more > summary { font-weight: 500; }
.more > summary:hover { color: var(--navy); }
.seg { border-radius: var(--r-btn); background: var(--bg-soft); }
.seg button { border-radius: var(--r-ctl); font-weight: 500; }
.seg button[aria-pressed="true"] { font-weight: 600; box-shadow: 0 1px 2px rgba(15,20,27,.1), 0 0 0 1px rgba(15,20,27,.04); }
.plans { border-color: var(--line); border-radius: var(--r-frame); }
.plan + .plan { border-left-color: var(--line); }
.plan-rec { background: #fbfbfd; box-shadow: inset 0 2px 0 var(--navy); }
.plan-name { font-weight: 600; font-size: 17px; }
.price .a { font-weight: 600; letter-spacing: -.025em; }
.price .y { font-weight: 500; }
.plan-keys li::before { border-color: var(--teal); }
.ent { border-color: var(--line); border-radius: var(--r-frame); }
.compare { border-color: var(--line); border-radius: var(--r-frame); }
.ent b { font-weight: 600; }
.compare > summary { font-weight: 500; }
.ctable thead th { font-weight: 600; }
.ctable .yes { color: var(--teal); font-weight: 600; }
.faq-list { border-top-color: var(--line-2); }
.qa > summary { font-size: 16px; font-weight: 500; color: var(--ink); transition: color var(--t-fast) var(--ease); }
.qa > summary:hover { color: var(--navy); }
.qa[open] > summary { font-weight: 600; }
.qa-a { color: var(--ink-2); font-size: 15px; }
.foot h3 { font-weight: 600; color: var(--ink-2); }
.foot li a { color: var(--sub); }
.foot li a:hover { color: var(--ink); }
.vmodal::backdrop { background: rgba(8, 11, 17, .9); }
.vmodal-box { border-radius: var(--r-panel); }
.vm-title { font-weight: 600; }
.vmodal-close { border-radius: var(--r-ctl); font-weight: 500; }
.vm-fs { border-radius: var(--r-btn); font-weight: 500; }
.vm-nextbtn { border-radius: var(--r-btn); font-weight: 500; }
.vm-chapters button { border-radius: var(--r-btn); }
.vm-ct { font-weight: 500; }
.pin { width: 18px; height: 18px; border-radius: 5px; background: var(--navy); color: #fff; box-shadow: none; font-size: 11px; }
.qa .pm { width: 14px; height: 14px; color: var(--sub); }
.qa .pm::before { height: 1.4px; top: 6px; }
.qa .pm::after { height: 1.4px; top: 6px; }
.qa > summary:hover .pm { color: var(--navy); }

/* ---- from clarity.css ---- */
.sec-top .h2 { max-width: 18em; }
.sec-top .body-s { max-width: 34em; }

/* ---------- type & rhythm ---------- */
.h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.34; font-weight: 700; letter-spacing: -.01em; }
.sec-top .body-s { font-size: 16.5px; line-height: 1.85; }
.sec + .sec { border-top: 1px solid var(--line); }

/* ---------- buttons: one solid violet, no glow ---------- */
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(20, 21, 43, .14), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover { background: var(--navy-ink); }
.btn-lg { --h: 54px; padding: 0 24px; gap: 14px; border-radius: 12px; font-size: 16px; }
.btn-sm { --h: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.play-dot { width: 28px; height: 28px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; }
.play-dot svg { width: 10px; height: 10px; margin-left: 2px; }

/* ---------- header ---------- */
.nav { background: rgba(255, 255, 255, .88); }
.nav-logo img { height: 30px; width: auto; }
.nav-links a { color: var(--ink-2); font-weight: 500; }
.nav-links a:hover { color: var(--accent-text); }

/* =========================================================================
   1. Hero
   ========================================================================= */
.hero { position: relative; overflow: clip; padding: 64px 0 96px; background: radial-gradient(40% 58% at 74% 50%, rgba(108, 84, 238, .22), rgba(80, 116, 238, .10) 48%, transparent 76%), #fff; }

/* the product picture: one window, one change card attached to the chosen article */
@keyframes hv-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) {
  .hero { padding: 40px 0 80px; }
}
@media (max-width: 760px) {
  .hero { padding: 24px 0 64px; background: radial-gradient(80% 40% at 60% 74%, rgba(110, 86, 240, .14), transparent 72%), #fff; }
}

/* =========================================================================
   2. What it does — one value, one small picture
   ========================================================================= */
.ft { display: grid; grid-template-rows: auto 1fr auto; gap: 22px; padding: 30px 30px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
@media (max-width: 760px) {
  .ft { gap: 18px; padding: 22px 18px 16px; border-radius: 16px; }
}

/* =========================================================================
   3. Detail demo — a quiet tinted band so the operable screen stands out
   ========================================================================= */
.demo-sec { background: var(--bg-soft); border-top: 0 !important; }
.demo-sec + .sec { border-top: 0; }
.demo-sec .screen { border: 1px solid rgba(20, 21, 43, .1); box-shadow: 0 1px 2px rgba(20, 21, 43, .05), 0 24px 50px -34px rgba(32, 30, 80, .3); }

/* =========================================================================
   4. Video
   ========================================================================= */
.vid-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.vid-poster { position: relative; display: block; padding: 0; border: 1px solid rgba(20, 21, 43, .1); border-radius: 16px; overflow: hidden; background: #f1f1f6; cursor: pointer; box-shadow: 0 24px 50px -36px rgba(32, 30, 80, .35); }
.vid-poster img { width: 106%; max-width: none; height: auto; margin-left: -3%; }
.vid-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 8px 24px -8px rgba(20, 21, 43, .35); transition: transform var(--t-fast) var(--ease); }
.vid-play svg { width: 20px; height: 20px; margin-left: 4px; }
.vid-poster:hover .vid-play { transform: scale(1.05); }
.vid-len { position: absolute; right: 14px; bottom: 12px; padding: 3px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(20, 21, 43, .72); font-variant-numeric: tabular-nums; }
.ch-list { display: grid; }
.ch-list li + li { border-top: 1px solid var(--line); }
.ch-list button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 13px 4px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 8px; }
.ch-list button:hover { background: var(--bg-soft); }
.ch-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--accent-text); background: var(--navy-soft); }
.ch-t { font-size: 15px; font-weight: 500; color: var(--ink); }
.ch-m { font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .vid-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .vid-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .ch-list button { padding: 12px 2px; }
  .ch-t { font-size: 14.5px; }
}

/* =========================================================================
   6. Pricing additions
   ========================================================================= */
.price-foot a { color: var(--accent-text); }

/* =========================================================================
   8. Final CTA — the hero's light, not a new colour field
   ========================================================================= */
.final { padding: 120px 0 128px; border-top: 1px solid var(--line); background: radial-gradient(42% 70% at 50% 100%, rgba(110, 86, 240, .12), rgba(84, 118, 240, .05) 50%, transparent 76%), #fff; }
.final-in { display: grid; justify-items: center; text-align: center; }
.final .h2 { font-size: clamp(30px, 3vw, 44px); }
.final-lead { max-width: 33em; margin-top: 18px; font-size: 16.5px; line-height: 1.85; color: var(--sub); }
.final .btn { margin-top: 34px; }
.final-cond { margin-top: 14px; font-size: 13.5px; color: var(--sub); }
.final-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 18px; }
.final-links .textlink { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 760px) {
  .final { padding: 72px 0 96px; }
  .final-in { justify-items: stretch; text-align: left; }
  .final .btn { width: 100%; justify-content: space-between; margin-top: 26px; }
  .final-links { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
}

/* ---------- footer links get the same quiet colour ---------- */
.foot-bottom a { color: inherit; }

/* ---------- mobile sticky CTA: a light bar, one violet action ---------- */
.mcta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: none; align-items: center; gap: 8px; padding: 8px 6px 8px 16px; border: 1px solid rgba(20, 21, 43, .1); border-radius: 14px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 32px -12px rgba(20, 21, 43, .3); transform: translateY(calc(100% + 24px)); transition: transform var(--t-state) var(--ease); }
.mcta.is-on { transform: none; }
.mcta-text { flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--sub); }
.mcta-text b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mcta .btn { --h: 42px; padding: 0 16px; font-size: 14.5px; }
.mcta-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--sub); cursor: pointer; }
.mcta-x svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .mcta { display: flex; }
  body.has-mcta { padding-bottom: 76px; }
}
@media (max-width: 860px) {
  .nav-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mcta { transition: none; }
}

/* =========================================================================
   Hero — the B proposal, restored as proposed (classes prefixed hb-).
   Tokens are scoped to the hero so they do not change the rest of the page.
   ========================================================================= */
.hb-hero { --bg: #fbfbfe; --fg: #0d1030; --sub: #4f5578; --mute: #8288a6; --acc1: #7b5cff; --acc2: #12b5d0; --acc-text: #6a4cf0; --grad: linear-gradient(100deg, #7b5cff 0%, #4f7dff 50%, #12b5d0 100%); --main-shadow: 0 10px 24px -10px rgba(98, 76, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .3); --main-shadow-h: 0 14px 32px -10px rgba(98, 76, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .35); --nav-bg: rgba(251, 251, 254, .72); --nav-line: rgba(13, 16, 48, .07); --ghost-bg: #fff; --ghost-line: rgba(13, 16, 48, .12); --play-bg: #efeefe; --chip-bg: rgba(255, 255, 255, .8); --chip-line: rgba(98, 76, 255, .2); --app-bg: #fff; --app-fg: #141838; --app-sub: #6b7092; --app-line: rgba(13, 16, 48, .08); --app-top: #f7f7fb; --app-dot: #dcdde8; --app-url: #fff; --app-side: #fafaff; --app-shadow: 0 0 0 1px rgba(13, 16, 48, .06), 0 50px 100px -30px rgba(60, 50, 160, .35), 0 30px 60px -30px rgba(13, 16, 48, .25); --card: #fbfbff; --cand-on: linear-gradient(90deg, rgba(123, 92, 255, .1), rgba(18, 181, 208, .03)); --tag-fg: #0b7f93; --tag-bg: rgba(18, 181, 208, .12); --float-bg: rgba(255, 255, 255, .86); --float-shadow: 0 0 0 1px rgba(13, 16, 48, .06), 0 24px 50px -16px rgba(60, 50, 160, .35); --del: #c4304a; --ins: #0b7a52; --ins-bg: rgba(18, 180, 120, .12); --tile-bg: #fff; --tile-shadow: 0 0 0 1px rgba(13, 16, 48, .06), 0 20px 50px -30px rgba(60, 50, 160, .3); --int-fg: #3a3f63; background: var(--bg); color: var(--fg); line-height: 1.7; font-feature-settings: "palt"; }
:where(.hb-hero) :is(h1, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.hb-hero) :is(ul, ol) { list-style: none; }
:where(.hb-hero) a { color: inherit; text-decoration: none; }
:where(.hb-hero) :is(img, svg) { display: block; max-width: 100%; }
:where(.hb-hero) button { font: inherit; color: inherit; }
.hb-hero .hb-btn-ghost { border: 0; }
.hb-hero .hb-btn-main { color: #fff; }
.hb-wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.hb-t-hero { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.12; font-weight: 700; letter-spacing: -.035em; }
.hb-t-lead { font-size: 18px; line-height: 1.8; color: var(--sub); }
.hb-t-small { font-size: 13px; line-height: 1.6; color: var(--mute); }
.hb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 12px; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.hb-btn svg { width: 16px; height: 16px; }
.hb-btn:hover { transform: translateY(-1px); }
.hb-btn-ghost { background: var(--ghost-bg); box-shadow: inset 0 0 0 1px var(--ghost-line); color: var(--fg); }
.hb-play { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--play-bg); }
.hb-play svg { width: 9px; height: 9px; margin-left: 1px; }
.hb-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 6px; border-radius: 99px; font-size: 13px; font-weight: 500; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--chip-line); color: var(--fg); }
.hb-chip b { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--grad); }
.hb-mock { position: relative; }
.hb-app { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); border-radius: 16px; overflow: hidden; background: var(--app-bg); box-shadow: var(--app-shadow); font-size: 13px; color: var(--app-fg); text-align: left; }
.hb-app-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--app-line); background: var(--app-top); }
.hb-app-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--app-dot); }
.hb-app-top span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; font-size: 11.5px; color: var(--app-sub); background: var(--app-url); }
.hb-app-side { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 16px 0; border-right: 1px solid var(--app-line); background: var(--app-side); }
.hb-app-side img { width: 24px; height: 24px; margin-bottom: 8px; }
.hb-app-side svg { width: 34px; height: 34px; padding: 8px; border-radius: 9px; color: var(--app-sub); }
.hb-app-side svg.hb-on { color: #fff; background: var(--grad); box-shadow: 0 6px 16px -6px var(--acc1); }
.hb-app-main { padding: 20px 22px 22px; display: grid; gap: 14px; }
.hb-app-h { display: flex; align-items: center; gap: 10px; }
.hb-app-h b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.hb-app-h .hb-range { margin-left: auto; padding: 4px 10px; border-radius: 7px; font-size: 11.5px; color: var(--app-sub); box-shadow: inset 0 0 0 1px var(--app-line); }
.hb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hb-kpi { padding: 12px 14px 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--app-line); }
.hb-kpi p { font-size: 11.5px; color: var(--app-sub); }
.hb-kpi strong { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hb-kpi strong small { margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--app-sub); }
.hb-kpi .hb-spark { width: 100%; height: 26px; margin-top: 4px; }
.hb-cands { border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--app-line); overflow: hidden; }
.hb-cands-h { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 11.5px; font-weight: 600; color: var(--app-sub); border-bottom: 1px solid var(--app-line); }
.hb-cand { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--app-line); }
.hb-cand:last-child { border-bottom: 0; }
.hb-cand b { font-size: 13px; font-weight: 600; }
.hb-cand em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; color: var(--tag-fg); background: var(--tag-bg); white-space: nowrap; }
.hb-cand.hb-on { background: var(--cand-on); }
.hb-cand.hb-on b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--acc2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc2) 25%, transparent); }
.hb-float { position: absolute; z-index: 2; border-radius: 14px; background: var(--float-bg); box-shadow: var(--float-shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--app-fg); font-size: 13px; text-align: left; }
.hb-f-diff { width: 330px; padding: 14px 16px 14px; }
.hb-f-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; color: var(--app-sub); }
.hb-f-k .hb-dot { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--grad); }
.hb-f-k .hb-dot svg { width: 11px; height: 11px; }
.hb-f-diff p { font-size: 13.5px; line-height: 1.8; }
.hb-f-diff del { color: var(--del); text-decoration-color: color-mix(in srgb, var(--del) 60%, transparent); }
.hb-f-diff ins { text-decoration: none; color: var(--ins); background: var(--ins-bg); border-radius: 3px; padding: 0 2px; }
.hb-f-diff .hb-why { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--app-line); font-size: 12px; color: var(--app-sub); }
.hb-f-diff .hb-acts { display: flex; gap: 8px; margin-top: 10px; }
.hb-f-diff .hb-acts span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.hb-f-diff .hb-acts .hb-yes { color: #fff; background: var(--grad); }
.hb-f-diff .hb-acts .hb-no { box-shadow: inset 0 0 0 1px var(--app-line); color: var(--app-sub); }
.hb-f-gen { width: 250px; padding: 12px 14px; }
.hb-f-gen .hb-bar { height: 6px; margin-top: 8px; border-radius: 99px; background: var(--app-line); overflow: hidden; }
.hb-f-gen .hb-bar i { display: block; height: 100%; width: 68%; border-radius: inherit; background: var(--grad); }
.hb-f-gen ol { display: flex; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--app-sub); }
.hb-f-gen ol li { display: flex; align-items: center; gap: 4px; }
.hb-f-gen ol li.hb-done { color: var(--app-fg); }
.hb-f-gen ol li.hb-done::before { content: "✓"; color: var(--acc2); font-weight: 700; }
.hb-f-pub { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; }
.hb-f-pub .hb-wp { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: #21759b; }
.hb-f-pub b { display: block; font-size: 12.5px; }
.hb-f-pub span { font-size: 11px; color: var(--app-sub); }
.hb-mock-note { margin-top: 14px; font-size: 12px; color: var(--mute); text-align: center; }
@media (prefers-reduced-motion: no-preference) { .hb-float { animation: hb-bob 7s ease-in-out infinite; } }
@media (prefers-reduced-motion: no-preference) { .hb-float.hb-f2 { animation-delay: -2.4s; } }
@media (prefers-reduced-motion: no-preference) { .hb-float.hb-f3 { animation-delay: -4.8s; } }
@media (prefers-reduced-motion: no-preference) { .hb-f-gen .hb-bar i { animation: hb-fill 3.6s ease-in-out infinite alternate; } }
@media (prefers-reduced-motion: no-preference) { .hb-glow { animation: hb-drift 16s ease-in-out infinite alternate; } }
@media (max-width: 640px) { .hb-wrap { width: calc(100% - 32px); } }
@media (max-width: 640px) { .hb-t-lead { font-size: 16px; } }
@media (max-width: 640px) { .hb-app { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hb-app-side { display: none; } }
@media (max-width: 640px) { .hb-app-main { padding: 14px; gap: 10px; } }
@media (max-width: 640px) { .hb-kpis { gap: 6px; } }
@media (max-width: 640px) { .hb-kpi { padding: 10px; } }
@media (max-width: 640px) { .hb-kpi strong { font-size: 18px; } }
@media (max-width: 640px) { .hb-kpi .hb-spark { display: none; } }
@media (max-width: 640px) { .hb-cand:nth-child(n+4) { display: none; } }
@media (max-width: 640px) { .hb-float { position: relative; inset: auto !important; width: auto; margin-top: 10px; animation: none; } }
@media (max-width: 640px) { .hb-f-gen, .hb-f-pub { display: none; } }
.hb-hero { position: relative; overflow: hidden; }
.hb-hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; text-align: center; }
.hb-hero-copy .hb-t-lead { max-width: 34em; }
.hb-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hb-hero-micro { margin-top: -6px; }
.hb-hero-stage { position: relative; z-index: 1; }
.hb-grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-btn-main { color: #fff; background: var(--grad); box-shadow: var(--main-shadow); }
.hb-btn-main:hover { box-shadow: var(--main-shadow-h); }
.hb-glow { position: absolute; border-radius: 50%; filter: blur(70px); }
@media (max-width: 640px) { .hb-hero-copy { justify-items: start; text-align: left; gap: 18px; } }
@media (max-width: 640px) { .hb-hero-ctas { justify-content: stretch; width: 100%; } }
@media (max-width: 640px) { .hb-hero-ctas .hb-btn { width: 100%; } }
.hb-t-lead br.hb-pc { display: inline; }
@media (max-width: 640px) { .hb-t-lead br.hb-pc { display: none; } }
.hb-chip { height: auto; min-height: 32px; padding-block: 4px; }
.hb-chip b { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .hb-chip { font-size: 12.5px; } }
@media (max-width: 640px) { .hb-chip .hb-pc-i { display: none; } }
@media (max-width: 640px) { .hb-cand { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hb-cand em { justify-self: start; } }
@keyframes hb-bob { 50% { transform: translateY(-8px); } }
@keyframes hb-fill { from { width: 30%; } to { width: 88%; } }
@keyframes hb-drift { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
.hb-hero { padding: 72px 0 24px; }
.hb-mesh { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px); mask-image: linear-gradient(to bottom, transparent 0, #000 160px); }
.hb-mesh .hb-g1 { width: 760px; height: 600px; right: -120px; top: -140px; background: rgba(140, 110, 255, .38); }
.hb-mesh .hb-g2 { width: 620px; height: 520px; right: 280px; top: 220px; background: rgba(60, 200, 230, .28); animation-delay: -6s; }
.hb-mesh .hb-g3 { width: 520px; height: 420px; left: -160px; top: 80px; background: rgba(255, 170, 220, .22); animation-delay: -11s; }
.hb-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 590px) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 640px; }
.hb-hero-copy { justify-items: start; text-align: left; }
.hb-hero-copy .hb-t-hero { font-size: clamp(36px, 4vw, 58px); }
.hb-hero-ctas { justify-content: flex-start; }
.hb-hero-stage { perspective: 2000px; margin-right: -260px; }
.hb-tilt { transform: rotateY(-16deg) rotateX(7deg) rotateZ(1deg); transform-origin: left center; }
.hb-tilt .hb-app { width: 860px; }
.hb-f-diff { left: 300px; top: -134px; }
.hb-f-gen { left: -120px; bottom: -64px; }
.hb-f-pub { left: 420px; bottom: -40px; }
.hb-mock-note { text-align: left; }
@media (max-width: 1180px) { .hb-hero-grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); } }
@media (max-width: 1180px) { .hb-hero-stage { margin-right: -360px; } }
@media (max-width: 960px) { .hb-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 48px; } }
@media (max-width: 960px) { .hb-hero-stage { margin-right: -120px; } }
@media (max-width: 960px) { .hb-tilt .hb-app { width: 760px; } }
@media (max-width: 640px) { .hb-hero { padding-top: 40px; } }
@media (max-width: 640px) { .hb-hero-stage { margin-right: 0; perspective: none; } }
@media (max-width: 640px) { .hb-tilt { transform: none; } }
@media (max-width: 640px) { .hb-tilt .hb-app { width: auto; } }
@media (max-width: 640px) { .hb-mesh .hb-g1 { width: 420px; height: 380px; right: -160px; } }
@media (max-width: 640px) { .hb-mesh .hb-g3 { display: none; } }

/* =========================================================================
   Page language carried down from the B hero (2026-10-12):
   narrower measure, centred large headlines with a gradient keyword,
   light / deep-indigo section rhythm, glows behind product surfaces,
   gradient rings on the things that matter (product, recommended plan, CTA).
   ========================================================================= */
:root {
  --wrap: 1120px;
  --g: linear-gradient(100deg, #7b5cff 0%, #4f7dff 50%, #12b5d0 100%);
  --g-soft: linear-gradient(100deg, rgba(123, 92, 255, .14), rgba(79, 125, 255, .10) 50%, rgba(18, 181, 208, .12));
  --deep: #0b0c24;
  --deep-2: #14163a;
  --deep-line: rgba(255, 255, 255, .10);
  --deep-text: #eceeff;
  --deep-sub: #aeb3d6;
  --sh-float: 0 1px 2px rgba(13, 16, 48, .05), 0 30px 60px -30px rgba(60, 50, 160, .28);
}

/* primary actions share the hero's gradient */
.btn-primary { background: var(--g); color: #fff; box-shadow: 0 10px 24px -12px rgba(98, 76, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { background: var(--g); filter: brightness(1.06); }

/* ---------- section rhythm ---------- */
.sec { padding: 136px 0; position: relative; }
.sec + .sec { border-top: 0; }
.sec-top { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.sec-top .h2 { max-width: none; margin-inline: auto; }
.sec-top .body-s { max-width: 34em; margin: 18px auto 0; font-size: 17px; line-height: 1.85; }
.h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.22; font-weight: 700; letter-spacing: -.03em; color: #0d1030; }
.h2 em { font-style: normal; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 2. features: bento on a faint grid, with a glow ---------- */
.ft { gap: 24px; padding: 32px 32px 26px; border: 1px solid rgba(13, 16, 48, .07); border-radius: 24px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); box-shadow: var(--sh-float); }

/* ---------- 3. detail demo: the product on a deep stage ---------- */
.demo-sec { background: var(--deep); color: var(--deep-text); overflow: clip; }
.demo-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(40% 50% at 20% 10%, rgba(123, 92, 255, .38), transparent 70%),
  radial-gradient(36% 46% at 85% 30%, rgba(18, 181, 208, .22), transparent 70%),
  radial-gradient(50% 40% at 50% 100%, rgba(79, 125, 255, .22), transparent 70%); }
.demo-sec::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 40% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(70% 40% at 50% 0%, #000, transparent 80%); }
.demo-sec .wrap { position: relative; z-index: 1; }
.demo-sec .h2 { color: #fff; }
.demo-sec .h2 em { background: linear-gradient(100deg, #b6a4ff, #7fb0ff 50%, #6fe3f2); -webkit-background-clip: text; background-clip: text; }
.demo-sec .body-s, .demo-sec .sec-top .body-s { color: var(--deep-sub); }
.demo-sec .screen { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 6px rgba(255, 255, 255, .04), 0 50px 120px -40px rgba(98, 76, 255, .7); }
.demo-sec .more { border-color: var(--deep-line); }
.demo-sec .more > summary { color: #fff; }
.demo-sec .more > summary:hover { color: #d9d2ff; }
.demo-sec .more-body { color: var(--deep-sub); }
.demo-sec .reasons li { border-top-color: var(--deep-line); }
.demo-sec .reasons b { color: #fff; }
.demo-sec .reasons .fix, .demo-sec .reasons .c { color: var(--deep-sub); }
.demo-sec .reasons .src { color: #d9d2ff; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.demo-sec :focus-visible { outline-color: #fff; }
.demo-sec .screen :focus-visible { outline-color: var(--navy); }

/* ---------- 4. video: framed like the hero product ---------- */
.vid-sec { overflow: clip; }
.vid-sec::before { content: ""; position: absolute; left: 30%; top: 30%; width: 900px; height: 600px; margin-left: -450px; pointer-events: none; background: radial-gradient(closest-side, rgba(123, 92, 255, .18), rgba(18, 181, 208, .08) 60%, transparent); }
.vid-sec .wrap { position: relative; }
.vid-poster { border: 0; border-radius: 22px; padding: 6px; background: linear-gradient(#fff, #fff) padding-box, var(--g) border-box; border: 1.5px solid transparent; box-shadow: 0 50px 100px -50px rgba(98, 76, 255, .6); }
.vid-poster img { border-radius: 16px; }
.vid-play { background: var(--g); color: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 16px 32px -12px rgba(98, 76, 255, .8); }
.ch-list { gap: 8px; }
.ch-list li + li { border-top: 0; }
.ch-list button { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(13, 16, 48, .07); transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ch-list button:hover { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .45), 0 12px 24px -16px rgba(98, 76, 255, .5); transform: translateY(-1px); }
.ch-n { color: #fff; background: var(--g); }

/* ---------- 6. pricing: separate cards, the recommended plan wears the ring ---------- */
.price-tools { justify-content: center; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.seg { border: 0; border-radius: 99px; padding: 4px; background: #eeedf8; }
.seg button { border-radius: 99px; height: 40px; padding: 0 20px; }
.plans { gap: 16px; border: 0; border-radius: 0; overflow: visible; }
.plan { border: 1px solid rgba(13, 16, 48, .08); border-radius: 22px; box-shadow: var(--sh-float); }
.plan-rec { position: relative; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--g) border-box; box-shadow: 0 50px 90px -40px rgba(98, 76, 255, .55); transform: translateY(-8px); }
.plan-rec .badge { color: #fff; background: var(--g); }
.price .a { font-size: 40px; letter-spacing: -.035em; }
.plan-rec .price .a { background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ent, .compare { border-radius: 20px; border-color: rgba(13, 16, 48, .08); }
.price-foot { text-align: center; }

/* ---------- 7. FAQ: one centred column ---------- */
.faq-grid { display: block; max-width: 820px; margin-inline: auto; }
.faq-side { position: static; text-align: center; margin-bottom: 40px; }
.faq-side .h2 { margin-inline: auto; }
.faq-side .body-s { margin: 14px auto 0; }
.faq-side .textlink { margin-top: 10px; justify-content: center; }
.faq-list { border-top: 1px solid rgba(13, 16, 48, .08); }
.qa > summary { padding: 22px 4px; font-size: 16.5px; }

/* ---------- 8. final CTA: a deep band with the hero's light ---------- */
.final { padding: 40px 0 136px; border-top: 0; background: none; }
.final-in { position: relative; overflow: hidden; max-width: var(--wrap); padding: 104px 40px; border-radius: 32px; background: var(--deep); color: #fff; }
.final-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(45% 70% at 15% 0%, rgba(123, 92, 255, .55), transparent 70%),
  radial-gradient(40% 60% at 90% 100%, rgba(18, 181, 208, .35), transparent 70%),
  radial-gradient(40% 50% at 60% 40%, rgba(79, 125, 255, .2), transparent 70%); }
.final-in > * { position: relative; }
.final .h2 { color: #fff; }
.final .h2 em { background: linear-gradient(100deg, #c2b3ff, #8ab8ff 50%, #7ce8f5); -webkit-background-clip: text; background-clip: text; }
.final-lead, .final-cond { color: var(--deep-sub); }
.final .btn-primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 20px 40px -16px rgba(123, 92, 255, .9); }
.final-links .textlink { color: #fff; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid rgba(13, 16, 48, .08); }

@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-rec { transform: none; }
}
@media (max-width: 900px) {
  .sec { padding: 96px 0; }
}
@media (max-width: 760px) {
  .sec { padding: 72px 0; }
  .sec-top { margin-bottom: 36px; text-align: left; }
  .sec-top .body-s { margin-left: 0; font-size: 15.5px; }
  .h2 { font-size: clamp(27px, 7.6vw, 34px); }
  .ft { padding: 24px 20px 18px; border-radius: 20px; }
  .plans { grid-template-columns: 1fr; }
  .faq-side { text-align: left; }
  .faq-side .textlink { justify-content: flex-start; }
  .final { padding: 16px 0 88px; }
  .final-in { padding: 64px 22px; border-radius: 24px; width: calc(100% - 24px); }
  .price-foot { text-align: left; }
}
/* the header lines up with the hero, not with the narrower reading column */
.nav .wrap { width: min(1200px, 100% - var(--gutter) * 2); }

/* icons: one outline set (Lucide geometry), single colour */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   Below the hero (2026-10-13): one section, one message, one picture.
   Pictures reuse the hero's language: white window, soft violet/cyan glow,
   the same --grad accent, tags and step marks.
   ========================================================================= */
.job { position: relative; overflow: clip; padding: 128px 0; }
.job-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.job-copy .h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.3; }
.job-k { margin-bottom: 18px; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.job-p { margin-top: 20px; max-width: 28em; font-size: 16.5px; line-height: 1.85; color: #4f5578; }
.job-vid { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 6px 0; border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: 500; color: #0d1030; }
.job-vid > span:last-child { color: #8288a6; font-weight: 400; font-variant-numeric: tabular-nums; }
.job-vid .play-dot { width: 28px; height: 28px; }
.job-vid:hover .play-dot { border-color: #7b5cff; color: #7b5cff; }

.job-fig { position: relative; }
.job-fig::before { content: ""; position: absolute; inset: -14% -18% -18% -12%; pointer-events: none; z-index: 0; background: radial-gradient(48% 56% at 52% 50%, rgba(123, 92, 255, .20), rgba(18, 181, 208, .10) 58%, transparent 76%); filter: blur(14px); }
.jw { position: relative; z-index: 1; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 16, 48, .07), 0 2px 4px rgba(13, 16, 48, .04), 0 50px 100px -40px rgba(60, 50, 160, .38); overflow: hidden; font-size: 13px; color: #141838; }
.jw-top { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(13, 16, 48, .08); background: #f7f7fb; }
.jw-top i { width: 10px; height: 10px; border-radius: 50%; background: #dcdde8; }
.jw-top span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; font-size: 11.5px; color: #6b7092; background: #fff; }
.jw-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.jw-theme { position: relative; padding: 22px 24px 24px; }
.jw-tags { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6b7092; }
.jw-tags em { font-style: normal; padding: 2px 9px; border-radius: 99px; font-weight: 600; color: #0b7f93; background: rgba(18, 181, 208, .12); }
.jw-tags em.w { color: #b03a62; background: rgba(230, 70, 120, .1); }
.jw-t { margin-top: 10px; padding-right: 146px; font-size: 16px; line-height: 1.5; font-weight: 700; letter-spacing: -.01em; }
.jw-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; font-size: 12px; line-height: 1.6; color: #2f3148; }
.jw-cols b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 500; color: #8288a6; }
.jw-score { position: absolute; right: 24px; top: 22px; display: flex; gap: 8px; }
.jw-score div { display: grid; justify-items: center; width: 64px; padding: 8px 0 6px; border-radius: 10px; font-size: 11px; color: #6b7092; background: #f3f0ff; }
.jw-score b { font-size: 20px; font-weight: 700; line-height: 1.1; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jw-steps { display: grid; align-content: start; gap: 2px; padding: 18px 18px 20px; border-left: 1px solid rgba(13, 16, 48, .08); background: #fafaff; }
.jw-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; align-items: center; padding: 9px 0; font-size: 12.5px; font-weight: 600; color: #8288a6; }
.jw-steps li span { grid-column: 2; font-size: 11px; font-weight: 400; }
.jw-steps li i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #d6d7e2; }
.jw-steps li.done { color: #141838; }
.jw-steps li.done i { box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"), linear-gradient(100deg, #7b5cff 0%, #4f7dff 50%, #12b5d0 100%); background-size: 11px, 100%; background-position: center; background-repeat: no-repeat; }
.jw-steps li.now { color: #141838; }
.jw-steps li.now i { box-shadow: inset 0 0 0 1.5px #7b5cff; background: radial-gradient(circle, #7b5cff 35%, transparent 38%); }
.jw-steps li.now span { color: #6a4cf0; font-weight: 600; }
.job-cap { margin-top: 14px; font-size: 12.5px; color: #8288a6; }

@media (max-width: 1080px) {
  .job-grid { gap: 48px; }
  .jw-body { grid-template-columns: 1fr; }
  .jw-steps { border-left: 0; border-top: 1px solid rgba(13, 16, 48, .08); grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .job { padding: 88px 0; }
  .job-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .job { padding: 72px 0; }
  .jw-t { padding-right: 0; }
  .jw-score { position: static; margin-top: 14px; }
  .jw-cols { grid-template-columns: 1fr; gap: 10px; }
  .jw-steps { grid-template-columns: 1fr; }
  .job-cap { text-align: left; }
}

/* ---------- 3. 改善する: the operable demo on the deep band; short head, product first ---------- */
.demo-sec { padding: 112px 0 120px; }
.demo-sec::after { content: none; }
.demo-sec::before { background: radial-gradient(44% 56% at 14% 0%, rgba(123, 92, 255, .42), transparent 68%), radial-gradient(34% 44% at 90% 20%, rgba(18, 181, 208, .22), transparent 68%); }
.demo-sec .more { margin-top: 28px; }
@media (max-width: 900px) {
  .demo-sec { padding: 80px 0 88px; }
}

/* ---------- 4. 人が決める ---------- */
.job-grid.flip > .job-fig { order: -1; }
.job-facts { display: grid; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(13, 16, 48, .08); font-size: 14.5px; line-height: 1.7; color: #2f3148; }
.job-facts li { position: relative; padding-left: 22px; }
.job-facts li::before { content: ""; position: absolute; left: 0; top: 7px; top: calc(.5lh - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.jh { display: grid; gap: 10px; padding: 20px; }
.jh-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 16, 48, .08); }
.jh-row.jh-on { background: linear-gradient(90deg, rgba(123, 92, 255, .08), rgba(18, 181, 208, .04)); box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .4); }
.jh-row.jh-dim { opacity: .75; }
.jh-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--g); color: #fff; }
.jh-ic .ic { width: 18px; height: 18px; stroke-width: 2.25; }
.jh-ic.jh-lock { background: #eeedf8; color: #6a4cf0; }
.jh-row b { display: block; font-size: 14.5px; font-weight: 700; color: #0d1030; }
.jh-row div span { display: block; margin-top: 2px; font-size: 12px; color: #6b7092; }
.jh-row em { font-style: normal; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--g); white-space: nowrap; }
.jh-row em.q { color: #6b7092; background: #f1f1f6; }
@media (max-width: 900px) {
  .job-grid.flip > .job-fig { order: 0; }
}
@media (max-width: 640px) {
  .jh { padding: 12px; gap: 8px; }
  .jh-row { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; }
  .jh-row em { display: none; }
  .jh-ic { width: 34px; height: 34px; }
}

/* ---------- icon colour inside the gradient disc ---------- */
.jh-ic .ic { stroke: #fff; }
.jh-ic.jh-lock .ic { stroke: #6a4cf0; }

/* ---------- 5. 動画: job layout, chapters under the copy, the recording's own title card as poster ---------- */
.vid-sec::before { content: none; }
.vid-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.vid-sec .chapters { margin-top: 26px; padding-top: 0; border: 0; display: block; }
.vid-sec .ch-list { display: grid; gap: 0; }
.vid-sec .ch-list li + li { border-top: 1px solid rgba(13, 16, 48, .08); }
.vid-sec .ch-list button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 11px 6px; border: 0; border-radius: 10px; background: none; box-shadow: none; text-align: left; cursor: pointer; }
.vid-sec .ch-list button:hover { background: #f5f3ff; box-shadow: none; transform: none; }
.vid-sec .ch-n { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.vid-sec .ch-t { font-size: 14.5px; }
.vid-sec .ch-m { font-size: 12.5px; }
.vid-poster { position: relative; z-index: 1; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(13, 16, 48, .07), 0 2px 4px rgba(13, 16, 48, .04), 0 50px 100px -40px rgba(60, 50, 160, .38); }
.vid-poster img { width: 100%; height: auto; border-radius: 0; margin: 0; max-width: none; }
.vid-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--g); color: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .45), 0 16px 32px -12px rgba(98, 76, 255, .8); }
.vid-len { left: auto; right: 16px; bottom: 14px; }
@media (max-width: 900px) {
  .vid-grid { grid-template-columns: 1fr; gap: 36px; }
  .vid-grid .job-fig { order: -1; }
}

/* ---------- 7. 料金: short head, four plans, one accordion ---------- */
#pricing .sec-top { max-width: none; margin-bottom: 36px; text-align: left; }
#pricing .sec-top .h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.3; margin-inline: 0; }
#pricing .sec-top .body-s { margin-left: 0; }
#pricing .price-tools { justify-content: flex-start; flex-direction: row; align-items: center; gap: 16px; margin-bottom: 24px; }
#pricing .price-foot { text-align: left; }
#faq .faq-side { text-align: left; }
#faq .faq-side .textlink { justify-content: flex-start; }
#faq .faq-side .h2, #faq .faq-side .body-s { margin-left: 0; }

/* ---------- 6. 確かめる ---------- */
.jm { padding: 24px 24px 26px; }
.jm-tl { display: grid; grid-template-columns: 28fr 7fr 14fr; gap: 4px; }
.jm-tl span { display: grid; align-content: end; min-height: 108px; padding: 14px 16px; border-radius: 12px; font-size: 12px; line-height: 1.5; color: #4f5578; background: #f3f0ff; }
.jm-tl b { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: #0d1030; margin-bottom: 8px; }
.jm-tl b small { font-size: 13px; font-weight: 500; margin-left: 2px; color: #6b7092; letter-spacing: 0; }
.jm-tl .g { background: repeating-linear-gradient(135deg, #f1f1f6 0 6px, #e8e8f0 6px 12px); color: #6b7092; padding-inline: 12px; white-space: nowrap; }
.jm-tl .g b { color: #6b7092; font-size: 24px; }
.jm-tl .b { background: var(--g); color: rgba(255, 255, 255, .85); }
.jm-tl .b b, .jm-tl .b small { color: #fff; }
.jm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(13, 16, 48, .08); }
.jm-k { font-size: 11px; font-weight: 500; color: #8288a6; }
.jm-v { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #0d1030; }
.jm-s { margin-top: 2px; font-size: 11.5px; color: #6b7092; }
@media (max-width: 640px) {
  .jm { padding: 16px; }
  .jm-tl { grid-template-columns: 1fr; }
  .jm-tl span { min-height: 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 12px 14px; }
  .jm-tl b { margin: 0; font-size: 26px; }
  .jm-cols { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================================
   v4 (2026-10-13): richer colour, scroll motion, alignment fixes.
   ========================================================================= */
:root {
  --ink: #0b0d2a; --ink-2: #262a4a; --sub: #4c5273; --mute: #7a80a0;
  --v1: #6d4dff; --v2: #3d6cff; --v3: #00c2e0; --pink: #ff5fb0;
  --g: linear-gradient(100deg, #6d4dff 0%, #3d6cff 48%, #00c2e0 100%);
  --g-warm: linear-gradient(100deg, #7a4dff 0%, #ff5fb0 100%);
  --deep: #070826; --deep-2: #10123a;
  --deep-sub: #b4b9e2;
}
body { color: var(--ink); }
.h2 { color: var(--ink); letter-spacing: -.025em; }
.job-k { background: var(--g); -webkit-background-clip: text; background-clip: text; }

/* hero: deeper palette, a hint of pink in the mesh, richer CTA */
.hb-hero { --fg: #0b0d2a; --sub: #4c5273; --acc1: #6d4dff; --acc2: #00c2e0; --acc-text: #5a3cf0;
  --grad: linear-gradient(100deg, #6d4dff 0%, #3d6cff 48%, #00c2e0 100%); --app-fg: #0b0d2a; }
.hb-mesh .hb-g1 { background: rgba(120, 90, 255, .46); }
.hb-mesh .hb-g2 { background: rgba(0, 194, 224, .30); }
.hb-mesh .hb-g3 { background: rgba(255, 95, 176, .22); }
.hb-btn-main { box-shadow: 0 14px 34px -12px rgba(109, 77, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hb-btn-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); }
.hb-btn-main { position: relative; overflow: hidden; }
.hb-btn-main:hover::after { transition: transform .7s ease; transform: translateX(120%); }

/* ---------- hero entrance + pointer parallax ---------- */
.has-motion .hb-tilt { --mx: 0; --my: 0; transform: perspective(2000px) rotateY(calc(-16deg + var(--mx) * 3deg)) rotateX(calc(7deg + var(--my) * -2deg)) rotateZ(1deg); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.has-motion .hb-hero-stage { perspective: none; }
.has-motion:not(.hero-ready) .hb-tilt { transform: perspective(2000px) rotateY(-24deg) rotateX(12deg) rotateZ(2deg) translateX(40px); opacity: 0; }
.has-motion.hero-ready .hb-tilt { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity .8s ease; opacity: 1; }
.has-motion .hb-tilt .hb-float { animation: none; }
.has-motion:not(.hero-ready) .hb-float { opacity: 0; transform: translateY(16px); }
.has-motion.hero-ready .hb-float { transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); opacity: 1; transform: translateY(0); }
.has-motion.hero-ready .hb-f1 { transition-delay: .45s; }
.has-motion.hero-ready .hb-f2 { transition-delay: .65s; }
.has-motion.hero-ready .hb-f3 { transition-delay: .85s; }
.has-motion .hb-f1 { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px), 0); }
.has-motion .hb-f2 { transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px), 0); }
.has-motion .hb-f3 { transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * 10px), 0); }
.has-motion .hb-tilt .hb-float { --mx: inherit; --my: inherit; }
.has-motion:not(.hero-ready) .hb-hero-copy > * { opacity: 0; transform: translateY(14px); }
.has-motion.hero-ready .hb-hero-copy > * { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); opacity: 1; transform: none; }
.has-motion.hero-ready .hb-hero-copy > :nth-child(2) { transition-delay: .08s; }
.has-motion.hero-ready .hb-hero-copy > :nth-child(3) { transition-delay: .16s; }
.has-motion.hero-ready .hb-hero-copy > :nth-child(4) { transition-delay: .24s; }
.has-motion.hero-ready .hb-hero-copy > :nth-child(5) { transition-delay: .3s; }

/* ---------- reveal on enter ---------- */
.has-motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.has-motion [data-reveal="fig"] { transform: translateY(40px) scale(.97); }
.has-motion [data-reveal].is-in { opacity: 1; transform: none; }
.has-motion [data-reveal][data-delay="1"] { transition-delay: .12s; }
.has-motion [data-reveal][data-delay="2"] { transition-delay: .24s; }
.has-motion [data-reveal][data-delay="3"] { transition-delay: .36s; }
/* the in-window rows come up one by one after the window */
.has-motion .jw [data-reveal-item] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.has-motion .is-in .jw [data-reveal-item] { opacity: 1; transform: none; }
.has-motion .is-in .jw [data-reveal-item]:nth-child(1) { transition-delay: .35s; }
.has-motion .is-in .jw [data-reveal-item]:nth-child(2) { transition-delay: .5s; }
.has-motion .is-in .jw [data-reveal-item]:nth-child(3) { transition-delay: .65s; }
.has-motion .is-in .jw [data-reveal-item]:nth-child(4) { transition-delay: .8s; }
/* progress-ish fills draw in */
.has-motion .jm-tl span { transform-origin: left center; transform: scaleX(.6); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.has-motion .is-in .jm-tl span { transform: none; opacity: 1; }
.has-motion .is-in .jm-tl span:nth-child(2) { transition-delay: .25s; }
.has-motion .is-in .jm-tl span:nth-child(3) { transition-delay: .5s; }

/* ---------- deep band: light drifts with scroll ---------- */
.demo-sec { --sp: 0; background: var(--deep); }
.demo-sec::before { background:
  radial-gradient(46% 58% at 14% 0%, rgba(120, 90, 255, .5), transparent 68%),
  radial-gradient(34% 44% at 92% 18%, rgba(0, 194, 224, .3), transparent 68%),
  radial-gradient(30% 40% at 70% 100%, rgba(255, 95, 176, .18), transparent 70%);
  transform: translate3d(0, calc(var(--sp) * -60px), 0) scale(1.08); will-change: transform; }
.demo-sec .job-k { background: linear-gradient(100deg, #c8bbff, #8fc3ff 55%, #7cefff); -webkit-background-clip: text; background-clip: text; }
.demo-sec .h2 em { background: linear-gradient(100deg, #c8bbff, #8fc3ff 50%, #7cefff); -webkit-background-clip: text; background-clip: text; }
.demo-sec .screen { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 8px rgba(255, 255, 255, .04), 0 60px 140px -40px rgba(109, 77, 255, .85); }

/* ---------- pictures: a soft gradient rim instead of a flat grey line ---------- */
.jw { box-shadow: 0 0 0 1px rgba(109, 77, 255, .16), 0 2px 4px rgba(11, 13, 42, .04), 0 50px 110px -40px rgba(80, 60, 200, .45); }
.job-fig::before { background: radial-gradient(48% 56% at 52% 50%, rgba(109, 77, 255, .24), rgba(0, 194, 224, .12) 58%, transparent 76%); }
.job-fig:nth-of-type(odd)::before { background: radial-gradient(48% 56% at 48% 50%, rgba(109, 77, 255, .22), rgba(255, 95, 176, .10) 58%, transparent 76%); }
.jw-top { background: linear-gradient(180deg, #f8f7ff, #f3f2fb); }
.jw-top span { color: #5a3cf0; background: #fff; box-shadow: 0 1px 2px rgba(11, 13, 42, .06); }
/* 作る: title no longer fights the score chips; chips sit on their own row */
.jw-theme { display: grid; gap: 12px; }
.jw-tags { order: 1; }
.jw-t { order: 2; margin: 0; padding-right: 0; font-size: 17px; }
.jw-score { position: static; order: 3; margin: 2px 0 2px; gap: 10px; }
.jw-score div { width: auto; min-width: 72px; padding: 8px 14px 7px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; justify-items: start; }
.jw-score b { font-size: 22px; }
.jw-cols { order: 4; margin-top: 4px; }
.jw-tags em { line-height: 20px; }
.jw-steps li { align-items: center; }
.jw-steps li span { line-height: 1.4; }
/* 人が決める: icon, text and chip share one centre line */
.jh-row { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
.jh-ic { width: 44px; height: 44px; }
.jh-row em { align-self: center; }
/* chapters: number box aligned to the first text line */
.vid-sec .ch-list button { align-items: center; }
.vid-sec .ch-n { align-self: center; }
/* plans: card title row, price baseline and bullets aligned across cards */
.plan-top { min-height: 28px; align-items: center; }
.plan-for { min-height: 3.2em; }
.plan-keys li { padding-left: 22px; }
.plan-keys li::before { top: .55em; }

/* final CTA matches the richer palette */
.final-in::before { background:
  radial-gradient(45% 70% at 15% 0%, rgba(120, 90, 255, .6), transparent 70%),
  radial-gradient(40% 60% at 90% 100%, rgba(0, 194, 224, .4), transparent 70%),
  radial-gradient(30% 40% at 60% 30%, rgba(255, 95, 176, .22), transparent 70%); }
.final-in { background: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .jw [data-reveal-item], .jm-tl span, .hb-hero-copy > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hb-float { opacity: 1 !important; transition: none !important; }
}
@media (max-width: 640px) {
  .jw-score { flex-wrap: wrap; }
}

/* ---------- hero: the product keeps working ---------- */
.hb-live { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #16c784; box-shadow: 0 0 0 0 rgba(22, 199, 132, .5); vertical-align: 2px; }
.has-motion .hb-live { animation: hb-live 2.2s ease-out infinite; }
@keyframes hb-live { 0% { box-shadow: 0 0 0 0 rgba(22, 199, 132, .55); } 70% { box-shadow: 0 0 0 7px rgba(22, 199, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 199, 132, 0); } }
.hb-kpi p, .hb-kpi strong, .hb-f-diff > p, .hb-f-diff .hb-why { transition: opacity .26s ease, transform .26s ease; }
.hb-kpi.hb-swap p, .hb-kpi.hb-swap strong { opacity: 0; transform: translateY(4px); }
.hb-f-diff.hb-swap > p:not(.hb-f-k), .hb-f-diff.hb-swap .hb-why { opacity: 0; transform: translateY(4px); }
.hb-cand { transition: background-color .45s ease; }
.hb-cand b::before { transition: opacity .3s ease, transform .3s ease; }
.hb-cand:not(.hb-on) b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: transparent; box-shadow: none; }
.hb-f-diff .hb-yes { transition: transform .18s ease, filter .18s ease; }
.hb-f-diff .hb-yes.is-press { transform: scale(.94); filter: brightness(1.15); }
.hb-f-pub { transition: box-shadow .4s ease; }
.hb-f-pub b, .hb-f-pub span { transition: color .3s ease; }
.hb-f-pub .hb-wp { position: relative; transition: background-color .3s ease; }
.hb-f-pub .hb-wp::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: #16c784; border-radius: inherit; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.hb-f-pub.is-saved .hb-wp::after { opacity: 1; transform: none; }
.hb-f-pub.is-saved { box-shadow: var(--float-shadow), 0 0 0 1.5px rgba(22, 199, 132, .55); }
.hb-f-pub.is-saved b { color: #0f8a5b; }
.hb-f-gen ol li { transition: color .3s ease; }
.hb-f-gen ol li::before { display: inline-block; min-width: 1em; }
.hb-f-gen.is-done .hb-f-k .hb-dot { background: #16c784; }
.hb-f-gen .hb-f-k .hb-dot { transition: background .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .hb-live { animation: none; }
}

/* =========================================================================
   改善する (2026-10-13): one continuous product UI on a dark glass surface
   that belongs to the band. A camera (scale ≥ 1) moves over it; a spotlight
   dims what is not the point; a cursor performs the actions once. One accent.
   ========================================================================= */
.improve { --band: #0b0b14; --surface: #13131f; --surface-2: rgba(255,255,255,.02); --hair: rgba(255,255,255,.08); --hair-hi: rgba(255,255,255,.14);
  --t1: #ededf2; --t2: rgba(237,237,242,.62); --t3: rgba(237,237,242,.40); --acc: #6d4dff; --acc-t: #8b7cff; --sel: rgba(124,108,255,.10); --num: "Inter", "Noto Sans JP", sans-serif;
  position: relative; overflow: clip; padding: 120px 0 128px; background: var(--band); color: var(--t1); border-top: 1px solid rgba(255,255,255,.06); }
.improve::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 420px at 18% -8%, rgba(109,77,255,.22), transparent 70%); }
.improve::after { content: ""; position: absolute; left: 50%; top: 58%; width: 1100px; height: 720px; margin: -360px 0 0 -550px; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, var(--glow, rgba(109,77,255,.16)), transparent 70%); filter: blur(30px); transition: background 900ms ease, transform 900ms cubic-bezier(.65,0,.35,1); transform: translate(var(--gx, -120px), var(--gy, 0px)); }
.improve[data-m="1"] { --glow: rgba(140,160,255,.15); --gx: 160px; --gy: -40px; }
.improve[data-m="2"] { --glow: rgba(124,92,255,.24); --gx: 230px; --gy: 10px; }
.improve[data-m="3"] { --glow: rgba(90,150,210,.17); --gx: 260px; --gy: 150px; }
.improve .wrap { position: relative; }
.improve .num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.improve .h2 { margin-top: 14px; max-width: 600px; font-size: 44px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: #f4f4f8; }

/* right: article strip, reasons+diff rows, footer */
.im-stats { display: flex; gap: 40px; margin-top: 14px; }
.im-stat { display: grid; grid-template-columns: auto 64px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: end; }
.im-stat span { grid-column: 1; grid-row: 1; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--t3); }
.im-stat b { grid-column: 1; grid-row: 2; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--t1); }
.im-stat b small { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t2); margin-left: 3px; letter-spacing: 0; }
.im-stat svg { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 64px; height: 30px; margin-bottom: 2px; opacity: .9; }
.im-stat svg path { fill: none; stroke: #8b7cff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.im-stat svg path.f { fill: rgba(124,108,255,.18); stroke: none; }
.im-row { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 0 16px; padding: 12px 24px 14px; border-top: 1px solid var(--hair); transition: background-color .12s; }
.im-row:first-child { border-top: 0; }
.im-row.hover { background: rgba(255,255,255,.04); }
.im-row .rt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--t1); }
.im-pri { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(124,108,255,.35); }
.im-pri.m { background: none; border: 1px solid rgba(255,255,255,.18); color: var(--t2); }
.im-row .basis { margin: 2px 0 0; font-size: 12px; color: var(--t2); }
.im-row .dp { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--t1); }
.im-row .dp .at { display: inline-block; margin-right: 6px; font-size: 11px; color: var(--t3); }
.im-row del { color: var(--t3); text-decoration: line-through; text-decoration-color: rgba(237,237,242,.5); text-decoration-thickness: 1px; background: none; }
.im-row ins { color: var(--t1); background: rgba(124,108,255,.16); border-radius: 3px; padding: 0 2px; text-decoration: none; }
.im-row.is-off .dp ins { background: none; color: var(--t3); text-decoration: line-through; text-decoration-color: rgba(237,237,242,.35); }
.im-row.is-off .dp del { text-decoration: none; color: var(--t2); }
.im-sw { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-self: end; margin-top: 2px; position: relative; width: 36px; height: 22px; border: 0; border-radius: 99px; background: rgba(255,255,255,.12); cursor: pointer; padding: 0; transition: background .18s; }
.im-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.2,.8,.2,1), width .1s; }
.im-sw[aria-pressed="true"] { background: var(--acc); } .im-sw[aria-pressed="true"]::after { transform: translateX(14px); }
.im-sw:active::after { width: 18px; }
.im-sw:focus-visible { outline: 2px solid var(--acc-t); outline-offset: 2px; }
.im-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--acc); cursor: pointer; transition: transform .1s, background .15s, opacity .2s; }
.im-btn:hover { background: #7a5cff; } .im-btn.press { transform: scale(.98); } .im-btn.busy { opacity: .6; pointer-events: none; }
@keyframes im-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }

/* readout + conditions on the dark band */
@media (max-width: 900px) {
  .improve { padding: 80px 0 88px; }
  .improve .h2 { font-size: 30px; }
  .im-stats { gap: 20px; } .im-stat { grid-template-columns: auto; } .im-stat svg { display: none; } .im-stat b { font-size: 22px; }
  .im-row { grid-template-columns: minmax(0,1fr) 40px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .improve::after { transition: none !important; }
}

/* authoritative fixes: numbers, readout surface, resume on phone */
.improve .im-stat b, .improve .im-stat b .n { font-size: 30px; font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; color: var(--t1); line-height: 1; }
.improve .im-stat b small { font-size: 12px; }
/* ---- band: light lavender, the only dark thing is the product window ---- */
.sx { --ink: #0b0d2a; --ink2: #3a3f63; --sub: #5a6080; --mute: #8a8fab; --acc: #6d4dff; --acc-t: #5a3cf0;
      --surface: #13131f; --hair: rgba(255,255,255,.08); --hair-hi: rgba(255,255,255,.14); --t1: #ededf2; --t2: rgba(237,237,242,.62); --t3: rgba(237,237,242,.40);
      --num: "Inter", "Noto Sans JP", sans-serif; --nav: 64px;
      position: relative; background: linear-gradient(180deg, #fff 0, #f6f4ff 180px, #f3f0ff 50%, #f6f4ff calc(100% - 180px), #fff 100%); color: var(--ink); }
.sx .num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.sx-track { position: relative; height: 400vh; }
.sx-pin { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); display: flex; align-items: center; overflow: hidden; }
.sx-pin::before { content: ""; position: absolute; right: -10%; top: 50%; width: 1000px; height: 760px; margin-top: -380px; pointer-events: none; border-radius: 50%;
      background: radial-gradient(closest-side, var(--glow, rgba(109,77,255,.20)), rgba(0,194,224,.06) 60%, transparent 75%); filter: blur(20px); transition: background .8s ease; }
.sx[data-m="1"] { --glow: rgba(90,120,255,.20); } .sx[data-m="2"] { --glow: rgba(124,92,255,.26); } .sx[data-m="3"] { --glow: rgba(0,180,210,.18); }
.sx-grid { position: relative; width: min(1200px, 100% - 80px); margin-inline: auto; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center; }

/* ---- left: headline + 4 steps (all visible, active one lit, progress fills with scroll) ---- */
.sx-k { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--acc-t); }
.sx-h { font-feature-settings: "palt"; margin: 12px 0 0; font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.sx-steps { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sx-step { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 2px 12px; padding: 14px 16px 14px 18px; border-radius: 12px; cursor: pointer; transition: background-color .35s ease, opacity .35s ease; opacity: .42; }
.sx-step::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgba(109,77,255,.15); }
.sx-step::after { content: ""; position: absolute; left: 0; top: 14px; width: 2px; height: calc((100% - 28px) * var(--p, 0)); border-radius: 2px; background: var(--acc); }
.sx-step i { grid-row: span 2; font-style: normal; font-family: var(--num); font-size: 13px; font-weight: 600; color: var(--acc-t); padding-top: 2px; }
.sx-step b { font-size: 18px; font-weight: 700; color: var(--ink); }
.sx-step span { font-size: 14.5px; line-height: 1.7; color: var(--sub); }
.sx-step.on { opacity: 1; background: rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(11,13,42,.04), 0 12px 30px -18px rgba(60,50,160,.35); }
.sx-step:hover { opacity: .8; } .sx-step.on:hover { opacity: 1; }
.sx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 24px; font-size: 12.5px; color: var(--mute); }
.sx-vid { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sx-vid::before { content: ""; width: 0; height: 0; border-left: 8px solid var(--acc); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ---- right: the dark product window ---- */
.sx-stage { position: relative; }
.sx-win { position: relative; height: min(560px, calc(100vh - var(--nav) - 120px)); border-radius: 14px; overflow: hidden; background: var(--surface); color: var(--t1);
      box-shadow: 0 0 0 1px rgba(11,13,42,.08), 0 2px 4px rgba(11,13,42,.06), 0 50px 100px -40px rgba(40,30,120,.55); font-size: 12.5px; line-height: 1.6; }
.sx-bar { position: relative; z-index: 3; display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: var(--surface); font-size: 11.5px; color: rgba(237,237,242,.55); }
.sx-bar .d { display: flex; gap: 6px; } .sx-bar .d i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.sx-bar .c { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sx-bar .c b { font-weight: 500; color: var(--t1); }
.sx-bar .r { text-align: right; }
.sx-cam { position: absolute; left: 0; top: 38px; width: 100%; transform-origin: 0 0; transition: transform 800ms cubic-bezier(.65,0,.35,1); display: grid; grid-template-columns: 236px minmax(0,1fr); }
.sx-cam [data-spot] { transition: opacity 450ms ease; }
.sx-left { padding: 16px 0; background: rgba(255,255,255,.02); border-right: 1px solid var(--hair); min-height: 100%; }
.sx-ph { padding: 0 16px 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--t3); }
.sx-cand { position: relative; display: grid; gap: 1px; padding: 10px 16px 10px 18px; }
.sx-cand .w { font-size: 11px; color: var(--t2); } .sx-cand .t { font-size: 12.5px; font-weight: 500; } .sx-cand .m { font-family: var(--num); font-size: 11px; color: var(--t3); }
.sx-cand.on { background: rgba(124,108,255,.12); } .sx-cand.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: #7c6cff; }
.sx-right { min-width: 0; }
.sx-ah { padding: 16px 20px 14px; border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, rgba(124,108,255,.09), transparent 80%); }
.sx-ah .tt { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.sx-stats { display: flex; gap: 28px; margin-top: 10px; }
.sx-stat { display: grid; grid-template-columns: auto 52px; column-gap: 10px; align-items: end; }
.sx-stat span { grid-column: 1; font-size: 10.5px; color: var(--t3); }
.sx-stat b { grid-column: 1; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.sx-stat b small { font-size: 11px; font-weight: 500; color: var(--t2); margin-left: 2px; }
.sx-stat svg { grid-column: 2; grid-row: 1 / span 2; width: 52px; height: 24px; }
.sx-stat svg path { fill: none; stroke: #8b7cff; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .sx-stat svg path.f { fill: rgba(124,108,255,.18); stroke: none; }
.sx-rh { display: flex; justify-content: space-between; padding: 10px 20px 6px; font-size: 10.5px; color: var(--t3); } .sx-rh b { color: var(--t1); font-family: var(--num); }
.sx-row { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 0 12px; padding: 10px 20px 12px; border-top: 1px solid var(--hair); }
.sx-row:first-child { border-top: 0; }
.sx-row .rt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; }
.sx-pri { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(124,108,255,.38); }
.sx-pri.m { background: none; border: 1px solid rgba(255,255,255,.18); color: var(--t2); }
.sx-row .bs { margin: 2px 0 0; font-size: 11.5px; color: var(--t2); }
.sx-row .dp { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; } .sx-row .dp .at { margin-right: 6px; font-size: 10.5px; color: var(--t3); }
.sx-row del { color: var(--t3); text-decoration-color: rgba(237,237,242,.5); } .sx-row ins { text-decoration: none; background: rgba(124,108,255,.18); border-radius: 3px; padding: 0 2px; }
.sx-row.off ins { background: none; color: var(--t3); text-decoration: line-through; } .sx-row.off del { text-decoration: none; color: var(--t2); }
.sx-sw { grid-column: 2; grid-row: 1 / span 3; justify-self: end; position: relative; width: 34px; height: 20px; border: 0; padding: 0; border-radius: 99px; background: rgba(255,255,255,.14); cursor: pointer; transition: background .2s; }
.sx-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.sx-sw[aria-pressed="true"] { background: var(--acc); } .sx-sw[aria-pressed="true"]::after { transform: translateX(14px); }
.sx-sw.ping { box-shadow: 0 0 0 0 rgba(155,135,255,.7); animation: sx-ping .9s ease-out; }
@keyframes sx-ping { to { box-shadow: 0 0 0 12px rgba(155,135,255,0); } }
.sx-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--t2); }
.sx-ft .w { display: flex; align-items: center; gap: 8px; min-width: 0; } .sx-ft .w span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ft .ex { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--hair-hi); font-size: 9px; font-weight: 600; }
.sx-btn { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: var(--acc); cursor: pointer; transition: transform .1s; }
.sx-btn.press { transform: scale(.97); }
.sx-toast { position: absolute; right: 14px; bottom: 64px; z-index: 4; display: block; padding: 10px 12px; border-radius: 8px; background: #1c1c2a; border: 1px solid var(--hair-hi); font-size: 12.5px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; pointer-events: none; }
.sx-toast::before { content: "✓ "; color: #9b87ff; } .sx-toast span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--t2); padding-left: 1.4em; }
.sx-toast.on { opacity: 1; transform: none; }
/* annotation pill: says what to look at, sits on the window edge */
.sx-note { position: absolute; left: 0; top: -46px; z-index: 4; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; background: rgba(255,255,255,.96); color: var(--ink); font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 1px rgba(11,13,42,.06), 0 8px 20px -10px rgba(40,30,120,.45); transition: opacity .3s, transform .3s; }
.sx-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px rgba(109,77,255,.2); }
.sx-note.swap { opacity: 0; transform: translateY(4px); }

.sx-after { position: relative; width: min(1200px, 100% - 80px); margin: 0 auto; padding: 8px 0 96px; }
.sx-after .readout { margin-top: 0; background: #fff; }
.sx-after .more { margin-top: 16px; }

/* ---- smaller screens: no pin; tabs + window + caption ---- */
@media (max-width: 1023px), (max-height: 479px) {
  .sx-track { height: auto; }
  .sx-pin { position: relative; top: auto; height: auto; padding: 80px 0 24px; display: block; }
  .sx-grid { grid-template-columns: 1fr; gap: 24px; width: calc(100% - 40px); }
  .sx-h { font-size: 28px; }
  .sx-steps { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 24px; }
  .sx-step { grid-template-columns: 1fr; padding: 10px 6px; text-align: center; opacity: .5; }
  .sx-step::before { display: none; }
  .sx-step::after { left: 12px; top: auto; bottom: 6px; height: 2px; width: calc((100% - 24px) * var(--p, 0)); } .sx-step i { grid-row: auto; } .sx-step b { font-size: 13px; } .sx-step span { display: none; }
  .sx-cap { display: block !important; margin-top: 14px; font-size: 14.5px; line-height: 1.75; color: var(--sub); }
  .sx-win { height: min(460px, calc(100vh - 180px)); }
  /* tabs sit right above the window so both are on screen together; caption + video link follow */
  .sx-grid { gap: 0; } .sx-copy { display: contents; }
  .sx-k { order: 1; } .sx-h { order: 2; } .sx-steps { order: 3; } .sx-stage { order: 4; margin-top: 12px; } .sx-cap { order: 5; } .sx-foot { order: 6; margin-top: 12px; }
  .sx-note { display: none; }
  .sx-after { width: calc(100% - 40px); padding-bottom: 72px; }
}
.sx-cap { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 480px) { .sx-grid { grid-template-columns: 340px minmax(0,1fr); gap: 40px; } .sx-h { font-size: 30px; } .sx-steps { margin-top: 20px; } .sx-step { padding-block: 10px; } }
@media (min-width: 1024px) and (max-height: 819px) and (min-height: 480px) {
  .sx-h { font-size: 28px; } .sx-steps { margin-top: 18px; gap: 2px; } .sx-step { padding-block: 9px; }
  .sx-step span { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .35s ease; }
  .sx-step.on span { max-height: 5em; opacity: 1; }
  .sx-foot { margin-top: 14px; }
  .sx-win { height: calc(100vh - var(--nav) - 96px); }
}
@media (min-width: 1024px) and (max-height: 639px) and (min-height: 480px) {
  .sx-k { font-size: 12px; } .sx-h { margin-top: 8px; font-size: 24px; } .sx-steps { margin-top: 12px; } .sx-step { padding-block: 7px; } .sx-step b { font-size: 16px; } .sx-step span { font-size: 13.5px; line-height: 1.6; }
  .sx-foot { margin-top: 10px; } .sx-win { height: calc(100vh - var(--nav) - 84px); }
  .sx-note { top: -38px; padding: 5px 11px 5px 9px; font-size: 12px; }
}
/* window narrower than 560px (phones): stack the panes, no zoom; past step 1 the list folds away (set from JS).
   Wider windows keep the desktop canvas and scale it down to fit. */
.sx.narrow .sx-stats { gap: 18px; } .sx.narrow .sx-stat { grid-template-columns: auto; } .sx.narrow .sx-stat svg { display: none; } .sx.narrow .sx-stat b { font-size: 20px; }
.sx.narrow .sx-cam { grid-template-columns: 1fr; } .sx.narrow .sx-left { border-right: 0; border-bottom: 1px solid var(--hair); } .sx.narrow:not([data-m="0"]) .sx-left { display: none; } .sx.narrow .sx-toast { top: 50px; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .sx-cam, .sx-cam [data-spot], .sx-step, .sx-pin::before { transition: none !important; } }

/* ---- 無料診断 (10-13): what the hero button gives you — a report window + one real rewrite ---- */
.job-diag { --dx-ink: #0b0d2a; --dx-sub: #5a6080; --dx-mute: #8a8fab; --dx-acc: #6d4dff; --dx-acc-t: #5a3cf0; --dx-line: rgba(13, 16, 48, .08); }
.job-diag .job-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.job-diag .job-copy { padding-top: 40px; }

/* steps: one line each, numbered like the product */
.dx-steps { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--dx-line); }
.dx-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; padding: 11px 0; border-bottom: 1px solid var(--dx-line); }
.dx-steps i { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--dx-acc-t); background: #f1edff; }
.dx-steps li:last-child i { color: #fff; background: var(--g); }
.dx-steps b { font-size: 15.5px; font-weight: 700; color: var(--dx-ink); line-height: 1.5; padding-top: 2px; }
.dx-steps span { font-size: 13.5px; color: var(--dx-sub); line-height: 1.6; }
.dx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.dx-cta .btn svg { width: 16px; height: 16px; margin-left: 8px; }

/* the report window */
.dx-fig { display: flex; flex-direction: column; }
.dx-report { display: block; width: 100%; max-width: 600px; text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.dx-report:hover { transform: translateY(-3px); }
.dx-report:focus-visible { outline: 2px solid var(--dx-acc); outline-offset: 4px; }
.dx-body { padding: 18px 20px 18px; }
.dx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 12px; }
.dx-head p { margin: 0; font-size: 12px; color: var(--dx-mute); }
.dx-head p b { margin-right: 8px; font-size: 14.5px; font-weight: 700; color: var(--dx-ink); }
.dx-head span { font-size: 11.5px; color: var(--dx-mute); } .dx-head span b { color: var(--dx-ink); font-weight: 600; }
.dx-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--dx-line); border-radius: 12px; overflow: hidden; }
.dx-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; padding: 13px 14px; }
.dx-row + .dx-row { border-top: 1px solid var(--dx-line); }
.dx-row.top { background: linear-gradient(110deg, #f6f3ff, #fff 70%); }
.dx-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 700; color: var(--dx-acc-t); background: #f1edff; box-shadow: inset 0 0 0 1px rgba(109, 77, 255, .18); }
.dx-row.top .dx-rank { color: #fff; background: var(--g); box-shadow: none; }
.dx-main { min-width: 0; }
.dx-t { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--dx-ink); }
.dx-f { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--dx-sub); }
.dx-f span { margin-right: 8px; font-size: 10.5px; font-weight: 600; color: var(--dx-mute); }
.dx-ba { display: grid; gap: 5px; margin: 9px 0 0; font-size: 11px; line-height: 1.5; }
.dx-ba p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; }
.dx-ba s, .dx-ba ins { padding: 2px 8px; border-radius: 6px; text-decoration: none; font-weight: 500; }
.dx-ba s { color: #6b7092; background: #f2f2f7; }
.dx-ba ins { color: var(--dx-acc-t); background: #f1edff; }
.dx-ba span { width: 3.6em; flex: none; font-size: 10.5px; font-weight: 600; color: var(--dx-mute); }
.dx-pri { justify-self: end; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--dx-acc); }
.dx-pri.m { color: var(--dx-acc-t); background: none; box-shadow: inset 0 0 0 1px rgba(109, 77, 255, .3); }
.dx-foot { margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 14px 2px 0; border-top: 1px solid var(--dx-line); }
.dx-more { font-size: 11.5px; color: var(--dx-mute); }
.dx-btn { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--dx-acc-t); background: #f1edff; box-shadow: inset 0 0 0 1px rgba(109, 77, 255, .22); transition: background-color .2s; }
.dx-report:hover .dx-btn { background: #e8e2ff; }
.dx-btn svg { width: 14px; height: 14px; margin-left: 6px; }
/* hangs just under the report's 1本目 button: press it, and this is what comes back */
.dx-proof { position: relative; z-index: 2; align-self: flex-end; width: 440px; margin: -22px -12px 0 0; padding: 14px 18px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k k" "l c" "g c" "a a"; column-gap: 22px; border-radius: 14px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(109, 77, 255, .18), 0 2px 4px rgba(11, 13, 42, .05), 0 30px 60px -24px rgba(60, 40, 180, .45); }
.has-motion .dx-proof { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .9s, transform .7s cubic-bezier(.2, .7, .2, 1) .9s; }
.has-motion .is-in .dx-proof { opacity: 1; transform: none; }
.dx-proof-k { grid-area: k; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--dx-sub); }
.dx-proof-k span { padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: var(--g); }
.dx-proof-l { grid-area: l; margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--dx-ink); }
.dx-proof-l small { display: block; font-size: 10.5px; font-weight: 400; color: var(--dx-mute); }
.dx-geo { grid-area: g; display: flex; align-items: baseline; gap: 10px; margin: 4px 0 0; font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.dx-geo .b { font-size: 22px; font-weight: 600; color: #a3a7c0; }
.dx-geo i { font-style: normal; font-size: 16px; color: var(--dx-mute); }
.dx-geo b { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dx-geo em { margin-left: 2px; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--dx-acc-t); background: #f1edff; }
.dx-chg { grid-area: c; align-self: center; display: grid; gap: 4px; margin: 12px 0 0; padding: 2px 0 2px 20px; list-style: none; border-left: 1px solid var(--dx-line); font-size: 12px; line-height: 1.6; color: #2f3148; }
.dx-chg li { position: relative; padding-left: 18px; }
.dx-chg li::before { content: ""; position: absolute; left: 0; top: calc(.5lh - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--g); -webkit-mask: radial-gradient(circle, transparent 2px, #000 2.5px); mask: radial-gradient(circle, transparent 2px, #000 2.5px); }
.dx-proof-a { grid-area: a; justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--dx-acc-t); text-decoration: none; }
.dx-proof-a svg { width: 13px; height: 13px; }
.dx-proof-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dx-fig .job-cap { margin-top: 16px; max-width: 560px; }

@media (max-width: 900px) {
  /* phones/tablets: heading, then the picture, then the steps and the button */
  .job-diag .job-grid { grid-template-columns: 1fr; gap: 0; }
  .job-diag .job-copy { display: contents; }
  .job-diag .job-k { order: 1; } .job-diag .h2 { order: 2; } .job-diag .job-p { order: 3; }
  .job-diag .job-grid > .dx-fig { order: 4; margin-top: 32px; } .job-diag .dx-steps { order: 5; margin-top: 32px; } .job-diag .dx-cta { order: 6; }
  .dx-report { max-width: none; }
  .dx-proof { margin-right: 12px; }
}
@media (max-width: 560px) {
  .dx-body { padding: 14px 12px; }
  .dx-row { grid-template-columns: 24px minmax(0, 1fr); padding: 12px 10px; }
  .dx-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .dx-pri { padding: 2px 8px; font-size: 10px; }
  .dx-row:not(.top) .dx-f { display: none; }
  .dx-foot { flex-direction: column; align-items: stretch; gap: 10px; } .dx-more { text-align: center; } .dx-btn { justify-content: center; }
  .dx-proof { align-self: stretch; width: auto; margin: -20px 8px 0; grid-template-columns: 1fr; grid-template-areas: "k" "l" "g" "c" "a"; }
  .dx-chg { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--dx-line); }
}
@media (prefers-reduced-motion: reduce) { .dx-proof { opacity: 1 !important; transform: none !important; transition: none !important; width: var(--w); } }

.dx-fig:has(.dx-proof) .dx-foot { margin-bottom: 26px; }