/* The marketing site's design system, loaded on every page by base.html. Pages
   style their content with these classes and use Bootstrap for layout only (see
   CLAUDE.md, Frontend implementation). Every class is prefixed `st-`. Colours
   come from the brand tokens in marketing_style.css, plus one accent (wine).
   Headings, labels and buttons use Plus Jakarta Sans at medium weight and body
   text is Inter, both self-hosted in cms/css/fonts.css. */

:root {
    --st-wine: #7b2d3b;
    --st-wine-hover: #5e2230;
    --st-ink-muted: #3f566d;
    --st-offwhite: #f5f1eb; /* every light text and light button on the dark bands */
    --st-display: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    --st-section: clamp(64px, 9vw, 112px);
}

/* Section backgrounds */
.st-section { padding: var(--st-section) 0; }
.st-plaster { background-color: #f3ede3; background-blend-mode: multiply; background-image: url("../images/plaster-texture.bd1f70be4d15.webp"); background-size: cover; background-position: center; }
.st-brick { background-color: #f4f1ea; background-image: url("../images/brick-texture.c650f29f71c8.webp"); background-size: cover; background-position: center; }
.st-white { background-color: #fffcf8; }
.st-offwhite { background-color: var(--st-offwhite); }
.st-navy { background-color: var(--primary-color); color: var(--st-offwhite); }
.st-wine-band { background-color: var(--st-wine); color: var(--st-offwhite); }

/* Type: labels, headings, introductions and notes */
.st-label { font-family: var(--st-display); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--st-wine); font-weight: 500; margin: 0 0 1rem; }
.st-navy .st-label, .st-wine-band .st-label { color: var(--st-offwhite); }

.st-h1, .st-h2, .st-h3 { font-family: var(--st-display); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--primary-color); margin: 0; }
.st-h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.st-h2 { font-size: clamp(1.875rem, 4vw, 3.125rem); }
.st-h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.st-navy .st-h2, .st-wine-band .st-h2 { color: var(--st-offwhite); }

.st-lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--st-ink-muted); max-width: 34em; margin: 0; }
.st-lede + .st-lede { margin-top: 1.25rem; }
.st-navy .st-lede, .st-wine-band .st-lede { color: var(--st-offwhite); }

/* Smaller supporting text: notes under a section, card descriptions. */
.st-note { font-size: 0.9375rem; color: var(--st-ink-muted); max-width: 40rem; }
.st-navy .st-note, .st-wine-band .st-note { color: var(--st-offwhite); }

/* A plain list: no bullets, no numbers and no lines between items. */
.st-list { margin: 0; padding: 0; list-style: none; }
.st-list li + li { margin-top: 0.75rem; }
.st-navy strong, .st-wine-band strong { color: var(--st-offwhite); }

/* Buttons and links */
.st-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 0 1.75rem; background: var(--st-wine); color: #fff; text-decoration: none; font-family: var(--st-display); font-weight: 500; border-radius: var(--sharp-radius); border: 0; transition: background-color 0.2s ease, transform 0.2s ease; }
.st-btn:hover, .st-btn:focus-visible { background: var(--st-wine-hover); color: #fff; transform: translateY(-1px); }
.st-btn-sm { min-height: 40px; padding: 0 1rem; font-size: 0.875rem; }
.st-btn-light { background: var(--st-offwhite); color: var(--st-wine); }
.st-btn-light:hover, .st-btn-light:focus-visible { background: #f3ede3; color: var(--st-wine); }
/* The second choice beside a wine button, on a light background */
.st-btn-outline { background: transparent; color: var(--st-wine); box-shadow: inset 0 0 0 2px var(--st-wine); }
.st-btn-outline:hover, .st-btn-outline:focus-visible { background: var(--st-wine); color: #fff; }
.st-link { color: var(--primary-color); font-weight: 600; text-underline-offset: 4px; }
.st-navy .st-link, .st-wine-band .st-link { color: var(--st-offwhite); }

.st-section a:focus-visible, .st-btn:focus-visible { outline: 3px solid var(--st-wine); outline-offset: 3px; }
.st-navy a:focus-visible, .st-wine-band a:focus-visible { outline-color: var(--st-offwhite); }

/* Hero: text only, on painted brick */
.st-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem); }
.st-hero-copy { max-width: 56rem; }
.st-hero .st-h1 { margin-bottom: 1.5rem; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.st-close .st-actions .st-btn { margin-top: 0; }
.st-navy.st-close .st-link { color: var(--st-offwhite); }

/* Points and prose */
.st-points { display: grid; gap: 3rem; }
.st-points p, .st-points .st-h3 { margin: 0; }
.st-points .st-h3 { margin-bottom: 0.75rem; }
.st-points p { color: var(--st-ink-muted); }
.st-navy .st-points p, .st-navy .st-h3 { color: var(--st-offwhite); }
@media (min-width: 800px) { .st-points { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } }

.st-two { display: grid; gap: 2rem; }
@media (min-width: 960px) { .st-two { grid-template-columns: 5fr 6fr; gap: 4.5rem; align-items: start; } }
.st-prose p { margin: 0; }
.st-prose p + p { margin-top: 1.25rem; }
.st-how p { font-family: var(--st-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.45; letter-spacing: -0.01em; color: var(--primary-color); max-width: 28em; margin: 0; }
.st-how p + p { margin-top: 1.25rem; }
.st-how strong { color: var(--st-wine); font-weight: 500; }
.st-wine-band .st-how p { color: var(--st-offwhite); }
.st-wine-band .st-how strong { color: var(--st-offwhite); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Closing sections and buttons set apart from the text above them */
.st-wine-band .st-btn { margin-top: 2rem; }
.st-band-btn { margin-top: 2rem; }
.st-close .st-h2 { max-width: 14em; }
.st-close p { color: var(--st-ink-muted); margin: 1rem 0 0; max-width: 32em; }
.st-navy.st-close p { color: var(--st-offwhite); }
.st-close .st-btn { margin-top: 2rem; }

/* Text blocks and questions (the design page and the builder page) */
.bespoke-showcase-intro { margin-bottom: 2.5rem; }
.st-block + .st-block { margin-top: 3.5rem; }
.st-block .st-h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.st-block p { color: var(--st-ink-muted); margin: 0; max-width: 40rem; }
.st-block p + p { margin-top: 1rem; }
.st-faq .st-block + .st-block { margin-top: 2rem; }
.st-faq .st-h3 { margin-bottom: 0.5rem; }

/* Designs strip: slow drift, with a visible pause control */
.st-reel { overflow: hidden; margin-top: 2.5rem; }
.st-reel-track { display: flex; gap: 1.5rem; width: max-content; margin: 0; padding: 0; list-style: none; animation: st-drift 60s linear infinite; }
.st-reel.is-paused .st-reel-track, .st-reel:hover .st-reel-track, .st-reel:focus-within .st-reel-track { animation-play-state: paused; }
.st-reel-item { width: 220px; flex: none; }
.st-reel-item a { display: block; color: inherit; text-decoration: none; }
.st-reel-item img { display: block; width: 100%; height: auto; border: 1px solid var(--border-stroke); border-radius: 4px; transition: transform 0.3s ease; }
.st-reel-item a:hover img, .st-reel-item a:focus-visible img { transform: translateY(-6px); }
.st-reel-name { display: block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--st-ink-muted); }
.st-reel-controls { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.st-pause { min-height: 44px; padding: 0 1rem; background: transparent; border: 0; box-shadow: inset 0 0 0 2px var(--st-wine); border-radius: var(--sharp-radius); color: var(--st-wine); font-family: var(--st-display); font-weight: 500; }
.st-pause:hover, .st-pause:focus-visible { background: var(--st-wine); color: #fff; }
@keyframes st-drift { to { transform: translateX(calc(-50% - 0.75rem)); } }

/* The cookie banner is shared with tenant sites, where its button takes the tenant's
   brand colour. On the marketing site it takes the wine accent and the navy link. */
.site-body #pp-cookie-banner { --brand-primary: var(--st-wine); --brand-hero-text: #fff; }
.site-body .pp-cookie-link, .site-body .pp-cookie-link:hover { color: var(--primary-color); }

/* Plan cards, shared by the pricing and builder pages. */
.st-plan { padding: 2rem; background: #fffcf8; border: 1px solid rgba(10, 37, 64, 0.1); border-radius: 4px; box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08); }
.st-plan-price { margin: 0 0 1.25rem; font-family: var(--st-display); font-weight: 500; font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--primary-color); }
.st-plan-period { margin-left: 0.25rem; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1rem; letter-spacing: 0; color: var(--st-ink-muted); }
.st-plan-features { margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--st-ink-muted); }
.st-plan-features li { padding: 0.3rem 0; }

/* Messages from the server (a saved form, an expired link). The box keeps Bootstrap's
   `alert` class only so its close button can dismiss it. */
.st-message { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1rem; padding: 1rem 3.25rem 1rem 1.25rem; background: #fffcf8; color: var(--main-text); border: 0; border-left: 4px solid var(--primary-color); border-radius: var(--sharp-radius); box-shadow: 0 1px 8px rgba(10, 37, 64, 0.06); }
.st-message-error, .st-message-warning { border-left-color: var(--st-wine); }
.st-message-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--primary-color); border-radius: var(--sharp-radius); }
.st-message-close:hover, .st-message-close:focus-visible { background: var(--st-offwhite); }
.st-message-close:focus-visible { outline: 3px solid var(--st-wine); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    /* Nothing drifts, so the strip is scrolled by hand: the outer frame scrolls, and the
       second pass that only exists for the loop is dropped. */
    .st-reel { overflow-x: auto; }
    .st-reel-track { animation: none; }
    .st-reel-item[aria-hidden="true"] { display: none; }
    .st-btn, .st-reel-item img { transition: none; }
    .st-pause { display: none; }
}