/* The company's own pages. Nothing here is shared with the themes venues' sites are made from.
   The layout follows John's reference of 2026-10-01; the blue is the logo's. */
@font-face{font-family:"DM Sans Variable";font-style:normal;font-display:swap;font-weight:100 1000;src:url(fonts/dm-sans-latin-wght-normal.woff2) format("woff2-variations")}
:root{--ink:#0f1a3a;--muted:#55607a;--line:#dfe6f3;--paper:#fff;--soft:#f2f6fd;--brand:#1e52a4;--brand-dark:#173f80;--sun:#ffc93c;--card:#fff;--radius:1rem;--shadow:0 14px 40px -18px rgba(16,42,90,.3);--shadow-s:0 6px 20px -12px rgba(16,42,90,.28)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 "DM Sans Variable",system-ui,-apple-system,"Segoe UI",sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{letter-spacing:-.03em;line-height:1.1}
h1{font-size:clamp(2.4rem,5.2vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:800}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.fine{font-size:.86rem;color:var(--muted)}
.fine--center{text-align:center;margin-top:1.75rem}
.sub{color:var(--muted);font-size:1.08rem;margin-top:.9rem;max-width:30rem}
/* The yellow stroke under the words that matter. */
.mark{white-space:nowrap;padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c60-6 150-7 294-2' fill='none' stroke='%23ffc93c' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .32em no-repeat}

.brand{display:inline-flex}
.brand img{height:3.5rem;width:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 10px 22px -12px rgba(30,82,164,.75);transition:background .15s,transform .15s}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.btn--go::after{content:"\2192";font-weight:500}
.btn--small{padding:.6rem 1.15rem;font-size:.92rem;box-shadow:none}
.btn--ghost{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.btn--ghost:hover{background:var(--soft)}
.btn--light{background:#fff;color:var(--brand);box-shadow:none}
.btn--light:hover{background:var(--soft)}
.btnrow{display:flex;flex-wrap:wrap;gap:.75rem}

.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:1.5rem;padding-block:.4rem}
.top__nav{display:flex;gap:1.75rem;margin-right:auto;margin-left:1rem;font-weight:500;font-size:.95rem}
.top__nav a,.top__login{text-decoration:none;color:var(--ink)}
.top__nav a:hover,.top__login:hover{color:var(--brand)}
.top__login{font-weight:600;font-size:.95rem}
/* The phone's menu: a button at the end of the bar, and the links in a sheet under the bar. */
/* The country and currency chooser: the flag and currency of the page's country, and a list. */
.where{position:relative}
.where summary{display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border-radius:.8rem;color:var(--ink);font-weight:600;font-size:.9rem;cursor:pointer;list-style:none;white-space:nowrap}
.where summary::-webkit-details-marker{display:none}
.where summary:hover,.where[open] summary{background:var(--soft)}
.where summary:focus-visible{outline:3px solid #ffc93c;outline-offset:2px}
.where img{display:block;width:1.5rem;height:1.125rem;border-radius:3px;box-shadow:0 0 0 1px rgba(16,26,58,.14);object-fit:cover}
.where summary svg{color:var(--muted);transition:transform .15s}
.where[open] summary svg{transform:rotate(180deg)}
.where__panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:30;display:grid;width:17.5rem;padding:.5rem;border:1px solid var(--line);border-radius:1rem;background:#fff;box-shadow:0 24px 50px -20px rgba(16,42,90,.4)}
.where__panel p{margin:0;padding:.45rem .6rem .35rem;color:var(--muted);font-size:.8rem;font-weight:600}
.where__panel a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:.6rem;color:var(--ink);font-size:.95rem;font-weight:500;text-decoration:none}
.where__panel a:hover{background:var(--soft)}
.where__panel a[aria-current]{background:var(--soft);font-weight:700}
.where__panel em{color:var(--muted);font-style:normal;font-size:.82rem;font-weight:600}
.menu{display:none}
.menu summary{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.8rem;color:var(--ink);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{background:var(--soft)}
.menu__cross,.menu[open] .menu__bars{display:none}
.menu[open] .menu__cross{display:inline}
.menu__panel{position:absolute;left:0;right:0;top:100%;display:grid;padding:.5rem 1.25rem 1rem;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(16,42,90,.35)}
.menu__panel a{padding:.85rem .25rem;border-bottom:1px solid var(--line);font-weight:600;font-size:1.05rem;text-decoration:none;color:var(--ink)}
.menu__panel a:nth-last-child(2){border-bottom:0;color:var(--brand)}
.menu__panel .btn{margin-top:.6rem;padding:.85rem 1.4rem;border-bottom:0;color:#fff;font-size:1rem}

.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#eaf1fd 0%,#f6f9fe 70%,#fff 100%);padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem)}
.hero__grid{display:grid;gap:3rem;align-items:center}
.lead{font-size:clamp(1.05rem,1.4vw,1.18rem);color:var(--muted);margin-block:1.3rem 1.8rem;max-width:31rem}
.hero .fine{margin-top:1rem}
/* Three of our examples: one in a browser, a phone's view of the others behind it. */
.hero__art{position:relative;padding:5% 13% 3%}
.shot{border-radius:.8rem;overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line)}
.shot--main{position:relative}
.shot--left,.shot--right{position:absolute;top:0;width:30%;aspect-ratio:9/15.5}
.shot--left img,.shot--right img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot--left{left:0;transform:rotate(-4deg)}
.shot--right{right:0;top:6%;transform:rotate(4deg)}
.browser{border-radius:.8rem;overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line)}
.browser__bar{display:flex;gap:.3rem;align-items:center;height:1.5rem;padding-inline:.7rem;background:#f1f4fa;border-bottom:1px solid var(--line)}
.browser__bar i{width:.45rem;height:.45rem;border-radius:50%;background:#cbd4e6}

.section{padding-block:clamp(3rem,6.5vw,5.25rem)}
.section--tight{padding-block:clamp(2rem,4vw,3rem)}
.section--soft{background:var(--soft)}
.head{max-width:42rem;margin:0 auto clamp(1.75rem,3.5vw,2.75rem);text-align:center}
.head p{color:var(--muted);margin-top:.7rem;font-size:1.05rem}
.head--left{margin-inline:0;text-align:left}

.ticks{display:grid;gap:.55rem;margin-top:1.5rem}
.ticks li{position:relative;padding-left:1.9rem;font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.ticks--small{margin-top:0;gap:.4rem;font-size:.95rem}

.built{display:grid;gap:2.5rem;align-items:center}
.parts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.part{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden}
.part figcaption{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;font-weight:700;font-size:.95rem}
.part img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-top:1px solid var(--line)}
.dot{width:.7rem;height:.7rem;border-radius:50%}
.dot--pink{background:#e0457b}.dot--green{background:#2f9e6a}.dot--sun{background:var(--sun)}.dot--blue{background:var(--brand)}

.designs{display:grid;gap:2rem}
/* Each example: its page in a browser window, with its phone view laid over the corner (John,
   2026-10-03: the one thing he liked in a mock-up was the phone superimposed on the desktop). */
.design__shots{position:relative;padding:0 6% 14% 0}
.design__phone{position:absolute;right:0;bottom:0;width:31%;aspect-ratio:9/18.5;border-radius:1.1rem;overflow:hidden;background:#1d1d2b;border:3px solid #1d1d2b;box-shadow:0 18px 40px -18px rgba(16,42,90,.55)}
.design__phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.85rem;display:block}
.design{display:block;text-decoration:none;transition:transform .2s}
.design:hover{transform:translateY(-4px)}
.design h3{margin-top:1rem;font-size:1.3rem}
.design p{color:var(--muted);margin-top:.15rem}
.design__look{display:inline-block;margin-right:.35rem;padding:.1rem .55rem;border-radius:999px;background:var(--soft);color:var(--brand);font-size:.8rem;font-weight:700}
.design__link{display:inline-block;margin-top:.5rem;font-weight:700;color:var(--brand)}
.design__link::after{content:" \2192"}
/* Under each example: begin the builder with that kind of venue already chosen. */
.designcard{display:grid;align-content:start;justify-items:start;gap:.7rem}
.designcard .design{justify-self:stretch}
.design__start{display:inline-flex;align-items:center;padding:.5rem 1.05rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand);font-weight:700;font-size:.9rem;text-decoration:none;transition:background .15s,color .15s}
.design__start:hover{background:var(--brand);color:#fff}
.design__start:focus-visible{outline:3px solid #ffc93c;outline-offset:3px}

.handle{display:grid;gap:2.5rem;align-items:center}
.laptop{padding-inline:4%}
.laptop__screen{border:.55rem solid #1b2233;border-bottom-width:.7rem;border-radius:.9rem .9rem 0 0;overflow:hidden;background:#1b2233;box-shadow:var(--shadow)}
.laptop__screen img{border-radius:.25rem}
.laptop__base{height:.7rem;margin-inline:-4.5%;border-radius:0 0 .8rem .8rem;background:linear-gradient(#d5dbe7,#aeb7c9)}

.stages{display:grid;gap:1.5rem}
.stages li{position:relative;display:grid;gap:.7rem;justify-items:start;align-content:start}
.stages img{width:100%;aspect-ratio:900/534;object-fit:cover;object-position:top;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-s);background:#fff}
.stages p{color:var(--muted)}
.pill{padding:.2rem .8rem;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;font-size:.82rem}

.steps{display:grid;gap:1.75rem}
.steps li{display:flex;gap:1.1rem;align-items:center}
.steps__icon{position:relative;flex:none;display:grid;place-items:center;width:4.6rem;height:4.6rem;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s)}
.steps__icon svg{width:2rem;height:2rem;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.steps__icon b{position:absolute;left:-.3rem;top:-.3rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brand);color:#fff;font-size:.85rem}
.steps p,.grid p{color:var(--muted);margin-top:.25rem;font-size:.95rem}

.grid{display:grid;gap:1rem}
.grid li{background:var(--soft);border-radius:var(--radius);padding:1.25rem}
.grid svg{width:1.9rem;height:1.9rem;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.7rem}

.price{display:grid;gap:1.5rem;align-items:center;background:var(--soft);border-radius:1.5rem;padding:clamp(1.25rem,3vw,2rem)}
.price__lead p{color:var(--muted);margin-top:.7rem}
.price__box{display:grid;gap:1.5rem;background:var(--card);border-radius:1.1rem;padding:clamp(1.25rem,3vw,1.75rem);box-shadow:var(--shadow-s);align-items:center}
.price__figure{font-size:1.1rem;color:var(--muted)}
.price__figure strong{font-size:clamp(2.6rem,5vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);margin-right:.1em}
.price__or{margin-top:.5rem}
.price__main .fine{margin-top:.4rem}
.price__side{display:grid;gap:1rem}
.price__main a{color:var(--brand);font-weight:600}
.countries{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .9rem;max-width:44rem;scroll-margin-top:6rem}
.countries a{color:var(--muted)}
.countries a[aria-current]{color:var(--ink);font-weight:700;text-decoration:none}
.price__soon{margin-top:1rem;background:#fff7dd;border-radius:.9rem;padding:.8rem 1.1rem;font-size:.95rem;text-align:center}

.questions{display:grid;gap:1.5rem}
.questions__lead p{color:var(--muted);margin-top:.6rem}
.questions__lead a{color:var(--brand);font-weight:600}
.faqs{display:grid;gap:.6rem;align-items:start}
.faqs details{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:0 1.1rem}
.faqs summary{cursor:pointer;list-style:none;padding:.85rem 2rem .85rem 0;font-weight:600;font-size:.97rem;position:relative}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;font-size:1.4rem;font-weight:500;color:var(--brand)}
.faqs details[open] summary::after{content:"\2212"}
.faqs details p{color:var(--muted);padding-bottom:1rem;font-size:.95rem}

.cta{position:relative;overflow:hidden;margin-top:clamp(1.5rem,3vw,2.5rem);background:var(--brand);color:#fff;padding-block:clamp(2.25rem,5vw,3.25rem)}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.cta::before{width:16rem;height:16rem;left:-5rem;bottom:-9rem}
.cta::after{width:22rem;height:22rem;right:-7rem;top:-13rem}
.cta__in{position:relative;display:grid;gap:1.5rem;align-items:center}
.cta p{margin-top:.5rem;color:#dbe6fa}

.foot{padding-block:2.25rem;font-size:.9rem;color:var(--muted)}
.foot__in{display:grid;gap:.5rem;justify-items:center;text-align:center}
.brand--foot img{height:3rem}

.doc{padding-block:clamp(2.5rem,6vw,4.5rem)}
.doc .wrap{width:min(100% - 2.5rem,46rem)}
.doc h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6rem}
.doc h2{font-size:1.35rem;margin:2.2rem 0 .6rem;letter-spacing:-.015em}
.doc h3{margin:1.5rem 0 .45rem;font-size:1.05rem}
.doc p,.doc li{color:#333d57}
.doc p+p{margin-top:.8rem}
.doc ul{list-style:disc;padding-left:1.3rem;display:grid;gap:.4rem;margin-top:.6rem}
.doc ul+p,.doc ol+p,.doc ol+ul{margin-top:.8rem}
.doc ol{list-style:decimal;padding-left:1.3rem;display:grid;gap:.4rem;margin-top:.6rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem;padding:clamp(1.25rem,3.5vw,2rem);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-s)}
.contact label{display:grid;gap:.35rem;font-weight:600;min-width:0}
.contact__wide,.contact .btn,.contact__said{grid-column:1/-1}
.contact input,.contact textarea{font:inherit;width:100%;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:.7rem;background:var(--soft);color:var(--ink)}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.contact textarea{resize:vertical}
.contact .btn{justify-self:start;border:0;font:inherit;font-weight:700;cursor:pointer}
.contact .btn:disabled{opacity:.6;cursor:default;transform:none}
.contact__trap{position:absolute;left:-200vw;width:1px;height:1px;opacity:0}
.contact__said{margin:0!important;padding:.8rem 1rem;border-radius:.7rem;background:var(--soft);font-weight:600;color:var(--ink)!important}
.contact.is-sent>:not(.contact__said){display:none}
@media (max-width:34rem){.contact{grid-template-columns:1fr}}
.help__lead{font-size:1.12rem;color:var(--muted)!important;max-width:34rem}
.help__start{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;margin-top:1.6rem;align-items:stretch}
.help__topics,.help__hand{padding:1.3rem 1.4rem;border-radius:var(--radius);background:var(--soft)}
.help__start h2{margin:0 0 .6rem;font-size:1.08rem;letter-spacing:-.01em}
.help__topics ul{list-style:none;padding:0;margin:0;gap:.35rem;font-weight:600}
.help__hand{display:grid;align-content:start;justify-items:start;gap:.2rem;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.help__hand .btn{margin-top:.8rem;color:#fff}
@media (max-width:40rem){.help__start{grid-template-columns:1fr}}
.doc a{color:var(--brand)}

@media (min-width:44rem){
  .designs{grid-template-columns:repeat(3,1fr);gap:1.75rem}
  .stages{grid-template-columns:repeat(3,1fr);gap:2.75rem}
  .stages li+li::before{content:"\2192";position:absolute;left:-2rem;top:42%;font-size:1.3rem;color:var(--brand)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .faqs{grid-template-columns:1fr 1fr}
  .price__box{grid-template-columns:1.1fr 1fr}
  .cta__in{grid-template-columns:1fr auto}
}
@media (min-width:62rem){
  .hero__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:2.5rem}
  .built{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem}
  .handle{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:3.5rem}
  .grid{grid-template-columns:repeat(5,1fr)}
  .price{grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:2.5rem}
  .questions{grid-template-columns:minmax(0,.4fr) minmax(0,1.6fr);gap:2.5rem}
}
/* On a phone or tablet the bar is the logo and the menu button. The "Build your site free" button
   is not in the bar there (the same button is under the headline just below; John, 2026-10-03);
   it is the last thing in the menu's sheet, so it is still one tap away further down the page. */
@media (max-width:61.99rem){
  .top__nav,.top__login,.top__cta{display:none}
  /* The chooser sits beside the menu button, and its list opens across the page as the menu's does. */
  .where{position:static;margin-left:auto}
  .where__panel{left:0;right:0;top:100%;width:auto;border-radius:0;border-width:0 0 1px;padding:.5rem 1.25rem 1rem}
  .where__panel a{padding:.75rem .25rem}
  .menu{display:block}
}
@media (max-width:43.99rem){
  .brand img{height:3rem}
  .designs{max-width:26rem;margin-inline:auto}
  .hero__art{padding-inline:9%}
}

/* The top of the page arrives once, then everything stays still. */
@media (prefers-reduced-motion:no-preference){
  .hero__text>*,.shot--main{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero__text>:nth-child(2){animation-delay:.06s}
  .hero__text>:nth-child(3){animation-delay:.12s}
  .hero__text>:nth-child(4){animation-delay:.18s}
  .shot--main{animation-delay:.15s;animation-duration:.9s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}