/* Consistent section 01 heading and compact section 05 showcase. */
#onboarding>.g-wrap{width:min(1560px,94%);padding:0}
#onboarding .g-head{text-align:left;max-width:none;margin:0 18px 36px}
#onboarding .g-eyebrow{justify-content:flex-start}
#onboarding .g-eyebrow::after{display:block}
#onboarding .g-head h2{font-size:clamp(38px,5.3vw,76px);font-weight:700;letter-spacing:-.055em;line-height:1.1;max-width:none;margin:24px 0 0}
#onboarding .g-head p{margin:20px 0 0;max-width:740px;font-size:clamp(16px,1.65vw,21px);line-height:1.55}
#onboarding .g-head h2 em{background:linear-gradient(transparent 65%,var(--cyan) 65%,var(--cyan) 96%,transparent 96%)}
/* One heading scale for every section h2, so no section shouts louder than the others. */
#social .g-head h2,.g-identity-heading h2,.g-website-head h2{font-size:clamp(38px,5.3vw,76px);font-weight:700;letter-spacing:-.055em;line-height:1.1;max-width:none}
#social .g-head h2{margin-top:24px}

/* Section 04: three Instagram-style post cards in one row. */
.g-posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g-posters .g-post img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0}
@media(max-width:620px){.g-posters{grid-template-columns:1fr}}

/* Section 05: real live-site captures in a browser window and a phone, side by side. */
#website{background:var(--paper);border-block:1px solid var(--line)}
#website>.g-wrap{width:min(1560px,94%);padding:0}
.g-website-grid{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.9fr);gap:clamp(32px,4vw,64px);align-items:center}
.g-website-head{grid-column:1/-1}
.g-website-head h2{margin:24px 0 0}
.g-website-head h2>span{background:linear-gradient(transparent 65%,var(--cyan) 65%,var(--cyan) 96%,transparent 96%)}
.g-website-copy{min-width:0}
.g-website-detail{padding:18px 0;border-top:1px solid var(--line)}
.g-website-detail h3{font:600 12px var(--f1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.g-website-detail p{font:400 16px/1.6 var(--f2);color:var(--muted)}
.g-website-features{list-style:none;margin:0 0 28px;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font:400 15px var(--f2)}
.g-website-features li{display:flex;align-items:center;gap:10px}
.g-website-features li::before{content:"";width:6px;height:6px;flex-shrink:0;background:var(--cyan)}

.g-devices{position:relative;min-width:0;padding-top:7%}
.g-devices figure{margin:0}
.g-devices figcaption{margin-top:12px;font:500 12px var(--f1);color:var(--muted)}
.g-devices figcaption::before{content:"";display:inline-block;width:16px;height:2px;background:var(--cyan);vertical-align:middle;margin-right:10px}
.g-device-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff}
.g-device-scroll img{width:100%;height:auto;display:block}
.g-browser{width:80%}
.g-browser>.g-device-scroll,.g-browser-bar{border-inline:1px solid #d6d2c9}
.g-browser-bar{display:flex;align-items:center;gap:16px;padding:10px 14px;background:#ecebe7;border-top:1px solid #d6d2c9;border-radius:12px 12px 0 0}
.g-browser-bar .dots{display:flex;gap:6px}
.g-browser-bar .dots i{width:10px;height:10px;border-radius:50%;background:#c9c5bc}
.g-browser-bar .url{flex:1;max-width:340px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 12px;border-radius:6px;background:#fff;font:400 12px var(--f2);color:#555}
.g-browser>.g-device-scroll{aspect-ratio:16/10;border-bottom:1px solid #d6d2c9;border-radius:0 0 12px 12px;box-shadow:0 24px 50px -30px rgba(22,24,29,.4)}
.g-iphone{position:absolute;right:0;bottom:0;width:min(25%,260px)}
.g-iphone-body{position:relative;padding:8px;border-radius:40px;background:#16181d;box-shadow:inset 0 0 0 1.5px #3a3d45,0 30px 50px -24px rgba(22,24,29,.5)}
.g-iphone-body .island{position:absolute;z-index:2;top:16px;left:50%;width:30%;height:18px;border-radius:999px;background:#000;transform:translateX(-50%)}
.g-iphone .g-device-scroll{aspect-ratio:9/19.5;border-radius:32px;scrollbar-width:none}
.g-iphone .g-device-scroll::-webkit-scrollbar{display:none}

@media(max-width:1000px){
  .g-website-grid{grid-template-columns:1fr}
  .g-website-copy{max-width:640px}
}
@media(max-width:640px){
  #onboarding .g-head{margin-inline:0}
  .g-website-features{grid-template-columns:1fr}
  .g-devices{display:grid;gap:28px;padding-top:0}
  .g-browser{width:100%}
  .g-iphone{position:static;width:min(62%,250px);justify-self:center}
  .g-iphone figcaption{text-align:center}
}