/* The builder's screens. A product page: colors and fonts from brand.css only (the top bar,
   buttons, rows, switches and fields come from the product shell, brand/shell.css, and the
   dashboard's site.css). Phone first; the essentials and Publish are one centered column on a
   laptop. The look picker is picker.css. */
html{overscroll-behavior-x:none}
.build{min-height:100vh; min-height:100dvh}
.bot{position:fixed; bottom:12px; right:12px; z-index:20}
.round{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:0; padding:0; color:var(--brand-ink); cursor:pointer;
  background:color-mix(in srgb, var(--brand-paper) 92%, transparent); box-shadow:var(--brand-shadow); text-decoration:none}
.round.flat{background:none; box-shadow:none}
.round .icon{width:22px; height:22px}
.back-link{display:inline-flex; align-items:center; gap:6px; min-height:var(--brand-tap); color:var(--brand-ink); font-weight:500; text-decoration:none}
.back-link .icon{width:20px; height:20px}
.link-btn{background:none; border:0; padding:0 4px; min-height:var(--brand-tap); display:inline-flex; align-items:center; font:500 var(--brand-text)/1.2 var(--brand-font-ui); color:var(--brand-accent); cursor:pointer; text-decoration:none}
.notice, .need{color:var(--brand-danger)}

/* the essentials and Publish: one column, the button pinned at the bottom */
.ess, .pubs{max-width:640px; margin:0 auto; padding:26px max(20px, env(safe-area-inset-right, 0px)) 150px max(20px, env(safe-area-inset-left, 0px))}
.pubs{max-width:720px}
.ess .screen-title, .pubs .screen-title{margin:12px 0 6px}
.ess-part{margin-top:28px}
.ess-part > .eyebrow{margin-bottom:10px}
.chosen{display:flex; align-items:center; gap:12px; margin:20px 0 6px; padding:10px 10px 10px 12px; border-radius:var(--brand-radius-md); background:var(--brand-card); box-shadow:inset 0 0 0 1px var(--brand-line)}
.chosen img{width:46px; height:58px; object-fit:cover; object-position:top; border-radius:8px}
.chosen div{flex:1; min-width:0; display:grid}
.chosen b{font:400 20px/1.2 var(--brand-font-body)}
.stick{position:fixed; left:0; right:0; bottom:0; z-index:10; padding:20px max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background:linear-gradient(color-mix(in srgb, var(--brand-paper) 0%, transparent), var(--brand-paper) 30%)}
.stick > *{max-width:600px; margin-left:auto; margin-right:auto}
.stick small{display:block; text-align:center; color:var(--brand-ink-2); font-size:15px; margin-top:8px}
.stick .need{margin-bottom:10px}
.dbtn.full{display:flex; width:100%; min-height:54px}

/* "Making your page…" */
.making{display:grid; place-items:center; min-height:100vh; min-height:100dvh; padding:24px; text-align:center; background:var(--brand-paper)}
.making .ld-mark{width:116px; margin-bottom:26px}
.making .loader{gap:0}
.loader .mk-title{margin:0; font:400 30px/1.15 var(--brand-font-body)}
.mk-title em{font-weight:300}
.loader .mk-line{min-height:1.6em; margin:16px 0 0; font:400 var(--brand-text)/1.5 var(--brand-font-ui); color:var(--brand-ink-2); animation:mk-up .4s both}
@keyframes mk-up{from{opacity:0; transform:translateY(6px)}}

/* Publish */
.pstep{margin-top:30px; padding-top:22px; border-top:1px solid var(--brand-rule)}
.pstep .eyebrow .n{color:var(--brand-accent)}
.pstep-head{margin:6px 0 14px; font:400 26px/1.2 var(--brand-font-body)}
.plans{display:grid; gap:12px}
.plan{position:relative; display:grid; gap:6px; text-align:left; padding:18px; border:0; border-radius:var(--brand-radius-lg); background:var(--brand-card);
  box-shadow:inset 0 0 0 1px var(--brand-line); font:inherit; color:inherit; cursor:pointer}
.plan.on{box-shadow:inset 0 0 0 2px var(--brand-ink)}
.plan .pr{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-right:38px}
.plan b{font:400 24px/1 var(--brand-font-body)}
.plan .price{font:400 30px/1 var(--brand-font-body)}
.plan-open{color:var(--brand-ink-2)}
.plan .pick{position:absolute; top:16px; right:16px; width:24px; height:24px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--brand-line)}
.plan.on .pick{box-shadow:inset 0 0 0 7px var(--brand-ink)}
.yours{margin:6px 0 0}
.yours.warn{color:var(--brand-danger)}
.yours i{font-style:normal; display:inline-block; background:var(--brand-panel); color:var(--brand-ink); border-radius:6px; padding:2px 8px; margin:4px 4px 0 0}
.addon{display:flex; align-items:center; gap:12px; margin-top:12px; padding:14px 16px; border-radius:var(--brand-radius-md); background:var(--brand-panel); cursor:pointer}
.addon-text{flex:1; min-width:0}
.addon small{display:block; color:var(--brand-ink-2); font-size:15px; margin-top:4px}
.check{margin:0; padding:6px 18px; list-style:none; background:var(--brand-card); border-radius:var(--brand-radius-lg); box-shadow:inset 0 0 0 1px var(--brand-line)}
.check li{display:flex; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--brand-rule)}
.check li:last-child{border:0}
.check span{flex:none; width:64px; color:var(--brand-ink-2)}
.check b{flex:1; min-width:0; font-weight:500}
.check a{color:var(--brand-accent); font-weight:500; text-decoration:none; min-height:var(--brand-tap); display:inline-flex; align-items:center}
.missing ul{margin:0; padding-left:20px}
.made.missing{margin-top:24px}

/* the link picker */
.link-line{display:flex; align-items:center; gap:4px}
.link-host{flex:0 1 auto; min-width:0; color:var(--brand-ink-2); font-weight:500; line-height:1.3}
.link-line .dinput{flex:1 0 9em; min-width:9em}
.link-state{display:flex; align-items:center; gap:6px; min-height:1.4em; margin:10px 0}
.link-state.ok{color:var(--brand-ok); font-weight:500}
.link-state.bad{color:var(--brand-danger)}

/* the invitation pictures */
.invites .empty{padding:14px 0}
.invites-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; align-items:end}
.invite-pic{margin:0; display:grid; gap:4px}
.invite-pic img{display:block; width:100%; height:auto; border-radius:6px; box-shadow:var(--brand-shadow)}
.invite-pic figcaption{color:var(--brand-ink-2)}
.invites-note{margin-top:10px}
@media (min-width:700px){ .invites-grid{grid-template-columns:repeat(4, 1fr)} }

@media (min-width:900px){
  .ess, .pubs{padding-top:40px}
  .plans{grid-template-columns:1fr 1fr}
}

/* the essentials on a laptop: her look in a tilted phone on the left (it stays put), the form and
   its button on the right. Phones get the "Your look" card instead. */
.ess-look{display:none}
@media (min-width:900px){
  .ess-wrap{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 560px); gap:clamp(40px, 6vw, 96px); max-width:1180px; margin:0 auto; padding:0 40px}
  .ess-look{display:grid; justify-items:center; align-content:center; gap:22px; position:sticky; top:68px; height:calc(100vh - 68px); height:calc(100dvh - 68px); padding:24px 0 40px}
  .ess-phone{position:relative; height:min(calc(100dvh - 220px), 640px); aspect-ratio:70.6/145.335; transform:rotate(-4deg)}
  .ess-phone .pframe{position:absolute; left:-14.164%; top:-6.193%; width:150.99%; height:126.83%; max-width:none; z-index:3; pointer-events:none; user-select:none}
  .ess-phone .screen{position:absolute; left:4.533%; right:4.533%; top:2.202%; bottom:2.202%; border-radius:12.77% / 5.902%; overflow:hidden; z-index:1; background:var(--brand-frame)}
  .ess-phone .screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
  .ess-phone .glare{position:absolute; left:4.533%; right:4.533%; top:2.202%; bottom:2.202%; border-radius:12.77% / 5.902%; z-index:2; pointer-events:none; background:var(--brand-phone-glare); box-shadow:var(--brand-phone-glare-edge)}
  .ess-look-name{margin:0; font:italic 300 22px/1.3 var(--brand-font-body); color:var(--brand-ink-2)}
  .ess-look-name .link-btn{display:inline; min-height:0; padding:0; font:500 var(--brand-text)/1.3 var(--brand-font-ui)}
  .ess-col{min-width:0}
  .ess-col .ess{max-width:none; padding:40px 0 24px}
  .ess-col .chosen{display:none}
  .ess-col .stick{position:sticky; left:auto; right:auto; padding:20px 0 calc(16px + env(safe-area-inset-bottom, 0px))}
  .ess-col .stick > *{max-width:none}
}