/* Layout concept: floating glass nav with mega menus over a deep-green hero, product window bleeding off the right edge, then light sections with bento tiles, a live domain widget, tariffs and a plain about page. */
:root {
  --f-display: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --bg: #ffffff; --page: #f5f8f6; --s2: #edf2ef; --s3: #e1e9e4; --line: #e0e7e3; --line2: #c9d4cd;
  --ink: #0a1410; --ink2: #3d4a43; --ink3: #6a7770; --ink4: #a1ada6;
  --brand: #1e6b4e; --brand-h: #175840; --brand-soft: #e4f1ea; --on-brand: #ffffff;
  --deep: #0b2a1f; --deep2: #12402f; --on-deep: #eaf4ee; --on-deep2: #9fc2b2; --deep-line: rgb(255 255 255 / 0.12);
  --lime: #b6ee4a; --lime-h: #c6f56b; --on-lime: #0d1f06;
  --ok: #1e8a5e; --ok-soft: #e1f3ea; --ok-ink: #17694a; --warn: #d99a12; --warn-soft: #fbf1d6; --warn-ink: #7a5606; --bad: #d4442f; --bad-soft: #fbe6e2; --bad-ink: #a2321f; --info: #3a6fc4; --info-soft: #e6eefa; --info-ink: #2a5598;
  --navbg: rgb(255 255 255 / 0.8); --navline: rgb(10 20 16 / 0.1); --panel: rgb(255 255 255);
  --sh1: 0 1px 2px rgb(10 20 16 / 0.05); --sh2: 0 10px 30px -12px rgb(10 20 16 / 0.18); --sh3: 0 30px 70px -20px rgb(10 20 16 / 0.35);
  --ring: 0 0 0 3px rgb(30 107 78 / 0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f0d; --page: #0e1512; --s2: #141c18; --s3: #1c2621; --line: #212b26; --line2: #313e37;
    --ink: #eef3f0; --ink2: #bcc7c0; --ink3: #8a978f; --ink4: #5b6760;
    --brand: #4cc593; --brand-h: #6edbb0; --brand-soft: #14281f; --on-brand: #06140d;
    --deep: #0d2e22; --deep2: #164a37; --on-deep: #eaf4ee; --on-deep2: #9fc2b2;
    --ok: #4cc593; --ok-soft: #14291f; --ok-ink: #7fe0b8; --warn: #e5b341; --warn-soft: #332a12; --warn-ink: #f0d37e; --bad: #ee7262; --bad-soft: #3a1c18; --bad-ink: #f6a499; --info: #7aa6ee; --info-soft: #17263f; --info-ink: #a4c3f4;
    --navbg: rgb(14 21 18 / 0.78); --navline: rgb(255 255 255 / 0.1); --panel: rgb(16 24 20);
    --sh1: 0 1px 2px rgb(0 0 0 / 0.4); --sh2: 0 10px 30px -12px rgb(0 0 0 / 0.6); --sh3: 0 30px 70px -20px rgb(0 0 0 / 0.8); --ring: 0 0 0 3px rgb(76 197 147 / 0.35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0f0d; --page: #0e1512; --s2: #141c18; --s3: #1c2621; --line: #212b26; --line2: #313e37;
  --ink: #eef3f0; --ink2: #bcc7c0; --ink3: #8a978f; --ink4: #5b6760;
  --brand: #4cc593; --brand-h: #6edbb0; --brand-soft: #14281f; --on-brand: #06140d;
  --deep: #0d2e22; --deep2: #164a37; --on-deep: #eaf4ee; --on-deep2: #9fc2b2;
  --ok: #4cc593; --ok-soft: #14291f; --ok-ink: #7fe0b8; --warn: #e5b341; --warn-soft: #332a12; --warn-ink: #f0d37e; --bad: #ee7262; --bad-soft: #3a1c18; --bad-ink: #f6a499; --info: #7aa6ee; --info-soft: #17263f; --info-ink: #a4c3f4;
  --navbg: rgb(14 21 18 / 0.78); --navline: rgb(255 255 255 / 0.1); --panel: rgb(16 24 20);
  --sh1: 0 1px 2px rgb(0 0 0 / 0.4); --sh2: 0 10px 30px -12px rgb(0 0 0 / 0.6); --sh3: 0 30px 70px -20px rgb(0 0 0 / 0.8); --ring: 0 0 0 3px rgb(76 197 147 / 0.35); color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--deep); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-display); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 16px; height: 16px; } .ic.xs { width: 13px; height: 13px; } .ic.lg { width: 24px; height: 24px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow { font: 600 12px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.sec { padding-block: 96px; } .sec.alt { background: var(--page); } .sec.tight { padding-block: 64px; }
.sh { display: grid; gap: 14px; max-width: 700px; margin-bottom: 52px; } .sh h2 { font-size: clamp(32px, 4.4vw, 52px); } .sh p { font-size: 18px; color: var(--ink2); max-width: 600px; } .sh.c { margin-inline: auto; text-align: center; justify-items: center; }
.lead { font-size: 19px; color: var(--ink2); line-height: 1.55; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 600 15px var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.btn:hover { background: var(--brand-h); } .btn:active { transform: translateY(1px); }
.btn.lime { background: var(--lime); color: var(--on-lime); box-shadow: 0 8px 28px -8px rgb(182 238 74 / 0.55); } .btn.lime:hover { background: var(--lime-h); }
.btn.line { background: transparent; border-color: var(--line2); color: var(--ink); } .btn.line:hover { background: var(--s2); border-color: var(--ink3); }
.btn.onDeep { background: transparent; border-color: var(--deep-line); color: var(--on-deep); } .btn.onDeep:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.35); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 14px; } .btn.lg { height: 54px; padding: 0 28px; font-size: 16px; } .btn.block { width: 100%; }
.arr { transition: translate 0.2s; } .btn:hover .arr { translate: 3px 0; }
.tlink { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: none; } .tlink:hover .arr { translate: 3px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.lime { background: var(--lime); color: var(--on-lime); } .chip.ok { background: var(--ok-soft); color: var(--ok-ink); } .chip.warn { background: var(--warn-soft); color: var(--warn-ink); } .chip.line { background: transparent; border: 1px solid var(--line2); color: var(--ink2); }

/* ---------- nav ---------- */
.nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); height: 72px; }
.navin { position: relative; max-width: 1200px; margin: 0 auto; }
.nav { display: flex; align-items: center; gap: 6px; height: 60px; padding: 0 10px 0 16px; border: 1px solid var(--navline); border-radius: 18px; background: var(--navbg); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--sh2); }
.logo { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: 700 18px var(--f-display); letter-spacing: -0.03em; color: var(--ink); cursor: pointer; text-decoration: none; }
.logo i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--deep); color: var(--lime); font: 700 12.5px var(--f-mono); letter-spacing: -0.06em; font-style: normal; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.nl { position: relative; display: flex; align-items: center; height: 40px; margin-left: 20px; }
.nl-ind { position: absolute; top: 0; left: 0; height: 40px; width: 0; border-radius: 11px; background: var(--s2); opacity: 0; transition: transform 0.28s cubic-bezier(0.3, 0.8, 0.3, 1), width 0.28s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.2s; pointer-events: none; }
.nl > a, .nl > button { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; background: none; border-radius: 11px; color: var(--ink2); font: 500 14.5px var(--f-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color 0.15s; }
.nl > a:hover, .nl > button:hover, .nl > button[aria-expanded="true"], .nl > a.on { color: var(--ink); }
.nl > a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand); }
.nl .cv { width: 13px; height: 13px; transition: rotate 0.2s; } .nl > button[aria-expanded="true"] .cv { rotate: 180deg; }
.nav-sp { flex: 1; }
.nav-r { display: flex; align-items: center; gap: 6px; }
.nav-r .login { height: 40px; padding: 0 14px; border: 0; background: none; border-radius: 11px; color: var(--ink2); font: 500 14.5px var(--f-sans); cursor: pointer; } .nav-r .login:hover { color: var(--ink); background: var(--s2); }
.burger { display: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.mp { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 10px; border: 1px solid var(--navline); border-radius: 22px; background: var(--panel); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--sh3); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985); transform-origin: top center; transition: opacity 0.18s, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.24s; }
.mp.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mp.sm { right: auto; width: 320px; }
.mp-in { display: grid; grid-template-columns: 1fr 1fr minmax(0, 0.92fr); gap: 8px; } .mp-in.two { grid-template-columns: 1fr 1fr minmax(0, 0.92fr); }
.mcol { display: grid; gap: 2px; align-content: start; } .mcol h6 { padding: 10px 12px 6px; font: 600 11px var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink3); }
.mi { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 13px; background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s; }
.mi:hover, .mi:focus-visible { background: var(--s2); }
.mi .ti { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--brand-soft); color: var(--brand); transition: background 0.15s, color 0.15s, transform 0.2s; } .mi:hover .ti { background: var(--brand); color: var(--on-brand); transform: translateY(-1px); }
.mi b { display: block; font: 600 14.5px var(--f-sans); letter-spacing: -0.01em; color: var(--ink); } .mi small { display: block; margin-top: 1px; color: var(--ink3); font-size: 12.5px; line-height: 1.4; }
.mfeat { position: relative; display: grid; align-content: space-between; gap: 18px; padding: 22px; border-radius: 16px; background: radial-gradient(260px 180px at 100% 0%, rgb(182 238 74 / 0.25), transparent 70%), linear-gradient(160deg, var(--deep2), var(--deep)); color: var(--on-deep); overflow: hidden; }
.mfeat h5 { font: 650 20px/1.15 var(--f-display); letter-spacing: -0.02em; } .mfeat p { margin-top: 8px; color: var(--on-deep2); font-size: 13.5px; }
.mfeat .dom { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgb(255 255 255 / 0.1); font: 500 12px var(--f-mono); width: fit-content; } .mfeat .dom i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.mfeat .tlink { color: var(--lime); }
.msheet { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.25s, visibility 0s 0.25s; padding-top: env(safe-area-inset-top, 0px); }
.msheet.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ms-h { display: flex; align-items: center; justify-content: space-between; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.ms-b { overflow-y: auto; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 4px; align-content: start; }
.ms-b details { border-bottom: 1px solid var(--line); } .ms-b summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; font: 600 19px var(--f-display); letter-spacing: -0.02em; list-style: none; cursor: pointer; } .ms-b summary::-webkit-details-marker { display: none; } .ms-b summary .ic { transition: rotate 0.2s; } .ms-b details[open] summary .ic { rotate: 180deg; }
.ms-b details > div { display: grid; gap: 2px; padding-bottom: 12px; }
.ms-b > a, .ms-b > button.l { display: block; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: 600 19px var(--f-display); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); cursor: pointer; }
.ms-f { display: grid; gap: 10px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); }

/* ---------- hero ---------- */
.pg { display: none; } .pg.on { display: block; animation: pgin 0.4s ease; } @keyframes pgin { from { opacity: 0; translate: 0 8px; } }
.hero { position: relative; margin-top: -72px; padding: 150px 0 0; background: radial-gradient(900px 520px at 85% 8%, rgb(182 238 74 / 0.2), transparent 62%), radial-gradient(700px 500px at 0% 100%, rgb(46 154 114 / 0.35), transparent 65%), var(--deep); color: var(--on-deep); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--deep-line) 1px, transparent 1px), linear-gradient(90deg, var(--deep-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%); opacity: 0.55; }
.hero-g { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 56px; align-items: center; padding-bottom: 90px; }
.hero h1 { font-size: clamp(42px, 5vw, 68px); letter-spacing: -0.045em; line-height: 1; margin-top: 22px; } .hero h1 em { font-style: normal; color: var(--lime); }
.hero .lead { margin-top: 24px; color: var(--on-deep2); max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--on-deep2); font-size: 13.5px; } .hero-note span { display: inline-flex; align-items: center; gap: 7px; } .hero-note .ic { color: var(--lime); }
.pill-new { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--deep-line); border-radius: 999px; background: rgb(255 255 255 / 0.06); color: var(--on-deep); font-size: 13.5px; text-decoration: none; cursor: pointer; transition: background 0.2s; } .pill-new:hover { background: rgb(255 255 255 / 0.12); } .pill-new b { padding: 3px 10px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font: 700 11px var(--f-mono); letter-spacing: 0.08em; }
.hero-vis { position: relative; margin-right: -70px; min-width: 0; padding-bottom: 6px; }
.band { padding-block: 26px; border-bottom: 1px solid var(--line); background: var(--bg); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; } .band small { color: var(--ink3); font: 500 12px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.band .lg { display: flex; flex-wrap: wrap; gap: 14px 38px; } .band .lg span { color: var(--ink3); font: 650 17px var(--f-display); letter-spacing: -0.02em; }

/* product window mock */
.mk { position: relative; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 50px 100px -30px rgb(0 0 0 / 0.65), 0 0 0 6px rgb(255 255 255 / 0.04); overflow: hidden; font-size: 12px; line-height: 1.4; user-select: none; }
.mk-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--s2); border-bottom: 1px solid var(--line); } .mk-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); } .mk-url { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 300px; margin-left: 12px; padding: 4px 12px; border-radius: 999px; background: var(--bg); color: var(--ink3); font: 500 11px var(--f-mono); } .mk-url .ic { color: var(--ok); }
.mk-body { display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: 380px; }
.mk-side { display: grid; gap: 6px; align-content: start; justify-items: center; padding: 14px 0; border-right: 1px solid var(--line); background: var(--bg); } .mk-side .lg { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 9px; background: var(--deep); color: var(--lime); font: 700 10px var(--f-mono); } .mk-side .it { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink3); } .mk-side .it.on { background: var(--brand-soft); color: var(--brand); } .mk-side .ic { width: 17px; height: 17px; }
.mk-main { display: grid; gap: 14px; align-content: start; padding: 18px 20px 20px; background: var(--page); min-width: 0; }
.mk-h { display: flex; align-items: center; justify-content: space-between; } .mk-h b { font: 650 16px var(--f-display); letter-spacing: -0.02em; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mk-kpi { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .mk-kpi small { color: var(--ink3); } .mk-kpi b { display: block; margin-top: 2px; font: 700 21px/1.1 var(--f-mono); letter-spacing: -0.05em; } .mk-kpi span { font-size: 11px; color: var(--ok-ink); font-weight: 600; }
.mk-chart { padding: 12px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .mk-chart svg { display: block; width: 100%; height: 96px; } .mk-chart .t { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--ink3); }
.mk-tbl { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; } .mk-tr { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 66px; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); } .mk-tr:last-child { border-bottom: 0; } .mk-tr b { font-weight: 600; } .mk-tr .mono { color: var(--ink3); } .mk-tr .am { text-align: right; font: 600 12px var(--f-mono); }
.st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; } .st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .st.a { background: var(--info-soft); color: var(--info-ink); } .st.b { background: var(--warn-soft); color: var(--warn-ink); } .st.c { background: var(--ok-soft); color: var(--ok-ink); } .st.d { background: var(--brand-soft); color: var(--brand); }
.fl { position: absolute; z-index: 2; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); box-shadow: var(--sh3); font-size: 12px; line-height: 1.35; animation: bob 7s ease-in-out infinite; }
.fl b { display: block; font-weight: 650; font-size: 12.5px; } .fl small { color: var(--ink3); } .fl .r { display: flex; align-items: center; gap: 10px; }
.fl .ib { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--ok-soft); color: var(--ok-ink); } .fl .ib .ic { width: 16px; height: 16px; }
.fl.a { left: -34px; bottom: 56px; animation-delay: -2s; } .fl.b { right: 188px; top: -22px; animation-delay: -4s; } .fl.c { right: 214px; bottom: -22px; animation-delay: -1s; }
.bar128 { height: 22px; width: 118px; margin-top: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); border-radius: 2px; }
@keyframes bob { 50% { translate: 0 -7px; } }
.cap { margin-top: 18px; color: var(--on-deep2); font: 500 11.5px var(--f-mono); letter-spacing: 0.04em; opacity: 0.8; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bt { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); overflow: hidden; transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s; } .bt:hover { border-color: var(--line2); box-shadow: var(--sh2); transform: translateY(-2px); }
.bt.s7 { grid-column: span 7; } .bt.s5 { grid-column: span 5; } .bt.s4 { grid-column: span 4; } .bt.s6 { grid-column: span 6; }
.bt.dk { background: linear-gradient(160deg, var(--deep2), var(--deep)); color: var(--on-deep); border-color: transparent; } .bt.dk p { color: var(--on-deep2); } .bt.dk .k { background: rgb(255 255 255 / 0.1); color: var(--lime); }
.bt .k { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 9px; margin-bottom: 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 12px var(--f-sans); } .bt .k .ic { width: 15px; height: 15px; }
.bt h3 { font-size: 26px; letter-spacing: -0.035em; } .bt p { margin-top: 10px; color: var(--ink2); font-size: 15px; max-width: 460px; }
.vis { position: relative; min-height: 150px; border-radius: 16px; background: var(--page); border: 1px solid var(--line); overflow: hidden; } .bt.dk .vis { background: rgb(255 255 255 / 0.06); border-color: var(--deep-line); }
.v-bld { display: grid; grid-template-columns: 120px minmax(0, 1fr); height: 100%; min-height: 200px; } .v-bld .l { display: grid; gap: 6px; align-content: start; padding: 12px; border-right: 1px solid var(--line); background: var(--bg); } .v-bld .l i { display: block; height: 22px; border-radius: 7px; background: var(--s2); } .v-bld .l i.on { background: var(--brand-soft); outline: 1.5px solid var(--brand); } .v-bld .c { display: grid; gap: 8px; align-content: start; padding: 12px; } .v-bld .c i { display: block; border-radius: 8px; background: var(--s3); } .v-bld .c i.h { height: 62px; background: linear-gradient(120deg, var(--deep), var(--deep2)); position: relative; } .v-bld .c i.h::after { content: ""; position: absolute; left: 12px; top: 14px; width: 90px; height: 8px; border-radius: 4px; background: var(--lime); box-shadow: 0 16px 0 -1px rgb(255 255 255 / 0.4), 0 30px 0 -1px rgb(255 255 255 / 0.25); } .v-bld .g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .v-bld .g i { height: 44px; }
.v-till { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; padding: 14px; min-height: 190px; } .v-till .ln { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line2); font-size: 12.5px; } .v-till .ln b { font: 600 12px var(--f-mono); } .v-till .tt { display: flex; justify-content: space-between; margin-top: 10px; font: 700 15px var(--f-mono); } .v-till .pay { display: grid; place-items: center; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 13px; text-align: center; }
.v-bins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 14px; } .v-bins i { display: grid; place-items: center; aspect-ratio: 1.25; border-radius: 7px; background: var(--s3); font: 500 9px var(--f-mono); color: var(--ink3); font-style: normal; } .v-bins i.f { background: var(--brand-soft); color: var(--brand); } .v-bins i.t { background: var(--lime); color: var(--on-lime); font-weight: 700; box-shadow: 0 0 0 3px rgb(182 238 74 / 0.3); }
.v-scan { display: grid; justify-items: center; gap: 12px; padding: 18px; } .v-scan .bc { display: grid; justify-items: center; gap: 6px; padding: 12px 16px; border-radius: 10px; background: #fff; color: #111; font: 600 10px var(--f-mono); } .v-scan .bc .bar128 { margin-top: 0; width: 130px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 13px); } .v-scan .ar { display: flex; align-items: center; gap: 8px; color: var(--lime); font: 600 12px var(--f-mono); }
.v-loy { display: grid; place-items: center; gap: 12px; padding: 18px; min-height: 160px; } .v-loy .rg { position: relative; display: grid; place-items: center; width: 100px; height: 100px; } .v-loy .rg svg { position: absolute; inset: 0; rotate: -90deg; } .v-loy .rg b { font: 700 22px var(--f-mono); letter-spacing: -0.05em; } .v-loy small { color: var(--ink3); }
.v-chat { display: grid; gap: 8px; padding: 16px; align-content: center; min-height: 170px; } .v-chat .m { max-width: 80%; padding: 9px 13px; border-radius: 15px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; } .v-chat .m.me { justify-self: end; border: 0; background: var(--brand); color: var(--on-brand); } .v-chat .m small { display: block; margin-top: 2px; font-size: 10.5px; opacity: 0.7; }
.v-mail { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; padding: 14px; min-height: 170px; } .v-mail .em { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); } .v-mail .em i { display: block; height: 7px; border-radius: 4px; background: var(--s3); } .v-mail .em i.h { height: 22px; background: var(--deep); } .v-mail .em i.b { width: 44%; height: 14px; background: var(--brand); border-radius: 7px; } .v-mail .tg { display: grid; gap: 7px; align-content: start; font-size: 11.5px; } .v-mail .tg div { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .sw { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--line2); flex: none; } .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; } .sw.on { background: var(--brand); } .sw.on::after { translate: 12px 0; }

/* ---------- domain widget ---------- */
.dom-g { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.ticks { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; } .ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink2); } .ticks li > .ic { margin-top: 3px; color: var(--brand); } .ticks b { color: var(--ink); font-weight: 600; }
.dw { border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: var(--sh3); overflow: hidden; }
.dw-t { display: flex; gap: 4px; padding: 8px; background: var(--s2); border-bottom: 1px solid var(--line); } .dw-t button { flex: 1; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--ink2); font-weight: 600; font-size: 14px; cursor: pointer; } .dw-t button.on { background: var(--bg); color: var(--ink); box-shadow: var(--sh1); }
.dw-b { display: grid; gap: 16px; padding: 22px; } .dw-b[hidden] { display: none; }
.dsearch { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 18px; border: 1.5px solid var(--line2); border-radius: 16px; background: var(--bg); transition: border-color 0.15s, box-shadow 0.15s; } .dsearch:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .dsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 600 17px var(--f-sans); letter-spacing: -0.01em; } .dsearch .ic { color: var(--ink3); }
.dres { display: grid; gap: 8px; } .dr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; } .dr .n { font: 600 15px var(--f-mono); letter-spacing: -0.03em; overflow-wrap: anywhere; } .dr .n s { color: var(--ink4); text-decoration: none; } .dr .p { color: var(--ink2); font: 500 13px var(--f-mono); white-space: nowrap; } .dr.taken { opacity: 0.55; } .dr.in { border-color: var(--brand); background: var(--brand-soft); }
.dns { width: 100%; border-collapse: collapse; font-size: 13px; } .dns th { text-align: left; padding: 8px 10px; color: var(--ink3); font: 600 11px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line); } .dns td { padding: 11px 10px; border-bottom: 1px solid var(--line); font: 500 13px var(--f-mono); overflow-wrap: anywhere; } .dns tr:last-child td { border-bottom: 0; }
.cp { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line2); border-radius: 9px; background: var(--bg); color: var(--ink2); cursor: pointer; } .cp:hover { border-color: var(--brand); color: var(--brand); }
.chk { display: grid; gap: 8px; } .chk .r { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink3); font-size: 14px; } .chk .r .d { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--line2); } .chk .r.go .d { border-color: var(--brand); border-top-color: transparent; animation: spin 0.7s linear infinite; } .chk .r.ok { color: var(--ink); border-color: var(--ok); background: var(--ok-soft); } .chk .r.ok .d { border: 0; background: var(--ok); color: #fff; } .chk .r .d .ic { width: 13px; height: 13px; display: none; stroke-width: 2.6; } .chk .r.ok .d .ic { display: block; } @keyframes spin { to { rotate: 360deg; } }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 1px solid var(--line2); }
.step { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px 0 0; } .step + .step { padding-left: 24px; border-left: 1px solid var(--line); } .step .n { font: 600 12px var(--f-mono); letter-spacing: 0.14em; color: var(--brand); } .step h4 { font-size: 22px; } .step p { color: var(--ink2); font-size: 15px; }

/* ---------- trust band ---------- */
.dark-sec { background: radial-gradient(800px 400px at 0% 0%, rgb(46 154 114 / 0.28), transparent 60%), var(--deep); color: var(--on-deep); } .dark-sec .sh p { color: var(--on-deep2); } .dark-sec .eyebrow { color: var(--lime); }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--deep-line); border-radius: 22px; background: var(--deep-line); overflow: hidden; } .trust > div { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--deep); } .trust .ti { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgb(255 255 255 / 0.08); color: var(--lime); } .trust h4 { font-size: 20px; } .trust p { color: var(--on-deep2); font-size: 14.5px; }

/* ---------- pricing ---------- */
.ph { padding: 80px 0 40px; background: var(--page); border-bottom: 1px solid var(--line); } .ph h1 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -0.045em; max-width: 780px; } .ph .lead { margin-top: 18px; max-width: 600px; }
.toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--s3); } .toggle button { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--ink2); font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .toggle button.on { background: var(--bg); color: var(--ink); box-shadow: var(--sh1); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 22px; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--bg); } .plan.hot { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--sh3); background: linear-gradient(180deg, var(--brand-soft), var(--bg) 38%); }
.plan h3 { font-size: 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .plan .d { color: var(--ink2); font-size: 15px; margin-top: 6px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .price b { font: 650 56px/1 var(--f-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .price small { color: var(--ink3); font-size: 14px; } .bill { color: var(--ink3); font-size: 13px; min-height: 20px; margin-top: 6px; }
.flist { display: grid; gap: 11px; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; align-content: start; } .flist li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink2); } .flist li .ic { margin-top: 3px; width: 16px; height: 16px; color: var(--brand); } .flist li.no { color: var(--ink4); } .flist li.no .ic { color: var(--ink4); }
.incl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); } .incl > div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; } .incl b { display: block; font-weight: 600; } .incl small { color: var(--ink3); font-size: 12.5px; } .incl .ic { color: var(--brand); margin-top: 2px; }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); } .tb { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; } .tb th, .tb td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); } .tb thead th { background: var(--page); font: 650 15px var(--f-display); letter-spacing: -0.01em; position: sticky; top: 0; } .tb td:not(:first-child), .tb th:not(:first-child) { text-align: center; } .tb td:first-child { color: var(--ink2); } .tb tr:last-child td { border-bottom: 0; } .tb .grp td { background: var(--s2); color: var(--ink3); font: 600 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: left !important; padding-block: 10px; } .tb .ic { color: var(--brand); width: 18px; height: 18px; } .tb .x { color: var(--ink4); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.ac { position: relative; display: grid; gap: 14px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s; } .ac:hover { border-color: var(--line2); box-shadow: var(--sh2); transform: translateY(-2px); } .ac.flash { animation: flash 1.6s ease; } @keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--brand); border-color: var(--brand); } }
.ac .top { display: flex; align-items: center; gap: 14px; } .ac .ti { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--brand-soft); color: var(--brand); } .ac h4 { font-size: 20px; letter-spacing: -0.03em; } .ac p { color: var(--ink2); font-size: 14.5px; } .ac .ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink3); } .ac .ft b { color: var(--ink); font: 650 18px var(--f-display); letter-spacing: -0.02em; } .ac .ft small { display: block; color: var(--ink3); font-size: 12px; }
.fltr { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .fltr button { height: 38px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg); color: var(--ink2); font-weight: 550; font-size: 14px; cursor: pointer; } .fltr button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .dc { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); } .dc b { font: 650 28px var(--f-display); letter-spacing: -0.04em; } .dc small { color: var(--ink3); }
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 4px; font: 600 18px var(--f-display); letter-spacing: -0.02em; list-style: none; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--s2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7770' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: rotate 0.2s; } .faq details[open] summary::after { rotate: 45deg; } .faq details p { padding: 0 40px 24px 4px; color: var(--ink2); max-width: 680px; }
.cta { position: relative; overflow: hidden; border-radius: 32px; padding: 72px 40px; text-align: center; background: radial-gradient(600px 300px at 80% 0%, rgb(182 238 74 / 0.25), transparent 65%), var(--deep); color: var(--on-deep); display: grid; gap: 20px; justify-items: center; } .cta h2 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.045em; max-width: 720px; } .cta p { color: var(--on-deep2); max-width: 520px; font-size: 18px; } .cta .row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* ---------- about ---------- */
.ab-h { padding: 90px 0 70px; background: var(--page); } .ab-h h1 { font-size: clamp(42px, 6.4vw, 84px); letter-spacing: -0.05em; max-width: 960px; line-height: 0.98; } .ab-h h1 em { font-style: normal; color: var(--brand); }
.story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } .story .prose { display: grid; gap: 18px; color: var(--ink2); font-size: 18px; line-height: 1.65; } .story .prose p:first-child { font: 600 24px/1.35 var(--f-display); letter-spacing: -0.025em; color: var(--ink); }
.pr-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pri { display: grid; gap: 12px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); } .pri .ti { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); } .pri h4 { font-size: 21px; letter-spacing: -0.03em; } .pri p { color: var(--ink2); font-size: 15px; }
.tech { display: flex; flex-wrap: wrap; gap: 10px; } .tech span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--deep-line); border-radius: 999px; background: rgb(255 255 255 / 0.05); color: var(--on-deep); font: 500 13.5px var(--f-mono); }
.tl { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 760px; } .tl li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); } .tl .y { font: 600 13px var(--f-mono); color: var(--brand); letter-spacing: 0.06em; padding-top: 3px; } .tl b { display: block; font: 650 19px var(--f-display); letter-spacing: -0.02em; margin-bottom: 4px; } .tl p { color: var(--ink2); }
.cg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cc { display: grid; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); } .cc small { color: var(--ink3); font: 600 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; } .cc b { font: 650 20px var(--f-display); letter-spacing: -0.02em; } .cc p { color: var(--ink2); font-size: 14.5px; } .cc .em { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 9px 12px; border-radius: 10px; background: var(--s2); font: 500 13px var(--f-mono); overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.foot { background: var(--page); border-top: 1px solid var(--line); padding: 72px 0 36px; } .foot-g { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; } .foot p { color: var(--ink3); font-size: 14px; max-width: 280px; margin-top: 14px; } .foot h6 { font: 600 11px var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink3); margin-bottom: 14px; } .foot ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .foot li a, .foot li button { display: inline; padding: 0; border: 0; background: none; color: var(--ink2); font-size: 14.5px; text-decoration: none; cursor: pointer; text-align: left; } .foot li a:hover, .foot li button:hover { color: var(--brand); }
.foot-b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink3); font-size: 13px; } .foot-b .r { display: flex; align-items: center; gap: 12px; } .tbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg); color: var(--ink2); font-size: 13px; cursor: pointer; }

/* ---------- trial modal ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgb(8 18 13 / 0.6); backdrop-filter: blur(4px); animation: fade 0.2s; } @keyframes fade { from { opacity: 0; } }
.modal { position: fixed; z-index: 91; left: 50%; top: 50%; translate: -50% -50%; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border: 1px solid var(--line); border-radius: 26px; background: var(--bg); box-shadow: var(--sh3); animation: pop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes pop { from { opacity: 0; scale: 0.96; } }
.md-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; } .md-h .stp { font: 600 12px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); } .md-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--s2); cursor: pointer; }
.prog { display: flex; gap: 6px; padding: 14px 24px 0; } .prog i { flex: 1; height: 4px; border-radius: 4px; background: var(--s3); } .prog i.on { background: var(--brand); }
.md-b { display: grid; gap: 16px; padding: 22px 24px 8px; } .md-b h3 { font-size: 30px; letter-spacing: -0.04em; } .md-b .lead { font-size: 15.5px; }
.md-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 24px 24px; }
.fld { display: grid; gap: 7px; } .fld label { font-size: 13px; font-weight: 600; color: var(--ink2); } .inp { height: 50px; padding: 0 16px; border: 1.5px solid var(--line2); border-radius: 14px; background: var(--bg); outline: none; font-size: 16px; width: 100%; } .inp:focus { border-color: var(--brand); box-shadow: var(--ring); } .inp.bad { border-color: var(--bad); } .err { color: var(--bad-ink); font-size: 13px; min-height: 18px; }
.sub-url { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--s2); font: 500 13.5px var(--f-mono); overflow-wrap: anywhere; } .sub-url b { color: var(--brand); font-weight: 600; }
.pk { display: grid; gap: 10px; } .pk button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .pk button:hover { border-color: var(--line2); } .pk button.on { border-color: var(--brand); background: var(--brand-soft); } .pk .rd { width: 20px; height: 20px; border: 2px solid var(--line2); border-radius: 50%; display: grid; place-items: center; } .pk button.on .rd { border-color: var(--brand); } .pk button.on .rd::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); } .pk b { display: block; font-weight: 650; } .pk small { color: var(--ink3); } .pk .pp { font: 650 17px var(--f-display); letter-spacing: -0.02em; text-align: right; }
.done { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 10px 0; } .done .ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); } .done .ok .ic { width: 30px; height: 30px; stroke-width: 2.2; }
.sum { display: grid; gap: 0; width: 100%; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; } .sum div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; } .sum div:last-child { border-bottom: 0; } .sum span { color: var(--ink3); } .sum b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 95; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); translate: -50% 120px; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 14px; box-shadow: var(--sh3); opacity: 0; transition: all 0.3s ease; } .toast.show { translate: -50% 0; opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hero-g { grid-template-columns: minmax(0, 1fr); gap: 56px; } .hero-vis { margin-right: 0; max-width: 760px; } .fl.a { left: -10px; } .fl.b { right: 20px; } .fl.c { right: 30px; }
  .mp-in, .mp-in.two { grid-template-columns: 1fr 1fr; } .mfeat { display: none; }
}
@media (max-width: 960px) {
  .nl, .nav-r .login, .nav-r .btn.line, .nav-r .btn.sm.hide-m { display: none; } .burger { display: grid; } .nav-sp { flex: 1; } .mp { display: none; }
  .sec { padding-block: 72px; } .bento .bt.s7, .bento .bt.s5, .bento .bt.s4, .bento .bt.s6 { grid-column: span 12; }
  .dom-g, .story { grid-template-columns: minmax(0, 1fr); gap: 40px; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .step:nth-child(3) { padding-left: 0; border-left: 0; } .trust { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-g, .cg { grid-template-columns: minmax(0, 1fr); } .foot-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sec { padding-block: 56px; } .sh { margin-bottom: 36px; } .hero { padding-top: 120px; } .hero-g { padding-bottom: 56px; } .hero-vis { margin-inline: -4px; } .mk-body { grid-template-columns: 44px minmax(0, 1fr); } .mk-main { padding: 12px; } .mk-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .mk-kpi { padding: 8px 9px; } .mk-kpi b { font-size: 15px; } .mk-tr { grid-template-columns: 54px minmax(0, 1fr) auto; } .mk-tr .am { display: none; } .mk-side .ic { width: 15px; height: 15px; }
  .fl.a, .fl.b, .fl.c { display: none; } .steps { grid-template-columns: minmax(0, 1fr); } .step, .step + .step { padding: 22px 0 22px; border-left: 0; border-bottom: 1px solid var(--line); } .incl { grid-template-columns: minmax(0, 1fr); } .foot-g { grid-template-columns: minmax(0, 1fr); } .cta { padding: 52px 22px; border-radius: 26px; }
  .tl li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .dr { grid-template-columns: minmax(0, 1fr) auto; } .dr .p { grid-column: 1; } .dr .btn { grid-row: 1 / span 2; grid-column: 2; } .v-bld { grid-template-columns: 90px minmax(0, 1fr); } .v-mail { grid-template-columns: minmax(0, 1fr); } .bt { padding: 20px; border-radius: 20px; } .price b { font-size: 48px; } .band .wrap { gap: 10px; }
  .dw-b { padding: 16px; } .md-b h3 { font-size: 26px; } .nav { padding-left: 12px; } .nav-r .btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- product switch ---------- */
body:not([data-site="wp"]) .wp-only, body[data-site="wp"] .lv-only { display: none !important; }
.ps { position: relative; z-index: 55; background: var(--deep); color: var(--on-deep); padding-top: env(safe-area-inset-top, 0px); }
.ps-in { display: flex; align-items: center; gap: 4px; max-width: 1200px; height: 46px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.ps-in > button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: none; color: var(--on-deep2); font: 600 13.5px var(--f-sans); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.ps-in > button:hover { color: #fff; }
.ps-in > button[aria-pressed="true"] { background: rgb(255 255 255 / 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.ps-in > button i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-deep2); opacity: 0.6; } .ps-in > button[aria-pressed="true"] i { background: var(--lime); opacity: 1; }
.ps-in > .ps-r { margin-left: auto; padding: 0 6px; font-weight: 500; color: var(--on-deep2); } .ps-in > .ps-r .ic { color: var(--lime); }
.logo em { margin-left: 2px; padding: 3px 8px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font: 600 11px var(--f-mono); font-style: normal; letter-spacing: 0.01em; white-space: nowrap; }
.ms-grp { display: contents; }
.ms-ps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0 10px; border-radius: 14px; background: var(--s3); }
.ms-ps button { height: 44px; border: 0; border-radius: 11px; background: none; color: var(--ink2); font: 600 14.5px var(--f-sans); cursor: pointer; } .ms-ps button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--sh1, 0 1px 3px rgb(0 0 0 / 0.12)); }
/* ---------- connector ---------- */
.cxv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 22px; border: 1px solid var(--deep-line); border-radius: 24px; background: rgb(255 255 255 / 0.06); backdrop-filter: blur(10px); }
.cxn { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: var(--sh2); } .cxn.dk { background: var(--deep2); color: var(--on-deep); box-shadow: inset 0 0 0 1px var(--deep-line); }
.cxn .ti { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); } .cxn.dk .ti { background: rgb(255 255 255 / 0.1); color: var(--lime); }
.cxn b { margin-top: 6px; font: 650 19px var(--f-display); letter-spacing: -0.02em; } .cxn small { color: var(--ink3); font-size: 12.5px; } .cxn.dk small { color: var(--on-deep2); }
.cxn ul { display: grid; gap: 6px; margin-top: 8px; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink2); } .cxn.dk ul { color: var(--on-deep2); } .cxn li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--lime); }
.cxm { display: grid; justify-items: stretch; gap: 8px; text-align: center; color: var(--on-deep2); font: 500 11.5px var(--f-mono); } .cxm span { padding: 7px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #fff; } .cxm i { font-style: normal; color: var(--lime); font-size: 15px; line-height: 1; }
.dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dir { display: grid; gap: 16px; align-content: start; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: var(--sh1, none); } .dir h3 { font: 650 28px/1.12 var(--f-display); letter-spacing: -0.03em; } .dir > p { color: var(--ink2); }
.dir .mv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .dir .mv span { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--s2); color: var(--ink3); font-size: 13px; } .dir .mv b { color: var(--ink); font-size: 13px; }
@media (max-width: 900px) { .dirs { grid-template-columns: 1fr; } .dir { padding: 24px; } .dir h3 { font-size: 24px; } }
@media (max-width: 640px) { .cxv { grid-template-columns: 1fr; padding: 14px; }  .ps-in > .ps-r { display: none; } .ps-in > button { padding: 0 12px; font-size: 13px; } .logo em { display: none; } }
.dir { display: flex; flex-direction: column; } .dir .chip { align-self: flex-start; } .dir h3 { min-height: 2.25em; } .dir .mv { margin-top: auto; }
@media (max-width: 900px) { .dir h3 { min-height: 0; } }
@media (max-width: 640px) { .cxm { grid-template-columns: 1fr 1fr; } }

/* ---------- legal ---------- */
.legal-meta { margin-top: 14px; color: var(--ink3); font: 500 13px var(--f-mono); }
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
.legal-toc summary { list-style: none; margin-bottom: 10px; color: var(--ink3); font: 600 11.5px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: default; } .legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc nav { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.legal-toc nav button { padding: 7px 12px; margin-left: -1px; border: 0; border-left: 2px solid transparent; background: none; color: var(--ink2); font: 500 13.5px/1.35 var(--f-sans); text-align: left; cursor: pointer; } .legal-toc nav button:hover { color: var(--brand); border-left-color: var(--brand); }
.legal-doc { max-width: 760px; color: var(--ink2); font-size: 15.5px; line-height: 1.7; }
.legal-doc h2 { margin: 44px 0 14px; scroll-margin-top: 96px; color: var(--ink); font: 650 24px/1.2 var(--f-display); letter-spacing: -0.02em; } .legal-doc .part { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 96px; } .legal-doc .part h2 { margin-top: 10px; font-size: 30px; }
.legal-doc p { margin: 0 0 12px; } .legal-doc b { color: var(--ink); font-weight: 650; }
.legal-doc .cn { display: inline-block; min-width: 38px; margin-right: 8px; color: var(--brand); font: 600 13px var(--f-mono); }
.legal-doc ul, .legal-doc ol { margin: 4px 0 14px; padding-left: 52px; display: grid; gap: 6px; } .legal-doc li::marker { color: var(--brand); }
.legal-doc mark.ph { padding: 1px 6px; border-radius: 6px; background: rgb(255 214 10 / 0.28); color: inherit; font: 500 0.92em var(--f-mono); }
.legal-sum { display: grid; gap: 10px; margin-bottom: 8px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--s2); } .legal-sum > b { font: 650 18px var(--f-display); } .legal-sum ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; } .legal-sum .sub { color: var(--ink3); font-size: 13px; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 24px; } .legal-toc { position: static; max-height: none; } .legal-toc details:not([open]) nav { display: none; } .legal-toc summary { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .legal-doc ul, .legal-doc ol { padding-left: 26px; } .legal-doc h2 { font-size: 21px; } }
.legal-doc .tb td { text-align: left; vertical-align: top; }

/* ---------- plugin gallery and product pages ---------- */
.pti { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: color-mix(in srgb, hsl(var(--h, 158) 60% 50%) 15%, var(--bg)); color: color-mix(in srgb, hsl(var(--h, 158) 65% 42%) 78%, var(--ink)); }
.pti .ic { width: 22px; height: 22px; } .pti.sm { width: 30px; height: 30px; border-radius: 9px; } .pti.sm .ic { width: 15px; height: 15px; } .pti.lg { width: 72px; height: 72px; border-radius: 20px; } .pti.lg .ic { width: 32px; height: 32px; }
.dec-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.ac-l { cursor: pointer; } .ac-l h4 a { color: inherit; text-decoration: none; } .ac-l:hover h4 a { color: var(--brand); }
.gbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.gsearch { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 360px; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink3); } .gsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .gsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 15px var(--f-sans); }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink2); font: 600 14px var(--f-sans); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .gchip i { font: 500 11.5px var(--f-mono); font-style: normal; color: var(--ink3); } .gchip:hover { border-color: var(--ink3); } .gchip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .gchip.on i { color: var(--brand); }
.gbar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--ink2); font-size: 14px; }
.gchk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .gchk input { width: 16px; height: 16px; accent-color: var(--brand); }
.gcount { margin-left: auto; color: var(--ink3); font: 500 13px var(--f-mono); } .gsort { display: inline-flex; align-items: center; gap: 8px; } .gsort select { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 500 14px var(--f-sans); }
.gcall-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; padding: 18px 22px; border: 1px solid color-mix(in srgb, hsl(18 70% 50%) 35%, var(--line)); border-radius: 18px; background: color-mix(in srgb, hsl(18 80% 55%) 9%, var(--bg)); --h: 18; } .gcall-in > div { flex: 1 1 280px; display: grid; gap: 2px; } .gcall-in small { color: var(--ink2); font-size: 13.5px; } .gcall-in .ti { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, hsl(18 70% 50%) 18%, var(--bg)); color: color-mix(in srgb, hsl(18 70% 42%) 80%, var(--ink)); }
.pgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.pcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: inherit; text-decoration: none; transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s; } .pcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, hsl(var(--h) 60% 45%) 50%, var(--line)); box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.35); } .pcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pc-art { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px; background: linear-gradient(150deg, color-mix(in srgb, hsl(var(--h) 60% 50%) 16%, var(--bg)), color-mix(in srgb, hsl(var(--h) 60% 50%) 5%, var(--bg))); } .pc-art .pti { background: var(--bg); box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.3); }
.pc-b { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; } .pc-b h3 { font: 650 21px/1.2 var(--f-display); letter-spacing: -0.02em; } .pc-b .t { color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.pc-pr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; padding-top: 6px; } .pc-pr span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--s2); } .pc-pr small { color: var(--ink3); font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; } .pc-pr b { font: 650 16px var(--f-display); }
.pc-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink3); font-size: 12.5px; } .pc-f .go { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 650; font-size: 13.5px; white-space: nowrap; } .pcard:hover .go .ic { transform: translateX(3px); } .pc-f .go .ic { transition: transform 0.2s; }
.gempty { display: grid; justify-items: center; gap: 6px; grid-column: 1 / -1; padding: 60px 0; color: var(--ink3); text-align: center; } .gempty b { color: var(--ink); font-size: 18px; }
/* detail */
.pd-head { padding: 44px 0 34px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, hsl(var(--h) 60% 50%) 8%, var(--page)), var(--page)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; color: var(--ink3); font-size: 13.5px; } .crumbs a, .crumbs button { padding: 0; border: 0; background: none; color: var(--ink2); font: inherit; text-decoration: none; cursor: pointer; } .crumbs a:hover, .crumbs button:hover { color: var(--brand); } .crumbs span { color: var(--ink); font-weight: 600; }
.pd-title { display: flex; align-items: center; gap: 22px; } .pd-title h1 { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -0.04em; } .pd-title p { margin-top: 8px; color: var(--ink2); font-size: clamp(16px, 1.6vw, 19px); } .pd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; align-items: start; }
.pd-vis { display: grid; gap: 14px; position: sticky; top: 96px; }
.pd-art { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 26px; background: radial-gradient(circle at 70% 20%, hsl(var(--h) 60% 34% / 0.8), transparent 60%), linear-gradient(150deg, hsl(var(--h) 50% 13%), hsl(var(--h) 44% 24%)); color: #fff; } .pd-art .big { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 34px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); } .pd-art .big .ic { width: 56px; height: 56px; color: hsl(var(--h) 90% 78%); }
.fchip { position: absolute; display: inline-flex; align-items: center; gap: 7px; max-width: 78%; padding: 9px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.94); color: #0e1a14; font: 600 12.5px var(--f-sans); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5); } .fchip .ic { color: #1e6b4e; flex: none; } .fchip.c0 { left: 6%; top: 10%; } .fchip.c1 { right: 6%; top: 52%; } .fchip.c2 { left: 8%; bottom: 9%; }
.pd-note { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; background: var(--s2); color: var(--ink2); font-size: 13.5px; } .pd-note b { color: var(--ink); }
.pd-main h2 { margin: 0 0 12px; font: 650 22px/1.2 var(--f-display); letter-spacing: -0.02em; } .pd-main h2:not(:first-child) { margin-top: 32px; } .pd-lead { color: var(--ink2); font-size: 16.5px; line-height: 1.7; } .pd-ben { margin: 0 0 22px; gap: 12px; }
.pd-buy { position: sticky; top: 96px; display: grid; gap: 14px; padding: 26px; border: 2px solid color-mix(in srgb, var(--brand) 70%, var(--lime)); border-radius: 26px; background: var(--bg); box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.35); }
.pb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--s3); } .pb-seg button { height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink2); font: 600 14px var(--f-sans); cursor: pointer; } .pb-seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / 0.14); }
.pb-price { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; } .pb-price b { font: 700 46px/1 var(--f-display); letter-spacing: -0.04em; } .pb-price span { color: var(--ink3); font-size: 14px; } .pb-sub { margin: -6px 0 0; color: var(--ink3); font-size: 13.5px; }
.pb-incl small { display: block; margin-bottom: 8px; color: var(--ink3); font: 600 11.5px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; } .pb-incl .ticks { margin: 0; gap: 9px; font-size: 14px; }
.pb-need { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft, #fdf3d8); color: var(--warn-ink, #7a5a00); font-size: 13.5px; } .pb-need .ic { flex: none; margin-top: 2px; }
.pb-plan { display: grid; gap: 8px; color: var(--ink2); font-size: 14px; } .pb-plan span { display: flex; align-items: center; gap: 10px; } .pb-plan .ic { color: var(--brand); flex: none; }
.pd-buy .btn.block { justify-content: center; gap: 10px; } .pb-btnp { font-weight: 500; opacity: 0.75; }
.pb-or { display: flex; align-items: center; gap: 12px; color: var(--ink3); font-size: 13px; } .pb-or::before, .pb-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pb-bundle { display: grid; gap: 8px; justify-items: start; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 9%, var(--bg)); } .pb-bundle b { font: 650 16px var(--f-display); } .pb-bundle p { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.55; }
.pb-g { display: flex; gap: 12px; align-items: flex-start; padding-top: 6px; } .pb-g > .ic { color: var(--brand); flex: none; width: 26px; height: 26px; } .pb-g b { font-size: 14px; } .pb-g p { margin: 3px 0 0; color: var(--ink2); font-size: 13px; line-height: 1.5; } .pb-g a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.pb-links { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 14px; } .pb-links button { padding: 6px; border: 0; background: none; color: var(--ink2); font: 500 13.5px var(--f-sans); cursor: pointer; } .pb-links button:first-child { border-right: 1px solid var(--line); } .pb-links button:hover { color: var(--brand); }
.pd-tabs { position: sticky; top: 76px; z-index: 30; border-block: 1px solid var(--line); background: var(--page); } .ptabs { display: flex; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; } .ptabs::-webkit-scrollbar { display: none; }
.ptabs button { flex: none; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink2); font: 600 14.5px var(--f-sans); cursor: pointer; white-space: nowrap; } .ptabs button:hover { color: var(--ink); } .ptabs button.on { background: var(--bg); color: var(--brand); box-shadow: 0 1px 4px rgb(0 0 0 / 0.14); }
.pd-tabbody { min-height: 360px; }
.ed3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .edc3 { display: grid; gap: 12px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); } .edc3.cur { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .edc3 .eh { display: flex; align-items: baseline; justify-content: space-between; } .edc3 .eh b { font: 650 20px var(--f-display); } .edc3 .eh span { font: 650 18px var(--f-display); } .edc3 .eh small { color: var(--ink3); font: 500 12px var(--f-sans); } .edc3 .pl { color: var(--ink3); font-weight: 600; font-size: 12.5px; } .edc3 .ticks { margin: 0; gap: 10px; font-size: 14px; }
.gs { margin-top: 44px; } .gs h3 { margin-bottom: 14px; font: 650 22px var(--f-display); letter-spacing: -0.02em; }
.tb th.cur { color: var(--brand); } .tb .yes { color: var(--brand); } .tb .no { color: var(--ink4, var(--ink3)); } .tb tr.sep td { background: var(--s2); } .tb td:not(:first-child), .tb th:not(:first-child) { text-align: center; }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .ig { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); } .ig .ti { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--brand-soft); color: var(--brand); } .ig b { display: block; font-size: 15px; } .ig small { color: var(--ink3); font-size: 13px; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .shot { margin: 0; display: grid; gap: 10px; } .shot figcaption { color: var(--ink3); font-size: 13px; } .pnote { margin-top: 16px; color: var(--ink3); font-size: 13px; }
.mkw { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: 0 16px 36px -24px rgb(0 0 0 / 0.4); } .mkw-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--s2); border-bottom: 1px solid var(--line); } .mkw-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2, #ccc); } .mkw-bar span { margin-left: 8px; color: var(--ink3); font: 500 11px var(--f-mono); }
.mkw-b { display: grid; gap: 8px; padding: 16px; } .mkw-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .mkw-h b { font-size: 14.5px; } .mkw-h em { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 11px var(--f-mono); font-style: normal; }
.mkw-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: var(--ink); } .mkw-r.off { color: var(--ink3); background: var(--s2); } .mkw-r em { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--s3); color: var(--ink2); font: 600 10.5px var(--f-mono); font-style: normal; }
.sw.on { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: var(--brand); } .sw.on::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.mkw-t { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mkw-t > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--s2); } .mkw-t small { color: var(--ink3); font-size: 11px; } .mkw-t b { font-size: 13px; } .mkw-t b.g { color: var(--brand); } .mkw-t b.m { font: 500 12px var(--f-mono); } .mkw-btn { justify-self: start; padding: 8px 14px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; }
.mkw-pl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .mkw-pl b { display: block; font-size: 13px; } .mkw-pl small { color: var(--ink3); font-size: 11.5px; } .mkw-pl span { color: var(--brand); font-size: 12px; } .mkw-up { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--warn-soft, #fdf3d8); color: var(--warn-ink, #7a5a00); font-size: 12px; } .mkw-up u { cursor: pointer; font-weight: 600; }
@media (max-width: 1100px) { .pd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pd-vis { position: static; grid-row: 1; } .pd-buy { grid-column: 1 / -1; position: static; order: 3; } .pd-art { aspect-ratio: 4 / 3; } .shots { grid-template-columns: 1fr; } .ed3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .pd-grid { grid-template-columns: 1fr; gap: 26px; } .pd-vis { order: 1; } .pd-buy { order: 2; padding: 20px; } .pd-main { order: 3; } .pd-title { gap: 14px; align-items: flex-start; } .pti.lg { width: 52px; height: 52px; border-radius: 15px; } .pti.lg .ic { width: 24px; height: 24px; } .pd-tabs { top: 70px; } .gcount { margin-left: 0; width: 100%; } .pb-price b { font-size: 40px; } }

/* ---------- audience ---------- */
.dfor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; } .dfor b { margin-right: 4px; color: var(--on-deep2); font: 600 12px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.dchip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--deep-line); border-radius: 999px; background: rgb(255 255 255 / 0.06); color: var(--on-deep); font: 600 13.5px var(--f-sans); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .dchip:hover { background: rgb(255 255 255 / 0.14); border-color: var(--lime); }
.gaud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.gab { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .gab:hover { border-color: var(--ink3); } .gab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gab .ti { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--s2); color: var(--ink2); } .gab > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; } .gab b { font: 650 16.5px var(--f-display); letter-spacing: -0.01em; } .gab small { color: var(--ink3); font-size: 13px; line-height: 1.4; } .gab i { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--s3); color: var(--ink2); font: 600 12px var(--f-mono); font-style: normal; }
.gab.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); } .gab.on .ti { background: var(--brand); color: var(--on-brand, #fff); } .gab.on i { background: var(--brand); color: var(--on-brand, #fff); }
@media (max-width: 900px) { .gaud { grid-template-columns: 1fr; gap: 10px; } .gab { padding: 14px 16px; } }

.logo i .wm { width: 20px; height: 20px; fill: currentColor; }

/* ---------- themes and library ---------- */
.ln { display: block; height: 0.9em; border-radius: 0.5em; background: var(--s3); } .ln.h { height: 1.5em; background: color-mix(in srgb, var(--ink) 72%, var(--bg)); }
.s-frame { font-size: 5.2px; margin: 0; } .s-frame.big { font-size: 9.6px; }
.s-site { display: grid; gap: 1.6em; padding: 1.8em; background: var(--bg); font-family: var(--lf, inherit); }
.s-nav { display: flex; align-items: center; gap: 2em; } .s-logo { width: 4em; height: 2em; border-radius: 0.6em; background: hsl(var(--h, 158) 55% 36%); flex: none; } .s-links { display: flex; flex: 1; gap: 1.4em; } .s-links .ln { width: 4em; } .s-btn { display: block; width: 7em; height: 2.4em; border-radius: 1.2em; background: hsl(var(--h, 158) 60% 38%); flex: none; }
.s-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2em; align-items: center; padding: 1.4em 0; } .s-t { display: grid; gap: 1em; justify-items: start; align-content: center; } .s-t .ln { max-width: 100%; }
.s-img { display: block; align-self: stretch; min-height: 13em; border-radius: 1.2em; background: linear-gradient(140deg, color-mix(in srgb, hsl(var(--h, 158) 60% 52%) 38%, var(--bg)), color-mix(in srgb, hsl(var(--h, 158) 60% 52%) 12%, var(--bg))); }
.s-hero.ed { position: relative; display: block; padding: 0; } .s-hero.ed .s-img { min-height: 16em; } .s-hero.ed .s-t { position: absolute; inset: 0; justify-items: center; justify-content: center; text-align: center; }
.s-strip { display: flex; gap: 1em; margin-bottom: -0.4em; } .s-strip span { height: 1.2em; flex: 1; border-radius: 0.6em; background: color-mix(in srgb, hsl(var(--h) 60% 50%) 20%, var(--bg)); }
.s-card { display: grid; gap: 0.9em; padding: 1.4em; border: 1px solid var(--line); border-radius: 1.2em; background: var(--bg); box-shadow: 0 1em 2em -1.2em rgb(0 0 0 / 0.4); } .s-drop { display: block; height: 5em; border: 0.25em dashed color-mix(in srgb, hsl(var(--h) 60% 45%) 55%, var(--line)); border-radius: 0.9em; }
.s-sw { display: flex; flex-wrap: wrap; gap: 0.6em; } .s-sw i, .w-sw i { display: block; width: 2em; height: 2em; border-radius: 50%; background: hsl(calc(var(--n) * 43) 62% 50%); }
.s-chips { display: flex; gap: 0.7em; } .s-chips i { display: block; width: 4.6em; height: 2em; border-radius: 1em; background: color-mix(in srgb, hsl(var(--h) 60% 50%) 25%, var(--bg)); }
.s-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; } .s-p { display: grid; gap: 0.7em; } .s-pi { display: block; aspect-ratio: 1 / 1; border-radius: 1em; background: color-mix(in srgb, hsl(calc(var(--h) + var(--n) * 14) 55% 52%) 24%, var(--bg)); }
.th-art { padding: 18px 18px 0; background: linear-gradient(150deg, color-mix(in srgb, hsl(var(--h) 60% 50%) 16%, var(--bg)), color-mix(in srgb, hsl(var(--h) 60% 50%) 5%, var(--bg))); height: 232px; overflow: hidden; } .th-art .mkw { border-bottom: 0; border-radius: 14px 14px 0 0; }
.th-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pc-pr.th2 { grid-template-columns: repeat(2, 1fr); }
.pgal.thgal { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.td-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.85fr); gap: 36px; align-items: start; } .td-vis { display: grid; gap: 14px; position: sticky; top: 96px; }
.pb-seg.two { grid-template-columns: repeat(2, 1fr); } .ed3.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpages { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .tpg { display: grid; gap: 10px; } .tpg.off { opacity: 0.55; } .tpg-in { font-size: 3.4px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .tpg-n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; } .tpg-n em { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--s3); color: var(--ink2); font: 600 11px var(--f-mono); font-style: normal; } .tpg-n em.f { background: var(--brand-soft); color: var(--brand); }
/* wireframes */
.pv { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; font-size: 7.2px; font-family: var(--lf, inherit); background: var(--bg); } .pv.one .wf { flex: 1; } .pv.stack { display: block; } .wfs { display: flex; flex-direction: column; }
.wf { display: grid; gap: 1.6em; align-items: center; padding: 2em 2.2em; } .wf .w-t { display: grid; gap: 1em; justify-items: start; align-content: center; } .wf .bx { display: block; align-self: stretch; min-height: 7em; border-radius: 1em; background: color-mix(in srgb, hsl(var(--lh, 158) 60% 52%) 24%, var(--bg)); }
.w-btn { display: block; width: 7.5em; height: 2.4em; border-radius: 1.2em; background: hsl(var(--lh, 158) 60% 38%); } .w-btn.o { background: none; box-shadow: inset 0 0 0 0.25em hsl(var(--lh, 158) 60% 38%); } .w-row { display: flex; gap: 1em; }
.t-hero { grid-template-columns: 1.1fr 1fr; } .t-hero.v1 { grid-template-columns: 1fr; text-align: center; } .t-hero.v1 .bx { display: none; } .t-hero.v1 .w-t { justify-items: center; } .t-hero.v2 { grid-template-columns: 1fr 1.1fr; } .t-hero.v2 .w-t { order: 2; }
.wf.v2.t-hero, .wf.v2.t-cta, .wf.v2.t-foot, .wf.v2.t-quote { background: hsl(var(--lh, 158) 42% 14%); } .wf.v2.t-hero .ln, .wf.v2.t-cta .ln, .wf.v2.t-foot .ln, .wf.v2.t-quote .ln { background: rgb(255 255 255 / 0.42); } .wf.v2.t-hero .ln.h, .wf.v2.t-cta .ln.h, .wf.v2.t-foot .ln.h, .wf.v2.t-quote .ln.h { background: #fff; } .wf.v2.t-hero .bx { background: hsl(var(--lh) 45% 30%); } .wf.v2 .w-btn { background: hsl(var(--lh) 80% 68%); }
.t-feat { grid-template-columns: repeat(3, 1fr); align-items: start; } .w-c { display: grid; gap: 0.9em; align-content: start; } .dot { display: block; width: 3em; height: 3em; border-radius: 0.9em; background: color-mix(in srgb, hsl(var(--lh, 158) 60% 50%) 30%, var(--bg)); } .t-feat.v1 .dot { border-radius: 50%; }
.t-price { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .t-price .w-c { padding: 1.4em; border: 0.15em solid var(--line); border-radius: 1em; } .t-price .w-c.ac { border-color: hsl(var(--lh) 60% 40%); background: color-mix(in srgb, hsl(var(--lh) 60% 50%) 8%, var(--bg)); } .pbig { display: block; width: 45%; height: 2.6em; border-radius: 0.6em; background: color-mix(in srgb, var(--ink) 75%, var(--bg)); }
.t-faq { gap: 0.8em; } .w-r { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em 1.2em; border: 0.15em solid var(--line); border-radius: 0.8em; } .w-r .ln { flex: 1; max-width: 60%; } .chev { display: block; width: 1.4em; height: 1.4em; border-right: 0.3em solid var(--ink3); border-bottom: 0.3em solid var(--ink3); rotate: 45deg; margin-top: -0.4em; }
.t-quote { grid-template-columns: auto 1fr; } .qm { display: block; width: 5em; height: 5em; border-radius: 50%; background: color-mix(in srgb, hsl(var(--lh, 158) 60% 50%) 30%, var(--bg)); } .av { display: flex; align-items: center; gap: 0.8em; margin-top: 0.4em; } .av i { display: block; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--s3); }
.t-cta { justify-items: center; text-align: center; background: color-mix(in srgb, hsl(var(--lh, 158) 60% 50%) 10%, var(--bg)); } .t-cta .w-t { justify-items: center; }
.t-form { grid-template-columns: 1fr 1fr; } .t-form .w-t { width: 100%; } .wfld { display: block; width: 100%; height: 2.6em; border: 0.15em solid var(--line); border-radius: 0.6em; background: var(--bg); } .wfld.tall { height: 4.6em; } .t-form.v1 { grid-template-columns: 1fr; } .t-form.v1 .bx { display: none; }
.t-gal { grid-template-columns: repeat(3, 1fr); gap: 1em; } .t-gal .bx { min-height: 6em; } .t-gal .g0 { grid-row: span 2; } .t-gal .g4 { grid-column: span 2; } .t-gal.v1 .g1 { min-height: 9em; }
.t-grid { grid-template-columns: repeat(4, 1fr); align-items: start; } .w-p { display: grid; gap: 0.8em; align-content: start; } .t-grid .bx { aspect-ratio: 1 / 1; min-height: 0; background: color-mix(in srgb, hsl(calc(var(--lh) + var(--n) * 16) 55% 52%) 26%, var(--bg)); } .t-tiles { grid-template-columns: repeat(3, 1fr); align-items: start; } .t-tiles .bx.tall { min-height: 12em; background: color-mix(in srgb, hsl(calc(var(--lh) + var(--n) * 16) 55% 52%) 26%, var(--bg)); }
.t-table .w-tb { display: grid; border: 0.15em solid var(--line); border-radius: 0.8em; overflow: hidden; } .w-tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1em; padding: 0.9em 1.2em; border-top: 0.15em solid var(--line); } .w-tr:first-child { border-top: 0; } .w-tr i { display: block; height: 0.9em; border-radius: 0.5em; background: var(--s3); } .w-tr.hd { background: color-mix(in srgb, hsl(var(--lh) 60% 50%) 14%, var(--bg)); } .w-tr.hd i { background: color-mix(in srgb, hsl(var(--lh) 60% 40%) 60%, var(--bg)); }
.t-nav { padding: 1.6em 2.2em; gap: 1.2em; } .w-nv { display: flex; align-items: center; gap: 2em; } .w-nv .s-logo { background: hsl(var(--lh, 158) 55% 36%); } .w-nv .s-links { flex: 1; display: flex; gap: 1.4em; } .w-nv .s-links .ln { width: 4em; } .w-nv .w-btn { width: 6em; } .w-drop { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; padding: 1.4em; border: 0.15em solid var(--line); border-radius: 1em; } .w-drop > div { display: grid; gap: 0.9em; }
.t-foot { grid-template-columns: repeat(4, 1fr); align-items: start; background: var(--s2); }
.t-upload { grid-template-columns: 1.2fr 1fr; align-items: stretch; } .w-up { display: grid; gap: 1em; justify-items: center; align-content: center; padding: 2em; border: 0.25em dashed color-mix(in srgb, hsl(var(--lh) 60% 45%) 55%, var(--line)); border-radius: 1.2em; } .arrow { display: block; width: 3.4em; height: 3.4em; border-radius: 50%; background: color-mix(in srgb, hsl(var(--lh) 60% 50%) 30%, var(--bg)); } .w-files { display: grid; gap: 0.9em; align-content: center; } .w-files .w-r { justify-content: flex-start; } .w-r em { margin-left: auto; width: 2.4em; height: 1.2em; border-radius: 0.6em; background: hsl(var(--lh) 60% 40%); }
.t-swatch .w-sw { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1em; justify-items: center; } .t-swatch .w-sw i { width: 3.2em; height: 3.2em; }
.t-steps { grid-template-columns: repeat(4, 1fr); align-items: start; } .w-st { position: relative; display: grid; gap: 0.8em; justify-items: start; } .w-st .dot { border-radius: 50%; background: var(--s3); } .w-st.done .dot { background: hsl(var(--lh) 60% 40%); } .w-st::after { content: ""; position: absolute; left: 4em; right: -1em; top: 1.4em; height: 0.2em; background: var(--line); } .w-st:last-child::after { display: none; }
.pv.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: 1.4em; font-size: 3.4px; background: var(--s2); } .kp { overflow: hidden; border-radius: 1em; background: var(--bg); box-shadow: 0 0.6em 1.6em -0.8em rgb(0 0 0 / 0.35); }
/* library */
.lkind { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; } .lk { display: grid; gap: 2px; justify-items: start; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink2); font: 600 14px var(--f-sans); cursor: pointer; text-align: left; } .lk b { color: var(--ink); font: 700 26px/1 var(--f-display); letter-spacing: -0.03em; } .lk:hover { border-color: var(--ink3); } .lk.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .lk.on b { color: var(--brand); }
.lbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .lbar .gsearch { flex: 1 1 240px; max-width: 320px; } .lbar .gcount { margin-left: auto; }
.lshuf { display: flex; align-items: center; gap: 10px; color: var(--ink3); font: 600 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; } .lpal, .lfont { display: flex; gap: 6px; } .sw2 { width: 24px; height: 24px; border: 0; border-radius: 50%; background: hsl(var(--c) 60% 44%); cursor: pointer; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line); } .sw2.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px hsl(var(--c) 60% 44%); } .lf { width: 32px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink2); font-size: 14px; cursor: pointer; } .lf.serif { font-family: Georgia, serif; } .lf.mono { font-family: var(--f-mono); font-size: 12px; } .lf.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.lwrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; } .lwrap.nosb { grid-template-columns: 1fr; } .lwrap.nosb .lsb { display: none; }
.lsb { position: sticky; top: 92px; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow: auto; } .lsb h6 { margin: 16px 0 6px 12px; color: var(--ink3); font: 600 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; } .lsb-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink2); font: 500 14.5px var(--f-sans); text-align: left; cursor: pointer; } .lsb-b i { color: var(--ink3); font: 500 12px var(--f-mono); font-style: normal; } .lsb-b:hover { background: var(--s2); } .lsb-b.on { background: var(--brand-soft); color: var(--brand); font-weight: 650; } .lsb-b.on i { color: var(--brand); }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .lwrap.nosb .lgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lcard { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; } .lcard:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 16px 34px -22px rgb(0 0 0 / 0.35); transform: translateY(-2px); }
.lpv { position: relative; display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: zoom-in; text-align: left; color: inherit; } .lpv:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .lpv .pv { pointer-events: none; }
.lbadge { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--ink2); font: 600 11px var(--f-mono); box-shadow: 0 2px 8px rgb(0 0 0 / 0.14); } .lbadge.t0 { background: var(--lime); color: var(--on-lime); } .lbadge.in { position: static; box-shadow: none; background: var(--s3); } .lbadge.in.t0 { background: var(--lime); }
.lc-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; } .lc-b h3 { font: 650 15.5px/1.25 var(--f-display); letter-spacing: -0.01em; } .lc-b small { color: var(--ink3); font-size: 12.5px; }
.lplus { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 13px var(--f-sans); cursor: pointer; } .lplus:hover { border-color: var(--brand); color: var(--brand); } .lplus.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.lplanbtn { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--deep); color: var(--on-deep); font: 650 14.5px var(--f-sans); cursor: pointer; box-shadow: 0 14px 32px -12px rgb(0 0 0 / 0.55); } .lplanbtn i { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font: 700 12.5px var(--f-mono); font-style: normal; }
.lplan { position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; display: flex; flex-direction: column; width: min(420px, 100%); border-left: 1px solid var(--line); background: var(--bg); box-shadow: -24px 0 50px -30px rgb(0 0 0 / 0.5); translate: 105% 0; transition: translate 0.28s ease; visibility: hidden; } .lplan.open { translate: 0 0; visibility: visible; }
.lp-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } .lp-h b { font: 650 18px var(--f-display); } .lp-x, .lm-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--s2); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; } .lp-x:hover, .lm-x:hover { background: var(--s3); }
.lp-b { display: grid; gap: 12px; align-content: start; flex: 1; padding: 18px 20px; overflow: auto; } .lp-f { display: grid; gap: 10px; justify-items: center; padding: 16px 20px 22px; border-top: 1px solid var(--line); } .lp-f .btn { width: 100%; } .lp-f p { margin: 0; color: var(--ink2); font-size: 13px; text-align: center; }
.lpi { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; } .lpt { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; pointer-events: none; } .lpt .pv { font-size: 2.6px; } .lpn b { display: block; font-size: 14px; } .lpn small { color: var(--ink3); font-size: 12px; } .lpa { display: flex; flex-direction: column; gap: 4px; } .lpa button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink2); cursor: pointer; } .lpa button:disabled { opacity: 0.35; cursor: default; } .lpa button:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.lpe { display: grid; justify-items: center; gap: 8px; padding: 40px 10px; color: var(--ink3); text-align: center; font-size: 14px; } .lpe b { color: var(--ink); font-size: 16px; }
.lmod { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px; background: rgb(8 18 13 / 0.6); } .lmod.open { display: grid; } .lm { position: relative; width: min(1000px, 100%); max-height: 92vh; overflow: auto; padding: 26px; border-radius: 26px; background: var(--bg); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6); } .lm-x { position: absolute; right: 16px; top: 16px; z-index: 2; }
.lm-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; align-items: start; } .lm-pv .pv { font-size: 13px; border: 1px solid var(--line); border-radius: 16px; } .lm-pv .pv.stack { aspect-ratio: auto; max-height: 560px; overflow: auto; pointer-events: auto; } .lm-pv .pv.kit { font-size: 6px; }
.lm-i { display: grid; gap: 14px; align-content: start; padding-top: 6px; } .lm-i h2 { font: 650 28px/1.15 var(--f-display); letter-spacing: -0.03em; } .lm-i p { margin: 0; color: var(--ink2); line-height: 1.6; } .lm-h { display: flex; align-items: center; gap: 8px; } .lm-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 1100px) { .td-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .td-vis { position: static; grid-column: 1 / -1; } .td-grid .pd-buy { position: static; } .lkind { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .lwrap { grid-template-columns: 1fr; gap: 16px; } .lsb { position: static; display: flex; gap: 6px; max-height: none; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .lsb::-webkit-scrollbar { display: none; } .lsb h6 { display: none; } .lsb-b { flex: none; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; gap: 10px; } .lm-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .td-grid { grid-template-columns: 1fr; gap: 24px; } .td-grid .pd-buy { order: 2; } .td-grid .pd-main { order: 3; } .ed3.two { grid-template-columns: 1fr; } .pgal.thgal { grid-template-columns: 1fr; } .lbar .gcount { margin-left: 0; width: 100%; } .lbar .gsearch { max-width: none; } .lm { padding: 18px; border-radius: 20px; } .lplanbtn { right: 14px; bottom: 14px; } .lkind { gap: 8px; } .lk { padding: 12px 14px; } .lk b { font-size: 22px; } .th-art { height: 190px; } }

.lcounts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; color: var(--ink2); font-size: 15px; } .lcounts b { color: var(--ink); font: 700 22px var(--f-display); letter-spacing: -0.02em; margin-right: 4px; }

.login { white-space: nowrap; }
.pv.one .wf { padding-top: 3.2em; }

.lpv.kitp .lbadge { top: auto; left: auto; right: 10px; bottom: 10px; }