:root {
    --presentation-border:#e4e3ee;
    --muted:#646779;
    --violet:#7a2ff5;
    --ease:cubic-bezier(.22,1,.36,1)
}

body {
    background:#f8f9fc;
    color:#1e2130
}

button {
    font:inherit;
    cursor:pointer
}

button,a {
    -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #9758ff;
    outline-offset:5px
}

button {
    color:inherit
}

button:disabled {
    cursor:default;
    opacity:.3
}

button[hidden],[hidden] {
    display:none!important
}

h1,h2,h3,p {
    margin-top:0
}

h1,h2,h3 {
    letter-spacing:-.055em
}

h2 {
    font-size:clamp(2.4rem,4.5vw,4.3rem);
    line-height:1.08;
    font-weight:600;
    margin-bottom:26px
}

h2 em,h1 em {
    font-style:normal;
    color:var(--violet)
}

h3 {
    font-size:1.4rem;
    line-height:1.2;
    letter-spacing:-.035em
}

.lead {
    font-size:clamp(1.05rem,1.4vw,1.25rem);
    color:var(--muted);
    line-height:1.65
}

.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
    color:#66677b
}

.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#8a47ed;
    box-shadow:0 0 0 5px #8a47ed12;
    flex-shrink:0
}

.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:100;
    background:white;
    padding:15px
}

.skip-link:focus {
    top:10px
}

.topbar {
    height:88px;
    position:fixed;
    inset:0 0 auto;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5%;
    background:#f8f9fcd9;
    backdrop-filter:blur(20px);
    border-bottom:1px solid #dddded55
}

.wordmark {
    display:inline-flex;
    align-items:center;
    gap:11px;
    font-size:25px;
    font-weight:800;
    letter-spacing:-1px
}

.wordmark .brand-orb {
    --orb-size:29px
}

.wordmark small {
    font-size:12px;
    font-weight:500;
    letter-spacing:0;
    color:var(--muted)
}

.wordmark-divider {
    height:18px;
    width:1px;
    background:#d9d8e3;
    margin:0 8px
}

.topbar-actions {
    display:flex;
    align-items:center;
    gap:22px
}

.quiet-button {
    border:0;
    background:transparent;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px
}

.fullscreen-button>span:first-child {
    font-size:22px
}

.menu-button {
    border:1px solid #dedce9;
    background:#ffffff80;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:22px;
    padding:11px 19px;
    font-size:12px
}

.menu-icon {
    width:16px;
    display:grid;
    gap:4px
}

.menu-icon i {
    height:1px;
    background:#343146;
    width:16px
}

.menu-icon i:last-child {
    width:10px;
    justify-self:end
}

.reading-progress {
    height:2px;
    position:fixed;
    top:87px;
    left:0;
    right:0;
    z-index:31
}

#reading-progress {
    display:block;
    height:100%;
    background:var(--gradient-rainbow);
    width:0;
    transition:width .2s
}

.chapter {
    position:relative;
    min-height:100svh;
    scroll-margin-top:0;
    padding:142px 0 110px;
    overflow:clip;
    isolation:isolate;
    display:flex;
    align-items:center
}

.section-wrap {
    width:min(1180px,84%);
    margin:auto
}

.section-heading {
    text-align:center;
    max-width:920px;
    margin:0 auto 60px
}

.section-heading .eyebrow {
    justify-content:center
}

.section-heading .lead {
    max-width:620px;
    margin:0 auto
}

.split-heading {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:80px;
    align-items:end;
    margin-bottom:56px
}

.split-heading .lead {
    max-width:400px;
    margin:0 0 28px
}

.split-layout {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:65px;
    align-items:center
}

.hero {
    padding:140px 8% 90px;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:30px;
    min-height:max(820px,100svh)
}

.hero h1 {
    font-size:clamp(3.3rem,5.9vw,6rem);
    font-weight:600;
    line-height:1.035;
    margin:0 0 28px;
    letter-spacing:-.065em
}

.hero .lead {
    max-width:440px;
    margin-bottom:32px
}

.hero-copy {
    position:relative;
    z-index:2
}

.hero-glow {
    position:absolute;
    width:1000px;
    height:1000px;
    background:radial-gradient(ellipse,#e3d6fc80,transparent 62%);
    top:-120px;
    right:-180px;
    z-index:-2
}

.hero-grid {
    position:absolute;
    inset:88px 0 0;
    background-image:linear-gradient(#8e7cb308 1px,transparent 1px),linear-gradient(90deg,#8e7cb308 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(90deg,transparent,#000);
    z-index:-1
}

.primary-link {
    display:inline-flex;
    align-items:center;
    gap:35px;
    padding:17px 23px;
    border-radius:40px;
    background:var(--gradient-cta);
    color:white;
    font-size:13px;
    font-weight:600;
    box-shadow:0 10px 30px #7a2ff525;
    transition:transform .3s,box-shadow .3s
}

.primary-link:hover {
    transform:translateY(-3px);
    box-shadow:0 15px 40px #7a2ff540
}

.primary-link>span {
    font-size:20px
}

.hero-proof {
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:44px;
    font-size:11px;
    color:var(--muted)
}

.hero-proof>span:first-child {
    display:flex;
    align-items:center;
    gap:12px
}

.hero-proof strong {
    font-size:40px;
    color:var(--color-ink);
    font-weight:500;
    letter-spacing:-3px
}

.hero-proof b {
    font-weight:500;
    color:var(--color-ink)
}

.hero-proof i {
    width:1px;
    height:30px;
    background:#dbd8e5
}

.hero-visual {
    position:relative;
    aspect-ratio:1;
    max-width:570px;
    display:grid;
    place-items:center;
    width:100%;
    justify-self:center
}

.orbit {
    position:absolute;
    border:1px solid #bca8e54d;
    border-radius:50%;
    width:70%;
    height:70%;
    transform:rotate(-25deg) scaleX(1.15)
}

.orbit-two {
    width:96%;
    height:96%;
    border-style:dashed;
    opacity:.65;
    animation:orbit-turn 90s linear infinite
}

.orbit-one:after {
    content:'';
    position:absolute;
    width:9px;
    height:9px;
    background:#b99be9;
    border:3px solid #f8f9fc;
    top:14%;
    left:12%;
    border-radius:50%
}

.orbit-center {
    width:48%;
    aspect-ratio:1;
    background:linear-gradient(135deg,#ffffffcc,#f5efffa6);
    border:1px solid white;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 30px 80px #74549115,inset 0 0 50px #fff8;
    backdrop-filter:blur(10px)
}

.orbit-center .brand-orb {
    --orb-size:65px;
    margin-bottom:12px
}

.orbit-center strong {
    font-size:40px;
    letter-spacing:-2px
}

.orbit-center small {
    font-size:10px;
    color:var(--muted);
    margin-top:5px
}

.orbit-label {
    display:flex;
    gap:10px;
    align-items:center;
    position:absolute;
    background:#fffc;
    border:1px solid white;
    box-shadow:0 12px 30px #503a7810;
    padding:15px 19px;
    border-radius:13px;
    font-size:12px;
    animation:float 7s ease-in-out infinite
}

.mini-icon {
    width:30px;
    height:30px;
    border-radius:9px;
    background:#eee6ff;
    color:#8c43ed;
    display:inline-grid;
    place-items:center;
    font-style:normal
}

.orbit-label-a {
    top:10%;
    left:13%
}

.orbit-label-b {
    right:-2%;
    top:34%;
    animation-delay:-2s
}

.orbit-label-c {
    left:-3%;
    top:53%;
    animation-delay:-4s
}

.orbit-label-d {
    bottom:10%;
    right:5%;
    animation-delay:-1s
}

.floating-note {
    position:absolute;
    right:0;
    top:4%;
    font-size:10px;
    color:var(--muted);
    line-height:1.8;
    transform:rotate(6deg);
    background:#fff9;
    padding:15px 18px;
    border:1px solid white;
    border-radius:12px
}

.floating-note .status-dot {
    margin-right:8px;
    width:5px;
    height:5px;
    background:#71bc9a;
    box-shadow:none
}

.floating-note b {
    color:#454154;
    font-weight:500
}

.visual-caption {
    position:absolute;
    bottom:-30px;
    letter-spacing:.15em;
    font-size:8px;
    color:#9790a6
}

.scroll-cue {
    position:absolute;
    bottom:32px;
    left:8%;
    display:flex;
    align-items:center;
    gap:18px;
    font-size:10px;
    color:var(--muted)
}

.scroll-cue>span:last-child {
    border:1px solid #dedbe7;
    border-radius:50%;
    width:25px;
    height:32px;
    display:grid;
    place-items:center
}

.chapter-rail {
    position:fixed;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:20
}

.chapter-rail a {
    width:20px;
    height:10px;
    display:grid;
    place-items:center;
    position:relative
}

.chapter-rail a:before {
    content:'';
    width:4px;
    height:4px;
    background:#c8c3d2;
    border-radius:50%;
    transition:transform .3s,background .3s
}

.chapter-rail a[aria-current]:before {
    background:var(--violet);
    transform:scale(1.8)
}

.chapter-rail a:after {
    content:attr(aria-label);
    position:absolute;
    right:25px;
    white-space:nowrap;
    font-size:10px;
    background:#fff;
    padding:6px 10px;
    border-radius:6px;
    opacity:0;
    pointer-events:none;
    box-shadow:0 5px 20px #1e213010
}

.chapter-rail a:hover:after,.chapter-rail a:focus-visible:after {
    opacity:1
}

.chapter-controls {
    position:fixed;
    bottom:26px;
    right:4.8%;
    display:flex;
    gap:25px;
    align-items:center;
    z-index:25;
    background:#ffffffd9;
    backdrop-filter:blur(16px);
    border:1px solid #e7e3ef;
    padding:8px 9px 8px 19px;
    border-radius:40px;
    box-shadow:0 8px 30px #1e213009;
    font-size:10px;
    color:#9691a3
}

.chapter-controls b {
    font-size:12px;
    color:#32293f;
    font-weight:600
}

.control-slash {
    padding:0 7px
}

.chapter-controls>div {
    display:flex;
    gap:5px
}

.chapter-controls button {
    width:30px;
    height:30px;
    border:1px solid #e7e3ef;
    border-radius:50%;
    background:transparent
}

.chapter-controls button:hover:not(:disabled) {
    background:#eee6ff;
    color:var(--violet)
}

.problem {
    background:#f0eff6
}

.scatter-board {
    max-width:900px;
    margin:0 auto 50px
}

.scattered-items {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px
}

.scattered-items>span {
    padding:28px 14px;
    background:#fff9;
    border:1px solid white;
    border-radius:14px;
    display:grid;
    gap:17px;
    text-align:center;
    color:#a79cb7;
    font-size:24px;
    transform:rotate(-3deg)
}

.scattered-items>span:nth-child(even) {
    transform:rotate(3deg)
}

.scattered-items b {
    font-size:11px;
    color:#676174;
    font-weight:500
}

.connection-line {
    height:50px;
    width:65%;
    margin:auto;
    border-left:1px dashed #beaccf;
    border-right:1px dashed #beaccf;
    border-bottom:1px dashed #beaccf;
    border-radius:0 0 18px 18px;
    position:relative
}

.connection-line:after {
    content:'';
    position:absolute;
    width:1px;
    height:25px;
    background:#beaccf;
    top:100%;
    left:50%
}

.connected-file {
    margin:25px auto 0;
    padding:24px;
    background:#fff;
    max-width:560px;
    display:flex;
    align-items:center;
    gap:20px;
    border:1px solid #e1d6f1;
    border-radius:18px;
    box-shadow:0 20px 60px #7a2ff50b
}

.file-symbol {
    font-size:30px;
    color:var(--violet);
    background:#f1e8ff;
    border-radius:12px;
    padding:10px 16px
}

.connected-file small {
    font-size:8px;
    letter-spacing:.15em;
    color:var(--violet)
}

.connected-file strong {
    font-size:19px;
    display:block;
    margin:5px 0
}

.connected-file p {
    font-size:11px;
    color:var(--muted);
    margin:0;
    max-width:270px
}

.file-check {
    color:#7a2ff5;
    font-size:20px;
    margin-left:auto
}

.statement {
    text-align:center;
    font-size:22px;
    font-weight:500;
    letter-spacing:-.5px;
    margin:0
}

.statement span {
    color:var(--violet)
}

.timeline {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    margin-top:90px
}

.timeline article {
    padding-right:25px
}

.timeline article>span {
    font-size:25px;
    letter-spacing:-1px;
    color:#a8a1b3
}

.timeline i {
    display:block;
    height:1px;
    background:#ded8e9;
    margin:28px 0;
    position:relative
}

.timeline i:before {
    content:'';
    position:absolute;
    width:7px;
    height:7px;
    background:#bcb1ce;
    border-radius:50%;
    top:-3px
}

.timeline h3 {
    font-size:16px;
    letter-spacing:-.4px;
    min-height:40px
}

.timeline p {
    font-size:12px;
    color:var(--muted);
    max-width:180px;
    line-height:1.8
}

.timeline-now>span {
    color:var(--violet)!important
}

.timeline-now i:before {
    background:var(--violet);
    box-shadow:0 0 0 7px #7a2ff510
}

.history-foot {
    border-top:1px solid var(--presentation-border);
    margin-top:65px;
    padding-top:30px;
    display:flex;
    align-items:center;
    gap:35px
}

.history-foot strong {
    font-size:65px;
    letter-spacing:-4px;
    font-weight:500
}

.history-foot>span {
    font-size:13px;
    color:var(--muted)
}

.foundation {
    background:#eeedf5
}

.paths {
    display:grid;
    grid-template-columns:1fr 1fr 1.15fr;
    gap:16px
}

.paths article {
    padding:30px;
    background:#ffffff85;
    border:1px solid white;
    border-radius:20px
}

.path-number {
    font-size:9px;
    letter-spacing:.15em;
    color:#8f879c
}

.paths h3 {
    font-size:20px;
    margin:28px 0 20px
}

.paths p,.paths li {
    font-size:12px;
    line-height:1.7;
    color:var(--muted)
}

.paths ul {
    padding:16px 0 0 15px;
    border-top:1px solid #e4dfed
}

.paths li {
    margin-bottom:12px
}

.paths .path-sudi {
    background:#292036;
    color:#fff;
    border-color:#57436d;
    box-shadow:0 20px 40px #3f235315
}

.path-sudi p,.path-sudi li {
    color:#d3c9e0
}

.path-sudi .path-number {
    color:#c7a2ff
}

.path-sudi ul {
    border-color:#ffffff20
}

.ownership {
    margin-top:75px;
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:100px
}

.ownership h3 {
    font-size:31px;
    font-weight:500
}

.ownership p {
    font-size:13px;
    color:var(--muted);
    max-width:280px
}

.segmented {
    display:flex;
    gap:3px;
    background:#e4dfee80;
    padding:4px;
    border:1px solid #ded7e7;
    border-radius:40px;
    max-width:400px
}

.segmented button {
    flex:1;
    border:0;
    background:transparent;
    font-size:11px;
    border-radius:30px;
    padding:12px;
    color:#756a85
}

.segmented button[aria-selected=true],.segmented button[aria-pressed=true] {
    background:white;
    color:#712bc5;
    box-shadow:0 3px 10px #40305010
}

.layer-list {
    list-style:none;
    margin:20px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.layer-list li {
    font-size:12px;
    padding-left:17px;
    position:relative
}

.layer-list li:before {
    content:'↗';
    position:absolute;
    left:0;
    color:var(--violet)
}

.cases {
    background:#fafafe
}

.family-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-bottom:55px
}

.family-grid article {
    border-top:1px solid #d9d0e9;
    padding-top:24px
}

.family-grid article>span {
    font-size:8px;
    letter-spacing:.14em;
    color:#8a6baa
}

.family-grid h3 {
    font-size:18px;
    margin:18px 0 12px;
    min-height:44px
}

.family-grid p {
    font-size:12px;
    color:var(--muted);
    min-height:60px
}

.family-grid small {
    font-size:10px;
    color:#7d668d
}

.case-study {
    border:1px solid #e2d9ed;
    border-radius:22px;
    overflow:hidden;
    background:linear-gradient(115deg,#f1eafa,#faf7ff)
}

.case-select {
    display:flex;
    gap:0;
    border-bottom:1px solid #e2d9ed
}

.case-select button {
    border:0;
    border-right:1px solid #e2d9ed;
    padding:20px 28px;
    background:transparent;
    font-size:12px;
    display:flex;
    gap:35px;
    align-items:center
}

.case-select button[aria-selected=true] {
    background:#fff;
    color:var(--violet)
}

.case-panel {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:80px;
    padding:45px
}

.tag {
    font-size:8px;
    letter-spacing:.12em;
    color:#8e5ab7
}

.case-panel h3 {
    font-size:32px;
    margin:20px 0
}

.case-panel p {
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}

.case-flow {
    background:#fff9;
    border:1px solid white;
    border-radius:14px;
    padding:28px
}

.case-flow>small {
    font-size:8px;
    color:#8a769c;
    letter-spacing:.15em
}

.case-flow ol {
    list-style:none;
    padding:0;
    margin:22px 0
}

.case-flow li {
    font-size:12px;
    display:flex;
    align-items:center;
    gap:14px;
    margin:16px 0
}

.case-flow li span {
    font-size:9px;
    border:1px solid #e6dfef;
    border-radius:50%;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    color:#8d63ba;
    flex-shrink:0
}

.case-flow strong {
    font-size:12px;
    color:var(--violet);
    display:block;
    border-top:1px solid #e9e1f2;
    padding-top:20px
}

.feature-list {
    padding:0;
    list-style:none;
    margin:30px 0 0
}

.feature-list li {
    padding:13px 0 13px 23px;
    position:relative;
    border-bottom:1px solid #e6e3ed;
    font-size:12px;
    color:var(--muted)
}

.feature-list li:before {
    content:'↗';
    position:absolute;
    left:0;
    color:var(--violet)
}

.product-window {
    background:#fff;
    border:1px solid #e5deed;
    box-shadow:0 25px 70px #4e306a0d;
    border-radius:18px;
    overflow:hidden;
    transform:perspective(1200px) rotateY(-4deg)
}

.window-bar {
    height:42px;
    background:#f9f7fc;
    border-bottom:1px solid #eae5f0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    color:#a09aa9;
    font-size:12px
}

.window-bar small {
    font-size:9px;
    color:#89818e
}

.window-dots {
    font-size:8px;
    letter-spacing:2px;
    color:#d6d0df
}

.record-demo {
    padding:25px
}

.record-title {
    display:flex;
    align-items:center;
    gap:13px
}

.record-title small {
    font-size:7px;
    letter-spacing:.12em;
    color:#a197ae
}

.record-title h3 {
    font-size:17px;
    margin:4px 0
}

.record-stages {
    display:flex;
    align-items:center;
    gap:6px;
    margin:25px 0 35px;
    font-size:8px;
    color:#958a9f
}

.record-stages>span {
    padding:8px;
    border:1px solid #e8e3ef;
    border-radius:6px
}

.record-stages i {
    flex:1;
    height:1px;
    background:#e8e3ef
}

.record-stages .current-stage {
    background:#efe4ff;
    color:#8139d9;
    border-color:#ddc5ff
}

.activity {
    display:flex;
    gap:12px;
    font-size:10px;
    line-height:1.8
}

.avatar {
    background:#efdeff;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    font-size:9px;
    color:#8c50b8;
    border-radius:50%;
    flex-shrink:0
}

.activity strong {
    font-size:10px
}

.activity strong small {
    font-size:9px;
    color:#aaa2b1;
    font-weight:400
}

.activity p {
    font-size:11px;
    color:#716879;
    background:#f9f6fd;
    padding:12px;
    border-radius:0 10px 10px;
    margin:8px 0
}

.activity mark {
    color:#8f41dc;
    background:#efe0ff;
    padding:2px 4px
}

.attachment {
    padding:5px 10px;
    border:1px solid #e7e0ef;
    border-radius:5px;
    color:#8e789f;
    font-size:8px
}

.system-activity {
    font-size:8px;
    color:#a396ac;
    padding:24px 0 24px 40px
}

.system-activity>span {
    color:#ba9ece
}

.record-task {
    display:flex;
    gap:10px;
    align-items:center;
    padding:15px;
    border-radius:10px;
    border:1px solid #eee6f5
}

.record-task>span:first-child {
    color:#b38cd1
}

.record-task b {
    display:block;
    font-size:10px
}

.record-task small {
    font-size:8px;
    color:#a397ab;
    display:block;
    margin-top:5px
}

.task-status {
    margin-left:auto;
    font-size:7px;
    padding:4px 6px;
    background:#fff5db;
    border-radius:5px;
    color:#a28236
}

.section-signoff {
    text-align:center;
    font-size:16px;
    color:#8e789d;
    margin:60px 0 0;
    font-weight:500;
    letter-spacing:-.3px
}

.identity {
    background:#eeedf6
}

.theme-showcase {
    background:white;
    border:1px solid #dfd9e9;
    border-radius:18px;
    box-shadow:0 30px 80px #5f417b12;
    overflow:hidden;
    --demo-bg:#fff;
    --demo-side:#f9f7fc;
    --demo-text:#302a3d;
    --demo-muted:#90859c;
    --demo-line:#e8e1f0;
    --demo-card:#faf8fe;
    transition:background .5s
}

.theme-showcase.dark {
    --demo-bg:#211d2b;
    --demo-side:#1b1724;
    --demo-text:#f0eaf9;
    --demo-muted:#9e91ae;
    --demo-line:#3d334c;
    --demo-card:#2a2336
}

.theme-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 20px;
    border-bottom:1px solid #e6deef;
    background:#fff
}

.theme-toolbar>span {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10px;
    color:#8a7999
}

.theme-toolbar .brand-orb {
    --orb-size:17px
}

.theme-toolbar .segmented {
    width:230px
}

.theme-toolbar button {
    padding:7px 12px;
    font-size:9px
}

.theme-dashboard {
    display:grid;
    grid-template-columns:190px 1fr;
    color:var(--demo-text);
    background:var(--demo-bg);
    transition:color .5s,background .5s;
    min-height:335px
}

.theme-dashboard aside {
    display:flex;
    flex-direction:column;
    background:var(--demo-side);
    border-right:1px solid var(--demo-line);
    padding:25px 15px;
    gap:18px;
    transition:background .5s
}

.dashboard-logo {
    font-size:15px;
    font-weight:600;
    letter-spacing:-.5px;
    margin-bottom:15px
}

.dashboard-logo>span {
    display:block;
    font-size:6px;
    letter-spacing:.18em;
    color:var(--demo-muted);
    margin-top:4px
}

.theme-dashboard aside>span:not(:first-child) {
    font-size:9px;
    color:var(--demo-muted);
    padding:8px
}

.theme-dashboard aside .sidebar-active {
    background:#7a2ff518;
    border-radius:6px;
    color:#a36bfc!important
}

.theme-dashboard aside>small {
    margin-top:auto;
    font-size:6px;
    color:var(--demo-muted);
    letter-spacing:.1em
}

.dashboard-body {
    padding:32px
}

.dashboard-body h3 {
    font-size:26px;
    margin:10px 0
}

.dashboard-body>p {
    font-size:10px;
    color:var(--demo-muted)
}

.dashboard-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:25px
}

.dashboard-cards article {
    background:var(--demo-card);
    border:1px solid var(--demo-line);
    border-radius:10px;
    padding:18px;
    transition:background .5s;
    overflow:hidden
}

.dashboard-cards article>span:first-child {
    display:block;
    font-size:8px;
    color:var(--demo-muted)
}

.dashboard-cards strong {
    font-size:18px;
    letter-spacing:-.7px;
    font-weight:500;
    display:block;
    margin:10px 0
}

.sparkline {
    display:block;
    height:40px;
    background:linear-gradient(0deg,#caa5ff70,#caa5ff10);
    clip-path:polygon(0 80%,15% 60%,30% 70%,45% 35%,60% 55%,80% 15%,100% 0,100% 100%,0 100%);
    border-bottom:1px solid #a772eb
}

.tiny-bars {
    display:flex;
    gap:8px;
    height:40px;
    align-items:end
}

.tiny-bars i {
    flex:1;
    background:#aa7ce9;
    border-radius:3px 3px 0 0;
    height:40%
}

.tiny-bars i:nth-child(2) {
    height:60%
}

.tiny-bars i:nth-child(3) {
    height:50%
}

.tiny-bars i:nth-child(4) {
    height:80%
}

.tiny-bars i:nth-child(5) {
    height:100%
}

.dashboard-check {
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#c4e7d92e;
    color:#7abc9f
}

.dashboard-bottom {
    display:flex;
    justify-content:space-between;
    margin-top:22px;
    padding-top:15px;
    border-top:1px solid var(--demo-line);
    font-size:8px;
    color:var(--demo-muted)
}

.identity-benefits {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:55px;
    margin-top:40px
}

.identity-benefits p {
    font-size:12px;
    color:var(--muted)
}

.identity-benefits b {
    display:block;
    color:#40334c;
    margin-bottom:8px;
    font-size:13px
}

.metric-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:25px 0
}

.metric-tags span {
    font-size:10px;
    border:1px solid #e2d8ef;
    background:#f1eafa;
    border-radius:30px;
    padding:7px 11px;
    color:#9463b9
}

.insights .split-layout>div>p:not(.eyebrow):not(.lead) {
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}

.insights blockquote {
    border-left:2px solid #b784ee;
    margin:30px 0 0;
    padding-left:20px;
    color:#8f70a5;
    font-size:16px;
    letter-spacing:-.3px
}

.video-card {
    background:#fff;
    border:1px solid #e3dce9;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px #5f417b12
}

.video-card video {
    width:100%;
    display:block;
    aspect-ratio:4/3;
    object-fit:contain;
    background:#f6f7fb
}

.video-card>p {
    font-size:11px;
    padding:20px;
    margin:0;
    color:#6d5a7c
}

.video-card>p>span {
    display:block;
    font-size:9px;
    color:#aaa0b3;
    margin-top:5px
}

.ai {
    background:#211b2b;
    color:#f5f1fb
}

.ai .eyebrow {
    color:#b5a7c5
}

.ai h2 {
    font-weight:500
}

.ai .lead {
    color:#afa2bf
}

.ai-gradient {
    background:var(--gradient-rainbow);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent
}

.beta {
    display:inline-block;
    letter-spacing:.08em;
    font-size:7px;
    border:1px solid #b498d655;
    padding:4px 7px;
    border-radius:20px;
    color:#a881d0;
    white-space:nowrap
}

.ai-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.ai-grid article {
    padding:40px;
    border:1px solid #ffffff15;
    border-radius:20px;
    background:#ffffff03
}

.ai-intro {
    display:flex;
    gap:30px
}

.ai-symbol {
    font-size:65px;
    line-height:1;
    color:#b795e4
}

.ai-grid small {
    font-size:8px;
    letter-spacing:.16em;
    color:#ad94c5
}

.ai-grid h3 {
    font-size:23px;
    font-weight:500;
    margin:24px 0 12px
}

.ai-grid p {
    font-size:12px;
    line-height:1.8;
    color:#b3a7c1
}

.ai-rules h3 {
    font-size:32px;
    margin-top:20px
}

.ai-rules ul {
    list-style:none;
    padding:0
}

.ai-rules li {
    font-size:11px;
    color:#aea0bd;
    margin:18px 0;
    padding-left:20px;
    position:relative;
    line-height:1.8
}

.ai-rules li:before {
    content:'↗';
    position:absolute;
    left:0;
    color:#b090dd
}

.ai-rules b {
    color:#d9cce7;
    font-weight:500
}

.beta-note {
    display:flex;
    gap:20px;
    align-items:center;
    padding:30px 0 0;
    max-width:780px
}

.beta-note p {
    font-size:11px;
    color:#b3a0c4;
    margin:0;
    line-height:1.8
}

.beta-note .status-dot {
    background:#b49ace
}

.workspace {
    background:#f3f1f8
}

.workspace-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.workspace-grid article {
    background:#ffffff9c;
    border:1px solid white;
    border-radius:18px;
    padding:30px;
    overflow:hidden
}

.workspace-icon {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    background:#eee4ff;
    color:#a166e8;
    font-size:25px;
    border-radius:12px;
    margin-bottom:28px
}

.workspace-grid article>small {
    font-size:8px;
    letter-spacing:.15em;
    color:#a080b7
}

.workspace-grid h3 {
    font-size:27px;
    font-weight:500;
    margin:18px 0
}

.workspace-grid p {
    font-size:12px;
    line-height:1.7;
    color:var(--muted);
    min-height:62px
}

.mini-kanban {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:30px
}

.mini-kanban>div {
    padding:7px;
    background:#f4effb;
    border-radius:6px
}

.mini-kanban small {
    font-size:6px;
    color:#ab99be;
    display:block;
    margin-bottom:10px
}

.mini-kanban i {
    height:23px;
    display:block;
    border:1px solid #e9dff4;
    border-radius:4px;
    background:white;
    margin:5px 0;
    font-size:9px;
    text-align:center;
    color:#9bbda3;
    font-style:normal;
    padding-top:3px
}

.mini-calendar {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
    font-size:8px;
    text-align:center;
    margin-top:30px;
    color:#a896b7
}

.mini-calendar i {
    font-style:normal;
    padding:8px 3px;
    background:#f4effb;
    border-radius:5px
}

.mini-calendar .selected {
    color:white;
    background:#ab78e3
}

.mini-calendar b {
    grid-column:1/-1;
    background:#eee4fb;
    padding:9px;
    text-align:left;
    font-size:7px;
    font-weight:400;
    border-left:2px solid #ab78e3;
    border-radius:4px
}

.mini-paper {
    padding:15px;
    margin-top:30px;
    border:1px solid #eee7f5;
    border-radius:7px;
    background:#fff
}

.mini-paper>b {
    font-size:8px;
    color:#96849e
}

.mini-paper>i {
    display:block;
    height:3px;
    background:#e9e1f2;
    margin:8px 0;
    width:100%
}

.mini-paper>i:nth-of-type(2) {
    width:90%
}

.mini-paper>i:nth-of-type(3) {
    width:65%
}

.mini-paper>span {
    font-size:7px;
    color:#aa7fca;
    display:flex;
    align-items:center;
    gap:12px
}

.mini-paper em {
    font-style:normal;
    color:#8db7a9
}

.mini-paper small {
    font-size:6px;
    color:#b6acbe
}

.workspace-foot {
    display:flex;
    justify-content:space-between;
    gap:60px;
    align-items:center;
    margin-top:35px
}

.workspace-foot p {
    font-size:12px;
    color:var(--muted);
    max-width:560px;
    line-height:1.8;
    margin:0
}

.workspace-foot .tag {
    white-space:nowrap;
    letter-spacing:0;
    font-size:9px
}

.scope-table>div {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    border-bottom:1px solid #e3dbea;
    gap:80px;
    padding:23px 10px
}

.scope-table span {
    font-size:13px;
    color:#9a8da5
}

.scope-table span:last-child {
    color:#584366;
    padding-left:24px;
    position:relative
}

.scope-table>div:not(:first-child)>span:last-child:before {
    content:'↗';
    position:absolute;
    left:0;
    color:#9c68ce
}

.scope-table .scope-head {
    padding-bottom:20px
}

.scope-head span {
    font-size:8px;
    font-weight:600;
    letter-spacing:.12em
}

.scope-head span:last-child {
    color:#8e56bf
}

.implementation {
    background:#eeedf5
}

.steps {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
    margin-top:70px
}

.steps article>span {
    display:block;
    font-size:45px;
    letter-spacing:-3px;
    color:#c1b1d2;
    font-weight:500;
    border-bottom:1px solid #d6c9e3;
    padding-bottom:20px;
    margin-bottom:25px
}

.steps h3 {
    font-size:18px
}

.steps p {
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}

.upgrade-details {
    background:#ffffff80;
    border:1px solid white;
    border-radius:16px;
    margin-top:65px;
    padding:25px 30px
}

.upgrade-details summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.upgrade-details summary::-webkit-details-marker {
    display:none
}

.upgrade-details summary small {
    display:block;
    font-size:8px;
    color:#a07db9;
    letter-spacing:.14em;
    margin-bottom:8px
}

.upgrade-details summary strong {
    font-size:16px;
    letter-spacing:-.3px;
    font-weight:500
}

.details-plus {
    border:1px solid #e1d7ed;
    border-radius:50%;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    flex-shrink:0
}

.upgrade-details[open] .details-plus {
    transform:rotate(45deg)
}

.upgrade-details>div {
    padding-top:25px;
    max-width:850px
}

.upgrade-details p {
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}

.upgrade-details>div>strong {
    font-size:12px;
    color:#9272aa;
    font-weight:500
}

.closing {
    min-height:100svh;
    padding-bottom:20px
}

.closing .section-wrap {
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.closing h2 {
    font-size:clamp(3rem,5.6vw,5.4rem);
    font-weight:500;
    max-width:960px
}

.closing .lead {
    font-size:16px
}

.closing .lead b {
    color:#4b3e56;
    font-weight:500
}

.closing-glow {
    position:absolute;
    inset:0;
    z-index:-1;
    background:radial-gradient(ellipse at 100% 80%,#d8dcff90,transparent 60%),radial-gradient(ellipse at 70% 50%,#ffe2ee90,transparent 60%)
}

.diagnosis-output {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:35px 0
}

.diagnosis-output span {
    font-size:10px;
    background:#ffffff8c;
    border:1px solid #fff;
    border-radius:30px;
    padding:10px 14px;
    color:#8d6e9f
}

.diagnosis-output span:before {
    content:'↗';
    margin-right:8px
}

.closing-secondary {
    font-size:11px;
    color:#9c87ae;
    margin-left:25px
}

.closing footer {
    margin-top:90px;
    border-top:1px solid #dcd2e6;
    padding:25px 0 10px;
    display:flex;
    align-items:center;
    gap:25px
}

.closing footer>span {
    font-size:10px;
    color:#a392b0
}

.closing footer>a:last-child {
    font-size:10px;
    margin-left:auto;
    color:#8c749e
}

dialog {
    width:min(950px,92vw);
    max-height:88svh;
    overflow:auto;
    padding:35px 45px;
    border:1px solid #eee7f8;
    border-radius:23px;
    background:#f8f7fc;
    box-shadow:0 50px 150px #211b2b33;
    color:var(--color-ink)
}

dialog::backdrop {
    background:#211b2b66;
    backdrop-filter:blur(12px)
}

.index-top {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.index-top .eyebrow {
    margin:0
}

dialog h2 {
    font-size:33px;
    margin:30px 0
}

#index-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 35px
}

#index-links a {
    font-size:12px;
    padding:16px 0;
    display:flex;
    gap:15px;
    border-top:1px solid #e5ddec;
    transition:color .2s
}

#index-links a>span {
    font-size:9px;
    color:#b698cc
}

#index-links a:hover {
    color:var(--violet)
}

dialog>p {
    margin:25px 0 0;
    font-size:10px;
    color:#a391b1
}

.js .reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .9s var(--ease),transform .9s var(--ease)
}

.js .reveal.visible {
    opacity:1;
    transform:translateY(0)
}

.presenting .chapter {
    min-height:100svh
}

.presenting .topbar {
    background:#f8f9fcf0
}

.presenting .hero .scroll-cue {
    display:none
}

@keyframes float {
    50% {
        translate:0 -12px
    }

}

@keyframes orbit-turn {
    to {
        rotate:360deg
    }

}

@media(min-width:1600px) {
    .hero {
        padding-left:max(8%,calc((100% - 1350px)/2));
        padding-right:max(8%,calc((100% - 1350px)/2))
    }

}

@media(max-width:1100px) {
    .hero {
        grid-template-columns:1.1fr 1fr;
        padding-left:7%;
        padding-right:7%
    }

    .hero h1 {
        font-size:clamp(3rem,6vw,5rem)
    }

    .floating-note {
        display:none
    }

    .orbit-label {
        padding:10px;
        font-size:10px;
        gap:6px
    }

    .hero-visual .mini-icon {
        width:24px;
        height:24px
    }

    .orbit-center strong {
        font-size:30px
    }

    .orbit-center .brand-orb {
        --orb-size:45px
    }

    .orbit-center small {
        font-size:8px
    }

    .section-wrap {
        width:84%
    }

    .split-layout {
        gap:35px
    }

    .split-heading {
        gap:40px
    }

    .ownership {
        gap:40px
    }

    .case-panel {
        gap:35px;
        padding:30px
    }

    .paths article {
        padding:25px
    }

    .family-grid {
        gap:18px
    }

    .workspace-grid article {
        padding:24px
    }

    .theme-dashboard {
        grid-template-columns:160px 1fr
    }

    .dashboard-body {
        padding:25px
    }

    .dashboard-cards strong {
        font-size:14px
    }

    .ai-grid article {
        padding:30px
    }

    .ai-intro {
        gap:20px
    }

    .ai-symbol {
        font-size:45px
    }

    .scope-table>div {
        gap:40px
    }

    .steps {
        gap:18px
    }

    .workspace-foot {
        gap:30px
    }

    .workspace-foot .tag {
        white-space:normal;
        max-width:180px
    }

}

@media(max-width:760px) {
    .topbar {
        height:70px;
        padding:0 6%
    }

    .reading-progress {
        top:69px
    }

    .wordmark {
        font-size:23px;
        gap:8px
    }

    .wordmark small {
        font-size:10px
    }

    .wordmark-divider {
        margin:0 3px
    }

    .topbar-actions {
        gap:8px
    }

    .menu-button {
        padding:10px 13px;
        gap:12px
    }

    .button-label {
        display:none
    }

    .quiet-button {
        padding:8px
    }

    .chapter {
        padding:110px 0 85px;
        min-height:auto;
        scroll-margin-top:0
    }

    .section-wrap {
        width:86%
    }

    h2 {
        font-size:clamp(2.2rem,7.7vw,3.7rem);
        letter-spacing:-.055em
    }

    .eyebrow {
        font-size:8px;
        letter-spacing:.12em;
        margin-bottom:22px
    }

    .lead {
        font-size:15px
    }

    .section-heading {
        margin-bottom:40px
    }

    .hero {
        grid-template-columns:1fr;
        padding:120px 7% 70px;
        gap:10px;
        min-height:100svh
    }

    .hero h1 {
        font-size:clamp(3rem,11vw,5.2rem)
    }

    .hero .lead {
        font-size:14px;
        max-width:350px
    }

    .hero-visual {
        max-width:370px;
        width:90%;
        margin:10px auto 20px
    }

    .hero-proof {
        margin-top:25px
    }

    .hero-proof strong {
        font-size:32px
    }

    .hero-proof>span {
        font-size:10px
    }

    .hero-proof>span:last-child {
        font-size:10px
    }

    .hero .eyebrow {
        font-size:8px
    }

    .hero .primary-link {
        padding:14px 20px;
        font-size:12px
    }

    .orbit-center small {
        font-size:8px
    }

    .orbit-label {
        padding:10px 12px;
        font-size:9px
    }

    .visual-caption {
        font-size:6px;
        bottom:-20px
    }

    .scroll-cue {
        display:none
    }

    .chapter-rail {
        display:none
    }

    .chapter-controls {
        bottom:14px;
        right:5%;
        gap:18px;
        padding:6px 7px 6px 15px
    }

    .chapter-controls button {
        width:28px;
        height:28px
    }

    .split-heading,.split-layout {
        grid-template-columns:1fr;
        gap:25px
    }

    .split-heading {
        margin-bottom:35px
    }

    .split-heading .lead {
        margin:0;
        max-width:100%
    }

    .timeline {
        grid-template-columns:1fr;
        margin-top:40px;
        gap:0
    }

    .timeline article {
        display:grid;
        grid-template-columns:80px 1fr;
        column-gap:25px;
        padding:0 0 28px 0;
        position:relative
    }

    .timeline article:before {
        content:'';
        position:absolute;
        left:89px;
        top:10px;
        bottom:-10px;
        width:1px;
        background:#e2d8ed
    }

    .timeline article:last-child:before {
        bottom:30px
    }

    .timeline article>span {
        grid-row:1/3;
        font-size:20px;
        letter-spacing:-1px
    }

    .timeline i {
        position:absolute;
        left:86px;
        top:0;
        height:0;
        margin:10px 0;
        width:0
    }

    .timeline h3 {
        min-height:0;
        font-size:15px;
        margin:0 0 9px
    }

    .timeline p {
        max-width:100%;
        font-size:11px;
        margin:0
    }

    .history-foot {
        margin-top:10px;
        gap:25px
    }

    .history-foot strong {
        font-size:45px;
        letter-spacing:-2px
    }

    .history-foot>span {
        font-size:11px
    }

    .scattered-items {
        grid-template-columns:1fr 1fr;
        gap:14px
    }

    .scattered-items>span {
        padding:20px 12px;
        font-size:20px;
        gap:10px
    }

    .scattered-items b {
        font-size:10px
    }

    .scatter-board {
        margin-bottom:30px
    }

    .connected-file {
        padding:18px;
        gap:12px
    }

    .file-symbol {
        font-size:22px;
        padding:10px
    }

    .connected-file strong {
        font-size:16px
    }

    .connected-file small {
        font-size:6px
    }

    .connected-file p {
        font-size:10px
    }

    .statement {
        font-size:18px
    }

    .paths {
        grid-template-columns:1fr;
        gap:12px
    }

    .paths article {
        padding:24px
    }

    .paths h3 {
        margin:15px 0 10px;
        font-size:22px
    }

    .paths h3 br {
        display:none
    }

    .paths ul {
        margin:0
    }

    .paths li {
        margin:7px 0;
        font-size:12px
    }

    .paths .path-sudi {
        padding:28px
    }

    .ownership {
        grid-template-columns:1fr;
        gap:20px;
        margin-top:45px
    }

    .ownership h3 {
        font-size:27px;
        margin-bottom:15px
    }

    .ownership h3 br {
        display:none
    }

    .ownership p {
        max-width:100%
    }

    .segmented {
        max-width:none
    }

    .layer-list {
        gap:18px 15px
    }

    .layer-list li {
        font-size:11px
    }

    .family-grid {
        grid-template-columns:1fr 1fr;
        gap:25px 20px;
        margin-bottom:35px
    }

    .family-grid h3 {
        font-size:17px;
        min-height:40px
    }

    .family-grid p {
        font-size:11px;
        min-height:60px
    }

    .family-grid small {
        font-size:9px
    }

    .case-select button {
        flex:1;
        padding:17px 16px;
        font-size:11px;
        gap:10px;
        justify-content:space-between
    }

    .case-panel {
        grid-template-columns:1fr;
        padding:25px;
        gap:20px
    }

    .case-panel h3 {
        font-size:28px
    }

    .case-panel p {
        font-size:11px
    }

    .case-flow {
        padding:23px
    }

    .case-flow li {
        font-size:11px
    }

    .product-window {
        transform:none;
        margin-top:15px
    }

    .feature-list {
        margin-top:20px
    }

    .section-signoff {
        font-size:14px;
        margin-top:35px
    }

    .theme-toolbar {
        padding:12px;
        gap:12px;
        align-items:center
    }

    .theme-toolbar>span {
        font-size:8px;
        gap:6px
    }

    .theme-toolbar .segmented {
        width:155px;
        flex-shrink:0
    }

    .theme-toolbar button {
        font-size:8px;
        padding:6px
    }

    .theme-dashboard {
        grid-template-columns:1fr;
        min-height:0
    }

    .theme-dashboard aside {
        display:none
    }

    .dashboard-body {
        padding:23px
    }

    .dashboard-body h3 {
        font-size:24px
    }

    .dashboard-cards {
        gap:8px
    }

    .dashboard-cards article {
        padding:12px 9px
    }

    .dashboard-cards strong {
        font-size:11px;
        letter-spacing:-.3px
    }

    .dashboard-cards article>span:first-child {
        font-size:7px
    }

    .dashboard-bottom {
        font-size:6px;
        gap:5px
    }

    .identity-benefits {
        grid-template-columns:1fr;
        gap:15px;
        margin-top:30px
    }

    .identity-benefits p {
        font-size:11px;
        margin:0
    }

    .identity-benefits b {
        font-size:12px;
        margin-bottom:5px
    }

    .video-card {
        margin-top:10px
    }

    .video-card video {
        aspect-ratio:4/3
    }

    .ai-grid {
        grid-template-columns:1fr;
        gap:15px
    }

    .ai-grid article {
        padding:27px
    }

    .ai-intro {
        gap:20px
    }

    .ai-symbol {
        font-size:35px
    }

    .ai-grid h3 {
        font-size:22px
    }

    .ai-grid p {
        font-size:11px
    }

    .ai-rules h3 {
        font-size:28px
    }

    .beta-note {
        gap:15px
    }

    .beta-note p {
        font-size:10px
    }

    .workspace-grid {
        grid-template-columns:1fr;
        gap:15px
    }

    .workspace-grid article {
        padding:25px;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0 20px;
        align-items:start
    }

    .workspace-icon {
        width:35px;
        height:35px;
        font-size:22px;
        margin-bottom:20px;
        grid-column:1
    }

    .workspace-grid article>small {
        grid-column:1;
        font-size:7px
    }

    .workspace-grid h3 {
        font-size:23px;
        grid-column:1;
        margin:15px 0
    }

    .workspace-grid p {
        font-size:11px;
        grid-column:1;
        min-height:0;
        margin:0
    }

    .workspace-grid article>div {
        grid-column:2;
        grid-row:2/5;
        align-self:center;
        margin:0
    }

    .mini-paper {
        padding:12px
    }

    .mini-kanban {
        gap:4px
    }

    .mini-kanban>div {
        padding:4px
    }

    .mini-kanban small {
        font-size:5px
    }

    .workspace-foot {
        display:block;
        margin-top:25px
    }

    .workspace-foot p {
        font-size:11px;
        margin-bottom:15px
    }

    .workspace-foot .tag {
        font-size:8px
    }

    .scope-table>div {
        gap:20px;
        padding:20px 0
    }

    .scope-table span {
        font-size:11px
    }

    .scope-table span:last-child {
        padding-left:15px
    }

    .scope-head span {
        font-size:6px;
        letter-spacing:.1em
    }

    .steps {
        grid-template-columns:1fr;
        margin-top:35px;
        gap:20px
    }

    .steps article {
        display:grid;
        grid-template-columns:55px 1fr;
        gap:0 20px
    }

    .steps article>span {
        font-size:32px;
        grid-row:1/3;
        border:0;
        padding:0;
        margin:0;
        letter-spacing:-2px
    }

    .steps h3 {
        font-size:17px;
        margin:3px 0 6px
    }

    .steps p {
        font-size:11px;
        margin:0;
        max-width:260px
    }

    .upgrade-details {
        padding:22px;
        margin-top:35px
    }

    .upgrade-details summary strong {
        font-size:13px
    }

    .upgrade-details p {
        font-size:11px
    }

    .closing {
        padding-top:110px;
        min-height:100svh
    }

    .closing h2 {
        font-size:clamp(2.6rem,8.3vw,4rem)
    }

    .closing .lead {
        font-size:14px
    }

    .diagnosis-output {
        gap:8px;
        margin:25px 0
    }

    .diagnosis-output span {
        font-size:8px;
        padding:8px 11px
    }

    .closing .primary-link {
        font-size:11px;
        gap:20px
    }

    .closing-secondary {
        display:block;
        margin:22px 0 0;
        font-size:10px
    }

    .closing footer {
        margin-top:65px;
        flex-wrap:wrap;
        gap:15px;
        padding-bottom:55px
    }

    .closing footer .wordmark {
        font-size:22px
    }

    .closing footer>span {
        font-size:8px
    }

    .closing footer>a:last-child {
        font-size:8px
    }

    dialog {
        padding:25px;
        width:91vw
    }

    dialog h2 {
        font-size:27px
    }

    #index-links {
        grid-template-columns:1fr;
        gap:0
    }

    #index-links a {
        font-size:12px;
        padding:13px 0
    }

    .index-top .quiet-button {
        font-size:11px
    }

    .primary-link {
        padding:15px 20px
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    .js .reveal {
        opacity:1;
        transform:none
    }

    .orbit,.orbit-label,.brand-orb {
        animation:none!important
    }

    *,*:before,*:after {
        transition:none!important
    }

}

@media print {
    .topbar,.chapter-controls,.chapter-rail,.reading-progress,.scroll-cue,dialog,.skip-link {
        display:none!important
    }

    .chapter {
        min-height:0;
        padding:40px 0;
        break-inside:avoid
    }

    .hero {
        display:block
    }

    .hero-visual {
        display:none
    }

    .js .reveal {
        opacity:1;
        transform:none
    }

    .ai {
        background:white;
        color:#211b2b
    }

    .ai p,.ai li,.ai b {
        color:#555
    }

    .video-card {
        display:none
    }

    .primary-link {
        background:#7a2ff5
    }

    .section-wrap {
        width:95%
    }

}

/* Video covers load the external player only when requested. */
.demo-band {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:60px;
    align-items:center;
    margin-top:70px;
    padding-top:45px;
    border-top:1px solid #e2daeb
}

.demo-copy h3 {
    font-size:34px;
    font-weight:500;
    margin:20px 0
}

.demo-copy p {
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    max-width:310px
}

.demo-copy>a {
    font-size:10px;
    color:#8d5eb7;
    display:inline-block;
    margin-top:12px;
    border-bottom:1px solid #cdb7e0;
    padding-bottom:4px
}

.vimeo-embed {
    position:relative;
    aspect-ratio:16/9;
    border-radius:15px;
    overflow:hidden;
    border:1px solid #d6c7e6;
    background:#e9e0f6
}

.vimeo-embed iframe {
    position:absolute;
    inset:0;
    border:0;
    width:100%;
    height:100%
}

.video-cover {
    width:100%;
    height:100%;
    border:0;
    text-align:left;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:25px 30px;
    background:radial-gradient(ellipse at 95% 30%,#c3c6ff,transparent 65%),radial-gradient(ellipse at 65% 110%,#ffd4df,transparent 65%),#ede8f6;
    color:#2c223c;
    position:relative;
    transition:filter .3s
}

.video-cover:hover {
    filter:brightness(1.03)
}

.video-cover-top {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.7px
}

.video-cover-top .brand-orb {
    --orb-size:19px
}

.video-cover-top small {
    letter-spacing:.14em;
    font-size:6px;
    font-weight:500;
    margin-left:5px;
    color:#9274a5
}

.video-cover-title {
    font-size:clamp(20px,2.6vw,36px);
    letter-spacing:-1.5px;
    line-height:1.1;
    font-weight:500
}

.video-cover-title em {
    font-style:normal;
    color:#8c45d0
}

.play-circle {
    position:absolute;
    right:40px;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid #fff9;
    background:#ffffff70;
    box-shadow:0 10px 30px #5d2e9315;
    border-radius:50%;
    font-size:15px;
    color:#8b40d2;
    backdrop-filter:blur(10px);
    padding-left:3px;
    transition:scale .3s
}

.video-cover:hover .play-circle {
    scale:1.1
}

.video-cover-bottom {
    font-size:6px;
    letter-spacing:.1em;
    color:#aa8dbb;
    display:flex;
    gap:14px;
    align-items:center
}

.video-cover-bottom b {
    font-size:7px;
    font-weight:400;
    letter-spacing:0;
    color:#877097
}

.demo-band-ai {
    border-color:#ffffff15
}

.demo-band-ai .demo-copy p {
    color:#b3a7c1
}

.demo-band-ai .demo-copy>a {
    color:#ba9fd3;
    border-color:#614576
}

.video-cover-ai {
    background:radial-gradient(ellipse at 100% 20%,#5c3f7f,transparent 65%),radial-gradient(ellipse at 60% 120%,#554362,transparent 65%),#30223f;
    color:#fff
}

.video-cover-ai .video-cover-title em {
    color:#d2acf9
}

.video-cover-ai .play-circle {
    background:#ffffff15;
    color:#e2c8fc;
    border-color:#ffffff35
}

.demo-band-ai .vimeo-embed {
    border-color:#674882;
    background:#30223f
}

.video-cover-ai .video-cover-top small,.video-cover-ai .video-cover-bottom,.video-cover-ai .video-cover-bottom b {
    color:#c1a8d4
}

@media(max-width:760px) {
    .demo-band {
        grid-template-columns:1fr;
        gap:25px;
        margin-top:40px;
        padding-top:35px
    }

    .demo-copy h3 {
        font-size:28px
    }

    .demo-copy p {
        max-width:100%;
        font-size:11px
    }

    .video-cover {
        padding:20px
    }

    .video-cover-title {
        font-size:clamp(22px,6vw,34px)
    }

    .play-circle {
        right:25px;
        width:48px;
        height:48px
    }

    .video-cover-top {
        font-size:13px
    }

    .video-cover-top .brand-orb {
        --orb-size:16px
    }

    .video-cover-bottom {
        font-size:5px
    }

    .video-cover-bottom b {
        font-size:6px
    }

}

/* Official SUDI identity and imagery shared with the main site. */
:root {
    --presentation-brand: #4f2d85;
}

.brand-logo {
    display: block;
    width: 113px;
    height: 30px;
    object-fit: contain;
    flex: none;
}

.brand-mark {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: none;
}

.topbar {
    inset: 16px clamp(16px, 3vw, 40px) auto;
    height: 68px;
    max-width: var(--max-width-container);
    margin-inline: auto;
    padding-inline: clamp(18px, 2.3vw, 32px);
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: linear-gradient(rgba(255, 255, 255, .76), rgba(255, 255, 255, .76)) padding-box, var(--gradient-rainbow) border-box;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 8px 32px #1e213014, inset 0 1px 0 #ffffffb3;
    transition: box-shadow .4s var(--transition-smooth);
}

.topbar.is-scrolled {
    box-shadow: 0 12px 44px #1e213020, 0 0 24px #c5b3ff40;
}

.presenting .topbar {
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) padding-box, var(--gradient-rainbow) border-box;
}

.reading-progress {
    top: 86px;
    right: clamp(32px, 4vw, 55px);
    left: clamp(32px, 4vw, 55px);
    overflow: hidden;
    border-radius: var(--radius-pill);
}

.primary-link {
    box-shadow: var(--shadow-glow);
}

.hero {
    column-gap: clamp(35px, 4vw, 70px);
}

.hero-glow {
    background: radial-gradient(ellipse at 60% 50%, #d3e2ff90, #f4d9ff60 40%, transparent 65%);
}

.hero-visual {
    max-width: 600px;
    min-width: 0;
    perspective: 1400px;
}

.hero-visual .orbit {
    width: 90%;
    height: 90%;
    pointer-events: none;
}

.hero-visual .orbit-two {
    width: 110%;
    height: 110%;
}

.hero-product {
    position: relative;
    width: 110%;
    margin: 0;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 19px;
    overflow: hidden;
    box-shadow: 0 30px 80px #4f2d8526, 0 4px 18px #1e21300d;
    transform: rotateY(-5deg) rotateZ(-2deg);
    transition: transform .7s var(--transition-smooth), box-shadow .7s var(--transition-smooth);
}

.hero-product:hover {
    transform: rotateY(0) rotateZ(0);
    box-shadow: 0 35px 85px #4f2d8530;
}

.hero-product-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38px;
    padding-inline: 16px;
    font-size: 8px;
    letter-spacing: .04em;
    color: #8b7c9c;
    background: #fbf9ff;
}

.hero-product-bar .status-dot {
    width: 5px;
    height: 5px;
    background: #80bca4;
    box-shadow: none;
}

.photo-button {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #eee8f7;
    cursor: zoom-in;
    overflow: hidden;
    text-align: left;
}

.photo-button img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 767;
    object-fit: cover;
    transition: transform .8s var(--transition-smooth);
}

.photo-button:hover img {
    transform: scale(1.025);
}

.photo-button:focus-visible {
    outline-offset: -4px;
    z-index: 1;
}

.image-expand {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 23px;
    line-height: 1;
    border: 1px solid #ffffffc9;
    border-radius: 50%;
    color: var(--presentation-brand);
    background: #ffffffd9;
    backdrop-filter: blur(12px);
    box-shadow: 0 5px 20px #1e21301a;
}

.hero-product figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 20px;
    font-size: 8px;
    color: #9989a8;
}

.hero-product figcaption b {
    color: var(--presentation-brand);
    font-weight: 500;
    white-space: nowrap;
}

.hero-brand-seal {
    position: absolute;
    top: -3%;
    left: 5%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid white;
    border-radius: 16px;
    background: #ffffffb3;
    box-shadow: 0 10px 35px #4f2d8510;
    backdrop-filter: blur(12px);
    transform: rotate(-5deg);
}

.hero-brand-seal .brand-mark {
    width: 38px;
    height: 38px;
}

.hero-brand-seal span {
    font-size: 9px;
    line-height: 1.7;
    color: #9787a6;
}

.hero-brand-seal b {
    color: var(--presentation-brand);
    font-weight: 500;
}

.hero-visual .orbit-label-a {
    top: 10%;
    left: auto;
    right: -5%;
    z-index: 2;
}

.hero-visual .orbit-label-d {
    right: 6%;
    bottom: -2%;
}

.hero-visual .visual-caption {
    bottom: -14%;
    font-size: 7px;
}

.hero .eyebrow {
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid #e6d8fb;
    border-radius: var(--radius-pill);
    color: var(--color-accent-deep);
    background: #f7f0ff;
    font-size: 8px;
}

.foundation {
    background: linear-gradient(155deg, #f5eefa, #edf0ff 60%, #f9f4fc);
}

.paths article, .case-study, .product-window, .theme-showcase, .workspace-grid article, .upgrade-details {
    box-shadow: var(--shadow-soft);
}

.platform-tour {
    margin-top: 65px;
    padding: 32px;
    background: linear-gradient(#ffffffbc, #ffffffbc) padding-box, var(--gradient-rainbow) border-box;
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

.tour-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}

.tour-heading .eyebrow {
    font-size: 8px;
    margin-bottom: 12px;
}

.tour-heading h3 {
    font-size: 31px;
    font-weight: 500;
    margin: 0;
}

.tour-heading > p {
    margin: 0;
    color: #a18eaf;
    font-size: 10px;
    line-height: 1.8;
}

.tour-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.tour-tabs button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e8e0f1;
    border-radius: 12px;
    background: #faf8fd;
    font-size: 11px;
    color: #9784a7;
    transition: background .3s, box-shadow .3s;
}

.tour-tabs button > span:first-child {
    font-size: 8px;
    opacity: .65;
}

.tour-tabs button > span:last-child {
    margin-left: auto;
}

.tour-tabs button[aria-selected="true"] {
    color: var(--presentation-brand);
    background: #eee5fc;
    border-color: #d6b9fa;
    box-shadow: 0 4px 16px #7a2ff50a;
}

.tour-panel {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    align-items: stretch;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid #e8e0f1;
    background: #fff;
}

.tour-panel > .photo-button {
    align-self: start;
}

.tour-caption {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.5vw, 35px);
    background: linear-gradient(140deg, #fff, #f7f1fe);
}

.tour-caption h4 {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.12;
    letter-spacing: -.04em;
    font-weight: 500;
    margin: 20px 0 15px;
}

.tour-caption p {
    font-size: 11px;
    line-height: 1.8;
    color: var(--muted);
}

.tour-caption-foot {
    font-size: 9px;
    color: #a892b8;
    line-height: 1.7;
    margin-top: auto;
    padding-top: 18px;
}

.tour-caption-foot b {
    font-weight: 500;
    color: #88659e;
}

.insights-image {
    margin: 0;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    transform: rotate(1deg);
}

.insights-image figcaption {
    padding: 25px 28px;
}

.insights-image figcaption strong {
    display: block;
    margin-top: 12px;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.6px;
}

.insights-image figcaption p {
    font-size: 11px;
    color: var(--muted);
    margin: 9px 0 0;
}

.theme-toolbar .brand-mark {
    width: 20px;
    height: 20px;
}

.video-cover-top .brand-logo {
    width: 80px;
    height: auto;
}

.video-cover-ai .video-cover-top .brand-logo {
    width: 96px;
    padding: 6px 8px;
    background: #ffffffed;
    border-radius: 8px;
}

.closing-glow {
    background: var(--gradient-pastel);
    background-size: 220% 220%;
    opacity: .65;
    animation: presentation-band-shift 16s ease-in-out infinite alternate;
}

.closing-brand-watermark {
    position: absolute;
    top: 22%;
    right: -4%;
    width: clamp(200px, 30vw, 450px);
    height: auto;
    opacity: .1;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: -1;
}

.image-viewer {
    width: min(1320px, 94vw);
    max-height: 94svh;
    padding: 20px;
    background: #fcfaff;
}

.image-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 5px 15px;
}

.image-viewer-toolbar .eyebrow {
    margin: 0;
    font-size: 8px;
}

.image-viewer figure {
    margin: 0;
}

.image-viewer figure > img {
    width: 100%;
    max-height: 72svh;
    aspect-ratio: 1280 / 767;
    object-fit: contain;
    border-radius: 10px;
    background: #eee8f7;
}

.image-viewer figcaption {
    margin-top: 15px;
    padding: 0 5px;
    font-size: 11px;
    color: var(--muted);
}

@keyframes presentation-band-shift {
    from {
        background-position: 0% 30%;
    }

    to {
        background-position: 100% 70%;
    }

}

@media (max-width: 1100px) {
    .hero {
        column-gap: 40px;
    }

    .hero-product {
        width: 107%;
    }

    .hero-brand-seal {
        top: -8%;
        left: -3%;
        padding: 12px 15px;
    }

    .hero-visual .orbit-label-a {
        top: 9%;
        right: -8%;
    }

    .hero-visual .orbit-label-d {
        bottom: -8%;
    }

    .hero-product figcaption {
        padding: 14px;
        font-size: 7px;
    }

    .tour-panel {
        grid-template-columns: 1.5fr 1fr;
    }

    .tour-caption-foot {
        display: none;
    }

    .tour-caption h4 {
        margin-block: 15px 10px;
    }

}

@media (max-width: 760px) {
    .topbar {
        inset: 12px 15px auto;
        height: 60px;
        padding-inline: 16px;
        border-radius: 18px;
    }

    .brand-logo {
        width: 95px;
        height: 26px;
    }

    .wordmark small {
        font-size: 9px;
    }

    .wordmark-divider {
        margin-inline: 4px;
    }

    .reading-progress {
        top: 74px;
        left: 30px;
        right: 30px;
    }

    .hero {
        column-gap: 0;
        row-gap: 0;
    }

    .hero .eyebrow {
        padding: 8px 11px;
        font-size: 7px;
    }

    .hero-visual {
        width: 100%;
        max-width: 480px;
        aspect-ratio: 1.2;
        margin: 50px auto 55px;
    }

    .hero-product {
        width: 100%;
        transform: rotate(-2deg);
        border-radius: 15px;
    }

    .hero-product-bar {
        height: 30px;
        font-size: 7px;
    }

    .hero-product figcaption {
        padding: 13px;
        font-size: 6px;
        gap: 8px;
    }

    .hero-brand-seal {
        top: -7%;
        left: 2%;
        padding: 10px 14px;
        gap: 10px;
        border-radius: 12px;
    }

    .hero-brand-seal .brand-mark {
        width: 28px;
        height: 28px;
    }

    .hero-brand-seal span {
        font-size: 7px;
    }

    .hero-visual .orbit-label-a {
        top: -2%;
        right: 0;
        padding: 9px;
        font-size: 8px;
    }

    .hero-visual .orbit-label-d {
        bottom: -3%;
        right: 5%;
        padding: 10px;
        font-size: 8px;
    }

    .hero-visual .visual-caption {
        bottom: -13%;
        font-size: 5px;
    }

    .hero-visual .orbit-two {
        width: 105%;
        height: 105%;
    }

    .image-expand {
        width: 30px;
        height: 30px;
        font-size: 20px;
        right: 12px;
        bottom: 12px;
    }

    .platform-tour {
        margin-top: 40px;
        padding: 20px;
        border-radius: 19px;
    }

    .tour-heading {
        align-items: start;
        gap: 15px;
        margin-bottom: 22px;
    }

    .tour-heading h3 {
        font-size: 25px;
    }

    .tour-heading .eyebrow {
        font-size: 6px;
    }

    .tour-heading > p {
        font-size: 8px;
        max-width: 110px;
    }

    .tour-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 15px;
    }

    .tour-tabs button {
        padding: 12px;
        font-size: 10px;
    }

    .tour-tabs button > span:first-child {
        font-size: 7px;
    }

    .tour-panel {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .tour-caption {
        padding: 22px;
    }

    .tour-caption h4 {
        font-size: 23px;
        margin-block: 12px;
    }

    .tour-caption p {
        margin: 0;
        font-size: 11px;
    }

    .tour-caption-foot {
        display: none;
    }

    .insights-image {
        margin-top: 15px;
        transform: none;
    }

    .insights-image figcaption {
        padding: 23px;
    }

    .insights-image figcaption strong {
        font-size: 20px;
    }

    .theme-toolbar .brand-mark {
        width: 17px;
        height: 17px;
    }

    .video-cover-top .brand-logo {
        width: 68px;
    }

    .video-cover-ai .video-cover-top .brand-logo {
        width: 80px;
    }

    .closing-brand-watermark {
        top: 10%;
        right: -16%;
        width: 230px;
    }

    .closing footer .brand-logo {
        width: 95px;
        height: 26px;
    }

    .image-viewer {
        padding: 15px;
        border-radius: 15px;
    }

    .image-viewer-toolbar {
        padding-bottom: 10px;
    }

    .image-viewer-toolbar .quiet-button {
        font-size: 11px;
    }

    .image-viewer figcaption {
        font-size: 10px;
    }

}

@media (max-width: 380px) {
    .wordmark small, .wordmark-divider {
        display: none;
    }

    .hero .eyebrow {
        font-size: 6px;
    }

    .hero-visual .orbit-label-a {
        top: -9%;
    }

    .tour-heading {
        flex-direction: column;
        gap: 10px;
    }

    .tour-heading > p {
        max-width: none;
    }

    .tour-heading > p br {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hero-product, .hero-product:hover, .insights-image {
        transform: none;
    }

    .photo-button:hover img {
        transform: none;
    }

    .closing-glow {
        animation: none;
    }

}

@media print {
    .topbar, .image-viewer, .image-expand, .closing-brand-watermark {
        display: none !important;
    }

    .platform-tour {
        break-inside: avoid;
    }

    .insights-image {
        transform: none;
        box-shadow: none;
    }

}

/* The client explorer scales to all eight installations. */
.case-explorer-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--presentation-brand);
}

.case-explorer-label > span:last-child {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
}

.case-select {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.case-select button {
    min-width: 0;
    min-height: 64px;
    padding: 19px 23px;
    gap: 12px;
    justify-content: space-between;
    text-align: left;
    line-height: 1.4;
    border-bottom: 1px solid #e2d9ed;
    transition: background .25s, color .25s, box-shadow .25s;
}

.case-select button:nth-child(4n) {
    border-right: 0;
}

.case-select button:nth-child(n + 5) {
    border-bottom: 0;
}

.case-select button:hover {
    background: #ffffff80;
    color: var(--presentation-brand);
}

.case-select button[aria-selected="true"] {
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--violet);
}

.case-select button:focus-visible {
    outline-offset: -4px;
}

.case-copy p b {
    color: #645073;
    font-weight: 600;
}

.case-scope-note {
    grid-column: 1 / -1;
    margin: -15px 0 0;
    padding-left: 15px;
    border-left: 2px solid #d9c4ef;
    font-size: 10px !important;
    color: #8d779e !important;
}

.case-login {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding-top: 32px;
    border-top: 1px solid #e2d9ed;
}

.case-login h4 {
    margin: 20px 0 15px;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.case-login figcaption p {
    max-width: 240px;
    margin: 0;
    font-size: 11px;
}

.case-login-screen {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2d7ee;
    border-radius: 14px;
    background: #ffffff80;
}

.case-login-screen > img {
    display: block;
    width: 100%;
    height: auto;
}

.case-login-placeholder {
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 10px;
    padding: 20px;
    border: 1px dashed #d5c3e7;
    border-radius: 9px;
    background: radial-gradient(ellipse at 80% 10%, #ede5fa80, transparent 70%), #fdfbff;
    text-align: center;
    color: #ab98bb;
    font-size: 10px;
}

.case-login-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border: 1px solid #e5d9f1;
    border-radius: 12px;
    background: #f4eefa;
    font-size: 23px;
    color: #b69bcc;
}

.case-login-client {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.4px;
    color: #806793;
}

.case-login-placeholder small {
    margin-top: 5px;
    padding: 4px 8px;
    border: 1px solid #e8dff2;
    border-radius: var(--radius-pill);
    font-size: 7px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .case-explorer-label {
        flex-wrap: wrap;
        gap: 10px;
        font-size: 11px;
    }

    .case-explorer-label > span:last-child {
        flex-basis: 100%;
        margin-left: 17px;
        font-size: 9px;
    }

    .case-select {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-select button {
        padding: 16px;
        min-height: 58px;
        font-size: 11px;
    }

    .case-select button:nth-child(n) {
        border-bottom: 1px solid #e2d9ed;
    }

    .case-select button:nth-child(2n) {
        border-right: 0;
    }

    .case-select button:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .case-login {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 25px;
    }

    .case-login h4 {
        margin: 15px 0 10px;
        font-size: 25px;
    }

    .case-login h4 br {
        display: none;
    }

    .case-login figcaption p {
        max-width: none;
        font-size: 10px;
    }

    .case-login-placeholder {
        padding: 15px;
        margin: 8px;
        font-size: 9px;
    }

    .case-login-client {
        font-size: 16px;
    }

    .case-scope-note {
        margin-top: 0;
        font-size: 9px !important;
    }

}

/* The immersive experience uses the same shared PHP header and footer. */
.reading-progress {
    top: 91px;
}

body[data-page="descubre"] > .site-footer {
    padding-bottom: 95px;
}

body[data-page="descubre"] .closing {
    padding-bottom: 70px;
}

body[data-page="descubre"] .site-header__tool {
    color: var(--color-ink-soft);
}

@media(max-width:680px) {
    .reading-progress {
        top: 80px;
    }

}