/* Built with Prooflive.ai: https://prooflive.ai | ref plenszuqby */
/* The Free Website Shop: soft butter yellow, a slim striped awning, firm Figtree type, thin lines */
:root{
  --sun:#FFD66B; --green:#1FA86B; --green-d:#0F7F4E; --tom:#FF5B45; --tom-hover:#FF7A68; --mint:#DDF5E8; --ink:#1E1B2E;
  --muted:#4F4B63; --line:#E4E2EC; --warm:#FFF3C4; --white:#FFFFFF;
  --display:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0; font:17px/1.6 var(--body); color:var(--ink); background:var(--white)}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.06; margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--green-d)}
:focus-visible{outline:3px solid var(--green-d); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.skip{position:absolute; left:-999px; top:8px; background:var(--white); color:var(--ink); padding:10px 14px; border:1.5px solid var(--ink); border-radius:10px; z-index:100}
.skip:focus{left:16px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:800 17px/22px var(--body); padding:15px 24px; min-height:50px;
  border-radius:999px; border:1.5px solid var(--ink);  background:var(--tom); color:var(--ink);
  text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform .12s ease-out, box-shadow .12s ease-out, background-color .12s ease-out}
.btn:hover{background:var(--tom-hover); color:var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--white)}
.btn.alt:hover{background:var(--mint)}
.btn.sun{background:var(--sun)}
.btn.sun:hover{background:#FFE27A}
.btn svg{width:22px; height:22px; fill:currentColor; flex:none}

/* sticker surfaces */
.sticker{background:var(--white); border:1.5px solid var(--ink); border-radius:18px; }

/* header: awning, then the sunshine bar */
.awning{height:34px; background:repeating-linear-gradient(90deg, var(--green) 0 40px, var(--white) 40px 80px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% 20px no-repeat, radial-gradient(circle 20px at 50% 0, #000 98%, transparent 100%) 0 20px/40px 14px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% 20px no-repeat, radial-gradient(circle 20px at 50% 0, #000 98%, transparent 100%) 0 20px/40px 14px repeat-x;
  position:relative; z-index:40; pointer-events:none}
.site-header{background:var(--sun); position:relative; z-index:30; margin-top:-34px; padding-top:34px}
.site-header .bar{display:flex; align-items:center; gap:24px; min-height:76px}
.logo{display:inline-flex; align-items:center; gap:10px; font:800 23px/1 var(--display); color:var(--ink); text-decoration:none; white-space:nowrap}
.logo svg{width:44px; height:41px; flex:none}
.logo b{color:var(--green-d); font-weight:800}
.nav{display:flex; align-items:center; gap:24px; margin-left:auto}
.nav a:not(.btn){color:var(--ink); font-weight:800; text-decoration:none; font-size:16px; white-space:nowrap}
.nav a:not(.btn):hover{color:var(--green-d)}
.nav a[aria-current]:not(.btn){text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:7px; text-decoration-color:var(--green-d)}
.nav .btn{padding:12px 18px; min-height:46px; font-size:16px}
.menu{display:none; margin-left:auto}
.burger{list-style:none; width:46px; height:46px; border:1.5px solid var(--ink); border-radius:12px; background:var(--white); display:grid; place-items:center; cursor:pointer}
.burger::-webkit-details-marker{display:none}
.burger i,.burger i::before,.burger i::after{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px; position:relative; transition:transform .2s ease-out, background-color .2s ease-out}
.burger i::before,.burger i::after{content:""; position:absolute; left:0}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.menu[open] .burger i{background:transparent}
.menu[open] .burger i::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .burger i::after{transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:absolute; left:0; right:0; top:100%; background:var(--sun); border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  padding:10px 16px 22px; display:grid; gap:2px; z-index:60}
.menu-panel a:not(.btn){display:block; padding:12px 4px; font:600 21px/1.2 var(--display); color:var(--ink); text-decoration:none}
.menu-panel .btn{margin-top:10px}
.header-min .bar{justify-content:space-between}

/* hero */
.hero{background:var(--sun); padding:30px 0 80px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:30px; align-items:center}
.hero h1{font-size:clamp(46px,6.2vw,82px)}
.hero h1 span{color:var(--green-d); display:block}
.hero .sub{font-size:21px; font-weight:800; margin-top:22px; max-width:30ch}
.hero .sub b{background:var(--white); border:1.5px solid var(--ink); border-radius:8px; padding:0 6px; white-space:nowrap}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.ticks{display:flex; flex-wrap:wrap; gap:10px 22px; margin:26px 0 0; padding:0; list-style:none; font-weight:800; font-size:16px}
.ticks li{display:inline-flex; align-items:center; gap:7px}
.ticks svg{width:22px; height:22px; fill:var(--green-d); flex:none}
.hero-art{position:relative; min-height:460px}
.hero-art .penny{position:absolute; width:260px; height:338px; left:50%; top:78px; margin-left:-130px; transform:rotate(-6deg); animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-8px)}}
.speech{position:absolute; left:6%; top:10px; background:var(--white); border:1.5px solid var(--ink); border-radius:20px; padding:12px 18px;
  font:800 24px/1.1 var(--display); }
.speech::after{content:""; position:absolute; left:64px; bottom:-14px; width:20px; height:20px; background:var(--white);
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg)}
.tagprice{position:absolute; right:4%; bottom:24px; background:var(--green-d); color:var(--white); border:1.5px solid var(--ink); border-radius:16px;
  padding:12px 16px; transform:rotate(-5deg);  text-align:center; line-height:1.2}
.tagprice b{display:block; font:800 34px/1 var(--display)}
.tagprice span{font-weight:800; font-size:14px}

/* bands */
.band{padding:84px 0; overflow-x:clip}
.hero,.page-head{overflow-x:clip}
.band h2{font-size:clamp(34px,4.2vw,52px)}
.lead{font-size:19px; color:var(--muted); margin-top:12px; max-width:54ch}
.band.mint{background:var(--mint)}
.band.mint a:not(.btn){color:#0A5E39}
.band.sun{background:var(--sun)}
.band.green{background:var(--green-d); color:var(--white)}
.band.green .lead{color:#E3FFF0}

/* how it works */
.how{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:38px 0 0; padding:0; list-style:none}
.how li{padding:24px; display:grid; gap:10px; align-content:start}
.how .n{width:48px; height:48px; border-radius:50%; background:var(--sun); border:1.5px solid var(--ink); display:grid; place-items:center; font:800 23px/1 var(--display)}
.how h3{font-size:24px}
.how p{color:var(--muted)}
.how .when{font-weight:800; color:var(--green-d); font-size:15px}

/* the receipt */
.receipt-band .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
.receipt{background:var(--white); color:var(--ink); padding:26px 28px 40px; font:500 16px/1.75 var(--mono); border:1.5px solid var(--ink); border-bottom:0;
  border-radius:10px 10px 0 0; max-width:440px; width:100%; justify-self:center; transform:rotate(-2deg);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, transparent 90deg, #000 0) bottom/18px 12px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, transparent 90deg, #000 0) bottom/18px 12px repeat-x}
.receipt .h{text-align:center}
.receipt hr{border:0; border-top:2px dashed #8A8799; margin:10px 0}
.receipt .r{display:flex; gap:10px}
.receipt .r .dots{flex:1; border-bottom:2px dotted #C4C1D2; transform:translateY(-7px)}
.receipt .tot{color:#B42A17; font-size:18px}
.includes{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin:28px 0 0; padding:0; list-style:none}
.includes li{display:flex; gap:10px; align-items:center; font-weight:800}
.includes svg{width:26px; height:26px; fill:var(--green-d); flex:none}

/* site styles */
.looks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:38px 0 0; padding:0; list-style:none}
.looks li{overflow:hidden; display:grid}
.looks .mock{height:150px; padding:16px 18px; display:grid; grid-template-rows:auto 1fr auto; gap:8px; border-bottom:1.5px solid var(--ink)}
.looks .mock .mn{display:flex; justify-content:space-between; font:800 12px/1 var(--body)}
.looks .mock .mh{align-self:center; font-size:26px; line-height:1}
.looks .mock .mb{justify-self:start; font:800 12px/1 var(--body); padding:8px 11px; border-radius:4px}
.looks .info{padding:14px 18px 18px; display:grid; gap:4px}
.looks .info h3{font-size:21px}
.looks .info p{color:var(--muted); font-size:16px}

/* Free Site Friday */
.friday .wrap{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:34px; align-items:center}
.friday .shopart{width:140px; height:130px}
.chip{display:inline-block; background:var(--sun); color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; padding:6px 13px; font:800 14px/1.2 var(--body); margin-bottom:14px}

/* Ask Penny */
.faq-wrap{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:34px; align-items:start}
.faq{display:grid; gap:12px; margin-top:28px}
.faq details{background:var(--white); border:1.5px solid var(--ink); border-radius:16px; padding:16px 20px}
.faq summary{font:600 21px/1.25 var(--display); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:28px; height:28px; fill:var(--ink); flex:none; transition:transform .2s ease-out}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin-top:10px; color:var(--muted); max-width:68ch}
.faq-wrap .penny{width:210px; height:273px; position:sticky; top:40px}
.more{margin-top:22px; font-weight:800}

/* closing call */
.final .wrap{display:grid; justify-items:center; text-align:center; gap:18px}
.final h2{max-width:16ch}
.final p{font-weight:800}
.final .final-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); text-align:left; justify-items:start; align-items:center; gap:30px}
.final-copy{display:grid; gap:18px; justify-items:start}
.final-copy p{font-weight:800; font-size:19px; max-width:46ch}
.final-art{position:relative; min-height:300px; width:100%; }
.final-art .penny{position:absolute; width:200px; height:260px; left:50%; bottom:0; margin-left:-60px; transform:rotate(6deg)}
.final-art .speech{left:0; top:0}
.looks .mock .mlogo{width:44px; height:12px; border-radius:3px; display:block}

/* footer */
.site-footer{background:var(--ink); color:#D9D6E8; padding:46px 0 26px}
.site-footer .top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:26px; align-items:flex-start}
.site-footer .logo{color:var(--white)}
.site-footer .logo b{color:var(--sun)}
.site-footer .footer-links{display:flex; flex-wrap:wrap; gap:10px 24px}
.site-footer .footer-links a{color:var(--white); font-weight:800; text-decoration:none}
.site-footer .footer-links a:hover{color:var(--sun)}
.site-footer .price{margin-top:12px; font-weight:800; max-width:40ch}
.site-footer .bottom{margin-top:34px; padding-top:18px; border-top:1px solid #3A3650; display:flex; gap:18px; white-space:nowrap; font-size:14px}
.site-footer .bottom a{color:#D9D6E8}
.site-footer .bottom .host{margin-left:auto}

/* inner page heading */
.page-head{background:var(--sun); padding:46px 0 56px}
.page-head .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center}
.page-head h1{font-size:clamp(40px,5vw,64px)}
.page-head .lead{color:var(--ink); font-weight:800}
.page-head .penny{width:150px; height:195px; transform:rotate(-5deg)}

/* prices page */
.price-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start}
.extras{display:grid; gap:12px; margin:24px 0 0; padding:0; list-style:none}
.extras li span:first-child{min-width:0}
.extras li{display:flex; justify-content:space-between; gap:16px; padding:14px 18px; background:var(--white); border:1.5px solid var(--ink); border-radius:14px; font-weight:800}
.extras li span:last-child{white-space:nowrap}
.never{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; margin:26px 0 0; padding:0; list-style:none}
.never li{display:flex; gap:10px; align-items:center; font-weight:800}
.never svg{width:26px; height:26px; fill:#B42A17; flex:none}

/* forms */
.form-wrap{max-width:680px; margin:0 auto}
.form-card{padding:30px}
.hello{display:flex; gap:14px; align-items:flex-end; margin-bottom:24px}
.hello .penny{width:74px; height:96px; flex:none}
.hello p{background:var(--warm); border:1.5px solid var(--ink); border-radius:20px 20px 20px 4px; padding:12px 16px; font:600 22px/1.2 var(--display)}
.shop-form{display:grid; gap:18px}
.shop-form fieldset{border:0; margin:0; padding:0; display:grid; gap:16px; min-width:0}
.shop-form fieldset.field{gap:8px}
.shop-form legend.lbl{padding:0; margin-bottom:8px}
.shop-form fieldset[data-step]{grid-column:1 / -1}
.field{display:grid; gap:6px}
.field label,.field .lbl{font-weight:800; font-size:15px}
.shop-form input[type=text],.shop-form input[type=email],.shop-form input[type=tel],.shop-form input[type=url],.shop-form select,.shop-form textarea{
  width:100%; font:800 17px/1.4 var(--body); color:var(--ink); background:var(--white); border:1.5px solid var(--ink); border-radius:14px; padding:13px 16px; min-height:52px}
.shop-form textarea{min-height:110px; resize:vertical}
.shop-form select{appearance:none; -webkit-appearance:none; padding-right:2.8em;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E1B2E' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 1em center / 22px}
.shop-form input:focus,.shop-form select:focus,.shop-form textarea:focus{outline:none; box-shadow:0 0 0 4px var(--sun)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.style-pick{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.style-pick label{position:relative; display:grid; border:1.5px solid var(--ink); border-radius:14px; overflow:hidden; cursor:pointer; background:var(--white)}
.style-pick input{position:absolute; opacity:0; width:1px; height:1px}
.style-pick .sw{height:58px; display:grid; align-content:end; padding:8px; font:800 11px/1 var(--body)}
.style-pick .nm{padding:8px 10px; font-weight:800; font-size:14px; border-top:1.5px solid var(--ink)}
.style-pick label:has(input:checked){ outline:3px solid var(--green-d); outline-offset:-1px}
.style-pick label:has(input:focus-visible){outline:3px solid var(--green-d); outline-offset:2px}
.choice{display:flex; flex-wrap:wrap; gap:10px}
.choice label{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--ink); border-radius:999px; padding:10px 16px; font-weight:800; cursor:pointer; background:var(--white); min-height:46px}
.choice input{accent-color:var(--green-d); width:18px; height:18px}
.choice label:has(input:checked){background:var(--mint)}
.shop-form button[type=submit],.shop-form .pl-step-btns button{font:800 17px/1 var(--body); padding:15px 24px; min-height:50px; border-radius:999px; border:1.5px solid var(--ink);
   background:var(--tom); color:var(--ink); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center}
.shop-form .pl-step-btns{display:flex; gap:12px}
.shop-form .pl-step-btns button:not(.pl-back){flex:1}
.shop-form .pl-step-btns .pl-back{background:var(--white)}
.shop-form .pl-steps{display:flex; gap:8px; margin:0 0 6px; padding:0; list-style:none; counter-reset:none}
.shop-form .pl-steps li{flex:1; display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--muted)}
.shop-form .pl-steps li b{width:30px; height:30px; flex:none; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; background:var(--white); color:var(--ink); font:800 15px/1 var(--display)}
.shop-form .pl-steps li span{text-transform:none; letter-spacing:0}
.shop-form .pl-steps li[aria-current] {color:var(--ink)}
.shop-form .pl-steps li[aria-current] b{background:var(--sun)}
.shop-form .pl-steps li[data-done] b{background:var(--green-d); color:var(--white)}
.next-steps{display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none}
.next-steps li{display:flex; gap:14px; align-items:flex-start}
.next-steps .n{width:40px; height:40px; flex:none; border-radius:50%; background:var(--sun); border:1.5px solid var(--ink); display:grid; place-items:center; font:800 19px/1 var(--display)}
.next-steps b{display:block; font:600 20px/1.2 var(--display)}
.next-steps p{color:var(--muted)}
.terms{display:grid; gap:8px; margin:20px 0 0; padding-left:20px}

@media (max-width:1100px){
  .nav{display:none}
  .menu{display:block}
}
@media (max-width:900px){
  .hero .wrap,.receipt-band .wrap,.faq-wrap,.price-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{min-height:380px}
  .how{grid-template-columns:1fr 1fr}
  .looks{grid-template-columns:1fr 1fr}
  .friday .wrap{grid-template-columns:1fr; justify-items:start}
  .faq-wrap .penny{display:none}
  .final .final-grid{grid-template-columns:minmax(0,1fr)}
  .final-art{min-height:270px}
  .page-head .penny{width:110px; height:143px}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .band{padding:60px 0}
  .how,.looks,.includes,.never,.two{grid-template-columns:minmax(0,1fr)}
  .style-pick{grid-template-columns:1fr 1fr}
  .logo{font-size:19px}
  .header-min .btn{display:none}
  .logo svg{width:38px; height:35px}
  .hero{padding-bottom:56px}
  .hero .sub{font-size:19px}
  .hero-art{min-height:330px}
  .hero-art .penny{width:200px; height:260px; margin-left:-100px; top:70px}
  .speech{font-size:20px; left:0}
  .tagprice{right:0; bottom:0}
  .tagprice b{font-size:28px}
  .page-head .wrap{grid-template-columns:1fr}
  .page-head .penny{display:none}
  .form-card{padding:20px 16px}
  .receipt{font-size:14px; padding:20px 18px 34px; transform:none}
  .extras li{padding:14px 16px}
  .site-footer .bottom .host{display:none}
  .shop-form .pl-steps li span{display:none}
  .shop-form .pl-steps li[aria-current] span{display:inline}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* get started: the form, and the customer's website taking shape beside it */
.gs-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:22px 34px; align-items:start; align-content:start}
.gs-intro{grid-column:1 / -1}
.gs-wrap .shop-form{align-self:start; align-content:start}
.live-preview{position:sticky; top:24px; align-self:start}
.browser{overflow:hidden; padding:0}
.browser .bb{padding:10px 14px; background:#EDEBF3; border-bottom:1.5px solid var(--ink)}
.ls-url{display:block; background:var(--white); border-radius:999px; padding:5px 14px; font-weight:800; font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.live-site{--ls-bg:#FFFFFF; --ls-fg:#1E1B2E; --ls-acc:#9C98AE; --ls-accfg:#FFFFFF; --ls-font:Figtree,sans-serif;
  background:var(--ls-bg); color:var(--ls-fg); min-height:380px; transition:background-color .25s ease-out, color .25s ease-out}
.ls-nav{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid rgba(128,128,128,.25); font-weight:800; font-size:15px}
.ls-logo{display:flex; align-items:center; gap:9px; min-width:0}
.ls-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--ls-font)}
.ls-initial{width:30px; height:30px; flex:none; border-radius:8px; background:var(--ls-acc); color:var(--ls-accfg); display:grid; place-items:center; font-weight:800}
.ls-phone{color:var(--ls-acc); white-space:nowrap}
.ls-hero{display:grid; gap:12px; padding:36px 20px 30px}
.ls-head{font-family:var(--ls-font); font-weight:800; font-size:34px; line-height:1.05}
.live-site.is-caps .ls-head{text-transform:uppercase; font-weight:400}
.ls-sub{font-size:17px; opacity:.85}
.ls-btn{justify-self:start; background:var(--ls-acc); color:var(--ls-accfg); padding:10px 16px; border-radius:6px; font-weight:800; font-size:14px}
.ls-serv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 20px 26px}
.ls-serv span{min-height:64px; border-radius:10px; padding:12px; font-weight:800; font-size:14px; background:rgba(128,128,128,.12); display:flex; align-items:flex-end}
.live-site.is-blank .ls-name,.live-site.is-blank .ls-head,.live-site.is-blank .ls-sub{opacity:.45}
@media (max-width:900px){
  .gs-wrap{grid-template-columns:minmax(0,1fr)}
  .live-preview{position:static}
}
@media (max-width:600px){
  .ls-head{font-size:28px}
  .ls-serv{grid-template-columns:minmax(0,1fr)}
  .ls-serv span{min-height:0}
}


/* ===== Option A: Penny, grown up ===== */
h1,h2,h3{font-weight:900; letter-spacing:-.02em}
h3{font-weight:800}
.btn{background:var(--ink); color:var(--white); border:1.5px solid var(--ink); border-radius:10px; box-shadow:none; font-weight:800}
.btn:hover{background:#3A3650; color:var(--white)}
.btn:active{transform:translateY(1px); box-shadow:none}
.btn.alt{background:transparent; color:var(--ink)}
.btn.alt:hover{background:var(--white); color:var(--ink)}
.btn.sun{background:var(--sun); color:var(--ink); border-color:var(--sun)}
.btn.sun:hover{background:#FFE29A; color:var(--ink)}
.sticker{border:1.5px solid var(--line); border-radius:14px; box-shadow:none}
.awning{height:12px; -webkit-mask:none; mask:none; background:repeating-linear-gradient(90deg, var(--green) 0 30px, var(--white) 30px 60px)}
.site-header{margin-top:0; padding-top:0}
.logo{font-weight:800; letter-spacing:-.01em}
.logo svg{width:38px; height:35px}
.nav .btn{border-radius:10px}
.hero h1{font-size:clamp(44px,5.6vw,72px); line-height:1.02}
.hero .sub{font-weight:600}
.hero .sub b{background:none; border:0; padding:0; font-weight:800}
.hero-art .penny{width:200px; height:260px; margin-left:-40px; top:40px; animation:none; transform:rotate(-5deg)}
.speech{border-width:1.5px; font:800 20px/1.1 var(--body); padding:10px 16px; left:12%; }
.speech::after{border-right-width:1.5px; border-bottom-width:1.5px}
.tagprice{background:var(--white); color:var(--ink); border:1.5px solid var(--ink); border-radius:12px; transform:none; left:2%; right:auto; bottom:40px; text-align:left; padding:14px 18px}
.tagprice b{font-weight:900}
.tagprice span{font-weight:600}
.how .n{width:auto; height:auto; border:0; border-radius:0; background:none; display:block; font:800 15px/1 var(--body); color:var(--green-d); place-items:initial}
.how .n::before{content:"Step "}
.how h3{font-size:21px}
.receipt{border-width:1.5px}
.looks li{border-color:var(--line)}
.looks .mock{border-bottom:1px solid var(--line)}
.faq details{border:1.5px solid var(--line); border-radius:14px}
.faq summary{font:800 19px/1.3 var(--body)}
.faq-wrap .penny{width:170px; height:221px}
.final-art .penny{width:170px; height:221px}
.chip{border:0; font-weight:800}
.friday .shopart{width:120px; height:111px}
.page-head .penny{width:120px; height:156px}
.hello .penny{width:64px; height:83px}
.hello p{border:1.5px solid var(--line); font:800 19px/1.25 var(--body); background:var(--white)}
.extras li{border:1.5px solid var(--line)}
.shop-form input[type=text],.shop-form input[type=email],.shop-form input[type=tel],.shop-form input[type=url],.shop-form select,.shop-form textarea{border:1.5px solid #BDB9CC; border-radius:10px; font-weight:600}
.shop-form input:focus,.shop-form select:focus,.shop-form textarea:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--sun)}
.shop-form button[type=submit],.shop-form .pl-step-btns button{background:var(--ink); color:var(--white); border:1.5px solid var(--ink); border-radius:10px; box-shadow:none}
.shop-form .pl-step-btns .pl-back{background:var(--white); color:var(--ink)}
.shop-form .pl-steps li b{border-width:1.5px}
.style-pick label{border:1.5px solid #BDB9CC; border-radius:10px}
.style-pick label:has(input:checked){box-shadow:none; outline:2.5px solid var(--green-d); outline-offset:-1px}
.choice label{border:1.5px solid #BDB9CC}
.next-steps .n{border-width:1.5px}
.browser .bb{border-bottom:1px solid var(--line)}
.penny text{font-family:"Figtree",system-ui,sans-serif; font-weight:900}
@media (max-width:600px){
  .hero-art .penny{width:170px; height:221px; margin-left:-20px; top:50px}
  .speech{left:0; font-size:18px}
  .tagprice{left:0; bottom:10px}
}

/* the six looks, each a small mock website with its own photo, type and colours */
.site-mock{--m-bg:#FFFFFF; --m-fg:#1E1B2E; --m-acc:#1E1B2E; --m-accfg:#FFFFFF; --m-font:var(--body); background:var(--m-bg); color:var(--m-fg); border-bottom:1px solid var(--line)}
.sm-nav{display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; font-weight:800}
.sm-biz{font-family:var(--m-font); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.sm-links{display:flex; gap:10px; margin-left:auto; opacity:.75}
.sm-cta-s{white-space:nowrap; color:var(--m-acc)}
.sm-hero{position:relative; height:190px; overflow:hidden}
.sm-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sm-hero::after{content:""; position:absolute; inset:0; background:var(--m-shade)}
.sm-copy{position:relative; z-index:1; height:100%; display:grid; align-content:end; justify-items:start; gap:6px; padding:16px}
.sm-head{font-family:var(--m-font); font-size:25px; line-height:1.02; color:var(--m-headfg, #FFFFFF)}
.sm-sub{font-size:13px; font-weight:600; color:var(--m-headfg, #FFFFFF); opacity:.92}
.sm-btn{margin-top:4px; background:var(--m-acc); color:var(--m-accfg); font-size:13px; font-weight:800; padding:7px 11px; border-radius:var(--m-r, 4px)}
.sm-chips{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:10px 14px 14px}
.sm-chips span{font-size:12px; font-weight:800; padding:8px; border-radius:var(--m-r, 4px); background:var(--m-chip); color:var(--m-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.m-trade{--m-bg:#141414; --m-fg:#FFFFFF; --m-acc:#FFD400; --m-accfg:#141414; --m-font:Impact,"Arial Black",sans-serif; --m-shade:linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.25)); --m-chip:#262626; --m-r:2px}
.m-trade .sm-biz,.m-trade .sm-head{text-transform:uppercase; letter-spacing:.01em; font-weight:400}
.m-clean{--m-fg:#14324A; --m-acc:#1E6FD9; --m-shade:linear-gradient(90deg, rgba(255,255,255,.94) 0 48%, rgba(255,255,255,.2)); --m-headfg:#14324A; --m-chip:#EAF2FC; --m-r:8px}
.m-clean .sm-head{font-weight:800}
.m-craft{--m-bg:#F2E8DA; --m-fg:#3B2A1E; --m-acc:#8A4B2A; --m-font:Georgia,"Times New Roman",serif; --m-shade:linear-gradient(0deg, rgba(43,26,14,.8), rgba(43,26,14,.05)); --m-chip:#E6D6C0}
.m-craft .sm-head{font-weight:700}
.m-studio{--m-bg:#111111; --m-fg:#EEEEEE; --m-acc:transparent; --m-accfg:#C9A86A; --m-shade:linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.35)); --m-chip:#1F1F1F}
.m-studio .sm-head{text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:22px}
.m-studio .sm-btn{border:1px solid #C9A86A}
.m-studio .sm-cta-s,.m-studio .sm-biz{color:#C9A86A; letter-spacing:.08em}
.m-calm{--m-bg:#F3F7F4; --m-fg:#2F4A3F; --m-acc:#2F4A3F; --m-shade:linear-gradient(0deg, rgba(243,247,244,.96) 0 42%, rgba(243,247,244,.1)); --m-headfg:#2F4A3F; --m-chip:#E1ECE5; --m-r:999px}
.m-calm .sm-head{font-weight:600}
.m-bright{--m-bg:#FFF4D6; --m-fg:#2A1A5E; --m-acc:#C2185B; --m-shade:linear-gradient(0deg, rgba(42,26,94,.82), rgba(42,26,94,.1)); --m-chip:#FFE4EC; --m-r:999px}
.m-bright .sm-head{font-weight:900}
.looks .info{padding:14px 16px 18px}

/* Penny with what she says: one unit, the bubble always beside her head */
.hero-art,.final-art{min-height:0; display:grid; place-items:center}
.penny-says{position:relative; margin:0; display:grid; grid-template-columns:auto max-content; align-items:start; width:max-content; max-width:100%; }
.ps-bubble{position:relative; z-index:2; margin:34px -18px 0 0; background:var(--white); color:var(--ink); border:1.5px solid var(--ink); border-radius:16px;
  padding:10px 16px; font:800 20px/1.1 var(--body); white-space:nowrap}
.ps-bubble::after{content:""; position:absolute; right:-9px; bottom:12px; width:16px; height:16px; background:var(--white);
  border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink); transform:rotate(45deg)}
.ps-penny{display:block; width:190px; height:247px; overflow:visible}
.ps-tag{position:absolute; left:6px; bottom:6px; z-index:2; margin:0; background:var(--white); color:var(--ink); border:1.5px solid var(--ink); border-radius:12px; padding:10px 14px; line-height:1.15}
.ps-tag b{display:block; font:900 30px/1 var(--body)}
.ps-tag span{font-weight:600; font-size:14px}
.penny-says .arm{transform-box:view-box; transform-origin:16px 70px; animation:penny-wave 2.4s ease-in-out infinite}
@keyframes penny-wave{0%,55%,100%{transform:rotate(0)} 10%{transform:rotate(-16deg)} 20%{transform:rotate(10deg)} 30%{transform:rotate(-14deg)} 40%{transform:rotate(6deg)}}
.final-art .ps-penny{width:160px; height:208px}
.hero-art .ps-penny{width:260px; height:338px}
.hero-art .ps-bubble{font-size:23px; margin-top:52px; padding:12px 18px}
.hero-art .ps-tag{left:0; bottom:18px; padding:12px 16px}
.hero-art .ps-tag b{font-size:34px}
@media (max-width:600px){
  .ps-penny,.hero-art .ps-penny{width:160px; height:208px}
  .hero-art .ps-bubble{font-size:18px; margin-top:26px; padding:10px 14px}
  .hero-art .ps-tag b{font-size:26px}
  .ps-tag{position:static; grid-column:1 / -1; justify-self:center; margin-top:10px; text-align:center}
  .ps-bubble{font-size:17px; margin-top:24px}
  .ps-tag b{font-size:24px}
}

/* header call to action: a light sweep every few seconds */
.nav .btn{position:relative; overflow:hidden}
.nav .btn::after{content:""; position:absolute; top:0; bottom:0; left:0; width:45%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform:translateX(-130%) skewX(-20deg); animation:cta-sweep 5s ease-in-out 1.2s infinite}
@keyframes cta-sweep{0%{transform:translateX(-130%) skewX(-20deg)} 28%,100%{transform:translateX(320%) skewX(-20deg)}}
.nav .btn:hover{transform:translateY(-1px)}

/* legal pages */
.legal{max-width:760px; display:grid; gap:14px}
.legal h2{font-size:26px; margin-top:18px}
.legal p,.legal li{max-width:68ch}
.legal ul{margin:0; padding-left:20px; display:grid; gap:8px}

/* each look laid out its own way */
.m-clean .sm-hero{display:grid; grid-template-columns:1fr 1fr; height:190px}
.m-clean .sm-hero::after{display:none}
.m-clean .sm-hero img{position:static; grid-column:2; grid-row:1; border-radius:0}
.m-clean .sm-copy{grid-column:1; grid-row:1; align-content:center; padding:14px}
.m-clean .sm-head{font-size:22px}
.m-craft .sm-hero{height:auto; display:grid}
.m-craft .sm-hero::after{display:none}
.m-craft .sm-hero img{position:static; height:112px}
.m-craft .sm-copy{justify-items:center; text-align:center; padding:14px 16px 6px; --m-headfg:#3B2A1E}
.m-craft .sm-head{font-size:24px}
.m-craft .sm-chips{grid-template-columns:repeat(3,auto); justify-content:center}
.m-studio .sm-copy{align-content:center; justify-items:center; text-align:center}
.m-calm .sm-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:12px; height:auto; padding:14px; align-items:center}
.m-calm .sm-hero::after{display:none}
.m-calm .sm-hero img{position:static; height:150px; border-radius:18px}
.m-calm .sm-copy{grid-column:1; grid-row:1; padding:0; align-content:center}
.m-calm .sm-head{font-size:22px}
.m-bright .sm-hero{height:128px}
.m-bright .sm-copy{align-content:center; justify-items:center; text-align:center}
.m-bright .sm-sub{display:none}
.price-side{display:grid; gap:22px; justify-items:center; min-width:0; width:100%; }
.deal{grid-column:1 / -1; max-width:none; padding:18px 22px; background:var(--warm)}
.deal b{display:block; font-size:18px; margin-bottom:4px}

/* what's included */
.included{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 28px; margin:34px 0 0; padding:0; list-style:none}
.included li{display:grid; gap:10px; align-content:start}
.included svg{width:30px; height:30px; fill:var(--green-d)}
.included h3{font-size:19px}
.included p{color:var(--muted); font-size:16px}
@media (max-width:900px){.included{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.included{grid-template-columns:minmax(0,1fr)}}

/* photo tiles inside a look */
.sm-chips .sm-tile{position:relative; height:58px; padding:0; overflow:hidden; display:block; background:none}
.sm-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sm-tile b{position:absolute; left:0; right:0; bottom:0; padding:5px 7px; font-size:12px; font-weight:600}
.m-studio .sm-tile b{color:#FFFFFF; background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0))}
.m-bright .sm-tile{border-radius:10px}
.m-bright .sm-tile b{color:#2A1A5E; background:rgba(255,255,255,.9); text-align:center}
.site-footer .fb-link{display:inline-flex; align-items:center; gap:6px}
.site-footer .fb-link svg{width:20px; height:20px; fill:currentColor}

/* log in links */
.min-links{display:flex; align-items:center; gap:20px}
.min-links a:not(.btn){color:var(--ink); font-weight:800; text-decoration:none; white-space:nowrap}
.min-links a:not(.btn):hover{color:var(--green-d)}
.have-account{margin-top:10px; font-weight:600}
.have-account a{color:var(--ink); font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px}

/* about */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
.about-copy{display:grid; gap:14px}
.about-copy p{font-size:18px; max-width:56ch}
.then-now{list-style:none; margin:0; padding:0; background:var(--white); border:1.5px solid var(--ink); border-radius:14px; overflow:hidden}
.then-now li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:14px 20px; border-top:1px solid #E7E3D6}
.then-now li:first-child{border-top:0}
.then-now li span:first-child{color:var(--muted)}
.then-now li span:last-child{font-weight:800}
.then-now .tn-head{background:var(--ink); color:var(--white); font-weight:800}
.then-now .tn-head span:first-child{color:#D9D6E8}
.then-now .tn-head span:last-child{color:var(--sun)}
.more-list{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.about-grid{grid-template-columns:minmax(0,1fr)} .more-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.then-now li{padding:12px 16px; gap:12px; font-size:15px}}
.more-list svg{fill:var(--green-d)}