/* Webfolio for your business: the scrapbook again, now with a shop sign, a founder snapshot, a review card and a booking ticket. Builds on styles.css and legacy.css. */
.business{--cream:#FFF8EA;--rust:#C8553D}
.business .hero h1{font-size:clamp(42px,5.6vw,76px)}
.hero-ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.see-plans{font-weight:700;color:var(--ink);text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--tangerine)}
.see-plans:hover{color:var(--blue)}
.business .hero-note{margin-top:22px}

/* hero: the shopfront collage */
.shopfront{position:relative;min-height:640px}
.bit{position:absolute;margin:0;border:2px solid var(--ink);box-shadow:5px 6px 0 var(--ink);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.bit:hover{z-index:6}

.open-sign{position:absolute;top:30px;right:10%;z-index:5;display:grid;justify-items:center;transform-origin:50% 0}
.open-sign .string{width:70px;height:34px;border:2px solid var(--ink);border-bottom:0;border-radius:40px 40px 0 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.open-sign .sign{display:grid;justify-items:center;background:var(--tangerine);color:#fff;border:2px solid var(--ink);border-radius:8px;padding:10px 22px 8px;box-shadow:4px 4px 0 var(--ink);margin-top:-2px}
.open-sign b{font:400 34px/1 var(--serif);letter-spacing:.02em}
.open-sign small{font:700 18px/1 var(--hand);margin-top:2px}

.b-founder{width:245px;top:40px;left:0;z-index:3;background:#fff;padding:12px 12px 18px;transform:rotate(-3deg)}
.b-founder:hover{transform:rotate(-1deg) translateY(-6px)}
.portrait{position:relative;aspect-ratio:4/3.4;background:linear-gradient(160deg,#FFD9C2,#F7C59F 70%);overflow:hidden}
.portrait .head{position:absolute;left:50%;top:22%;width:30%;aspect-ratio:1;margin-left:-15%;border-radius:50%;background:#8C5A3C}
.portrait .head::before{content:"";position:absolute;inset:-12% -10% 38% -10%;border-radius:50% 50% 30% 30%;background:var(--ink)}
.portrait .body{position:absolute;left:50%;bottom:-18%;width:64%;height:48%;margin-left:-32%;border-radius:50% 50% 0 0;background:var(--blue)}
.b-founder .who{font:700 26px/1 var(--hand);margin-top:12px}
.b-founder .what{font:400 italic 15px/1.45 var(--sans);color:var(--ink-2);margin-top:6px}

.b-review{width:245px;top:270px;right:0;z-index:4;background:var(--lime);border-radius:10px;padding:18px 20px;transform:rotate(3deg)}
.b-review:hover{transform:rotate(1deg) translateY(-6px)}
.stars{color:var(--tangerine);font-size:20px;letter-spacing:3px;-webkit-text-stroke:1px var(--ink)}
.b-review .quote{font:400 20px/1.25 var(--serif);margin-top:8px}
.b-review .by{font-size:13px;color:var(--ink-2);margin-top:10px}

.b-book{width:230px;top:450px;left:6%;z-index:2;background:var(--cream);border-radius:6px;padding:16px 18px;transform:rotate(-5deg);
  background-image:radial-gradient(circle at 0 50%,var(--paper) 9px,transparent 10px),radial-gradient(circle at 100% 50%,var(--paper) 9px,transparent 10px)}
.b-book:hover{transform:rotate(-3deg) translateY(-6px)}
.bk-top{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.bk-slots{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.bk-slots span{font-size:13px;font-weight:500;border:1.5px solid var(--ink);border-radius:99px;padding:5px 9px;background:#fff}
.bk-slots .on{background:var(--ink);color:var(--paper)}
.bk-go{font:700 22px/1 var(--hand);color:var(--blue);margin-top:12px}

.shop-note{position:absolute;top:200px;right:4%;text-align:right;transform:rotate(3deg);color:var(--ink-2)}

@media (max-width:940px){
  .shopfront{min-height:0;display:grid;gap:56px;justify-items:center;padding-top:80px}
  .bit{position:relative;inset:auto}
  .b-founder,.b-review{width:min(320px,100%)}
  .b-book{width:min(270px,100%)}
  .open-sign{top:0;right:12%}
  .shop-note{position:static}
}

/* the problem */
.problem-in{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;margin-top:24px}
.problem-copy .section-lede+.section-lede{margin-top:18px}
.nobody{position:relative;margin:0;transform:rotate(2deg)}
.nobody .tape{z-index:2;background:rgba(255,179,199,.85)}
.browser{background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:6px 7px 0 var(--ink);overflow:hidden}
.bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.bar i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);background:#fff}
.bar .url{flex:1;min-width:0;margin-left:8px;font-size:12px;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a stand-in template business site: tidy, pleasant, and could belong to anyone */
.site{font-family:Arial,Helvetica,sans-serif;color:#4A5560}
.site-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;font-size:11px}
.site-logo{font-weight:700;color:#2F6F73;white-space:nowrap}
.site-logo b{color:#5FB3A8}
.site-links{color:#7A8590;white-space:nowrap}
.site-hero{text-align:center;color:#fff;padding:30px 18px 26px;background:linear-gradient(rgba(31,73,82,.55),rgba(31,73,82,.55)),radial-gradient(circle at 25% 70%,#9CC9C0 0 18%,transparent 19%),radial-gradient(circle at 70% 40%,#C7DDD6 0 22%,transparent 23%),linear-gradient(120deg,#6FA8A0,#A9CFC6 55%,#E3EFEA)}
.site-h{font-size:19px;font-weight:700;line-height:1.2}
.site-sub{font-size:12px;margin-top:6px;opacity:.9}
.site-btn{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;background:#5FB3A8;padding:7px 16px;border-radius:3px}
.site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px 4px;text-align:center}
.site-cards b{display:grid;place-items:center;width:26px;height:26px;margin:0 auto;border-radius:50%;background:#E3EFEA;color:#2F6F73;font-size:12px}
.site-cards p{font-size:12px;font-weight:700;color:#2F3B45;margin-top:6px}
.site-cards small{display:block;font-size:10px;line-height:1.3;color:#8A949C;margin-top:2px}
.site-form{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 16px 16px}
.site-form span{font-size:10px;color:#A3ACB3;border:1px solid #DDE3E6;border-radius:3px;padding:6px 8px}
.site-form .msg{grid-column:span 2;height:34px}
.site-form b{justify-self:start;font-size:10px;color:#fff;background:#2F6F73;padding:6px 14px;border-radius:3px}
@media (max-width:420px){.site-links{display:none}}
@media (max-width:860px){.problem-in{grid-template-columns:1fr;gap:56px}}

/* the difference: five cards, the last one wide */
.difference h2{max-width:16em}
.difference .room{padding-bottom:28px}
.difference .room h3{font-size:26px;line-height:1.15}
.difference .room:last-child{grid-column:span 2}
@media (max-width:900px){.difference .room:last-child{grid-column:auto}}

/* how it works */
.day{font:700 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tangerine)}
.business .steps h3{margin-top:0}

/* plans */
.best{font-size:15px;color:var(--ink-2)}
.best b{display:block;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.business .tag{grid-template-rows:auto auto auto 1fr auto}
.tag li.plus{font-weight:700}
.plans-note{text-align:center;margin:56px auto 0;max-width:40em;color:var(--ink-2)}
.plans-note a{color:var(--ink);font-weight:700;text-decoration-color:var(--tangerine);text-decoration-thickness:2px;text-underline-offset:4px}

/* who it's for */
.for{background:var(--paper-2);border-block:2px solid var(--ink)}
.for-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.for-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.for-list li{background:#fff;border:2px solid var(--ink);border-radius:99px;padding:12px 20px;font-size:18px;box-shadow:3px 3px 0 var(--ink)}
.for-list li:nth-child(1){background:var(--lime);transform:rotate(-1.5deg)}
.for-list li:nth-child(2){transform:rotate(1deg)}
.for-list li:nth-child(3){background:var(--pink);transform:rotate(-.5deg)}
.for-list li:nth-child(4){background:var(--lilac);transform:rotate(1.5deg)}
.for-list li:nth-child(5){background:#FFD9C2;transform:rotate(-1deg)}
.by-name{font:700 clamp(30px,3.6vw,44px)/1.1 var(--hand);color:var(--blue);text-align:center;margin-top:72px;transform:rotate(-1deg)}
@media (max-width:860px){.for-in{grid-template-columns:1fr;gap:40px}}

/* promise */
.promise{transform:rotate(-2deg)}
.promise .promise-head{font:700 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.promise footer{font-size:16px;line-height:1.5;color:var(--ink);margin-top:18px}

/* closing call to action */
.book-head{color:var(--paper);text-align:center;max-width:14em;margin:0 auto}
.book-lede{color:var(--paper);opacity:.92;text-align:center;font-size:20px;max-width:36em;margin:20px auto 56px}
.letter input#b-biz,.letter input#b-site{width:16ch}
.book-small{color:var(--paper);text-align:center;margin-top:40px}
.book-small a{color:var(--paper);font-weight:700;text-underline-offset:4px}

/* gentle motion; off for anyone who prefers less */
@media (prefers-reduced-motion:no-preference){
  .kicker,.business .hero h1,.lede,.hero-ctas,.hero-note{animation:up .8s cubic-bezier(.2,.8,.2,1) backwards}
  .lede{animation-delay:.15s}.hero-ctas{animation-delay:.25s}.hero-note{animation-delay:.35s}
  .bit{animation:drop .9s cubic-bezier(.2,.8,.2,1) backwards}
  .b-review{animation-delay:.2s}.b-book{animation-delay:.4s}
  .open-sign{animation:swing 3.2s ease-in-out .6s infinite alternate}
  .reveal{opacity:0;translate:0 24px;transition:opacity .7s ease-out,translate .7s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1;translate:0 0}
}
@keyframes swing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}