/*
  SahiPost styles. Implements the SahiPost design system (docs/design-system.md):
  Fraunces for headlines, Plus Jakarta Sans for the interface, Google blue palette,
  light and dark themes, restrained micro-animation.

  Hand-written rather than a utility framework: a build step would cost more than
  it saves, and a CDN would put the page's appearance on somebody else's uptime.
  Fonts are self-hosted from /fonts (latin + latin-ext, which carries ₹), so the page makes
  no external style or font requests. The upstream version is in each file name: bump it
  when replacing a file so caches pick up the new one.
*/

@font-face { font-family: "Fraunces"; font-weight: 400 600; font-display: swap; src: url("../fonts/fraunces-latin-v38.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-weight: 400 600; font-display: swap; src: url("../fonts/fraunces-latinext-v38.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400 800; font-display: swap; src: url("../fonts/plusjakartasans-latin-v12.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: "Plus Jakarta Sans"; font-weight: 400 800; font-display: swap; src: url("../fonts/plusjakartasans-latinext-v12.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrainsmono-latin-v24.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: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrainsmono-latinext-v24.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    color-scheme: light;

    --canvas: #ffffff;
    --surface: #ffffff;
    --surface-sunken: #f8f9fa;
    --panel: #202124;
    --on-panel: #f8f9fa;
    --line: #dadce0;
    --line-strong: #80868b;
    --ink: #202124;
    --ink-soft: #3c4043;
    --ink-muted: #5f6368;

    --brand: #1967d2;
    --brand-hover: #185abc;
    --brand-wash: #e8f0fe;
    --brand-text: #185abc;
    --on-brand: #ffffff;
    /* Behind a customer's logo: white in both themes, as it is on their images. */
    --logo-plate: #ffffff;
    --focus: #1a73e8;
    --ring: rgb(26 115 232 / 24%);

    --success: #188038;
    --success-wash: #e6f4ea;
    --warning: #b06000;
    --warning-wash: #fef7e0;
    --danger: #d93025;
    --danger-wash: #fce8e6;

    /* Platform names and logos. Text colours clear 4.5:1 on their tinted badge. The Instagram
       gradient is the logo itself and the same in both themes. */
    --instagram: #c13584;
    --facebook: #0759dd;
    --linkedin: #0a66c2;
    --instagram-1: #feda75;
    --instagram-2: #fa7e1e;
    --instagram-3: #d62976;
    --instagram-4: #962fbf;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(60 64 67 / 12%);
    --shadow-md: 0 4px 12px rgb(60 64 67 / 15%), 0 1px 2px rgb(60 64 67 / 12%);
    --shadow-lg: 0 16px 40px rgb(60 64 67 / 22%), 0 2px 6px rgb(60 64 67 / 12%);

    --font-display: "Fraunces", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
    --font-sans: "Plus Jakarta Sans", "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-std: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;

    --measure: 62ch;
}

/* Dark applies when the visitor chose it (data-theme="dark"), or when they have not
   chosen and the browser prefers it. The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --canvas: #202124;
        --surface: #292a2d;
        --surface-sunken: #171717;
        --panel: #35363a;
        --line: #3c4043;
        --line-strong: #80868b;
        --ink: #e8eaed;
        --ink-soft: #bdc1c6;
        --ink-muted: #9aa0a6;

        --brand: #8ab4f8;
        --brand-hover: #aecbfa;
        --brand-wash: #1f2f4d;
        --brand-text: #8ab4f8;
        --on-brand: #202124;
        --logo-plate: #ffffff;
        --focus: #8ab4f8;
        --ring: rgb(138 180 248 / 30%);

        --success: #81c995;
        --success-wash: #1e3a29;
        --warning: #fdd663;
        --warning-wash: #3a3020;
        --danger: #f28b82;
        --danger-wash: #3c2321;

        --instagram: #f48fb8;
        --facebook: #7fb2ff;
        --linkedin: #70b5f9;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #202124;
    --surface: #292a2d;
    --surface-sunken: #171717;
    --panel: #35363a;
    --line: #3c4043;
    --line-strong: #80868b;
    --ink: #e8eaed;
    --ink-soft: #bdc1c6;
    --ink-muted: #9aa0a6;

    --brand: #8ab4f8;
    --brand-hover: #aecbfa;
    --brand-wash: #1f2f4d;
    --brand-text: #8ab4f8;
    --on-brand: #202124;
    --logo-plate: #ffffff;
    --focus: #8ab4f8;
    --ring: rgb(138 180 248 / 30%);

    --success: #81c995;
    --success-wash: #1e3a29;
    --warning: #fdd663;
    --warning-wash: #3a3020;
    --danger: #f28b82;
    --danger-wash: #3c2321;

    --instagram: #f48fb8;
    --facebook: #7fb2ff;
    --linkedin: #70b5f9;
}

*, *::before, *::after { box-sizing: border-box; }

/* No scroll-behavior: smooth; it lags keyboard and anchor scrolling. */

/* Scale the whole interface up on large screens so 1440p and 4K do not look tiny. */
@media (min-width: 1700px) { html { font-size: 18px; } }
@media (min-width: 2400px) { html { font-size: 20px; } }

body {
    margin: 0;
    background:
        radial-gradient(60rem 26rem at 85% -8rem, var(--brand-wash), transparent 70%),
        var(--canvas);
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 0.5em; }
h1, h2 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
h1 { font-size: clamp(2.4rem, 5.5vw, 3.75rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.015em; }
h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.4; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--brand-text); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-std); }
a:hover { color: var(--brand-hover); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap { width: min(78rem, 92vw); margin-inline: auto; }

/* ---------------------------------------------------------------- motion */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 60% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pulse {
    0% { transform: scale(1); opacity: .5; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Entrances: hero text staggers in, grids of cards cascade. */
.hero > * { animation: rise var(--dur-slow) var(--ease-out) both; }
.hero > :nth-child(2) { animation-delay: 60ms; }
.hero > :nth-child(3) { animation-delay: 120ms; }
.hero > :nth-child(4) { animation-delay: 180ms; }
.questionnaire .card, .notice { animation: rise var(--dur-slow) var(--ease-out) 200ms both; }
.steps > *, .pricing > *, .month-grid > *, .brand-list > *, .post-list > *, .stat-grid > * {
    animation: rise var(--dur-slow) var(--ease-out) both;
}
:is(.steps, .pricing, .month-grid, .brand-list, .post-list, .stat-grid) > :nth-child(2) { animation-delay: 60ms; }
:is(.steps, .pricing, .month-grid, .brand-list, .post-list, .stat-grid) > :nth-child(3) { animation-delay: 120ms; }
:is(.steps, .pricing, .month-grid, .brand-list, .post-list, .stat-grid) > :nth-child(4) { animation-delay: 180ms; }
:is(.steps, .pricing, .month-grid, .brand-list, .post-list, .stat-grid) > :nth-child(n+5) { animation-delay: 240ms; }

/* ---------------------------------------------------------------- header */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
}

.logo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: var(--ink);
}

.header-actions { display: flex; align-items: center; gap: 0.9rem; }

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--surface-sunken); box-shadow: var(--shadow-sm); }
.theme-toggle:active { transform: scale(0.98); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.logo span { color: var(--brand-text); }
.logo:hover { color: var(--ink); }

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(2rem, 6vw, 4.5rem) 0 2rem; }

/* Wide screens: pitch on the left, the form beside it. The pitch scrolls with the page
   (no sticky positioning: it made wheel scrolling janky). */
.landing { display: block; }

@media (min-width: 1000px) {
    .landing {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
        column-gap: clamp(2rem, 5vw, 5rem);
        align-items: start;
    }
    .landing .hero { padding-top: clamp(2rem, 5vw, 5rem); }
    .landing .hero h1 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); }
    .landing .hero-proof { flex-direction: column; gap: 0.4rem; }
    .landing .questionnaire { margin-top: 2rem; max-width: none; }
}

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-text);
    background: var(--brand-wash);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.9rem;
    margin-bottom: 1.25rem;
}

.hero p.lead {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 54ch;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.hero-proof li::before {
    content: "✓";
    color: var(--success);
    font-weight: 700;
    margin-right: 0.45rem;
}

/* ------------------------------------------------------------------ card */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}

/* Section cards stack in normal flow (grids use gap), so they need air between them. */
section.card + section.card { margin-top: 1.25rem; }

/* Cards that sit in a grid are browsable, so they lift on hover. The form card
   and full-width cards stay put. */
:is(.steps, .pricing, .month-grid, .brand-list, .stat-grid) > .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
}

.card > h3:first-child, .card > :first-child > h3:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ form */

/* A wide text input is hard to aim at and hard to read back, so the form keeps
   its own measure. On wide screens it sits beside the hero, on narrow ones below. */
.questionnaire { margin-block: 0 4rem; max-width: 44rem; }
.questionnaire > * { max-width: none; }

.progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.progress-track {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

/* The gradient spans the whole track and the fill is clipped to --p, so the
   Google colours are revealed as answers come in rather than squeezed together. */
.progress-fill {
    --p: 0;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        var(--g-blue), var(--g-red) 38%, var(--g-yellow) 68%, var(--g-green));
    clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0 round var(--radius-pill));
    transition: clip-path 600ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .progress-fill { transition: none; }
}

.field { margin-bottom: 1.5rem; }

.field > label,
.field-label {
    display: block;
    font-weight: 650;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.field .hint, .hint {
    display: block;
    color: var(--ink-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}

input::placeholder { color: var(--ink-muted); }
input[type="text"]:hover, input[type="tel"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="number"]:hover, input[type="date"]:hover, textarea:hover, select:hover { border-color: var(--ink-soft); }
textarea { resize: vertical; line-height: 1.5; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--ring);
}

input[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--danger);
    animation: shake 280ms var(--ease-std);
}

/* Chip input for question 3 */

.chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    min-height: 8.5rem;
    cursor: text;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}

.chips:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-wash);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand-text);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.4rem 0.2rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    animation: pop var(--dur-base) var(--ease-out);
}

.chip button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast);
}

.chip button:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }

.chips input {
    flex: 1;
    min-width: 16ch;
    min-height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.5rem 0.4rem;
    font: inherit;
    font-size: 1.05rem;
}

.chips input:focus-visible { outline: none; box-shadow: none; }

/* Language tiles for question 6 */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }

.tiles label {
    display: block;
    text-align: center;
    padding: 0.6rem 0.35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}

.tiles label:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.tiles input { position: absolute; opacity: 0; pointer-events: none; }

.tiles input:checked + label {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand-text);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.tiles input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    font: inherit;
    font-weight: 650;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std),
                box-shadow var(--dur-base) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }

.btn-primary { background: var(--brand); color: var(--on-brand); width: 100%; font-size: 1.05rem; }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); box-shadow: var(--shadow-md); }
.btn-primary[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-quiet { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-quiet:hover { background: var(--surface-sunken); color: var(--ink); box-shadow: var(--shadow-sm); }

.form-note { text-align: center; color: var(--ink-muted); font-size: 0.85rem; margin: 0.85rem auto 0; }

/* Errors */

.errors {
    background: var(--danger-wash);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    animation: slide-in var(--dur-slow) var(--ease-out);
}

.errors ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.errors[hidden] { display: none; }

.text-danger { color: var(--danger); }

/* ----------------------------------------------------------- how it works */

.section { padding: 3.5rem 0; border-top: 1px solid var(--line); }

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.step-number {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    color: var(--brand-text);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.steps p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* -------------------------------------------------------------- pricing */

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2rem; max-width: 52rem; }

.price { font-family: var(--font-display); font-weight: 500; font-size: 2.6rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; margin: 0.25rem 0 0; }
.price small { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }

.price-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); }

.price-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.price-list li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 0.95rem; }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* --------------------------------------------------------------- footer */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 2rem 0 3rem;
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.site-footer a { color: var(--ink-soft); }

/* ---------------------------------------------------------------- account */

.header-account { display: flex; align-items: center; gap: 0.9rem; font-size: 0.92rem; }
.header-account form { margin: 0; }
.muted { color: var(--ink-muted); font-size: 0.9rem; }
.btn-small { min-height: 34px; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.btn-inline { width: auto; }

.notice {
    background: var(--brand-wash);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand-text);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------ plans */

.plan-page { padding: 1.5rem 0 4rem; }
.signin-card { max-width: 28rem; margin: 2rem auto 0; }
/* A narrow card: the h2 size keeps the heading on one line. */
.signin-card h1 { margin-top: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.015em; }
.plan-header { margin-bottom: 2rem; display: grid; gap: 1.5rem; align-items: start; }
.plan-header-text { min-width: 0; }
@media (min-width: 900px) { .plan-header { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); } }
.plan-header .lead { color: var(--ink-soft); font-size: 1.1rem; }

.brand-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.brand-list li { display: flex; flex-direction: column; gap: 0.2rem; }

.month-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.month-card { display: flex; flex-direction: column; gap: 0.35rem; }
.month-card .btn { margin-top: 0.6rem; align-self: flex-start; }
.month-name { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-text); }
.month-theme { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
.month-card.locked { background: var(--surface-sunken); box-shadow: none; }
.month-card.locked .month-name { color: var(--ink-muted); }
.month-card.locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.lock-badge { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }

.unlock { margin-top: 2rem; max-width: 640px; }
.unlock .btn-primary { max-width: 320px; }

.month-nav { display: flex; justify-content: space-between; margin-bottom: 1.5rem; font-size: 0.95rem; }
.month-nav span { display: flex; gap: 1.25rem; }

.post-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-bottom: 0.75rem; }

.platform-badge {
    --platform: var(--brand-text);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--platform) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--platform) 28%, transparent);
    color: var(--platform);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.7rem 0.15rem 0.35rem;
    line-height: 1.5;
    vertical-align: middle;
}
.platform-instagram { --platform: var(--instagram); }
.platform-facebook { --platform: var(--facebook); }
.platform-linkedin { --platform: var(--linkedin); }
.platform-logo { width: 1.05rem; height: 1.05rem; flex: none; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.instagram-stop-1 { stop-color: var(--instagram-1); }
.instagram-stop-2 { stop-color: var(--instagram-2); }
.instagram-stop-3 { stop-color: var(--instagram-3); }
.instagram-stop-4 { stop-color: var(--instagram-4); }

/* Captions carry their own line breaks: checklists, steps, disclaimers. */
.caption { white-space: pre-line; max-width: 70ch; }
.hashtags { font-family: var(--font-mono); color: var(--brand-text); font-size: 0.85rem; }
.brief { border-top: 1px solid var(--line); padding-top: 0.75rem; margin: 0.75rem 0; }
.brief p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }

.story-list, .ad-list { padding-left: 1.2rem; margin: 0; }
.story-list li, .ad-list li { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- consent */

.consent { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }

.check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    font-size: 0.92rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--brand); }

/* ------------------------------------------------------- preparing screen */

.preparing { max-width: 720px; }
.preparing .card { margin-bottom: 1.25rem; }
.preparing-left { margin: 0 0 1rem; font-size: 1.05rem; }

.stages { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }

.stage { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-muted); transition: color var(--dur-base); }
.stage.done { color: var(--ink); }
.stage.active { color: var(--ink); font-weight: 600; }

.stage-mark {
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--line-strong);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--canvas);
    transition: background var(--dur-base), border-color var(--dur-base);
}

.stage.done .stage-mark { background: var(--success); border-color: var(--success); animation: pop var(--dur-base) var(--ease-out); }
.stage.active .stage-mark { border-color: var(--brand); }
.stage.active .stage-mark::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--brand);
    animation: pulse 1.6s ease-out infinite;
}

.month-card.skeleton { background: var(--surface-sunken); box-shadow: none; gap: 0.6rem; }

.skeleton .bar {
    display: block;
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--line), var(--surface-sunken), var(--line));
    background-size: 200% 100%;
    animation: shimmer 1.8s linear infinite;
}

.skeleton .bar.short { width: 55%; }

.festivals { font-size: 0.85rem; color: var(--warning); }

/* ------------------------------------------------------------------ admin */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    font-weight: 500;
}

.admin-nav .muted { margin-left: auto; }

/* Admin shell: a grouped sidebar beside the page. Groups and links come from AdminMenu.cs. */
.admin-shell { padding: 1.5rem 0 4rem; }
.admin-main { min-width: 0; }
.admin-main > h1:first-child, .admin-main > :first-child h1 { margin-top: 0; }

.admin-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.admin-menu > summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-lg);
    transition: background var(--dur-fast) var(--ease-std);
}
.admin-menu > summary::-webkit-details-marker { display: none; }
.admin-menu > summary:hover { background: var(--surface-sunken); }
.admin-menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A chevron drawn with borders, so it follows the text colour in both themes. */
.admin-menu > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
}
.admin-menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.admin-menu-current { color: var(--brand-text); font-weight: 500; }
.admin-menu-current::before { content: "·"; margin-right: 0.6rem; color: var(--ink-muted); }

.admin-menu nav { padding: 0.25rem 0.75rem 0.75rem; }

.admin-find { position: relative; margin: 0.25rem 0 0.75rem; }
.admin-find input[type="search"] { min-height: 38px; padding: 0.4rem 2.2rem 0.4rem 0.75rem; font-size: 0.9rem; }
.admin-find kbd {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 1.3rem;
    padding: 0 0.3rem;
    font: 500 0.75rem/1.4 var(--font-mono);
    text-align: center;
    color: var(--ink-muted);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    pointer-events: none;
}
.admin-find input:focus + kbd { opacity: 0; }

.admin-menu-group + .admin-menu-group { margin-top: 0.85rem; }
.admin-menu-group h2 {
    margin: 0 0 0.25rem;
    padding: 0 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.admin-menu-group ul { list-style: none; margin: 0; padding: 0; }
.admin-menu-group a {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.admin-menu-group a:hover { background: var(--surface-sunken); color: var(--ink); }
.admin-menu-group a:active { transform: scale(.98); }
.admin-menu-group a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The current page: the wash and the weight say it, not the colour alone. */
.admin-menu-group a[aria-current="page"] { background: var(--brand-wash); color: var(--brand-text); font-weight: 700; }
.admin-menu [hidden] { display: none !important; }
.admin-menu-empty { padding: 0 0.6rem; margin: 0.25rem 0; }
.admin-menu-role { margin: 1rem 0 0; padding: 0.85rem 0.6rem 0; border-top: 1px solid var(--line); font-size: 0.82rem; }
.admin-menu-role .lead-status { margin-left: 0.25rem; font-size: 0.75rem; }
/* Open errors: a count beside the link, in the danger colours, on every admin page. */
.admin-menu-count {
    float: right;
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--danger-wash);
    color: var(--danger);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

/* Admin errors page */
.error-log-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.error-log-bar p, .error-log-bar form { margin: 0; }
.error-log-purge { margin-bottom: 1.25rem; }
.error-log-purge summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.error-log-purge form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-top: 0.85rem; }
.error-log-purge label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }
.error-log-purge .error-log-check { flex-direction: row; align-items: center; gap: 0.4rem; min-height: 34px; }
.error-log-purge p { margin: 0.75rem 0 0; }
.error-log-where { word-break: break-word; }
.error-log-message { min-width: 18rem; }
.error-log-message summary { cursor: pointer; margin-top: 0.4rem; color: var(--brand-text); font-size: 0.85rem; }
.error-log-message pre {
    max-height: 20rem;
    overflow: auto;
    margin: 0.4rem 0;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--ink-soft);
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.error-log-critical { background: var(--danger-wash); color: var(--danger); margin-bottom: 0.35rem; display: inline-block; }

@media (min-width: 1000px) {
    .admin-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    .admin-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
    .admin-menu { margin-bottom: 0; }
    /* Always open beside the page: there is nothing to fold. */
    .admin-menu > summary { display: none; }
    .admin-menu nav { padding-top: 0.75rem; }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.stat-grid .card { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.25rem; }
.stat { font-family: var(--font-display); font-weight: 500; font-size: 2.3rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.75rem 0 2rem;
    font-size: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-table th, .admin-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); }
.admin-table td { transition: background var(--dur-fast); }
.admin-table tbody tr:hover td { background: var(--surface-sunken); }
.admin-table form { margin: 0; display: inline; }

/* Sortable headers (tables.js): the header text becomes a button; an arrow shows the sorted column. */
.sort-button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    color: inherit;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast);
}
.sort-button:hover, [aria-sort] > .sort-button { color: var(--ink); }
.sort-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sort-button::after { content: "\2195"; font-size: 0.9em; opacity: 0.4; }
[aria-sort="ascending"] > .sort-button::after { content: "\25B2"; font-size: 0.7em; opacity: 1; }
[aria-sort="descending"] > .sort-button::after { content: "\25BC"; font-size: 0.7em; opacity: 1; }
.admin-table th.amount .sort-button { flex-direction: row-reverse; }

.table-filter { max-width: 360px; margin: 0.75rem 0 -0.25rem; }
.table-filter input { width: 100%; }
.table-filter-empty { margin: 0.75rem 0 2rem; }

.admin-form { max-width: 560px; margin-bottom: 2rem; }
.admin-search { display: flex; gap: 0.6rem; max-width: 520px; margin-bottom: 1.25rem; }
.admin-email { overflow-wrap: anywhere; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Lead status on the enquiries page: a word always accompanies the colour. */
.lead-status {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 650;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
}
.lead-new { background: var(--brand-wash); color: var(--brand-text); border-color: transparent; }
.lead-contacted, .lead-followup { background: var(--warning-wash); color: var(--warning); border-color: transparent; }
.lead-qualified, .lead-converted, .status-paid { background: var(--success-wash); color: var(--success); border-color: transparent; }
.lead-lost, .lead-spam, .status-expired { background: var(--danger-wash); color: var(--danger); border-color: transparent; }

.admin-table td.lead-cell { min-width: 280px; }
.admin-table .lead-form { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.85rem 0 0; }
.lead-form select, .lead-form input[type="text"] { width: 100%; min-height: 40px; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.lead-form .btn { align-self: flex-start; margin-top: 0.15rem; }

.lead-log-btn {
    margin: 1rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.lead-log-btn:hover { color: var(--brand-hover); }

.lead-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; font-size: 0.95rem; text-align: left; }
.lead-log li + li { padding-top: 1rem; border-top: 1px solid var(--line); }
.lead-log .muted { display: block; font-size: 0.85rem; }
.swal-history .swal2-html-container { max-height: 60vh; overflow-y: auto; }
.swal-history .swal2-actions { justify-content: center; }

.ok { color: var(--success); font-weight: 600; }
.thin { color: var(--warning); }

/* --------------------------------------------------------- small screens */

@media (max-width: 560px) {
    body { font-size: 16px; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .site-header { flex-wrap: wrap; gap: 0.75rem; }
    .header-account { flex-wrap: wrap; gap: 0.4rem 0.9rem; }
    /* The address is who you signed in as; on a phone the links matter more than the reminder. */
    .header-account > .muted { display: none; }
    .admin-table { display: block; overflow-x: auto; }
}

/* Respect a reader who does not want motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .btn:hover, .tiles label:hover, .card:hover { transform: none !important; }
    .image-progress::after { width: 100% !important; opacity: .45; animation: none !important; }
}

/* My plans: the upgrade banner and per-brand rows */
.upgrade-banner {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.5rem;
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), var(--shadow-md);
}
@media (min-width: 720px) { .upgrade-banner { grid-template-columns: 1fr auto; } }
.upgrade-banner h2 { margin-top: 0; }
.upgrade-action .price { font-size: 2rem; margin-bottom: 0.75rem; }
.brand-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.brand-row > span:first-child { display: flex; flex-direction: column; gap: 0.2rem; }
.brand-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.badge { font-size: 0.8rem; font-weight: 600; color: var(--success); }
.badge-free { color: var(--ink-muted); }

/* -------------------------------------------- public pages: SEO and trades */

.section-lead { color: var(--ink-soft); max-width: var(--measure); margin: 0.25rem 0 0; }

.crumbs { font-size: 0.9rem; color: var(--ink-muted); padding-top: 1.25rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-hidden] { margin: 0 0.35rem; }

.feature-grid, .mix-grid, .myth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.feature-grid > *, .mix-grid > *, .myth-grid > * { animation: rise var(--dur-slow) var(--ease-out) both; }
.feature-grid > :nth-child(2), .mix-grid > :nth-child(2), .myth-grid > :nth-child(2) { animation-delay: 60ms; }
.feature-grid > :nth-child(3), .myth-grid > :nth-child(3) { animation-delay: 120ms; }
.feature-grid > :nth-child(4), .myth-grid > :nth-child(4) { animation-delay: 180ms; }
.feature-grid > :nth-child(5) { animation-delay: 240ms; }
.feature-grid > :nth-child(6) { animation-delay: 300ms; }
.feature-grid p, .myth-grid p { color: var(--ink-soft); font-size: 0.95rem; margin: 0.4rem 0 0; }
.myth-grid .myth { color: var(--ink); }

.trade-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 1.5rem 0 1rem; }
.chip-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-std),
                border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.chip-link:hover { transform: translateY(-2px); background: var(--brand-wash); border-color: var(--brand); color: var(--brand-text); box-shadow: var(--shadow-md); }
.chip-link:active { transform: scale(0.98); }
.chip-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.faq-list { display: grid; gap: 0.75rem; margin-top: 1.5rem; max-width: 52rem; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0 1.25rem;
    transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.faq-item[open] { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--brand-text);
    transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.faq-item p { margin: 0 0 1.1rem; color: var(--ink-soft); }

.mix-row { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.95rem; }
.mix-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.mix-bar { display: block; height: 0.6rem; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.mix-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand); }

.sample-post { max-width: 40rem; background: var(--surface-sunken); }
.sample-caption { white-space: pre-line; margin: 0 0 1rem; }
.sample-tags { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brand-text); margin: 0 0 1rem; overflow-wrap: anywhere; }
.sample-brief { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.howto { max-width: var(--measure); padding-left: 1.25rem; }
.howto li { margin-bottom: 0.6rem; color: var(--ink-soft); }
.howto li::marker { color: var(--brand-text); font-weight: 700; }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.25rem 0 0; }
.tag-list li { font-family: var(--font-mono); font-size: 0.85rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--brand-wash); color: var(--brand-text); }

.cta-band { text-align: center; }
.cta-band p { color: var(--ink-soft); margin-inline: auto; }

/* Posters on the landing page: the pitch beside a drawn example of one. */
.poster-feature { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) {
    .poster-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: clamp(2rem, 5vw, 4.5rem); }
}

.poster-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; max-width: var(--measure); }
.poster-points li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.poster-points li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.poster-points strong { color: var(--ink); }
.poster-price { margin: 1.5rem 0 0; padding: 0.85rem 1.1rem; border-radius: var(--radius-md); background: var(--brand-wash); color: var(--ink-soft); }
.poster-price strong { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--brand-text); }

.poster-mock {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 100% 0%, var(--brand-wash), transparent 70%),
        var(--surface-sunken);
    box-shadow: var(--shadow-md);
    animation: rise var(--dur-slow) var(--ease-out) 120ms both;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.poster-mock:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.poster-mock-tag {
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--brand-text);
    font-size: 0.75rem;
    font-weight: 700;
}
.poster-mock-headline { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.poster-mock-fact { color: var(--ink-soft); font-size: 0.95rem; }
.poster-mock-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: auto -1.5rem 0;
    padding: 0.9rem 1.5rem;
    background: var(--panel);
    color: var(--on-panel);
    font-size: 0.95rem;
}
.poster-mock-strip small { display: block; font-size: 0.8rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.poster-mock-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--logo-plate);
    color: var(--panel);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1rem;
}

@media (max-width: 560px) {
    .mix-row { grid-template-columns: 5rem 1fr 2.75rem; }
}

/* ------------------------------------------------ contact popup (SweetAlert2) */
/*
  SweetAlert2 is loaded from jsDelivr on the pages that use it. Its own theme is
  overridden here so the popup is a SahiPost card: same surface, type, buttons and
  fields as the rest of the site, in light and dark, through the same variables.
*/

.swal2-container { font-family: var(--font-sans); }
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation { background: rgb(32 33 36 / 55%); }

.swal2-popup.swal-sahipost {
    width: min(34rem, 92vw);
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
}

.swal-sahipost .swal2-title.swal-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    padding: 0;
    margin: 0 0 0.35rem;
}

.swal-sahipost .swal2-html-container.swal-body {
    margin: 0.75rem 0 0;
    padding: 0;
    color: var(--ink-soft);
    font-size: 1rem;
    text-align: left;
}
.swal-sahipost .swal2-html-container .field { margin-bottom: 1rem; }

/* The image confirmation's "Put on the image" choices. */
.branding-options { border: 0; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.branding-options legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.branding-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.branding-option:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.branding-option:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.branding-option input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--brand); }
.branding-option > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.branding-option strong { color: var(--ink); font-size: 0.95rem; }
.branding-option small { color: var(--ink-soft); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branding-option a { font-size: 0.85rem; color: var(--brand-text); font-weight: 600; }
.branding-option.is-missing { cursor: default; border-style: dashed; border-color: var(--line); }
.branding-option.is-missing strong { color: var(--ink-muted); }
.branding-logo { flex: none; width: 2.25rem; height: 2.25rem; object-fit: contain; border-radius: var(--radius-sm); background: var(--logo-plate); padding: 0.15rem; border: 1px solid var(--line); }
.swal-sahipost .swal2-html-container .field > label { color: var(--ink); }

.swal-sahipost textarea {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.swal-sahipost textarea:hover { border-color: var(--ink-soft); }
.swal-sahipost textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.swal-sahipost textarea[aria-invalid="true"] { border-color: var(--danger); }

.swal-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.swal-sahipost .swal2-actions { margin: 1.25rem 0 0; gap: 0.75rem; width: 100%; justify-content: flex-end; }
.swal-sahipost .swal2-actions .btn { width: auto; min-width: 8rem; }
.swal-sahipost .swal2-styled:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.swal-sahipost .swal2-loader { border-color: var(--brand) transparent var(--brand) transparent; }

.swal-sahipost .swal2-validation-message.swal-error {
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    background: var(--danger-wash);
    color: var(--danger);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
}
.swal-sahipost .swal2-validation-message::before { background: var(--danger); color: var(--danger-wash); }

.swal-sahipost .swal2-icon.swal2-success { border-color: var(--success); color: var(--success); }
.swal-sahipost .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--success); }
.swal-sahipost .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--success-wash); }
.swal-sahipost .swal2-icon.swal2-success [class^="swal2-success-circular-line"] { background: transparent; }

.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.cta-actions .btn { width: auto; }

@media (max-width: 560px) {
    .swal-sahipost .swal2-actions { flex-direction: column-reverse; }
    .swal-sahipost .swal2-actions .btn { width: 100%; }
}
.swal-intro { margin: 0 0 1.25rem; text-align: center; }
.swal-done .swal2-actions { justify-content: center; }

/* ------------------------------------------------------- Google accents */

/* The four Google colours are decoration only: fills, dots, stripes and glows.
   Text and icons keep using --brand-text, --success, --warning and --danger,
   which are darkened to pass contrast. Dark values must match in both blocks. */
:root {
    --g-blue: #4285f4;
    --g-red: #ea4335;
    --g-yellow: #fbbc05;
    --g-green: #34a853;
    --g-stripe: linear-gradient(90deg,
        var(--g-blue) 0 25%, var(--g-red) 25% 50%, var(--g-yellow) 50% 75%, var(--g-green) 75% 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --g-blue: #8ab4f8; --g-red: #f28b82; --g-yellow: #fdd663; --g-green: #81c995;
    }
}

:root[data-theme="dark"] {
    --g-blue: #8ab4f8; --g-red: #f28b82; --g-yellow: #fdd663; --g-green: #81c995;
}

/* A thin four-colour stripe closes off the top of every page. */
body { position: relative; }

/* The 1px stripe, plus a blurred copy that bleeds diffusely down onto the page. */
body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--g-stripe);
    z-index: 5;
    opacity: 0.45;
    pointer-events: none;
}

html::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    height: 2rem;
    background: var(--g-stripe);
    filter: blur(26px);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
}

/* Soft colour glows behind the hero, and a faint grid that fades out downwards:
   the grid gives the plain canvas structure without competing with the form. */
body {
    background:
        radial-gradient(46rem 22rem at 88% -6rem, color-mix(in srgb, var(--g-blue) 13%, transparent), transparent 70%),
        radial-gradient(34rem 18rem at 6% 6rem, color-mix(in srgb, var(--g-green) 9%, transparent), transparent 70%),
        radial-gradient(30rem 16rem at 58% -4rem, color-mix(in srgb, var(--g-yellow) 11%, transparent), transparent 70%),
        var(--canvas);
    background-repeat: no-repeat;
}

body::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 46rem;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
    background-size: 2.25rem 2.25rem;
    -webkit-mask-image: radial-gradient(75% 100% at 50% 0, #000 25%, transparent 100%);
    mask-image: radial-gradient(75% 100% at 50% 0, #000 25%, transparent 100%);
}

/* Eyebrow: four dots, one per colour. */
.eyebrow { position: relative; padding-left: 3rem; }
.eyebrow::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    width: 0.3rem;
    height: 0.3rem;
    margin-top: -0.15rem;
    border-radius: 50%;
    background: var(--g-blue);
    box-shadow: 0.42rem 0 0 var(--g-red), 0.84rem 0 0 var(--g-yellow), 1.26rem 0 0 var(--g-green);
}

/* How it works: each step takes one Google colour. The numeral stays --ink. */
.steps > :nth-child(1) { --step: var(--g-blue); }
.steps > :nth-child(2) { --step: var(--g-red); }
.steps > :nth-child(3) { --step: var(--g-yellow); }
.steps > :nth-child(4) { --step: var(--g-green); }

.steps .step-number {
    background: color-mix(in srgb, var(--step) 22%, var(--surface));
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--step);
}

.steps > .card { border-top: 3px solid var(--step); }

/* Featured price: the stripe sits on its top edge. */
.price-card.featured { position: relative; overflow: hidden; }
.price-card.featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--g-stripe);
}

/* ------------------------------------------------ credits, images, invoices */

.mono { font-family: var(--font-mono); }
.amount, .admin-table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.table-scroll .admin-table { margin-bottom: 0; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1rem; }
.field-follow { margin-top: 0.5rem; }
.admin-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.admin-form h2, .admin-form h3 { margin-top: 0; }
.admin-form fieldset h2:not(:first-child), .admin-form fieldset h3 { margin-top: 1.75rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.75rem 0 1.25rem; }
button.chip {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 34px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
button.chip:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
button.chip:active { transform: scale(0.98); }
button.chip:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

.form-error { color: var(--danger); font-size: 0.9rem; font-weight: 600; margin: 0 0 1rem; }
.notice-error { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.notice-warning { background: var(--warning-wash); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.notice-warning a { color: inherit; font-weight: 650; }
.holiday-problems { margin: 0; padding-left: 1.1rem; }

/* The month's image credits: what an image costs, what is left, and a way to add more in place. */
.image-credits {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}
.image-credits-intro { display: flex; gap: 1rem; align-items: flex-start; }
.image-credits-intro h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.image-credits-intro p { color: var(--ink-soft); margin-bottom: 0.6rem; }
.image-credits-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: var(--brand-wash);
    color: var(--brand-text);
}
.image-credits-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.image-credits-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; padding: 0; font-size: 0.88rem; color: var(--ink-soft); }
.image-credits-facts li::before { content: ""; display: inline-block; vertical-align: middle; margin: -0.15rem 0.45rem 0 0; width: 0.35rem; height: 0.35rem; border-radius: var(--radius-pill); background: var(--line-strong); }
.image-credits-facts strong { color: var(--ink); }

.image-credits-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 13rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
}
.image-credits-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.credit-balance { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.image-credits-note { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.image-credits-note.is-low { color: var(--ink); font-weight: 600; }
.image-credits-note.is-low::before { content: ""; display: inline-block; vertical-align: middle; margin: -0.1rem 0.45rem 0 0; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--warning); }

@media (max-width: 720px) {
    .image-credits { grid-template-columns: 1fr; }
    .image-credits-icon { display: none; }
    .image-credits-balance { min-width: 0; }
}

/* The brand logo on the plan overview: a square preview beside what the logo needs to be. */
.brand-logo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem 1.75rem;
    align-items: start;
    margin-top: 1.5rem;
}
.brand-logo-preview {
    display: grid;
    place-items: center;
    width: 8.5rem;
    aspect-ratio: 1;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--line-strong);
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font-size: 0.85rem;
    text-align: center;
}
.brand-logo-preview img { width: 100%; height: 100%; object-fit: contain; animation: logo-in var(--dur-slow) var(--ease-out); }
.brand-logo-body h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.brand-logo-body > p { color: var(--ink-soft); margin-bottom: 0.6rem; }
.brand-logo-body .image-credits-facts { margin-bottom: 1rem; }
.brand-logo-body .notice, .brand-logo-body .form-error { margin: 0 0 1rem; }
.brand-logo-saved { color: var(--success); font-size: 0.9rem; font-weight: 600; margin: 0 0 1rem; }
.brand-logo-saved::before { content: "✓ "; }
.brand-logo [hidden] { display: none !important; }

/* Coming months written before the latest Fine-tune, and the offer to rewrite them. */
.rewrite { margin-bottom: 1.5rem; border-left: 3px solid var(--brand); }
.rewrite h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.rewrite > p { color: var(--ink-soft); margin-bottom: 0.75rem; max-width: var(--measure); }
.rewrite .image-credits-facts { margin-bottom: 1.1rem; }
.rewrite .notice { margin-bottom: 1rem; }
.rewrite [hidden] { display: none !important; }
.stale-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-text);
    background: var(--brand-wash);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.rewrite-quiet { border-left-color: var(--line-strong); }
.rewrite .post-actions form { margin: 0; }

/* Post actions: mark posted, edit caption, move. Quiet, and folded away until wanted. */
.post-flag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}
.post-flag-posted { color: var(--success); background: var(--success-wash); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.post-action-result { margin: 0.5rem 0 0.75rem; }
.post-actions form { margin: 0; display: contents; }
.post-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.5rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.post-tool { min-width: 0; }
.post-tool[open] { flex-basis: 100%; }
.post-tool summary {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-text);
    list-style-position: inside;
    border-radius: var(--radius-sm);
}
.post-tool summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.post-tool form { margin-top: 0.6rem; }
.post-tool textarea { margin-bottom: 0.6rem; font-size: 0.95rem; }
.post-tool-note { font-size: 0.85rem; }
.post-move { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.post-move label { font-size: 0.88rem; color: var(--ink-soft); }
.post-move input[type="date"] { width: auto; }

/* The overview's way into the brand profile, beside the plan's title. */
.profile-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; margin: 0; }
.profile-link h2 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.profile-link p { color: var(--ink-soft); margin: 0; max-width: var(--measure); }

/* The brand profile: contact details, logo and Fine-tune. */
.profile-page .brand-logo { margin-top: 0; margin-bottom: 1.5rem; }
.profile-lock { position: sticky; top: 0.75rem; z-index: 5; box-shadow: var(--shadow-md); }
.profile-lock strong { display: block; margin-bottom: 0.2rem; }
.profile-page [hidden] { display: none !important; }
.profile-section { margin-bottom: 1.5rem; }
.profile-section h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.profile-section > p { color: var(--ink-soft); margin-bottom: 1.25rem; max-width: var(--measure); }
.profile-form { max-width: 44rem; }
.profile-fixed { margin: 0; font-weight: 600; color: var(--ink); }
.profile-group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1.5rem 0 0.5rem; min-width: 0; }
.profile-group:first-of-type { border-top: 0; padding-top: 0; }
.profile-group legend { padding: 0; margin-bottom: 0.75rem; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.profile-group > .hint { margin-bottom: 0.9rem; }
.profile-checks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-bottom: 1.25rem; }
.profile-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem 1.25rem; }
.profile-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; margin-bottom: 0.6rem; align-items: center; }
.profile-row-review { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
.profile-row-offer { grid-template-columns: minmax(0, 1fr) auto auto; }
.profile-row-date { grid-template-columns: auto minmax(0, 1fr) auto; }
.profile-row + .hint { margin-bottom: 1rem; }
.profile-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-muted); }
.profile-date input { width: auto; }
.profile-errors { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.profile-form > .btn { margin-top: 0.5rem; }

@media (max-width: 640px) {
    .profile-row, .profile-row-review, .profile-row-offer, .profile-row-date { grid-template-columns: 1fr; }
    .profile-date input { width: 100%; }
}

@keyframes logo-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
    .brand-logo { grid-template-columns: 1fr; }
}

/* The plan page's way into competitors. Changes with where the owner is: none yet, short of posts, or suggestions waiting. */
.competitor-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; border-left: 3px solid var(--line-strong); animation: rise var(--dur-slow) var(--ease-out) both; }
.competitor-teaser.has-suggestions { border-left-color: var(--brand); }
.competitor-teaser-text { flex: 1 1 26rem; min-width: 0; }
.competitor-teaser h2 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.competitor-teaser p { color: var(--ink-soft); margin: 0; max-width: var(--measure); }
.competitor-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; }
.competitor-chips .chip { padding: 0.2rem 0.7rem; font-size: 0.82rem; }
.competitor-chips .chip-more { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.chip-new { padding: 0.1rem 0.6rem; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.5rem; }

/* Competitors: what the owner pasted, and the report comparing them. */
.competitor-report-link { margin-bottom: 1.5rem; }
.competitor-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0 1rem; }
.competitor-website { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.25rem; max-width: 44rem; }
.competitor-website h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.6rem; }
.competitor-facts { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0 0 0.75rem; }
.competitor-facts dt { color: var(--ink-muted); font-size: 0.88rem; }
.competitor-facts dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.competitor-links { display: flex; flex-direction: column; gap: 0.2rem; }
.competitor-links a { color: var(--brand-text); }
.competitor-remove { margin: 1.25rem 0 0; }
.competitor-edit { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.competitor-edit > summary { cursor: pointer; color: var(--brand-text); font-weight: 600; width: fit-content; margin-bottom: 0.25rem; }
.competitor-edit[open] > summary { margin-bottom: 1.25rem; }
.competitor-edit > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-md); }
.competitor-steps { margin: 0 0 1.5rem; }
.competitor-steps h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.competitor-tips { margin: -0.25rem 0 1.25rem; font-size: 0.92rem; color: var(--ink-soft); }
.competitor-tips summary { cursor: pointer; color: var(--brand-text); font-weight: 600; width: fit-content; }
.competitor-tips summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-md); }
.competitor-tips ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.competitor-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.competitor-progress-bar { display: inline-block; width: 7rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.competitor-progress-bar > span { display: block; height: 100%; background: var(--brand); transition: width var(--dur-slow) var(--ease-out); }
.competitor-applied { margin-bottom: 1.5rem; }
.finetune-competitors { margin-bottom: 1.25rem; max-width: var(--measure); }
.suggestion-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.suggestion { border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0.85rem 1rem; transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); }
.suggestion:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.suggestion > .check > span { display: flex; flex-direction: column; gap: 0.15rem; }
.suggestion-change { color: var(--ink); font-size: 0.92rem; }
.suggestion-reason { color: var(--ink-muted); font-size: 0.88rem; }
.compare-table th[scope="row"] { font-size: 0.88rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink-soft); background: transparent; white-space: nowrap; }
.compare-table td { min-width: 9rem; }
.compare-table td.mono { font-size: 0.85rem; overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .competitor-facts { grid-template-columns: 1fr; gap: 0.1rem; }
    .competitor-facts dd { margin-bottom: 0.5rem; }
}

.btn-note { font-weight: 500; color: var(--ink-muted); }
.chip-note { font-weight: 500; opacity: 0.85; }

/* Back from adding credits: the post the customer was about to make an image for. */
.post-card.is-resumed { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); animation: pop var(--dur-slow) var(--ease-out); }

/* The "Add credits" dialog on the month page. */
.topup-dialog {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}
.topup-dialog[open] { animation: rise var(--dur-base) var(--ease-out); }
.topup-dialog::backdrop { background: rgb(32 33 36 / 55%); }
.topup-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.topup-head h2 { font-size: 1.6rem; margin: 0; }
.dialog-close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.dialog-close:hover { background: var(--surface-sunken); color: var(--ink); }
.dialog-close svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.topup-reason {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--warning-wash);
    color: var(--ink);
    border-left: 3px solid var(--warning);
    font-size: 0.92rem;
    font-weight: 600;
}
.topup-summary { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.25rem; }
.topup-summary strong { color: var(--ink); }
.topup-dialog .field { margin-bottom: 1.25rem; }
.topup-images { margin: 0.45rem 0 0; color: var(--ink-soft); font-weight: 600; }
.topup-images:empty { display: none; }
.topup-dialog .chip-row { margin: -0.25rem 0 1.25rem; }
.topup-test { text-align: center; margin: 0.75rem 0 0; }

.post-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Several festivals on one day: the owner picks which one the post is for. */
.festival-choice { margin: 0 0 1rem; }
.festival-choice-label { display: block; color: var(--ink-soft); font-size: 0.9rem; }
.festival-choice .chip-row { margin: 0.5rem 0 0; }
.festival-choice button.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); cursor: default; }

.post-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}
.post-images:empty { display: none; }

.post-image { margin: 0; animation: rise-in var(--dur-slow) var(--ease-out) both; }
.post-image > a {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-sunken);
}
.post-image img { display: block; width: 100%; height: auto; transition: transform var(--dur-base) var(--ease-out); }
.post-image > a { cursor: zoom-in; }
.post-image > a:hover img { transform: scale(1.02); }
.post-image figcaption { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; margin-top: 0.45rem; }
.post-image-slide { color: var(--ink-soft); font-weight: 600; }

/* A finished image, larger, on the page: no new tab, and its download right under it. */
.image-preview {
    width: min(44rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}
.image-preview[open] { display: flex; flex-direction: column; gap: 0.75rem; animation: rise var(--dur-base) var(--ease-out); }
.image-preview::backdrop { background: rgb(32 33 36 / 55%); }
.image-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.image-preview-title { font-weight: 600; color: var(--ink-soft); }
.image-preview img {
    display: block;
    width: 100%;
    min-height: 0;
    max-height: calc(100dvh - 11rem);
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.image-preview-stage { position: relative; min-height: 0; touch-action: pan-y; }
.image-preview-nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--dur-fast) var(--ease-std);
}
.image-preview-nav[hidden] { display: none; }
.image-preview-nav:hover { background: var(--surface-sunken); }
.image-preview-nav.is-prev { left: 0.6rem; }
.image-preview-nav.is-next { right: 0.6rem; }
.image-preview-nav svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.image-status {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--brand-wash);
    color: var(--brand-text);
    font-size: 0.9rem;
}
.image-failed { background: var(--danger-wash); color: var(--danger); }

/* No real percentage comes back from the image service, so the bar is indeterminate:
   a short segment sweeps the track. Reduced motion leaves it sitting still. */
.image-progress {
    position: relative;
    display: block;
    height: 4px;
    margin-top: 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    overflow: hidden;
}
.image-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: inherit;
    background: var(--brand);
    animation: sweep 1.4s var(--ease-std) infinite;
}

/* The generic disabled look, and the one for a button that is busy doing its job. */
.btn[disabled] { cursor: not-allowed; transform: none; box-shadow: none; }
.btn-quiet[disabled] { background: var(--surface-sunken); color: var(--ink-muted); }
.btn[aria-busy="true"] { cursor: progress; }

@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------------ toast */

.toast-region {
    position: fixed;
    z-index: 50;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}
@media (min-width: 640px) { .toast-region { left: auto; align-items: flex-end; } }

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: min(100%, 24rem);
    padding: 0.8rem 0.6rem 0.8rem 1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    pointer-events: auto;
    animation: rise var(--dur-slow) var(--ease-out) both;
}
.toast-success { border-left-color: var(--success); }
.toast-danger { border-left-color: var(--danger); }
.toast > div { flex: 1; }
.toast strong { display: block; font-weight: 650; }
.toast p { margin: 0.15rem 0 0; color: var(--ink-soft); }
.toast-close {
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.toast-close:hover { background: var(--surface-sunken); color: var(--ink); }
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-std) forwards; }

@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

.invoice { max-width: 820px; }
.invoice h1 { margin: 0; }
.invoice h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.4rem; }
.invoice p { margin: 0.15rem 0; }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.invoice-meta { display: grid; grid-template-columns: auto auto; gap: 0.2rem 1rem; margin: 0; font-size: 0.95rem; }
.invoice-meta dt { color: var(--ink-muted); }
.invoice-meta dd { margin: 0; }
.invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.invoice-lines tfoot td { border-bottom: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; color: var(--ink-soft); }
.invoice-lines tfoot td:first-child { text-align: right; }
.invoice-lines .invoice-total td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line-strong); }

@media print {
    .site-header, .site-footer, .no-print { display: none !important; }
    /* Paper is always light, whichever theme is on screen. This selector matches both dark
       rules above at equal specificity and wins by coming later; the values mirror :root. */
    :root:not([data-theme="light"]) {
        color-scheme: light;
        --canvas: #ffffff;
        --surface: #ffffff;
        --surface-sunken: #f8f9fa;
        --line: #dadce0;
        --line-strong: #80868b;
        --ink: #202124;
        --ink-soft: #3c4043;
        --ink-muted: #5f6368;
    }
    body { background: var(--canvas); }
    .invoice { box-shadow: none; border: 0; max-width: none; padding: 0; }
}