/* ============================================================================
   Phat Digital — per-site style layer (loaded AFTER the shared theme + brand vars).
   Restores the FULL brand palette + colour rhythm + signature elements from the
   original hand-built site, which the 3-colour brand record could not carry:
   the sage-wash hero band, tinted section bands, the deep-sage filled "featured"
   comparison card, and the PD logo badge. Deep-sage / cloud / terracotta already
   come from brand.json; this adds the shades + washes + the visual treatments.
   ---------------------------------------------------------------------------- */
:root {
  --deep-sage: #4A6149;
  --sage: #6E8C68;
  --light-sage: #A9BFA1;
  --sage-wash: #E8EEE4;
  --terracotta: #C5683F;
  --soft-clay: #E0A185;
  --clay-wash: #FBEDE7;
  --ink: #20251F;
  --slate: #6B726A;
  --cloud: #F4F5F1;
}

/* ---- Logo: use the engine wordmark option (site.wordmark = badge). Just add the terracotta dot
   on the monogram badge, our signature. ---- */
.site-header .logo-wordmark { position: relative; color: var(--deep-sage); }
.site-header .logo-badge { background: var(--deep-sage); }
.site-header .logo-badge::after {
  content: ""; position: absolute; left: 29px; top: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--terracotta); border: 2px solid var(--cloud);
}

/* ---- Colour rhythm: tinted section bands (like the original) ---- */
.hero.bg-wash, .hero.split { background: var(--sage-wash); }
.callout { background: var(--clay-wash); }
.founder { background: var(--sage-wash); }
/* soft hairline between bands so tint changes read cleanly */
.callout, .founder { border-top: 1px solid color-mix(in srgb, var(--deep-sage) 8%, transparent);
                     border-bottom: 1px solid color-mix(in srgb, var(--deep-sage) 8%, transparent); }

/* ---- The signature: the "featured" comparison column as a filled deep-sage card ---- */
.cmp-col.featured {
  background: var(--deep-sage) !important; border-color: var(--deep-sage) !important;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--deep-sage) 30%, transparent);
}
.cmp-col.featured h3 { color: #fff !important; }
.cmp-col.featured .cmp-note { color: rgba(255, 255, 255, .78) !important; }
.cmp-col.featured .cmp-list li { color: rgba(255, 255, 255, .92); }
.cmp-col.featured.cmp-pro .cmp-list .ti { color: var(--soft-clay) !important; }
.cmp-col.featured .cmp-badge { background: var(--terracotta); }

/* ---- Warm the accent tick/cross a touch so the palette sings ---- */
.cmp-pro .cmp-list .ti { color: var(--sage); }
.cmp-con .cmp-list .ti { color: var(--terracotta); }

/* ---- Suites/pricing cards: a hair of warmth so they are not flat white ---- */
.packages { background: color-mix(in srgb, var(--sage-wash) 55%, var(--cloud)); }
.pkg-card.featured { border-color: var(--terracotta); }

/* ============================================================================
   2026-07-16 — layout polish from Joel's review of the studio preview.
   ---------------------------------------------------------------------------- */

/* A prose block with NO aside used to leave its 68ch reading column hugging the
   far left of a 1140px band (lopsided whitespace on the right). Centre it. */
.prose:not(.prose-split) .wrap { max-width: 820px; }

/* The right rail can now carry a stack of cards (e.g. two or three stat cards),
   not just one. Give them rhythm + keep them sticky as a group. */
.prose-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.prose-aside-card { position: static; }
.prose-aside-stat .prose-stat { color: var(--terracotta); }
@media (max-width: 760px) { .prose-aside { position: static; } }

/* Case-study (packages) cards can carry a photo above the name. */
.pkg-media { margin: -2px 0 15px; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Free-try: graphic maker tool (try-graphic.js) ---- */
.tool-sec { padding: var(--space-section-sm) 0; }
.pd-tool-load { color: var(--muted); font-size: 14px; padding: 20px 0; }
.tg { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 30px; align-items: start; }
.tg-lab { font-family: var(--heading-font); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
.tg-lab:first-child { margin-top: 0; }
.tg-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tg-chip { font-family: var(--heading-font); font-weight: 600; font-size: 13px; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line, #e0e2dc); background: #fff; color: var(--dark); cursor: pointer; }
.tg-chip.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.tg-sw { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d8dcd4; cursor: pointer; padding: 0; }
.tg-sw.on { box-shadow: 0 0 0 2px var(--accent); }
.tg-field { display: block; margin: 12px 0 0; }
.tg-field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--dark); margin-bottom: 4px; }
.tg-field input, .tg-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #d8dcd4); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; resize: vertical; }
.tg-actions { margin-top: 18px; }
.tg-btn { font-family: var(--heading-font); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 24px; border: 1px solid var(--dark); background: #fff; color: var(--dark); cursor: pointer; }
.tg-preview { position: sticky; top: 90px; }
#tg-canvas { max-width: 100%; max-height: 62vh; height: auto; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); display: block; margin: 0 auto; }
.tg-close { margin-top: 18px; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); border-radius: 14px; padding: 16px 18px; text-align: center; }
.tg-close b { display: block; font-family: var(--heading-font); font-size: 15px; color: var(--dark); }
.tg-close span { display: block; font-size: 13px; color: var(--muted); margin: 5px 0 12px; line-height: 1.5; }
.tg-cta { display: inline-block; font-family: var(--heading-font); font-weight: 600; background: var(--accent); color: #fff; padding: 10px 22px; border-radius: 24px; text-decoration: none; }
@media (max-width: 760px) { .tg { grid-template-columns: 1fr; } .tg-preview { position: static; order: -1; } }

/* ---- Free-try: QR generator (reuses .tg-* layout) ---- */
#qr-canvas { max-width: 100%; max-height: 56vh; height: auto; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.10); display: block; margin: 0 auto; background: #fff; }
.qr-msg { font-size: 12.5px; color: var(--muted); margin-top: 8px; min-height: 16px; }

/* ---- Free-try: website homepage wireframe (try-website.js) ---- */
.w-note { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.mk-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.14); border: 1px solid #e0e2dc; background: #fff; }
.mk-bar { background: #ebedea; padding: 8px 12px; display: flex; align-items: center; gap: 6px; }
.mk-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfd3cb; }
.mk-bar span { margin-left: 10px; font-size: 11px; color: #8a8f86; background: #fff; border-radius: 20px; padding: 3px 12px; }
.mk-scroll { max-height: 60vh; overflow: auto; }
.mk { font-family: var(--heading-font), sans-serif; }
.mk-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.mk-logo { font-weight: 700; font-size: 15px; }
.mk-links { display: flex; gap: 12px; } .mk-links i { width: 30px; height: 7px; border-radius: 4px; background: currentColor; opacity: .28; }
.mk-cta { font-size: 11px; font-weight: 600; padding: 6px 13px; border-radius: 20px; }
.mk-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: center; padding: 22px 20px 26px; }
.mk-kick { font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.mk-hero-txt h2 { font-size: 26px; line-height: 1.1; margin: 8px 0 8px; }
.mk-hero-txt p { font-size: 12.5px; opacity: .72; margin: 0 0 14px; line-height: 1.5; }
.mk-btn { display: inline-block; font-size: 12px; font-weight: 600; padding: 8px 18px; border-radius: 22px; }
.mk-hero-img { aspect-ratio: 4/3; border-radius: 12px; position: relative; overflow: hidden; }
.mk-hero-img span { position: absolute; width: 62%; height: 62%; border-radius: 50%; right: -10%; bottom: -14%; opacity: .55; }
.mk-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 20px 22px; }
.mk-card { border-radius: 12px; padding: 16px; }
.mk-dot { display: block; width: 26px; height: 26px; border-radius: 8px; margin-bottom: 12px; }
.mk-card i { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: .30; margin-bottom: 7px; }
.mk-card i.s, .mk-strip i.s { width: 60%; }
.mk-strip { margin: 0 20px 22px; border-radius: 12px; padding: 18px 20px; }
.mk-strip b { display: block; font-size: 14px; margin-bottom: 10px; }
.mk-strip i { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: .28; margin-bottom: 7px; }
.mk-foot { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; }
.mk-foot b { font-size: 14px; } .mk-foot span { font-size: 11px; opacity: .82; }

/* ---- Free-try: email-me gate (try-gate.js) ---- */
.tg-gate { margin: 12px 0 4px; }
.tg-gate-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tg-gate-in { flex: 1 1 180px; min-width: 0; border: 1px solid #d8dcd4; border-radius: 22px; padding: 9px 15px; font: inherit; font-size: 14px; }
.tg-gate-btn { font-family: var(--heading-font); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 22px; border: 0; background: var(--dark); color: #fff; cursor: pointer; white-space: nowrap; }
.tg-gate-btn:disabled { opacity: .6; }
.tg-gate-msg { font-size: 12px; color: var(--accent, #C5683F); margin-top: 7px; min-height: 15px; }
.tg-gate-done { font-family: var(--heading-font); font-weight: 600; font-size: 13.5px; color: var(--dark); background: #fff; border-radius: 12px; padding: 10px 14px; }

/* ---- Free-try: Social 3-posts (try-social.js) ---- */
.ts-wrap { max-width: 640px; margin: 0 auto; }
.ts-form { background: #fff; border: 1px solid #e7eae2; border-radius: 18px; padding: 22px; }
.ts-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ts-lab { flex: 1 1 200px; display: flex; flex-direction: column; gap: 5px; font-family: var(--heading-font); font-weight: 600; font-size: 12.5px; color: var(--dark); }
.ts-lab input { border: 1px solid #d8dcd4; border-radius: 12px; padding: 10px 13px; font: inherit; font-size: 14px; font-weight: 400; }
.ts-drop { border: 1.5px dashed #c7cdbf; border-radius: 14px; padding: 26px 16px; text-align: center; cursor: pointer; color: var(--muted, #6b7166); background: #fbfcf9; transition: border-color .15s, background .15s; }
.ts-drop:hover, .ts-drop:focus-visible { border-color: var(--accent, #C5683F); background: #fff; outline: none; }
.ts-drop-txt { font-family: var(--heading-font); font-weight: 600; font-size: 13.5px; }
.ts-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.ts-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; }
.ts-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(20,20,20,.72); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.ts-gate-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ts-email { flex: 1 1 180px; min-width: 0; border: 1px solid #d8dcd4; border-radius: 22px; padding: 10px 15px; font: inherit; font-size: 14px; }
.ts-go { font-family: var(--heading-font); font-weight: 600; font-size: 13.5px; padding: 10px 18px; border-radius: 22px; border: 0; background: var(--dark); color: #fff; cursor: pointer; white-space: nowrap; }
.ts-go:disabled { opacity: .6; }
.ts-msg { font-size: 12.5px; color: var(--accent, #C5683F); margin-top: 10px; min-height: 15px; }
.ts-msg a { color: var(--accent, #C5683F); font-weight: 600; }
.ts-results { margin-top: 20px; }
.ts-done { font-family: var(--heading-font); font-weight: 600; font-size: 13.5px; color: var(--dark); margin-bottom: 14px; }
.ts-post { margin: 0 0 16px; background: #fff; border: 1px solid #e7eae2; border-radius: 16px; overflow: hidden; }
.ts-post img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.ts-post figcaption { padding: 15px 17px; font-size: 14.5px; line-height: 1.5; color: var(--dark); }
.ts-copy { display: block; margin-top: 11px; font-family: var(--heading-font); font-weight: 600; font-size: 12px; padding: 7px 13px; border: 1px solid #d8dcd4; border-radius: 20px; background: #fbfcf9; cursor: pointer; }
.ts-cta { margin-top: 6px; }