/* Examples pages: three MADE-UP new businesses and what each package gave them, drawn in our own simple style.
   Page parts are .ex-*; the drawn pieces (logo, profile card, listing card, email signature, website on a phone) are
   .exk-* and take each business's colours from its theme class (.exk-hound, .exk-wren, .exk-lark).
   The drawn cards are our own neutral design and never imitate any platform's screens, colours or logos.
   No inline styles anywhere (strict CSP). Nothing smaller than 14px; text contrast at least 4.5 to 1. */

/* ---------- each business's colours ---------- */
.exk-hound { --b: #0F5E63; --b-deep: #0A3F43; --b-acc: #FFC93C; --b-tint: #E4F3F1; --b-face: var(--display); }
.exk-wren { --b: #5B3A8C; --b-deep: #3B2460; --b-acc: #9FE0C9; --b-tint: #F2EDF9; --b-face: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
.exk-lark { --b: #A8432A; --b-deep: #6E2A18; --b-acc: #F3D27A; --b-tint: #FBEEE3; --b-face: Georgia, "Times New Roman", serif; }

/* ---------- page head ---------- */
.ex-head .eyebrow a { color: inherit; }
.ex-notice { margin: 0 0 8px; padding: 10px 14px; background: #FFF3D6; border: 2px solid var(--outline); border-radius: 12px; color: var(--ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; max-width: 64ch; }
.ex-package { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; }
.ex-package-name { padding: 6px 14px; background: var(--b-tint, var(--card)); color: var(--b-deep, var(--ink)); border: 2.5px solid var(--outline); border-radius: 12px; box-shadow: 3px 3px 0 var(--outline); font-weight: 700; }
.ex-package-price { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.ex-package-kind { color: var(--muted); font-weight: 600; }

/* ---------- the list of examples ---------- */
.ex-index { padding-block: clamp(20px, 3vw, 32px) clamp(44px, 6vw, 72px); }
.ex-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ex-card { min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline); overflow: hidden; }
.ex-card-pic { display: block; color: inherit; text-decoration: none; border-bottom: 2.5px solid var(--outline); background: var(--b-tint); }
.ex-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; }
.ex-card-kind { margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petal-text); }
.ex-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.65rem); line-height: 1.15; }
.ex-card h2 a { color: var(--ink); text-decoration: none; }
.ex-card h2 a:hover { color: var(--leaf); text-decoration: underline; }
.ex-card-line { margin: 0; color: var(--muted); }
.ex-card-price { margin: 2px 0 0; font-weight: 700; color: var(--leaf); }
.ex-got { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ex-got li { padding: 3px 10px; border: 2px solid var(--outline); border-radius: 99px; background: var(--b-tint); color: var(--b-deep); font-size: 0.875rem; font-weight: 700; }
.ex-card-body .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 640px) and (max-width: 959px) {
  .ex-list .ex-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ex-list .ex-card-pic { border-bottom: 0; border-right: 2.5px solid var(--outline); }
}
@media (min-width: 960px) { .ex-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ex-cta { text-align: center; margin-top: clamp(36px, 5vw, 56px); padding: clamp(24px, 4vw, 40px) 20px; background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline); }
.ex-cta h2 { margin-bottom: 10px; }
.ex-cta p { color: var(--muted); max-width: 52ch; margin: 0 auto 20px; }
.ex-cta .eyebrow { margin-bottom: 10px; }
.ex-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- one example ---------- */
.ex-sec { padding-block: clamp(28px, 4vw, 44px); }
.ex-sec h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ex-sec-lead { margin: 16px 0 0; color: var(--muted); max-width: 62ch; }
.ex-small { margin: 24px 0 0; font-size: 0.875rem; color: var(--muted); max-width: 70ch; }
.ex-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 32px; margin-top: 26px; }
.ex-piece { margin: 0; min-width: 0; display: grid; gap: 14px; align-content: start; }
.ex-piece figcaption h3 { font-size: 1.3rem; }
.ex-piece figcaption p { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; max-width: 52ch; }
.ex-piece-art { min-width: 0; }
.ex-piece-art > .exk-box { max-width: 460px; }
@media (min-width: 760px) {
  .ex-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-piece-site { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
}

/* Before and After: two panels side by side, stacked on a phone. No JavaScript. */
.ex-ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 26px; }
@media (min-width: 720px) { .ex-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-ba-panel { min-width: 0; display: grid; gap: 12px; align-content: start; justify-items: center; text-align: center; }
.ex-ba-panel h3 { font-size: 1.3rem; }
.ex-ba-tag { margin: 0; padding: 3px 14px; border: 2px solid var(--outline); border-radius: 99px; font-weight: 700; font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase; }
.ex-ba-before .ex-ba-tag { background: #EDE6DD; color: var(--ink); }
.ex-ba-after .ex-ba-tag { background: var(--sprout); color: var(--ink); }
.ex-ba-panel .exk-phone { max-width: 260px; }
.ex-ba-note { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; max-width: 40ch; }

/* What We Did, and the package */
.ex-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) { .ex-detail { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; } }
.ex-did { list-style: none; counter-reset: did; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ex-did li { counter-increment: did; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.ex-did li::before { content: counter(did); display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--outline); border-radius: 9px; background: var(--sun); color: var(--ink); font-weight: 700; font-size: 0.9375rem; line-height: 1; }
.ex-did li:nth-child(4n+2)::before { background: #F49AAE; }
.ex-did li:nth-child(4n+3)::before { background: #A9D4F2; }
.ex-did li:nth-child(4n+4)::before { background: #B9E2AF; }
.ex-cost { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline); }
.ex-cost p { margin: 0; }
.ex-cost-label { font-size: 0.875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petal-text); font-weight: 700; }
.ex-cost-name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ex-cost-price { font-family: var(--display); font-size: 2.8rem; font-weight: 700; color: var(--leaf); line-height: 1; }
.ex-cost-small { font-size: 0.9375rem; color: var(--muted); }
.ex-cost .btn { text-align: center; margin-top: 6px; }
.ex-cost-link { text-align: center; font-size: 0.9375rem; font-weight: 600; }

/* More Examples */
.ex-more { padding-top: clamp(28px, 4vw, 44px); border-top: 2px dashed var(--rule); }
.ex-more h2 { font-size: clamp(1.5rem, 2.6vw, 1.8rem); margin: 0 0 20px; }
.ex-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .ex-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-more a { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.ex-more .exk-preview { border-bottom: 2.5px solid var(--outline); background: var(--b-tint); }
.ex-more-text { display: grid; gap: 2px; padding: 14px 18px 18px; }
.ex-more-text b { font-family: var(--display); font-size: 1.2rem; color: var(--leaf); line-height: 1.25; }
.ex-more a:hover .ex-more-text b { text-decoration: underline; }
.ex-more-text span { color: var(--muted); font-size: 0.9375rem; }
.ex-more-text .ex-more-price { color: var(--ink); font-weight: 700; }

/* =====================================================================================================================
   The drawn pieces (.exk)
   ===================================================================================================================== */
.exk { font-family: var(--body); color: var(--ink); line-height: 1.45; text-align: left; }
.exk p { margin: 0; }
.exk-svg { display: block; width: 100%; height: 100%; }
.exk-box { background: #FFFFFF; border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 4px 4px 0 var(--outline); overflow: hidden; }
.exk-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.exk-btn { display: inline-block; padding: 7px 16px; border: 2px solid var(--outline); border-radius: 10px; background: var(--b); color: #FFFFFF; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.exk-btn.exk-ghost { background: #FFFFFF; color: var(--b-deep); }
.exk-btn.exk-sun { background: var(--b-acc); color: var(--b-deep); }

/* the logo */
.exk-logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.exk-logo-mark { display: block; width: 60px; height: 60px; flex: none; }
.exk-wm { display: block; min-width: 0; }
.exk-wm b { display: block; font-family: var(--b-face); font-weight: 700; font-size: 1.5rem; line-height: 1.05; color: var(--b-deep); }
.exk-wm small { display: block; margin-top: 4px; font-size: 0.875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b); line-height: 1.25; }
.exk-wren .exk-wm b { letter-spacing: .02em; }
.exk-lark .exk-wm b { font-style: italic; font-size: 1.65rem; }
.exk-board { display: grid; gap: 14px; padding: 18px; }
.exk-board-tile { display: flex; justify-content: center; padding: 22px 14px; border: 2px solid var(--outline); border-radius: 12px; background: var(--b-tint); }
.exk-board-tile.exk-rev { background: var(--b); }
.exk-rev .exk-wm b, .exk-rev .exk-wm small { color: #FFFFFF; }
.exk-rev .exk-logo-mark { border-radius: 50%; box-shadow: 0 0 0 3px #FFFFFF; }
.exk-swatches { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.exk-swatches li { display: flex; align-items: center; gap: 8px; }
.exk-sw { display: block; width: 26px; height: 26px; border: 2px solid var(--outline); border-radius: 8px; flex: none; }
.exk-sw-1 { background: var(--b); }
.exk-sw-2 { background: var(--b-acc); }
.exk-sw-3 { background: var(--b-tint); }

/* the social media profile: our own neutral card */
.exk-cover { height: 104px; border-bottom: 2.5px solid var(--outline); }
.exk-hound .exk-cover { background: radial-gradient(circle, #FFC93C 0 5px, transparent 6px) 0 0 / 36px 36px, radial-gradient(circle, rgba(255, 255, 255, .3) 0 9px, transparent 10px) 18px 18px / 36px 36px, #0F5E63; }
.exk-wren .exk-cover { background: linear-gradient(transparent 70%, #9FE0C9 70%), repeating-linear-gradient(135deg, #5B3A8C 0 16px, #6E4CA3 16px 32px); }
.exk-lark .exk-cover { background: linear-gradient(90deg, rgba(168, 67, 42, .3) 50%, transparent 50%) 0 0 / 28px 28px, linear-gradient(rgba(168, 67, 42, .3) 50%, transparent 50%) 0 0 / 28px 28px, #FBEEE3; }
.exk-profile-body { padding: 0 20px 20px; }
.exk-avatar { display: block; width: 84px; height: 84px; margin-top: -44px; padding: 3px; border: 2.5px solid var(--outline); border-radius: 50%; background: #FFFFFF; position: relative; }
.exk-pname { margin-top: 10px; font-family: var(--b-face); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--b-deep); }
.exk-handle { color: var(--muted); font-size: 0.9375rem; overflow-wrap: anywhere; }
.exk-cat { margin-top: 10px; font-weight: 700; font-size: 0.9375rem; }
.exk-bio { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; }
.exk-link { margin-top: 8px; font-weight: 700; font-size: 0.9375rem; color: var(--b-deep); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.exk-compact { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.exk-compact .exk-cover { height: 88px; }
.exk-compact .exk-avatar { width: 72px; height: 72px; margin-top: -38px; }
.exk-compact .exk-profile-body { padding: 0 18px 16px; }
.exk-compact .exk-pname { font-size: 1.15rem; }

/* the Google Business Profile: our own listing card, with no stars, rating or reviews */
.exk-listing { padding: 18px 20px 20px; }
.exk-listing-head { display: flex; align-items: center; gap: 12px; }
.exk-listing-mark { display: block; width: 52px; height: 52px; flex: none; }
.exk-lname { display: block; font-family: var(--b-face); font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--b-deep); }
.exk-lcat { display: block; color: var(--muted); font-size: 0.9375rem; }
.exk-new { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; font-size: 0.9375rem; color: var(--muted); }
.exk-new b { padding: 2px 10px; border: 2px solid var(--outline); border-radius: 99px; background: var(--b-acc); color: var(--b-deep); font-size: 0.875rem; }
.exk-facts { display: grid; gap: 6px; margin: 14px 0 0; font-size: 0.9375rem; }
.exk-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
.exk-facts dt { font-weight: 700; color: var(--b-deep); }
.exk-facts dd { margin: 0; overflow-wrap: anywhere; }
.exk-hours { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 0.9375rem; }
.exk-hours caption { padding-bottom: 4px; text-align: left; font-weight: 700; color: var(--b-deep); }
.exk-hours th, .exk-hours td { padding: 5px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.exk-hours th { padding-right: 12px; font-weight: 600; }

/* the email signature */
.exk-sig { padding: 16px 20px 20px; }
.exk-sig-from { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 0.9375rem; overflow-wrap: anywhere; }
.exk-sig-from b { color: var(--ink); margin-right: 6px; }
.exk-sig-hi { font-size: 0.9375rem; }
.exk-sig-hi + .exk-sig-hi { margin-top: 10px; }
.exk-sig-block { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 4px solid var(--b-acc); }
.exk-sig-mark { display: block; width: 56px; height: 56px; flex: none; }
.exk-sig-text { display: grid; gap: 1px; min-width: 0; font-size: 0.9375rem; line-height: 1.4; }
.exk-sig-text b { font-family: var(--b-face); font-size: 1.1rem; color: var(--b-deep); }
.exk-sig-text span { overflow-wrap: anywhere; }
.exk-sig-text .exk-sig-url { color: var(--b-deep); font-weight: 700; }

/* the phone, for the Starter Website and the Before and After */
.exk-phone { position: relative; width: 100%; max-width: 300px; margin-inline: auto; border: 10px solid var(--outline); border-radius: 34px; background: var(--outline); box-shadow: 6px 6px 0 var(--b-acc, var(--sun)); }
.exk-notch { position: absolute; z-index: 2; top: 0; left: 50%; width: 84px; height: 16px; transform: translateX(-50%); background: var(--outline); border-radius: 0 0 12px 12px; }
.exk-screen { position: relative; overflow: hidden; min-height: 470px; border-radius: 24px; background: #FFFFFF; }
.exk-site-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 26px 14px 12px; border-bottom: 2px solid var(--outline); }
.exk-site-head .exk-logo { gap: 8px; }
.exk-site-head .exk-logo-mark { width: 38px; height: 38px; }
.exk-site-head .exk-wm b { font-size: 1.1rem; }
.exk-site-head .exk-wm small { display: none; }
.exk-menu { display: grid; gap: 5px; width: 26px; flex: none; }
.exk-menu i { display: block; height: 3px; border-radius: 2px; background: var(--ink); }
.exk-site-hero { padding: 22px 16px 24px; background: var(--b); color: #FFFFFF; }
.exk-kicker { font-size: 0.875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-acc); }
.exk-site-h { margin-top: 8px; font-family: var(--b-face); font-weight: 700; font-size: 1.6rem; line-height: 1.15; }
.exk-site-p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; }
.exk-site-list { padding: 18px 16px 24px; background: var(--b-tint); }
.exk-site-h2 { font-family: var(--b-face); font-weight: 700; font-size: 1.1rem; color: var(--b-deep); }
.exk-site-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.exk-site-list li { padding: 7px 12px; border: 2px solid var(--outline); border-radius: 10px; background: #FFFFFF; font-weight: 700; font-size: 0.9375rem; }

/* Before: an empty phone */
.exk-empty { box-shadow: 6px 6px 0 #D9CFC3; }
.exk-empty .exk-screen { display: grid; place-items: center; padding: 28px 18px; background: #F4EFE8; }
.exk-empty-note { display: grid; gap: 6px; padding: 18px 14px; border: 2px dashed #8C7B6B; border-radius: 14px; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.exk-empty-note b { color: var(--ink); font-size: 1.05rem; }
/* After: the same phone, set up */
.exk-after { padding-bottom: 14px; background: var(--b-tint); }
.exk-after .exk-compact .exk-profile-body { background: #FFFFFF; border-bottom: 2px solid var(--outline); }
.exk-mini { display: grid; gap: 2px; margin: 12px 14px 0; padding: 10px 12px; border: 2px solid var(--outline); border-radius: 12px; background: #FFFFFF; font-size: 0.9375rem; overflow-wrap: anywhere; }
.exk-mini b { color: var(--b-deep); }
.exk-mini span { color: var(--muted); }
.exk-mini .exk-mini-new { justify-self: start; margin-top: 4px; padding: 1px 10px; border: 2px solid var(--outline); border-radius: 99px; background: var(--b-acc); color: var(--b-deep); font-weight: 700; font-size: 0.875rem; }

/* previews in the lists of examples */
.exk-preview .exk-profile-body { background: #FFFFFF; }
.ex-card-pic .exk-preview, .ex-more .exk-preview { display: block; }

@media (max-width: 380px) {
  .exk-profile-body, .exk-listing, .exk-sig { padding-left: 16px; padding-right: 16px; }
  .exk-board { padding: 14px; }
  .exk-wm b { font-size: 1.35rem; }
  .exk-lark .exk-wm b { font-size: 1.45rem; }
  .exk-logo-mark { width: 52px; height: 52px; }
}