/* freeweddingwebsite.co.uk: the parts only this site has, on top of the UK Wedding Websites stylesheet
   (Boudoir Glam look: blush satin, black lace, pearls, Italiana and Great Vibes). Colours come from the look's tokens. */

/* header: "claim your free link" in place of the theme search */
.fw-claim{padding-left:14px}
.fw-claim label{font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.fw-claim input{padding-left:0}
.fw-claim button{background:var(--acc);color:#fff}
@media (max-width:1180px){.fw-claim label{display:none}.fw-claim{padding-left:16px}}

/* hero: the copy on the left, the sign-up form on the right with couples' prints fading behind it */
.fw-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center;gap:20px 40px;padding-block:22px 60px;min-height:0}
.fw-hero .m-copy{gap:16px}
.fw-hero .m-h1{font-size:clamp(38px,4.4vw,62px)}
.fw-formcol{position:relative;z-index:2;padding:14px 0 10px 92px}
.fw-formcol .hx-pol{z-index:1}
.fw-formcol .hx-p1{left:0;top:4%}
.fw-formcol .hx-p2{left:14px;top:auto;bottom:8%}
.fw-formcol .su,.fw-formcol .su-done{position:relative;z-index:3}
.fw-toast{top:-4px;right:-18px;z-index:5;max-width:210px}
.fw-lips{position:absolute;right:-26px;bottom:18%;width:58px;height:58px;color:#C8102E;transform:rotate(14deg);z-index:4;filter:drop-shadow(0 6px 8px rgba(80,0,20,.25))}

/* the price ladder under the hero copy */
.fw-ladder{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;text-decoration:none;color:inherit;margin-top:4px}
.fw-ladder>span{display:grid;gap:1px;padding:8px 12px;border-radius:12px;background:var(--chip-bg);border:1px solid rgba(26,18,20,.08);font-size:12px;line-height:1.2}
.fw-ladder>span b{font-weight:600}
.fw-ladder>span em{font-style:normal;font-family:var(--f-ui);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.fw-ladder .fw-l0{background:var(--cta);color:var(--cta-ink);border-color:transparent}
.fw-ladder small{flex-basis:100%;font-size:12.5px;opacity:.8}
.fw-ladder:hover small{text-decoration:underline}

/* the sign-up form */
.su{display:grid;gap:9px;padding:20px 24px 18px;border-radius:24px;background:var(--card);color:var(--card-ink);border:1px solid var(--line);
  box-shadow:0 40px 70px -40px rgba(60,10,30,.55),0 0 0 6px rgba(255,255,255,.35)}
.su-h{margin:0;font:400 28px/1.05 var(--f-display);letter-spacing:.01em}
.su-h em{font-family:var(--f-script);font-style:normal;color:var(--acc);font-size:1.2em}
.su fieldset{border:0;margin:0;padding:0;min-width:0}
.su legend{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.su-sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.su-sw label{position:relative;display:grid;gap:4px;justify-items:center;cursor:pointer;font-size:10.5px;color:var(--muted);text-align:center;line-height:1.15;min-width:0}
.su-sw small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-sw input{position:absolute;opacity:0;pointer-events:none}
.su-sw span{display:grid;place-items:center;width:100%;aspect-ratio:1.12;border-radius:13px;overflow:hidden;
  background:linear-gradient(135deg,var(--t-bg) 0 56%,var(--t-acc) 56% 100%);box-shadow:0 0 0 1px var(--line),inset 0 0 0 3px rgba(255,255,255,.5);transition:box-shadow .15s,transform .15s}
.su-sw span b{font-weight:400;font-size:15px;line-height:1;color:var(--t-text);transform:translate(-16%,-18%);white-space:nowrap}
.su-sw input:checked+span{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc);transform:translateY(-2px)}
.su-sw input:checked~small{color:var(--acc)}
.su-sw input:focus-visible+span{outline:3px solid var(--acc);outline-offset:3px}
.su-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.su label>span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:3px}
.su input:not([type=radio]):not([type=checkbox]){width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:9px 13px;border-radius:12px;border:1.5px solid var(--line);background:#FFF8F6;color:var(--card-ink)}
.su input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.su-ok{display:grid!important;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;font-size:14px}
.su-ok input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--acc)}
.su-ok span{display:inline!important;font-weight:400!important;color:var(--card-ink)!important;margin:0!important}
.su-ok a{color:var(--acc)}
.su-go{width:100%;justify-content:center;padding:14px;font-size:16px}
.su-note{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.su-msg{margin:0;padding:12px 14px;border-radius:12px;background:#FCE4E8;color:#8A1E36;font-weight:600}
.su-done ol{margin:0;padding-left:20px;display:grid;gap:6px}
.su-done p{margin:0}
.hp{position:absolute;left:-9999px}

/* free design cards: the real page in a phone, on the design's colours and a couple photo */
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dc{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--card);color:var(--card-ink);border:1px solid var(--line);text-decoration:none;
  box-shadow:0 26px 50px -38px rgba(60,10,30,.6);transition:transform .2s,box-shadow .2s}
.dc:hover{transform:translateY(-4px);box-shadow:0 34px 60px -36px rgba(60,10,30,.7)}
.dc-ph{position:relative;height:350px;overflow:hidden;isolation:isolate;background:var(--t-bg)}
.dc-photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 35%;transform:scale(1.06);filter:saturate(1.2) brightness(1.04)}
.dc-ph::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(200deg,transparent 0%,transparent 35%,color-mix(in srgb,var(--t-acc) 62%,transparent) 100%),radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.18),transparent 60%)}
.dc-phone{position:absolute;left:50%;top:26px;width:170px;height:350px;transform:translateX(-50%) rotate(-3deg);padding:6px;border-radius:30px;background:#141014;
  box-shadow:0 30px 44px -18px rgba(0,0,0,.6);transition:transform .3s}
.dc-phone::before{content:"";position:absolute;left:50%;top:10px;width:46px;height:5px;margin-left:-23px;border-radius:5px;background:#2a2228;z-index:2}
.dc-scr{display:block;height:100%;border-radius:25px;overflow:hidden;background:#fff}
.dc-scr img{display:block;width:100%;height:auto;transition:transform 5s ease-in-out}
.dc:hover .dc-phone{transform:translateX(-50%) rotate(0deg)}
.dc:hover .dc-scr img,.dc:focus-visible .dc-scr img{transform:translateY(calc(-100% + 338px))}
.dc-free{position:absolute;left:14px;top:14px;padding:5px 11px;border-radius:999px;background:var(--cta);color:var(--cta-ink);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dc-mt{display:grid;gap:4px;padding:16px 18px 18px}
.dc-mt b{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.1}
.dc-mt span{font-size:14px;color:var(--muted);line-height:1.45}
.dc-mt em{font-style:normal;font-weight:700;font-size:14px;color:var(--acc);margin-top:4px}
.dc.big .dc-ph{height:420px}
.dc.big .dc-phone{width:196px;height:404px}
.dc.big:hover .dc-scr img{transform:translateY(calc(-100% + 392px))}
@media (prefers-reduced-motion:reduce){.dc-scr img,.dc-phone,.dc{transition:none}}

/* what guests see: a phone showing a real free page */
.fw-show{background:var(--s-bg);position:relative;overflow:hidden}
.fw-show .wrap{position:relative;z-index:1}
.fw-art{min-height:520px}
.fw-art .phone{left:40%}
.phone .fw-scr{display:block;padding:0;background:#fff}
.phone .fw-scr img{display:block;width:100%;height:auto}
.fw-art .hx-qr{right:auto;left:2%;bottom:6%}
.fw-price{bottom:12%}
.fw-price ul li{display:flex;justify-content:space-between}
.sec .fw-price h2{font:700 11.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}

/* the free dashboard mock-up */
.fw-meter{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.14);margin:4px 0 22px}
.fw-meter span{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,var(--nav-hi),#F3D2CB)}
.fw-meter small{position:absolute;left:0;top:14px;font-size:12px;opacity:.8}
.dash .fw-meter{background:color-mix(in srgb,currentColor 12%,transparent)}

/* photo tiles */
.fw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fw-tile{display:grid;gap:8px;align-content:start;padding:0 0 20px;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.fw-tile img{width:100%;height:170px;object-fit:cover;display:block}
.fw-tile h3,.fw-tile p,.fw-tile .more{margin:0;padding-inline:20px}
.fw-tile h3{font-family:var(--f-display);font-weight:400;font-size:23px;margin-top:8px}
.fw-tile p{color:var(--muted);font-size:15px;line-height:1.55}

/* the start page's list of what is free */
.fw-inc{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0}
.fw-inc li{font-size:14px}

.fw-ph .wrap{padding-block:48px 84px}
.foot-top{grid-template-columns:1.6fr repeat(3,minmax(0,1fr))}
.muted{color:var(--muted)}
.sec.page{padding-block:56px}

@media (max-width:1100px){
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .fw-hero .wrap{grid-template-columns:1fr}
  .fw-formcol{padding:8px 0 0}
  .fw-formcol .hx-pol,.fw-lips{display:none}
  .fw-toast{display:none}
  .fw-art{min-height:480px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .fw-tiles,.fw-inc{grid-template-columns:1fr}
}
@media (max-width:600px){
  /* on a phone the form comes straight after the headline: the design chips and prices appear further down the page */
  .fw-hero .m-chips,.fw-hero .fw-ladder{display:none}
  .fw-hero .wrap{padding-block:18px 52px}
  .su{padding:18px 16px;border-radius:20px}
  .su-sw{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .su-sw span{aspect-ratio:2}
  .su-h{font-size:25px}
  .dgrid{grid-template-columns:1fr}
  .fw-ladder>span{flex:1 1 40%}
}
@media (max-width:359px){
  .su-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}