/* ==========================================================================
   claudewatermarkeraser.com — site stylesheet

   One file, no build step, no CDN. Tokens first, then layout, then components.

   Palette is derived from the site's own app icon: a violet mark (#6010B0 with
   #200050 shadows) on a near-white ground. The neutrals are deliberately COOL
   (grey-violet), which is what separates this site visually from the warm
   cream-and-maroon scheme used elsewhere — two sites sharing an owner should
   not share a face.

   Theming has three states. Light lives on bare :root. Dark applies either
   through the system preference or through an explicit data-theme="dark" on
   the root element, which the theme toggle sets and persists. A visitor who
   picks light explicitly keeps light even on a dark system.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
    /* Cool neutrals with a faint violet cast, tuned to sit under the brand. */
    --paper:        #f7f7fb;
    --paper-2:      #efeff7;
    --paper-3:      #e4e3f0;
    --surface:      #ffffff;
    --surface-2:    #fafaff;

    --ink:          #15131f;
    --ink-2:        #3b3850;
    --ink-3:        #6d6a85;
    --line:         #e3e2ee;
    --line-strong:  #c8c5da;

    /* Brand, straight from the icon. */
    --brand:        #6425c7;
    --brand-dark:   #4e1aa0;
    --brand-light:  #8b5cf6;
    --brand-deep:   #1c0842;
    --brand-tint:   #f1ebfc;
    --brand-ink:    #ffffff;

    --high:         #d81b60;
    --high-bg:      #fdeaf1;
    --medium:       #b45309;
    --medium-bg:    #fdf1e3;
    --low:          #0f7a5a;
    --low-bg:       #e6f6f0;
    --ok:           #0f7a5a;
    --ok-bg:        #e6f6f0;

    --radius-sm:    8px;
    --radius:       12px;
    --radius-lg:    18px;

    /* Violet-tinted shadows read as depth rather than dirt on a cool ground. */
    --shadow:       0 1px 2px rgba(28, 8, 66, .05), 0 4px 14px rgba(28, 8, 66, .05);
    --shadow-md:    0 2px 6px rgba(28, 8, 66, .06), 0 10px 30px rgba(28, 8, 66, .08);
    --shadow-lg:    0 4px 10px rgba(28, 8, 66, .07), 0 20px 50px rgba(28, 8, 66, .11);
    --ring:         0 0 0 3px rgba(100, 37, 199, .18);

    --wrap:         1160px;
    --wrap-narrow:  740px;

    --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Dark palette.
   Declared twice on purpose. The media query covers visitors on the
   default "follow my system" setting, excluding anyone who explicitly
   chose light. The attribute rule covers an explicit dark choice, which
   must also win on a system set to light. CSS cannot join a selector
   inside a media query with one outside it, so the list repeats. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:        #0c0a14;
        --paper-2:      #13101f;
        --paper-3:      #1b1730;
        --surface:      #13101f;
        --surface-2:    #191529;

        --ink:          #ecebf6;
        --ink-2:        #bebbd2;
        --ink-3:        #8884a3;
        --line:         #272141;
        --line-strong:  #3b3459;

        --brand:        #a78bfa;
        --brand-dark:   #8b5cf6;
        --brand-light:  #c4b5fd;
        --brand-deep:   #0a0616;
        --brand-tint:   #1e1636;
        --brand-ink:    #13101f;

        --high:         #ff7aa8;
        --high-bg:      #2b1122;
        --medium:       #eab069;
        --medium-bg:    #2a1e12;
        --low:          #5fd9ac;
        --low-bg:       #0f2620;
        --ok:           #5fd9ac;
        --ok-bg:        #0f2620;

        --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
        --shadow-md:    0 2px 6px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .4);
        --shadow-lg:    0 4px 10px rgba(0, 0, 0, .5), 0 20px 50px rgba(0, 0, 0, .5);
        --ring:         0 0 0 3px rgba(167, 139, 250, .25);
    }
}

:root[data-theme="dark"] {
    --paper:        #0c0a14;
    --paper-2:      #13101f;
    --paper-3:      #1b1730;
    --surface:      #13101f;
    --surface-2:    #191529;

    --ink:          #ecebf6;
    --ink-2:        #bebbd2;
    --ink-3:        #8884a3;
    --line:         #272141;
    --line-strong:  #3b3459;

    --brand:        #a78bfa;
    --brand-dark:   #8b5cf6;
    --brand-light:  #c4b5fd;
    --brand-deep:   #0a0616;
    --brand-tint:   #1e1636;
    --brand-ink:    #13101f;

    --high:         #ff7aa8;
    --high-bg:      #2b1122;
    --medium:       #eab069;
    --medium-bg:    #2a1e12;
    --low:          #5fd9ac;
    --low-bg:       #0f2620;
    --ok:           #5fd9ac;
    --ok-bg:        #0f2620;

    --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-md:    0 2px 6px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .4);
    --shadow-lg:    0 4px 10px rgba(0, 0, 0, .5), 0 20px 50px rgba(0, 0, 0, .5);
    --ring:         0 0 0 3px rgba(167, 139, 250, .25);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.021em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.05rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 1.18rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.18rem, 1.06rem + .5vw, 1.35rem); }
p  { margin: 0 0 1.1em; }

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--brand-dark); }

ul, ol { padding-left: 1.35em; }

code, kbd, samp { font-family: var(--font-mono); font-size: .89em; }
code {
    background: var(--paper-3);
    padding: .13em .4em;
    border-radius: 5px;
    word-break: break-word;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -9999px;
    background: var(--brand); color: var(--brand-ink);
    padding: 10px 18px; border-radius: 0 0 var(--radius) 0; z-index: 100; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

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

/* --------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: 46px 0; }
.section--tight { padding: 26px 0; }

/* --------------------------------------------------------------- header -- */
.site-header {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
/* color-mix is recent; browsers without it get a solid bar rather than nothing. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .site-header { background: var(--surface); }
}

.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: 68px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo picture { display: block; line-height: 0; }
.logo img { height: 34px; width: auto; }

.site-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.site-nav a {
    display: block; padding: 8px 14px; border-radius: 9px;
    color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--paper-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-tint); font-weight: 600; }

.nav-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute; inset: 68px 0 auto 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md); display: none;
    }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; padding: 10px 20px 18px; gap: 2px; }
    .site-nav a { padding: 12px 14px; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { padding: 52px 0 26px; text-align: center; position: relative; }

/* A soft violet bloom behind the headline, so the top of the page reads as
   branded without adding an image to download. */
.hero::before {
    content: ""; position: absolute; inset: -40px auto auto 50%;
    width: min(760px, 96vw); height: 380px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, var(--brand-tint) 0%, transparent 68%);
    opacity: .9; pointer-events: none; z-index: -1;
}

.hero h1 { margin-bottom: .32em; }
.hero__lead {
    font-size: 1.14rem; color: var(--ink-2);
    max-width: 640px; margin: 0 auto 1.35em;
}
.hero__badges {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    list-style: none; padding: 0; margin: 0;
}
.hero__badges li {
    font-size: .84rem; font-weight: 550; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line);
    padding: 6px 14px; border-radius: 100px; box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 600; font-size: .95rem;
    padding: 11px 20px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--brand); color: var(--brand-ink);
    box-shadow: 0 1px 2px rgba(28, 8, 66, .16), 0 4px 12px rgba(100, 37, 199, .22);
}
.btn--primary:hover { background: var(--brand-dark); color: var(--brand-ink); }

.btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--brand); }

.btn--sm { padding: 7px 13px; font-size: .86rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- tool -- */
.tool {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin: 0 auto 26px;
}

.tool__panes { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .tool__panes { grid-template-columns: 1fr; } }

.tool__pane { display: flex; flex-direction: column; min-width: 0; }
.tool__pane + .tool__pane { border-left: 1px solid var(--line); }
@media (max-width: 880px) {
    .tool__pane + .tool__pane { border-left: 0; border-top: 1px solid var(--line); }
}

.tool__pane-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--line); background: var(--paper-2);
    min-height: 54px;
}
.tool__pane-title {
    font-weight: 650; font-size: .8rem; margin: 0;
    text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.tool__pane-actions { display: flex; gap: 6px; align-items: center; }

.tool__textarea {
    width: 100%; min-height: 330px; resize: vertical;
    border: 0; padding: 18px; margin: 0;
    font-family: var(--font-mono); font-size: .93rem; line-height: 1.7;
    color: var(--ink); background: var(--surface);
    tab-size: 4;
}
.tool__textarea:focus { outline: 0; }
.tool__textarea::placeholder { color: var(--ink-3); }
.tool__textarea[readonly] { background: var(--paper-2); }

.tool__output {
    min-height: 330px; margin: 0; padding: 18px; overflow: auto;
    font-family: var(--font-mono); font-size: .93rem; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word; background: var(--surface-2);
}

.tool__bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 14px 16px; border-top: 1px solid var(--line); background: var(--paper-2);
}
.tool__counts { font-size: .86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin: 0; }
.tool__counts strong { color: var(--ink); font-weight: 650; }

/* options */
.tool__options { border-top: 1px solid var(--line); background: var(--surface); }
.tool__options summary {
    cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: .92rem;
    list-style: none; display: flex; align-items: center; gap: 9px;
}
.tool__options summary::-webkit-details-marker { display: none; }
.tool__options summary::before {
    content: "›"; color: var(--brand); font-size: 1.2rem; line-height: 1;
    transition: transform .18s; display: inline-block;
}
.tool__options[open] summary::before { transform: rotate(90deg); }
.tool__options summary:hover { background: var(--paper-2); }

.option-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 8px; padding: 4px 16px 18px;
}
.option {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 13px; font-size: .9rem; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    transition: border-color .14s, background .14s;
}
.option:hover { border-color: var(--line-strong); background: var(--paper-2); }
/* :has is what lets a checked option highlight its whole tile without JS. */
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.option input { margin: 2px 0 0; flex-shrink: 0; accent-color: var(--brand); width: 17px; height: 17px; }
.option__text strong { display: block; font-weight: 600; }
.option__text span { display: block; color: var(--ink-3); font-size: .83rem; line-height: 1.45; margin-top: 1px; }

/* ------------------------------------------------------------- findings -- */
.findings { margin: 0 auto 32px; }

.verdict {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 20px 22px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--surface);
    box-shadow: var(--shadow); margin-bottom: 16px;
}
.verdict__score {
    display: grid; place-items: center; flex-shrink: 0;
    width: 66px; height: 66px; border-radius: 50%;
    font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums;
    border: 3px solid currentColor;
}
.verdict__body { min-width: 0; flex: 1; }
.verdict__label { font-weight: 700; font-size: 1.08rem; margin: 0 0 3px; }
.verdict__summary { margin: 0; color: var(--ink-2); font-size: .93rem; }

.verdict--clean  .verdict__score { color: var(--ok);     background: var(--ok-bg); }
.verdict--low    .verdict__score { color: var(--low);    background: var(--low-bg); }
.verdict--medium .verdict__score { color: var(--medium); background: var(--medium-bg); }
.verdict--high   .verdict__score { color: var(--high);   background: var(--high-bg); }

.payload {
    border: 1px solid var(--high); background: var(--high-bg);
    border-radius: var(--radius); padding: 17px 19px; margin-bottom: 16px;
}
.payload h3 { margin: 0 0 6px; font-size: 1rem; color: var(--high); }
.payload pre {
    margin: 9px 0 0; padding: 13px; background: var(--surface);
    border-radius: 8px; overflow-x: auto; font-size: .9rem;
    border: 1px solid var(--line);
}

.cat-list { display: grid; gap: 10px; }
.cat {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 15px;
    align-items: start; padding: 15px 17px;
    border: 1px solid var(--line); border-left-width: 4px;
    border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.cat--high   { border-left-color: var(--high); }
.cat--medium { border-left-color: var(--medium); }
.cat--low    { border-left-color: var(--low); }

.cat__count {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem;
    min-width: 2.2ch; text-align: right; line-height: 1.35;
}
.cat--high .cat__count   { color: var(--high); }
.cat--medium .cat__count { color: var(--medium); }
.cat--low .cat__count    { color: var(--low); }

.cat__name { font-weight: 650; }
.cat__desc { grid-column: 2 / -1; color: var(--ink-3); font-size: .87rem; line-height: 1.5; margin: 3px 0 0; }
.cat__chars { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cat__badge {
    font-family: var(--font-mono); font-size: .76rem;
    background: var(--paper-2); border: 1px solid var(--line);
    padding: 4px 9px; border-radius: 100px; white-space: nowrap; color: var(--ink-2);
}
.cat__badge b { font-weight: 700; color: var(--ink); }
.cat__action { font-size: .79rem; color: var(--ink-3); white-space: nowrap; }

/* highlight view */
.hl-view {
    margin-top: 16px; padding: 17px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--surface);
    font-family: var(--font-mono); font-size: .9rem; line-height: 2.1;
    white-space: pre-wrap; word-break: break-word;
    max-height: 460px; overflow: auto;
}
.wm-hl {
    font-size: .72em; font-weight: 700; padding: 2px 6px;
    border-radius: 5px; margin: 0 1px; white-space: nowrap;
    vertical-align: middle;
}
.wm-hl--high   { background: var(--high-bg);   color: var(--high);   border: 1px solid var(--high); }
.wm-hl--medium { background: var(--medium-bg); color: var(--medium); border: 1px solid var(--medium); }
.wm-hl--low    { background: var(--low-bg);    color: var(--low);    border: 1px solid var(--low); }
.wm-hl-truncated { color: var(--ink-3); font-style: italic; }

.empty-note {
    text-align: center; padding: 36px 20px; color: var(--ink-3);
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    background: var(--surface);
}

/* ----------------------------------------------------------- toast/alert -- */
.toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
    background: var(--ink); color: var(--paper);
    padding: 12px 22px; border-radius: 100px; font-size: .9rem; font-weight: 550;
    box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; z-index: 200;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.alert {
    padding: 14px 17px; border-radius: var(--radius);
    border: 1px solid var(--line); margin-bottom: 18px; font-size: .93rem;
}
.alert--ok    { background: var(--ok-bg);   border-color: var(--ok);   color: var(--ok); }
.alert--error { background: var(--high-bg); border-color: var(--high); color: var(--high); }
.alert--info  { background: var(--brand-tint); border-color: var(--brand); color: var(--ink-2); }

/* ----------------------------------------------------------- breadcrumbs -- */
.breadcrumbs { margin: 20px 0 6px; font-size: .86rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.breadcrumbs li { color: var(--ink-3); display: flex; gap: 7px; align-items: center; }
.breadcrumbs li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------------- prose -- */
.prose { max-width: var(--wrap-narrow); margin: 0 auto; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2em; scroll-margin-top: 88px; }
.prose h3 { margin-top: 1.55em; scroll-margin-top: 88px; }
.prose ul, .prose ol { margin-top: .8em; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); margin: 1.7em auto; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { font-size: .86rem; color: var(--ink-3); text-align: center; margin-top: .7em; }
.prose blockquote {
    margin: 1.7em 0; padding: 6px 0 6px 22px;
    border-left: 3px solid var(--brand); color: var(--ink-2); font-style: italic;
}
.prose pre {
    background: var(--paper-3); padding: 15px 17px; border-radius: var(--radius);
    overflow-x: auto; font-size: .87rem; border: 1px solid var(--line);
}
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose table th, .prose table td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; }
.prose table th { background: var(--paper-2); font-weight: 650; }
.prose table tr:nth-child(even) td { background: var(--surface-2); }
.table-scroll {
    overflow-x: auto; margin: 1.6em 0;
    border-radius: var(--radius); border: 1px solid var(--line);
}
.table-scroll table { border-collapse: collapse; }
.table-scroll table th, .table-scroll table td { border-width: 0 0 1px 0; }
.table-scroll table tr:last-child td { border-bottom: 0; }

.takeaway {
    background: var(--brand-tint);
    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius); padding: 18px 22px; margin: 1.9em 0;
}
@supports not (border: 1px solid color-mix(in srgb, red 50%, blue)) {
    .takeaway { border-color: var(--brand); }
}
.takeaway strong {
    display: block; margin-bottom: 5px; color: var(--brand); font-size: .76rem;
    text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
}
.takeaway p { margin: 0; }

/* ------------------------------------------------------------------ faq -- */
.faq { max-width: var(--wrap-narrow); margin: 0 auto; }
.faq__item {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); margin-bottom: 10px; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.faq__item:hover { border-color: var(--line-strong); }
.faq__item[open] { border-color: var(--brand); box-shadow: var(--shadow); }
.faq__item summary {
    cursor: pointer; padding: 16px 19px; font-weight: 650; font-size: 1rem;
    list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+"; color: var(--brand); font-size: 1.4rem; font-weight: 400;
    line-height: 1; flex-shrink: 0;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 19px 17px; color: var(--ink-2); }
.faq__answer > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ blog cards -- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16 / 9; background: var(--paper-3); overflow: hidden; display: block; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 17px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.card__cat {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--brand); text-decoration: none; margin-bottom: 8px; display: inline-block;
}
.card__title { font-size: 1.1rem; margin: 0 0 8px; line-height: 1.32; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--brand); }
.card__excerpt { font-size: .91rem; color: var(--ink-3); margin: 0 0 15px; flex: 1; }
.card__meta {
    font-size: .81rem; color: var(--ink-3);
    display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 12px;
}

.post-header { max-width: var(--wrap-narrow); margin: 0 auto 28px; }
.post-header__meta {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    font-size: .89rem; color: var(--ink-3); margin-top: 16px;
}
.post-header__avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--line);
}
.post-hero {
    border-radius: var(--radius-lg); border: 1px solid var(--line);
    margin: 0 auto 32px; box-shadow: var(--shadow-md);
}

.pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.pagination a, .pagination span {
    padding: 8px 15px; border-radius: 9px; border: 1px solid var(--line);
    text-decoration: none; color: var(--ink-2); font-size: .91rem; background: var(--surface);
    transition: border-color .14s, color .14s, background .14s;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.pagination [aria-current="page"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------- forms -- */
.form { max-width: 620px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: .85rem; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="url"], .field input[type="number"], .field input[type="search"],
.field textarea, .field select {
    width: 100%; font: inherit; font-size: .96rem;
    padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    transition: border-color .14s, box-shadow .14s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: 0; border-color: var(--brand); box-shadow: var(--ring);
}
.field--honeypot { position: absolute; left: -9999px; }

/* -------------------------------------------------------------- ad slot -- */
.ad-slot { margin: 28px auto; text-align: center; max-width: 100%; overflow: hidden; }
.ad-slot__label {
    display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-3); margin-bottom: 7px;
}
.ad-slot--header, .ad-slot--footer { margin: 0; padding: 16px 20px; }

/* --------------------------------------------------------------- footer -- */
.site-footer {
    background: var(--paper-3); border-top: 1px solid var(--line);
    margin-top: 60px; padding: 48px 0 22px; font-size: .93rem;
}
.site-footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 32px;
}
@media (max-width: 800px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer__brand picture { display: block; line-height: 0; margin-bottom: 15px; }
.site-footer__brand img { height: 32px; width: auto; }
.site-footer__brand p { color: var(--ink-3); margin-bottom: .7em; }
.site-footer__privacy {
    font-size: .87rem; color: var(--ink-2);
    border-left: 2px solid var(--brand); padding-left: 11px;
}

.site-footer__col h2 {
    font-size: .77rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-3); margin-bottom: 13px; font-weight: 700;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: 9px; }
.site-footer__col a { color: var(--ink-2); text-decoration: none; }
.site-footer__col a:hover { color: var(--brand); }

.site-footer__bar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 14px; padding-top: 18px;
    border-top: 1px solid var(--line-strong); color: var(--ink-3); font-size: .86rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__social { list-style: none; display: flex; gap: 17px; margin: 0; padding: 0; }
.site-footer__social a { color: var(--ink-3); text-decoration: none; }
.site-footer__social a:hover { color: var(--brand); }

.site-footer__note, .site-footer__disclaimer { padding-top: 16px; }
.site-footer__disclaimer p { margin: 0; color: var(--ink-3); font-size: .81rem; line-height: 1.55; }

/* ----------------------------------------------------------- error page -- */
.error-page { text-align: center; padding: 76px 20px; }
.error-page__code {
    font-size: 5rem; font-weight: 800; line-height: 1; margin: 0 0 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------- no-js -- */
.needs-js { display: none; }
.js .needs-js { display: inline-flex; }
.js .no-js-note { display: none; }
.no-js-note {
    background: var(--medium-bg); border: 1px solid var(--medium);
    border-radius: var(--radius); padding: 15px 17px; margin-bottom: 18px; font-size: .93rem;
}

/* --------------------------------------------------------- theme toggle -- */
.theme-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    padding: 0; border-radius: 9px; cursor: pointer;
    background: none; border: 1px solid transparent; color: var(--ink-2);
    transition: background .15s, color .15s, border-color .15s;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--paper-2); color: var(--brand); border-color: var(--line); }

.theme-toggle svg { width: 19px; height: 19px; display: none; }
.theme-toggle[data-theme-mode="system"] .theme-toggle__system,
.theme-toggle[data-theme-mode="light"]  .theme-toggle__light,
.theme-toggle[data-theme-mode="dark"]   .theme-toggle__dark { display: block; }

/* Before the toggle script runs the button has no mode attribute, so show the
   system icon rather than an empty square. */
.theme-toggle:not([data-theme-mode]) .theme-toggle__system { display: block; }

.site-header__tools { display: flex; align-items: center; gap: 6px; }