:root {
    --kr-paper: var(--motif-color-canvas-900);
    --kr-paper-raised: var(--motif-background-surface-raised);
    --kr-graphite: var(--motif-color-text-primary);
    --kr-graphite-soft: var(--motif-color-text-muted);
    --kr-rule: var(--motif-border-default);
    --kr-yellow: var(--motif-color-accent-primary);
    --kr-yellow-dark: var(--motif-color-accent-amber);
    --kr-yellow-soft: color-mix(in srgb, var(--kr-yellow) 15%, var(--kr-paper));
    --kr-cedar: var(--motif-color-accent-tertiary);
    --kr-red: var(--motif-color-error);
    --kr-danger: var(--motif-color-accent-danger);
    --kr-forest: var(--motif-color-success);
    --kr-focus: var(--motif-color-focus);
    --kr-shadow: var(--motif-shadow-card);
    --kr-radius: var(--layout-soft-radius);
    --kr-paper-fiber: color-mix(in srgb, var(--kr-graphite) 5%, transparent);
    --kr-paper-wash: color-mix(in srgb, var(--kr-cedar) 6%, transparent);
    --kr-paper-light: color-mix(in srgb, var(--kr-paper-raised) 42%, transparent);
    color-scheme: light dark;
}

@media (forced-colors: active) {
    :root {
        --kr-paper: Canvas;
        --kr-paper-raised: Canvas;
        --kr-graphite: CanvasText;
        --kr-graphite-soft: CanvasText;
        --kr-rule: ButtonBorder;
        --kr-yellow: Highlight;
        --kr-yellow-dark: LinkText;
        --kr-cedar: ButtonBorder;
        --kr-red: LinkText;
        --kr-danger: LinkText;
        --kr-forest: LinkText;
        --kr-focus: Highlight;
        --kr-shadow: none;
        --kr-paper-fiber: transparent;
        --kr-paper-wash: transparent;
        --kr-paper-light: transparent;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--kr-paper); color: var(--kr-graphite); }
body, button, input, textarea, select { font-family: var(--motif-font-ui); }
img { max-width: 100%; }
h1, h2 { font-family: var(--motif-font-h1); font-weight: 600; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--kr-focus); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; inset: .75rem auto auto .75rem; transform: translateY(-200%); padding: .75rem 1rem; border: 2px solid var(--kr-graphite); background: var(--kr-paper-raised); }
.skip-link:focus { transform: none; }
.brand { display: inline-flex; width: 9.75rem; min-height: 44px; align-items: center; }
.brand picture, .brand img { display: block; width: 100%; height: auto; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.1rem; border: 1px solid transparent; border-radius: 999px; font-weight: 650; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--kr-graphite); color: var(--kr-paper-raised); }
.button-secondary { border-color: var(--kr-graphite); background: transparent; }
.button-quiet { border-color: var(--kr-rule); background: var(--kr-paper-raised); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.full { width: 100%; }
.eyebrow { margin: 0 0 .55rem; color: var(--kr-red); font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.public-site {
    min-height: 100vh;
    overflow-x: clip;
    background-color: var(--kr-paper);
    background-image:
        radial-gradient(circle at 18% 12%, var(--kr-paper-light), transparent 34rem),
        radial-gradient(ellipse at 76% 62%, var(--kr-paper-wash), transparent 45rem),
        radial-gradient(circle at 1px 1px, var(--kr-paper-fiber) 0 .55px, transparent .7px),
        radial-gradient(circle at 1px 1px, var(--kr-paper-wash) 0 .45px, transparent .65px);
    background-position: center, center, 0 0, 3px 5px;
    background-size: auto, auto, 5px 7px, 11px 13px;
}
.public-fallback { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: clamp(5rem, 12vw, 10rem) 0; }
.public-fallback h1 { max-width: 18ch; margin: 0; font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: .98; }
.public-fallback p { max-width: 60ch; color: var(--kr-graphite-soft); font-size: 1.1rem; line-height: 1.6; }
.public-header, .public-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1320px; margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 4rem); }
.public-header nav, .public-footer nav { display: flex; gap: 1.5rem; }
.public-header nav a, .public-footer nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.public-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); max-width: 1320px; min-height: 70vh; margin: 0 auto; padding: clamp(4rem, 10vw, 9rem) clamp(1rem, 4vw, 4rem); }
.public-hero h1 { max-width: 850px; margin: 0; font-size: clamp(2.6rem, 5.2vw, 5.4rem); font-weight: 620; letter-spacing: -.045em; line-height: .98; }
.public-hero .lede { max-width: 700px; margin: 2rem 0; color: var(--kr-graphite-soft); font-family: "Space Grotesk", ui-monospace, monospace; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.55; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-underline-offset: .3rem; }
.manuscript-still { position: relative; padding: clamp(1.5rem, 4vw, 3.5rem); }
.manuscript-still::before {
    content: "";
    position: absolute;
    inset: 4% 10% 3% 5%;
    border-radius: 48% 52% 46% 54%;
    background: radial-gradient(
        ellipse at 45% 40%,
        rgb(244 197 75 / .24),
        rgb(201 140 82 / .08) 64%,
        transparent 72%);
    transform: rotate(-8deg);
}
.manuscript-still article {
    position: relative;
    min-height: 420px;
    padding: clamp(2rem, 5vw, 4.5rem);
    background-color: var(--kr-paper-raised);
    background-image:
        radial-gradient(circle at 1px 1px, var(--kr-paper-fiber) 0 .5px, transparent .65px),
        linear-gradient(98deg, transparent 0 76%, var(--kr-paper-wash));
    background-size: 6px 8px, auto;
    border: 1px solid var(--kr-rule);
    box-shadow: var(--kr-shadow);
    transform: rotate(1.5deg);
}
.manuscript-still article::after { content: ""; position: absolute; inset: 0 1.4rem; background: repeating-linear-gradient(transparent 0 35px, rgb(113 106 92 / .1) 35px 36px); pointer-events: none; }
.manuscript-still article > * { position: relative; z-index: 1; }
.manuscript-still h2 { max-width: 10ch; font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1; }
.manuscript-still p { font-family: "Space Grotesk", ui-monospace, monospace; line-height: 1.65; }
.manuscript-still footer { position: absolute; inset: auto 2rem 2rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--kr-graphite-soft); font-size: .75rem; }
.hero-pencil {
    position: absolute;
    z-index: 3;
    left: -12%;
    bottom: -10%;
    width: 82%;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
    transform: rotate(-11deg);
    filter: drop-shadow(0 12px 11px rgb(46 35 20 / .14));
}
.promise-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 1px solid var(--kr-rule);
    background: color-mix(in srgb, var(--kr-paper-raised) 24%, transparent);
}
.promise-strip article { padding: 2rem clamp(1rem, 4vw, 4rem); }
.promise-strip article + article { border-left: 1px solid var(--kr-rule); }
.promise-strip strong, .promise-strip span { display: block; }
.promise-strip span { margin-top: .35rem; color: var(--kr-graphite-soft); }
.public-art-field {
    position: relative;
    display: grid;
    width: min(100%, 1200px);
    min-height: min(92vw, 840px);
    place-items: center;
    margin: clamp(5rem, 10vw, 9rem) auto 0;
    isolation: isolate;
}
.editorial-marginalia {
    position: absolute;
    z-index: 0;
    width: min(118vw, 1200px);
    max-width: none;
    height: auto;
    opacity: .42;
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 96%);
    mask-image: radial-gradient(ellipse at center, #000 48%, transparent 96%);
}
.public-art { position: relative; z-index: 1; width: min(86vw, 760px); margin: 0; }
.public-art picture, .public-art img { display: block; width: 100%; }
.public-art img {
    height: auto;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 96%);
    mask-image: radial-gradient(ellipse at center, #000 48%, transparent 96%);
}
.public-detail {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(5rem, 12vw, 10rem) clamp(1rem, 4vw, 4rem);
    isolation: isolate;
}
.public-detail > :not(.pencil-shavings) { position: relative; z-index: 1; }
.pencil-shavings {
    position: absolute;
    z-index: 0;
    top: 1.5rem;
    right: -5rem;
    width: min(43vw, 560px);
    max-width: none;
    height: auto;
    opacity: .32;
    pointer-events: none;
    user-select: none;
    transform: rotate(-5deg);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 86%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 86%);
}
.public-detail > h2 { max-width: 920px; margin: 0 0 4rem; font-size: clamp(2rem, 3.8vw, 4rem); line-height: 1.05; letter-spacing: -.035em; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kr-rule); border: 1px solid var(--kr-rule); }
.detail-grid article {
    min-height: 230px;
    padding: 2rem;
    background-color: var(--kr-paper-raised);
    background-image: radial-gradient(circle at 1px 1px, var(--kr-paper-fiber) 0 .45px, transparent .6px);
    background-size: 7px 9px;
}
.detail-grid h3 { font-size: 1.35rem; }
.detail-grid p { color: var(--kr-graphite-soft); line-height: 1.6; }
.public-footer { border-top: 1px solid var(--kr-rule); }
.public-footer p { max-width: 580px; color: var(--kr-graphite-soft); font-size: .85rem; }
.center-state { max-width: 650px; min-height: 100vh; margin: 0 auto; padding: 15vh 1.5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.4rem; }
.center-state h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; }
.center-state p:not(.eyebrow) { color: var(--kr-graphite-soft); font-family: "Space Grotesk", ui-monospace, monospace; font-size: 1.1rem; line-height: 1.6; }
.legal-page { min-height: 100vh; }
.legal-main { width: min(100% - 2rem, 78rem); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) 0; }
.legal-hero { max-width: 52rem; margin-bottom: 3rem; }
.legal-hero h1 { margin: .2rem 0 1rem; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.legal-hero p { color: var(--kr-graphite-soft); font-size: 1.05rem; line-height: 1.6; }
.legal-notice { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--kr-rule); border-radius: var(--kr-radius); background: var(--kr-paper-raised); box-shadow: var(--kr-shadow); }
.legal-notice h2, .legal-notice h3 { margin-top: 2.2rem; }
.legal-notice p, .legal-notice li { line-height: 1.7; }
.markdown-preview pre, .markdown-raw-html { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
.markdown-preview blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 4px solid var(--kr-yellow-dark); color: var(--kr-graphite-soft); }
.markdown-table-scroll { max-width: 100%; overflow-x: auto; }
.markdown-table-scroll table { width: 100%; border-collapse: collapse; }
.markdown-table-scroll th, .markdown-table-scroll td { padding: .6rem; border: 1px solid var(--kr-rule); }
.sa-auth-page.sa-theme-krajono {
    --sa-bg: #2b2924;
    --sa-bg-strong: #151512;
    --sa-panel: var(--kr-paper-raised);
    --sa-panel-border: var(--kr-rule);
    --sa-text: var(--kr-graphite);
    --sa-muted: var(--kr-graphite-soft);
    --sa-accent: var(--kr-yellow);
    --sa-accent-strong: var(--kr-yellow-dark);
    --sa-accent-text: #242522;
    --sa-ring: rgb(30 99 198 / .36);
    --sa-shadow: var(--kr-shadow);
    --sa-font: Jost, system-ui, sans-serif;
}
@media (forced-colors: active) {
    .sa-auth-page.sa-theme-krajono { --sa-accent-text: HighlightText; --sa-ring: Highlight; }
    .hero-pencil, .editorial-marginalia, .pencil-shavings { display: none; }
}
@media (prefers-color-scheme: dark) {
    .editorial-marginalia, .public-art img { mix-blend-mode: normal; opacity: .58; }
    .pencil-shavings { opacity: .2; }
}

body[data-krajono-surface="public"] {
    --kr-paper: var(--motif-color-light-canvas);
    --kr-paper-raised: var(--motif-color-light-paper);
    --kr-graphite: var(--motif-color-text-on-light-strong);
    --kr-graphite-soft: var(--motif-color-text-on-light-medium);
    color-scheme: light;
}
body[data-krajono-surface="public"] .editorial-marginalia { mix-blend-mode: multiply; opacity: .42; }
body[data-krajono-surface="public"] .public-art img { mix-blend-mode: multiply; opacity: 1; }
body[data-krajono-surface="public"] .pencil-shavings { opacity: .32; }
@media (max-width: 850px) {
    .public-header nav { display: none; }
    .public-hero { grid-template-columns: 1fr; padding-top: 4rem; }
    .hero-pencil { left: -15%; bottom: -8%; width: 94%; }
    .promise-strip, .detail-grid { grid-template-columns: 1fr; }
    .promise-strip article + article { border-left: 0; border-top: 1px solid var(--kr-rule); }
    .public-art-field { min-height: 112vw; overflow: hidden; }
    .editorial-marginalia { width: 165%; opacity: .34; }
    .pencil-shavings { right: -28%; width: 88%; opacity: .2; }
    .public-footer { align-items: flex-start; flex-direction: column; }
}

.public-menu { display: none; position: relative; }
.public-menu summary { min-height: 44px; padding: .65rem .75rem; cursor: pointer; }
.public-menu[open] > nav { position: absolute; z-index: 30; right: 0; top: 100%; display: grid; gap: .35rem; min-width: 12rem; padding: .75rem; border: 1px solid var(--kr-rule); border-radius: var(--kr-radius); background: var(--kr-paper-raised); box-shadow: var(--kr-shadow); }
.public-menu nav a { display: block; padding: .6rem .75rem; }
.public-header a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.beta-note { margin-top: 1rem; color: var(--kr-graphite-soft); font-size: .85rem; }
.public-detail .detail-grid { row-gap: 2rem; }
.public-detail .detail-grid h3 { margin-bottom: .75rem; }
.public-detail .detail-grid p { line-height: 1.7; }
.pricing-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-options article { padding: 1.5rem; border: 1px solid var(--kr-rule); border-radius: var(--kr-radius); background: var(--kr-paper-raised); }
.product-boundary { padding: 1rem 1.25rem; margin-top: 2rem; border-left: 3px solid var(--kr-cedar); line-height: 1.7; }
.support-guide details { max-width: 52rem; margin-block: .5rem; border-bottom: 1px solid var(--kr-rule); }
.support-guide summary { min-height: 48px; padding: 1rem 0; font-weight: 600; cursor: pointer; }
.support-guide details p { margin: 0; padding: 0 0 1.25rem; line-height: 1.7; }
.public-next-step p { max-width: 45rem; line-height: 1.7; }
@media (max-width: 850px) {
    .public-menu { display: block; margin-left: auto; }
    .public-header { gap: .35rem; }
    .public-header .brand { width: 8rem; }
    .public-header > .button { font-size: .8rem; padding-inline: .7rem; }
    .pricing-options { grid-template-columns: 1fr; }
}