:root{--ink:#44351c;--muted:#756342;--paper:#fffbef;--accent:#f4ca50;--line:#e8dcb7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.9 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}a{color:inherit;text-underline-offset:5px}a:hover{color:#925514}img{max-width:100%;height:auto}header{border-bottom:1px solid var(--line)}.nav{max-width:1200px;margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 32px}.brand{font-size:24px;font-weight:750;letter-spacing:-1px;text-decoration:none;display:flex;align-items:center;gap:10px}.brand img{width:36px}.brand small{font-size:12px;letter-spacing:.08em;font-weight:500;margin-left:6px}nav{display:flex;gap:24px;font-size:14px;flex-wrap:wrap}nav a{text-decoration:none}nav a[aria-current]{text-decoration:underline}.wrap{max-width:1200px;margin:auto;padding:0 32px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding:86px 0 70px}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--muted)}h1{font-size:clamp(36px,4.5vw,62px);line-height:1.45;letter-spacing:-.045em;margin:20px 0 26px}h2{font-size:30px;line-height:1.5;letter-spacing:-.025em}h3{font-size:20px;line-height:1.6}p{margin:0 0 20px}.lead{font-size:17px;color:var(--muted);max-width:42em}.button{display:inline-block;background:var(--accent);color:var(--ink);padding:12px 24px;border-radius:7px;text-decoration:none;font-weight:600}.button:hover{color:var(--ink);background:#e9b936}.actions{display:flex;align-items:center;gap:24px;margin:30px 0 20px}.meta{font-size:12px;color:var(--muted)}.screen{padding:20px;background:#fff0bd;border:1px solid #e8d28f;border-radius:20px;transform:rotate(1deg)}.screen img{display:block;border-radius:12px;box-shadow:0 18px 40px #61461314}.caption{font-size:11px;text-align:center;margin:14px 0 0;color:var(--muted)}kbd{font:inherit;font-size:.85em;border:1px solid #d6bc72;border-bottom-width:3px;padding:2px 9px;border-radius:5px;background:#fffdf5;white-space:nowrap}.strip{background:var(--accent);color:var(--ink);padding:32px 0}.strip .wrap{display:flex;justify-content:space-between;gap:28px}.strip b{font-size:19px;display:block}.strip span{font-size:13px;color:#655026}.section{padding:76px 0;border-bottom:1px solid var(--line)}.section-head{max-width:660px;margin-bottom:36px}.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.number{font:italic 34px Georgia,serif;color:#967120}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.split img{border:1px solid var(--line);border-radius:16px;display:block;max-height:560px;margin:auto}.note{background:#fff2c8;padding:24px 28px;border-left:3px solid #d9ad38;font-size:14px}.article{max-width:820px;padding:64px 32px 80px;margin:auto;min-height:65vh}.article h1{font-size:40px}.article h2{font-size:25px;margin:45px 0 16px}.article li{margin-bottom:10px}.article img{border-radius:14px;border:1px solid var(--line);max-width:100%;width:580px;display:block;margin:28px auto}.article table{width:100%;border-collapse:collapse;font-size:14px}.article th,.article td{text-align:left;padding:14px;border-bottom:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-weight:650}details p{margin:15px 0 0;color:var(--muted)}.cta{text-align:center;padding:70px 24px}.cta h2{margin:0 0 16px}footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:12px}footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.skip{position:absolute;top:-100px;left:16px;background:white;padding:8px;z-index:10}.skip:focus{top:8px}:focus-visible{outline:3px solid #b57625;outline-offset:5px}::selection{background:#f7db7c}@media(max-width:850px){.nav{align-items:flex-start;flex-direction:column;gap:12px;padding:18px 24px}nav{gap:12px 20px}.wrap{padding:0 24px}.hero{grid-template-columns:1fr;padding:44px 0;gap:36px}h1{font-size:42px}.screen{max-width:580px;margin:auto;transform:none}.strip .wrap,.columns{display:grid;grid-template-columns:1fr;gap:24px}.split{grid-template-columns:1fr;gap:32px}.section{padding:48px 0}.article{padding:40px 24px 60px}.article h1{font-size:33px}.brand small{margin-left:0}.actions{flex-wrap:wrap}.article table{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.hero h1{font-size:clamp(34px,3.3vw,48px)}.nowrap{white-space:nowrap}

@media(max-width:850px){.brand{font-size:20px}.brand small{display:none}}
.demo{padding-top:60px;padding-bottom:50px}.demo video{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper)}

/* Keep real app screenshots legible and reserve their actual 16:10 ratio. */
body{font-size:1rem}
.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding:60px 0}
.hero>*,.split>*{min-width:0}
.hero h1{font-size:clamp(1.9rem,1.1rem + 2.2vw,3rem)}
.screen{margin:0;padding:16px;transform:none}
.screen a,.split figure a{display:block}
.screen img,.split img{width:100%;height:auto;aspect-ratio:8/5}
.split figure{margin:0}
.caption{font-size:.8125rem;line-height:1.7}
.availability{font-size:.875rem;font-weight:650;margin-bottom:12px}
.pricing{font-size:.875rem;line-height:1.8;max-width:40em}
.actions{margin:16px 0;gap:12px 16px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.6}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
.video-description{font-size:.875rem;margin-top:24px;max-width:64em}
.demo video{aspect-ratio:16/9}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-links a{display:inline-flex;align-items:center;min-height:24px}
.more-link{margin-top:24px}
.article a{overflow-wrap:anywhere}
.article caption{text-align:left;font-weight:650;padding:12px 0}
.article h1{font-size:2.5rem}
summary{min-height:44px}
@media(max-width:850px){
 .hero{grid-template-columns:minmax(0,1fr);padding:36px 0 44px;gap:28px}
 .hero .screen{width:100%;max-width:680px}
 .screen{padding:12px}
 .split{grid-template-columns:minmax(0,1fr)}
 .brand{font-size:1.25rem;letter-spacing:-.025em}
 .brand img{flex:none}
 nav{gap:4px 24px}
 .nav{gap:4px}
 .article h1{font-size:2rem}
 .article table{font-size:.875rem}
 .article th,.article td{padding:12px 8px}
}