.flow-tile{padding:0;border:1px solid #eeede780;color:inherit;font:inherit;cursor:pointer}.flow-tile:focus-visible{outline:3px solid #eeede7;outline-offset:6px;z-index:9}.founder-section{scroll-margin-top:84px}.founder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.founder-grid article{border-top:1px solid var(--line);padding-top:24px;position:relative}.founder-grid h3{font-size:clamp(28px,4vw,48px);letter-spacing:-.05em;margin:12px 0 20px}.founder-grid p:not(.eyebrow){max-width:480px;line-height:1.65;color:var(--muted)}.founder-initial{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid #ff5b184d;color:var(--orange);font-size:40px;margin-bottom:24px}.business-story{margin-top:32px;padding:28px;border:1px solid var(--line);background:#191917;display:grid;grid-template-columns:1fr 1.3fr;gap:16px 32px}.business-story .eyebrow{grid-column:1/-1}.business-story h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;line-height:1.1;margin:0}.business-story p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.6}.business-story a{grid-column:2}.project-caption .project-story{font-size:14px;line-height:1.6;letter-spacing:0;text-transform:none;max-width:600px;margin-top:12px}.work-enquiry{display:inline-flex;margin:0 0 24px;min-height:44px;align-items:center}#product-dialog{color:var(--paper);background:#171918;border:1px solid #eeede747;border-radius:6px;width:min(600px,calc(100% - 32px));max-height:calc(100svh - 32px);padding:24px;overflow:auto}#product-dialog::backdrop{background:#080b0cce;backdrop-filter:blur(8px)}.product-dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.product-dialog-head p{margin:0}.product-dialog-head button{background:none;color:var(--paper);border:1px solid var(--line);padding:10px 14px;min-height:44px}#product-dialog-image{width:100%;height:clamp(150px,32svh,280px);object-fit:contain;background:#111413;border-radius:3px}#product-dialog h2{font-size:36px;letter-spacing:-.04em;margin:24px 0 12px}#product-dialog-description{color:var(--muted);line-height:1.6}#product-dialog-link{margin-top:12px;min-height:44px}
@media(max-width:760px){.founder-grid,.business-story{grid-template-columns:1fr}.business-story a{grid-column:1}.business-story{padding:20px}}



.submission-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Give only the opening cloud dissolve more native-scroll distance. */
.launch-journey{height:400svh}@media(max-width:760px){.launch-journey{height:340svh}}@media(prefers-reduced-motion:reduce){.launch-journey{height:100svh}}
/* A faint studio signature stays behind content, without intercepting controls. */
.robot-stage::before,.section:not(.startup)::before{content:'MyKoala';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(90px,20vw,330px);line-height:1;font-weight:600;letter-spacing:-.07em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #efeee408;pointer-events:none;z-index:-1;user-select:none}.section:not(.startup){position:relative;isolation:isolate}.robot-stage::before{top:60%;z-index:0}.robot-grid,.robot-visual{z-index:1}.section:not(.startup)>.wrap{position:relative;z-index:1}
/* Mobile and tablet give Koda a centred introduction followed immediately by its face. */
@media(max-width:900px){
 .robot-stage{height:100svh;min-height:0}
 .robot-copy{top:96px;left:24px;right:24px;max-width:none;text-align:center}
 .robot-copy h2{font-size:clamp(44px,11vw,64px);line-height:1;margin:0 0 12px}
 .robot-copy h2 br{display:inline-block;width:.2em}
 .robot-copy>p:last-child{font-size:12px;line-height:1.5;margin:0 auto;max-width:34ch}
 .robot-copy>p:last-child br{display:inline-block;width:.25em}
 .robot-visual{width:min(210%,1000px);height:calc(100% - 258px);left:50%;right:auto;top:226px;bottom:auto;transform:translateX(-50%) scale(var(--robot-scale,1));transform-origin:50% 30%}
 .robot-visual img{object-position:center top}
 .robot-foot{bottom:16px;left:24px;right:24px;gap:14px;font-size:9px}
 .robot-foot .text-link{font-size:11px;max-width:170px}
 .section{padding:32px 24px}
 .section-heading{align-items:center;text-align:center;gap:16px;margin-bottom:24px}
 .section-heading>div{width:100%}
 .section-heading>p{max-width:42ch}
 .section-heading h2,.contact-copy h2{font-size:clamp(34px,9vw,56px)}
 .startup .startup-copy,.startup> .wrap>div:first-child{text-align:center}
 .startup .startup-copy p,.startup> .wrap>div:first-child p{margin-inline:auto}
 .pricing-heading,.ops-heading{text-align:center;gap:20px}
 .pricing-heading>p,.ops-heading>p{margin-inline:auto}
 .contact-copy h2,.contact-copy>.eyebrow{text-align:center}
 .founder-grid{gap:24px}
 .robot-stage::before,.section:not(.startup)::before{font-size:25vw;-webkit-text-stroke-color:#efeee408}
}
@media(max-width:900px) and (max-height:600px){
 .robot-stage{height:100svh;min-height:320px}
 .robot-copy{top:74px;left:16px;right:16px}
 .robot-copy h2{font-size:30px;margin-bottom:7px}
 .robot-copy>p:last-child{font-size:10px;max-width:55ch;line-height:1.35}
 .robot-visual{top:140px;height:calc(100% - 177px);width:100%;transform-origin:50% 20%}
 .robot-foot{left:16px;right:16px;bottom:5px;align-items:center}
 .robot-foot>span{font-size:8px}
 .robot-foot .text-link{font-size:10px;min-height:30px}
 .section{padding-block:32px}
}
@media(prefers-reduced-motion:reduce) and (max-width:900px){.robot-stage{height:100svh;min-height:0}.robot-visual{transform:translateX(-50%)}}

/* Phone app identities form a continuous row below the clear brand; desktop keeps its orbit. */
.flow-mobile-rail{display:contents}
@media(max-width:760px){
 .app-flow{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:90px 0 100px}
 .flow-type{position:relative;inset:auto;width:100%;gap:8px;flex-shrink:0}
 .flow-intro{position:relative;inset:auto;margin:0 24px;flex-shrink:0}
 .flow-intro p:first-child{font-size:14px}
 .flow-intro p:nth-child(2){font-size:12px}
 .flow-paths{display:none}
 .flow-mobile-rail{position:relative;display:block;width:100%;height:80px;flex-shrink:0;overflow:hidden;z-index:3}
 .flow-mobile-rail .flow-tile{width:68px;border-radius:16px}
}
@media(max-width:760px) and (max-height:650px){
 .app-flow{padding-top:76px;padding-bottom:72px;gap:10px}
 .flow-type h1,.flow-type .outline-name{font-size:20vw}
 .flow-intro p:first-child{font-size:12px;margin-bottom:6px}
 .flow-intro p:nth-child(2){margin-bottom:10px}
 .flow-mobile-rail{height:74px}
}
/* Readable utility type and touchable controls, without changing display artwork. */
.header-link,.skip-intro,.text-link,.pause-button,.menu-button,.gallery-select button,.preview-controls button,.footer a,#clear-package,.cleanos-film-controls button{min-height:44px}
.header-link,.skip-intro,.text-link,.footer a{display:inline-flex;align-items:center}
.menu-button{min-width:44px}
@media(max-width:768px){
 .eyebrow,.brand-name,.header-link,.menu-button,.menu-button span,.chapter-label,.pause-button,.skip-intro,.status,.robot-foot,.robot-foot>span,.robot-foot .text-link,.gallery-select button,.project-caption>p:not(.project-story),.footer,.footer span,.footer a,.closing-scene .button,.cleanos-film-controls,.cleanos-film-controls span,.cleanos-source-note,.cleanos-workflow small,.cleanos-preview figcaption,.startup figcaption,.pricing-section .package-category,.tools-caption,.launch-loader span{font-size:12px}
 .stage-bottom{align-items:center;gap:10px}
 .chapter-label{line-height:1.4;max-width:110px}
 .stage-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}
 .pause-button,.skip-intro{padding-inline:8px}
 .robot-foot{align-items:center;gap:12px;line-height:1.4}
 .robot-foot>span{max-width:130px}
 .robot-foot .text-link{font-size:12px;min-height:44px}
 .footer .wrap{gap:12px}
}
@media(max-width:900px) and (max-height:600px){.robot-copy>p:last-child,.robot-foot>span,.robot-foot .text-link{font-size:12px}.robot-foot .text-link{min-height:44px}.robot-visual{top:150px;height:calc(100% - 205px)}}
.project-caption h3 a{display:inline-flex;align-items:center;min-height:44px}
.picker input{inset:0;width:100%;height:100%;min-height:44px;cursor:pointer}
@media(max-width:768px){
 .launch-loader>span:last-child,.film-controls>span,.film-controls .pause-button,.tools-heading .pause-button,.startup p.cleanos-source-note,.project-caption>div>p:not(.project-story),.flow-intro p:first-child{font-size:12px}
 .launch-stage .flow-intro .button{min-height:44px}
 .film-controls .pause-button,.tools-heading .pause-button{min-height:44px}
}
@media(max-width:768px){.cleanos-source-note{font-size:12px!important}}
/* Keep the zoom inside a fixed visual window beneath the mobile introduction. */
@media(max-width:900px){
 .robot-visual{overflow:hidden;transform:translateX(-50%);transform-origin:50% 0%;z-index:1}
 .robot-visual img{transform:scale(var(--robot-scale,1));transform-origin:50% 0%;object-position:center top}
 .robot-copy{z-index:3}
}
@media(prefers-reduced-motion:reduce) and (max-width:900px){.robot-visual img{transform:none}}
@media(max-width:768px){.flow-intro p:nth-child(2){font-size:12px}}
.eyebrow,.brand-name,.header-link,.menu-button,.menu-button span,.chapter-label,.pause-button,.skip-intro,.status,.robot-foot,.robot-foot>span,.robot-foot .text-link,.gallery-select button,.project-caption>div>p:not(.project-story),.footer,.footer span,.footer a,.closing-scene .button,.film-controls>span,.film-controls .pause-button,.tools-heading .pause-button,.cleanos-workflow small,.cleanos-preview figcaption,.startup figcaption,.pricing-section .package-category,.tools-caption,.launch-loader>span:last-child{font-size:12px}
.cleanos-source-note{font-size:12px!important}
/* Reserve the actual copy height instead of assuming a fixed number of lines. */
@media(max-width:900px){
 .robot-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) max-content;row-gap:16px}
 .robot-copy{grid-row:1;grid-column:1;position:relative;top:auto;left:auto;right:auto;margin:96px 24px 0}
 .robot-visual{grid-row:2;grid-column:1;position:relative;top:auto;bottom:auto;left:50%;height:100%;min-height:0;align-self:stretch}
 .robot-foot{grid-row:3;grid-column:1;position:relative;bottom:auto;left:auto;right:auto;margin:0 24px;padding-bottom:16px}
}
@media(max-width:900px) and (max-height:600px){.robot-stage{row-gap:10px}.robot-copy{margin:74px 16px 0}.robot-foot{margin:0 16px;padding-bottom:5px}}