/* ============================================================
   CloudD10 — Public site stylesheet (Garden theme)
   This file is shipped read-only. For tweaks, edit
   /assets/css/custom.css from the admin panel.
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/fraunces-roman-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Theme tokens ─────────────────────────────────────────── */
/* These can be overridden in custom.css */
:root {
    --garden-accent:   #6b8f5c;
    --garden-accent2:  #d9a46b;
    --garden-accent3:  #c96b5a;
    --garden-bg:       #f6f1e6;
    --garden-card:     #fbf7ec;
    --garden-soft:     #efe8d6;
    --garden-text:     #2a2a24;
    --garden-mute:     #8a8a80;
    --garden-border:   #e5dfcf;

    --site-radius:     999px;
    --site-card-radius:20px;
    --site-section-pad:36px;

    /* v1.7.4: unified layout shell.
       Every wrapper (nav, hero, sections, CTA, footer) uses the same max-width
       and side padding so everything visually lines up at the same edges. */
    --site-shell-max:   1200px;
    --site-shell-pad-x: 48px;

    /* Backwards-compat aliases — older custom.css overrides may reference
       these. Both now resolve to the unified shell width. */
    --site-max:         var(--site-shell-max);
    --site-content-max: var(--site-shell-max);
}

/* ── Reset ─────────────────────────────────────────────────── */
.site-body * { box-sizing: border-box; }
.site-body {
    margin: 0;
    background: var(--garden-bg);
    color: var(--garden-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11';
}
.site-body a { color: inherit; }
.site-body button { font-family: inherit; }

.site-serif { font-family: 'Fraunces', 'Georgia', serif; font-feature-settings: 'ss01'; }
.site-mono  { font-variant-numeric: tabular-nums; }

/* ── Site nav ─────────────────────────────────────────────── */
.site-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px var(--site-shell-pad-x);
    max-width: var(--site-shell-max); margin: 0 auto;
    gap: 32px;
}
.site-bar-brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--garden-text); text-decoration: none;
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; letter-spacing: -0.3px;
}
.site-bar-links {
    display: flex; gap: 32px; list-style: none; padding: 0; margin: 0;
    font-size: 14px;
}
.site-bar-links a { color: var(--garden-text); text-decoration: none; opacity: 0.75; transition: opacity 0.15s; }
.site-bar-links a:hover { opacity: 1; }
.site-bar-actions { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.site-bar-actions a { color: var(--garden-text); text-decoration: none; opacity: 0.75; }
.site-bar-actions a:hover { opacity: 1; }
.site-cart-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--garden-text);
    transition: background 0.15s;
}
.site-cart-link:hover { background: var(--garden-card); }
.site-cart-badge {
    position: absolute; top: -2px; right: -4px;
    background: var(--garden-accent3); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    padding: 1px 6px; min-width: 18px; text-align: center; line-height: 1.4;
    border: 2px solid var(--garden-bg);
    font-variant-numeric: tabular-nums;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--site-radius);
    font-size: 14px; font-weight: 600; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; transition: transform 0.15s, opacity 0.15s;
}
.btn-pill:hover { transform: translateY(-1px); }
/* The selector chain matches .site-body a (specificity 0,1,1) so these don't
   get overridden by the inherit rule when used inside .site-body content. */
.site-body a.btn-pill-primary,
.btn-pill-primary { background: var(--garden-accent); color: #fff; }
.site-body a.btn-pill-dark,
.btn-pill-dark    { background: var(--garden-text); color: var(--garden-bg); }
.site-body a.btn-pill-ghost,
.btn-pill-ghost   { background: transparent; border-color: var(--garden-border); color: var(--garden-text); }
.site-body a.btn-pill-light,
.btn-pill-light   { background: #fff; color: var(--garden-accent); }
.btn-pill-light-outline { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-pill-lg { padding: 16px 28px; font-size: 15px; }
.btn-pill-sm { padding: 6px 12px; font-size: 12px; }

/* ── Hero ─────────────────────────────────────────────────── */
.site-hero {
    padding: 40px var(--site-shell-pad-x) 56px;
    max-width: var(--site-shell-max); margin: 0 auto;
}
.site-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.site-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--garden-border);
    background: var(--garden-card); font-size: 13px;
}
.site-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--garden-accent); }
.site-h1 {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: clamp(48px, 7vw, 92px); line-height: 0.98; letter-spacing: -2px;
    margin: 24px 0 0;
    text-wrap: balance;
}
.site-h1 em { font-style: italic; color: var(--garden-accent); font-weight: inherit; }
.site-hero-sub { font-size: 20px; line-height: 1.5; opacity: 0.7; max-width: 520px; margin-top: 28px; text-wrap: pretty; }
.site-hero-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.site-hero-features { display: flex; gap: 28px; margin-top: 48px; font-size: 13px; opacity: 0.6; flex-wrap: wrap; }

.site-hero-art { position: relative; height: 540px; }
.site-hero-circle {
    position: absolute; inset: 40px 0 0 40px;
    background: var(--garden-accent); border-radius: 50%; opacity: 0.12;
}
.site-hero-mascot { position: absolute; inset: 20px 60px 80px 80px; }

/* Hero variant for inner pages — real photo on the right of the hero.
   Plain rounded rectangle, no blob clipping. Matches the user's preference
   of "just leave the photos as they are". */
.site-hero-photo {
    position: relative; height: 480px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover; background-position: center;
}
.site-hero-compact { padding-bottom: 32px; }
.site-hero-compact .site-h1 { font-size: clamp(36px, 5vw, 60px); }

/* Float cards */
.site-float-card {
    position: absolute; padding: 12px 16px;
    background: var(--garden-card); border: 1px solid var(--garden-border);
    border-radius: 14px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
}
.site-float-card-label { font-size: 11px; opacity: 0.55; }
.site-float-card-value { font-size: 14px; font-weight: 600; margin-top: 4px; }

/* ── Section structure ────────────────────────────────────── */
.site-section {
    padding: var(--site-section-pad) var(--site-shell-pad-x);
    max-width: var(--site-shell-max); margin: 0 auto;
}
.site-section-narrow {
    padding: var(--site-section-pad) var(--site-shell-pad-x);
    max-width: var(--site-shell-max); margin: 0 auto;
}
.site-section-tight { padding-top: 60px; padding-bottom: 60px; }

/* Heading block at the top of a section: eyebrow + title + sub.
   Replaces the inline-styled <div style="max-width:760px"> wrappers that
   used to clamp every heading hard to the left of its section. The 60ch
   limit keeps copy readable on wide screens but it lives at the section
   edge — no more weird empty band on the right. */
.site-section-head { max-width: 60ch; margin-bottom: 32px; text-wrap: pretty; }
.site-section-head:last-child { margin-bottom: 0; }

/* Standalone-eyebrow group: an eyebrow with no title/sub below it,
   used as a sub-section divider (e.g. category names on /services).
   Default to enough vertical air on both sides so the eyebrow doesn't
   feel jammed against the grid above and below. */
.site-section-group {
    margin: 48px 0 24px;
}
.site-section-group:first-child { margin-top: 0; }
.site-section-group .site-section-eyebrow { margin-bottom: 0; }

.site-section-eyebrow {
    font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--garden-accent); margin-bottom: 10px; font-weight: 600;
}
.site-section-title {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: 52px; line-height: 1.05; letter-spacing: -1px; margin: 0;
    text-wrap: balance;
}
.site-section-title em { font-style: italic; }
.site-section-sub { font-size: 18px; opacity: 0.65; margin-top: 16px; text-wrap: pretty; }

/* ── Logo cloud ──────────────────────────────────────────── */
.site-logos {
    padding: 40px var(--site-shell-pad-x) 60px;
    max-width: var(--site-shell-max); margin: 0 auto;
}
.site-logos-label { text-align: center; font-size: 13px; opacity: 0.55; margin-bottom: 28px; }
.site-logos-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 32px; opacity: 0.55;
}
.site-logos-row span {
    font-family: 'Fraunces', serif; font-size: 22px; font-style: italic; font-weight: 500;
}

/* ── Feature grid ────────────────────────────────────────── */
.site-feat-card {
    padding: 32px; background: var(--garden-card);
    border: 1px solid var(--garden-border); border-radius: var(--site-card-radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.site-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18);
}
.site-feat-illo { height: 160px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
.site-feat-illo svg { width: 100%; height: 100%; }
.site-feat-title {
    font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; margin: 0;
}
.site-feat-body { font-size: 14px; line-height: 1.55; opacity: 0.7; margin-top: 10px; text-wrap: pretty; }

/* ── Plan cards ──────────────────────────────────────────── */
/* Switched from rigid 4-col to auto-fit so 1-3 plans center nicely */
.site-grid-3,
.site-grid-4 {
    display: grid;
    gap: 24px;
    justify-content: center;
}
.site-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); }
.site-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }

.site-plan-card {
    padding: 28px; border-radius: var(--site-card-radius);
    position: relative; overflow: hidden;
    background: var(--garden-card); border: 1px solid var(--garden-border);
    color: var(--garden-text);
    display: flex; flex-direction: column;
}
.site-plan-card.is-best {
    background: var(--garden-accent); color: #fff; border-color: transparent;
}
.site-plan-badge {
    position: absolute; top: 16px; right: 16px;
    padding: 3px 10px; background: var(--garden-accent2); color: #fff;
    font-size: 10px; font-weight: 700; border-radius: 999px; letter-spacing: 0.5px;
}
.site-plan-name {
    font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
    opacity: 0.55; font-weight: 600;
}
.site-plan-card.is-best .site-plan-name { opacity: 0.8; }
.site-plan-note { font-size: 12px; opacity: 0.6; margin-top: 4px; min-height: 30px; }
.site-plan-card.is-best .site-plan-note { opacity: 0.8; }
.site-plan-price {
    display: flex; align-items: baseline; gap: 4px; margin-top: 16px;
}
.site-plan-price .currency { font-size: 16px; opacity: 0.7; }
.site-plan-price .amount {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: 56px; letter-spacing: -1.5px; line-height: 1;
}
.site-plan-price .per { font-size: 13px; opacity: 0.7; margin-left: 4px; }
.site-plan-cta {
    margin-top: 18px; padding: 11px 16px; width: 100%;
    border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
    background: var(--garden-text); color: var(--garden-bg);
    text-align: center; text-decoration: none; display: block;
}
.site-plan-card.is-best .site-plan-cta { background: #fff; color: var(--garden-accent); }
.site-plan-list {
    border-top: 1px solid var(--garden-border); margin-top: 20px; padding-top: 16px;
    list-style: none; padding-left: 0;
}
.site-plan-card.is-best .site-plan-list { border-top-color: rgba(255,255,255,0.2); }
.site-plan-list li {
    display: flex; gap: 10px; padding: 5px 0; font-size: 13px;
}
.site-plan-list li::before { content: "✓"; color: var(--garden-accent); font-weight: 700; }
.site-plan-card.is-best .site-plan-list li::before { color: #fff; }

/* ── Testimonials ────────────────────────────────────────── */
.site-quote-card {
    padding: 32px; background: var(--garden-card);
    border: 1px solid var(--garden-border); border-radius: var(--site-card-radius);
}
.site-quote-mark {
    font-size: 44px; font-family: 'Fraunces', serif;
    color: var(--garden-accent); line-height: 0.5; margin-bottom: 14px;
}
.site-quote-text { font-size: 17px; line-height: 1.5; margin: 0; text-wrap: pretty; }
.site-quote-author { margin-top: 22px; display: flex; align-items: center; gap: 10px; }
.site-quote-avatar {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--garden-accent); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.site-quote-name { font-size: 14px; font-weight: 600; }
.site-quote-role { font-size: 12px; opacity: 0.6; }

/* ── CTA banner ─────────────────────────────────────────── */
.site-cta-wrap {
    padding: 40px var(--site-shell-pad-x) 56px;
    max-width: var(--site-shell-max); margin: 0 auto;
}
.site-cta-banner {
    background: var(--garden-accent); color: #fff;
    border-radius: 32px; padding: 80px 64px;
    position: relative; overflow: hidden; text-align: center;
}
.site-cta-banner .blob1 {
    position: absolute; top: -60px; left: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: var(--garden-accent2); opacity: 0.35;
}
.site-cta-banner .blob2 {
    position: absolute; bottom: -80px; right: -40px;
    width: 260px; height: 260px; border-radius: 50%;
    background: #fff; opacity: 0.12;
}
.site-cta-banner h2 {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: 64px; line-height: 1; margin: 0; letter-spacing: -1.5px;
    max-width: 800px; margin-inline: auto;
    position: relative;
}
.site-cta-banner h2 em { font-style: italic; }
.site-cta-banner p {
    font-size: 18px; opacity: 0.85; max-width: 520px;
    margin: 20px auto 0; position: relative;
}
.site-cta-banner-actions {
    display: flex; gap: 14px; justify-content: center;
    margin-top: 32px; position: relative; flex-wrap: wrap;
}

/* ── Footer ──────────────────────────────────────────────── */
/* .site-foot is a full-width band (lets the background extend if you ever
   want it tinted). All horizontal alignment happens on the inner blocks
   (.site-foot-grid and .site-foot-bottom) so they line up with sections
   above. The top divider lives on the inner grid for the same reason. */
.site-foot {
    padding: 80px 0 40px;
}
.site-foot-grid {
    max-width: var(--site-shell-max); margin: 0 auto;
    padding: 56px var(--site-shell-pad-x) 0;
    border-top: 1px solid var(--garden-border);
    display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px;
}
.site-foot-brand p {
    font-size: 14px; opacity: 0.6; margin-top: 14px;
    max-width: 260px; line-height: 1.5;
}
.site-foot-col-title { font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.site-foot-col a {
    display: block; font-size: 14px; opacity: 0.65; padding: 5px 0;
    text-decoration: none; color: var(--garden-text);
}
.site-foot-col a:hover { opacity: 1; }
.site-foot-bottom {
    max-width: var(--site-shell-max); margin: 56px auto 0;
    padding: 24px var(--site-shell-pad-x) 0;
    border-top: 1px solid var(--garden-border);
    display: flex; justify-content: space-between; font-size: 12px; opacity: 0.55;
    flex-wrap: wrap; gap: 12px;
}

/* ── Domain search ──────────────────────────────────────── */
.site-domain-form {
    max-width: 580px; margin: 0 auto;
    display: flex; gap: 8px;
}
.site-domain-input {
    flex: 1; font-size: 18px; padding: 16px 20px;
    border-radius: 12px; border: 1px solid var(--garden-border);
    background: var(--garden-card); color: var(--garden-text);
    font-family: inherit;
}
.site-domain-input:focus { outline: 2px solid var(--garden-accent); outline-offset: 2px; }
.site-domain-results { max-width: 760px; margin: 32px auto 0; }
.site-domain-row {
    display: grid; grid-template-columns: 1fr 200px 110px 140px; gap: 16px;
    align-items: center; padding: 16px 20px;
    background: var(--garden-card); border: 1px solid var(--garden-border);
    border-radius: 12px; margin-bottom: 8px;
}
.site-domain-name { font-weight: 700; font-size: 16px; font-family: 'Fraunces', serif; }
.site-domain-price { color: var(--garden-mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.site-domain-status {
    font-size: 11px; padding: 4px 10px; border-radius: 999px;
    text-align: center; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
}
.site-domain-status.ok    { background: rgba(107,143,92,0.15); color: var(--garden-accent); }
.site-domain-status.taken { background: rgba(201,107,90,0.15); color: var(--garden-accent3); }
.site-domain-status.unk   { background: var(--garden-soft); color: var(--garden-mute); }

/* ── Tables (TLD pricing, etc.) ─────────────────────────── */
.site-table {
    width: 100%; max-width: 700px; margin: 0 auto;
    border-collapse: collapse; background: var(--garden-card);
    border: 1px solid var(--garden-border); border-radius: var(--site-card-radius); overflow: hidden;
}
.site-table th, .site-table td {
    padding: 14px 20px; text-align: left;
    border-bottom: 1px solid var(--garden-border);
}
.site-table tr:last-child td { border-bottom: 0; }
.site-table th { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.6; font-weight: 600; }
.site-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── FAQ / Help ──────────────────────────────────────────── */
.site-faq { max-width: 760px; margin: 0 auto; }
.site-faq-item {
    padding: 20px 24px; background: var(--garden-card);
    border: 1px solid var(--garden-border); border-radius: 14px;
    margin-bottom: 10px;
}
.site-faq-item summary {
    cursor: pointer; font-weight: 600; font-size: 16px;
    list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.site-faq-item summary::-webkit-details-marker { display: none; }
.site-faq-item summary::after { content: "+"; font-size: 22px; opacity: 0.5; }
.site-faq-item[open] summary::after { content: "−"; }
.site-faq-item p { margin: 14px 0 0; opacity: 0.75; line-height: 1.6; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .site-foot-grid { grid-template-columns: 1fr 1fr; }
    .site-hero-grid { grid-template-columns: 1fr; }
    .site-hero-art { display: none; } /* keep it simple on tablets */
}
@media (max-width: 720px) {
    /* Narrow the unified shell padding on phones — affects every wrapper
       (nav, hero, sections, CTA, footer, logo cloud) in one move. */
    :root { --site-shell-pad-x: 24px; }
    .site-bar { padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
    .site-bar-links { display: none; }
    .site-section { padding-top: 60px; padding-bottom: 60px; }
    .site-h1 { font-size: clamp(36px, 12vw, 56px); letter-spacing: -1px; }
    .site-section-title { font-size: 36px; letter-spacing: -0.5px; }
    .site-cta-banner { padding: 48px 24px; }
    .site-cta-banner h2 { font-size: 36px; }
    .site-foot-grid { grid-template-columns: 1fr; gap: 32px; }
    .site-foot { padding-top: 48px; padding-bottom: 24px; }
    .site-domain-row { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ── Hosting plan picker (collapsed by default, opens on Get button) ── */
.site-plan-pick { margin-top: 18px; }
.site-plan-pick summary {
    list-style: none;
    cursor: pointer;
}
.site-plan-pick summary::-webkit-details-marker { display: none; }
.site-plan-pick[open] summary { display: none; }
.site-plan-pick-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 4px;
}
.site-plan-pick-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.7;
    font-weight: 600;
}
.site-plan-pick-input {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--garden-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    color: var(--garden-text);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.site-plan-card.is-best .site-plan-pick-input {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.site-plan-card.is-best .site-plan-pick-input::placeholder { color: rgba(255,255,255,0.5); }
.site-plan-pick-input:focus { outline: 2px solid var(--garden-accent2); outline-offset: 1px; }
.site-plan-cta-go { margin-top: 4px; }
.site-plan-pick-help {
    font-size: 11px;
    opacity: 0.7;
    text-align: center;
}
.site-plan-pick-help a {
    color: inherit;
    text-decoration: underline;
}

/* ============================================================
   PUBLIC-SITE UTILITIES
   Slim copies of the dashboard utility classes, retuned to the Garden
   theme variables so they look at home on the public site. The dashboard
   versions in app.css use --cd-* variables and are not loaded here.
   ============================================================ */

.text-muted { color: var(--garden-text); opacity: 0.65; }
.text-xs    { font-size: 12px; }
.text-sm    { font-size: 13px; }
.mono       { font-family: var(--ff-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); }
.num        { text-align: right; font-variant-numeric: tabular-nums; }

/* Forms */
.form-field { display: block; margin-bottom: 12px; }
.form-field label {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 6px; color: var(--garden-text);
}
.form-field .hint { font-size: 12px; color: var(--garden-text); opacity: 0.65; margin-top: 6px; }
.form-input {
    width: 100%; padding: 11px 14px; font-size: 14px;
    border: 1.5px solid var(--garden-border, #e5dfcf);
    border-radius: 10px; background: #fff;
    font-family: inherit; color: var(--garden-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
    outline: none; border-color: var(--garden-accent);
    box-shadow: 0 0 0 3px rgba(107, 143, 92, 0.15);
}
.form-input:disabled { background: var(--garden-soft, #f0e8d4); cursor: not-allowed; }
.form-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* Tables */
.cd-table-wrap {
    background: #fff;
    border: 1px solid var(--garden-border, #e5dfcf);
    border-radius: 14px;
    overflow: hidden;
}
.cd-table { width: 100%; border-collapse: collapse; }
.cd-table thead {
    background: var(--garden-soft, #f0e8d4);
    border-bottom: 1px solid var(--garden-border, #e5dfcf);
}
.cd-table th {
    text-align: left; padding: 12px 16px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--garden-text); opacity: 0.7;
}
.cd-table th.num { text-align: right; }
.cd-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--garden-border, #e5dfcf);
    font-size: 14px; color: var(--garden-text);
    vertical-align: middle;
}
.cd-table tbody tr:hover { background: rgba(107, 143, 92, 0.04); }
.cd-table .mono { font-size: 13px; }

/* Cards (when used inside a section, not the .site-feat-card) */
.card {
    background: #fff;
    border: 1px solid var(--garden-border, #e5dfcf);
    border-radius: 14px;
    padding: 24px;
}
.card-head { margin-bottom: 12px; }
.card-title { font-size: 16px; font-weight: 700; color: var(--garden-text); }
.card-sub { font-size: 13px; color: var(--garden-text); opacity: 0.65; margin-top: 4px; }
.card-empty {
    padding: 48px 24px; text-align: center;
    color: var(--garden-text); opacity: 0.65;
    background: #fff; border: 1px dashed var(--garden-border, #e5dfcf);
    border-radius: 14px;
}
.card-empty .icon { font-size: 32px; display: block; margin-bottom: 12px; }

/* Generic buttons (rare on public site — most use .btn-pill-* instead) */
.site-body a.btn,
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--garden-border, #e5dfcf);
    background: #fff; color: var(--garden-text);
    border-radius: 10px; cursor: pointer; text-decoration: none;
}
.site-body a.btn:hover, .btn:hover { background: var(--garden-soft, #f0e8d4); }

/* Margin helpers */
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 32px; }
/* v1.7.31 — header quick button (colour set in Admin → Website → Branding) */
.site-body a.site-hb-btn, a.site-hb-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 9px 16px; border-radius: 999px;
    background: var(--hb, #f26b1d); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
    box-shadow: 0 4px 14px -6px var(--hb, #f26b1d); transition: transform .15s, filter .15s; white-space: nowrap;
}
.site-body a.site-hb-btn:hover, a.site-hb-btn:hover { transform: translateY(-1px); filter: brightness(1.07); color: #fff; }
@media (max-width: 600px) { .site-body a.site-hb-btn, a.site-hb-btn { padding: 7px 12px; font-size: 13px; } }

/* ===========================================================================
   v1.8.1 — content editor widgets and shared look options
   =========================================================================== */
.wb-bg { border-radius: 32px; margin: 0 auto 12px; max-width: var(--site-shell-max); }
.wb-bg > .site-section, .wb-bg > section { background: transparent; }
.wb-bg-sand   { background: var(--garden-soft); }
.wb-bg-mint   { background: #e3eedb; }
.wb-bg-yellow { background: #fbf0c4; }
.wb-bg-pink   { background: #fadbe7; }
.wb-bg-blue   { background: #dce6f8; }
.wb-bg-dark   { background: var(--garden-text); color: var(--garden-bg); }
.wb-bg-dark .site-section-title, .wb-bg-dark h2, .wb-bg-dark h3, .wb-bg-dark .wb-stat-n { color: var(--garden-bg); }
.wb-bg-dark .site-section-sub, .wb-bg-dark p, .wb-bg-dark .wb-stat-l { color: rgba(246, 241, 230, .78); }
.wb-bg-dark .site-feat-card, .wb-bg-dark .wb-stat { background: rgba(255,255,255,.06); color: var(--garden-bg); }
.wb-bg-dark .btn-pill-dark { background: var(--garden-bg); color: var(--garden-text); }
.wb-bg-dark .btn-pill-ghost { color: var(--garden-bg); border-color: rgba(255,255,255,.35); }
.wb-space-tight > .site-section, .wb-space-tight > section { padding-top: 32px; padding-bottom: 32px; }
.wb-space-roomy > .site-section, .wb-space-roomy > section { padding-top: 140px; padding-bottom: 140px; }
.wb-space-none  > .site-section, .wb-space-none  > section { padding-top: 0; padding-bottom: 0; }
.wb-narrow > .site-section, .wb-narrow > section { max-width: 820px; }
.wb-center, .wb-center .site-section-head { text-align: center; }
.wb-center .site-section-head { margin-left: auto; margin-right: auto; }
.wb-center .site-hero-actions, .wb-center .site-cta-banner-actions { justify-content: center; }
@media (max-width: 720px) { .wb-only-desktop { display: none !important; } }
@media (min-width: 721px) { .wb-only-mobile  { display: none !important; } }
.wb-preview-bar { position: sticky; top: 0; z-index: 60; background: #f6dc79; color: #1d211c; text-align: center; font-weight: 700; font-size: 13px; padding: 8px 16px; }

/* Picture and text */
.wb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wb-split-rev .wb-split-pic { order: 2; }
.wb-split-solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.wb-split-pic img { width: 100%; height: auto; display: block; border-radius: 28px; object-fit: cover; aspect-ratio: 4 / 3.2; }
/* custom.css centres every section heading; inside picture-and-text the text sits beside the picture, so left. */
.site-section .wb-split .wb-split-text .site-section-eyebrow:not(.wb-x),
.site-section .wb-split .wb-split-text .site-section-title:not(.wb-x) { text-align: left; }
.wb-split-text .site-section-title { margin-top: 6px; }
.wb-center .site-section .wb-split .wb-split-text .site-section-eyebrow:not(.wb-x),
.wb-center .site-section .wb-split .wb-split-text .site-section-title:not(.wb-x) { text-align: center; }
.wb-prose { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--garden-text); }
.wb-prose p { margin: 0 0 12px; }
.wb-split-text .site-hero-actions { margin-top: 24px; }
.wb-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.wb-ticks li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.5; }
.wb-ticks li::before {
    content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
    background: #dcebd2; color: var(--garden-accent); font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.wb-ticks-cols { gap: 14px 32px; max-width: 980px; margin-left: auto; margin-right: auto; }
.wb-cols-2.wb-ticks-cols { grid-template-columns: 1fr 1fr; }
.wb-cols-3.wb-ticks-cols { grid-template-columns: 1fr 1fr 1fr; }
.wb-center .wb-ticks-cols { margin-left: auto; margin-right: auto; text-align: left; }

/* Numbers */
.wb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.wb-stat { background: var(--garden-card); border-radius: 24px; padding: 28px 24px; text-align: center; }
.wb-stat-n { font-family: var(--ff-serif, 'Fraunces', Georgia, serif); font-size: clamp(36px, 5vw, 52px); line-height: 1; color: var(--garden-accent); letter-spacing: -1px; }
.wb-stat-l { margin-top: 10px; font-size: 14px; color: var(--garden-mute); font-weight: 600; }
.wb-stats .wb-stat:nth-child(4n+2) { background: #fbf0c4; }
.wb-stats .wb-stat:nth-child(4n+3) { background: #fadbe7; }
.wb-stats .wb-stat:nth-child(4n+4) { background: #dce6f8; }

/* Comparison */
.wb-compare-wrap { overflow-x: auto; border-radius: 24px; background: var(--garden-card); }
.wb-compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.wb-compare th, .wb-compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid rgba(42,42,36,.06); }
.wb-compare thead th { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; font-weight: 700; padding-top: 20px; }
.wb-compare tbody th { text-align: left; font-weight: 600; }
.wb-compare thead th:first-child { text-align: left; }
.wb-compare tr:last-child td, .wb-compare tr:last-child th { border-bottom: 0; }
.wb-compare .wb-hl { background: rgba(107, 143, 92, .12); }
.wb-compare thead .wb-hl { background: var(--garden-accent); color: #fff; }
.wb-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dcebd2; color: var(--garden-accent); font-weight: 800; font-size: 13px; }
.wb-no { color: var(--garden-mute); }

/* Gallery */
.wb-gallery { display: grid; gap: 18px; }
.wb-gallery.wb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wb-gallery.wb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wb-gallery.wb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.wb-gal-item { display: block; margin: 0; text-decoration: none; color: inherit; border-radius: 22px; overflow: hidden; background: var(--garden-card); }
.wb-gal-pic { aspect-ratio: 4 / 3; overflow: hidden; }
.wb-gal-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
a.wb-gal-item:hover .wb-gal-pic img { transform: scale(1.04); }
.wb-gal-cap { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 2px; }
.wb-gal-cap strong { font-size: 15px; }
.wb-gal-cap span { font-size: 13px; color: var(--garden-mute); }

/* Buttons, video, announcement, spacer */
.wb-buttons { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; padding-bottom: 24px; }
.wb-buttons-c { justify-content: center; }
.wb-video { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #111; }
.wb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wb-announce { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; text-align: center;
    padding: 12px 20px; margin: 12px auto; max-width: var(--site-shell-max); border-radius: 99px; font-size: 14.5px; font-weight: 600; }
.wb-announce a { font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wb-tone-yellow { background: #f6dc79; color: #1d211c; }
.wb-tone-mint   { background: #d4e8c8; color: #1d211c; }
.wb-tone-pink   { background: #f6bfd5; color: #1d211c; }
.wb-tone-blue   { background: #bcd0f3; color: #1d211c; }
.wb-tone-dark   { background: var(--garden-text); color: var(--garden-bg); }
.wb-spacer { max-width: var(--site-shell-max); margin: 0 auto; padding: 0 var(--site-shell-pad-x); display: flex; align-items: center; }
.wb-spacer-s { height: 32px; } .wb-spacer-m { height: 72px; } .wb-spacer-l { height: 140px; }
.wb-spacer hr { width: 100%; border: 0; height: 1px; background: rgba(42,42,36,.12); margin: 0; }

/* Talk to us */
.wb-talk { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(120deg, #e3eedb, #fbf0c4); border-radius: 32px; padding: 36px 40px; }
.wb-talk-title { font-family: var(--ff-serif, 'Fraunces', Georgia, serif); font-size: clamp(24px, 3vw, 34px); font-weight: 400; margin: 0; letter-spacing: -.4px; }
.wb-talk p { margin: 8px 0 0; color: var(--garden-text); opacity: .8; }
.wb-talk-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.site-body a.btn-pill-wa, .btn-pill-wa { background: #25d366; color: #0b2e17; }

/* Contact form */
.wb-form-card { background: var(--garden-card); border-radius: 28px; padding: 32px; }
.wb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wb-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.wb-f-full { grid-column: 1 / -1; }
.wb-f input, .wb-f select, .wb-f textarea {
    font: inherit; font-size: 15px; font-weight: 400; padding: 12px 14px; border-radius: 14px; border: 0;
    background: #fff; color: var(--garden-text); box-shadow: inset 0 0 0 1px rgba(42,42,36,.08); width: 100%;
}
.wb-f input:focus, .wb-f select:focus, .wb-f textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--garden-accent); }
.wb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wb-form-done { background: #dcebd2; border-radius: 18px; padding: 22px 24px; font-weight: 600; font-size: 16px; text-align: center; }

/* Logos as pictures */
.cd10-logo-img img { max-height: 40px; width: auto; display: block; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.cd10-logo-img:hover img { filter: none; opacity: 1; }

@media (max-width: 900px) {
    .wb-split { grid-template-columns: 1fr; gap: 28px; }
    .wb-split-rev .wb-split-pic { order: 0; }
    .wb-gallery.wb-cols-3, .wb-gallery.wb-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .wb-cols-3.wb-ticks-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .wb-gallery.wb-cols-2, .wb-gallery.wb-cols-3, .wb-gallery.wb-cols-4 { grid-template-columns: 1fr; }
    .wb-cols-2.wb-ticks-cols, .wb-cols-3.wb-ticks-cols { grid-template-columns: 1fr; }
    .wb-form { grid-template-columns: 1fr; }
    .wb-form-card { padding: 22px; }
    .wb-talk { padding: 28px 24px; }
    .wb-bg { border-radius: 22px; margin-left: 10px; margin-right: 10px; }
    .wb-announce { border-radius: 18px; margin-left: 12px; margin-right: 12px; }
}

/* v1.8.2 — "Most popular": a soft fill and a pill, never a coloured border */
.site-feat-card.site-card-popular { background: #e6efdd; border-color: transparent; }
.site-popular-pill { position: absolute; top: -12px; right: 18px; background: var(--garden-accent); color: #fff;
    padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
/* A hero with no picture: one column, no empty block */
.site-hero-noimg .site-hero-grid { grid-template-columns: minmax(0, 760px); }
.site-hero-photo[style*="url('')"] { display: none; }
.site-hero-grid:has(> .site-hero-photo[style*="url('')"]) { grid-template-columns: minmax(0, 760px); }

/* v1.8.8 — page sections always sit in the middle of the window, whatever
   else on the page (a chat widget, an embed, an old rule) tries to change
   the page's own box. Plan prices stay on one line. */
.site-body { display: block !important; }
.site-body > main { display: block !important; width: 100% !important; max-width: none !important; float: none !important; }
.site-body .site-section,
.site-body .site-section-narrow,
.site-body .wb-bg { margin-left: auto !important; margin-right: auto !important; float: none !important; }
.site-body .site-grid-3,
.site-body .site-grid-4 { justify-content: center !important; }
.site-card-price { font-size: 34px; white-space: nowrap; }
@media (min-width: 900px) { .site-card-price { font-size: clamp(28px, 2.2vw, 34px); } }