:root {
  --ink: #182921; --muted: #606c65; --green: #194c39; --mint: #c8f1b1;
  --line: #dce2dc; --soft: #f3f6f2; --header-height: 80px;
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  color: var(--ink); background: #fff; font-synthesis: none;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; font-size: 15px; line-height: 1.85; }
html { scroll-padding-top: calc(var(--header-height) + 24px); scroll-behavior: smooth; }
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, label, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button, fieldset { margin: 0; }
button { border: 0; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 20px; }
h1, h2, h3 { margin: 0; line-height: 1.4; font-weight: 750; overflow-wrap: anywhere; }
h2 { font-size: 40px; } h3 { font-size: 22px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #bd7418; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.lp-icon { flex: 0 0 auto; vertical-align: middle; }
.eyebrow { font-size: 11px; font-weight: 750; margin: 0 0 20px; color: var(--green); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.button { min-height: 54px; padding: 14px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; font-size: 14px; font-weight: 750; border-radius: 4px; transition: background .2s, box-shadow .2s; }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: var(--green); }
.button-mint { color: var(--ink); background: var(--mint); }
.button-mint:hover { background: #e0ffce; box-shadow: 0 4px 20px #0b191526; }
.button-glass { color: #fff; background: #13231db8; border: 1px solid #ffffff9c; backdrop-filter: blur(8px); }
.button-glass:hover { color: var(--ink); background: #fff; box-shadow: 0 4px 20px #0b191526; }
.text-link { display: inline-flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 8px; margin-top: 20px; }
.text-link:hover { color: #42704f; }
.icon-button { width: 44px; height: 44px; padding: 10px; display: grid; place-content: center; background: transparent; border-radius: 4px; }
.icon-button:hover { background: var(--soft); }
.skip-link { position: fixed; top: -80px; left: 16px; background: white; padding: 12px 20px; z-index: 200; }
.skip-link:focus { top: 8px; }
.lp-header { height: 80px; position: sticky; top: 0; z-index: 50; background: #fffffff5; backdrop-filter: blur(16px); border-bottom: 1px solid #e4e8e3; padding-inline: 40px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.lp-brand { flex-shrink: 0; }
.lp-brand img { width: 148px; height: 44px; object-fit: contain; }
.lp-navigation, .lp-navigation nav, .header-actions { display: flex; align-items: center; }
.lp-navigation { gap: 40px; }
.lp-navigation nav { flex-direction: column; align-items: flex-end; gap: 6px; }
.header-primary-links, .header-tool-links { display: flex; align-items: center; gap: 22px; }
.header-tool-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.header-tool-links .lp-icon { width: 15px; height: 15px; }
.lp-navigation a { font-size: 12px; white-space: nowrap; font-weight: 700; }
.lp-navigation nav a:hover, .header-actions > a:first-child:hover { color: #447f52; }
.header-actions { gap: 24px; }
.header-actions .button { min-height: 44px; padding: 9px 18px; gap: 16px; }
.menu-toggle { display: none; }
.reading-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.reading-progress span { display: block; width: 100%; height: 100%; background: #89ba63; transform: scaleX(0); transform-origin: left; }
.lp-hero { position: relative; isolation: isolate; color: white; height: min(800px, calc(100svh - 150px)); min-height: 620px; background: #263630; overflow: hidden; }
.hero-photo, .hero-shade { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-photo { object-fit: cover; object-position: center 54%; filter: none; }
#hero-title:focus { outline: none; }
.hero-media { position: absolute; inset: -70px 0; z-index: -2; pointer-events: none; will-change: transform; }
.hero-media .hero-photo { z-index: auto; }
.hero-outgoing { opacity: 0; }
.hero-shade { background: linear-gradient(90deg, #090d0c80, #090d0c24 42%, transparent 66%); }
.hero-inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: 52px 28px; }
.hero-copy { max-width: 740px; }
.hero-eyebrow { color: #d4eccf; display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 12px; }
.status-dot { height: 6px; width: 6px; background: var(--mint); border-radius: 50%; flex-shrink: 0; }
.hero-copy h1 { font-size: 104px; font-weight: 650; line-height: 1.05; font-family: Arial, "Noto Sans JP", sans-serif; }
.brand-plus { color: var(--mint); padding-inline: 10px; font-weight: 300; }
.hero-copy h1 small { display: block; font: 600 14px/1.7 "Yu Gothic", Meiryo, sans-serif; margin-top: 12px; }
.hero-message { margin: 26px 0 20px; font-size: 38px; font-weight: 650; line-height: 1.55; }
.hero-lead { margin-bottom: 26px; color: #f0f4ee; font-size: 14px; line-height: 1.95; }
.hero-text-link { font-size: 13px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ffffff70; padding: 10px 0; }
.hero-text-link:hover { color: var(--mint); }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 34px; }
.hero-controls { position: absolute; top: 20px; right: max(32px, calc((100% - 1240px) / 2)); display: flex; align-items: start; gap: 12px; min-width: 0; }
.hero-controls .industry-choice { background: #432612b3; }
.hero-controls .industry-choice:has(:checked) { background: #fff; }
.hero-bottom { justify-content: flex-end; }
.hero-autoplay { color: #fff; border: 1px solid #ffffff60; position: relative; overflow: hidden; flex: 0 0 43px; height: 43px; border-radius: 0; }
.hero-autoplay:hover { background: #ffffff24; }
.hero-autoplay .lp-icon { width: 16px; height: 16px; }
.autoplay-progress { height: 2px; position: absolute; inset: auto 0 0; background: var(--mint); transform: scaleX(0); transform-origin: left; }
.industry-switch { padding: 0; border: 0; display: flex; gap: 7px; flex-wrap: wrap; }
.industry-choice { position: relative; display: flex; align-items: center; gap: 7px; padding: 10px 13px; min-height: 43px; border: 1px solid #ffffff55; color: #fff; cursor: pointer; font-size: 11px; transition: background .2s, color .2s; }
.industry-choice .lp-icon { width: 17px; height: 17px; }
.industry-choice input, .works-tabs input, .start-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.industry-choice:has(:checked) { background: #fff; color: var(--ink); border-color: #fff; }
.industry-choice:has(:focus-visible), .works-tabs label:has(:focus-visible), .start-choice:has(:focus-visible) { outline: 3px solid #c89547; outline-offset: 4px; }
.industry-choice:hover { background: #ffffff24; }
.industry-choice:has(:checked):hover { background: #fff; }
.hero-caption { max-width: 260px; font-size: 11px; text-align: right; min-height: 60px; background: #321c0ebf; padding: 8px 12px; }
.hero-caption > span { color: #c7e3b5; font-family: monospace; font-size: 12px; }
.hero-caption p { margin: 6px 0 0; }
.capability-strip { border-bottom: 1px solid var(--line); background: #fff; }
.capability-strip .container { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.capability-strip p { font-weight: 750; margin: 0; font-size: 13px; }
.capability-strip span { display: flex; align-items: center; gap: 10px; color: #616c64; font-size: 12px; }
.capability-strip .lp-icon { color: #64855a; width: 18px; height: 18px; }
.section { padding-block: 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 42px; }
.section-heading > p, .section-heading > div > p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.start-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; }
.start-choices { border: 0; padding: 0; align-self: start; }
.start-choice { position: relative; display: flex; gap: 20px; align-items: center; padding: 26px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.start-choice:first-of-type { border-top: 1px solid var(--line); }
.start-choice:has(:checked) { background: var(--soft); box-shadow: inset 3px 0 var(--green); }
.start-choice .choice-number { font-size: 12px; font-family: monospace; color: #7c8a80; }
.start-choice b { display: block; font-size: 15px; }
.start-choice small { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.start-choice > .lp-icon { margin-left: auto; }
.start-result { min-height: 375px; padding-top: 10px; }
.result-kicker { color: var(--green); display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; margin-bottom: 16px; }
.start-result h3 { font-size: 29px; margin-bottom: 18px; }
.start-result p { font-size: 14px; color: var(--muted); max-width: 520px; }
.tick-list { padding: 0; margin: 22px 0 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.tick-list li { display: flex; align-items: center; gap: 9px; }
.tick-list .lp-icon { width: 16px; height: 16px; color: var(--green); }
.section-works { background: var(--soft); }
.works-tabs { padding: 0; border: 0; display: flex; gap: 26px; border-bottom: 1px solid #cbd6ca; margin-bottom: 34px; }
.works-tabs label { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 4px; cursor: pointer; color: var(--muted); font-size: 13px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.works-tabs label:has(:checked) { color: var(--ink); border-color: var(--green); font-weight: 750; }
.works-tabs label:hover { color: var(--green); }
.works-tabs .lp-icon { width: 18px; height: 18px; }
.work-panel { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); gap: 56px; align-items: center; }
.work-preview { padding: 0; text-align: left; display: block; background: #fff; border: 1px solid #d7dfd4; border-radius: 6px; overflow: hidden; box-shadow: 0 16px 36px #1a2e1b0a; width: 100%; transition: box-shadow .2s; }
.work-preview:hover { box-shadow: 0 20px 40px #1a2e1b1a; }
.browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding-inline: 14px; color: #748074; font-size: 10px; background: #fff; }
.browser-bar .lp-icon { width: 15px; height: 15px; }
.browser-dots { display: flex; gap: 4px; }
.browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d4dad4; }
.work-preview img { width: 100%; aspect-ratio: 1440 / 980; object-fit: cover; object-position: top; }
.work-index { display: block; font: 40px/1.2 Georgia, serif; margin-bottom: 24px; }
.work-index span { font: 12px/1.5 monospace; color: #8c978d; }
.work-description .eyebrow { margin-bottom: 8px; }
.work-description h3 { font-size: 24px; margin-bottom: 18px; }
.work-description > p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
.work-description ul { list-style: none; margin: 24px 0; padding: 0; font-size: 12px; }
.work-description li { padding-block: 7px; display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.work-description li .lp-icon { width: 15px; height: 15px; color: #628455; }
.work-description .button { font-size: 12px; gap: 20px; }
.work-description > small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.section-lead { margin: 26px 0 20px; color: #46574b; font-size: 15px; }
.about-layout > div > p:not(.eyebrow):not(.section-lead) { font-size: 13px; color: var(--muted); }
.answer-demo { border: 1px solid var(--line); border-radius: 6px; padding: 30px; background: #f9faf8; }
.answer-demo-top { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.answer-demo-top > span { margin-left: auto; font-size: 9px; }
.example-question { font-size: 25px; line-height: 1.6; margin: 36px 0; font-weight: 600; }
.example-answer { display: flex; gap: 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.answer-mark { color: #42603b; }
.example-answer h3 { font-size: 15px; margin-bottom: 12px; }
.example-answer p { font-size: 12px; color: var(--muted); }
.answer-tags { display: flex; gap: 14px; flex-wrap: wrap; color: var(--green); font-size: 10px; }
.answer-tags span { border-bottom: 1px solid #a3b993; }
.answer-note { font-size: 10px; color: #6f766d; line-height: 1.7; margin: 28px 0 0; }
.feature-lines { padding-top: 94px; }
.feature-heading { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 28px; gap: 20px; }
.feature-heading h2 { font-size: 25px; }
.feature-heading p { font-size: 12px; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 28px; }
.feature-grid article { border-left: 1px solid var(--line); padding-left: 24px; }
.feature-grid article:first-child { padding-left: 0; border-left: 0; }
.feature-grid > article > .lp-icon { color: var(--green); width: 26px; height: 26px; margin-bottom: 20px; }
.feature-grid h3 { font-size: 16px; margin-bottom: 14px; }
.feature-grid p { font-size: 12px; margin: 0; color: var(--muted); }
.section-flow { background: #eef3ed; }
.flow-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.flow-steps details { border-top: 1px solid #c8d4c5; }
.flow-steps details:last-child { border-bottom: 1px solid #c8d4c5; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.flow-steps summary { display: flex; align-items: center; gap: 22px; padding-block: 22px; }
.flow-steps summary > span { font: 14px/1.5 monospace; color: #5a7650; }
.flow-steps h3 { font-size: 18px; }
.flow-steps summary > .lp-icon, .faq-list summary > .lp-icon { margin-left: auto; width: 18px; height: 18px; transition: transform .2s; }
details[open] > summary > .lp-icon { transform: rotate(45deg); }
.flow-steps details > div { padding: 0 0 28px 39px; }
.flow-steps details p { font-size: 13px; color: #52634d; }
.step-output { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--green); }
.tool-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tool-link { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 6px; transition: border-color .2s, background .2s; }
.tool-link:hover { border-color: #96b488; background: #f7faf4; }
.tool-icon { display: block; margin-bottom: 30px; color: #4f744a; }
.tool-link:nth-child(2) .tool-icon { color: #ac7632; }
.tool-link:nth-child(3) .tool-icon { color: #b66c60; }
.tool-icon > .lp-icon { width: 32px; height: 32px; }
.tool-label { font-size: 10px; color: var(--muted); }
.tool-link h3 { font-size: 20px; margin: 10px 0 15px; }
.tool-link p { font-size: 13px; color: var(--muted); }
.tool-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 24px; margin-top: auto; font-size: 12px; font-weight: 700; border-top: 1px solid var(--line); }
.section-faq { border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.faq-layout > div > p:not(.eyebrow) { font-size: 13px; margin-top: 22px; color: var(--muted); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; gap: 16px; padding-block: 23px; font-size: 14px; font-weight: 650; }
.faq-list details p { font-size: 13px; color: var(--muted); padding-right: 28px; }
.closing-section { position: relative; overflow: hidden; padding-block: 85px; color: #fff; background: var(--green); }
.closing-section .container { position: relative; z-index: 1; }
.closing-section .eyebrow { color: #c8e2bd; }
.closing-section h2 { font-size: 48px; }
.closing-section p:not(.eyebrow) { margin-block: 24px 30px; color: #d7e7d2; font-size: 14px; }
.closing-link { display: flex; align-items: center; gap: 14px; font-size: 13px; border-bottom: 1px solid #ffffff80; padding-block: 10px; }
.closing-wordmark { position: absolute; bottom: -45px; right: 24px; font: 700 190px/1.3 Arial,sans-serif; color: #ffffff07; pointer-events: none; }
.company-section { padding-block: 70px; }
.company-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.company-layout h2 { font-size: 26px; }
.company-layout dl { margin: 0; }
.company-layout dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; font-size: 12px; padding-block: 15px; border-bottom: 1px solid var(--line); }
.company-layout dt { color: var(--muted); }
.company-layout dd { margin: 0; }
.company-hours { display: inline-block; color: var(--muted); margin-left: 20px; font-size: 11px; }
.lp-footer { padding-block: 42px 28px; background: var(--soft); }
.footer-top { display: flex; align-items: start; justify-content: space-between; gap: 70px; }
.footer-top nav { max-width: 770px; display: flex; flex-wrap: wrap; gap: 16px 24px; font-size: 11px; }
.footer-top nav a:hover, .footer-bottom a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; }
.footer-bottom > div { display: flex; gap: 24px; flex-wrap: wrap; }
.preview-dialog { border: 0; padding: 0; width: min(1100px, calc(100% - 40px)); max-height: calc(100svh - 40px); border-radius: 6px; color: var(--ink); background: #fff; }
.preview-dialog::backdrop { background: #0b1618b8; }
.preview-dialog-header { position: sticky; top: 0; background: white; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 18px; }
.preview-dialog-header h2 { font-size: 16px; }
.preview-dialog > img { width: 100%; height: auto; }
.mobile-cta { display: none; }
.section-build { background: #f7f8f5; border-bottom: 1px solid var(--line); }
.build-demo { border: 1px solid #cbd7d1; border-radius: 6px; overflow: hidden; background: #fff; }
.build-toolbar { min-height: 58px; display: flex; align-items: center; gap: 24px; padding: 7px 20px; border-bottom: 1px solid var(--line); }
.build-tool-title { display: flex; align-items: center; gap: 10px; font: 700 12px/1.5 monospace; }
.build-tool-title .lp-icon { color: #47705a; width: 18px; height: 18px; }
.build-status { font-size: 12px; font-weight: 700; margin-left: auto; min-width: 142px; }
.build-actions { display: flex; gap: 2px; }
.build-actions .icon-button { width: 36px; height: 36px; padding: 9px; }
.build-actions .lp-icon { width: 18px; height: 18px; }
.build-canvas { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.build-website { min-width: 0; padding: 20px; background: #f5f7f5; }
.build-site-nav { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border: 1px dashed #a3b4ab; position: relative; background: #fff; }
.build-site-nav b { font: 700 17px/1.5 Georgia,serif; }
.build-site-nav > span:not(.build-wire-label) { font-size: 10px; }
.build-site-hero { position: relative; height: 340px; isolation: isolate; border: 1px dashed #a3b4ab; background: #ecf0eb; overflow: hidden; }
.build-wire-label { position: absolute; top: 12px; left: 14px; color: #465a4e; font: 11px/1.5 monospace; }
.build-cover { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.build-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 67%; }
.build-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #152921df, #142e2290 45%, #142e2210); }
.build-skeleton-lines { position: absolute; top: 90px; left: 30px; width: 50%; display: grid; gap: 18px; }
.build-skeleton-lines i { height: 20px; background: #ced8cf; }
.build-skeleton-lines i:last-child { width: 65%; }
.build-site-copy { position: relative; padding: 42px 30px; color: #fff; }
.build-site-copy > span:first-child { font-size: 11px; }
.build-site-copy h3 { margin-block: 18px 14px; font: 600 36px/1.5 "Yu Mincho",serif; }
.build-site-copy p { font-size: 12px; margin-bottom: 24px; }
.build-sample-cta { display: inline-flex; align-items: center; gap: 28px; font-size: 11px; background: #dcebc8; color: #23452e; padding: 8px 16px; }
.build-sample-cta .lp-icon { width: 15px; height: 15px; }
.build-site-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.build-site-gallery > div { position: relative; height: 122px; border: 1px dashed #a3b4ab; overflow: hidden; background: #e9eee7; }
.build-site-gallery img { width: 100%; height: 100%; object-fit: cover; }
.build-site-gallery > div:nth-child(2) img { transition-delay: 150ms; }
.build-site-gallery > div:nth-child(3) img { transition-delay: 300ms; }
.build-inspector { display: grid; grid-template-rows: repeat(3, 1fr); background: #182c25; padding: 12px 20px; color: #d8e8dc; min-width: 0; }
.build-code-block { padding: 16px 0; min-width: 0; }
.build-code-block + .build-code-block { border-top: 1px solid #ffffff20; }
.build-code-label { display: flex; align-items: center; gap: 9px; font: 11px/1.5 monospace; color: #d4efbc; }
.build-code-label > b { font-size: 10px; font-weight: 400; color: #7fa88c; }
.build-code-label .lp-icon { width: 15px; height: 15px; margin-left: auto; }
.build-code-block pre { font: 10px/1.75 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 14px 0 0; }
.build-checks { display: flex; gap: 14px; margin-top: 12px; color: #b6d9a5; font-size: 10px; }
.build-layer { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.2,1), clip-path 1.1s cubic-bezier(.2,.65,.2,1); }
.build-layer.is-installed { opacity: 1; transform: none; }
.build-cover { clip-path: inset(0 100% 0 0); transform: none; }
.build-cover.is-installed { clip-path: inset(0); }
.build-demo:not([data-step="0"]) .build-site-hero > .build-wire-label { opacity: 0; }
.build-demo:not([data-step="0"]) .build-skeleton-lines { opacity: 0; }
.build-demo:not([data-step="0"]):not([data-step="1"]) .build-site-nav .build-wire-label { opacity: 0; }
.build-demo:not([data-step="0"]) .build-site-hero { border-color: transparent; }
.build-demo:not([data-step="0"]):not([data-step="1"]) .build-site-nav { border-color: transparent; }
.build-demo[data-step="3"] .build-site-gallery .build-wire-label,
.build-demo[data-step="4"] .build-site-gallery .build-wire-label,
.build-demo[data-step="5"] .build-site-gallery .build-wire-label { opacity: 0; }
.build-demo[data-step="3"] .build-site-gallery > div,
.build-demo[data-step="4"] .build-site-gallery > div,
.build-demo[data-step="5"] .build-site-gallery > div { border-color: transparent; }
.build-demo[data-step="5"] .build-toolbar { background: #ecf5e8; }
.build-timeline { padding: 0 20px; border-top: 1px solid var(--line); }
.build-timeline fieldset { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0; border: 0; }
.build-timeline label { position: relative; padding: 19px 10px; display: flex; align-items: center; gap: 10px; color: #465a4e; cursor: pointer; font-size: 11px; border-right: 1px solid var(--line); }
.build-timeline label:last-child { border-right: 0; }
.build-timeline input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.build-timeline label:has(:checked) { color: #154a30; background: #edf5e8; }
.build-timeline label:has(:focus-visible) { outline: 3px solid #b8802c; outline-offset: -3px; }
.build-step-number { font: 11px/1.5 monospace; }
.build-step-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #7daf5c; transform: scaleX(0); transform-origin: left; }
.build-timeline label.is-done .build-step-progress { transform: scaleX(1); }
.build-note { font-size: 11px; color: var(--muted); text-align: right; margin: 16px 0 0; }
@keyframes build-frame-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes build-line-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.build-demo[data-step="0"] .build-site-nav { animation: build-frame-in .65s ease both; }
.build-demo[data-step="0"] .build-site-hero { animation: build-frame-in .65s .12s ease both; }
.build-demo[data-step="0"] .build-site-gallery { animation: build-frame-in .65s .25s ease both; }
.build-demo[data-step="0"] .build-skeleton-lines i { animation: build-line-in .9s .3s ease both; transform-origin: left; }
.build-demo[data-step="0"] .build-skeleton-lines i:nth-child(2) { animation-delay: .45s; }
.build-demo[data-step="0"] .build-skeleton-lines i:nth-child(3) { animation-delay: .6s; }
.reveal-ready { opacity: 0; transform: translateY(38px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.65,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready.is-revealed, .reveal-ready:focus-within { opacity: 1; transform: none; }
.lp-navigation nav a { position: relative; }
.lp-navigation nav a::after { content: ""; position: absolute; bottom: -8px; height: 2px; left: 0; right: 0; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.lp-navigation nav a.is-active::after { transform: scaleX(1); }
.button .lp-icon, .text-link .lp-icon, .hero-text-link .lp-icon, .tool-bottom .lp-icon { transition: transform .25s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover .lp-icon, .text-link:hover .lp-icon, .hero-text-link:hover .lp-icon, .tool-link:hover .tool-bottom .lp-icon { transform: translate(3px, -2px); }
  .work-preview { transition: transform .45s cubic-bezier(.2,.65,.2,1), box-shadow .3s; }
  .work-preview:hover { transform: translateY(-7px); }
}
@media (max-width: 1180px) {
  .lp-header { padding-inline: 24px; gap: 24px; }
  .lp-navigation { gap: 24px; } .lp-navigation nav { gap: 6px; }
  .header-primary-links, .header-tool-links { gap: 16px; }
  .header-actions { gap: 16px; }
  .container { width: calc(100% - 64px); }
  .hero-copy h1 { font-size: 92px; }
  .hero-caption { max-width: 190px; }
  .industry-choice { padding-inline: 10px; }
  .start-layout, .work-panel, .about-layout, .flow-layout, .faq-layout, .company-layout { gap: 40px; }
}
@media (max-width: 1000px) {
  h2 { font-size: 34px; }
  .lp-header { height: 70px; }
  .lp-navigation { gap: 20px; }
  .lp-navigation nav { gap: 6px; }
  .lp-brand img { width: 128px; }
  .header-primary-links, .header-tool-links { gap: 12px; }
  .lp-navigation a { font-size: 11px; }
  .header-actions > a:first-child { display: none; }
  .header-actions .button { padding-inline: 12px; gap: 6px; }
  .hero-caption { display: none; }
  .hero-controls { position: static; align-self: flex-end; margin-bottom: 24px; }
  .hero-inner { justify-content: flex-start; padding-top: 20px; }
  .hero-bottom { display: none; }
  .hero-copy h1 { font-size: 84px; }
  .hero-message { font-size: 34px; }
  .lp-hero { min-height: 625px; }
  .capability-strip .container { flex-wrap: wrap; justify-content: start; column-gap: 28px; row-gap: 8px; padding-block: 18px; }
  .capability-strip p { width: 100%; }
  .section { padding-block: 72px; }
  .section-heading { gap: 30px; }
  .section-heading > p, .section-heading > div > p:not(.eyebrow) { max-width: 320px; font-size: 13px; }
  .start-layout { gap: 32px; grid-template-columns: 1fr 1fr; }
  .start-choice { gap: 12px; padding-inline: 12px; }
  .start-choice b { font-size: 13px; }
  .start-choice small { font-size: 11px; }
  .start-result h3 { font-size: 25px; }
  .work-panel { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 30px; }
  .work-index { font-size: 30px; margin-bottom: 14px; }
  .work-description h3 { font-size: 20px; }
  .work-description ul { margin-block: 15px; }
  .work-description .button { padding-inline: 14px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .feature-grid article:nth-child(3) { padding-left: 0; border: 0; }
  .tool-links { gap: 14px; }
  .tool-link { padding: 20px; }
  .tool-link h3 { font-size: 17px; }
  .tool-bottom { font-size: 11px; }
  .build-canvas { grid-template-columns: minmax(0, 1fr) 230px; }
  .build-website { padding: 14px; }
  .build-inspector { padding-inline: 14px; }
  .build-site-nav { padding-inline: 14px; }
  .build-site-nav > span:not(.build-wire-label) { display: none; }
  .build-site-copy { padding-inline: 20px; }
  .build-site-copy h3 { font-size: 30px; }
  .build-timeline { padding-inline: 0; }
  .build-timeline label { flex-direction: column; gap: 4px; font-size: 10px; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }
  .lp-header { padding-inline: 20px; height: 64px; }
  .lp-brand img { width: 128px; height: 38px; }
  .menu-toggle { display: grid; }
  .lp-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 18px 24px 28px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 10px 22px #142c1c13; max-height: calc(100svh - 64px); overflow-y: auto; }
  .lp-navigation.is-open { display: block; }
  .lp-navigation nav { flex-direction: column; align-items: stretch; gap: 0; }
  .header-primary-links, .header-tool-links { flex-direction: column; align-items: stretch; gap: 0; }
  .lp-navigation nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .header-actions { justify-content: space-between; margin-top: 24px; }
  .header-actions > a:first-child { display: block; font-size: 14px; }
  .header-actions .button { font-size: 13px; padding-inline: 20px; }
  .lp-hero { height: auto; min-height: 570px; }
  .hero-inner { min-height: inherit; padding-block: 16px 24px; }
  .hero-photo { object-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, #090d0c99, #090d0c20); }
  .hero-copy h1 { font-size: 78px; }
  .hero-message { font-size: 30px; margin-block: 24px 18px; }
  .hero-lead { font-size: 13px; max-width: 430px; }
  .hero-bottom { margin-top: 36px; }
  .industry-switch { gap: 8px; }
  .industry-choice { padding: 9px 12px; }
  .section-heading { display: block; margin-bottom: 32px; }
  .section-heading > p, .section-heading > div > p:not(.eyebrow) { max-width: none; margin-top: 20px; }
  .start-layout, .work-panel, .about-layout, .flow-layout, .faq-layout, .company-layout { grid-template-columns: 1fr; }
  .start-choice { padding: 18px; }
  .start-choice b { font-size: 14px; }
  .start-result { min-height: 340px; padding-top: 4px; }
  .works-tabs { flex-wrap: wrap; column-gap: 18px; row-gap: 0; }
  .works-tabs label { font-size: 12px; }
  .work-panel { gap: 26px; }
  .work-description { display: grid; grid-template-columns: 1fr auto; gap: 0 24px; align-items: start; }
  .work-description .eyebrow { grid-row: 1; } .work-index { grid-column: 2; grid-row: 1 / 3; text-align: right; margin-bottom: 0; }
  .work-description h3 { grid-column: 1; grid-row: 2; }
  .work-description h3 { min-height: 2.8em; }
  .work-description > p:not(.eyebrow) { min-height: 3.7em; }
  .work-description > p:not(.eyebrow), .work-description > ul, .work-description > small { grid-column: 1 / -1; }
  .work-description > .button { grid-column: 1 / -1; justify-self: start; }
  .answer-demo { padding: 24px; }
  .feature-lines { padding-top: 64px; }
  .feature-heading { display: block; }
  .feature-heading p { margin: 14px 0 0; }
  .tool-links { grid-template-columns: 1fr; gap: 16px; }
  .tool-link { padding: 26px; }
  .tool-icon { margin-bottom: 18px; }
  .tool-link h3 { font-size: 20px; }
  .tool-link p { font-size: 13px; }
  .closing-section { padding-block: 64px; }
  .closing-section h2 { font-size: 38px; }
  .closing-wordmark { font-size: 100px; bottom: -15px; }
  .footer-top { flex-direction: column; gap: 30px; }
  .footer-bottom { flex-direction: column; }
  .footer-bottom > div { gap: 14px; }
  .lp-footer { padding-bottom: 100px; }
  .mobile-cta { display: flex; justify-content: center; position: fixed; bottom: 0; width: 100%; z-index: 45; background: white; border-top: 1px solid var(--line); padding: 10px 16px max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .mobile-cta a { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; font-weight: 750; }
  .mobile-cta a:first-child { width: 30%; border: 1px solid var(--line); }
  .mobile-cta a:last-child { flex: 1; background: var(--green); color: white; }
  .build-toolbar { padding-inline: 12px; gap: 10px; flex-wrap: wrap; }
  .build-tool-title { font-size: 10px; }
  .build-status { min-width: 0; font-size: 10px; }
  .build-canvas { grid-template-columns: 1fr; }
  .build-site-hero { height: 290px; }
  .build-site-copy { padding: 32px 22px; }
  .build-site-gallery > div { height: 82px; }
  .build-inspector { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 20px; min-height: 224px; }
  .build-demo .build-code-block { grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; }
  .build-demo[data-step="0"] .build-code-block:first-child,
  .build-demo[data-step="1"] .build-code-block:first-child,
  .build-demo[data-step="2"] .build-code-block:first-child,
  .build-demo[data-step="3"] .build-code-block:first-child,
  .build-demo[data-step="4"] .build-code-block[data-build="4"],
  .build-demo[data-step="5"] .build-code-block[data-build="5"] { opacity: 1; }
  .build-code-label { font-size: 11px; }
  .build-code-block pre { font-size: 11px; line-height: 1.7; }
  .build-checks { gap: 16px; font-size: 11px; }
  .build-timeline fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-timeline label { flex-direction: row; justify-content: center; gap: 8px; padding: 12px 5px; }
  .build-timeline label:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .build-timeline label:nth-child(3) { border-right: 0; }
  .build-note { text-align: left; }
}
@media (max-width: 480px) {
  h2 { font-size: 28px; }
  .section { padding-block: 56px; }
  .eyebrow { margin-bottom: 16px; font-size: 10px; }
  .lp-hero { min-height: 0; }
  .hero-inner { min-height: 560px; padding-top: 16px; }
  .hero-copy h1 { font-size: 68px; }
  .hero-copy h1 small { margin-top: 8px; font-size: 12px; }
  .hero-message { font-size: 28px; line-height: 1.5; margin-block: 24px 16px; }
  .hero-lead { font-size: 12px; margin-bottom: 20px; max-width: 315px; }
  .desktop-break { display: none; }
  .hero-copy .button-row { gap: 12px; }
  .hero-copy .button { min-height: 48px; font-size: 12px; gap: 16px; padding-inline: 18px; }
  .hero-text-link { font-size: 11px; gap: 6px; }
  .hero-text-link .lp-icon { width: 16px; height: 16px; }
  .hero-bottom { margin-top: 28px; }
  .industry-choice { min-height: 35px; font-size: 10px; padding: 7px 10px; }
  .industry-choice .lp-icon { width: 15px; height: 15px; }
  .hero-controls { gap: 8px; }
  .hero-autoplay { flex-basis: 35px; width: 35px; height: 35px; padding: 8px; }
  .capability-strip .container { column-gap: 14px; padding-block: 16px; }
  .capability-strip span { font-size: 10px; gap: 5px; }
  .capability-strip span:last-child { display: none; }
  .start-choice { padding-inline: 12px; }
  .start-choice b { font-size: 12px; }
  .start-choice .lp-icon { width: 18px; height: 18px; }
  .start-result h3 { font-size: 25px; }
  .start-result { min-height: 370px; }
  .works-tabs { gap: 0 12px; }
  .works-tabs label { gap: 6px; font-size: 11px; padding: 10px 3px; }
  .works-tabs label .lp-icon { width: 15px; height: 15px; }
  .browser-bar { font-size: 9px; height: 32px; padding-inline: 10px; }
  .work-description h3 { font-size: 20px; }
  .feature-grid { gap: 26px 20px; }
  .feature-grid article { padding-left: 16px; }
  .feature-grid h3 { font-size: 15px; }
  .feature-grid p { font-size: 11px; }
  .faq-list summary { font-size: 13px; }
  .flow-steps h3 { font-size: 16px; }
  .closing-section .button-row { flex-direction: column; align-items: start; gap: 16px; }
  .closing-section h2 { font-size: 34px; }
  .company-layout dl > div { grid-template-columns: 70px 1fr; gap: 10px; }
  .company-hours { display: block; margin-left: 0; }
  .preview-dialog { width: calc(100% - 16px); }
  .preview-dialog-header h2 { font-size: 13px; }
  .build-tool-title { flex: 1; }
  .build-status { order: 3; flex-basis: 100%; padding-bottom: 4px; }
  .build-site-copy h3 { font-size: 27px; }
  .build-site-copy p { font-size: 10px; }
  .build-site-gallery { gap: 8px; }
}
@media (max-width: 359px) {
  .hero-copy h1 { font-size: 60px; }
  .hero-copy .button-row { flex-direction: column; align-items: start; gap: 8px; }
  .hero-inner { padding-top: 14px; }
  .start-result { min-height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready { opacity: 1; transform: none; }
  .hero-media { transform: none !important; }
}