/* Homepage: a clear introduction, three visible steps and an optional walkthrough. */
.home-page { --home-paper:#edf4f3; --home-ink:#102f32; --home-muted:#476368; --home-line:#c5d7d7; --home-accent:#087a73; --home-white:#fff; background:var(--home-paper)!important; color:var(--home-ink)!important; }
html[data-theme="dark"] .home-page { --home-paper:#101827; --home-ink:#F3F4F0; --home-muted:#BAC5D3; --home-line:#3B495D; --home-accent:#79D4BF; --home-white:#202A38; }
.home-width { width:min(1280px,calc(100% - 80px)); margin-inline:auto; }
.home-canvas { overflow:clip; }
.home-page main h1,.home-page main h2,.home-page main h3 { font-family:Inter,Arial,sans-serif; color:var(--home-ink); font-weight:600; }
.home-page main h1 { font-size:clamp(44px,4.5vw,66px); line-height:1.08; letter-spacing:-.045em; margin:22px 0; }
.home-page main h1 span { color:var(--home-accent); }
.home-page main h2 { font-size:clamp(30px,3vw,44px); line-height:1.15; letter-spacing:-.035em; margin:16px 0 28px; }
.home-page main h3 { font-size:23px; line-height:1.3; letter-spacing:-.02em; margin:0 0 12px; }
.home-page main p { font-size:18px; line-height:1.6; color:var(--home-muted); }
.home-page .home-kicker { font-size:15px; font-weight:600; color:var(--home-accent); margin:0; }
.home-hero { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:48px; padding-block:64px; min-height:calc(100svh - var(--home-header-height,72px)); box-sizing:border-box; }
.home-intro { max-width:500px; }
.home-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:26px 0 18px; }
.home-button { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; background:var(--home-ink); color:var(--home-white); border:1px solid var(--home-ink); padding:16px 20px; font-size:17px; font-weight:600; border-radius:3px; text-decoration:none; }
.home-button:hover { background:var(--home-accent); border-color:var(--home-accent); color:var(--home-white); }
html[data-theme="dark"] .home-button { background:var(--home-accent); border-color:var(--home-accent); color:var(--home-paper); }
html[data-theme="dark"] .home-button:hover { background:#68C3AE; border-color:#68C3AE; }
.home-text-link { display:inline-flex; align-items:center; gap:14px; color:var(--home-ink); font-size:17px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.home-page a:focus-visible { outline:3px solid var(--home-accent); outline-offset:5px; }
.home-page .home-hero-footnote { font-size:16px; }
.home-desk { min-width:0; }
.home-paper { margin:0; background:#fff; padding:14px; border:1px solid #b2cccc; border-radius:4px; box-shadow:0 15px 38px #12343616; }
.home-paper a,.home-paper picture,.home-paper img { display:block; width:100%; }
.home-paper img { height:auto; }
.home-paper.home-hero-art { padding:0; border:0; box-shadow:none; background:transparent; }
.home-screen-label { display:flex; justify-content:space-between; gap:12px; color:#214c4c; font-size:16px; font-weight:600; padding:5px 4px 14px; }
.home-screen-label span { color:#566e70; font-weight:400; }
.home-page .home-example-label { font-size:14px; margin:12px 0 0; }
.home-chapter { padding-block:48px; border-top:1px solid var(--home-line); scroll-margin-top:90px; }

.home-section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; }
.home-section-heading h2 { margin-bottom:0!important; }
.home-section-heading>.home-text-link { flex-shrink:0; }
#how-it-works { margin-top:42px; padding-block:48px 64px; border-top:0; }
.home-step-tabs[hidden],.home-step-panel[hidden] { display:none; }
.home-step-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:30px; }
.home-step-tabs button { display:flex; align-items:center; gap:14px; text-align:left; padding:18px 12px; font-size:19px; font-weight:600; color:var(--home-muted); background:transparent; border:0; border-bottom:1px solid var(--home-line); cursor:pointer; }
.home-step-tabs button>span { font-size:24px; color:var(--home-accent); font-weight:500; }
.home-step-tabs button[aria-selected="true"] { color:var(--home-ink); background:var(--home-white); border-bottom-color:var(--home-accent); }
.home-step-tabs button:focus-visible { outline:2px solid var(--home-accent); outline-offset:4px; }
.home-step-panel { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:44px; padding:28px; border:1px solid var(--home-line); border-radius:4px; background:var(--home-white); }
.home-steps { display:grid; gap:24px; }
.home-step-heading { grid-column:2; display:flex; align-items:baseline; justify-content:flex-start; gap:14px; align-self:end; padding-top:75px; text-align:left; }
.home-step-heading>span { font-size:23px; font-weight:500; color:var(--home-accent); }
.home-step-heading h3 { font-size:28px!important; text-align:left; }
.home-step-panel>p { grid-column:2; margin:0; font-size:19px!important; }
.home-step-image { grid-column:1; grid-row:1 / 3; height:430px; margin:0; background:#fff; border:1px solid #d2e1e1; padding:10px; }
.home-step-image a,.home-step-image picture { display:block; width:100%; height:100%; }
.home-step-image img { display:block; width:100%; height:100%; object-fit:contain; }
.home-step-image a { cursor:zoom-in; }
.home-page .home-preview-note { font-size:15px; margin:18px 0 0; }
.home-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:30px; }
.home-benefits article { min-width:0; }
.home-benefit-art { margin:0 0 24px; }
.home-benefit-art img { display:block; width:100%; height:auto; border-radius:4px; }
.home-benefits h3 { font-size:24px!important; margin-bottom:14px!important; }
.home-benefits p { font-size:18px!important; margin:0; line-height:1.7!important; }
.home-demo { display:grid; grid-template-columns:.85fr 1.15fr; gap:42px; align-items:center; }
.home-demo>div { min-width:0; }
.home-demo video { display:block; width:auto; max-width:100%; height:auto; max-height:min(64vh,520px); margin:0; justify-self:center; object-fit:contain; background:#fff; border:1px solid var(--home-line); border-radius:4px; }
.home-page .home-demo-caption { font-size:15px; margin-top:14px; }
.home-signup-layout { display:flex; align-items:center; justify-content:space-between; gap:32px; background:var(--home-white); border:1px solid var(--home-line); border-radius:4px; padding:32px; }
.home-page .home-signup-copy { font-size:22px; color:var(--home-ink); margin:0; }
.home-signup-layout h2 { margin-bottom:14px!important; }
.home-signup-layout>.home-button { flex-shrink:0; }
/* Native modal keeps image previews, keyboard focus and closing on this page. */
html:has(.home-page) { scrollbar-gutter:stable; }
@media(max-width:1099px) {
 .home-width { width:calc(100% - 48px); }
 .home-hero { gap:28px; }
 .home-page main h1 { font-size:clamp(40px,4.8vw,52px); }
 .home-step-panel { column-gap:24px; padding:20px; grid-template-columns:1.6fr 1fr; }
 .home-step-image { height:360px; }
 .home-step-heading { padding-top:40px; }
 .home-step-heading h3 { font-size:24px!important; }
 .home-step-tabs button { font-size:17px; padding:16px 10px; gap:10px; }
 .home-benefits { gap:24px; }
 .home-demo { grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:700px) {
 .home-width { width:calc(100% - 36px); }
 .home-hero { grid-template-columns:1fr; padding-block:38px; gap:24px; }
 .home-page main h1 { font-size:clamp(38px,8vw,48px); }
 .home-page main h2 { font-size:30px; }
 .home-chapter { padding-block:42px; }
 #how-it-works { margin-top:24px; padding-block:36px 42px; }
 .home-section-heading { display:block; }
 .home-section-heading>.home-text-link { margin-top:20px; }
 .home-step-tabs { gap:6px; margin-bottom:20px; }
 .home-step-tabs button { display:block; padding:12px 8px; font-size:15px; line-height:1.4; }
 .home-step-tabs button>span { display:block; font-size:20px; margin-bottom:6px; }
 .home-step-panel { display:flex; flex-direction:column; padding:16px; }
 .home-step-heading { padding-top:0; align-self:stretch; }
 .home-step-heading h3 { font-size:24px!important; }
 .home-step-panel>p { font-size:18px!important; margin-bottom:24px; }
 .home-step-image { height:250px; order:2; }
 .home-benefits,.home-demo { grid-template-columns:1fr; }
 .home-benefits { gap:38px; }
 .home-benefit-art { max-width:500px; margin-bottom:22px; }
 .home-demo video { max-height:440px; }
 .home-signup-layout { flex-direction:column; align-items:flex-start; padding:24px; gap:22px; }
 .home-page .home-signup-copy { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .home-canvas * { scroll-behavior:auto!important; } }
/* Phone layout: one clear reading column, consistent cards and restrained images. */
@media(max-width:700px) {
 .home-width { width:calc(100% - 40px); }
 .home-hero { min-height:0; padding-block:24px 30px; gap:18px; align-content:start; }
 .home-hero-copy { display:contents; }
 .home-hero-copy>.home-kicker { order:0; }
 .home-hero-copy>h1 { order:1; }
 .home-hero-copy>.home-intro { order:2; }
 .home-desk { order:3; }
 .home-actions { order:4; }
 .home-hero-footnote { order:5; }
 .home-page main h1 { font-size:clamp(30px,8vw,36px); line-height:1.12; margin:0; }
 .home-page .home-hero .home-intro { font-size:14px; line-height:1.55; margin:0; }
 .home-page main h2 { font-size:28px; line-height:1.2; margin:12px 0 24px; }
 .home-page #process-title { font-size:25px; line-height:1.25; }
 .home-page main p { font-size:16px; line-height:1.65; }
 .home-page .home-kicker { font-size:13px; }
 .home-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
 .home-button { width:100%; box-sizing:border-box; font-size:16px; padding:14px 18px; }
 .home-actions :is(.home-button,.home-text-link) { display:flex; align-items:center; justify-content:center; min-height:54px; padding:10px 8px; font-size:13px; line-height:1.35; text-align:center; gap:6px; border-radius:4px; box-sizing:border-box; text-decoration:none; }
 .home-actions .home-text-link { border:1px solid var(--home-line); background:var(--home-white); }
 .home-page .home-hero-footnote { font-size:12px; text-align:center; margin:0; }
 .home-desk { width:calc(100% + 24px); max-width:none; margin:0 -12px; }
 .home-desk,.home-step-image,.home-benefit-art { transform:none!important; }
 .home-chapter { padding-block:36px; }
 #how-it-works { margin-top:0; padding-block:36px; border-top:1px solid var(--home-line); }
 .home-section-heading { margin-bottom:24px; }
 .home-section-heading>.home-text-link { font-size:15px; margin-top:16px; }
 .home-page .home-preview-note { font-size:13px; margin:14px 0 0; }
 .home-benefits { gap:16px; margin-top:0; }
 .home-benefits article { display:flex; flex-direction:column; padding:20px; background:var(--home-white); border:1px solid var(--home-line); border-radius:8px; }
 .home-benefits h3 { order:0; font-size:22px!important; margin:0 0 12px!important; }
 .home-benefit-art { order:1; width:100%; max-width:260px; align-self:center; margin:0 0 14px; }
 .home-benefits p { order:2; font-size:16px!important; line-height:1.65!important; }
 .home-demo { gap:24px; }
 .home-demo video { width:100%; max-width:360px; max-height:440px; }
 .home-page .home-demo-caption { font-size:13px; }
 .home-signup-layout { padding:22px; gap:22px; border-radius:8px; }
 .home-signup-layout h2 { font-size:28px; }
 .home-page .home-signup-copy { font-size:17px; }
}

.home-benefits .home-benefit-art { height:220px; }
.home-benefits .home-benefit-art img { height:100%; object-fit:contain; }
.home-benefits article>a { display:inline-block; margin-top:12px; color:var(--home-accent); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:600px) {
 .home-step-image,.home-step-image a,.home-step-image picture { height:auto; }
 .home-step-image img { height:auto; }
}