@font-face {
    font-family: "Bricolage Grotesque";
    src: url("src/fonts/BricolageGrotesque.ttf");
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --bg: #08200f;
    --bg-mid: #0d3d20;
    --bg-panel: #123821;
    --canopy-bright: #3fae5c;
    --canopy-mid: #2d8248;
    --canopy-faint: #1c5c34;
    --text: #eef3ea;
    --text-muted: rgba(238, 243, 234, 0.62);
    --panel: #123821;
    --muted: rgba(238, 243, 234, 0.62);
    --amber: #c9922f;
    --amber-dim: rgba(201, 146, 47, 0.35);
    --tigerseye-dark: #3d2411;
    --tigerseye-mid: #8a5a1f;
    --tigerseye-light: #e8b45c;
    --wood: #c9a876;
    --wood-panel: #3a2a1a;
    /* Clears 4.5:1 on every surface it lands on, including the lightest
       point of the background gradient. Delete should read as delete. */
    --danger: #ff7a70;
    --line: rgba(201, 168, 118, 0.20);
    --line-soft: rgba(201, 168, 118, 0.10);
    --line-strong: rgba(201, 168, 118, 0.38);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --radius: 14px;
    --radius-sm: 10px;
    --gutter: clamp(16px, 3vw, 32px);
    color-scheme: dark;
    --sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* One face across the whole product. --mono is kept as a role, not a
       second family: numbers line up via tabular figures instead. */
    --mono: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* The one place a real monospace is not optional: a keycap has to tell O
       from 0 and l from 1, because the whole point of it is which key to press.
       In the display face those pairs are the same shape. */
    --keycap: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; height: 100%; }
html, body { margin: 0; }

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg-mid) 0%, var(--bg) 65%);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body > nav,
body > header,
body > main,
body > section,
body > div,
body > footer { width: 100%; }

.siteFooter { margin-top: auto; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
a.logo, a.logo:hover, .logo .wordmark-text { text-decoration: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

.siteNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: clamp(14px, 1.6vw, 24px) var(--gutter);
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.logo {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.9rem);
    flex-shrink: 0;
    letter-spacing: 0.2px;
    color: var(--text);
}

.wordmark-text {
    background: linear-gradient(120deg, var(--tigerseye-dark) 0%, var(--tigerseye-mid) 30%, var(--tigerseye-light) 48%, var(--tigerseye-mid) 62%, var(--tigerseye-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stumpMark {
    width: 0.72em;
    height: 0.72em;
    display: inline-block;
    position: relative;
    top: 0.09em;
    margin: 0 0.01em;
    vertical-align: baseline;
}
.stumpMark path {
    fill: none;
    stroke: url(#tigerseyeGradient);
   
}

.siteNav .navRight { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex-wrap: wrap; }
.navLink {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 6px 2px;
    transition: color 0.18s;
}
a.navLink:hover { color: var(--text); text-decoration: none; }
a.navLink.active { color: var(--tigerseye-light); }

.tierPill {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* The studio's square brackets, as the site's button. Faint on hover,
   solid on the one that is current or open. Square corners: a bracket with
   rounded ends is not a bracket. */
.btn,
.navUser,
.navMenuItem,
.btnDanger,
.btnQuiet {
    --mark: transparent;
    border-radius: 3px;
    background-image:
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark));
    background-size:
        2px 100%, 8px 2px, 8px 2px,
        2px 100%, 8px 2px, 8px 2px;
    background-position:
        left top, left top, left bottom,
        right top, right top, right bottom;
    background-repeat: no-repeat;
}
.btn:hover,
.navUser:hover,
a.navMenuItem:hover,
.btnDanger:hover,
a.btnQuiet:hover { --mark: color-mix(in srgb, var(--text) 42%, transparent); }
.btn.active,
.navUser.isOpen,
.navUser.isHere,
.navMenuItem.isActive { --mark: var(--tigerseye-light); }

/* Your name, and the menu under it. The brackets say it opens something;
   gold says it is open. */
.navDrop { position: relative; }
.navUser {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 6px 14px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    transition: color 0.18s;
}
.navUser.isOpen,
.navUser.isHere { color: var(--tigerseye-light); }
.navMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: max-content;
    min-width: 12rem;
    max-width: 16rem;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-card, var(--bg));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    z-index: 50;
}
.navMenu[hidden] { display: none; }
.navMenuItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    color: var(--text-muted);
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
a.navMenuItem:hover { color: var(--text); text-decoration: none; }
.navMenuItem.isActive { color: var(--tigerseye-light); }
.navMenuItem.isDanger { color: #e07a7a; }
a.navMenuItem.isDanger:hover { color: #f09090; --mark: rgba(224, 122, 122, 0.55); }
.navMenuTheme .themeSwitch { margin-top: 0; }
.navMenuTheme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 12px;
    margin: 4px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.88rem;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--line);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    font-family: var(--sans);
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--tigerseye-light);
    color: #2a1806;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 18px rgba(0, 0, 0, 0.28);
}
.btn-primary:hover { background: #f0c878; }
.btn-ghost { color: var(--text); }
.btn-ghost:hover { border-color: var(--amber-dim); }

.heroWrap {
    position: relative;
    overflow: hidden;
}
.heroWrap .heroBg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.heroWrap .heroContent {
    position: relative;
    z-index: 2;
}

.hero {
    padding: 96px 0 64px;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 20px;
}

.hero h1 span {
    background: linear-gradient(120deg, var(--tigerseye-dark) 0%, var(--tigerseye-mid) 30%, var(--tigerseye-light) 48%, var(--tigerseye-mid) 62%, var(--tigerseye-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p.sub {
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 1.1rem;
    color: var(--text-muted);
}

.heroActions { display: flex; gap: 16px; justify-content: center; margin-bottom: 8px; }

.principle {
    max-width: 720px;
    margin: 56px auto 0;
    padding: 24px 28px;
    background: rgba(18, 56, 33, 0.6);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--text-muted);
    backdrop-filter: blur(2px);
}
.principle b { color: var(--text); font-weight: 600; }

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

.sectionLabel {
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 12px;
}

h2.sectionTitle {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 40px;
}

.tierGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.tierCard {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    position: relative;
}
.tierCard.featured { border-color: var(--amber-dim); }
.tierCard .tierName { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.tierCard .tierPrice {
    font-family: var(--sans);
    background: linear-gradient(120deg, var(--tigerseye-dark) 0%, var(--tigerseye-mid) 30%, var(--tigerseye-light) 48%, var(--tigerseye-mid) 62%, var(--tigerseye-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.4rem;
    margin-bottom: 4px;
}
.tierCard .tierPrice span { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; -webkit-text-fill-color: var(--text-muted); }
.tierCard .tierDesc { font-size: 0.85rem; color: var(--text-muted); margin: 12px 0 0; }

footer {
    border-top: 1px solid var(--line);
    padding: 32px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
footer a { color: var(--text-muted); }
footer a:hover { color: var(--amber); }

@media (max-width: 640px) {
    nav { padding: 20px; }
    .hero { padding: 64px 0 48px; }
    section.section { padding: 48px 0; }
}

.siteNav .navRight {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 18px);
    flex-wrap: wrap;
}
.siteNav .navLink.active { color: var(--tigerseye-light); }

[class*="Row"] strong,
.tierPrice,
input[type="number"],
.numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.siteFooter {
    width: 100%;
    max-width: 1080px;
    margin: 64px auto 0;
    padding: 22px var(--gutter) 30px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
}
.footerLegal {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}


/* Light. Same token names, different values -- nothing downstream knows a
   theme exists. The tigerseye ramp is brand rather than surface, so it keeps
   its darker stops, which read on both grounds. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f1f5ee;
    --bg-mid: #dfeade;
    --bg-panel: #ffffff;
    --canopy-bright: #2d8248;
    --canopy-mid: #1c5c34;
    --canopy-faint: #14522d;
    --text: #15251b;
    --text-muted: rgba(21, 37, 27, 0.64);
    --panel: #ffffff;
    --muted: rgba(21, 37, 27, 0.64);
    --amber: #8a5a1f;
    --amber-dim: rgba(138, 90, 31, 0.35);
    --wood: #6b5326;
    --wood-panel: #efe6d6;
    --danger: #b02015;
    --line: rgba(21, 37, 27, 0.18);
    --line-soft: rgba(21, 37, 27, 0.09);
    --line-strong: rgba(21, 37, 27, 0.36);
    --shadow: 0 18px 50px rgba(21, 37, 27, 0.14);
}

.srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.themeSwitch {
    display: inline-flex;
    gap: 4px;
    margin-top: 12px;
    padding: 3px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
}
/* Signed out: the switch floats bottom right. */
.themeSwitch--floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin-top: 0;
    padding: 4px;
    background: var(--bg-card, var(--bg));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 60;
}
.themeSwitch-opt {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.themeSwitch-opt svg { width: 14px; height: 14px; }
.themeSwitch-opt:hover { color: var(--text); }
.themeSwitch-opt.active { background: var(--line-soft); color: var(--amber); }

/* Chrome ignores the ::-webkit- pseudo-elements the moment scrollbar-width is
   set, so setting both means the standard property silently wins and the
   custom bar never renders. Firefox only understands the standard property.
   Each engine gets exactly the one it uses. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--line-strong) transparent;
    }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: var(--line-strong);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--amber-dim); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Legal pages ───────────────────────────────────────────────────────────
   One column, generous measure. These are read once, carefully, and the only
   job of the styling is to stay out of the way of that. */
.legal {
    max-width: 68ch;
    margin: clamp(28px, 6vw, 64px) auto;
}
.legal h1 {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
}
.legalUpdated {
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: 0.86rem;
}
.legal section { margin-bottom: 30px; }
.legal h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--canopy-bright);
}
.legal p, .legal li {
    margin: 0 0 12px;
    line-height: 1.65;
    color: var(--text-muted);
}
.legal li { margin-bottom: 8px; }
.legal ul { padding-left: 20px; }
.legal strong { color: var(--text); }
/* The one paragraph on these pages that has to be read rather than skimmed. */
.legal .legalStrong {
    padding: 14px 16px;
    border-left: 2px solid var(--canopy-mid);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-panel);
    color: var(--text);
}
.legal a { color: var(--canopy-bright); }