/* [codex] Gusto reference composition, Upright identity. / Komposisi rujukan, identitas Upright. */
:root{--paper:#fdfcf9;--ink:#192520}
.header{padding-inline:32px;gap:22px;background:#fff}.brand img{width:140px;height:auto}.desktop-nav{gap:19px}.utilities{gap:16px}.nav-cta{order:0}.utilities [data-preview=signin]{order:1}
.hero{position:relative;isolation:isolate;padding:38px 20px 0;overflow:hidden;background:var(--paper)}
.hero::before{content:'';position:absolute;inset:0 0 230px;z-index:-2;border-radius:0 0 22px 22px;background:radial-gradient(ellipse 120% 47% at 18% -6%,#355b68 0%,#244350 55%,transparent 56%),radial-gradient(ellipse 125% 68% at 88% 126%,#7eab72 0%,#385d50 49%,transparent 50%),linear-gradient(155deg,#172b3c 15%,#284c4b 62%,#607955)}
.hero::after{content:'';position:absolute;inset:0 0 230px;z-index:-1;opacity:.35;background:repeating-radial-gradient(ellipse at 50% 50%,#fff1 0 .6px,transparent .8px 3px);pointer-events:none}
.hero-copy{position:relative;z-index:2;gap:22px;max-width:900px;margin:auto}
h1{font-size:clamp(64px,7.9vw,110px);line-height:.99;letter-spacing:-.06em;max-width:930px;font-weight:500}.lede{font-size:17px;line-height:1.5;max-width:630px}.hero-actions{padding-top:10px;gap:12px}.hero-actions .button{min-height:46px;min-width:0;padding:12px 20px;border-radius:10px;font-size:14px}.hero-actions .lime{background:#fff;color:var(--navy)}.hero-actions .outline{border-color:#e5eddf88}
.workspace-stage{height:635px;width:100%;max-width:1400px;margin:52px auto 0}.workspace{top:0;left:15%;width:70%;height:560px;border:7px solid #d6dfd2;border-radius:22px;background:#fcfbf8;box-shadow:0 12px 25px #12233414}.workspace-header{height:66px;background:white}.workspace-header b{font-weight:600}.workspace-body{padding:30px 24px;gap:28px}.workspace-sidebar{width:122px;gap:24px}.workspace-sidebar strong{background:#274536;color:#fff;border-radius:5px;padding:10px;margin-left:-10px}.workspace-content h2{font:500 30px/1.2 Fraunces,Georgia,serif;letter-spacing:-.035em}.workspace-content p{font-size:12px}.work-row{padding:22px 16px;background:#fff;border:1px solid #e9e9e1;margin:15px 0}.work-row b{font-size:12px}.work-row small{font-size:9px}
.floating-card,.support-note{position:absolute;z-index:3;border-radius:12px;box-shadow:0 6px 13px #172b3c12;overflow:hidden}.floating-card{padding:24px}.floating-card h2,.support-note h2{font:400 26px/1.15 Fraunces,Georgia,serif;letter-spacing:-.035em;margin:10px 0 14px}.float-records{left:0;top:-114px;width:245px;color:#fdfcf9;background:#153c38}.float-records .example{color:#c8dcca}.mini-entry{display:flex;align-items:center;gap:9px;font-size:12px;margin-top:14px}.mini-entry i{font-style:normal;width:26px;height:26px;background:#d5e6bc;color:#193b36;border-radius:50%;display:grid;place-items:center}.mini-entry b{margin-left:auto;color:#bdf87a;font-weight:400}.float-shifts{right:1.5%;top:-76px;width:288px;background:white;padding-top:82px}.float-shifts p{font-size:11px;line-height:1.5;color:#61727f}.shift-colors{position:absolute;left:0;right:0;top:0;height:57px;background:linear-gradient(90deg,#dce6b4,#bdf87a,#698857);display:flex;justify-content:center;align-items:flex-end;padding-bottom:3px}.shift-colors i{display:grid;place-items:center;margin:0 -3px -12px;width:36px;height:36px;border:3px solid white;border-radius:50%;font-size:10px;font-style:normal;background:#f1eddb}.shift-colors i:nth-child(2){background:#dceaf2}.shift-colors i:nth-child(3){background:#d0cbdc}.week{display:flex;gap:8px;margin-top:18px}.week i{width:25px;height:25px;background:#eaf1e1;font-style:normal;font-size:10px;display:grid;place-items:center;border-radius:4px}.float-pay{left:1%;top:330px;width:267px;background:#ebf1c6}.pay-chips{display:flex;gap:6px}.pay-chips span{font-size:10px;background:#fff9;border-radius:6px;padding:7px}.support-note{left:auto;right:0;top:360px;width:244px;background:#fff;padding:22px}.support-note>span{display:none}.support-note h2{font-size:25px}.support-note p{font-size:12px;line-height:1.5}
.business-collage{position:relative;min-height:720px;max-width:1240px;margin:0 auto 100px}.collage-copy{position:absolute;z-index:2;top:208px;left:0;width:100%;text-align:center}.collage-copy h2{font:500 clamp(44px,5vw,70px)/.99 Fraunces,Georgia,serif;letter-spacing:-.06em;color:var(--ink)}.collage-copy mark{background:#d6ebaf;color:inherit;padding:0 8px}.collage-copy .button{margin-top:32px;border-radius:14px;background:#214d42}.collage-photo{position:absolute;object-fit:cover;border-radius:14px}.collage-one{width:204px;height:145px;left:19%;top:25px;transform:rotate(-2deg)}.collage-two{width:132px;height:200px;right:17%;top:-16px}.collage-three{width:205px;height:197px;left:5%;top:440px;object-position:50% 38%}.collage-four{width:259px;height:185px;right:23%;top:467px}.collage-five{width:132px;height:200px;right:4%;top:330px}.concept-caption{position:absolute;bottom:4px;width:100%;text-align:center;color:#657168;font-size:10px}
.features{padding:0 64px 90px;background:var(--paper);color:var(--ink)}.feature-kicker{margin:0 auto 25px;width:fit-content;border:1px solid #bccbab;border-radius:25px;padding:9px 17px;font-size:12px}.features>h2{font-size:clamp(46px,4.5vw,66px);line-height:1.02;letter-spacing:-.06em;max-width:1000px;margin:auto}.feature-highlight{display:inline-block;border:1px solid #96b777;border-radius:14px;background:#deedc6;padding:2px 18px;color:#345c45}.feature-grid{margin-top:86px;gap:65px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end}.slide .eyebrow{font-size:16px;letter-spacing:0;font-weight:400;margin-bottom:38px}.slide h3{font-size:40px;line-height:1.04;letter-spacing:-.05em;max-width:440px;margin-bottom:38px}.slide-detail{border-left:1px solid #d5d4cd;padding-left:22px}.slide .feature-lead{font-size:26px!important;line-height:1.25!important;letter-spacing:-.035em;font-weight:500;color:#202723!important;margin-bottom:16px!important}.slide p:not(.eyebrow){font-size:18px;line-height:1.5}.inline-link{font-size:17px;padding-bottom:9px;margin-top:15px}.carousel-controls{margin-top:40px;gap:16px}.tabs{gap:9px}.tab{width:22px;position:relative;justify-content:center;align-items:center}.tab[aria-selected=true]{width:66px}.tab .time-track{height:7px;width:7px;background:#c7c9c1}.tab[aria-selected=true] .time-track{width:56px;background:#d7d9d0}.tab .time-fill{background:#24362f}.play-toggle{width:36px;height:36px;min-width:36px;border:0;font-size:14px}.feature-art{height:515px}.art-backdrop{top:92px;left:25px;right:12px;height:417px;border-radius:0;transform:none;clip-path:polygon(20% 0,83% 4%,100% 19%,96% 78%,81% 100%,9% 95%,0 57%)}.founder{left:auto;right:0;top:15px;width:315px;height:500px}.art-stack{left:5px;top:180px;width:255px;transform:rotate(-6deg)}.art-card{border:3px solid #18362d;border-radius:26px;padding:25px 19px;box-shadow:0 4px 0 #a1ad96}.art-card h3{font:500 27px/1.05 Fraunces,Georgia,serif}.art-card ul{font-size:11px}.art-card .example{font-size:7px}.review-footer{align-items:center}
@media(min-width:1100px) and (max-width:1200px){.desktop-nav{display:flex;gap:13px}.utilities .desktop{display:block}.nav-cta{display:inline-flex}.mobile-toggle{display:none}.header{height:88px;padding-inline:24px;gap:20px}.text-button,.nav-disclosure summary,.nav-cta{font-size:11px}.utilities{gap:12px}.brand img{width:125px}.mega{gap:25px;grid-template-columns:240px 1.2fr 1fr 1fr}}
@media(max-width:1099px){.hero-copy{max-width:700px}.hero::before,.hero::after{bottom:200px}.workspace-stage{height:550px;margin-top:65px}.workspace{height:480px;left:11%;width:78%}.floating-card{padding:18px}.float-records{width:195px;top:-70px}.float-records h2{font-size:22px}.mini-entry{font-size:10px}.float-shifts{width:223px;top:-40px;padding-top:75px}.float-shifts h2{font-size:23px}.float-pay{width:213px;top:302px}.support-note{width:220px;top:328px}.business-collage{min-height:650px;margin-bottom:80px}.collage-copy{top:194px}.collage-one{left:16%;width:175px;height:126px}.collage-two{right:17%;width:116px;height:174px}.collage-three{left:3%;width:170px;height:170px;top:399px}.collage-four{right:23%;width:225px;height:164px;top:437px}.collage-five{right:2%;width:109px;height:164px;top:321px}.features{padding-inline:40px}.feature-grid{gap:28px}.slide h3{font-size:35px}.slide .feature-lead{font-size:23px!important}.slide p:not(.eyebrow){font-size:16px}.art-stack{width:217px}.founder{width:270px}.feature-art{height:485px}}
@media(max-width:700px){.header{padding:0 20px;height:72px}.brand img{width:138px}.hero{padding:36px 16px 0}.hero::before,.hero::after{bottom:90px;border-radius:0 0 16px 16px}.hero-copy{gap:18px}h1{font-size:55px;line-height:1.01;letter-spacing:-.055em;max-width:380px}.lede{font-size:15px;max-width:350px}.hero-actions{flex-direction:row;padding:3px 0 0;width:auto;gap:10px}.hero-actions .button{font-size:12px;width:auto;min-height:44px;padding:11px 15px}.workspace-stage{height:398px;margin-top:48px}.workspace{top:25px;left:0;width:100%;height:345px;border-width:4px;border-radius:12px}.workspace-header{height:49px;padding:13px}.workspace-header b{font-size:11px}.workspace-body{padding:18px 12px}.workspace-content h2{font-size:23px;max-width:230px}.workspace-content p{font-size:10px}.work-row{padding:16px 11px;margin:12px 0}.work-row b{font-size:10px}.work-row>span{font-size:9px}.float-records,.float-pay{display:none}.float-shifts{top:-10px;right:-4px;width:142px;padding:44px 12px 12px;transform:rotate(3deg)}.shift-colors{height:32px}.shift-colors i{width:24px;height:24px;font-size:7px;border-width:2px;margin-bottom:-8px}.float-shifts .example{font-size:5px}.float-shifts h2{font-size:18px;margin:6px 0}.float-shifts p{font-size:8px}.week{gap:3px;margin-top:10px}.week i{width:14px;height:16px;font-size:7px}.support-note{display:block;right:auto;left:-4px;top:281px;width:170px;padding:14px;transform:rotate(-3deg)}.support-note h2{font-size:20px;margin:0 0 6px}.support-note p{font-size:9px}.business-collage{min-height:560px;margin:5px auto 58px;overflow:hidden}.collage-copy{top:171px;padding:0 12px}.collage-copy h2{font-size:40px;line-height:1.06;letter-spacing:-.055em}.collage-copy mark{padding:0 3px}.collage-copy .button{margin-top:25px;min-height:46px;font-size:14px}.collage-one{top:23px;left:7%;width:129px;height:94px}.collage-two{right:8%;top:3px;width:89px;height:125px}.collage-three{left:9%;top:383px;width:111px;height:119px}.collage-four{right:7%;top:405px;width:145px;height:104px}.collage-five{display:none}.concept-caption{bottom:2px;font-size:9px}.features{padding:0 20px 60px}.feature-kicker{font-size:10px;margin-bottom:20px;padding:8px 12px}.features>h2{font-size:39px;line-height:1.04}.feature-highlight{padding:3px 11px;border-radius:11px}.feature-grid{margin-top:50px;gap:28px}.slide .eyebrow{font-size:13px;margin-bottom:24px}.slide h3{font-size:34px;max-width:310px;margin-bottom:26px}.slide-detail{padding-left:16px}.slide .feature-lead{font-size:23px!important}.slide p:not(.eyebrow){font-size:15px}.inline-link{font-size:15px;margin-top:7px}.carousel-controls{margin-top:22px}.tab{min-height:44px;min-width:32px}.tab[aria-selected=true]{width:66px}.play-toggle{width:44px;height:44px}.feature-art{height:418px}.founder{height:365px;width:243px;right:0;top:0}.art-backdrop{top:64px;left:9px;right:0;height:345px}.art-stack{top:149px;left:7px;width:218px}.art-card{padding:18px 15px;border-width:2px;border-radius:23px}.art-card h3{font-size:25px;margin:11px 0}.art-card ul{font-size:9px;margin:13px 0;gap:12px}.art-card p{font-size:9px}.review-footer{align-items:flex-start}.review-footer .text-button{font-size:11px;padding:0}}
/* [codex] Leave mobile UI copy unobscured by floating layers. / Kartu tidak menutup teks UI pada ponsel. */
@media(max-width:700px){.workspace-stage{height:480px}.workspace{top:90px;height:auto;min-height:345px}.float-shifts{top:-22px}.workspace-content h2{max-width:none}.support-note{display:none}.workspace-body{padding-bottom:20px}}
@media(max-width:360px){h1{font-size:47px}.brand img{width:125px}.collage-copy h2{font-size:34px}.collage-one{width:117px;height:85px}.collage-two{width:83px;height:118px}.collage-three{width:102px;height:110px}.collage-four{width:130px;height:94px}.features>h2{font-size:34px}.slide h3{font-size:31px}.art-stack{width:204px}.founder{width:220px;height:330px}.workspace-content h2{font-size:21px}.float-shifts{width:128px}}
@media(hover:hover) and (pointer:fine){.hero-actions .lime:hover{background:#e5f3d2}.collage-copy .button:hover{background:#153b31}}
.tab{min-width:44px;min-height:44px}.play-toggle{min-width:44px;min-height:44px}
.can-animate .collage-photo{opacity:0;translate:0 16px;transition:opacity 500ms var(--ease-out),translate 500ms var(--ease-out)}.can-animate.is-seen .collage-photo{opacity:1;translate:0 0}.collage-two{transition-delay:70ms!important}.collage-three{transition-delay:140ms!important}.collage-four{transition-delay:210ms!important}.collage-five{transition-delay:280ms!important}
@media(prefers-reduced-motion:reduce){.collage-photo{opacity:1!important;translate:none!important;transition:none!important;transform:none!important}}