/* PersonalScapes — self-contained utility stylesheet.
   Deliberately dependency-free (no CDN, no build step) so styling never
   depends on outside network access, in development or in production. */

:root {
    --forest-50:  #f2f7f2;
    --forest-100: #dfeee0;
    --forest-200: #bfdcc1;
    --forest-300: #94c398;
    --forest-400: #68a76e;
    --forest-500: #468c4d;
    --forest-600: #33703a;
    --forest-700: #295a30;
    --forest-800: #234829;
    --forest-900: #1d3c23;
    --clay-200: #e8d2bb;
    --clay-400: #bb8a52;
    --clay-500: #8f5e2e;
    --clay-600: #774c24;
    /* Muted and secondary text on the light cards. The lighter
       forest-400/500 shades are kept for borders, icons and dark panels;
       as text on cream they were too faint to read (Oct 2026 check). */
    --text-muted: #4d6b56;
    --text-soft: #3e6a45;
    --amber-50: #fffbeb;
    --amber-200: #fde68a;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-600: #dc2626;
    --red-800: #991b1b;
    /* Soft, mostly-see-through "frosted glass" card surface — used in place
       of flat white everywhere a content panel sits over the garden photo
       background. Low opacity + a heavy blur means the garden photo reads
       clearly through every card as a lightly-shaded image of itself,
       rather than disappearing behind a solid box — while the blur keeps
       the photo's own detail from fighting with the text sitting on top
       of it. */
    /* Raised from 0.5 in Oct 2026: at half see-through, green text sat on a
       blurred green garden and was hard to read. The photo still shows
       faintly at the edges. */
    --card-bg: rgba(250, 246, 236, 0.92);
    --card-bg-solid: #faf6ec;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    position: relative;
    background-color: var(--forest-50);
    color: var(--forest-900);
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Real photo, fixed behind every page, so the app always shows an actual,
   vividly colorful garden rather than a flat color or a drawn pattern.
   Only lightly washed at the very top (behind the nav-adjacent area) so
   long blocks of body text stay easy to read; everywhere else the photo
   shows at full, vibrant color — white cards carry their own solid
   background, so they stay perfectly legible regardless. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgba(242,247,242,0.32) 0%, rgba(242,247,242,0.18) 25%, rgba(242,247,242,0.30) 100%),
        url('../images/photos/terraced-garden.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: saturate(1.15);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ---- layout ---- */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.divide-y > * + * { border-top: 1px solid var(--forest-100); }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:inline { display: inline; }
    .sm\:flex { display: flex; }
    .sm\:hidden { display: none; }
    .sm\:text-3xl { font-size: 1.875rem; }
    .sm\:w-auto { width: auto; }
}
@media (max-width: 639px) {
    .sm\:inline { display: none; }
    .sm\:flex { display: none; }
}

/* ---- mobile nav menu (hamburger) ----
   Below 640px, the account-area links (My Properties/Owner Dashboard, the
   logged-in user's name, Log out) move out of the inline header row —
   which they used to always render into, unconditionally, with no
   wrapping/overflow handling at all — and into this toggleable dropdown
   panel instead. See base.html's nav_links() macro: the exact same markup
   renders into both the desktop row and this panel, so there's one
   source of truth for the links themselves. */
.nav-menu-toggle {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.nav-menu-panel {
    display: flex;
    flex-direction: column;
    background: var(--forest-800, #1f3320);
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 0.5rem 1rem 1rem;
}
/* The class above sets `display: flex` unconditionally, which beat the
   native `hidden` attribute's own (very low-specificity) default styling —
   so the panel rendered open on every page load instead of staying
   collapsed behind the hamburger until clicked. A `[hidden]`-qualified
   override wins the specificity fight and restores the toggle. */
.nav-menu-panel[hidden] {
    display: none;
}
.nav-menu-panel a, .nav-menu-panel span {
    padding: 0.65rem 0;
    font-size: 0.95rem;
    color: #fff;
}
.nav-menu-panel a { border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-menu-panel a:last-child { border-bottom: none; }
.nav-menu-panel span { color: var(--forest-300, #a8c4a0); font-size: 0.85rem; }

/* ---- gaps & spacing ---- */
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }

.space-y-0\.5 > * + * { margin-top: 0.125rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

.p-3 { padding: 0.75rem; }
.p-2 { padding: 0.5rem; }
.break-all { word-break: break-all; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.pr-3 { padding-right: 0.75rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }

.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-4 { margin-left: 1rem; }
.mr-1 { margin-right: 0.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: 64rem; }
.max-h-40 { max-height: 10rem; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.h-2 { height: 0.5rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-full { height: 100%; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.object-cover { object-fit: cover; }

/* ---- positioning ----
   These were referenced by several templates (the property-card and
   photo-gallery delete buttons, the before/after growth slider) but were
   never actually defined here — this is a hand-rolled utility set, not
   real Tailwind, so an unrecognized class name just silently does nothing
   instead of erroring. Without `.relative`/`.absolute`, those delete
   buttons rendered in normal document flow (showing up low/misplaced
   instead of pinned to their corner) and the growth slider's two images
   stacked vertically instead of overlapping for the crossfade. */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-1 { top: 0.25rem; }
.top-2 { top: 0.5rem; }
.right-1 { right: 0.25rem; }
.right-2 { right: 0.5rem; }

/* ---- typography ---- */
.font-sans { font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

/* ---- colors ---- */
/* Every card, panel, and "white" secondary button in the app uses this
   class. Rather than flat white (which blanks out the garden photo behind
   every box), it's a warm, mostly-opaque parchment tone with a light blur
   behind it — the photo still shows through faintly at the edges, text
   stays fully readable. Anything that genuinely needs solid, undiluted
   white (none of the current UI does) should use --card-bg-solid directly
   instead of this class. */
.bg-white {
    background-color: var(--card-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
/* Crisp (non-blurred) translucent white, used only by the small delete-✕
   buttons that float over a photo/card-banner — those need to stay
   legible against whatever image is directly behind them without the
   heavier frosted-glass treatment above. */
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-forest-50 { background-color: var(--forest-50); }
.bg-forest-100 { background-color: var(--forest-100); }
.bg-forest-500 { background-color: var(--forest-500); }
.bg-forest-700 { background-color: var(--forest-700); }
.bg-forest-800 { background-color: var(--forest-800); }
.bg-clay-500 { background-color: var(--clay-500); }
.bg-amber-50 { background-color: var(--amber-50); }
.bg-red-100 { background-color: var(--red-100); }

.text-white { color: #fff; }
.text-forest-300 { color: var(--forest-300); }
.text-forest-400 { color: var(--text-muted); }
.text-forest-500 { color: var(--text-soft); }
.text-forest-600 { color: var(--forest-600); }
.text-forest-700 { color: var(--forest-700); }
.text-forest-800 { color: var(--forest-800); }
.text-forest-900 { color: var(--forest-900); }
.text-clay-400 { color: var(--clay-400); }
.text-clay-600 { color: var(--clay-600); }
.text-amber-700 { color: var(--amber-700); }
.text-amber-800 { color: var(--amber-800); }
.text-red-600 { color: var(--red-600); }
.text-red-800 { color: var(--red-800); }

.border { border: 1px solid var(--forest-200); }
.border-2 { border: 2px solid var(--forest-300); }
.border-t { border-top: 1px solid var(--forest-100); }
.border-b { border-bottom: 1px solid var(--forest-100); }
.border-forest-100 { border-color: var(--forest-100); }
.border-forest-200 { border-color: var(--forest-200); }
.border-forest-300 { border-color: var(--forest-300); }
.border-forest-500 { border-color: var(--forest-500); }
.border-amber-200 { border-color: var(--amber-200); }
.border-red-200 { border-color: var(--red-200); }
.border-clay-400 { border-color: var(--clay-400); }
.divide-forest-100 > * + * { border-color: var(--forest-100); }

.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-xl { border-radius: 0.75rem; }

.shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.transition { transition: all 0.15s ease-in-out; }
.transition-all { transition: all 0.15s ease-in-out; }

/* completed maintenance task checkbox */
.bg-forest-500.border-forest-500 { background-color: var(--forest-500); border-color: var(--forest-500); }
.opacity-50 { opacity: 0.5; }

/* ---- interactive states ---- */
a.hover\:underline:hover,
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-clay-600:hover { background-color: var(--clay-600); }
.hover\:bg-forest-50:hover { background-color: var(--forest-50); }
.hover\:bg-forest-100:hover { background-color: var(--forest-100); }
.hover\:bg-forest-600:hover { background-color: var(--forest-600); }
.hover\:bg-forest-800:hover { background-color: var(--forest-800); }
.hover\:bg-red-50:hover { background-color: var(--red-50); }
.hover\:text-forest-200:hover { color: var(--forest-200); }
.hover\:text-forest-600:hover { color: var(--forest-600); }
.hover\:text-red-600:hover { color: var(--red-600); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }

.cursor-pointer { cursor: pointer; }
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.accent-clay-500 { accent-color: var(--clay-500); }
/* Generic focus/selection "ring" (a colored outline glow around a focused
   input or a highlighted card) — implemented as a shared custom property
   so `ring-2`/`focus:ring-2` (which size and show it) stay independent of
   `ring-<color>`/`focus:ring-<color>` (which set its color), the same way
   Tailwind's own ring utilities compose. Used for: the signup/login input
   focus glow, and highlighting which of the 3 designs the customer chose
   on the compare page. */
.ring-2 { box-shadow: 0 0 0 2px var(--ring-color, transparent); }
.ring-clay-200 { --ring-color: var(--clay-200); }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring-color, transparent); }
.focus\:ring-forest-400:focus { --ring-color: var(--forest-400); }

input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--forest-400);
    border-color: var(--forest-400);
}
/* Checkboxes/radios (questionnaire's "Also care about", "Sun exposure",
   etc.) had no accent-color set, so they rendered in the browser's own
   default blue instead of the site's palette — same root issue as the
   white input backgrounds above, just on a smaller control. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--clay-500);
}

/* ---- hero / showcase banners (real photos as backgrounds) ---- */
.hero-banner {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,40,25,0.25) 0%, rgba(20,40,25,0.55) 55%, rgba(20,40,25,0.85) 100%);
}
.hero-banner > * { position: relative; z-index: 1; }

.card-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 0.75rem 0.75rem 0 0;
}
.card-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,40,25,0.05) 40%, rgba(20,40,25,0.75) 100%);
    border-radius: inherit;
}

/* ---- small nav links that can sit directly over the page's photo
   background (not inside a white card) — a solid pill keeps them readable
   regardless of what's behind them ---- */
.back-link {
    display: inline-block;
    background-color: var(--card-bg);
    color: var(--forest-700);
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
.back-link:hover { background-color: var(--card-bg-solid); text-decoration: none; }

/* ---- photo gallery grids (homepage showcase, inspiration strips) ---- */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
}
.photo-gallery .card-banner { border-radius: 0.6rem; }
.photo-gallery .card-banner::before { display: none; }

/* ---- auth pages: real, full-vibrancy photo collage beside the form ---- */
.auth-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .auth-layout { grid-template-columns: 1.05fr 1fr; }
}
.auth-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 110px;
    gap: 0.6rem;
}
.auth-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.85rem;
    display: block;
    box-shadow: 0 2px 8px rgba(20,40,25,0.18);
}
.auth-gallery .tall { grid-row: span 2; }
@media (min-width: 768px) {
    .auth-gallery { grid-auto-rows: 140px; }
}
/* On mobile, .auth-layout collapses to a single column and simply follows
   source order — gallery markup first, form second in both signup.html
   and login.html — which meant 4 full-height photos (well over a
   thousand pixels on a typical phone) stood between a visitor and the
   actual form they came for. The photos are a nice trust signal on
   desktop where they sit beside the form, not above it; below 768px, put
   the form first so the primary task is immediately visible, and let the
   gallery follow for anyone who scrolls down. Both pages' outer layout is
   exactly <div class="auth-gallery">...</div><div class="...">form...
   </div> inside .auth-layout, so the form card is reliably
   .auth-layout's last child without needing a template change. */
@media (max-width: 767px) {
    .auth-layout .auth-gallery { order: 2; }
    .auth-layout > div:last-child { order: 1; }
}

/* ---- form elements ----
   These never had a background-color set, so every browser's own default
   (plain white) was showing through on every text input, select, and
   textarea across the site — questionnaire dropdowns, login/signup
   fields, the Companion chat box, all of it. That's the flat white boxes
   sitting on top of the cream/photo card theme everywhere else. Giving
   them the same solid cream (--card-bg-solid) used elsewhere for anything
   that needs to stay opaque (see the .bg-white comment above) brings them
   in line with the rest of the UI. */
input[type="text"], input[type="email"], input[type="password"], input[type="file"], input[type="date"],
select, textarea {
    background-color: var(--card-bg-solid);
    color: var(--forest-900);
    border: 1px solid var(--forest-200);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

/* ---- simple button reset ---- */
button[type="submit"] {
    border: none;
}
/* Buttons styled as plain links (e.g. "Delete this property") would
   otherwise get the browser's grey box. Colored buttons set their own
   background through their classes. */
button { background-color: transparent; }

/* ---- cinematic homepage hero: a slow crossfade between real photos with
   a gentle Ken-Burns drift, plus a staggered fade-in for the text over it.
   Restrained on purpose — motion never interferes with reading, and
   prefers-reduced-motion turns it all off below. ---- */
.cinematic-hero {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    min-height: 82vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.cinematic-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,28,17,0.6) 0%, rgba(15,28,17,0.6) 45%, rgba(15,28,17,0.9) 100%);
}
.cinematic-hero .hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroCrossfade 24s infinite;
}
.cinematic-hero .hero-slide:nth-child(1) { animation-delay: 0s; }
.cinematic-hero .hero-slide:nth-child(2) { animation-delay: 6s; }
.cinematic-hero .hero-slide:nth-child(3) { animation-delay: 12s; }
.cinematic-hero .hero-slide:nth-child(4) { animation-delay: 18s; }
@keyframes heroCrossfade {
    0%   { opacity: 0; transform: scale(1); }
    4%   { opacity: 1; }
    25%  { opacity: 1; transform: scale(1.06); }
    29%  { opacity: 0; }
    100% { opacity: 0; }
}
.cinematic-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 42rem;
    padding: 0 1.5rem;
}
.cinematic-hero .hero-content h1,
.cinematic-hero .hero-content p,
.reveal-screen .reveal-content h1,
.reveal-screen .reveal-content p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.9s ease-out forwards;
}
.fade-in-up.delay-1 { animation-delay: 0.25s; }
.fade-in-up.delay-2 { animation-delay: 0.55s; }
.fade-in-up.delay-3 { animation-delay: 0.9s; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cinematic-hero .hero-slide { animation: none; opacity: 1; }
    .cinematic-hero .hero-slide:not(:first-child) { display: none; }
    .fade-in-up, .fade-in-up.delay-1, .fade-in-up.delay-2, .fade-in-up.delay-3 {
        animation: none; opacity: 1; transform: none;
    }
}

/* ---- design reveal: full-bleed moment before the compare/result pages,
   with a quiet pause (staggered fade-ins) before the call to action ---- */
.reveal-screen {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    min-height: 88vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-color: var(--forest-800);
}
.reveal-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,30,18,0.55) 0%, rgba(15,30,18,0.65) 100%);
    backdrop-filter: blur(1px);
}
.reveal-screen .reveal-content {
    position: relative;
    z-index: 2;
    max-width: 34rem;
    padding: 0 1.5rem;
}

/* ---- homepage hero price badge: a loud, sticker-like stamp so the offer
   is the very first thing anyone reads, not a detail they find later ---- */
.price-burst {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 9.5rem;
    height: 9.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 9999px;
    background: var(--clay-500);
    color: #fff;
    border: 3px solid #fff;
    transform: rotate(-6deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.15);
}
.price-burst .price-burst-amount {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: none;
}
.price-burst .price-burst-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.95;
    margin-top: 0.2rem;
    text-shadow: none;
}
@media (max-width: 480px) {
    .price-burst { width: 7.5rem; height: 7.5rem; }
    .price-burst .price-burst-amount { font-size: 1.65rem; }
}
.hero-eyebrow-badge {
    display: inline-block;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 0.3rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Sage, the AI garden companion avatar ---- */
.sage-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(160deg, var(--forest-300), var(--forest-600));
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    flex-shrink: 0;
}
.sage-avatar svg { width: 72%; height: 72%; }
.sage-avatar.sage-sm { width: 2.75rem; height: 2.75rem; }
.sage-avatar.sage-md { width: 4.5rem; height: 4.5rem; }
.sage-avatar.sage-lg { width: 7rem; height: 7rem; }
.sage-bubble-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 9999px;
    background: linear-gradient(160deg, var(--forest-300), var(--forest-600));
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-out;
}
.sage-bubble-btn:hover { transform: scale(1.07); }
.sage-bubble-btn svg { width: 75%; height: 75%; }
.sage-bubble-label {
    position: fixed;
    right: 5.75rem;
    bottom: 1.9rem;
    z-index: 40;
    background: var(--card-bg-solid);
    color: var(--forest-800);
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    white-space: nowrap;
}
@media (max-width: 480px) {
    .sage-bubble-label { display: none; }
}
.sage-sway { animation: sageSway 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes sageSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-4deg); }
}

/* ---- Sage's idle "aliveness": a slow meditative breath, a soft pulsing
   aura, and (while actually speaking) a talking mouth — so Sage reads as a
   living presence rather than a static icon, everywhere the avatar shows
   up (corner bubble, welcome card, "meet Sage" tiles). All pure CSS/SVG,
   no video, no per-use cost. ---- */
.sage-figure-svg { overflow: visible; }
.sage-halo {
    transform-box: fill-box;
    transform-origin: center;
    filter: blur(7px);
    opacity: 0.55;
    animation: sageHaloPulse 4.5s ease-in-out infinite;
}
@keyframes sageHaloPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.96); }
    50% { opacity: 0.8; transform: scale(1.1); }
}
.sage-breathe {
    transform-box: fill-box;
    transform-origin: 50% 65%;
    animation: sageBreathe 5s ease-in-out infinite;
}
@keyframes sageBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.sage-mouth-open { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sage-speaking .sage-mouth-closed { opacity: 0; }
.sage-speaking .sage-mouth-open {
    animation: sageTalk 0.24s steps(1) infinite;
}
@keyframes sageTalk {
    0%, 100% { opacity: 0; transform: scaleY(0.4); }
    50% { opacity: 1; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
    .sage-sway, .sage-halo, .sage-breathe, .sage-speaking .sage-mouth-open { animation: none; }
    .sage-speaking .sage-mouth-closed { opacity: 1; }
    .sage-speaking .sage-mouth-open { opacity: 0; }
}

/* ---- homepage welcome widget: a small floating card docked to the side
   of the screen (not a full-width banner) so it's visible the moment the
   page loads without covering the hero text or pushing the rest of the
   page down. Fixed positioning, like the corner chat bubble, keeps it
   out of the normal document flow entirely. ---- */
.sage-welcome-card {
    position: fixed;
    top: 5.25rem;
    left: 1.25rem;
    z-index: 35;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 0.85rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    padding: 0.9rem;
    width: min(168px, calc(100vw - 2.5rem));
    text-align: center;
    transition: width 0.15s ease-out, padding 0.15s ease-out;
}
.sage-welcome-text { width: 100%; }
/* A small ✕ to tuck the whole card away, and the collapsed state itself —
   shrinks down to just the avatar bubble so it never has to sit there
   taking up space once a visitor's heard the welcome message (or doesn't
   want it). Clicking the avatar again (see sage-avatar-toggle in the JS
   below) brings the full card back. */
.sage-x-btn {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 9999px;
    border: none;
    background: rgba(0,0,0,0.14);
    color: var(--forest-800, #1f3320);
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sage-x-btn:hover { background: rgba(0,0,0,0.24); }
.sage-card-minimize-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
}
#sage-avatar-toggle { cursor: pointer; }
.sage-welcome-card.sage-collapsed {
    width: auto;
    padding: 0.55rem;
    gap: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.sage-welcome-card.sage-collapsed .sage-welcome-text,
.sage-welcome-card.sage-collapsed .sage-card-minimize-btn {
    display: none;
}
.sage-welcome-caption {
    font-size: 0.75rem;
    color: var(--forest-700, #2f4a30);
    margin-bottom: 0.4rem;
    line-height: 1.3;
    /* While speaking, this fills with the whole welcome message so
       visitors can read along — far too long to fit this small card, so
       it scrolls in its own bounded box instead of pushing the card (and
       its buttons below) off the bottom of the screen. */
    max-height: 9.5rem;
    overflow-y: auto;
    padding-right: 0.3rem;
    scrollbar-width: thin;
}
/* Long, multi-line paragraphs read far better left-aligned than centered
   — the short default caption stays centered, matching the rest of the
   card. */
.sage-speaking .sage-welcome-caption { text-align: left; }
.sage-welcome-caption::-webkit-scrollbar { width: 5px; }
.sage-welcome-caption::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 9999px;
}
.sage-welcome-play-btn {
    background: var(--clay-500, #b5703c);
    color: #fff;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.7rem;
    cursor: pointer;
    width: 100%;
}
.sage-welcome-play-btn:hover { filter: brightness(1.08); }
.sage-speaking .sage-avatar { animation: sageSpeakPulse 0.9s ease-in-out infinite; }
@keyframes sageSpeakPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .sage-speaking .sage-avatar { animation: none; }
}
/* On narrow screens a left-docked card this size can crowd the centered
   hero text, so it moves to a slim bar pinned along the bottom instead —
   still visible with no scrolling, still out of the way. */
@media (max-width: 640px) {
    .sage-welcome-card {
        top: auto;
        bottom: 1.25rem;
        left: 1.25rem;
        right: 1.25rem;
        width: auto;
        flex-direction: row;
        text-align: left;
    }
    .sage-welcome-play-btn { width: auto; }
    /* Shorter cap on the mobile bottom bar — it grows upward from the
       bottom edge while speaking, so a shorter scroll box keeps it from
       climbing too far up a short phone screen. */
    .sage-welcome-caption { max-height: 6.5rem; }
    /* Collapsed on the mobile bottom bar: shrink back to just the avatar
       instead of staying stretched across the full width. */
    .sage-welcome-card.sage-collapsed {
        width: auto;
        right: auto;
    }
}

/* ---- staggered card entrance for the 3-design compare grid ---- */
.reveal-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}
.reveal-card:nth-child(1) { animation-delay: 0.1s; }
.reveal-card:nth-child(2) { animation-delay: 0.3s; }
.reveal-card:nth-child(3) { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
    .reveal-card { animation: none; opacity: 1; }
}

/* ---- "Watch It Grow" pictures (design/result.html) ---- */
.growth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .growth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.growth-tile { margin: 0; }
.growth-tile-img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--forest-100);
    background: var(--forest-50);
}
.growth-tile-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.growth-tile-img a:hover img { transform: scale(1.02); }
.growth-tile-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--forest-700);
}
.growth-tile-status.hidden { display: none; }
.growth-tile figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--forest-700);
}
.growth-tile-caption { display: block; margin-top: 0.15rem; color: var(--text-soft); }
.growth-spinner {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 auto 0.5rem;
    border-radius: 9999px;
    border: 2px solid var(--forest-200);
    border-top-color: var(--clay-500);
    animation: growth-spin 0.9s linear infinite;
}
@keyframes growth-spin { to { transform: rotate(360deg); } }
.growth-retry {
    margin-top: 0.5rem;
    color: var(--clay-600);
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}
.growth-stage-title { display: block; color: var(--clay-600); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .growth-spinner { animation: none; }
    .growth-tile-img img { transition: none; }
}

/* ---- overhead planting plan (design/result.html) ---- */
/* Two drawings of the same plan: wide for computers, narrow and taller
   for phones, so the plant numbers stay readable either way. */
.plan-scroll svg { display: block; width: 100%; height: auto; }
.plan-narrow { display: none; }
@media (max-width: 640px) {
    .plan-wide { display: none; }
    .plan-narrow { display: block; }
}
.plan-legend {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem 1.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--forest-700);
}
@media (min-width: 768px) {
    .plan-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan-legend li { display: flex; align-items: center; gap: 0.6rem; }
.plan-badge {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
}
.plan-legend-meta { color: var(--text-soft); }

/* ---- language menu + right-to-left support (app/i18n.py) ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lang-menu { display: inline-flex; align-items: center; gap: 0.35rem; }
.lang-menu-icon { cursor: pointer; font-size: 1rem; line-height: 1; }
.lang-menu-select {
    max-width: 11rem;
    border-radius: 0.375rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    border: 1px solid var(--forest-200);
    background: #ffffff;
    color: var(--forest-800);
}
.lang-menu-nav .lang-menu-select { background: var(--forest-700); color: #ffffff; border-color: var(--forest-600); }
.lang-menu-go { font-size: 0.8rem; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.lang-pending {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--forest-100);
    color: var(--forest-800);
    font-size: 0.875rem;
}
/* Right-to-left languages (Arabic, Hebrew, Persian, Urdu...): flip the few
   places this stylesheet hard-codes a left/right side. Flex rows and
   normal text already follow the page direction by themselves. */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }

/* ---- "Your design" page after choosing a concept (design/my_design.html) ---- */
/* The chosen concept "pops" up to full size when the page opens. */
.design-pop { animation: designPop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes designPop {
    from { opacity: 0; transform: scale(0.9) translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.my-design-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .my-design-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.walkthrough-log { overflow-y: auto; max-height: 460px; scroll-behavior: smooth; }
.walkthrough-step { animation: fadeInUp 0.4s ease-out both; }
.walkthrough-ask {
    font-size: 0.75rem;
    border: 1px solid var(--clay-400);
    color: var(--clay-600);
    background: transparent;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    text-align: start;
}
.walkthrough-ask:hover { background: var(--clay-200); }
/* Compare page: the chosen card grows to fill the screen before the
   "Your design" page opens. */
.choose-zoom {
    position: fixed;
    z-index: 60;
    margin: 0;
    transition: top 0.45s ease, left 0.45s ease, width 0.45s ease, height 0.45s ease, border-radius 0.45s ease;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .design-pop, .walkthrough-step { animation: none; }
    .choose-zoom { transition: none; }
}

/* ---- care reminders box on design/my_design.html ---- */
.reminder-box { background: var(--forest-50); border: 1px solid var(--forest-100); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
.reminder-box form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.reminder-box label.field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--forest-600); }
.reminder-box .reminder-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; font-size: 0.75rem; }
.reminder-box .reminder-links button { background: none; color: var(--clay-600); padding: 0; font-weight: 400; }
.reminder-box .reminder-links a, .reminder-box .reminder-links button:hover { color: var(--clay-600); text-decoration: underline; }
.care-next { font-size: 0.75rem; color: var(--clay-600); margin-top: 0.25rem; }

/* Today's care banner (base.html) and the My Properties badge. */
.care-banner { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.875rem 1rem; border-radius: 0.75rem; background: #fff8ec; border: 1px solid var(--clay-200); color: var(--forest-800); font-size: 0.9rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.care-banner[hidden] { display: none; }
.care-banner-body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.care-banner-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.care-banner-link { display: inline-block; background: var(--clay-500); color: #ffffff; padding: 0.3rem 0.8rem; border-radius: 0.375rem; font-weight: 600; font-size: 0.8rem; text-decoration: none; }
.care-banner-link:hover { background: var(--clay-600); }
.care-banner-close { background: none; border: 0; color: var(--text-soft); font-size: 1rem; line-height: 1; padding: 0.25rem; cursor: pointer; }
.care-banner-close:hover { color: var(--forest-800); }
.care-badge { display: inline-block; margin-bottom: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: #fff1dc; color: var(--clay-600); font-size: 0.75rem; font-weight: 600; }

/* Printable shopping list (design/shopping_list.html, partials/shopping_list.html) */
.shop-heading { font-weight: 600; color: #1f3d2b; margin: 1.25rem 0 0.5rem; }
.shop-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.shop-table th { text-align: start; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.4rem 0.5rem; border-bottom: 1px solid #dfeadf; }
.shop-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid #edf3ed; vertical-align: top; }
.shop-table tfoot td { font-weight: 600; border-bottom: none; color: #1f3d2b; }
.shop-price { text-align: end; white-space: nowrap; }
.shop-check { width: 1.75rem; }
.shop-box { display: inline-block; width: 1rem; height: 1rem; border: 2px solid #9db8a4; border-radius: 3px; vertical-align: middle; }
.shop-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding: 0.75rem 1rem; background: #f3f8f2; border-radius: 0.5rem; color: #1f3d2b; }
.shop-total strong { font-size: 1.25rem; }
@media (max-width: 480px) {
    .shop-table th, .shop-table td { padding: 0.45rem 0.3rem; }
    .shop-check { width: 1.4rem; }
}
@media print {
    nav, footer, .no-print, .care-banner, .lang-pending, .sage-welcome-card, .sage-bubble { display: none !important; }
    body { background: #fff !important; }
    .shop-page { border: none !important; box-shadow: none !important; padding: 0 !important; }
    .shop-table tr { break-inside: avoid; }
}

/* Redo-or-refund promise (partials/promise.html) */
.promise-box { margin-top: 1rem; padding: 0.9rem 1rem; border: 2px solid var(--forest-100); background: transparent; border-radius: 0.5rem; text-align: start; }
.promise-title { font-weight: 600; color: #1f3d2b; font-size: 0.95rem; margin: 0 0 0.25rem; }
.promise-text { font-size: 0.85rem; color: #3d5c46; margin: 0; }
.promise-text a { color: #b4532a; text-decoration: underline; }

/* Free sample designs (home.html, samples/sample.html) */
.sample-figure { margin: 0; background: #fff; border: 1px solid #dfeadf; border-radius: 0.75rem; overflow: hidden; }
.sample-figure img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e8f0e8; }
.sample-figure figcaption { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: #3d5c46; font-weight: 500; }
.sample-concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.sample-concept { display: block; background: #fff; border: 2px solid #dfeadf; border-radius: 0.6rem; overflow: hidden; color: #1f3d2b; font-size: 0.8rem; font-weight: 500; text-decoration: none; }
.sample-concept img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e8f0e8; }
.sample-concept span { display: block; padding: 0.4rem 0.5rem; }
.sample-concept.is-current { border-color: #d0743c; box-shadow: 0 0 0 3px rgba(208, 116, 60, 0.18); }
.home-samples { display: grid; gap: 1.25rem; }
.home-sample { display: grid; gap: 0.75rem; text-decoration: none; color: inherit; border: 1px solid #dfeadf; border-radius: 0.75rem; padding: 0.75rem; background: transparent; }
.home-sample:hover { border-color: #9db8a4; }
.value-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; max-width: 56rem; margin: 0 auto; text-align: start; }
.value-col { border: 2px solid var(--forest-100); border-radius: 0.6rem; padding: 1rem; }
.value-col-us { border-color: #d0743c; box-shadow: 0 0 0 3px rgba(208, 116, 60, 0.15); }
.value-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 0.35rem; }
.value-col-us .value-label { color: #b4532a; }
.value-price { font-size: 1.15rem; font-weight: 700; color: #1f3d2b; margin: 0 0 0.35rem; }
.value-col-us .value-price { color: #b4532a; font-size: 1.35rem; }
.value-note { font-size: 0.85rem; color: #3d5c46; margin: 0; }
@media (max-width: 639px) { .value-compare { grid-template-columns: 1fr; } }
.home-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.home-before-after figure { margin: 0; position: relative; }
.home-before-after img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; background: #e8f0e8; }
.home-before-after figcaption { position: absolute; inset-inline-start: 0.5rem; bottom: 0.5rem; background: rgba(20, 40, 28, 0.78); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; }
.home-sample-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
@media (max-width: 639px) {
    .sample-concepts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
    .sample-concept { font-size: 0.7rem; }
}

/* Free redo (design/result.html) */
.redo-box { background: var(--card-bg); border: 1px solid #dfeadf; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.redo-title { font-weight: 600; color: #1f3d2b; margin: 0 0 0.35rem; }
.redo-box a { color: #b4532a; }

/* Owner pages (visitors, backups, site health) */
.owner-stat-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.owner-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.owner-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.owner-bar span { display: block; width: 100%; min-height: 2px; background: var(--forest-500); border-radius: 2px 2px 0 0; }
.owner-bars-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.owner-table { width: 100%; border-collapse: collapse; }
.owner-table th { text-align: left; font-weight: 600; color: var(--text-soft); font-size: .75rem; padding: .25rem .5rem .25rem 0; }
.owner-table td { padding: .3rem .5rem .3rem 0; border-top: 1px solid var(--forest-100); vertical-align: top; }
.owner-cell-name { word-break: break-all; }
.owner-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.owner-health li { padding: .35rem 0; border-top: 1px solid var(--forest-100); }
.owner-health li:first-child { border-top: 0; }
.owner-ok { color: var(--forest-600); }
.owner-warn { color: #b45309; }
.owner-bad { color: #b91c1c; }
.owner-problem-detail { white-space: pre-wrap; font-size: .75rem; color: var(--forest-600); max-height: 12rem; overflow: auto; background: var(--forest-50); padding: .5rem; border-radius: .375rem; margin-top: .25rem; }
.account-delete-btn { background: #b91c1c; }
.account-delete-btn:hover { background: #991b1b; }