html,
body,
#app { width: 100%; min-height: 100%; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: clip;
    overflow-y: auto;
    background: #111317;
}

button,
select { font: inherit; }

.layout-contract-page { display: grid; width: min(100% - 2rem, 72rem); min-width: 0; box-sizing: border-box; margin-inline: auto; padding: clamp(3rem, 8vw, 7rem) 0; gap: 2rem; }
.layout-contract-page__intro { display: grid; max-width: 58rem; gap: .75rem; }
.layout-contract-page__intro > span { color: color-mix(in srgb, var(--app-accent) 65%, var(--app-foreground)); font-size: .66rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.layout-contract-page__intro h1, .layout-contract-page__intro h2 { margin: 0; font-family: var(--app-font-heading); font-size: clamp(2.2rem, 6vw, 5rem); line-height: .95; letter-spacing: -.05em; }
.layout-contract-page__intro p { max-width: 48rem; margin: 0; color: var(--app-foreground-muted); line-height: 1.7; }
.layout-contract-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.layout-contract-page__grid article { padding: 1.1rem; border: 1px solid var(--app-border); border-radius: .25rem 1rem; background: var(--app-surface); }
.layout-contract-page__grid strong { color: color-mix(in srgb, var(--app-accent) 65%, var(--app-foreground)); font-size: .78rem; }
.layout-contract-page__grid p { margin: .55rem 0 0; color: var(--app-foreground-muted); font-size: .74rem; line-height: 1.55; }
.layout-contract-page__back { justify-self: start; color: color-mix(in srgb, var(--app-accent) 65%, var(--app-foreground)); font-size: .76rem; font-weight: 800; text-underline-offset: .2rem; }
.layout-contract-form { display: grid; gap: 1rem; }
.layout-contract-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.layout-contract-form > .app-button { justify-self: stretch; }
.layout-pattern-brand { color: var(--app-foreground); font-family: var(--app-font-heading); font-weight: 800; text-decoration: none; }
.layout-pattern-showcase { display: grid; align-content: center; min-height: 18rem; gap: 1rem; }
.layout-pattern-showcase > span { color: var(--app-on-brand); font-size: .66rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.layout-pattern-showcase blockquote { max-width: 18ch; margin: 0; color: var(--app-on-brand); font-family: var(--app-font-heading); font-size: clamp(1.7rem, 4vw, 3.3rem); line-height: 1.05; }
.layout-pattern-showcase p { max-width: 34rem; margin: 0; color: var(--app-on-brand); opacity: .82; line-height: 1.65; }
.layout-pattern-landing-footer { padding: 2rem; border-top: 1px solid var(--app-border); color: var(--app-foreground-muted); text-align: center; }
@media (max-width: 48rem) { .layout-contract-page__grid { grid-template-columns: 1fr; } .layout-contract-form__row { grid-template-columns: 1fr; } }

.playbook {
    width: 100%;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-color: var(--app-accent-border) var(--app-surface-muted);
    scrollbar-gutter: stable;
    background: var(--app-background);
    color: var(--app-foreground);
    transition: background .2s ease, color .2s ease;
}

.playbook,
.playbook * { scrollbar-color: var(--app-accent-border) var(--app-surface-muted); scrollbar-width: thin; }
.playbook::-webkit-scrollbar,
.playbook *::-webkit-scrollbar { width: .7rem; height: .7rem; }
.playbook::-webkit-scrollbar-track,
.playbook *::-webkit-scrollbar-track { background: var(--app-surface-muted); }
.playbook::-webkit-scrollbar-thumb,
.playbook *::-webkit-scrollbar-thumb { min-height: 2.5rem; border: 2px solid var(--app-surface-muted); border-radius: 99rem; background: var(--app-accent-border); }
.playbook::-webkit-scrollbar-thumb:hover,
.playbook *::-webkit-scrollbar-thumb:hover { background: var(--app-accent); }
.playbook::-webkit-scrollbar-corner,
.playbook *::-webkit-scrollbar-corner { background: var(--app-surface-muted); }

.theme-audiogramiq {
    --app-brand: light-dark(#08777d, #4cd7d4); --app-on-brand: light-dark(#fff, #062628); --app-brand-secondary: light-dark(#c63f35, #ff897e); --app-accent: var(--app-brand-secondary);
    --app-accent-soft: light-dark(rgb(198 63 53 / .12), rgb(255 137 126 / .18)); --app-accent-border: light-dark(#e4a29c, #96544f); --app-brand-soft: light-dark(rgb(8 119 125 / .10), rgb(76 215 212 / .16)); --app-brand-secondary-soft: light-dark(rgb(198 63 53 / .11), rgb(255 137 126 / .17));
    --app-background: light-dark(#f6faf9, #0d1819); --app-surface: light-dark(#fff, #152526); --app-surface-muted: light-dark(#edf5f4, #203132); --app-surface-hover: light-dark(#e7f0ef, #2e4748);
    --app-glass-surface: light-dark(rgb(255 255 255 / .62), rgb(21 37 38 / .68)); --app-glass-surface-strong: light-dark(rgb(255 255 255 / .82), rgb(21 37 38 / .86)); --app-glass-border: light-dark(rgb(8 119 125 / .18), rgb(213 255 253 / .20)); --app-glass-shadow: light-dark(rgb(8 73 76 / .13), rgb(0 0 0 / .38));
    --app-foreground: light-dark(#123f42, #effcfc); --app-foreground-muted: light-dark(#587476, #aec6c6); --app-border: light-dark(#d1e2e1, #3a5252); --app-grid-line: light-dark(rgb(8 119 125 / .08), rgb(239 252 252 / .08)); --app-shadow-color: light-dark(rgb(8 73 76 / .13), rgb(0 0 0 / .34));
}

.theme-bafsworkout {
    --app-brand: light-dark(#51398a, #b2a2ef); --app-on-brand: light-dark(#fff, #1a1030); --app-brand-secondary: light-dark(#c2473d, #ff8f81); --app-accent: var(--app-brand-secondary);
    --app-accent-soft: light-dark(rgb(194 71 61 / .13), rgb(255 143 129 / .19)); --app-accent-border: light-dark(#dda09a, #995d57); --app-brand-soft: light-dark(rgb(81 57 138 / .11), rgb(178 162 239 / .17)); --app-brand-secondary-soft: light-dark(rgb(194 71 61 / .12), rgb(255 143 129 / .18));
    --app-background: light-dark(#faf7f4, #17141c); --app-surface: light-dark(#fff, #211c28); --app-surface-muted: light-dark(#f2edf6, #2b2435); --app-surface-hover: light-dark(#eee6f2, #3a3048);
    --app-glass-surface: light-dark(rgb(255 255 255 / .62), rgb(33 28 40 / .68)); --app-glass-surface-strong: light-dark(rgb(255 255 255 / .82), rgb(33 28 40 / .86)); --app-glass-border: light-dark(rgb(81 57 138 / .17), rgb(229 222 255 / .20)); --app-glass-shadow: light-dark(rgb(42 30 92 / .14), rgb(0 0 0 / .40));
    --app-foreground: light-dark(#2f2654, #f4efff); --app-foreground-muted: light-dark(#6b6480, #bdb5cd); --app-border: light-dark(#e2d9e8, #453b52); --app-grid-line: light-dark(rgb(81 57 138 / .08), rgb(244 239 255 / .08)); --app-shadow-color: light-dark(rgb(42 30 92 / .14), rgb(0 0 0 / .36));
}

.theme-coekpi {
    --app-brand: light-dark(#0b5fac, #69baff); --app-on-brand: light-dark(#fff, #09243a); --app-brand-secondary: light-dark(#a35f00, #ffc24c); --app-accent: var(--app-brand-secondary);
    --app-accent-soft: light-dark(rgb(163 95 0 / .12), rgb(255 194 76 / .18)); --app-accent-border: light-dark(#d6aa69, #8f6c2d); --app-brand-soft: light-dark(rgb(11 95 172 / .10), rgb(105 186 255 / .16)); --app-brand-secondary-soft: light-dark(rgb(163 95 0 / .12), rgb(255 194 76 / .18));
    --app-background: light-dark(#f5f8fc, #0e1520); --app-surface: light-dark(#fff, #172230); --app-surface-muted: light-dark(#edf3fa, #202e3e); --app-surface-hover: light-dark(#e5eef8, #304459);
    --app-glass-surface: light-dark(rgb(255 255 255 / .62), rgb(23 34 48 / .68)); --app-glass-surface-strong: light-dark(rgb(255 255 255 / .82), rgb(23 34 48 / .86)); --app-glass-border: light-dark(rgb(11 95 172 / .17), rgb(216 238 255 / .20)); --app-glass-shadow: light-dark(rgb(19 62 105 / .13), rgb(0 0 0 / .38));
    --app-foreground: light-dark(#153b64, #edf6ff); --app-foreground-muted: light-dark(#5b6f87, #a9bbcd); --app-border: light-dark(#d2e2f1, #354a5f); --app-grid-line: light-dark(rgb(11 95 172 / .08), rgb(237 246 255 / .08)); --app-shadow-color: light-dark(rgb(19 62 105 / .13), rgb(0 0 0 / .34));
}

.theme-ergotrack {
    --app-brand: light-dark(#49358f, #b1a1f2); --app-on-brand: light-dark(#fff, #1b133d); --app-brand-secondary: light-dark(#b95000, #ff9c4a); --app-accent: var(--app-brand-secondary);
    --app-accent-soft: light-dark(rgb(185 80 0 / .12), rgb(255 156 74 / .18)); --app-accent-border: light-dark(#d6a375, #93623b); --app-brand-soft: light-dark(rgb(73 53 143 / .10), rgb(177 161 242 / .16)); --app-brand-secondary-soft: light-dark(rgb(185 80 0 / .12), rgb(255 156 74 / .18));
    --app-background: light-dark(#f8f7fc, #14131c); --app-surface: light-dark(#fff, #1e1c29); --app-surface-muted: light-dark(#f0eef8, #292636); --app-surface-hover: light-dark(#e9e5f5, #3b3650);
    --app-glass-surface: light-dark(rgb(255 255 255 / .62), rgb(30 28 41 / .68)); --app-glass-surface-strong: light-dark(rgb(255 255 255 / .82), rgb(30 28 41 / .86)); --app-glass-border: light-dark(rgb(73 53 143 / .17), rgb(229 224 255 / .20)); --app-glass-shadow: light-dark(rgb(49 37 112 / .14), rgb(0 0 0 / .40));
    --app-foreground: light-dark(#30295a, #f4f1ff); --app-foreground-muted: light-dark(#6a6580, #bbb5cd); --app-border: light-dark(#ded9ec, #454052); --app-grid-line: light-dark(rgb(73 53 143 / .08), rgb(244 241 255 / .08)); --app-shadow-color: light-dark(rgb(49 37 112 / .14), rgb(0 0 0 / .36));
}

.theme-mentalinsight {
    --app-brand: light-dark(#b32255, #ff7898); --app-on-brand: light-dark(#fff, #310d1a); --app-brand-secondary: light-dark(#087c7b, #50d1cc); --app-accent: var(--app-brand-secondary);
    --app-accent-soft: light-dark(rgb(8 124 123 / .12), rgb(80 209 204 / .18)); --app-accent-border: light-dark(#86c5c2, #3d8582); --app-brand-soft: light-dark(rgb(179 34 85 / .10), rgb(255 120 152 / .16)); --app-brand-secondary-soft: light-dark(rgb(8 124 123 / .12), rgb(80 209 204 / .18));
    --app-background: light-dark(#fbf7f9, #191316); --app-surface: light-dark(#fff, #241b20); --app-surface-muted: light-dark(#f6edf1, #30242a); --app-surface-hover: light-dark(#f0e4e9, #46333c);
    --app-glass-surface: light-dark(rgb(255 255 255 / .62), rgb(36 27 32 / .68)); --app-glass-surface-strong: light-dark(rgb(255 255 255 / .82), rgb(36 27 32 / .86)); --app-glass-border: light-dark(rgb(179 34 85 / .17), rgb(255 223 235 / .20)); --app-glass-shadow: light-dark(rgb(94 20 47 / .14), rgb(0 0 0 / .40));
    --app-foreground: light-dark(#4c1830, #fff0f5); --app-foreground-muted: light-dark(#7b5f6c, #ccb3be); --app-border: light-dark(#ead7df, #513c46); --app-grid-line: light-dark(rgb(179 34 85 / .08), rgb(255 240 245 / .08)); --app-shadow-color: light-dark(rgb(94 20 47 / .14), rgb(0 0 0 / .36));
}

.theme-healthinsight {
    --app-brand: light-dark(#0869b5, #60bdff); --app-on-brand: light-dark(#fff, #08253a); --app-brand-secondary: light-dark(#c84924, #ff8b5c); --app-accent: var(--app-brand-secondary);
    --app-accent-soft: light-dark(rgb(200 73 36 / .12), rgb(255 139 92 / .18)); --app-accent-border: light-dark(#e1a18c, #a45b40); --app-brand-soft: light-dark(rgb(8 105 181 / .10), rgb(96 189 255 / .16)); --app-brand-secondary-soft: light-dark(rgb(200 73 36 / .12), rgb(255 139 92 / .18));
    --app-background: light-dark(#f3f9fc, #0c171d); --app-surface: light-dark(#fff, #14242b); --app-surface-muted: light-dark(#eaf4f8, #1c3038); --app-surface-hover: light-dark(#e0eef4, #2b4853);
    --app-glass-surface: light-dark(rgb(255 255 255 / .62), rgb(20 36 43 / .68)); --app-glass-surface-strong: light-dark(rgb(255 255 255 / .82), rgb(20 36 43 / .86)); --app-glass-border: light-dark(rgb(8 105 181 / .17), rgb(209 239 255 / .20)); --app-glass-shadow: light-dark(rgb(5 73 116 / .13), rgb(0 0 0 / .38));
    --app-foreground: light-dark(#123f59, #eaf8ff); --app-foreground-muted: light-dark(#587483, #abc3cc); --app-border: light-dark(#c9e2ec, #34525d); --app-grid-line: light-dark(rgb(8 105 181 / .08), rgb(234 248 255 / .08)); --app-shadow-color: light-dark(rgb(5 73 116 / .13), rgb(0 0 0 / .34));
}

.playbook-bar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: auto auto minmax(10rem, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .75rem clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--app-glass-border);
    background: var(--app-glass-surface-strong);
    box-shadow: 0 .5rem 2rem var(--app-shadow-color);
    backdrop-filter: blur(24px) saturate(150%);
}

.playbook-brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.playbook-brand span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .25rem .7rem; background: var(--app-brand); color: var(--app-on-brand); font-size: .7rem; font-weight: 900; }
.playbook-brand strong { font-family: var(--app-font-heading); letter-spacing: -.02em; }

.playbook-nav { display: inline-flex; align-items: center; gap: .25rem; }
.playbook-nav a { padding: .48rem .7rem; border-radius: .55rem; color: var(--app-foreground-muted); font-size: .82rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.playbook-nav a:hover { color: var(--app-accent); }
.playbook-nav a.active { background: var(--app-accent-soft); color: var(--app-foreground); }
.playbook-nav-group { position: relative; }
.playbook-nav-group > summary { display: flex; align-items: center; gap: .35rem; padding: .48rem .7rem; border-radius: .55rem; color: var(--app-foreground-muted); font-size: .82rem; font-weight: 750; list-style: none; white-space: nowrap; cursor: pointer; }
.playbook-nav-group > summary::-webkit-details-marker { display: none; }
.playbook-nav-group > summary:hover, .playbook-nav-group > summary.active { background: var(--app-accent-soft); color: var(--app-foreground); }
.playbook-nav-group > summary span { font-size: .72rem; transition: transform .15s ease; }
.playbook-nav-group[open] > summary span { transform: rotate(180deg); }
.playbook-nav-group__menu { position: absolute; z-index: 40; top: calc(100% + .8rem); left: 0; display: grid; min-width: 15rem; padding: .55rem; border: 1px solid var(--app-border); border-radius: .85rem; background: var(--app-surface); box-shadow: 0 1.25rem 3.5rem var(--app-shadow-color); }
.playbook-nav-group__menu::before { position: absolute; inset: -.8rem 0 auto; height: .8rem; content: ""; }
.playbook-nav-group__menu a { display: grid; padding: .58rem .7rem; }
.playbook-nav-group__menu a.active { background: var(--app-accent-soft); }
.playbook-nav-group__lead { margin-bottom: .35rem; border-bottom: 1px solid var(--app-border); border-radius: .55rem .55rem 0 0 !important; }
.playbook-nav-group__lead strong { color: var(--app-foreground); font-size: .78rem; }
.playbook-nav-group__lead span { margin-top: .18rem; color: var(--app-foreground-muted); font-size: .64rem; font-weight: 500; }
.playbook-nav-group__label { padding: .65rem .7rem .25rem; color: var(--app-accent); font-size: .6rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.playbook-control { display: grid; grid-template-columns: auto minmax(10rem, 16rem); align-items: center; justify-content: end; gap: .55rem; }
.playbook-control label { color: var(--app-foreground-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.playbook-control select { width: 100%; padding: .5rem 2rem .5rem .7rem; border: 1px solid var(--app-border); border-radius: .55rem; background: var(--app-surface); color: var(--app-foreground); }

.playbook-segment { display: inline-flex; padding: .2rem; border: 1px solid var(--app-border); border-radius: .65rem; background: var(--app-surface-muted); }
.playbook-segment button { padding: .38rem .68rem; border: 0; border-radius: .45rem; background: transparent; color: var(--app-foreground-muted); cursor: pointer; }
.playbook-segment--theme button { min-width: 1.85rem; padding-inline: .38rem; }
.playbook-segment button.is-active { background: var(--app-surface); color: var(--app-accent); box-shadow: 0 .15rem .5rem var(--app-shadow-color); font-weight: 750; }

.playbook-canvas { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); max-width: 98rem; margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem) 8rem; }
.playbook-index { position: sticky; top: 6.5rem; display: grid; align-self: start; gap: .65rem; }
.playbook-index span { margin-bottom: .4rem; color: var(--app-accent); font-size: .68rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.playbook-index a { padding: .3rem 0; color: var(--app-foreground-muted); font-size: .85rem; text-decoration: none; }
.playbook-index a:hover { color: var(--app-accent); }

.playbook-sheet { width: 100%; max-width: 82rem; min-width: 0; margin-inline: auto; transition: max-width .3s ease; }
.playbook[data-viewport="narrow"] .playbook-sheet { max-width: 30rem; }
.playbook-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .65fr); align-items: end; gap: 2rem; min-height: 15rem; padding-bottom: 3rem; border-bottom: 1px solid var(--app-border); }
.playbook-kicker { color: var(--app-accent); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.playbook-intro h1 { max-width: 14ch; margin: .9rem 0 0; font-size: clamp(3rem, 7vw, 7rem); line-height: .82; letter-spacing: -.065em; }
.playbook-intro h1 em { color: var(--app-brand-secondary); font-style: normal; }
.playbook-intro p { margin: 0; color: var(--app-foreground-muted); font-size: 1.02rem; line-height: 1.75; }

.specimen-section { scroll-margin-top: 6rem; padding: clamp(3rem, 7vw, 7rem) 0; border-bottom: 1px solid var(--app-border); }
.specimen-section__header { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; }
.specimen-section__header > span { color: var(--app-brand-secondary); font-family: var(--app-font-mono); font-size: .75rem; font-weight: 800; }
.specimen-section__header h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; }
.specimen-section__header p { max-width: 45rem; margin: .35rem 0 0; color: var(--app-foreground-muted); line-height: 1.6; }
.specimen-section__stage { min-width: 0; }

.playbook-stack { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--app-border); border-radius: 1.25rem; background: var(--app-surface); box-shadow: 0 1rem 3rem var(--app-shadow-color); }
.playbook-stack--loose { gap: 1.5rem; }
.playbook-button { padding: .55rem .85rem; border: 1px solid var(--app-border); border-radius: .55rem; background: var(--app-surface); color: var(--app-foreground); cursor: pointer; }
.playbook-button--primary { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-on-brand); }
.playbook-toolbar-spacer { flex: 1; }
.playbook-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.playbook-card-grid p { margin: 0; color: var(--app-foreground-muted); }
.playbook-card-grid h3 { margin: 0 0 .55rem; }
.playbook-feedback-grid { display: grid; gap: .85rem; }
.playbook-marketing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.playbook-marketing-grid p { margin: 0; }
.playbook-action-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }


.playbook-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.playbook-meta span { padding: .35rem .7rem; border: 1px solid currentColor; border-radius: 99rem; opacity: .72; font-size: .78rem; }
.playbook-score { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 9.75rem; aspect-ratio: 1; place-items: center; align-content: center; padding: .8rem; border: 1px solid currentColor; border-radius: 50%; background: var(--app-brand-soft); color: var(--app-on-brand); transform: translate(-50%, -50%); }
.playbook-score span { font-size: 3.4rem; font-weight: 900; line-height: 1; }
.playbook-score strong { margin-top: .3rem; }
.playbook-score small { opacity: .68; }

.playbook-field { display: grid; gap: .4rem; color: var(--app-foreground-muted); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.playbook-field input,
.playbook-field select { width: 100%; box-sizing: border-box; padding: .7rem .75rem; border: 1px solid var(--app-border); border-radius: .55rem; background: var(--app-background); color: var(--app-foreground); font: inherit; font-weight: 500; letter-spacing: normal; text-transform: none; }
.playbook-preferences { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .75rem; border: 1px solid var(--app-border); border-radius: .75rem; background: var(--app-surface-muted); }
.playbook-preferences > span { color: var(--app-foreground-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.playbook-preferences > span:not(:first-child) { margin-left: .5rem; }

.token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.token-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: .8rem; background: var(--app-surface); }
.token-swatch { display: block; height: 5.5rem; border-bottom: 1px solid var(--app-border); }
.token-card code { display: block; overflow: hidden; padding: .65rem; color: var(--app-foreground-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.landing-workbench { max-width: 110rem; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2.5rem); }
.landing-reveal.is-reveal-ready { opacity: 0; transform: translateY(1.35rem); transition: opacity .65s cubic-bezier(.2, .72, .22, 1), transform .65s cubic-bezier(.2, .72, .22, 1); transition-delay: calc(var(--landing-reveal-order, 0) * 45ms); }
.landing-reveal.is-reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
.landing-workbench__note { display: grid; grid-template-columns: auto minmax(16rem, 1fr) auto; align-items: center; gap: 1.5rem; max-width: 96rem; margin: 0 auto 1rem; padding: .85rem 1rem; border: 1px solid var(--app-border); border-radius: .9rem; background: var(--app-surface); box-shadow: 0 .75rem 2rem var(--app-shadow-color); }
.landing-workbench__note > div { display: grid; gap: .15rem; }
.landing-workbench__note p { max-width: 48rem; margin: 0 auto; color: var(--app-foreground-muted); font-size: .85rem; line-height: 1.5; }
.landing-workbench__badge { padding: .4rem .65rem; border: 1px solid var(--app-accent-border); border-radius: 99rem; background: var(--app-accent-soft); color: color-mix(in srgb, var(--app-accent) 65%, var(--app-foreground)); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.landing-preview { container: landing-preview / inline-size; max-width: 96rem; min-width: 0; margin: 0 auto; overflow: hidden; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-background); box-shadow: 0 2rem 5rem var(--app-shadow-color); transition: max-width .3s ease; }
.playbook[data-viewport="narrow"] .landing-preview { max-width: 30rem; }
.landing-site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--app-border); background: var(--app-glass-surface-strong); backdrop-filter: blur(18px) saturate(140%); }
.landing-site-header > * { display: flex; min-height: 4rem; align-items: center; gap: 1.25rem; }
.landing-site-brand { display: inline-flex; min-width: 0; align-items: center; gap: .6rem; color: var(--app-foreground); text-decoration: none; }
.landing-site-brand img { width: 2rem; height: 2rem; flex: 0 0 auto; object-fit: contain; }
.landing-site-brand strong { font-family: var(--app-font-heading); font-size: .88rem; letter-spacing: -.015em; }
.landing-site-header nav { display: flex; align-items: center; justify-content: center; gap: .15rem; margin-inline: auto; }
.landing-site-header nav a { padding: .45rem .65rem; border-radius: .5rem; color: var(--app-foreground-muted); font-size: .72rem; font-weight: 700; text-decoration: none; }
.landing-site-header nav a:hover { background: var(--app-surface-hover); color: var(--app-accent); }
.landing-site-header__action { display: inline-flex; min-height: 2.15rem; box-sizing: border-box; align-items: center; padding: .42rem .75rem; border-radius: .5rem; background: var(--app-brand); color: var(--app-on-brand); font-size: .7rem; font-weight: 800; text-decoration: none; }
.landing-brand-lockup { display: inline-flex; align-items: center; gap: .75rem; }
.landing-brand-lockup__mark { display: grid; width: 3rem; height: 3rem; box-sizing: border-box; place-items: center; padding: .35rem; border: 1px solid var(--app-accent-border); border-radius: .25rem .95rem; background: var(--app-glass-surface-strong); box-shadow: 0 .5rem 1.5rem var(--app-shadow-color); }
.landing-brand-lockup__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.landing-brand-lockup > span:last-child { display: grid; gap: .12rem; }
.landing-brand-lockup strong { color: var(--app-foreground); font-family: var(--app-font-heading); font-size: .9rem; letter-spacing: -.015em; }
.landing-brand-lockup small { color: var(--app-accent); font-size: .6rem; font-weight: 850; letter-spacing: .13em; }
.landing-hero-visual { position: relative; min-height: 28rem; margin: 0; overflow: visible; border: 0; background: transparent; }
.landing-hero-visual > img { width: 100%; height: 36rem; box-sizing: border-box; padding: 1.5rem 1.5rem 0; object-fit: contain; object-position: center bottom; }
.landing-hero-visual--floating > img { filter: drop-shadow(0 2rem 2rem var(--app-shadow-color)); }
.landing-hero-visual--framed { overflow: hidden; border: 1px solid var(--app-accent-border); border-radius: .4rem 2.5rem .4rem 2.5rem; background: radial-gradient(circle at 70% 25%, var(--app-brand-secondary-soft), transparent 48%), var(--app-surface-muted); box-shadow: 0 2rem 5rem var(--app-shadow-color); }
.landing-hero-visual--cover > img { padding: 0; object-fit: cover; object-position: center; }
.landing-hero-visual--framed::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); content: ""; pointer-events: none; }
.landing-hero-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border: 1px solid var(--app-glass-border); border-radius: 99rem; background: var(--app-glass-surface-strong); color: var(--app-foreground); box-shadow: 0 .65rem 1.6rem var(--app-shadow-color); backdrop-filter: blur(18px); font-size: .66rem; font-weight: 750; }
.landing-hero-visual figcaption i { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--app-brand-secondary); box-shadow: 0 0 0 .22rem var(--app-brand-secondary-soft); }
.landing-product-preview { padding: clamp(3.5rem, 7vw, 7rem) 0; scroll-margin-top: 6rem; border-bottom: 1px solid var(--app-border); background: linear-gradient(180deg, var(--app-surface-muted), var(--app-background)); }
.landing-product-preview__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr); align-items: end; gap: 2rem; margin-bottom: 2rem; }
.landing-product-preview__heading h2 { max-width: 16ch; margin: .45rem 0 0; font-family: var(--app-font-heading); font-size: clamp(2rem, 4vw, 3.75rem); line-height: .98; letter-spacing: -.045em; }
.landing-product-preview__heading p { max-width: 48rem; margin: 0; color: var(--app-foreground-muted); font-size: .88rem; line-height: 1.65; }
.landing-dashboard { min-height: 20rem; padding: 1rem; background: var(--app-surface); }
.landing-dashboard__top { display: flex; align-items: center; gap: .35rem; padding-bottom: .8rem; border-bottom: 1px solid var(--app-border); }
.landing-dashboard__top span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--app-border); }
.landing-dashboard__top b { margin-left: auto; color: var(--app-accent); font-size: .66rem; letter-spacing: .08em; }
.landing-dashboard__body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding: 2rem .5rem 1.5rem; }
.landing-dashboard__score { display: grid; width: 7rem; aspect-ratio: 1; place-items: center; align-content: center; border: 1px solid var(--app-accent-border); border-radius: 50%; background: var(--app-accent-soft); color: color-mix(in srgb, var(--app-accent) 72%, var(--app-foreground)); }
.landing-dashboard__score strong { font-size: 2.8rem; line-height: 1; }
.landing-dashboard__score span { margin-top: .25rem; font-size: .72rem; font-weight: 800; }
.landing-dashboard__copy small,
.landing-section__eyebrow { color: var(--app-accent); font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.landing-dashboard__copy h3 { margin: .45rem 0; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.05; }
.landing-dashboard__copy p { margin: 0; color: var(--app-foreground-muted); font-size: .82rem; line-height: 1.5; }
.landing-dashboard__bars { display: flex; align-items: end; gap: .45rem; height: 4rem; padding: .75rem .5rem 0; border-top: 1px solid var(--app-border); }
.landing-dashboard__bars i { flex: 1; height: 35%; border-radius: .25rem .25rem 0 0; background: var(--app-brand-soft); }
.landing-dashboard__bars i:nth-child(2) { height: 58%; }
.landing-dashboard__bars i:nth-child(3) { height: 46%; }
.landing-dashboard__bars i:nth-child(4) { height: 78%; background: var(--app-accent); }
.landing-dashboard__bars i:nth-child(5) { height: 68%; background: var(--app-brand-secondary); }
.landing-section { padding: clamp(4rem, 8vw, 8rem) 0; scroll-margin-top: 6rem; }
.landing-section--muted { background: var(--app-surface-muted); }
.landing-section--cta { padding-block: clamp(3rem, 6vw, 6rem); }
.landing-card-number { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .7rem 1.25rem; background: var(--app-accent-soft); color: color-mix(in srgb, var(--app-accent) 72%, var(--app-foreground)); font-weight: 900; }
.landing-split { display: grid; grid-template-columns: minmax(0, .75fr) minmax(20rem, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.landing-footer { padding: 1.5rem 0; border-top: 1px solid var(--app-border); color: var(--app-foreground-muted); }
.landing-footer > * { display: flex; justify-content: space-between; gap: 1rem; }
.landing-footer strong { color: var(--app-foreground); }

@container landing-preview (max-width: 50rem) {
    .landing-split,
    .landing-product-preview__heading { grid-template-columns: 1fr; }
}

@container landing-preview (max-width: 34rem) {
    .landing-site-header > * { min-height: 3.6rem; gap: .65rem; }
    .landing-site-header nav { display: none; }
    .landing-site-header__action { margin-left: auto; }
    .landing-hero-visual { min-height: 19rem; }
    .landing-hero-visual--framed { border-radius: .3rem 1.35rem .3rem 1.35rem; }
    .landing-hero-visual > img { height: 23rem; padding: .75rem .75rem 0; }
    .landing-hero-visual--cover > img { padding: 0; }
    .landing-hero-visual figcaption { display: none; }
    .landing-dashboard__body { grid-template-columns: 1fr; }
    .landing-dashboard__score { width: 6rem; }
    .landing-footer > * { display: grid; }
}

.access-workbench { max-width: 110rem; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2.5rem); }
.access-workbench__note { display: grid; grid-template-columns: minmax(13rem, 1fr) auto minmax(8rem, 1fr); align-items: center; gap: 1rem; max-width: 96rem; margin: 0 auto 1rem; padding: .85rem 1rem; border: 1px solid var(--app-border); border-radius: .9rem; background: var(--app-surface); box-shadow: 0 .75rem 2rem var(--app-shadow-color); }
.access-workbench__note > div { display: grid; gap: .15rem; }
.access-workbench__note nav { display: flex; min-width: 0; justify-content: center; gap: .2rem; overflow-x: auto; padding: .2rem; border: 1px solid var(--app-border); border-radius: .65rem; background: var(--app-surface-muted); scrollbar-width: thin; }
.access-workbench__note nav a { padding: .42rem .75rem; border-radius: .45rem; color: var(--app-foreground-muted); font-size: .72rem; font-weight: 780; text-decoration: none; }
.access-workbench__note nav a.active { background: var(--app-surface); color: var(--app-accent); box-shadow: 0 .18rem .55rem var(--app-shadow-color); }
.access-workbench__note > :last-child { justify-self: end; }
.access-preview { container: access-preview / inline-size; max-width: 96rem; min-width: 0; margin: 0 auto; overflow: hidden; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-background); box-shadow: 0 2rem 5rem var(--app-shadow-color); transition: max-width .3s ease; }
.playbook[data-viewport="narrow"] .access-preview { max-width: 30rem; }
.access-page { display: grid; min-height: 48rem; grid-template-columns: minmax(28rem, .9fr) minmax(30rem, 1.1fr); }
.access-form-panel { display: flex; min-width: 0; flex-direction: column; padding: clamp(1.5rem, 4cqi, 4.5rem); background: var(--app-surface); }
.access-brand { display: inline-flex; width: fit-content; align-items: center; gap: .7rem; color: var(--app-foreground); text-decoration: none; }
.access-brand > span { display: grid; width: 2.65rem; height: 2.65rem; box-sizing: border-box; place-items: center; padding: .38rem; border: 1px solid var(--app-accent-border); border-radius: .25rem .9rem; background: var(--app-background); }
.access-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.access-brand strong { font-family: var(--app-font-heading); font-size: .95rem; letter-spacing: -.02em; }
.access-form-panel__body { width: min(100%, 28rem); margin: auto; padding-block: 3rem 1rem; }
.access-heading > span,
.access-status__copy > span { color: var(--app-accent); font-size: .65rem; font-weight: 900; letter-spacing: .16em; }
.access-heading h1 { margin: .6rem 0 .55rem; color: var(--app-foreground); font-family: var(--app-font-heading); font-size: clamp(2rem, 3.8cqi, 3.2rem); line-height: .98; letter-spacing: -.045em; }
.access-heading p { margin: 0; color: var(--app-foreground-muted); font-size: .84rem; line-height: 1.55; }
.access-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.65rem; }
.access-provider-grid button { display: inline-flex; min-height: 2.85rem; align-items: center; justify-content: center; gap: .6rem; border: 1px solid var(--app-border); border-radius: .65rem; background: var(--app-background); color: var(--app-foreground); font: inherit; font-size: .76rem; font-weight: 780; cursor: pointer; }
.access-provider-grid button:hover { border-color: var(--app-accent-border); background: var(--app-surface-hover); color: var(--app-accent); }
.access-provider-grid svg { width: 1rem; height: 1rem; fill: currentColor; }
.access-divider { display: flex; align-items: center; gap: .8rem; margin: 1.35rem 0; color: var(--app-foreground-muted); font-size: .67rem; }
.access-divider::before,
.access-divider::after { height: 1px; flex: 1; background: var(--app-border); content: ""; }
.access-form { display: grid; gap: .9rem; }
.access-form > label:not(.access-check),
.access-form__row > label { display: grid; gap: .42rem; color: var(--app-foreground); font-size: .72rem; font-weight: 780; }
.access-form input:not([type="checkbox"]) { width: 100%; min-height: 2.85rem; box-sizing: border-box; padding: .72rem .8rem; border: 1px solid var(--app-border); border-radius: .6rem; outline: 0; background: var(--app-background); color: var(--app-foreground); font: inherit; font-size: .78rem; transition: border-color .16s ease, box-shadow .16s ease; }
.access-form input::placeholder { color: var(--app-foreground-muted); opacity: .72; }
.access-form input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem var(--app-accent-soft); }
.access-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.access-form__options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.access-check { display: inline-flex; align-items: flex-start; gap: .48rem; color: var(--app-foreground-muted); font-size: .7rem; line-height: 1.4; }
.access-check input { width: .95rem; height: .95rem; margin: .05rem 0 0; accent-color: var(--app-accent); }
.access-check--terms { margin-block: .2rem; }
.access-text-action { padding: 0; border: 0; background: transparent; color: var(--app-accent); font: inherit; font-size: .7rem; font-weight: 780; cursor: pointer; }
.access-primary-action { display: inline-flex; min-height: 2.9rem; box-sizing: border-box; align-items: center; justify-content: center; padding: .72rem 1rem; border: 1px solid var(--app-brand); border-radius: .65rem; background: var(--app-brand); color: var(--app-on-brand); font: inherit; font-size: .78rem; font-weight: 850; text-decoration: none; cursor: pointer; box-shadow: 0 .55rem 1.25rem var(--app-shadow-color); }
.access-primary-action:hover { filter: brightness(1.06); }
.access-switch { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 1.3rem 0 0; color: var(--app-foreground-muted); font-size: .72rem; text-align: center; }
.access-switch a { display: inline-flex; min-height: 2.55rem; align-items: center; justify-content: center; padding: 0 .95rem; border: 1px solid var(--app-accent); border-radius: 999px; color: var(--app-accent); font-weight: 850; text-decoration: none; transition: background .16s ease, color .16s ease, transform .16s ease; }
.access-switch a:hover, .access-switch a:focus-visible { background: var(--app-accent); color: var(--app-on-brand); transform: translateY(-1px); }
.access-demo-note { margin: .6rem 0 0; color: var(--app-foreground-muted); font-size: .62rem; font-weight: 650; text-align: center; }
.access-story { position: relative; display: flex; min-width: 0; overflow: hidden; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5cqi, 5rem); background: var(--app-brand); color: var(--app-on-brand); isolation: isolate; }
.access-story::before { position: absolute; z-index: -1; width: 34rem; height: 34rem; border: 1px solid currentColor; border-radius: 50%; opacity: .13; content: ""; inset: -12rem -10rem auto auto; }
.access-story::after { position: absolute; z-index: -1; width: 20rem; height: 20rem; border: 5rem solid var(--app-brand-secondary-soft); border-radius: 50%; opacity: .45; content: ""; inset: auto auto -9rem -9rem; }
.access-story__grid { position: absolute; z-index: -2; inset: 0; opacity: .14; background-image: linear-gradient(var(--app-on-brand) 1px, transparent 1px), linear-gradient(90deg, var(--app-on-brand) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(135deg, #000, transparent 78%); }
.access-story__index { font-size: .62rem; font-weight: 850; letter-spacing: .16em; opacity: .74; }
.access-story blockquote { max-width: 12ch; margin: 0; font-family: var(--app-font-heading); font-size: clamp(2.8rem, 5cqi, 5.5rem); line-height: .9; letter-spacing: -.055em; }
.access-story div > p { max-width: 30rem; margin: 1.25rem 0 0; font-size: .85rem; line-height: 1.65; opacity: .75; }
.access-story__status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--app-on-brand) 24%, transparent); font-size: .7rem; }
.access-story__status i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--app-success) 20%, transparent); }
.access-story__status b { font-size: .64rem; letter-spacing: .1em; }
.access-story__steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.access-story__steps li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .75rem; padding-top: .75rem; border-top: 1px solid color-mix(in srgb, var(--app-on-brand) 22%, transparent); font-size: .72rem; }
.access-story__steps b { opacity: .62; }
.access-status { position: relative; display: grid; min-height: 48rem; box-sizing: border-box; grid-template-rows: auto 1fr auto; padding: clamp(1.5rem, 4cqi, 4.5rem); overflow: hidden; background: radial-gradient(circle at 50% 45%, var(--app-accent-soft), transparent 32%), var(--app-surface); isolation: isolate; }
.access-status > .access-brand { position: relative; z-index: 3; }
.access-status__visual { position: absolute; z-index: -2; color: var(--app-foreground); font-family: var(--app-font-heading); font-size: clamp(10rem, 35cqi, 34rem); font-weight: 850; line-height: 1; letter-spacing: -.11em; opacity: .05; inset: 50% auto auto 50%; transform: translate(-52%, -52%); white-space: nowrap; }
.access-status__ornament { position: absolute; z-index: -1; display: grid; width: clamp(12rem, 25cqi, 25rem); aspect-ratio: 1; place-items: center; border: 1px solid var(--app-accent-border); border-radius: 50%; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 68%, transparent); box-shadow: 0 0 0 clamp(1rem, 3cqi, 3rem) color-mix(in srgb, var(--app-accent-soft) 42%, transparent); }
.access-status__locator { display: grid; width: 25%; aspect-ratio: 1; place-items: center; border: .45rem solid currentColor; border-radius: 50%; }
.access-status__locator i { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.access-status__lock { position: relative; display: block; width: 28%; height: 25%; border: .45rem solid currentColor; border-radius: .4rem; }
.access-status__lock::before { position: absolute; width: 58%; height: 65%; border: .45rem solid currentColor; border-bottom: 0; border-radius: 99rem 99rem 0 0; content: ""; inset: auto auto calc(100% + .35rem) 50%; transform: translateX(-50%); }
.access-status__lock i { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; inset: 30% auto auto 50%; transform: translateX(-50%); }
.access-status__lock b { position: absolute; width: .22rem; height: 25%; background: currentColor; inset: 45% auto auto 50%; transform: translateX(-50%); }
.access-status__pulse { display: flex; height: 32%; align-items: end; gap: .35rem; }
.access-status__pulse i { width: .38rem; height: 35%; border-radius: 99rem; background: currentColor; animation: access-pulse 1.4s ease-in-out infinite alternate; }
.access-status__pulse i:nth-child(2) { height: 68%; animation-delay: -.5s; }
.access-status__pulse i:nth-child(3) { height: 100%; animation-delay: -.9s; }
.access-status__pulse i:nth-child(4) { height: 55%; animation-delay: -.3s; }
.access-status__pulse i:nth-child(5) { height: 78%; animation-delay: -.7s; }
.access-status--forbidden .access-status__ornament { border-radius: 2rem; transform: translate(-50%, -50%) rotate(6deg); }
.access-status--error { background: radial-gradient(circle at 50% 45%, var(--app-danger-soft), transparent 34%), var(--app-surface); }
.access-status--error .access-status__copy > span,
.access-status--error .access-status__ornament { color: var(--app-danger); }
.access-status--error .access-status__ornament { border-color: var(--app-danger-border); background: color-mix(in srgb, var(--app-danger-soft) 68%, transparent); box-shadow: 0 0 0 clamp(1rem, 3cqi, 3rem) color-mix(in srgb, var(--app-danger-soft) 40%, transparent); }
.access-status__copy { position: relative; z-index: 2; align-self: center; justify-self: center; max-width: 46rem; text-align: center; }
.access-status__copy h1 { margin: .65rem 0 .85rem; font-family: var(--app-font-heading); font-size: clamp(3.2rem, 8cqi, 7.5rem); line-height: .86; letter-spacing: -.065em; }
.access-status__copy p { max-width: 38rem; margin: 0 auto; color: var(--app-foreground-muted); font-size: .88rem; line-height: 1.65; }
.access-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.7rem; }
.access-secondary-link { display: inline-flex; min-height: 2.9rem; align-items: center; padding-inline: 1rem; color: var(--app-accent); font-size: .76rem; font-weight: 800; text-decoration: none; }
.access-link-button { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.access-preview :is(a, button, input):focus-visible { outline: 3px solid var(--app-accent); outline-offset: 3px; }
.access-status footer { position: relative; z-index: 2; display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--app-border); color: var(--app-foreground-muted); font-size: .65rem; font-weight: 780; letter-spacing: .08em; }

.custom-error-workbench { display: grid; min-width: 0; grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr); background: var(--app-background); }
.custom-error-editor { position: relative; z-index: 2; display: flex; min-width: 0; max-height: 52rem; box-sizing: border-box; flex-direction: column; gap: .85rem; padding: clamp(1rem, 2vw, 1.5rem); overflow-y: auto; border-right: 1px solid var(--app-border); background: var(--app-surface); }
.custom-error-editor__heading { padding-bottom: .5rem; border-bottom: 1px solid var(--app-border); }
.custom-error-editor__heading span { color: var(--app-accent); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.custom-error-editor__heading h1 { margin: .4rem 0 .5rem; font-family: var(--app-font-heading); font-size: 1.65rem; line-height: 1.05; letter-spacing: -.035em; }
.custom-error-editor__heading p { margin: 0; color: var(--app-foreground-muted); font-size: .78rem; line-height: 1.55; }
.custom-error-editor label { display: grid; min-width: 0; gap: .32rem; color: var(--app-foreground); font-size: .7rem; font-weight: 780; }
.custom-error-editor label > span { color: var(--app-foreground-muted); }
.custom-error-editor input,
.custom-error-editor textarea,
.custom-error-editor select { width: 100%; min-width: 0; box-sizing: border-box; padding: .62rem .68rem; border: 1px solid var(--app-border); border-radius: .55rem; outline: none; background: var(--app-surface-muted); color: var(--app-foreground); font: inherit; font-weight: 550; }
.custom-error-editor textarea { resize: vertical; line-height: 1.5; }
.custom-error-editor input:focus,
.custom-error-editor textarea:focus,
.custom-error-editor select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft); }
.custom-error-editor__row { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.custom-error-editor .custom-error-editor__check { display: flex; align-items: center; gap: .55rem; padding: .7rem; border: 1px solid var(--app-border); border-radius: .55rem; background: var(--app-surface-muted); }
.custom-error-editor__check input { width: 1rem; height: 1rem; padding: 0; accent-color: var(--app-accent); }
.custom-error-editor__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.custom-error-editor__actions button { min-height: 2.35rem; padding: .55rem .72rem; border: 1px solid var(--app-border); border-radius: .55rem; background: var(--app-surface); color: var(--app-foreground); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.custom-error-editor__actions button:first-child { border-color: var(--app-brand); background: var(--app-brand); color: var(--app-on-brand); }
.custom-error-editor__code { border: 1px solid var(--app-border); border-radius: .55rem; background: var(--app-surface-muted); }
.custom-error-editor__code summary { padding: .7rem; color: var(--app-accent); font-size: .68rem; font-weight: 850; cursor: pointer; }
.custom-error-editor__code pre { max-width: 100%; margin: 0; padding: .8rem; overflow-x: auto; border-top: 1px solid var(--app-border); font-size: .64rem; line-height: 1.55; }
.custom-error-preview { min-width: 0; padding: clamp(.75rem, 2vw, 1.5rem); container: custom-error-preview / inline-size; }

@container access-preview (max-width: 58rem) {
    .custom-error-workbench { grid-template-columns: 1fr; }
    .custom-error-editor { max-height: none; border-right: 0; border-bottom: 1px solid var(--app-border); }
}

@container access-preview (max-width: 34rem) {
    .custom-error-editor__row { grid-template-columns: 1fr; }
    .custom-error-preview { padding: .5rem; }
}

@keyframes access-pulse {
    to { height: 18%; opacity: .45; }
}

@container access-preview (max-width: 55rem) {
    .access-page { grid-template-columns: 1fr; }
    .access-story { min-height: 25rem; }
    .access-story blockquote { font-size: clamp(2.6rem, 10cqi, 4.8rem); }
}

@container access-preview (max-width: 34rem) {
    .access-form-panel { padding: 1.35rem; }
    .access-form-panel__body { padding-top: 3.2rem; }
    .access-provider-grid,
    .access-form__row { grid-template-columns: 1fr; }
    .access-story { min-height: 22rem; padding: 1.5rem; }
    .access-status { min-height: 42rem; padding: 1.35rem; }
    .access-status footer { gap: .5rem; flex-direction: column; }
}

.application-shell-workbench {
    container: application-shell-workbench / inline-size;
    width: 100%;
    max-width: 110rem;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border-inline: 1px solid var(--app-border);
    background: var(--app-background);
    box-shadow: 0 2rem 6rem var(--app-shadow-color);
    transition: max-width .3s ease;
}

.playbook[data-viewport="narrow"] .application-shell-workbench { max-width: 30rem; }

.demo-app-brand { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.demo-app-brand > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; flex: 0 0 auto; }
.demo-app-brand > span img { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-app-brand > div { display: grid; min-width: 0; }
.demo-app-brand strong { overflow: hidden; font-family: var(--app-font-heading); font-size: .95rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.demo-app-brand small { color: var(--app-foreground-muted); font-size: .65rem; line-height: 1.2; }
.demo-app-environment { padding: .3rem .52rem; border: 1px solid var(--app-accent-border); border-radius: 99rem; background: var(--app-accent-soft); color: var(--app-accent); font-size: .63rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.demo-profile { position: relative; }
.demo-profile summary { display: flex; align-items: center; gap: .4rem; padding: .2rem .3rem .2rem .2rem; border: 1px solid var(--app-border); border-radius: 99rem; background: var(--app-surface); cursor: pointer; list-style: none; }
.demo-profile summary::-webkit-details-marker { display: none; }
.demo-profile summary > span,
.demo-profile__menu > div > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--app-brand); color: var(--app-on-brand); font-size: .62rem; font-weight: 850; }
.demo-profile summary b { max-width: 5rem; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-profile__menu { position: absolute; z-index: 50; top: calc(100% + .55rem); right: 0; display: grid; width: 14rem; padding: .55rem; border: 1px solid var(--app-border); border-radius: .2rem .85rem .2rem .85rem; background: var(--app-surface); box-shadow: 0 1.2rem 3rem var(--app-shadow-color); }
.demo-profile__menu > div { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem .7rem; border-bottom: 1px solid var(--app-border); }
.demo-profile__menu p { display: grid; margin: 0; }
.demo-profile__menu p strong { font-size: .75rem; }
.demo-profile__menu p small { color: var(--app-foreground-muted); font-size: .62rem; }
.demo-profile__menu > a { display: grid; grid-template-columns: 1.2rem 1fr; align-items: center; gap: .55rem; padding: .6rem .5rem; border-radius: .45rem; color: var(--app-foreground); font-size: .72rem; font-weight: 680; text-decoration: none; }
.demo-profile__menu > a:hover { background: var(--app-surface-hover); }

.demo-app-nav-footer { display: flex; align-items: center; gap: .6rem; }
.demo-app-nav-footer i { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 .3rem var(--app-success-soft); }
.demo-app-nav-footer span { display: grid; }
.demo-app-nav-footer strong { color: var(--app-foreground); font-size: .68rem; }
.demo-app-nav-footer small { font-size: .62rem; }

.demo-overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(12rem, .55fr)); gap: 1rem; }
.demo-overview-card { min-height: 14rem; padding: clamp(1rem, 2.5vw, 1.5rem); box-sizing: border-box; border: 1px solid var(--app-border); border-radius: .2rem 1.1rem .2rem 1.1rem; background: var(--app-surface); box-shadow: 0 .7rem 2rem var(--app-shadow-color); }
.demo-overview-card--feature { display: flex; min-height: 19rem; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, var(--app-brand), color-mix(in srgb, var(--app-brand) 78%, var(--app-brand-secondary))); color: var(--app-on-brand); }
.demo-overview-card__index { color: var(--app-accent); font-size: .63rem; font-weight: 850; letter-spacing: .13em; }
.demo-overview-card--feature .demo-overview-card__index { color: inherit; opacity: .7; }
.demo-overview-card h2 { margin: .65rem 0 .35rem; font-family: var(--app-font-heading); font-size: clamp(1.15rem, 2vw, 1.65rem); letter-spacing: -.025em; }
.demo-overview-card--feature h2 { max-width: 12ch; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .9; }
.demo-overview-card p { margin: 0; color: var(--app-foreground-muted); font-size: .82rem; line-height: 1.55; }
.demo-overview-card--feature p { max-width: 46rem; color: inherit; opacity: .75; }
.demo-overview-metric { display: block; margin-top: 2.2rem; color: var(--app-accent); font-family: var(--app-font-heading); font-size: 2.75rem; line-height: 1; letter-spacing: -.05em; }
.demo-text-link { align-self: flex-start; margin-top: 1.25rem; color: inherit; font-size: .8rem; font-weight: 800; text-decoration: none; }
.demo-text-link span { display: inline-block; margin-left: .25rem; transition: transform .18s ease; }
.demo-text-link:hover span { transform: translateX(.25rem); }

.demo-editor,
.demo-data-panel,
.demo-detail-primary,
.demo-detail-aside { border: 1px solid var(--app-border); border-radius: .2rem 1rem .2rem 1rem; background: var(--app-surface); box-shadow: 0 .65rem 2rem var(--app-shadow-color); }
.demo-editor { margin-bottom: 1rem; padding: clamp(1rem, 2.5vw, 1.4rem); border-color: var(--app-accent-border); background: linear-gradient(120deg, var(--app-accent-soft), transparent 45%), var(--app-surface); }
.demo-editor__heading,
.demo-data-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-editor__heading span,
.demo-data-panel__heading span,
.demo-detail-label { color: var(--app-accent); font-size: .62rem; font-weight: 850; letter-spacing: .13em; }
.demo-editor__heading h2,
.demo-data-panel__heading h2 { margin: .2rem 0 0; font-family: var(--app-font-heading); font-size: 1.15rem; }
.demo-icon-button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--app-border); border-radius: .5rem; background: var(--app-surface); color: var(--app-foreground); font-size: 1.25rem; cursor: pointer; }
.demo-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.demo-form-grid label { display: grid; gap: .35rem; color: var(--app-foreground-muted); font-size: .68rem; font-weight: 780; }
.demo-form-grid input,
.demo-form-grid select { width: 100%; box-sizing: border-box; padding: .62rem .68rem; border: 1px solid var(--app-border); border-radius: .5rem; background: var(--app-background); color: var(--app-foreground); font: inherit; font-size: .8rem; font-weight: 500; }
.demo-form-grid input:focus,
.demo-form-grid select:focus { border-color: var(--app-accent); outline: 2px solid var(--app-accent-soft); }
.demo-editor__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.demo-action-button { display: inline-flex; min-height: 2rem; box-sizing: border-box; align-items: center; justify-content: center; padding: .45rem .72rem; border: 1px solid var(--app-border); border-radius: .5rem; background: var(--app-surface); color: var(--app-foreground); font-size: .75rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.demo-action-button:hover { border-color: var(--app-accent-border); background: var(--app-surface-hover); }
.demo-action-button--primary { border-color: var(--app-brand); background: var(--app-brand); color: var(--app-on-brand); }
.demo-action-button--primary:hover { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-on-brand); }
.demo-action-button:disabled { opacity: .48; cursor: not-allowed; }
.demo-data-panel { overflow: hidden; }
.demo-data-panel__heading { align-items: flex-end; padding: 1rem 1.1rem; border-bottom: 1px solid var(--app-border); }
.demo-data-panel__heading small { color: var(--app-foreground-muted); }
.demo-data-tools { display: flex; min-width: 0; align-items: flex-end; gap: .8rem; }
.demo-data-search { display: grid; min-width: min(19rem, 36vw); height: 2.35rem; box-sizing: border-box; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: 0 .55rem; border: 1px solid var(--app-border); border-radius: .58rem; background: var(--app-background); color: var(--app-foreground-muted); transition: border-color .16s ease, box-shadow .16s ease; }
.demo-data-search:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft); color: var(--app-accent); }
.demo-data-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--app-foreground); font: inherit; font-size: .76rem; }
.demo-data-search input::placeholder { color: var(--app-foreground-muted); opacity: .8; }
.demo-data-search input::-webkit-search-cancel-button { display: none; }
.demo-data-search button { display: grid; width: 1.45rem; height: 1.45rem; padding: 0; place-items: center; border: 0; border-radius: .35rem; background: transparent; color: var(--app-foreground-muted); font-size: 1rem; cursor: pointer; }
.demo-data-search button:hover { background: var(--app-surface-hover); color: var(--app-foreground); }
.demo-data-meta { display: grid; justify-items: end; gap: .12rem; white-space: nowrap; }
.demo-data-meta > span { color: var(--app-foreground-muted); font-size: .6rem; }
.demo-data-panel .data-grid-container { border: 0; border-radius: 0; box-shadow: none; }

@container application-shell-workbench (max-width: 50rem) {
    .demo-overview-grid,
    .demo-detail-grid { grid-template-columns: 1fr; }
    .demo-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-data-panel__heading { align-items: stretch; flex-direction: column; }
    .demo-data-tools { width: 100%; }
    .demo-data-search { min-width: 0; flex: 1; }
    .person-overview-grid { grid-template-columns: 1fr 1fr; }
    .person-overview-card--identity { grid-column: 1 / -1; }
}

@container application-shell-workbench (max-width: 34rem) {
    .demo-app-environment { display: none; }
    .demo-profile summary b,
    .demo-profile summary > svg { display: none; }
    .demo-overview-grid,
    .demo-form-grid,
    .demo-detail-list { grid-template-columns: 1fr; }
    .demo-overview-card { min-height: auto; }
    .demo-overview-card--feature { min-height: 17rem; }
    .demo-detail-list div:nth-child(odd) { padding-right: 0; }
    .demo-data-tools { align-items: stretch; flex-direction: column; }
    .demo-data-meta { justify-items: start; }
    .person-context-action span { display: none; }
    .person-section-heading { align-items: flex-start; flex-direction: column; }
    .person-overview-grid,
    .person-results-grid { grid-template-columns: 1fr; }
    .person-overview-card--identity { grid-column: auto; }
    .person-overview-card--identity dl { grid-template-columns: 1fr; }
    .person-overview-card--identity dl div:nth-child(odd) { padding-right: 0; }
    .person-result-card:first-child { grid-row: auto; min-height: 18rem; }
    .person-checkup-list article,
    .person-document-list article { grid-template-columns: auto minmax(0, 1fr) auto; }
    .person-checkup-list article > .demo-status,
    .person-document-list article > .demo-status { grid-column: 2; justify-self: start; }
}

.demo-record-link { display: grid; padding-block: .15rem; color: var(--app-foreground); text-decoration: none; }
.demo-record-link:hover strong { color: var(--app-accent); text-decoration: underline; }
.demo-record-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-record-link small { margin-top: .1rem; color: var(--app-foreground-muted); font-size: .65rem; }
.demo-status { display: inline-flex; padding: .25rem .45rem; border: 1px solid var(--app-border); border-radius: 99rem; background: var(--app-surface-muted); font-size: .65rem; font-weight: 750; white-space: nowrap; }
.demo-status--active,
.demo-status--complete { border-color: var(--app-success-border); background: var(--app-success-soft); color: var(--app-success); }
.demo-status--in-review { border-color: var(--app-warning-border); background: var(--app-warning-soft); color: var(--app-warning); }
.demo-row-actions { display: flex; gap: .25rem; }
.demo-row-actions button { padding: .25rem .35rem; border: 0; background: transparent; color: var(--app-accent); font-size: .68rem; font-weight: 700; cursor: pointer; }
.demo-row-actions button:last-child { color: var(--app-danger); }
.demo-row-actions button:hover { text-decoration: underline; }

.demo-detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .65fr); gap: 1rem; }
.demo-detail-primary,
.demo-detail-aside { padding: clamp(1rem, 2.5vw, 1.5rem); }
.demo-detail-primary h2 { margin: .55rem 0 .4rem; font-family: var(--app-font-heading); font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -.04em; }
.demo-detail-primary > p { max-width: 55rem; margin: 0; color: var(--app-foreground-muted); line-height: 1.6; }
.demo-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.75rem 0 0; border-top: 1px solid var(--app-border); }
.demo-detail-list div { padding: .9rem 0; border-bottom: 1px solid var(--app-border); }
.demo-detail-list div:nth-child(odd) { padding-right: 1rem; }
.demo-detail-list dt { color: var(--app-foreground-muted); font-size: .65rem; font-weight: 750; text-transform: uppercase; }
.demo-detail-list dd { margin: .3rem 0 0; font-weight: 680; }
.demo-timeline { display: grid; gap: 0; margin: 1rem 0 0; padding: 0; list-style: none; }
.demo-timeline li { position: relative; display: grid; grid-template-columns: .65rem minmax(0, 1fr); gap: .7rem; min-height: 3.5rem; }
.demo-timeline li:not(:last-child)::before { position: absolute; top: .55rem; bottom: -.2rem; left: .26rem; width: 1px; background: var(--app-border); content: ""; }
.demo-timeline i { position: relative; z-index: 1; width: .55rem; height: .55rem; margin-top: .25rem; border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 .25rem var(--app-accent-soft); }
.demo-timeline div { display: grid; align-content: start; }
.demo-timeline strong { font-size: .78rem; }
.demo-timeline small { margin-top: .15rem; color: var(--app-foreground-muted); font-size: .67rem; }

.person-context { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; }
.person-context > span { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .2rem .72rem; background: var(--app-brand); color: var(--app-on-brand); font-size: .62rem; font-weight: 850; }
.person-context > div { display: grid; min-width: 0; }
.person-context strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.person-context small { color: var(--app-foreground-muted); font-size: .62rem; }
.person-context > i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 .25rem var(--app-success-soft); }
.person-context-action { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .58rem; border: 1px solid var(--app-border); border-radius: .48rem; background: var(--app-surface); color: var(--app-foreground); font-size: .7rem; font-weight: 750; cursor: pointer; }
.person-context-action:hover { background: var(--app-surface-hover); }
.person-nav-count { display: grid; min-width: 1.25rem; height: 1.25rem; margin-left: .05rem; place-items: center; border-radius: 99rem; background: var(--app-warning-soft); color: var(--app-warning); font-size: .6rem; }
.person-workspace-content { min-width: 0; margin-top: 1rem; }

.person-section-heading { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .25rem .15rem .9rem; border-bottom: 1px solid var(--app-border); }
.person-section-heading > div { min-width: 0; }
.person-section-heading > div > span,
.person-card-label { color: var(--app-accent); font-size: .62rem; font-weight: 850; letter-spacing: .13em; }
.person-section-heading h2 { margin: .28rem 0 .2rem; font-family: var(--app-font-heading); font-size: clamp(1.35rem, 2.7vw, 2.15rem); line-height: 1; letter-spacing: -.035em; }
.person-section-heading p { max-width: 46rem; margin: 0; color: var(--app-foreground-muted); font-size: .78rem; line-height: 1.5; }
.person-completion { display: inline-flex; align-items: baseline; gap: .35rem; padding: .5rem .7rem; border: 1px solid var(--app-success-border); border-radius: .2rem .7rem; background: var(--app-success-soft); color: var(--app-success); font-size: .65rem; white-space: nowrap; }
.person-completion strong { font-family: var(--app-font-heading); font-size: 1.05rem; }
.person-completion--warning { border-color: var(--app-warning-border); background: var(--app-warning-soft); color: var(--app-warning); }

.person-overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(14rem, .65fr) minmax(15rem, .8fr); gap: 1rem; }
.person-overview-card,
.person-result-card { min-width: 0; padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--app-border); border-radius: .2rem 1rem .2rem 1rem; background: var(--app-surface); box-shadow: 0 .65rem 2rem var(--app-shadow-color); }
.person-overview-card--identity dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .8rem 0 0; }
.person-overview-card--identity dl div { padding: .7rem 0; border-bottom: 1px solid var(--app-border); }
.person-overview-card--identity dl div:nth-child(odd) { padding-right: .75rem; }
.person-overview-card dt { color: var(--app-foreground-muted); font-size: .62rem; font-weight: 750; text-transform: uppercase; }
.person-overview-card dd { margin: .25rem 0 0; font-size: .8rem; font-weight: 680; }
.person-overview-card--signal { display: flex; flex-direction: column; background: linear-gradient(150deg, var(--app-warning-soft), transparent 65%), var(--app-surface); }
.person-signal-value { margin-top: 1.8rem; color: var(--app-warning); font-family: var(--app-font-heading); font-size: 3.4rem; line-height: .8; }
.person-overview-card h3 { margin: .55rem 0 .3rem; font-family: var(--app-font-heading); font-size: 1.15rem; }
.person-overview-card p { margin: 0; color: var(--app-foreground-muted); font-size: .76rem; line-height: 1.55; }
.person-overview-card > a { align-self: flex-start; margin-top: auto; padding-top: 1rem; color: var(--app-accent); font-size: .72rem; font-weight: 780; text-decoration: none; }
.person-overview-card--timeline ol { display: grid; gap: .15rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.person-overview-card--timeline li { position: relative; display: grid; grid-template-columns: .6rem 1fr; gap: .6rem; min-height: 2.9rem; }
.person-overview-card--timeline li:not(:last-child)::before { position: absolute; top: .5rem; bottom: -.2rem; left: .24rem; width: 1px; background: var(--app-border); content: ""; }
.person-overview-card--timeline li > i { position: relative; z-index: 1; width: .5rem; height: .5rem; margin-top: .22rem; border: 1px solid var(--app-border); border-radius: 50%; background: var(--app-surface); }
.person-overview-card--timeline li.is-complete > i { border-color: var(--app-success); background: var(--app-success); }
.person-overview-card--timeline li.is-current > i { border-color: var(--app-warning); background: var(--app-warning); box-shadow: 0 0 0 .25rem var(--app-warning-soft); }
.person-overview-card--timeline li div { display: grid; align-content: start; }
.person-overview-card--timeline li strong { font-size: .72rem; }
.person-overview-card--timeline li small { margin-top: .1rem; color: var(--app-foreground-muted); font-size: .62rem; }

.person-checkup-list,
.person-document-list { display: grid; gap: .55rem; }
.person-checkup-list article,
.person-document-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; min-width: 0; align-items: center; gap: .8rem; padding: .8rem .9rem; border: 1px solid var(--app-border); border-radius: .2rem .8rem .2rem .8rem; background: var(--app-surface); box-shadow: 0 .4rem 1.4rem var(--app-shadow-color); }
.person-checkup-icon,
.person-document-list article > span:first-child { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .2rem .72rem; background: var(--app-accent-soft); color: var(--app-accent); }
.person-checkup-list article > div,
.person-document-list article > div { display: grid; min-width: 0; }
.person-checkup-list article strong,
.person-document-list article strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.person-checkup-list article small,
.person-document-list article small { margin-top: .12rem; color: var(--app-foreground-muted); font-size: .65rem; }
.person-checkup-list article > button,
.person-document-list article > button { padding: .3rem .4rem; border: 0; background: transparent; color: var(--app-accent); font-size: .7rem; font-weight: 750; cursor: pointer; }

.person-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.person-result-card { display: flex; min-height: 14rem; box-sizing: border-box; flex-direction: column; }
.person-result-card:first-child { grid-row: span 2; min-height: 29rem; justify-content: flex-end; }
.person-result-card > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.person-result-card > div > span:first-child { color: var(--app-accent); font-size: .62rem; font-weight: 850; letter-spacing: .13em; }
.person-result-card > strong { max-width: 22ch; margin-top: .75rem; font-family: var(--app-font-heading); font-size: clamp(1.35rem, 2.7vw, 2.25rem); line-height: 1; letter-spacing: -.035em; }
.person-result-card > p { max-width: 52rem; margin: .55rem 0 0; color: var(--app-foreground-muted); font-size: .78rem; line-height: 1.6; }
.person-result-card footer { display: grid; margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--app-border); }
.person-result-card footer span { color: var(--app-foreground-muted); font-size: .62rem; text-transform: uppercase; }
.person-result-card footer b { margin-top: .2rem; font-size: .76rem; }
.person-result-card--attention { border-color: var(--app-warning-border); background: linear-gradient(145deg, var(--app-warning-soft), transparent 58%), var(--app-surface); }
.person-result-card--positive { border-color: var(--app-success-border); background: linear-gradient(145deg, var(--app-success-soft), transparent 58%), var(--app-surface); }

.playbook-loading,
.playbook-not-found { display: grid; min-height: 100vh; place-items: center; background: #111317; color: #f5f5f5; font: 600 1rem/1.5 sans-serif; }
#blazor-error-ui { display: none; position: fixed; z-index: 100; inset: auto 0 0; padding: .8rem; background: #fff1a8; color: #2b2100; }

@media (max-width: 84rem) {
    .playbook-bar { grid-template-columns: auto auto minmax(10rem, 1fr) auto; }
    .playbook-segment--viewport { display: none; }
    .playbook-canvas { grid-template-columns: 1fr; }
    .playbook-index { display: none; }
    .playbook-intro { grid-template-columns: 1fr; }
}

@media (max-width: 50rem) {
    .playbook-bar { grid-template-columns: auto 1fr auto; }
    .playbook-nav { justify-self: end; }
    .playbook-control { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto 1fr; justify-content: stretch; }
    .landing-workbench__note { grid-template-columns: 1fr auto; }
    .landing-workbench__note p { grid-column: 1 / -1; grid-row: 2; }
    .landing-split { grid-template-columns: 1fr; }
    .landing-product-preview__heading { grid-template-columns: 1fr; }
    .access-workbench__note { grid-template-columns: 1fr auto; }
    .access-workbench__note nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
    .playbook-marketing-grid, .token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-overview-grid,
    .demo-detail-grid { grid-template-columns: 1fr; }
    .demo-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-data-panel__heading { align-items: stretch; flex-direction: column; }
    .demo-data-tools { width: 100%; }
    .demo-data-search { min-width: 0; flex: 1; }
    .person-overview-grid { grid-template-columns: 1fr 1fr; }
    .person-overview-card--identity { grid-column: 1 / -1; }
}

@media (max-width: 34rem) {
    .playbook-bar { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; padding: .55rem .65rem; }
    .playbook-brand { grid-column: 1; grid-row: 1; }
    .playbook-brand strong { display: none; }
    .playbook-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; overflow-x: auto; }
    .playbook-nav > a, .playbook-nav-group { flex: 1; }
    .playbook-nav > a, .playbook-nav-group > summary { justify-content: center; padding-inline: .4rem; text-align: center; font-size: .72rem; }
    .playbook-nav-group__menu { position: fixed; top: 7.5rem; right: .65rem; left: .65rem; max-height: calc(100dvh - 8.5rem); overflow-y: auto; }
    .playbook-control { grid-column: 1 / -1; grid-row: 3; }
    .playbook-segment { grid-column: 2; grid-row: 1; }
    .playbook-card-grid, .playbook-marketing-grid, .token-grid { grid-template-columns: 1fr; }
    .playbook-intro h1 { max-width: 100%; font-size: clamp(2.35rem, 12vw, 3.2rem); overflow-wrap: anywhere; }
    .landing-workbench { padding: .5rem; }
    .access-workbench { padding: .5rem; }
    .landing-workbench__note { grid-template-columns: 1fr; }
    .landing-workbench__note p { grid-column: auto; grid-row: auto; }
    .landing-workbench__badge { justify-self: start; }
    .access-workbench__note { grid-template-columns: minmax(0, 1fr); }
    .access-workbench__note nav { grid-column: auto; grid-row: auto; width: 100%; box-sizing: border-box; }
    .access-workbench__note > :last-child { justify-self: start; }
    .landing-preview { border-radius: .7rem; }
    .landing-site-header > * { min-height: 3.6rem; gap: .65rem; }
    .landing-site-header nav { display: none; }
    .landing-site-header__action { margin-left: auto; }
    .landing-hero-visual { min-height: 19rem; }
    .landing-hero-visual--framed { border-radius: .3rem 1.35rem .3rem 1.35rem; }
    .landing-hero-visual > img { height: 23rem; padding: .75rem .75rem 0; }
    .landing-hero-visual--cover > img { padding: 0; }
    .landing-hero-visual figcaption { display: none; }
    .landing-dashboard__body { grid-template-columns: 1fr; }
    .landing-dashboard__score { width: 6rem; }
    .landing-footer > * { display: grid; }
    .demo-app-environment { display: none; }
    .demo-profile summary b,
    .demo-profile summary > svg { display: none; }
    .demo-overview-grid,
    .demo-form-grid,
    .demo-detail-list { grid-template-columns: 1fr; }
    .demo-overview-card { min-height: auto; }
    .demo-overview-card--feature { min-height: 17rem; }
    .demo-detail-list div:nth-child(odd) { padding-right: 0; }
    .demo-data-tools { align-items: stretch; flex-direction: column; }
    .demo-data-meta { justify-items: start; }
    .person-context-action span { display: none; }
    .person-section-heading { align-items: flex-start; flex-direction: column; }
    .person-overview-grid,
    .person-results-grid { grid-template-columns: 1fr; }
    .person-overview-card--identity { grid-column: auto; }
    .person-overview-card--identity dl { grid-template-columns: 1fr; }
    .person-overview-card--identity dl div:nth-child(odd) { padding-right: 0; }
    .person-result-card:first-child { grid-row: auto; min-height: 18rem; }
    .person-checkup-list article,
    .person-document-list article { grid-template-columns: auto minmax(0, 1fr) auto; }
    .person-checkup-list article > .demo-status,
    .person-document-list article > .demo-status { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .playbook, .playbook-sheet, .landing-reveal.is-reveal-ready { transition: none; }
    .landing-reveal.is-reveal-ready { opacity: 1; transform: none; }
    .access-status__pulse i { animation: none; }
}