/* The homepage is one continuous story; the configurator remains a separate view. */
.home-composed [id]{scroll-margin-top:104px}
.home-composed .scroll-recognition,.home-composed .scroll-method,.home-composed .scroll-difference{margin:0 var(--page-edge);padding:88px 0;border-top:1px solid var(--ui-line)}
.scroll-recognition{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.home-composed .scroll-recognition h2{font-size:clamp(36px,4.2vw,60px);font-weight:400;max-width:19ch;line-height:1.14}
.home-composed .scroll-recognition p{font-size:18px;margin:0;max-width:49ch}
.home-composed .scroll-section-title{margin-bottom:48px}
.home-composed .method-overview{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;padding-bottom:64px}
.home-composed .method-overview>section{border-top:1px solid var(--ui-line);padding-top:20px;min-width:0;display:flex;flex-direction:column}
.home-composed .method-index{font-size:14px;color:var(--ui-muted);margin-bottom:24px}
.home-composed .method-column-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.home-composed .method-column-title h2{font-size:20px;font-weight:500;letter-spacing:-.03em}
.home-composed .method-column-title a{color:inherit;text-decoration:none}
.home-composed .method-column-title>a,.home-composed .method-column-title>span{font-size:12px;color:var(--ui-muted)}
.home-composed .method-overview p{font-size:14px;margin:16px 0 24px}
.home-composed .method-terms{font-size:12px;margin-top:auto}
.home-composed .method-overview>.method-payoff{border-top:2px solid var(--ui-ink)}
.home-composed .method-session{padding:56px 0;border-top:1px solid var(--ui-line)}
.home-composed .method-label h2{font-size:18px;margin-bottom:32px;letter-spacing:-.02em}
.home-composed .method-session-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:center}
.home-composed .method-copy h3{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1.2;margin:0 0 24px}
.home-composed .method-copy p{max-width:49ch;margin:0 0 20px}
.home-composed figure{margin:0;min-width:0}
.home-composed figure img{width:100%;height:auto;display:block;border:1px solid var(--ui-line);border-radius:8px}
.home-composed figcaption{font-size:12px;color:var(--ui-muted);margin-top:12px}
.visualize-placeholder>div{aspect-ratio:800/360;border:1px dashed var(--ui-muted);border-radius:8px;background:var(--ui-surface);display:grid;place-items:center;color:var(--ui-muted);font-size:14px}
.home-composed .draft-copy{color:var(--ui-muted);font-style:italic}
.difference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:48px 0}
.difference-grid article{border-top:1px solid var(--ui-line);padding-top:24px}
.difference-grid h3{font-size:24px;line-height:1.3;letter-spacing:-.025em;font-weight:500;margin:0 0 20px}
.difference-grid p{margin:0}
shape-dot-field{display:block;pointer-events:none;min-width:0}shape-dot-field svg{display:block;width:100%;height:auto}
@media(max-width:1100px){.home-composed .method-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.scroll-recognition{gap:40px}.home-composed .method-session-grid{gap:40px}.difference-grid{gap:24px}}
@media(max-width:700px){.home-composed .scroll-recognition,.home-composed .scroll-method,.home-composed .scroll-difference{padding:48px 0}.scroll-recognition,.home-composed .method-session-grid,.difference-grid{grid-template-columns:1fr;gap:28px}.home-composed .scroll-recognition p{font-size:16px}.home-composed .method-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-bottom:40px}.home-composed .method-index{margin-bottom:12px}.home-composed .method-session{padding:40px 0}.difference-grid{margin:32px 0}.home-composed .scroll-section-title{margin-bottom:32px}}
@media(max-width:380px){.home-composed .method-overview{grid-template-columns:1fr}}

/* Recognition and method: a contained statement and a restrained type hierarchy. */
.home-composed .scroll-recognition{
 display:flex;flex-direction:column;gap:24px;align-items:center;
 background:var(--ui-surface);border:0;padding:64px 32px;text-align:center;
}
.home-composed .scroll-recognition h2{
 font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-.035em;
 width:100%;max-width:38ch;margin:0;text-wrap:balance;
}
.home-composed .scroll-recognition .recognition-intro span{display:block}
.home-composed .scroll-recognition p{font-size:18px;font-weight:400;line-height:1.6;max-width:60ch;margin:0;text-wrap:balance}
.home-composed .scroll-method{border:0;padding:64px 0 32px}
.home-composed .scroll-difference{border-top:0}
.home-composed .scroll-section-title,.home-composed .method-copy h3{
 font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-.035em;
}
.home-composed .scroll-section-title{margin:0 0 32px}
.home-composed .method-overview{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;padding-bottom:32px}
.home-composed .method-overview>section{border:0;padding:0}
.home-composed .method-index{font-size:14px;line-height:1.5;margin-bottom:12px}
.home-composed .method-column-title h3{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:0;margin:0}
.home-composed .method-column-title a:hover{text-decoration:underline;text-underline-offset:4px}
.home-composed .method-overview p,.home-composed .method-copy p{font-size:18px;font-weight:400;line-height:1.6;letter-spacing:0;margin:8px 0 0}
.home-composed .method-session{border:0;padding:32px 0}
.home-composed .method-copy h3{margin:0 0 20px}
.home-composed .method-session-grid{gap:48px}
.home-composed .method-session figcaption{font-size:14px;line-height:1.5}
@media(max-width:1100px){.home-composed .method-overview{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .home-composed .scroll-recognition{padding:40px 24px;gap:20px}
 .home-composed .scroll-recognition h2,.home-composed .scroll-section-title,.home-composed .method-copy h3{font-size:32px}
 .home-composed .scroll-method{padding:40px 0 16px}
 .home-composed .method-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:16px}
 .home-composed .method-session{padding:24px 0}
 .home-composed .method-session-grid{gap:24px}
}
@media(max-width:480px){.home-composed .method-overview{grid-template-columns:1fr}.home-composed .method-index{margin-bottom:4px}}

/* Rules and aligned commercial notes give the process its graphic structure. */
.home-composed .method-overview>section{border-top:1px solid var(--ui-line);padding-top:20px}
.home-composed .method-overview .method-terms{font-size:14px;font-weight:400;line-height:1.5;color:var(--ui-ink);margin-top:auto;padding-top:24px}

/* Four contained demonstrations, with equal media padding and no section rule. */
.home-composed .feature-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:32px}
.home-composed .feature-card{display:flex;flex-direction:column;min-width:0;padding:24px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:4px}
.home-composed .feature-card h3{font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-.035em;margin:0 0 16px}
.home-composed .feature-card p{font-size:18px;line-height:1.6;margin:0 0 20px}
.home-composed .feature-media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/1;margin: auto 0 0;padding:16px;border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-white);overflow:hidden}
.home-composed .feature-media img{display:block;width:100%;height:100%;object-fit:contain;min-width:0}
.home-composed .demo-motion{cursor:pointer;padding-bottom:44px}
.home-composed .motion-label{position:absolute;bottom:12px;right:16px;font:500 14px/1.5 Poppins,Arial,sans-serif;color:var(--ui-muted)}
@media(max-width:700px){.home-composed .feature-cards{grid-template-columns:1fr;gap:20px;padding-top:24px}.home-composed .feature-card{padding:24px}.home-composed .feature-card h3{font-size:32px}}

/* Full-width recognition and staggered feature columns. */
.home-composed .scroll-recognition{margin-left:0;margin-right:0;padding-left:var(--page-edge);padding-right:var(--page-edge)}
.home-composed .feature-column{display:flex;flex-direction:column;gap:24px;min-width:0}
.home-composed .feature-card h3{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:0;margin-bottom:8px}
.home-composed .feature-configure .feature-media{aspect-ratio:4/3}
.home-composed .feature-configure .feature-media img{object-fit:contain;object-position:center}
.home-composed #visualize .feature-media{padding:0;aspect-ratio:2/1}
@media(max-width:700px){.home-composed .feature-column{gap:20px}.home-composed .feature-configure .feature-media{aspect-ratio:2460/1492}.home-composed .feature-configure .feature-media img{object-fit:contain}}

.home-composed .feature-action{flex-direction:row;align-items:center;justify-content:flex-start;min-height:132px}
@media(max-width:700px){.home-composed .feature-action{min-height:112px}}

/* Brand recognition and compact media windows; primary actions retain their ink treatment. */
.home-composed .scroll-recognition{background:var(--ui-surface);color:var(--ui-ink)}
.home-composed .scroll-recognition p{color:var(--ui-ink)}
.home-composed #visualize .feature-media img{object-fit:cover;object-position:center 60%}
.home-composed .feature-action{min-height:112px}

/* End the white edge fade before the cyan contour so its brand color stays solid. */
.home-dot-environment:after{background:linear-gradient(90deg,rgba(255,255,255,.5),transparent 14%)}

/* Closing differentiators use the established heading and body sizes. */
.home-composed .scroll-difference{padding:48px 0 64px}
.home-composed .scroll-difference>h2{font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-.035em}
.home-composed .difference-grid{gap:32px;margin:32px 0}
.home-composed .difference-grid article{padding-top:20px}
.home-composed .difference-grid h3{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:0;margin:0 0 8px}
.home-composed .difference-grid p{font-size:18px;font-weight:400;line-height:1.6;margin:0}
@media(max-width:700px){.home-composed .scroll-difference{padding:40px 0 48px}.home-composed .scroll-difference>h2{font-size:32px}.home-composed .difference-grid{gap:24px}}

/* Compact tool previews expand into an accessible native dialog. */
.home-composed .tools-section{padding-top:16px}
.home-composed .tools-section .feature-cards{padding-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.home-composed .tools-section .feature-card{position:relative;padding:24px;overflow:hidden}
.home-composed .tools-section .feature-card h3{padding-right:48px}
.home-composed .tools-section .feature-card>p{display:none}
.home-composed .tools-section .feature-media,.home-composed .tools-section .feature-configure .feature-media,.home-composed .tools-section #visualize .feature-media{height:200px;aspect-ratio:auto;margin-top:24px;padding:12px;border:0;background:var(--ui-white)}
.home-composed .tools-section .demo-motion{padding-bottom:36px}
.home-composed .tools-section #visualize .feature-media{padding:0}
.home-composed .tools-section .feature-media img{object-fit:contain}
.home-composed .tools-section #visualize img{object-fit:cover}
.tool-expand{position:absolute;right:16px;top:16px;width:44px;height:44px;border:1px solid var(--ui-line);border-radius:4px;background:var(--ui-white);color:var(--ui-ink);font:500 18px Poppins;cursor:pointer}
.tool-expand:hover{background:var(--ui-hover)}
.tools-action{padding-top:24px}
#toolDialog{width:min(1100px,calc(100vw - 40px));max-width:1100px;max-height:90vh;padding:32px;overflow:auto}
#toolDialog h2{font:400 40px/1.15 Poppins;letter-spacing:-.035em;margin:0 48px 20px 0}
#toolDialog p{font:400 18px/1.6 Poppins;color:var(--ui-muted);margin:0 0 24px}
#toolDialogMedia img{display:block;width:100%;max-height:65vh;object-fit:contain}
@media(max-width:700px){.home-composed .tools-section .feature-cards{grid-template-columns:1fr}.home-composed .tools-section .feature-media{height:180px}#toolDialog{padding:24px}#toolDialog h2{font-size:32px}}

/* Six sequential steps: a single desktop row, a compact narrow-screen list. */
.home-composed .method-overview{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.home-composed .tools-section .feature-card>p{display:block;font-size:18px;line-height:1.6;margin:0}
.home-composed .tools-section .demo-motion{padding:12px;cursor:default}
.home-composed .scroll-difference>h2{text-align:center}
.home-composed .difference-statements{text-align:center;margin:24px 0}
.home-composed .difference-statements p{font-size:18px;line-height:1.6;color:var(--ui-ink);margin:0}
@media(max-width:1100px){
 .home-composed .method-overview{grid-template-columns:1fr;gap:0}
 .home-composed .method-overview>section{display:grid;grid-template-columns:32px minmax(140px,.7fr) minmax(0,1.3fr);gap:4px 20px;padding:16px 0}
 .home-composed .method-index{grid-column:1;grid-row:1/3;margin:4px 0 0}
 .home-composed .method-column-title{grid-column:2;grid-row:1}
 .home-composed .method-overview p{grid-column:3;grid-row:1;margin:0}
 .home-composed .method-overview .method-terms{grid-column:3;grid-row:2;padding-top:4px;margin:0}
}
@media(max-width:560px){
 .home-composed .method-overview>section{grid-template-columns:24px minmax(0,1fr);gap:4px 12px}
 .home-composed .method-overview p{grid-column:2;grid-row:2}
 .home-composed .method-overview .method-terms{grid-column:2;grid-row:3}
}

/* Five cards follow the supplied composition, with uncropped media. */
.home-composed .tools-section .feature-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,344.4px) auto;align-items:stretch;gap:24px}
.home-composed .tools-section .feature-configure{grid-column:1;grid-row:1/3}
.home-composed .tools-section #programming{grid-column:2;grid-row:1}
.home-composed .tools-section #blocking{grid-column:2;grid-row:2}
.home-composed .tools-section #visualize{grid-column:1;grid-row:3}
.home-composed .tools-section .feature-cta{grid-column:2;grid-row:3;align-items:center;justify-content:center}
.home-composed .tools-section .feature-media,.home-composed .tools-section .feature-configure .feature-media,.home-composed .tools-section #visualize .feature-media{height:auto;aspect-ratio:auto;padding:0;margin:20px 0 0;flex:none;background:white}
.home-composed .tools-section .feature-media img,.home-composed .tools-section #visualize img{display:block;width:100%;height:auto;object-fit:contain}
.home-composed .tools-section .feature-configure .feature-media{margin:auto 0;}
@media(max-width:700px){
 .home-composed .tools-section .feature-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
 .home-composed .tools-section .feature-cards>.feature-card,
 .home-composed .tools-section #programming,
 .home-composed .tools-section #blocking,
 .home-composed .tools-section #visualize{grid-column:1;grid-row:auto}
 .home-composed .tools-section .feature-configure .feature-media{margin-top:20px}
 .home-composed .tools-section .feature-cta{min-height:160px}
}

/* Full container width; preview scale is independent of card width. */
.home-composed .tools-section .feature-cards{width:100%;max-width:none;margin-inline:0}
.home-composed .tools-section .feature-media{height:180px;min-height:0;flex:0 1 180px;max-width:560px;align-self:center;background:transparent}
.home-composed .tools-section .feature-media img{width:100%;height:100%;object-fit:contain}
.home-composed .tools-section .feature-configure .feature-media{height:0;flex:1 1 0;max-width:none;margin:20px 0 0;align-self:center}
.home-composed .tools-section .feature-configure .feature-media{background:transparent}
.home-composed .tools-section .feature-configure .feature-media img{transform:scale(.9);transform-origin:center;mix-blend-mode:multiply}
.home-composed .tools-section #visualize .feature-media{height:200px;max-width:560px;aspect-ratio:auto;overflow:hidden;align-self:center}
.home-composed .tools-section #visualize .feature-media img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
.home-composed .tools-section .feature-cta{align-self:stretch;min-height:160px}
@media(max-width:700px){
 .home-composed .tools-section .feature-configure .feature-media{height:auto;flex:none;max-width:none}
 .home-composed .tools-section .feature-configure .feature-media img{height:auto}
}

/* Reveal the recognition heading, with the original artwork scaled as one unit. */
@media(min-width:851px){
 .home-composed .home-hero{min-height:max(660px,calc(100svh - var(--site-header-height,92px) - var(--recognition-peek,164px)))}
 .home-composed .home-dot-environment{top:50%;transform:translateY(-50%)}
}

/* Final home-page typography and component detailing. */
@media(min-width:851px){header #mobileMenu{display:none}
header #mainNav{display:flex;position:static;width:auto;padding:0;border:0;box-shadow:none;background:transparent}
header{flex-wrap:nowrap}}
.home-composed .method-overview{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-composed .method-required{display:inline-block;font-style:normal;font-size:11px;font-weight:500;color:var(--ui-accent);border:1px solid var(--ui-accent);border-radius:3px;padding:2px 7px;margin-left:8px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;line-height:1.4;white-space:nowrap}
.home-composed .tools-section .feature-card{border-radius:4px}
.home-composed .tools-section .feature-media{border-radius:4px}
.home-composed .tools-section .feature-cta{text-align:center;gap:16px}
.home-composed .tools-section .feature-cta h3{padding:0;margin:0}
.home-composed .tools-section .feature-cta p{max-width:32ch}
#toolDialog{border-radius:4px;padding:40px}
#toolDialog h2{padding-right:56px}
#toolDialog .close{top:16px;right:16px;width:44px;height:44px;border-radius:2px;display:grid;place-items:center}
#toolDialog .close:focus-visible{outline:2px solid var(--ui-ink);outline-offset:2px;box-shadow:none}
#toolDialogMedia{border-radius:4px;overflow:hidden}
header .logo:after{content:'';position:absolute;right:0;top:0;width:12px;height:12px;background:#00bbdc;clip-path:polygon(0 0,100% 0,100% 100%);mix-blend-mode:screen;pointer-events:none}
@media(max-width:1100px){.home-composed .method-overview{grid-template-columns:1fr}}
@media(max-width:560px){header .brand{gap:10px}header #mainNav .navcta{padding:10px 12px}header #mainNav .navcta{gap:8px;font-size:12px}header .brand{flex-shrink:0}header #mainNav{min-width:0}header #mainNav .navcta span{display:inline}#toolDialog{padding:24px}}

/* Configurator: heading, explanation, then controls in every phase. */
#configure #form fieldset{padding:0 0 32px;margin:0 0 32px}
#configure #form legend{font-size:18px;line-height:1.6;margin-bottom:20px;padding:0}
#configure .config-intro{margin:0 0 24px}
#configure .config-intro .module-help,#configure .config-intro .space-note{font-size:16px!important;line-height:1.6;margin:0}
#configure .config-intro p+p{margin-top:12px!important}
#configure #form label,#configure #form .option strong,#configure #form .program-choices label,#configure #form .space-title,#configure #form .space-price{font-size:16px;line-height:1.6}
#configure #form .option small,#configure #form .program-choices small{font-size:16px!important;line-height:1.6;margin-top:4px}
#configure #form .program-choices{margin:0;gap:12px}
#configure #form .program-choices label,#configure #form .option{padding:16px 20px}
#configure #form fieldset>label:not(.option){display:block;margin:0 0 8px;font-weight:500}
#configure #form .space-card:first-child{margin-top:0;padding-top:20px}
#configure #form .area-picker{margin-top:8px}
#configure #form .area-picker-trigger,#configure #form .area-picker-option{font-size:16px;line-height:1.5}

#email-draft{width:100%;padding:12px;border:1px solid var(--ui-line);border-radius:4px;font:14px/1.6 Poppins,Arial,sans-serif;resize:vertical}

/* Approved PNG lockup: crop exterior transparency without altering the artwork. */
header .brand{display:block;position:relative;width:246px;height:48px;overflow:hidden;flex-shrink:0}
header .brand .brand-lockup{position:absolute;display:block;width:284px;height:auto;max-width:none;left:-19px;top:-23px}
@media(max-width:560px){
 header .brand{width:178px;height:36px}
 header .brand .brand-lockup{width:204px;left:-13px;top:-16px}
}

.home-composed .scroll-recognition .recognition-highlight{color:#00bbdc}

/* Configurator recording: original colors, no extra media frame. */
.home-composed .tools-section .feature-configure .feature-media{border:0;border-radius:0;background:transparent;padding:0;box-shadow:none;overflow:visible}
.feature-configure video{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:none;transform:none}
#toolDialogMedia video{display:block;width:100%;max-height:65vh;object-fit:contain;background:transparent}
@media(max-width:700px){.feature-configure video{height:auto;max-height:600px}}

.home-composed .tools-section .feature-configure .recording-preview img{transform:none;mix-blend-mode:normal;filter:none}

/* Deliberate desktop lines; natural wrapping on smaller screens. */
.recognition-break{display:none}
@media(min-width:1100px){
 .home-composed .scroll-recognition p{max-width:none;text-wrap:initial}
 .recognition-break{display:initial}
}