/* Burgal Studio home page (2026-10-23 redesign): calm, masculine pastels, pictures first, few words.
   Slate blue = tech, eucalyptus = calm and Australian, clay ochre = warm and Aboriginal, sand = the page. */
:root {
  --sand: #f4efe7; --paper: #fbf8f3; --card: #ffffff;
  --slate: #4f6479; --slate-soft: #dfe6ec; --euc: #8fa898; --euc-soft: #e3ebe5;
  --clay: #2f7a72; --clay-soft: #dcefeb; --ink: #1f2428; --muted: #59626a; --line: #e4ddd2;
  --radius: 18px; --shadow: 0 18px 50px #1f242814;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.tag { display: inline-block; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--slate); }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
h2 { font-size: clamp(32px, 4.4vw, 50px); }
p { margin: 0; }
.skip { position: fixed; top: -80px; left: 16px; background: var(--card); padding: 10px 16px; z-index: 50; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }

/* dots: the quiet nod to the art, in the page colours */
.dots { background-image: radial-gradient(var(--clay) 2.2px, transparent 2.6px), radial-gradient(var(--euc) 2.2px, transparent 2.6px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; opacity: .22; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 26px; font: 600 16px/1 inherit; font-family: inherit; cursor: pointer; text-decoration: none; background: var(--ink); color: #fff; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); background: #33393f; }
.btn-light { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: var(--sand); }
.btn-clay { background: var(--clay); }
.btn-clay:hover { background: #25625b; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: #fbf8f3ee; backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 74px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.logo img { width: 48px; height: 48px; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 15px; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.top .btn { padding: 11px 20px; font-size: 14px; }
.menu { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 12px; width: 44px; height: 44px; font-size: 20px; cursor: pointer; }

/* hero */
.hero { position: relative; overflow: hidden; padding: 70px 0 60px; }
.hero .dots { position: absolute; right: -60px; top: -40px; width: 520px; height: 520px; border-radius: 50%; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.6vw, 84px); }
.hero h1 .serif { color: var(--clay); }
.hero .lead { margin-top: 22px; font-size: 20px; color: var(--muted); max-width: 470px; }
.hero .acts { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .small { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* phones with clip captions */
.phones { position: relative; height: 560px; }
.phone { position: absolute; width: 230px; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; border: 7px solid #15191c; box-shadow: var(--shadow); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone .cap { position: absolute; left: 10px; right: 10px; bottom: 24%; text-align: center; font: 800 18px/1.15 "Arial Black", Arial, sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px #000a; text-transform: uppercase; }
.phone .cap b { color: #ffb347; text-shadow: 0 2px 0 #000, 0 0 14px #ff7a00; }
.phone .hook { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 86%; background: #fff; color: #111; font: 800 13px/1.2 Arial, sans-serif; padding: 7px 11px; border-radius: 9px; text-align: center; text-transform: uppercase; }
.phone .app { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #fff; background: #0006; padding: 3px 8px; border-radius: 20px; }
.phones .p1 { left: 0; top: 60px; transform: rotate(-6deg); }
.phones .p2 { left: 50%; top: 0; transform: translateX(-50%); z-index: 2; width: 250px; }
.phones .p3 { right: 0; top: 70px; transform: rotate(6deg); }
.note { font-size: 13px; color: var(--muted); }

/* the flow strip */
.flow { padding: 30px 0 80px; }
.flow-row { display: grid; grid-template-columns: 1.3fr auto 1fr auto 1fr; gap: 18px; align-items: center; }
.flow-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.flow-card img { border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.flow-card p { margin-top: 12px; font-weight: 600; font-size: 17px; }
.flow-card small { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
.arrow { font-size: 34px; color: var(--clay); }
.minis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.minis span { aspect-ratio: 9 / 16; border-radius: 7px; }
.apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.apps span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px; background: var(--slate-soft); color: var(--slate); font-weight: 700; font-size: 14px; }

/* section heads */
.sec { padding: 90px 0; }
.sec-sand { background: var(--sand); }
.head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 38px; flex-wrap: wrap; }
.head p { max-width: 380px; color: var(--muted); }

/* what we make */
.make { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.make article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.make .pic { position: relative; aspect-ratio: 4 / 5; }
.make .pic .cap { position: absolute; left: 12px; right: 12px; bottom: 16px; text-align: center; font: 800 16px/1.15 "Arial Black", Arial, sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px #000b; text-transform: uppercase; }
.make .pic .cap b { color: #ffb347; }
.make .pic .ad { position: absolute; left: 14px; right: 14px; top: 14px; padding: 12px 14px; border-radius: 12px; background: #fffffff0; }
.make .pic .ad strong { display: block; font-size: 20px; line-height: 1.1; }
.make .pic .ad span { font-size: 13px; color: var(--muted); }
.make .pic .ad em { position: absolute; right: 12px; top: 12px; font-style: normal; background: var(--clay); color: #fff; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 20px; }
.make .txt { padding: 16px 18px 20px; }
.make h3 { font-size: 19px; }
.make .txt p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.make .wide { grid-column: span 2; }
.make .wide .pic { aspect-ratio: 16 / 10; }
.chip { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: var(--euc-soft); color: #4c6857; }
.chip-clay { background: var(--clay-soft); color: #24605a; }

/* pages on every app */
.pages { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.pages .big { font-size: clamp(30px, 3.8vw, 44px); }
.pages .big .serif { color: var(--clay); }
.pages p.say { margin-top: 18px; font-size: 19px; color: var(--muted); }
.grid-apps { display: grid; gap: 12px; }
.grid-apps .row { display: grid; grid-template-columns: 110px repeat(3, 1fr); gap: 10px; align-items: center; }
.grid-apps .row > b { font-size: 15px; }
.acct { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.acct i { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 2px solid var(--clay); }
.acct.clip i { border-color: var(--euc); }
.acct small { color: var(--muted); display: block; font-size: 11px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.steps li { list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--slate-soft); color: var(--slate); font-weight: 700; font-size: 18px; margin-bottom: 18px; }
.steps h3 { font-size: 24px; }
.steps p { margin-top: 8px; color: var(--muted); }
.steps ol { margin: 0; padding: 0; display: contents; }

/* the app */
.appbox { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.mock { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; }
.mock .bar { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mock .bar img { width: 30px; height: 30px; }
.mock .bar span { margin-left: auto; font-size: 12px; color: #3f8f5b; font-weight: 600; }
.mock .stats { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock .stats div { background: var(--paper); border-radius: 14px; padding: 14px; }
.mock .stats strong { display: block; font-size: 28px; color: var(--slate); }
.mock .stats small { color: var(--muted); font-size: 12px; }
.mock .queue { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock .queue span { aspect-ratio: 9 / 14; border-radius: 10px; }
.mock .yes { margin-top: 16px; display: flex; gap: 10px; }
.mock .yes b { flex: 1; text-align: center; padding: 12px; border-radius: 12px; background: #3f8f5b; color: #fff; }
.mock .yes i { font-style: normal; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; font-size: 18px; }
.ticks li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--euc); transform: translateY(-1px); }

/* price */
.price { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: stretch; }
.plan { background: var(--ink); color: #fff; border-radius: 24px; padding: 36px; position: relative; overflow: hidden; }
.plan .dots { position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; opacity: .35; }
.plan .tag { color: var(--euc); }
.plan .amt { margin-top: 14px; font-size: 64px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan .amt span { font-size: 18px; font-weight: 400; color: #c9d1d6; letter-spacing: 0; }
.plan .deal { margin-top: 10px; color: #a9dcd3; }
.plan ul { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 11px; position: relative; }
.plan li { display: flex; gap: 12px; }
.plan li::before { content: '✓'; color: var(--euc); font-weight: 700; }
.side { display: grid; gap: 22px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.box h3 { font-size: 22px; }
.box p { margin-top: 6px; color: var(--muted); }
.topups { margin-top: 16px; display: grid; gap: 10px; }
.topups div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--paper); font-size: 15px; }
.topups b { white-space: nowrap; }

/* extras shop */
.shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.shop div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; position: relative; }
.shop .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--slate-soft); margin-bottom: 14px; }
.shop h3 { font-size: 17px; }
.shop p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.lock { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; color: var(--slate); background: var(--slate-soft); padding: 3px 9px; border-radius: 20px; }

/* films by quote */
.films { position: relative; border-radius: 26px; overflow: hidden; min-height: 380px; display: flex; align-items: end; }
.films::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #12171bdd 10%, #12171b10 70%); }
.films .in { position: relative; z-index: 1; padding: 40px; color: #fff; max-width: 640px; }
.films h2 { color: #fff; }
.films p { margin-top: 12px; color: #e7e2da; font-size: 18px; }
.films .btn { margin-top: 22px; }

/* faq */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: '+'; color: var(--clay); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin-top: 10px; color: var(--muted); }

/* end */
.end { text-align: center; padding: 110px 0; position: relative; overflow: hidden; }
.end .dots { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; transform: translate(-50%, -50%); border-radius: 50%; opacity: .13; }
.end .wrap { position: relative; }
.end h2 { font-size: clamp(38px, 5.4vw, 66px); }
.end h2 .serif { color: var(--clay); }
.end p { margin: 16px auto 28px; color: var(--muted); font-size: 19px; }
footer { border-top: 1px solid var(--line); padding: 34px 0; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
footer img { width: 40px; height: 40px; }
footer .links { margin-left: auto; display: flex; gap: 18px; }

/* quote dialog */
dialog { border: 0; border-radius: 22px; padding: 30px; width: min(520px, calc(100% - 32px)); box-shadow: 0 30px 90px #0005; color: var(--ink); }
dialog::backdrop { background: #1f2428aa; }
dialog h2 { font-size: 28px; }
dialog p { margin-top: 8px; color: var(--muted); }
dialog label { display: block; margin-top: 16px; font-weight: 600; font-size: 15px; }
dialog input, dialog textarea, dialog select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; background: var(--paper); }
dialog textarea { min-height: 110px; resize: vertical; }
dialog .row { margin-top: 22px; display: flex; gap: 10px; justify-content: flex-end; }
dialog .x { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muted); }
dialog .done { margin-top: 14px; font-size: 14px; color: #3f8f5b; }

@media (max-width: 1000px) {
  .hero .wrap, .pages, .appbox, .price { grid-template-columns: 1fr; }
  .phones { height: 520px; max-width: 560px; margin: 0 auto; width: 100%; }
  .make { grid-template-columns: repeat(2, 1fr); }
  .shop { grid-template-columns: repeat(2, 1fr); }
  .flow-row { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 760px) {
  .nav, .top .btn { display: none; }
  .menu { display: block; }
  .nav.open { display: flex; flex-direction: column; position: absolute; top: 74px; left: 0; right: 0; background: var(--paper); padding: 18px 20px; border-bottom: 1px solid var(--line); gap: 16px; }
  .hero { padding-top: 40px; }
  .phones { height: 430px; }
  .phone { width: 160px; border-width: 5px; border-radius: 24px; }
  .phones .p2 { width: 176px; }
  .phone .cap { font-size: 13px; }
  .phone .hook { font-size: 10px; }
  .steps { grid-template-columns: 1fr; }
  .make { grid-template-columns: 1fr; }
  .make .wide { grid-column: auto; }
  .grid-apps .row { grid-template-columns: 1fr 1fr; }
  .grid-apps .row > b { grid-column: 1 / -1; }
  .sec { padding: 64px 0; }
  .films .in { padding: 26px; }
  .shop { grid-template-columns: 1fr; }
  footer .links { margin-left: 0; }
}

/* pictures as classes (the page's security rule blocks inline styles) */
.bg-coach { background-image: url(/assets/ex-coach.jpg?v=4); } .bg-realty { background-image: url(/assets/ex-realty.jpg?v=4); }
.bg-plumber { background-image: url(/assets/ex-plumber.jpg?v=4); } .bg-cafe { background-image: url(/assets/ex-cafe.jpg?v=4); }
.bg-mascot { background-image: url(/assets/ex-mascot.jpg?v=4); } .bg-live { background-image: url(/assets/ex-live.jpg?v=4); }
.bg-product { background-image: url(/assets/ex-product.jpg?v=4); } .bg-tourism { background-image: url(/assets/ex-tourism.jpg); }
.pos-10 { background-position: 10% center; } .pos-20 { background-position: 20% center; } .pos-30 { background-position: 30% center; }
.pos-45 { background-position: 45% center; } .pos-60 { background-position: 60% center; } .pos-70 { background-position: 70% center; }
.pos-80 { background-position: 80% center; } .pos-90 { background-position: 90% center; } .pos-100 { background-position: 100% center; }
.make .pic, .minis span, .acct i, .mock .queue span, .films { background-size: cover; background-repeat: no-repeat; }
.make .pic, .mock .queue span, .acct i { background-position: center; }
.tag-light { color: #cfe0d4; } .mt10 { margin-top: 10px; } .mt16 { margin-top: 16px; } .pt0 { padding-top: 0; } .center { text-align: center; }

/* 2026-10-23 pass: real clip frames, a proper static ad, the month plan, a bigger extras shop */
.bg-clip1 { background-image: url(/assets/ex-clip1.jpg?v=4); } .bg-clip2 { background-image: url(/assets/ex-clip2.jpg?v=4); }
.bg-clip3 { background-image: url(/assets/ex-clip3.jpg?v=4); } .bg-clip4 { background-image: url(/assets/ex-clip4.jpg?v=4); }
.bg-clip5 { background-image: url(/assets/ex-clip5.jpg?v=4); } .bg-clip6 { background-image: url(/assets/ex-clip6.jpg?v=4); }
.minis { grid-template-columns: repeat(3, 1fr); }
.minis span { position: relative; background-size: cover; background-position: center; border-radius: 9px; overflow: hidden; }
.minis em { position: absolute; left: 4px; right: 4px; bottom: 14%; font: 800 9px/1.15 "Arial Black", Arial, sans-serif; font-style: normal; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.minis em b { color: #ffd166; }

.static-ad { display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background-size: cover; background-position: center 70%; }
.static-ad::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #14211fcc 0%, #14211f22 45%, #14211fd9 100%); }
.static-ad > * { position: relative; }
.sa-top { display: flex; justify-content: space-between; align-items: center; }
.sa-brand { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.sa-tag { background: #ffd166; color: #1f2428; font-weight: 800; font-size: 11px; padding: 4px 9px; border-radius: 20px; text-transform: uppercase; }
.sa-mid { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-top: 10px; }
.sa-mid strong { color: #fff; font-size: 26px; line-height: 1.02; letter-spacing: -.02em; }
.sa-price { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--clay); color: #fff; font-weight: 800; font-size: 24px; line-height: 1; box-shadow: 0 6px 18px #0005; }
.sa-price small { font-size: 10px; font-weight: 600; opacity: .9; }
.sa-btn { margin-top: auto; align-self: stretch; text-align: center; background: #fff; color: #1f2428; font-weight: 700; font-size: 14px; padding: 11px; border-radius: 12px; }
.static-ad .sa-mid { margin-top: auto; margin-bottom: 12px; }

.monthbox { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: center; }
.monthbox .say { margin-top: 18px; font-size: 19px; color: var(--muted); }
.cal { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 20px; display: grid; gap: 10px; }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); }
.cal-head b { font-size: 20px; }
.cal-head span { color: var(--muted); font-size: 14px; }
.cal-head em { color: var(--clay); font-style: normal; font-weight: 700; }
.cal-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--paper); }
.wk { font-size: 12px; font-weight: 700; color: var(--slate); background: var(--slate-soft); border-radius: 20px; padding: 4px 8px; text-align: center; }
.cal-row strong { display: block; font-size: 15px; }
.cal-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.shop { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .monthbox { grid-template-columns: 1fr; } }

/* 2026-10-23 pass 3: white page, black text, black and white logo, real app icons, a group and forum post, contact */
:root { --paper: #ffffff; --sand: #f6f6f5; --card: #ffffff; --ink: #111111; --muted: #555b60; --line: #e7e7e5;
  --clay: #111111; --clay-soft: #efefee; --slate: #111111; --slate-soft: #f0f0ef; --euc: #111111; --euc-soft: #f0f0ef; }
body { background: #fff; }
.top { background: #ffffffee; }
.logo { gap: 10px; }
.logo img { width: 40px; height: 41px; }
.logo span { font: 900 13px/1.05 "Arial Black", Arial, sans-serif; letter-spacing: 2px; }
.hero h1 .serif, .pages .big .serif, .end h2 .serif { color: var(--ink); }
.dots { background-image: radial-gradient(#111 1.6px, transparent 2px); background-size: 20px 20px; opacity: .09; }
.btn-clay { background: #111; } .btn-clay:hover { background: #333; }
.chip, .chip-clay { background: #f0f0ef; color: #111; }
.plan .tag, .ticks li::before, .plan li::before { color: #fff; }
.ticks li::before { background: #111; }
.plan .deal { color: #d6d6d6; }
.sa-price { background: #111; }
.flow-card .apps span { gap: 8px; background: #f3f3f2; color: #111; }
.apps svg { width: 20px; height: 20px; fill: currentColor; }
.icons { position: absolute; }
.grouppic { background: #eef0f3; display: grid; align-content: center; gap: 10px; padding: 16px; }
.gpost { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 20px #0000000f; }
.g-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.g-top svg { width: 15px; height: 15px; fill: #1877f2; }
.g-top b { color: #111; } .g-top span { margin-left: auto; }
.g-who { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.g-who i { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; flex: none; }
.g-who strong { display: block; font-size: 13px; } .g-who small { font-size: 11px; color: #777; }
.gpost > p { font-size: 13px; line-height: 1.4; margin-top: 8px; }
.g-pic { margin-top: 8px; height: 90px; border-radius: 10px; background-size: cover; background-position: center; }
.g-foot { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: #666; }
.rpost { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 6px 20px #0000000f; }
.rpost svg { width: 22px; height: 22px; fill: #ff4500; flex: none; margin-top: 2px; }
.rpost small { display: block; font-size: 11px; color: #777; } .rpost strong { display: block; font-size: 13px; }
.rpost span { display: block; font-size: 12px; color: #444; margin-top: 4px; padding-left: 8px; border-left: 2px solid #ddd; }
.make .wide .grouppic { aspect-ratio: auto; min-height: 360px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact .say { margin-top: 16px; font-size: 19px; color: var(--muted); }
.cform { background: var(--sand); border-radius: 22px; padding: 26px; display: grid; gap: 14px; }
.cform label { font-weight: 600; font-size: 15px; display: block; }
.cform input, .cform textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; background: #fff; }
.cform textarea { min-height: 110px; resize: vertical; }
.cform .btn { justify-self: start; }
.cform .done { font-size: 14px; color: #2d7a4b; }
@media (max-width: 1000px) { .contact { grid-template-columns: 1fr; } }

/* contact quick picks, the custom extras tile, the plan button on black */
.picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.picks span { font-size: 14px; color: var(--muted); margin-right: 4px; }
.picks button { border: 1px solid #d9d9d7; background: #fff; border-radius: 999px; padding: 8px 14px; font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; }
.picks button:hover { border-color: #111; }
.picks button.on { background: #111; color: #fff; border-color: #111; }
.shop { grid-template-columns: repeat(4, 1fr); }
.shop .custom { background: #111; color: #fff; border-color: #111; }
.shop .custom p { color: #d4d4d4; }
.shop .custom .ic { background: #2a2a2a; color: #fff; }
.shop .custom a { display: inline-block; margin-top: 12px; color: #fff; font-weight: 700; font-size: 14px; }
.plan .btn-clay { background: #fff; color: #111; }
.plan .btn-clay:hover { background: #e9e9e8; }
.end .btn-clay, .cform .btn { background: #111; color: #fff; }
@media (max-width: 1000px) { .shop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .shop { grid-template-columns: 1fr; } }

/* the price list: unit prices first, then three plans that save */
.units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ugroup { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.ugroup h3 { font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
.u { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.u b { white-space: nowrap; }
.plans3 { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p3 { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.p3-mid { background: #111; color: #fff; border-color: #111; }
.p3-mid .tag { color: #fff; }
.p3 .amt { margin-top: 8px; font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.p3 .amt span { font-size: 16px; font-weight: 400; opacity: .7; letter-spacing: 0; }
.p3 .save { margin-top: 10px; font-weight: 700; }
.p3 ul { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 8px; flex: 1; }
.p3 li { display: flex; gap: 10px; font-size: 15px; }
.p3 li::before { content: '✓'; font-weight: 700; }
.p3 .btn { align-self: flex-start; }
.p3-mid .btn { background: #fff; color: #111; }
.trial { margin-top: 18px; padding: 18px 22px; border-radius: 16px; background: var(--sand); font-size: 16px; }
@media (max-width: 1000px) { .units { grid-template-columns: repeat(2, 1fr); } .plans3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .units { grid-template-columns: 1fr; } }

/* month plan tabs; the examples section */
.cal-tabs { display: flex; gap: 8px; }
.cal-tabs button { border: 1px solid #ddd; background: #fff; border-radius: 999px; padding: 7px 14px; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.cal-tabs button[aria-selected="true"] { background: #111; color: #fff; border-color: #111; }
.cal-set { display: grid; gap: 10px; }
.cal-set[hidden] { display: none; }
.bg-pipe { background-image: url(/assets/ex-pipe.jpg); }
.work { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 20px; align-items: start; }
.wclip p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.phone.wp { position: relative; width: 100%; max-width: 230px; aspect-ratio: 9 / 16; background-size: cover; background-position: center; }
.inset { position: absolute; left: 50%; top: 30%; transform: translateX(-50%) rotate(-2deg); width: 62%; aspect-ratio: 1; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 8px 24px #0006; background-size: cover; background-position: center; }
.inset.chart { background: #fff; display: flex; align-items: end; gap: 8%; padding: 12% 12% 10%; aspect-ratio: 1.2; }
.inset.chart i { flex: 1; background: #111; border-radius: 4px 4px 0 0; }
.inset.chart .b1 { height: 35%; } .inset.chart .b2 { height: 48%; } .inset.chart .b3 { height: 62%; } .inset.chart .b4 { height: 90%; background: #2d7a4b; }
.wsites { display: grid; gap: 14px; }
.wsite { display: block; text-decoration: none; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.wsite span { font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: var(--muted); }
.wsite strong { display: block; font-size: 18px; margin-top: 6px; }
.wsite small { display: block; color: var(--muted); margin-top: 4px; }
.wsite b { display: inline-block; margin-top: 10px; font-size: 14px; }
@media (max-width: 1000px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .work { grid-template-columns: 1fr; } .phone.wp { max-width: 260px; } }

/* built-for strip, long video kinds, placeholders, the add-a-page tile */
.for { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.for span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.for b { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #f2f2f1; }
.kinds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kind { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.kpic { aspect-ratio: 4 / 5; background-size: cover; background-position: center; }
.kind h3 { font-size: 17px; padding: 14px 16px 0; }
.kind p { font-size: 14px; color: var(--muted); padding: 4px 16px 16px; }
.flow-2 { margin-top: 26px; grid-template-columns: 1.2fr auto 1fr; }
.soon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ph { aspect-ratio: 9 / 14; border-radius: 22px; border: 2px dashed #d6d6d4; background: #fafafa; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; }
.ph span { font-size: 28px; color: #bbb; }
.ph p { font-weight: 700; } .ph small { color: var(--muted); }
.acct.add { border-style: dashed; color: var(--muted); justify-content: center; }
@media (max-width: 1000px) { .kinds { grid-template-columns: repeat(3, 1fr); } .soon { grid-template-columns: repeat(2, 1fr); } .flow-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .kinds { grid-template-columns: 1fr 1fr; } }

/* built for any business; the long video conveyor */
.for1 { margin-top: 18px; font-weight: 600; font-size: 15px; }
.conv { display: grid; grid-template-columns: 1.3fr auto 1fr auto 1fr; gap: 22px; align-items: center; }
.conv p { margin-top: 14px; }
.conv p b { display: block; font-size: 18px; }
.conv p small { color: var(--muted); font-size: 14px; }
.c-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; background-size: cover; background-position: center; box-shadow: var(--shadow); }
.c-len { position: absolute; right: 10px; bottom: 10px; background: #000c; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.c-line { margin-top: 12px; height: 14px; border-radius: 7px; background: #ececeb; display: flex; justify-content: space-around; align-items: center; padding: 0 6px; }
.c-line i { width: 3px; height: 14px; background: #111; border-radius: 2px; }
.c-arrow { font-size: 32px; }
.c-fan { position: relative; height: 300px; }
.cp { position: absolute; top: 0; width: 46%; aspect-ratio: 9 / 16; border-radius: 16px; border: 4px solid #15191c; background-size: cover; background-position: center; box-shadow: var(--shadow); overflow: hidden; }
.cp em { position: absolute; left: 4px; right: 4px; bottom: 16%; font: 800 11px/1.15 "Arial Black", Arial, sans-serif; font-style: normal; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.cp em b { color: #ffd166; }
.cp1 { left: 0; transform: rotate(-7deg); top: 18px; }
.cp2 { left: 27%; z-index: 2; }
.cp3 { right: 0; transform: rotate(7deg); top: 18px; }
.c-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-apps p { grid-column: 1 / -1; margin-top: 4px; }
.c-app { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 4px; justify-items: start; }
.c-app svg { width: 24px; height: 24px; fill: #111; }
.c-app span { font-weight: 700; font-size: 14px; }
.c-app b { font-size: 12px; color: #2d7a4b; }
@media (max-width: 1000px) { .conv { grid-template-columns: 1fr; } .c-arrow { transform: rotate(90deg); justify-self: center; } .c-fan { max-width: 360px; margin: 0 auto; width: 100%; } }

/* the thinking behind it */
.think { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.think > div { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; }
.tn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #111; color: #fff; font-weight: 700; margin-bottom: 16px; }
.think h3 { font-size: 19px; }
.think p { margin-top: 6px; color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .think { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .think { grid-template-columns: 1fr; } }

/* custom work: four kinds, animation-style examples */
.bg-cw-explainer { background-image: url(/assets/ex-cw-explainer.jpg); } .bg-cw-module { background-image: url(/assets/ex-cw-module.jpg); } .bg-cw-ad { background-image: url(/assets/ex-cw-ad.jpg); }
.cw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.cwc { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cwp { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.cwt { position: absolute; left: 10px; top: 10px; background: #000b; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; }
.cwc h3 { font-size: 17px; padding: 14px 16px 0; }
.cwc p { font-size: 14px; color: var(--muted); padding: 4px 16px 16px; }
@media (max-width: 1000px) { .cw { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cw { grid-template-columns: 1fr; } }

/* visuals on the thinking cards */
.tv { height: 140px; margin: -4px -2px 18px; border-radius: 12px; background: var(--sand); padding: 12px; overflow: hidden; }
.tv-ask { display: grid; gap: 7px; align-content: center; }
.tv-ask span { background: #fff; border-radius: 12px 12px 12px 3px; padding: 7px 10px; font-size: 12px; line-height: 1.3; box-shadow: 0 2px 8px #0000000d; }
.tv-ask span:nth-child(2) { margin-left: 18px; }
.tv-rival { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tv-rival > div { background: #fff; border-radius: 10px; padding: 6px; display: grid; gap: 4px; }
.tv-rival i { height: 64px; border-radius: 7px; background-size: cover; background-position: center; }
.tv-rival b { font-size: 12px; } .tv-rival small { font-size: 11px; color: var(--muted); }
.tv-rival > div:first-child b { color: #2d7a4b; }
.tv-plan { display: grid; gap: 7px; align-content: center; }
.tv-plan span { background: #fff; border-radius: 9px; padding: 7px 10px; font-size: 12px; display: flex; gap: 8px; }
.tv-plan b { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; min-width: 38px; }
.tv-chart { position: relative; display: flex; align-items: end; gap: 10px; padding: 14px 16px 34px; }
.tv-chart i { flex: 1; background: #cfcfcd; border-radius: 4px 4px 0 0; }
.tv-chart .h1 { height: 30%; } .tv-chart .h2 { height: 45%; } .tv-chart .h3 { height: 92%; } .tv-chart .h4 { height: 38%; } .tv-chart .h5 { height: 55%; }
.tv-chart .win { background: #111; }
.tv-chart em { position: absolute; left: 12px; right: 12px; bottom: 8px; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; }

/* the hidden bot field on both forms, and the small trial link in the quote box */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.row .small { font-size: 14px; color: var(--muted); margin-left: 12px; }

/* The site chat (chat.js; hidden until it goes live, ?chat=1 to try it). */
.chat-open { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 10px 18px 10px 10px; background: var(--ink); color: #fff; font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.chat-open img { width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 3px; }
.chat-open.is-open { display: none; }
.chat-box { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 48px rgba(0,0,0,.2); overflow: hidden; }
.chat-box[hidden] { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--ink); color: #fff; }
.chat-head b { display: block; font-size: 16px; }
.chat-head small { color: #cfd3d6; font-size: 13px; }
.chat-x { border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { margin: 0; max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.chat-msg.bot { background: var(--sand); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.me { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-picks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.chat-pick { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; text-align: left; }
.chat-pick:hover, .chat-pick:focus-visible { border-color: var(--ink); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form input[type=text] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 15px; }
.chat-send { border: 0; border-radius: 999px; padding: 0 16px; background: var(--ink); color: #fff; font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; }
@media (max-width: 480px) { .chat-box { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); } .chat-open { right: 12px; bottom: 12px; } }