/* seo.css - the static marketing pages (public/<slug>/index.html, /privacy/, 404.html;
   generated by tools/make_pages.py) and the crawlable content section under the start
   screen (#home in index.html). Both are built from the same .lp-* pieces so they look like
   one site. Every colour, font, radius and shadow is a tokens.css variable, so the brand
   applies here automatically; nothing is hard-coded.

   The landing pages load only ui-fonts.css, tokens.css and this file (plus theme-boot.js for
   the saved theme), never the app's JavaScript or its UI kit, so this file carries its own
   small reset and button styles under body.lp. */

/* ------------------------------------------------------------------ shared variables */

.lp, #home {
    /* links and focus rings use the ink (black / white in dark); safety orange is the action
       colour, as in the app: primary buttons (near-black text), the "Ready?" panel, kicker
       rules, bullets, step numbers, link underlines on hover and the drawings */
    --lp-accent: var(--ink);
    --lp-accent-hover: var(--ink-hover);
    --lp-accent-soft: var(--ink-soft);
    --lp-on-accent: var(--text-on-ink);
    --lp-orange: var(--accent);
    --lp-on-orange: var(--on-accent);
    /* things drawn on white paper must stay dark in the dark theme (see start.css) */
    --il-text: var(--text);
    --il-text-2: var(--text-3);
    --il-line: var(--line);
    --il-line-strong: var(--line-strong);
    --il-accent: var(--marker);
    --il-fold: color-mix(in oklab, var(--paper) 82%, var(--text-3));
}
:root[data-theme="dark"] .lp, :root[data-theme="dark"] #home {
    --il-text: var(--desk);
    --il-text-2: color-mix(in oklab, var(--desk) 55%, var(--paper));
    --il-line: color-mix(in oklab, var(--paper) 88%, var(--desk));
    --il-line-strong: color-mix(in oklab, var(--paper) 72%, var(--desk));
}

/* the mark: a rounded, tilted page in orange with its corner folded over in the text colour */
.lp-mark { flex: none; }
.lp-mark-page { fill: var(--lp-orange); }
.lp-mark-fold { fill: currentColor; }
.lp-wordmark-pdf { font-weight: 400; }

/* ------------------------------------------------------------------ landing page frame */

body.lp {
    margin: 0;
    min-height: 100vh;
    background-color: var(--desk);
    background-image: radial-gradient(circle, var(--desk-dot) 1.1px, transparent 1.6px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    color: var(--text);
    font: 400 16px/1.55 var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
/* the reset has zero specificity so single-class rules (.lp-lead, .lp-trust, ...) can set margins */
:where(.lp) :where(img, svg) { display: block; }
:where(.lp) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.lp a { color: var(--lp-accent); text-underline-offset: 3px; }
.lp a:hover { color: var(--lp-accent-hover); text-decoration-color: var(--accent-line); text-decoration-thickness: 2px; }
.lp :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; border-radius: 2px; }
.lp kbd, .lp code {
    padding: 1px 5px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    font: 500 0.85em var(--font-mono);
}
.lp ::selection { background: var(--marker-soft); }

.lp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 48px) 0;
}
.lp-brand, .lp a.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}
.lp a.lp-brand:hover { color: var(--text); }
.lp-wordmark {                           /* same as the app's wordmark: "Bullet" 800 + "PDF" 400 */
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.025em;
    white-space: nowrap;
}
.lp-nav {
    display: flex;
    align-items: center;
    gap: 6px 22px;
    font-size: 14.5px;
    font-weight: 500;
}
.lp-nav > a:not(.lp-btn) { color: var(--text-2); text-decoration: none; }
.lp-nav > a:not(.lp-btn):hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); }

.lp-main {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 32px;
}

/* ------------------------------------------------------------------ buttons */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lp-btn-lg { height: 48px; padding: 0 24px; font-size: 15.5px; }
/* (doubled class names outrank the generic ".lp a" link colour) */
.lp-btn.lp-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.lp-btn.lp-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.lp-btn.lp-btn-primary:active { background: var(--accent-press); }
.lp-btn.lp-btn-outline { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.lp-btn.lp-btn-outline:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text); }
.lp-btn:active { transform: translateY(0.5px); }

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

.lp-crumbs {
    padding: 22px 0 0;
    color: var(--text-3);
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
}
.lp-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.lp-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.lp-crumbs a { color: var(--text-3); text-decoration: none; }
.lp-crumbs a:hover { color: var(--text); }

.lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    padding: clamp(28px, 6vh, 72px) 0 clamp(40px, 8vh, 88px);
}
.lp-hero-copy { min-width: 0; max-width: 640px; }
/* kicker: an orange rule, then the label (orange text on dark, ink on light: as on the start screen) */
.lp-eyebrow {
    display: flex;
    align-items: flex-start;            /* the rule stays on the first line when the label wraps */
    gap: 12px;
    margin: 0 0 18px;
    color: var(--accent-ink);
    font: 500 11.5px/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lp-eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 3px;
    margin-top: calc(0.7em - 1.5px);
    border-radius: 2px;
    background: var(--lp-orange);
}
.lp h1 {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.lp-lead {
    max-width: 36em;
    margin: 22px 0 28px;
    color: var(--text-2);
    font-size: 17.5px;
    line-height: 1.55;
    text-wrap: pretty;
}
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 500;
}
.lp-trust li { display: inline-flex; align-items: center; gap: 9px; }
/* the brand bullet: a small rounded square tilted -12deg like the logo (as on the start screen) */
.lp-trust li::before, .lp-tools li a::before, #home .home-value h2::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--lp-orange);
    transform: rotate(-12deg);
}

/* the illustration: the brand's sheet of paper, tilted, in token colours */
.lp-illus {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 12px 0;
}
.lp-illus svg {
    width: min(100%, 360px);
    height: auto;
    overflow: visible;
    transform: rotate(-2deg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.16));
}
.il-paper { fill: var(--paper); }
.il-paper.is-accent { fill: var(--paper); stroke: var(--il-accent); stroke-width: 6; }
.il-fold { fill: var(--il-fold); }
.il-line { fill: var(--il-line-strong); }
.il-line.is-dim { fill: var(--il-line); }
.il-line.is-title { fill: var(--il-text-2); }
.il-line.is-ink { fill: var(--il-text); }
.il-edit-box, .il-textbox { fill: var(--select-soft); stroke: var(--select); stroke-width: 2; }
.il-textbox { stroke-dasharray: 6 5; }
.il-caret { fill: var(--il-text); }
.il-handles circle { fill: var(--paper); stroke: var(--select); stroke-width: 2.5; }
.il-field { fill: var(--field-tint); stroke: var(--field-line); stroke-width: 1.5; }
.il-check { fill: none; stroke: var(--il-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.il-check.is-big { stroke: var(--paper); stroke-width: 9; }
.il-x { fill: var(--il-text-2); font: 400 26px var(--font-ui); }
.il-rule { stroke: var(--il-line-strong); stroke-width: 2; }
.il-sig { fill: none; stroke: var(--il-accent); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.il-caption { fill: var(--il-text-2); font: 500 10px var(--font-mono); letter-spacing: 0.14em; }
.il-type { fill: var(--il-text); font: 600 22px var(--font-display); }
.il-type.is-small { font-size: 18px; }
.il-hl { fill: var(--marker); opacity: 0.75; }
.il-underline { stroke: var(--il-accent); stroke-width: 3; stroke-linecap: round; }
.il-pen { fill: none; stroke: var(--il-accent); stroke-width: 5; stroke-linecap: round; opacity: 0.85; }
.il-note { fill: var(--marker); stroke: var(--il-text-2); stroke-width: 1.5; }
.il-arrow { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.il-arrowhead { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-arrow.is-bold, .il-arrowhead.is-bold { stroke: var(--lp-orange); stroke-width: 6; }
.il-cut { stroke: var(--lp-orange); stroke-width: 3; stroke-dasharray: 10 8; stroke-linecap: round; }
.il-scissor { fill: none; stroke: var(--text-2); stroke-width: 3; }
.il-scissor-blade { stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.il-deleted { opacity: 0.55; }
.il-cross { stroke: var(--red); stroke-width: 7; stroke-linecap: round; }
.il-cross.is-thin { stroke-width: 6; }
.il-redact { fill: var(--il-text); }
.il-whiteout { fill: var(--paper); stroke: var(--il-line); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); }
.il-pen-body { fill: var(--il-accent); }
.il-pen-tip { fill: var(--il-text); }
.il-photo { fill: var(--surface-2); stroke: var(--il-line-strong); stroke-width: 1.5; }
.il-photo-hill { fill: var(--il-line-strong); }
.il-photo-sun { fill: var(--marker); }
.il-shield { fill: var(--il-accent); }
.il-cloud { fill: none; stroke: var(--il-text-2); stroke-width: 4; stroke-linejoin: round; }

/* ------------------------------------------------------------------ sections */

.lp-section { padding: clamp(28px, 5vh, 56px) 0; border-top: 1px solid var(--line); }
.lp-section > h2, .lp-privacy > h2, .lp-prose h2, #home .home-value h2 {
    margin: 0 0 22px;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
/* each section heading carries a short orange rule above it (the kicker) */
.lp-section:not(.lp-cta-band, .home-value) > h2::before, .lp-prose > h2::before {
    content: "";
    display: block;
    width: 28px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: var(--lp-orange);
}
:where(.lp, #home) h3 {
    color: var(--text);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}
.lp-section p, .lp-features p, .lp-steps p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* numbered steps */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.lp-steps li {
    position: relative;
    padding: 22px 22px 22px 66px;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    counter-increment: step;
}
.lp-steps li::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 22px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--lp-orange);
    transform: rotate(-12deg);          /* the logo's tilt */
}
.lp-steps li::after {
    content: counter(step);
    position: absolute;
    left: 22px;
    top: 22px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--lp-on-orange);
    font: 700 14px/1 var(--font-mono);
}
.lp-steps h3 { margin-bottom: 6px; }

/* feature cards */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    list-style: none;
}
.lp-features li {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
}
.lp-features h3 { margin-bottom: 6px; }

/* privacy callout */
.lp-privacy {
    margin: clamp(8px, 2vh, 24px) 0;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--lp-orange);
    border-radius: var(--radius-l);
    background: var(--surface);
}
.lp-privacy p { max-width: 70ch; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.lp-privacy p + p { margin-top: 12px; font-weight: 500; }

/* FAQ */
.lp-faq > * { max-width: 820px; }      /* (the section's top rule stays full width like the others) */
.lp-faq-item { padding: 18px 0; border-top: 1px solid var(--line); }
.lp-faq-item:first-of-type { border-top: 0; padding-top: 0; }
.lp-faq-item h3 { font-size: 17px; margin-bottom: 8px; }
.lp-faq-item p { max-width: 72ch; }

/* closing CTA: the page's one solid orange panel - the desk's dot grid printed on orange,
   near-black type on it (7:1) and a black button (white label) so the action still stands out */
.lp-cta-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(36px, 7vh, 64px) 24px;
    border-top: 0;
    border-radius: var(--radius-xl);
    background-color: var(--lp-orange);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--on-accent) 16%, transparent) 1.1px, transparent 1.6px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    color: var(--lp-on-orange);
    text-align: center;
}
.lp-cta-band + .lp-section { border-top: 0; }   /* the band is its own divider */
.lp-cta-band h2 { margin-bottom: 0; color: var(--lp-on-orange); font-size: clamp(30px, 3.4vw, 44px); }
.lp-section.lp-cta-band p { color: var(--lp-on-orange); font-size: 16px; font-weight: 500; }
.lp-cta-band .lp-btn { margin-top: 12px; }
.lp-cta-band .lp-btn.lp-btn-primary { background: var(--on-accent); color: var(--paper); box-shadow: var(--shadow-1); }
.lp-cta-band .lp-btn.lp-btn-primary:hover { background: color-mix(in srgb, var(--on-accent) 84%, var(--paper)); color: var(--paper); }
.lp-cta-band :focus-visible { outline-color: var(--on-accent); }

/* related tools */
.lp-related, .lp-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 0;
    list-style: none;
}
.lp-related a, .lp-tools a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lp-related a:hover, .lp-tools a:hover {
    border-color: var(--lp-orange);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
    color: var(--text);
}
.lp-tools li a::before { transition: transform var(--dur) var(--ease); }
.lp-tools li a:hover::before { transform: rotate(0deg) scale(1.2); }
.lp-related strong, .lp-tools strong { font-size: 15px; font-weight: 600; }
.lp-related span, .lp-tools span { color: var(--text-3); font-size: 13px; }

/* ------------------------------------------------------------------ prose (privacy policy) and 404 */

.lp-prose { max-width: 800px; padding-top: 0; }
.lp-prose > h1 { margin: 0 0 20px; }
.lp-prose > .lp-eyebrow { margin-top: 28px; }
.lp-prose h2 { margin-top: 40px; font-size: clamp(21px, 2.2vw, 26px); }
/* body copy only: the breadcrumb, eyebrow and lead keep their own sizes */
.lp-prose > p:not([class]), .lp-prose > ul > li { color: var(--text-2); font-size: 16px; line-height: 1.65; }
.lp-prose p + p { margin-top: 14px; }
.lp-prose > ul { padding-left: 1.25em; }
.lp-prose > ul > li { margin: 8px 0; }
.lp-prose > ul > li::marker { color: var(--marker); }
.lp-prose .lp-lead { max-width: none; margin-bottom: 8px; }

.lp-404 { max-width: 760px; margin: 0 auto; padding-top: clamp(40px, 10vh, 120px); text-align: center; }
.lp-404 .lp-lead { margin-left: auto; margin-right: auto; }
.lp-404 .lp-actions { justify-content: center; }
.lp-404 h2 { margin: 48px 0 16px; font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.lp-404 .lp-related { text-align: left; }

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

.lp-footer {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 36px clamp(16px, 4vw, 48px) 32px;
    /* a top rule as wide as the content (like the section rules), not the padded box */
    background: linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 2 * clamp(16px, 4vw, 48px)) 1px;
    color: var(--text-2);
    font-size: 14px;
}
.lp-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px 48px;
}
.lp-footer-brand p { max-width: 30em; margin-top: 12px; color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.lp-footer-brand .lp-wordmark { font-size: 19px; }
.lp-footer-links h2 {
    margin: 0 0 12px;
    color: var(--text-3);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lp-footer-links ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 20px;
    padding: 0;
    list-style: none;
}
.lp-footer-links[aria-label="About"] ul { grid-template-columns: 1fr; }
.lp-footer-links a { color: var(--text-2); text-decoration: none; }
.lp-footer-links a:hover { color: var(--text); text-decoration: underline; }
.lp-copyright {
    margin: 32px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font: 11.5px/1.5 var(--font-mono);
    letter-spacing: 0.02em;
}
/* build revision at the very bottom of the page (filled by js/build-label.js) */
.lp-build {
    margin: 6px 0 0;
    color: var(--text-3);
    font: 10.5px/1.5 var(--font-mono);
    letter-spacing: 0.02em;
    opacity: 0.8;
}
.lp-build:empty { display: none; }

/* ------------------------------------------------------------------ the home page content (#home in index.html) */

/* shell.css hides everything in #app except #start on the start screen; the content section
   is part of the start screen and scrolls with it. It is hidden while a document is open. */
body[data-view="start"] #app > #home.home { display: block !important; }
body[data-view="editor"] #home.home { display: none !important; }

#home {
    background-color: var(--desk);
    background-image: radial-gradient(circle, var(--desk-dot) 1.1px, transparent 1.6px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    color: var(--text);
    font: 400 16px/1.55 var(--font-ui);
}
#home *, #home *::before, #home *::after { box-sizing: border-box; }
/* zero specificity, so the .lp-* rules below (shared with the landing pages) set the margins */
:where(#home) :where(h2, h3, p, ul, ol) { margin: 0; }
#home .home-inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}
#home .lp-section:first-child { border-top: 0; }
/* the value statement is the home page's orange panel (like the landing pages' "Ready?"):
   the desk's dot grid printed on orange, near-black type (7:1) and a near-black bullet */
#home .home-value {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px 64px;
    align-items: start;
    margin-top: clamp(8px, 2vh, 24px);
    padding: clamp(28px, 4.5vw, 56px);
    border-radius: var(--radius-xl);
    background-color: var(--lp-orange);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--on-accent) 16%, transparent) 1.1px, transparent 1.6px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    color: var(--lp-on-orange);
}
#home .home-value + .lp-section { border-top: 0; }
#home .home-value h2 { display: flex; align-items: flex-start; gap: 14px; margin: 0; color: var(--lp-on-orange); }
#home .home-value h2::before { margin-top: 0.42em; background: var(--lp-on-orange); }
#home .home-value p { max-width: 60ch; color: var(--lp-on-orange); }
#home .home-value p + p { margin-top: 12px; }
#home .lp-tools a strong { color: var(--text); }
#home .lp-tools li a { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
#home .lp-tools li a::before { margin-top: 0; align-self: center; }
#home .lp-tools li a span { flex-basis: 100%; padding-left: 21px; }
#home .lp-footer { padding-top: 32px; }

/* "?mode=" deep links from the tool pages: start.js shows a one-line prompt under the headline */
#start .start-hint {
    display: inline-block;
    margin: -14px 0 26px;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    background: var(--marker-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 899.98px) {
    .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .lp-illus svg { width: min(100%, 300px); }
    .lp-steps, .lp-features { grid-template-columns: minmax(0, 1fr); }
    .lp-steps { gap: 14px; }
    .lp-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    #home .home-value { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
    body.lp { font-size: 15.5px; }
    .lp-header { padding-top: 14px; }
    .lp-wordmark { font-size: 20px; }
    .lp-nav { gap: 6px 14px; font-size: 14px; }
    .lp-nav > a:first-child { display: none; }
    .lp-nav .lp-btn { height: 36px; padding: 0 12px; }
    .lp h1 { font-size: clamp(32px, 9.6vw, 42px); }
    .lp-lead { margin: 16px 0 22px; font-size: 16px; }
    .lp-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .lp-illus svg { width: min(100%, 260px); }
    .lp-privacy { padding: 20px 20px 20px 22px; }
    .lp-related, .lp-tools { grid-template-columns: minmax(0, 1fr); }
    .lp-footer-links ul { grid-template-columns: minmax(0, 1fr); }
    .lp-404 .lp-actions { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-related a, .lp-tools a { transition: none; }
}

/* Homepage editorial layout. Scoped so tool pages and editor keep their own layout. */
#home { --home-paper: #F6F2EA; background: var(--home-paper); }
:root[data-theme="dark"] #home { --home-paper: var(--surface); }
#home .home-inner { max-width: 1280px; padding: 0 clamp(22px, 4.5vw, 64px); }
#home .lp-section { padding: 82px 0; border-top: 1px solid var(--line-strong); scroll-margin-top: 28px; }
#home .home-trust { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 30px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
#home .home-trust > span { font-size: 16px; line-height: 1.5; color: var(--text-3); }
#home .home-trust > span strong { color: var(--text); font-weight: 500; }
#home .home-trust p { border-left: 1px solid var(--line-strong); padding-left: 28px; }
#home .home-trust p strong { display: block; font: 600 20px/1.4 var(--font-display); letter-spacing: -.025em; }
#home .home-trust p span { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 3px; }
#home .home-tool-section { border-top: 0; }
#home .home-section-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 32px; }
#home .home-eyebrow { color: var(--text-3); font: 500 10px/1.5 var(--font-mono); letter-spacing: .14em; margin-bottom: 16px; }
#home .home-inner h2 { font: 600 clamp(30px, 3.4vw, 44px)/1.12 var(--font-display); letter-spacing: -.045em; margin: 0; }
#home .home-inner h2::before { content: none; }
#home .home-section-head > p { color: var(--text-3); font-size: 14px; line-height: 1.6; }
#home .home-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; list-style: none; }
#home .home-tools a { display: flex; flex-direction: column; height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--text); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease); }
#home .home-tools a:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 12px 24px -16px var(--text-3); }
#home .home-tool-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 24px; }
#home .home-tools li:first-child .home-tool-icon { background: var(--accent); color: var(--on-accent); }
#home .home-tools h3 { font: 600 23px/1.2 var(--font-display); letter-spacing: -.03em; margin-bottom: 12px; }
#home .home-tools p { color: var(--text-3); font-size: 14px; line-height: 1.65; margin-bottom: 26px; }
#home .home-tool-action { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; }
#home .home-tool-action > span { color: var(--text); font-size: 18px; line-height: 1; transition: transform 180ms var(--ease); }
#home .home-tools a:hover .home-tool-action > span { transform: translate(2px,-2px); }
#home .home-more-tools { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; padding-top: 25px; }
#home .home-more-tools > span { font: 500 9px/1.5 var(--font-mono); letter-spacing: .1em; color: var(--text-3); }
#home .home-more-tools a { font-size: 12.5px; text-decoration: none; }
#home .home-more-tools a:hover { text-decoration: underline; }
#home .home-private { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 36px; padding: 60px; background: var(--accent); color: var(--on-accent); border-radius: 14px; overflow: hidden; }
#home .home-private .home-eyebrow { color: var(--on-accent); opacity: .72; }
#home .home-private h2 { color: var(--on-accent); font-size: clamp(40px, 4.5vw, 58px); }
#home .home-private-copy > p:not(.home-eyebrow) { font-size: 15px; line-height: 1.7; max-width: 400px; margin-top: 22px; }
#home .home-private a { display: inline-flex; align-items: center; gap: 30px; color: var(--on-accent); font-size: 13px; font-weight: 600; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; margin-top: 26px; }
#home .home-private-art { position: relative; display: grid; place-items: center; min-height: 300px; }
#home .home-private-sheet { display: flex; flex-direction: column; align-items: center; width: 220px; height: 284px; padding: 26px; background: var(--paper); color: #242320; border-radius: 3px; transform: rotate(-8deg); box-shadow: 10px 12px 0 #ffffff38, 0 15px 30px #48270f25; }
#home .home-private-sheet > span { align-self: flex-start; font: 500 8px/1.5 var(--font-mono); letter-spacing: .08em; margin-bottom: 20px; }
#home .home-private-sheet i { height: 5px; width: 100%; margin: 4px 0; background: #E5E4E0; }
#home .home-private-sheet i:nth-of-type(3) { width: 68%; align-self: flex-start; }
#home .home-private-sheet svg { margin: 14px 0 8px; }
#home .home-private-sheet strong { font: 500 13px var(--font-display); }
#home .home-private-stamp { position: absolute; right: -8px; bottom: 15px; display: grid; place-items: center; width: 102px; height: 102px; border: 1.5px solid var(--on-accent); border-radius: 50%; background: var(--accent); transform: rotate(13deg); font: 500 11px/1.55 var(--font-mono); text-align: center; }
#home .home-how { border-top: 0; }
#home .home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 8px 0 0; gap: 42px; }
#home .home-steps li { border-top: 1px solid var(--line-strong); padding-top: 20px; }
#home .home-steps li > span { display: block; font: 400 13px var(--font-mono); color: var(--text-3); margin-bottom: 26px; }
#home .home-steps h3 { font: 600 27px/1.2 var(--font-display); letter-spacing: -.025em; margin-bottom: 12px; }
#home .home-steps p { color: var(--text-3); font-size: 14px; line-height: 1.65; max-width: 29ch; }
#home .lp-faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 65px; }
#home .home-faq-heading > p:last-child { color: var(--text-3); margin-top: 22px; font-size: 14px; }
#home .lp-faq-item { padding: 0; border-top: 1px solid var(--line-strong); }
#home .lp-faq-item:first-child { border-top: 0; }
#home .lp-faq-item summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; list-style: none; cursor: pointer; padding: 20px 0; font-size: 15px; font-weight: 500; }
#home .lp-faq-item summary::-webkit-details-marker { display: none; }
#home .lp-faq-item summary::after { content: '+'; flex: none; color: var(--text-3); font: 400 23px/1 var(--font-ui); }
#home .lp-faq-item[open] summary::after { content: '−'; }
#home .lp-faq-item summary:hover { color: var(--text-3); }
#home .lp-faq-item p { font-size: 14px; line-height: 1.65; color: var(--text-3); padding: 0 30px 22px 0; }
#home .lp-footer { max-width: 1280px; padding: 48px clamp(22px, 4.5vw, 64px) 24px; }
#home .lp-footer-brand .lp-wordmark { font-size: 24px; }
#home .lp-footer-links a { font-size: 12.5px; }
#home .lp-copyright { font-size: 10px; }
@media (max-width: 1000px) {
    #home .home-trust { gap: 18px; }
    #home .home-trust p { padding-left: 18px; }
    #home .home-trust p strong { font-size: 17px; }
    #home .home-tools a { padding: 22px; }
    #home .home-private { padding: 42px; gap: 20px; }
    #home .lp-faq { gap: 36px; }
}
@media (max-width: 760px) {
    #home .lp-section { padding: 56px 0; }
    #home .home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding: 30px 0; }
    #home .home-trust p { border: 0; padding-left: 0; }
    #home .home-section-head { align-items: start; flex-direction: column; gap: 16px; }
    #home .home-section-head > p br { display: none; }
    #home .home-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #home .home-private { padding: 36px; grid-template-columns: 1fr; }
    #home .home-private-art { margin-top: 12px; }
    #home .home-private-stamp { right: 8%; }
    #home .home-steps { gap: 22px; }
    #home .home-steps h3 { font-size: 23px; }
    #home .lp-faq { grid-template-columns: 1fr; gap: 24px; }
    #home .home-faq-heading > p:last-child { display: none; }
}
@media (max-width: 480px) {
    #home .home-tools { grid-template-columns: 1fr; gap: 12px; }
    #home .home-tool-icon { margin-bottom: 18px; }
    #home .home-tools p { margin-bottom: 20px; }
    #home .home-steps { grid-template-columns: 1fr; gap: 28px; }
    #home .home-steps li > span { margin-bottom: 12px; }
    #home .home-steps p { max-width: none; }
    #home .home-private { padding: 30px 24px; }
    #home .home-private-stamp { right: -8px; }
    #home .home-private h2 { font-size: 38px; }
    #home .home-more-tools { gap: 14px 20px; }
    #home .home-more-tools > span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    #home .home-tools a, #home .home-tool-action > span { transition: none; }
    #home .home-tools a:hover { transform: none; }
}