/* A single business, from the first conversation through the handoff. */
.code-intro{min-width:0;background:#151B2E;color:#F7F9FC;border-radius:5px;overflow:hidden;box-shadow:0 20px 55px #151B2E16}
.intro-film{height:405px;position:relative;overflow:hidden}
.film-scene,.intro-finale{position:absolute;inset:0;transition:opacity .65s,transform .65s}
.film-scene{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
.intro-ready[data-scene=idea] .film-idea{transition:none}
.intro-ready[data-scene=idea] .film-idea,.intro-ready[data-scene=design] .film-design,.intro-ready[data-scene=code] .film-code,.intro-ready[data-scene=cms] .film-cms,.intro-ready[data-scene=hosting] .film-hosting,.intro-ready[data-scene=handoff] .film-handoff{opacity:1;visibility:visible;transform:none}
.intro-story{min-height:91px;padding:20px 26px 12px;border-top:1px solid #34425C}
.intro-story p{font-size:13px;line-height:1.8;color:#D4E3EE;max-width:430px}
.intro-controls{display:flex;align-items:center;justify-content:space-between;padding:4px 26px 21px;gap:20px;min-height:57px}
.intro-controls button,.intro-controls a{background:none;border:0;border-bottom:1px solid #809FB7;color:#F7F9FC;font:11px/1.6 var(--sans);padding:6px 0}
.intro-controls a{margin-left:auto;display:flex;align-items:center;gap:13px}.intro-controls a:hover{color:#8EC5E8}
.code-intro .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.film-idea{display:flex;align-items:center;justify-content:center;background:#DFEAF3}
.idea-note{position:relative;width:79%;padding:28px;background:#FAF8F5;transform:rotate(-4deg);box-shadow:6px 13px 0 #ACC4D647;color:#151B2E}
.idea-note>span{font:italic 15px var(--serif);color:#3A668C}
.idea-note blockquote{font:26px/1.3 var(--serif);margin:24px 0 26px;letter-spacing:-.035em}
.note-sketch{display:flex;gap:15px;font-size:9px;color:#3A668C}.note-sketch span{padding:8px 0;border-bottom:1px solid #8FAABF}
.idea-pencil{position:absolute;height:200px;width:8px;bottom:20px;right:10%;background:#3A668C;transform:rotate(26deg);border-radius:2px}.idea-pencil:after{position:absolute;content:'';bottom:-14px;border:4px solid transparent;border-top:14px solid #B89873;left:0}
.film-design{display:flex;align-items:center;justify-content:center;background:#B9D0E1;padding:22px}
.film-browser{background:#FAF8F5;color:#151B2E;border-radius:4px;overflow:hidden;width:100%;box-shadow:0 12px 25px #151B2E1F;transition:width 1s,transform 1s}
.film-browser-bar{background:#EFF1F2;padding:9px 13px;font:8px var(--mono);border-bottom:1px solid #CED6DD;color:#526174}
.sample-nav{display:flex;justify-content:space-between;gap:10px;padding:17px 19px;font:18px var(--serif);border-bottom:1px solid #D7E1EB}.sample-nav>span{font:7px var(--sans);align-self:center}
.sample-page{display:grid;grid-template-columns:1.2fr 1fr;padding:25px 19px 28px;gap:15px}.sample-overline{font-size:7px;color:#3A668C}.sample-page strong{display:block;font:35px/1.05 var(--serif);letter-spacing:-.05em;margin-top:18px}.sample-page p{font-size:8px;line-height:1.8;margin-top:15px;max-width:190px}.sample-button{display:inline-block;font-size:7px;background:#151B2E;color:white;margin-top:18px;padding:9px 10px}
.desert-art{position:relative;overflow:hidden;background:#D6E4EE;border-radius:90px 90px 3px 3px;align-self:stretch;min-height:180px;transition:background .8s}.desert-sun{position:absolute;width:49px;height:49px;border-radius:50%;top:29px;right:21px;background:#8EC5E8}.desert-ridge{position:absolute;width:170%;height:120px;background:#749BB6;transform:rotate(38deg);bottom:-3px;left:5px}.desert-ground{position:absolute;width:170%;height:85px;background:#3A668C;transform:rotate(-16deg);bottom:-20px;left:-25px}
.film-design .sample-page strong,.film-design .sample-page p,.film-design .sample-button,.film-design .desert-art{transition:opacity .7s,filter .7s,background .7s}
.code-intro:not(.design-styled) .film-design .sample-page strong,.code-intro:not(.design-styled) .film-design .sample-page p{color:transparent;background:#D8DDE1;border-radius:2px}.code-intro:not(.design-styled) .film-design .sample-page strong em{color:transparent}.code-intro:not(.design-styled) .film-design .desert-art{filter:grayscale(1);opacity:.3}.code-intro:not(.design-styled) .film-design .sample-button{color:transparent;background:#D8DDE1}
.design-swatches{display:flex;gap:8px;position:absolute;bottom:17px;right:25px;transition:opacity .7s}.design-swatches span{width:15px;height:15px;border-radius:50%;background:#151B2E;border:2px solid #FAF8F5}.design-swatches span:nth-child(2){background:#3A668C}.design-swatches span:nth-child(3){background:#8EC5E8}.design-mobile .film-browser{width:220px;transform:rotate(2deg)}.design-mobile .sample-page{grid-template-columns:1fr;padding:17px}.design-mobile .sample-page strong{font-size:28px;margin-top:9px}.design-mobile .sample-page strong br{display:none}.design-mobile .sample-page p{margin-top:8px}.design-mobile .sample-button{margin-top:10px}.design-mobile .desert-art{min-height:72px;max-height:72px;border-radius:45px 45px 2px 2px}.design-mobile .sample-nav{font-size:14px;padding:11px 14px}.design-mobile .sample-nav>span{font-size:5px}.design-mobile .sample-page{gap:13px}.design-mobile .desert-sun{width:25px;height:25px;top:10px}.design-mobile .desert-ridge{height:60px;bottom:-30px}.design-mobile .desert-ground{height:45px;bottom:-35px}.design-mobile .design-swatches{opacity:0}
.code-file{padding:24px 25px 17px;border-bottom:1px solid #34425C;color:#AFCFE7;font:11px var(--mono)}
.film-code pre{margin:0;padding:18px 25px;font:clamp(9px,.95vw,12px)/1.65 var(--mono);color:#E8EFF7;white-space:pre-wrap;overflow-wrap:anywhere}.code-line{display:block;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s}.code-line.is-written{opacity:1;transform:none}.code-line b{color:#8EC5E8;font-weight:400}.code-line i{color:#C5DDB2;font-style:normal}
.request-receipt{display:flex;align-items:center;gap:13px;position:absolute;bottom:20px;left:25px;right:25px;border:1px solid #5D7F72;border-radius:3px;padding:14px;background:#243D3A;opacity:0;transform:translateY(13px);transition:opacity .7s,transform .7s}.request-arrived .request-receipt{opacity:1;transform:none}.receipt-check{width:16px;height:9px;border-left:2px solid #C5DDB2;border-bottom:2px solid #C5DDB2;transform:rotate(-45deg);margin-top:-4px}.request-receipt strong{display:block;font-size:11px;font-weight:500;color:#E3EEDF}.request-receipt div>span{display:block;font-size:9px;margin-top:5px;color:#C6D6D1}
.film-cms{display:flex;align-items:center;padding:24px;background:#D7E3EA}.cms-window{width:100%;border:1px solid #BDCDDA;background:#FAF8F5;border-radius:4px;box-shadow:0 12px 25px #151B2E10;color:#151B2E}.cms-window-heading{padding:17px 19px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #D7E1EB}.cms-window-heading strong{font:18px var(--serif)}.cms-window-heading>span{font-size:8px;color:#526174}.cms-editor{display:grid;grid-template-columns:88px 1fr;min-height:260px}.cms-sidebar{padding:18px 10px;border-right:1px solid #D7E1EB;display:flex;flex-direction:column;gap:6px;background:#EFF3F6;font-size:9px;color:#526174}.cms-sidebar span{padding:7px}.cms-sidebar .selected{background:#D9E6EF;color:#151B2E;border-radius:2px}.cms-edit-fields{min-width:0;padding:22px 19px}.cms-field-label{display:block;font-size:8px;margin-bottom:8px;color:#526174}.cms-field{min-height:47px;border:1px solid #B9CBD7;padding:11px;font-size:10px;margin-bottom:21px;line-height:1.6}.cms-title-after{display:none}.cms-edited .cms-title-before{display:none}.cms-edited .cms-title-after{display:block}.cms-edited .cms-field{border-color:#3A668C}.cms-project{display:flex;align-items:center;gap:10px;font-size:9px}.cms-project-art{width:39px;height:39px;background:linear-gradient(155deg,#D1E1EC 40%,#9CB6C4 40%,#9CB6C4 65%,#3A668C 65%);border-radius:3px;flex-shrink:0}.cms-publish{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:26px;font-size:7px}.cms-draft{color:#526174}.cms-published{display:none;color:#2E624C}.cms-publish-button{background:#151B2E;color:white;padding:9px}.code-intro.cms-saved .cms-draft{display:none}.code-intro.cms-saved .cms-published{display:block}.code-intro.cms-saved .cms-publish-button{background:#3A668C}
.film-hosting{padding:24px 39px;background:#1B2639;display:flex;flex-direction:column;align-items:center;justify-content:center}.hosting-source{display:flex;align-items:center;gap:15px;align-self:start}.file-mark{display:inline-flex;align-items:center;justify-content:center;font:20px var(--mono);color:#8EC5E8;border:1px solid #6688A1;border-radius:3px;width:45px;height:51px}.hosting-source strong{font-size:13px;font-weight:500;display:block}.hosting-source div>span{font-size:9px;color:#AFBFCF;display:block;margin-top:3px}.hosting-path{height:33px;border-left:1px dashed #8EC5E8;align-self:start;margin-left:22px}.hosting-account{width:100%;border:1px solid #6688A1;background:#24334A;border-radius:4px;overflow:hidden}.hosting-account-title{padding:16px 20px;border-bottom:1px solid #456078}.hosting-account-title strong{display:block;font-size:14px;font-weight:500}.hosting-account-title>span{display:block;color:#B8CADD;font-size:10px;margin-top:4px}.hosting-file{display:flex;justify-content:space-between;align-items:center;margin:13px 20px;color:#A6B9CC;font-size:10px;opacity:.4;transition:opacity .6s,color .6s}.hosting-file i{width:7px;height:7px;border:1px solid #8EC5E8;border-radius:50%}.hosting-file.is-ready{opacity:1;color:#E5EDF6}.hosting-file.is-ready i{background:#ABD5B9;border-color:#ABD5B9}.hosting-domain{font:12px var(--mono);margin-top:22px;opacity:0;transform:translateY(8px);color:#C5DDB2;transition:opacity .6s,transform .6s}.domain-connected .hosting-domain{opacity:1;transform:none}
.film-handoff{background:#DDE9F0;padding:29px 33px;display:flex;align-items:center}.handoff-site{width:71%;height:326px;background:#FAF8F5;box-shadow:0 10px 20px #151B2E10;border:1px solid #B8CCDA;border-radius:4px;overflow:hidden;position:relative;padding:18px 22px;color:#151B2E}.handoff-site>span{font:8px var(--mono);color:#526174;display:block;padding-bottom:16px;border-bottom:1px solid #D7E1EB}.handoff-site>strong{display:block;font:35px/1.08 var(--serif);letter-spacing:-.04em;margin-top:25px}.handoff-landscape{height:90px;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(154deg,#D1E1EC 32%,#A9C6D9 32%,#A9C6D9 59%,#3A668C 59%)}.handoff-folder{position:absolute;right:22px;bottom:40px;width:47%;padding:22px;background:#151B2E;border-radius:4px;box-shadow:0 13px 30px #151B2E26;opacity:0;transform:translate(20px,10px) rotate(5deg);transition:opacity .8s,transform .8s}.files-delivered .handoff-folder{opacity:1;transform:rotate(3deg)}.handoff-folder .file-mark{width:32px;height:38px;font-size:15px}.handoff-folder strong{display:block;color:#F7F9FC;font-size:13px;font-weight:500;margin-top:17px}.handoff-folder p{font-size:9px;line-height:1.8;color:#C5D6E5;margin-top:9px}
.intro-finale{display:flex;flex-direction:column;justify-content:center;padding:35px;background:#DFEAF3;z-index:2}.intro-finale h2{font-size:51px}.intro-finale>p{font-size:14px;line-height:1.85;margin-top:25px;max-width:340px}.intro-finale .finale-note{font-size:11px;max-width:290px;margin-top:18px}.intro-ready:not([data-scene=studio]) .intro-finale{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
.code-intro:not(.intro-ready) .intro-story{display:none}
@media(min-width:761px) and (max-width:1000px){.home-hero{grid-template-columns:1fr 1fr;gap:30px}.intro-film{height:390px}.idea-note{padding:21px}.idea-note blockquote{font-size:23px}.film-code pre{font-size:8px;padding-inline:18px}.request-receipt{left:18px;right:18px;padding:11px}.request-receipt strong{font-size:10px}.request-receipt div>span{font-size:8px}.sample-page{gap:8px;padding:20px 14px}.sample-page strong{font-size:28px}.sample-nav{padding-inline:14px;font-size:15px}.sample-nav>span{font-size:5px}.cms-editor{grid-template-columns:64px 1fr}.cms-sidebar{font-size:7px;padding:15px 5px}.cms-edit-fields{padding:18px 12px}.cms-publish{font-size:6px}.cms-publish-button{padding:7px}.film-cms{padding:17px}.film-hosting{padding-inline:25px}.handoff-site>strong{font-size:28px}.handoff-folder{padding:18px}.intro-finale{padding:27px}.intro-finale h2{font-size:43px}.intro-finale>p{font-size:12px}.intro-story{padding-inline:22px;min-height:104px}.intro-story p{font-size:11px}}
@media(max-width:760px){.code-intro{width:100%;max-width:520px}.intro-film{height:385px}.intro-story{min-height:106px;padding:19px 22px 10px}.intro-story p{font-size:12px}.intro-controls{padding:0 22px 18px;min-height:52px}.idea-note{padding:25px;width:80%}.idea-note blockquote{font-size:25px}.idea-note>span{font-size:13px}.film-design{padding:20px}.sample-page{padding:23px 17px;gap:10px}.sample-page strong{font-size:30px}.sample-nav{font-size:17px;padding-inline:17px}.sample-nav>span{font-size:6px}.desert-art{min-height:170px}.desert-sun{width:38px;height:38px;right:14px}.film-code pre{font-size:10px;padding:17px 20px}.code-file{padding:21px 20px 16px}.request-receipt{left:20px;right:20px;bottom:22px;padding:13px}.request-receipt strong{font-size:10px}.request-receipt div>span{font-size:8px}.film-cms{padding:20px}.cms-editor{grid-template-columns:65px 1fr}.cms-sidebar{font-size:8px;padding:15px 6px}.cms-edit-fields{padding:22px 14px}.cms-window-heading{padding:16px}.cms-field{font-size:9px;padding:9px}.cms-project{font-size:8px}.cms-publish{font-size:6px}.cms-publish-button{padding:8px}.film-hosting{padding:25px 30px}.hosting-source strong{font-size:12px}.hosting-account-title strong{font-size:13px}.hosting-domain{font-size:11px}.film-handoff{padding:27px}.handoff-site{padding:17px;height:310px;width:75%}.handoff-site>strong{font-size:30px}.handoff-folder{padding:20px;width:50%;right:20px}.handoff-folder strong{font-size:12px}.handoff-folder p{font-size:8px}.intro-finale{padding:29px}.intro-finale h2{font-size:43px}.intro-finale>p{font-size:13px}.intro-finale .finale-note{font-size:11px}}
@media(max-width:360px){.idea-note{padding:21px}.idea-note blockquote{font-size:23px}.note-sketch{font-size:8px;gap:12px}.film-code pre{font-size:8px;line-height:1.85;padding-inline:17px}.request-receipt{left:17px;right:17px;gap:10px}.request-receipt div>span{font-size:7px}.film-design{padding:17px}.sample-nav{font-size:15px;padding-inline:13px}.sample-nav>span{font-size:5px}.sample-page{padding:20px 13px;gap:8px;grid-template-columns:1.4fr 1fr}.sample-page strong{font-size:28px}.sample-overline{font-size:6px}.sample-page p{font-size:7px}.sample-button{font-size:6px;padding-inline:8px}.cms-sidebar{display:none}.cms-editor{grid-template-columns:1fr;min-height:260px}.cms-field{font-size:10px}.cms-publish{font-size:7px}.cms-window-heading strong{font-size:16px}.cms-window-heading>span{font-size:7px}.film-hosting{padding-inline:24px}.hosting-domain{font-size:10px}.hosting-account-title{padding-inline:16px}.hosting-file{margin-inline:16px}.intro-finale{padding:25px}.intro-finale h2{font-size:38px}.intro-story p{font-size:11px}.handoff-site>strong{font-size:27px}.handoff-folder{padding:17px}.handoff-folder strong{font-size:10px}.handoff-folder p{font-size:7px}}
@media(prefers-reduced-motion:reduce){.code-intro *{transition:none!important}}