/* Minimal browser reset. */
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4
}

body,h1,h2,h3,h4,p,blockquote,figure {
    margin: 0
}

button,input {
    margin: 0
}

img,svg,canvas {
    display: block;
    max-width: 100%
}

@font-face {
    font-family: Bounded;
    src: url('Bounded-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap
}

@font-face {
    font-family: 'Wix Madefor Display';
    src: url('WixMadeforDisplay-Regular.woff2') format('woff2');
    font-weight: 300 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Wix Madefor Display';
    src: url('WixMadeforDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Wix Madefor Display';
    src: url('WixMadeforDisplay-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Wix Madefor Display';
    src: url('WixMadeforDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Wix Madefor Display';
    src: url('WixMadeforDisplay-ExtraBold.woff2') format('woff2');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap
}

:root {
    --yellow: #ffdd00;
    --ink: #070707;
    --panel: #111112;
    --panel2: #151516;
    --line: #050505;
    --white: #f5f4ef;
    --muted: #8c8d91
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: auto;
    background: var(--ink)
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--white);
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 14px;
    overflow-x: hidden
}

button,input {
    font: inherit
}

a {
    color: inherit
}

.brand-logo {
    position: relative;
    display: block;
    width: 142px;
    aspect-ratio: 9294/2792
}

.brand-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: invert(1)
}

.brand-logo .logo-accent {
    filter: brightness(0) saturate(100%) invert(81%) sepia(99%) saturate(1000%) hue-rotate(359deg) brightness(104%);
    clip-path: polygon(0 0,30% 0,30% 100%,0 100%)
}

.brand-logo.on-light img {
    filter: none
}

.brand-logo.on-light .logo-accent {
    display: none
}

.mark-window {
    display: block;
    overflow: hidden;
    aspect-ratio: 1
}

.mark-window img {
    height: 100%;
    width: auto;
    max-width: none;
    display: block
}

.nav-toggle {
    position: fixed;
    z-index: 100;
    right: 19px;
    top: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #292a2c;
    background: rgba(22,23,24,.82);
    backdrop-filter: blur(16px);
    display: grid;
    place-content: center;
    gap: 6px;
    cursor: pointer
}

.nav-toggle i {
    display: block;
    width: 15px;
    height: 1px;
    background: #bbb;
    transition: .35s
}

.nav-toggle.active i:first-child {
    transform: translateY(3.5px) rotate(45deg)
}

.nav-toggle.active i:last-child {
    transform: translateY(-3.5px) rotate(-45deg)
}

.nav-overlay {
    position: fixed;
    z-index: 90;
    inset: 0;
    background: var(--yellow);
    color: #17191e;
    padding: 22px;
    visibility: hidden;
    clip-path: circle(0 at calc(100% - 40px) 40px);
    transition: clip-path .75s cubic-bezier(.7,0,.2,1),visibility .75s
}

.nav-overlay.active {
    visibility: visible;
    clip-path: circle(150% at calc(100% - 40px) 40px)
}

.nav-overlay>.brand-logo {
    width: 130px
}

.nav-groups {
    position: absolute;
    left: 33.333%;
    right: 22px;
    top: 17%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4px
}

.nav-groups>div {
    border: 1px solid rgba(0,0,0,.22);
    padding: 23px 25px;
    min-height: 290px
}

.nav-groups b {
    font-size: 12px
}

.nav-groups h3 {
    font-family: Bounded;
    font-size: 26px;
    margin: 10px 0 30px
}

.nav-groups a {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    border-top: 1px solid rgba(0,0,0,.2);
    padding: 13px 0;
    font-size: 13px
}

.nav-overlay>p {
    position: absolute;
    left: 22px;
    bottom: 22px;
    font-size: 9px;
    letter-spacing: .05em
}

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)
}

[data-reveal].shown {
    opacity: 1;
    transform: none
}

.hero {
    height: 100svh;
    min-height: 700px;
    position: relative;
    overflow: hidden;
    background: #000
}

.hero-wave {
    position: absolute;
    width: 125vw;
    height: 80vw;
    left: 21vw;
    top: 5vh;
    background: radial-gradient(ellipse at center,rgba(255,221,0,.96),rgba(255,221,0,.4) 25%,rgba(255,221,0,.08) 48%,transparent 69%);
    filter: blur(44px);
    border-radius: 50%;
    transform: rotate(18deg);
    animation: wave 6s ease-in-out infinite alternate
}

.hero-ray {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 120%,rgba(255,221,0,.55),transparent 46%)
}

@keyframes wave {
    to {
        transform: rotate(12deg) scale(1.1)
    }
}

.hero-top {
    position: absolute;
    z-index: 3;
    top: 32px;
    left: 32px;
    width: 300px
}

.hero-top p {
    font-size: 13px;
    line-height: 1.15;
    max-width: 240px;
    margin: 28px 0 0;
}

.hero-title {
    position: absolute;
    z-index: 3;
    left: 20px;
    bottom: 20px
}

.hero-title small {
    display: inline-block;
    border: 1px solid rgba(255,221,0,.25);
    color: var(--yellow);
    border-radius: 99px;
    padding: 6px 10px;
    font-size: 9px
}

.hero-title h1 {
    font-family: Bounded;
    margin: 18px 0 0;
    font-size: clamp(72px,8.6vw,158px);
    line-height: .77;
    letter-spacing: -.07em
}

.hero-title h1 span {
    color: var(--yellow)
}

.hero-mark {
    position: absolute;
    color: #000;
    opacity: .82;
    animation: float 8s ease-in-out infinite
}

.hero-mark-a {
    width: 34vw;
    right: -7vw;
    top: -13vw
}

.hero-mark-b {
    width: 25vw;
    right: 3vw;
    top: 15vw;
    opacity: .58;
    animation-delay: -3s
}

@keyframes float {
    50% {
        transform: translate(-20px,20px) rotate(8deg)
    }
}

.inside {
    height: 100svh;
    min-height: 700px;
    position: relative;
    overflow: hidden;
    background: #000
}

.inside h2 {
    font-family: Bounded;
    font-size: 46px;
    font-weight: 400;
    letter-spacing: -.04em;
    margin: 0;
    position: absolute;
    z-index: 2;
    top: 25px;
    left: 20px
}

.inside-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0 5%,rgba(255,221,0,.16),transparent 45%),radial-gradient(circle at 86% 92%,rgba(255,221,0,.42),transparent 31%)
}

.inside:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: var(--yellow)
}

.inside-cards {
    position: absolute;
    z-index: 2;
    left: 3px;
    right: 3px;
    bottom: 29.5%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 3px;
    align-items: end
}

.inside-cards article {
    background: rgba(13,13,14,.94);
    min-height: 320px;
    padding: 20px;
    display: flex;
    flex-direction: column
}

.inside-cards article>div {
    display: flex;
    gap: 45px;
    align-items: center;
    border-bottom: 1px solid #272729;
    padding-bottom: 17px
}

.inside-cards h3 {
    font-size: 18px;
    font-weight: 400;
    margin: 0
}

.inside-cards b {
    font-size: 15px
}

.inside-cards a {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    margin-left: 72px;
    padding: 18px 0;
    border-bottom: 1px solid #272729;
    color: #c6c6c8;
    font-size: 13px
}

.chapter-intro {
    height: 100svh;
    min-height: 700px;
    position: relative;
    background: #000;
    overflow: hidden
}

.chapter-intro>.brand-logo {
    position: absolute;
    top: 32px;
    left: 32px;
}

.chapter-intro h2 {
    position: absolute;
    z-index: 2;
    left: 32px;
    bottom: 32px;
    font-family: Bounded;
    font-size: clamp(70px,7.6vw,140px);
    line-height: .78;
    letter-spacing: -.07em;
    margin: 0
}

.chapter-intro h2 span {
    color: var(--yellow)
}

.chapter-intro>p {
    position: absolute;
    z-index: 2;
    left: 67%;
    right: 32px;
    bottom: 32px;
    /* width: 230px; */
    color: #a6a6aa;
    line-height: 1.1
}

.ghost-marks {
    position: absolute;
    right: -9vw;
    top: -15vw;
    width: 42vw;
    opacity: .055
}

.ghost-marks .mark-window:nth-child(2) {
    width: 68%;
    margin: -10% 0 0 25%
}

.detail {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3px;
    padding: 3px;
    background: #050505;
    align-items: start
}

.detail-info {
    height: calc(100svh - 6px);
    min-height: 694px;
    background: linear-gradient(180deg,#101011,#090909);
    position: sticky;
    top: 3px;
    overflow: hidden
}

.detail-meta {
    display: flex;
    justify-content: space-between;
    padding: 22px 20px;
    position: relative;
    z-index: 2
}

.detail-meta span,.detail-meta b,.detail-content>article>small,.detail-content>div>small {
    font-size: 10px;
    font-weight: 500;
    color: #c7c7c8;
    text-transform: uppercase
}

.detail-copy {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 38px;
    width: 68%
}

.detail-copy h3 {
    font-family: Bounded;
    font-size: 29px;
    font-weight: 400;
    letter-spacing: -.035em;
    margin: 0 0 34px
}

.detail-copy p {
    font-size: 12px;
    line-height: 1.24;
    margin: 0;
    color: #b8b8bb
}

.detail-watermark {
    position: absolute;
    width: 62%;
    left: -13%;
    top: -13%;
    opacity: .035
}

.detail-content {
    display: grid;
    gap: 3px;
    min-width: 0
}

.detail-content>article,.detail-content>div {
    background: var(--panel);
    border-radius: 5px;
    position: relative
}

.quote-panel {
    height: calc(50svh - 4.5px);
    min-height: 346px;
    padding: 20px
}

.quote-panel p {
    font-family: Bounded;
    font-size: clamp(25px,2.7vw,52px);
    line-height: 1.02;
    letter-spacing: -.045em;
    width: 80%;
    margin: auto;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-42%)
}

.quote-panel.accent-panel {
    background: var(--yellow);
    color: #17191e
}

.quote-panel.accent-panel small {
    color: #17191e
}

.traits-grid {
    height: calc(100svh - 6px);
    min-height: 694px;
    display: grid!important;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    background: #050505!important
}

.traits-grid article {
    background: var(--panel);
    border-radius: 5px;
    padding: 20px;
    display: flex;
    flex-direction: column
}

.traits-grid b {
    font-size: 10px;
    color: var(--yellow)
}

.traits-grid h4 {
    font-family: Bounded;
    font-size: 34px;
    margin: auto 0 15px
}

.traits-grid p {
    font-size: 12px;
    color: #aaa;
    max-width: 300px
}

.voice-grid {
    height: calc(100svh - 6px);
    min-height: 694px;
    display: grid!important;
    grid-template-rows: 42px repeat(5,1fr);
    gap: 3px;
    background: #050505!important
}

.voice-grid header,.voice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px
}

.voice-grid header span,.voice-row p {
    background: var(--panel);
    margin: 0;
    padding: 17px 20px
}

.voice-grid header span {
    font-size: 9px
}

.voice-grid header span:first-child {
    color: var(--yellow)
}

.voice-grid header span:last-child {
    color: #d3613b
}

.voice-row p {
    display: flex;
    align-items: center;
    font-size: 12px
}

.voice-row p:first-child {
    color: #d5d5d6
}

.voice-row p:last-child {
    color: #8b8b8d
}

.detail.tall .detail-content {
    grid-auto-rows: minmax(calc(50svh - 4.5px),auto)
}

.asset-panel {
    min-height: calc(50svh - 4.5px);
    padding: 20px;
    display: grid;
    place-items: center
}

.asset-panel>small {
    position: absolute;
    top: 20px;
    left: 20px
}

.logo-primary .brand-logo {
    width: 350px
}

.logo-secondary {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.logo-secondary .mark-window {
    width: 120px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(99%) saturate(1000%)
}

.logo-secondary>b {
    font-family: Bounded;
    font-size: 45px
}

.symbol-panel .mark-window {
    width: 230px;
    filter: invert(1)
}

.color-usage {
    display: grid!important;
    grid-template-columns: repeat(3,1fr);
    gap: 3px;
    background: #050505!important
}

.color-usage article {
    border-radius: 5px;
    background: #fff;
    color: #111;
    padding: 18px;
    display: grid;
    place-items: center
}

.color-usage article:nth-child(2) {
    background: var(--yellow)
}

.color-usage article:nth-child(3) {
    background: #161616;
    color: white
}

.color-usage .brand-logo {
    width: 65%
}

.color-usage small {
    position: absolute;
    top: 18px;
    left: 18px;
    font-size: 9px
}

.download-pill {
    position: absolute;
    z-index: 5;
    left: 20px;
    bottom: 40px;
    text-decoration: none;
    background: var(--yellow);
    color: #111;
    border-radius: 99px;
    padding: 13px 22px;
    font-size: 11px
}

.detail.tall {
    position: relative
}

.palette-grid {
    height: calc(100svh - 6px);
    min-height: 694px;
    display: grid!important;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    background: #050505!important
}

.color-card {
    border: 0;
    border-radius: 5px;
    text-align: left;
    padding: 18px;
    display: flex;
    flex-direction: column;
    cursor: default
}

.color-card small {
    font-size: 9px
}

.color-card b {
    margin-top: auto;
    font-size: 20px
}

.color-card span {
    font-size: 9px;
    margin-top: 8px
}

.color-card.yellow {
    background: var(--yellow)
}

.color-card.graphite {
    background: #1d2029;
    color: white
}

.color-card.ink {
    background: #0c0d10;
    color: white
}

.color-card.white {
    background: #f5f4ef
}

.color-card.mist {
    background: #d8d7d2
}

.color-card.pure {
    background: white
}

.typeface-panel {
    min-height: calc(100svh - 6px);
    padding: 20px
}

.typeface-panel>div:nth-of-type(1) {
    position: absolute;
    left: 20%;
    top: 18%
}

.typeface-panel h4 {
    font-family: Bounded;
    font-size: clamp(70px,8vw,140px);
    margin: 0;
    letter-spacing: -.07em
}

.typeface-panel p {
    font-family: Bounded;
    font-size: clamp(27px,3.3vw,56px);
    line-height: 1.1
}

.font-weights {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 3px
}

.font-weights span {
    background: #181819;
    border-radius: 4px;
    padding: 16px;
    font-family: Bounded;
    font-size: 36px
}

.font-weights small {
    display: block;
    font-family: Wix Madefor Display;
    font-size: 8px;
    margin-top: 18px
}

.hierarchy-panel {
    padding: 20px;
    min-height: calc(100svh - 6px)
}

.type-row {
    display: grid;
    grid-template-columns: 70px 1fr 145px;
    align-items: center;
    border-bottom: 1px solid #2a2a2b;
    padding: 9px 0
}

.type-row b,.type-row span {
    font-size: 8px;
    color: #929296
}

.type-row p {
    font-family: Bounded;
    margin: 0;
    letter-spacing: -.035em
}

.type-row.r0 p {
    font-size: 72px
}

.type-row.r1 p {
    font-size: 56px
}

.type-row.r2 p {
    font-size: 42px
}

.type-row.r3 p {
    font-size: 34px
}

.type-row.r4 p {
    font-size: 26px
}

.type-row.r5 p {
    font-size: 18px
}

.type-row.r6 p {
    font-size: 14px
}

.type-row.r7 p {
    font-size: 10px;
    letter-spacing: .05em
}

.icon-grid {
    height: calc(100svh - 6px);
    min-height: 694px;
    display: grid!important;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 3px;
    background: #050505!important
}

.icon-grid article {
    background: var(--panel);
    border-radius: 5px;
    display: grid;
    place-items: center;
    position: relative
}

.icon-grid img {
    width: 45px;
    height: 45px;
    filter: grayscale(1);
    opacity: .85
}

.icon-grid span {
    position: absolute;
    bottom: 18px;
    font-size: 8px;
    color: #929296
}

.icon-grid button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    opacity: 0;
    border: 0;
    border-radius: 99px;
    padding: 6px 9px;
    background: #242426;
    color: white;
    font-size: 8px;
    transition: .2s
}

.icon-grid article:hover button {
    opacity: 1
}

.ui-panel {
    min-height: calc(50svh - 4.5px);
    padding: 24px;
    overflow: hidden;
    background: #f6f5f2!important;
    color: #1c1f22
}

.ui-panel>small {
    position: relative;
    z-index: 2;
    color: rgba(28,31,34,.52)!important
}

.buttons-panel,.filters-panel,.fields-panel,.cards-panel {
    display: grid;
    place-items: center
}

.buttons-panel>small,.filters-panel>small,.fields-panel>small,.cards-panel>small {
    position: absolute;
    left: 24px;
    top: 24px
}

.source-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px
}

.source-btn {
    min-height: 62px;
    padding: 20px 30px;
    border: 0;
    border-radius: 35px;
    background: #ffdd00;
    color: #1c1f22;
    font-family: Bounded,Arial,sans-serif;
    font-size: 16px;
    font-weight: 566;
    line-height: 22px;
    cursor: pointer;
    transition: background-color .3s,color .3s,border-color .3s
}

.source-btn:hover,.source-btn:focus-visible {
    background: #1c1f22;
    color: #ffdd00
}

.source-btn-outline {
    padding: 17px 27px;
    border: 3px solid #1c1f22;
    background: transparent
}

.source-btn:focus-visible,.source-filter:focus-visible {
    outline: 2px solid #1c1f22;
    outline-offset: 4px
}

.source-filter-demo {
    width: min(100%,540px);
    display: grid;
    gap: 34px
}

.source-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px
}

.source-filter {
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: #1c1f22;
    font-family: Bounded,Arial,sans-serif;
    font-size: 14px;
    font-weight: 566;
    opacity: .5;
    cursor: pointer;
    transition: opacity .3s,border-color .3s
}

.source-filter:hover,.source-filter.active {
    opacity: 1
}

.source-filter.active {
    border-bottom-color: #1c1f22
}

.source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px
}

.source-tags span {
    color: #2f3033;
    font-family: Bounded,Arial,sans-serif;
    font-size: 12px;
    font-weight: 466
}

.source-tags {
    transition: opacity .14s ease,transform .14s ease
}

.source-tags.is-changing {
    opacity: 0;
    transform: translateY(4px)
}

.source-form {
    width: min(100%,460px);
    display: grid;
    gap: 32px
}

.source-form-group {
    position: relative;
    min-height: 62px;
    border-bottom: 1px solid rgba(28,31,34,.3)
}

.source-form-group input {
    width: 100%;
    height: 62px;
    padding: 20px 0 5px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #1c1f22;
    font-family: "Wix Madefor Display",Arial,sans-serif;
    font-size: 18px;
    font-weight: 400
}

.source-form-group input:focus,.source-form-group input:focus-visible {
    outline: 0;
    box-shadow: none
}

.source-form-group label {
    position: absolute;
    left: 0;
    top: 23px;
    color: #1c1f22;
    font-family: "Wix Madefor Display",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    transition: top .3s,font-size .3s
}

.source-form-group input:focus+label,.source-form-group input:not(:placeholder-shown)+label {
    top: 4px;
    font-size: 11px
}

.component-project-card {
    width: min(100%,360px);
    display: block;
    overflow: hidden;
    color: #1c1f22;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: .2s
}

.component-project-card .project-image {
    width: 100%;
    aspect-ratio: 1.85/1;
    margin-bottom: 19px;
    overflow: hidden;
    border-radius: 20px;
    transition: opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)
}

.component-project-card .project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .3s
}

.component-project-card:hover .project-image img,
.component-project-card:focus-visible .project-image img {
    transform: scale(1.1)
}

.component-project-card .project-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .6s cubic-bezier(.22,1,.36,1) .3s,transform .7s cubic-bezier(.22,1,.36,1) .3s
}

.component-project-card .project-title {
    margin: 0;
    font-family: Bounded,Arial,sans-serif;
    font-size: 19px;
    font-weight: 566;
    line-height: 23px
}

.component-project-card .project-description {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #1c1f22;
    font-family: "Wix Madefor Display",Arial,sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px
}

.component-project-card .project-tags {
    display: flex;
    gap: 10px
}

.component-project-card .project-tag {
    margin: 0;
    color: #2f3033;
    font-family: Bounded,Arial,sans-serif;
    font-size: 7px;
    font-weight: 466;
    line-height: 9px;
    white-space: nowrap
}

.component-project-card:focus-visible {
    outline: 2px solid #1c1f22;
    outline-offset: 4px
}

.app-sizes,.browser-context {
    height: calc(50svh - 4.5px);
    min-height: 346px;
    padding: 20px
}

.app-sizes>div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px
}

.app-sizes>div>span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.app-sizes i {
    display: grid;
    place-items: center;
    background: var(--yellow);
    border-radius: 20%;
    overflow: hidden
}

.app-sizes .mark-window {
    width: 65%;
    filter: none
}

.app-sizes b {
    font-size: 10px
}

.browser-context>div {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%,-50%);
    width: 460px;
    background: #070707;
    border-radius: 25px;
    padding: 12px 16px 20px;
    box-shadow: 0 0 0 8px #020202
}

.browser-context span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Bounded;
    font-size: 17px;
    background: #222225;
    padding: 12px 18px;
    border-radius: 16px
}

.browser-context span i {
    width: 26px;
    height: 26px;
    background: var(--yellow);
    border-radius: 6px;
    display: grid;
    place-items: center
}

.browser-context .mark-window {
    width: 75%
}

.browser-context b {
    float: right;
    background: #222225;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 22px
}

.browser-context p {
    background: #161617;
    color: #666;
    border-radius: 10px;
    padding: 14px
}

.social-panel {
    height: calc(50svh - 4.5px);
    min-height: 346px;
    padding: 20px;
    display: grid;
    place-items: center
}

.social-panel>small {
    position: absolute;
    top: 20px;
    left: 20px
}

.social-profile {
    width: 330px;
    background: #070707;
    border: 1px solid #242426;
    border-radius: 14px;
    padding: 16px;
    position: relative
}

.social-cover {
    height: 80px;
    background: linear-gradient(120deg,#090909,#363000);
    padding: 18px;
    font-family: Bounded;
    font-size: 13px
}

.social-cover b {
    color: var(--yellow)
}

.social-profile>.mark-window {
    width: 56px;
    background: var(--yellow);
    border-radius: 50%;
    padding: 8px;
    margin-top: -28px
}

.social-profile h4 {
    font-family: Bounded;
    font-size: 18px;
    margin: 8px 0
}

.social-profile p {
    font-size: 10px;
    color: #aaa
}

.post {
    width: 330px;
    aspect-ratio: 1;
    background: var(--yellow);
    color: #111;
    padding: 24px
}

.post .brand-logo {
    width: 110px
}

.post p {
    font-family: Bounded;
    font-size: 28px;
    line-height: 1.05;
    margin-top: 80px
}

.post p b {
    font-size: 34px
}

footer {
    height: 360px;
    background: #000;
    padding: 24px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end
}

footer>.brand-logo {
    align-self: start
}

footer a {
    justify-self: center;
    text-decoration: none
}

footer p {
    text-align: right;
    font-size: 9px
}

@media(max-width: 900px) {
    .nav-groups {
        left:20px;
        top: 95px;
        grid-template-columns: 1fr 1fr
    }

    .nav-groups>div {
        min-height: 230px
    }

    .inside-cards {
        grid-template-columns: 1fr 1fr;
        bottom: 10%
    }

    .inside:after {
        height: 10%
    }

    .inside-cards article {
        min-height: 240px
    }

    .detail {
        grid-template-columns: 1fr
    }

    .detail-info {
        position: relative;
        top: 0;
        height: 65svh;
        min-height: 500px
    }

    .detail-content>article,.detail-content>div {
        min-height: 420px;
        height: auto
    }

    .quote-panel {
        min-height: 420px
    }

    .traits-grid,.voice-grid,.palette-grid,.icon-grid {
        height: auto;
        min-height: 800px
    }

    .detail.tall .detail-content {
        grid-auto-rows: minmax(520px,auto)
    }

    .typeface-panel,.hierarchy-panel {
        min-height: 700px
    }

    .chapter-intro>p {
        left: auto;
        right: 20px
    }

    .inside-cards article:nth-child(n+3) {
        display: none
    }

    .logo-primary .brand-logo {
        width: 260px
    }

    .color-usage {
        grid-template-columns: 1fr
    }

    .type-row.r0 p {
        font-size: 52px
    }

    .type-row.r1 p {
        font-size: 42px
    }

    .type-row.r2 p {
        font-size: 34px
    }
}

@media(max-width: 560px) {
    body {
        font-size:12px
    }

    .hero-top {
        width: 230px
    }

    .hero-title h1 {
        font-size: 52px
    }

    .hero-mark-a {
        width: 85vw
    }

    .hero-mark-b {
        width: 60vw
    }

    .inside h2 {
        font-size: 32px
    }

    .inside-cards {
        grid-template-columns: 1fr
    }

    .inside-cards article:nth-child(n+2) {
        display: none
    }

    .chapter-intro h2 {
        font-size: 52px
    }

    .chapter-intro>p {
        left: 20px;
        right: 20px;
        bottom: 150px;
        width: auto
    }

    .detail-copy {
        width: 80%
    }

    .traits-grid {
        grid-template-columns: 1fr
    }

    .voice-grid {
        grid-template-rows: 40px repeat(5,1fr)
    }

    .voice-row p {
        font-size: 9px;
        padding: 12px 8px
    }

    .palette-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3,230px)
    }

    .color-card {
        min-height: 0!important
    }

    .icon-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6,200px)
    }

    .typeface-panel>div:nth-of-type(1) {
        left: 20px
    }

    .typeface-panel h4 {
        font-size: 50px
    }

    .font-weights {
        grid-template-columns: repeat(3,1fr)
    }

    .type-row {
        grid-template-columns: 45px 1fr
    }

    .type-row span {
        display: none
    }

    .type-row.r0 p {
        font-size: 36px
    }

    .type-row.r1 p {
        font-size: 30px
    }

    .type-row.r2 p {
        font-size: 25px
    }

    .app-sizes>div {
        justify-content: flex-start;
        overflow: auto
    }

    .app-sizes i {
        max-width: 160px;
        max-height: 160px
    }

    .browser-context>div {
        width: 88%
    }

    .social-profile,.post {
        width: 270px
    }

    .nav-groups {
        grid-template-columns: 1fr;
        overflow: auto;
        bottom: 40px
    }

    .nav-groups>div {
        min-height: auto
    }

    .nav-overlay>p {
        display: none
    }

    footer {
        grid-template-columns: 1fr;
        gap: 30px;
        height: 420px
    }

    footer a,footer p {
        justify-self: start;
        text-align: left
    }
}

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

    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none
    }

    .hero-wave,.hero-mark {
        animation: none
    }
}

/* Randomized presentation for the four completed icon families. */
.developed-icon-name {
    position: absolute;
    z-index: 9;
    top: 10px;
    left: 11px;
    padding: 4px 6px;
    border-radius: 99px;
    background: rgba(12,13,16,.72);
    color: #fff;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 7px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
    pointer-events: none
}

.icon-gallery-card.is-developed .icon-cycle-state,
.icon-gallery-card.is-developed .icon-cycle-state:first-child {
    opacity: 0;
    transform: none;
    transition: opacity .38s ease
}

.icon-gallery-card.is-developed .icon-cycle-state.is-active {
    z-index: 1;
    opacity: 1;
    transform: none
}

.icon-gallery-card.is-developed .icon-cycle-state.is-active img {
    animation: none
}

.icon-gallery-card.is-developed .icon-cycle-state:after {
    display: none!important;
    content: none!important
}

.icon-gallery-card.is-developed:hover .icon-cycle-state,
.icon-gallery-card.is-developed:focus-within .icon-cycle-state {
    animation: none!important
}

/* Logo clear-space diagrams. X equals the cursor-stem module in the mark. */
.logo-safe-demo {
    --safe-x: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.logo-primary .logo-safe-demo {
    width: 350px
}

.logo-primary .logo-safe-demo .brand-logo {
    width: 100%
}

.logo-secondary .logo-safe-demo {
    width: 170px
}

.logo-secondary .logo-vertical-asset {
    display: block;
    width: 100%;
    height: auto
}

.symbol-panel .logo-safe-demo {
    --safe-x: 34px;
    width: 230px
}

.logo-safe-area {
    position: absolute;
    z-index: 5;
    inset: calc(var(--safe-x) * -1);
    border: 0;
    border-radius: 2px;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1);
    pointer-events: none
}

.logo-safe-area:before {
    content: none
}

.logo-safe-area i {
    position: absolute;
    display: grid;
    place-items: center;
    color: #b8b8bc;
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 9px;
    font-style: normal;
    line-height: 1
}

.logo-safe-area .safe-top,
.logo-safe-area .safe-bottom {
    left: var(--safe-x);
    right: var(--safe-x);
    height: var(--safe-x);
    background: rgba(255,255,255,.018)
}

.logo-safe-area .safe-top {
    top: 0
}

.logo-safe-area .safe-bottom {
    bottom: 0
}

.logo-safe-area .safe-left,
.logo-safe-area .safe-right {
    top: var(--safe-x);
    bottom: var(--safe-x);
    width: var(--safe-x);
    background: rgba(255,255,255,.018)
}

.logo-safe-area .safe-left {
    left: 0
}

.logo-safe-area .safe-right {
    right: 0
}

.logo-safe-area .safe-top:before,
.logo-safe-area .safe-top:after,
.logo-safe-area .safe-bottom:before,
.logo-safe-area .safe-bottom:after {
    content: "";
    position: absolute;
    left: 50%;
    width: 200vw;
    border-top: 1px solid rgba(145,145,150,.58);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .48s cubic-bezier(.22,1,.36,1)
}

.logo-safe-area .safe-top:before,
.logo-safe-area .safe-bottom:before {
    top: 0
}

.logo-safe-area .safe-top:after,
.logo-safe-area .safe-bottom:after {
    bottom: 0
}

.logo-safe-area .safe-left:before,
.logo-safe-area .safe-left:after,
.logo-safe-area .safe-right:before,
.logo-safe-area .safe-right:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 200vh;
    border-left: 1px solid rgba(145,145,150,.58);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform .48s cubic-bezier(.22,1,.36,1)
}

.logo-safe-area .safe-left:before,
.logo-safe-area .safe-right:before {
    left: 0
}

.logo-safe-area .safe-left:after,
.logo-safe-area .safe-right:after {
    right: 0
}

.logo-safe-area .safe-top:after,
.logo-safe-area .safe-left:after {
    transition-delay: .06s
}

.logo-safe-area .safe-bottom:before,
.logo-safe-area .safe-right:before {
    transition-delay: .12s
}

.logo-safe-area .safe-bottom:after,
.logo-safe-area .safe-right:after {
    transition-delay: .18s
}

.asset-panel:hover .logo-safe-area .safe-top:before,
.asset-panel:hover .logo-safe-area .safe-top:after,
.asset-panel:hover .logo-safe-area .safe-bottom:before,
.asset-panel:hover .logo-safe-area .safe-bottom:after {
    transform: translateX(-50%) scaleX(1)
}

.asset-panel:hover .logo-safe-area .safe-left:before,
.asset-panel:hover .logo-safe-area .safe-left:after,
.asset-panel:hover .logo-safe-area .safe-right:before,
.asset-panel:hover .logo-safe-area .safe-right:after {
    transform: translateY(-50%) scaleY(1)
}

.logo-safe-note {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: block;
    color: #aaa;
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none
}

.logo-safe-note strong {
    position: absolute;
    top: 20px;
    right: 72px;
    width: min(285px,34%);
    color: #e8e8ea;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
    text-align: left
}

.logo-safe-note>span {
    position: absolute;
    top: 38px;
    right: 72px;
    width: min(285px,34%);
    text-align: left
}

.logo-safe-note .logo-min-sizes {
    position: absolute;
    right: 20px;
    bottom: 18px;
    width: min(285px,34%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #d1d1d4;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0
}

.logo-safe-note .logo-min-sizes b {
    margin-bottom: 2px;
    color: var(--yellow);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em
}

.asset-panel:hover .logo-safe-area {
    opacity: 1;
    transform: scale(1)
}

.asset-panel:hover .logo-safe-note {
    opacity: 1;
    transition-delay: .25s
}

.asset-panel {
    overflow: hidden
}

@media(max-width:809px) {
    .logo-safe-demo {
        --safe-x: 20px
    }

    .logo-primary .logo-safe-demo {
        width: min(68%,230px)
    }

    .logo-secondary .logo-safe-demo {
        width: 140px
    }

    .symbol-panel .logo-safe-demo {
        --safe-x: 24px;
        width: 170px
    }

    .logo-safe-note {
        font-size: 9px
    }

    .logo-safe-note strong,
    .logo-safe-note>span {
        right: 14px;
        width: 44%
    }

    .logo-safe-note .logo-min-sizes {
        right: 14px;
        bottom: 12px;
        width: 44%
    }
}

@media(min-width:810px) {
    #personality .trait-content>img {
        width: 55px;
        height: 55px;
        flex: 0 0 55px
    }

    .logo-safe-note strong,
    .logo-safe-note>span {
        left: calc(38% + 20px);
        right: auto;
        width: min(320px,44%);
        font-size: 11px;
        line-height: 1.25;
        text-align: left
    }

    .logo-safe-note strong {
        top: 20px;
        line-height: 1
    }

    .logo-safe-note>span {
        top: 42px
    }

    .logo-safe-note .logo-min-sizes {
        right: 20px;
        bottom: 20px;
        width: min(320px,44%);
        align-items: flex-end;
        color: #d1d1d4;
        font-size: 11px;
        line-height: 1.25;
        text-align: right
    }

    .logo-safe-note .logo-min-sizes b {
        font-size: 11px;
        line-height: 1
    }
}

@media(min-width: 901px) {
    .inside-cards {
        right:25%;
        grid-template-columns: repeat(3,1fr)
    }

    .inside-cards article:nth-child(4) {
        display: none
    }
}

.quote-panel p {
    font-size: clamp(24px,2.25vw,44px);
    width: 78%
}

/* Section-by-section navigation */
html {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none
}

main>section,main>footer {
    scroll-snap-align: start;
    scroll-snap-stop:always}

/* What's inside — same full-width bottom grid as the reference */
@media(min-width: 901px) {
    .inside:after {
        display:none
    }

    .inside-glow {
        background: radial-gradient(ellipse at 8% 2%,rgba(255,221,0,.18),transparent 50%),radial-gradient(ellipse at 92% 100%,rgba(255,221,0,.16),transparent 35%)
    }

    .inside-cards {
        left: 3px;
        right: 3px;
        bottom: 3px;
        grid-template-columns: repeat(4,1fr)
    }

    .inside-cards article:nth-child(4) {
        display: flex
    }

    .inside-cards article {
        min-height: 326px;
        border-radius: 5px
    }
}

/* Vector arrows, typography scale, favicon context and final hero-like screen */
.arrow-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    overflow: hidden;
    color: currentColor
}

.arrow-icon svg {
    position: absolute;
    width: 18px;
    height: 18px;
    display: block;
    transition: transform .45s cubic-bezier(.22,1,.36,1)
}

.arrow-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.arrow-icon .arrow-out {
    position: relative;
    color: #ffffff;
}

.arrow-icon .arrow-in {
    left: -18px;
    bottom: -18px;
    color: #fff
}

.inside-cards a .arrow-icon,.footer-groups a .arrow-icon {
    color: #c8cbdb;
    margin-left: auto
}

.nav-overlay>a>.arrow-icon {
    color: #8a8fa2;
    transition: color .2s ease
}

.nav-overlay>a:hover>.arrow-icon,.nav-overlay>a:focus-visible>.arrow-icon {
    color: #101011
}

.typography-detail .hierarchy-panel {
    height: calc(100svh - 6px);
    min-height: 694px;
    padding: 20px;
    display: grid;
    grid-template-rows: 18px 1.08fr .92fr;
    gap: 3px;
    overflow: hidden;
    background: #101011
}

.hierarchy-panel>small {
    position: static!important;
    align-self: start
}

.type-scale {
    min-height: 0;
    background: #151516;
    border-radius: 5px;
    padding: 12px 16px;
    display: grid;
    overflow: hidden
}

.type-scale header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #303032;
    padding: 0 0 8px
}

.type-scale header b {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 12px;
    font-weight: 500
}

.type-scale header span {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 10px;
    color: #8a8fa2
}

.type-scale-titles {
    grid-template-rows: 34px 1.65fr repeat(5,1fr)
}

.type-scale-text {
    grid-template-rows: 34px 1.6fr 1.15fr repeat(5,1fr)
}

.type-scale .type-row {
    min-height: 0;
    display: grid;
    grid-template-columns: 74px minmax(0,1fr) 175px;
    align-items: center;
    border-bottom: 1px solid #303032;
    padding: 2px 0
}

.type-scale .type-row:last-child {
    border-bottom: 0
}

.type-scale .type-row>b,.type-scale .type-row>span {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 10px;
    color: #919298;
    font-weight: 500
}

.type-scale .type-row>p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip
}

.type-scale .title-r0 p {
    font-family: Bounded;
    font-size: clamp(58px,5vw,96px);
    line-height: .94;
    font-weight: 600;
    letter-spacing: -.025em
}

.type-scale .title-r1 p {
    font-family: Bounded;
    font-size: 48px;
    line-height: 50px;
    font-weight: 600
}

.type-scale .title-r2 p {
    font-family: Bounded;
    font-size: 38px;
    line-height: 40px;
    font-weight: 600
}

.type-scale .title-r3 p {
    font-family: Bounded;
    font-size: 32px;
    line-height: 38px;
    font-weight: 600
}

.type-scale .title-r4 p {
    font-family: Bounded;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600
}

.type-scale .title-r5 p {
    font-family: Bounded;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600
}

.type-scale-text .bounded p {
    font-family: Bounded;
    font-size: 64px;
    line-height: 64px;
    font-weight: 600
}

.type-scale-text .wix p {
    font-family: Wix Madefor Display;
    font-weight: 400
}

.type-scale-text .medium p {
    font-weight: 500
}

.type-scale-text .type-row:nth-child(3) p {
    font-size: 32px;
    line-height: 44px
}

.type-scale-text .type-row:nth-child(4) p,.type-scale-text .type-row:nth-child(5) p {
    font-size: 18px;
    line-height: 28px
}

.type-scale-text .type-row:nth-child(6) p,.type-scale-text .type-row:nth-child(7) p {
    font-size: 16px;
    line-height: 20px
}

.type-scale-text .button p {
    font-family: Bounded;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600
}

.browser-context>.browser-mockup {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%,-50%);
    width: min(580px,calc(100% - 48px));
    height: 212px;
    padding: 8px 8px 48px;
    background: #000;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(0deg,transparent 0,#000 25%,#000 100%);
    mask-image: linear-gradient(0deg,transparent 0,#000 25%,#000 100%)
}

.browser-head {
    height: 68px;
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.browser-context .browser-tab {
    height: 68px;
    min-width: 0;
    flex: 0 0 min(392px,calc(100% - 70px));
    padding: 0 20px;
    gap: 16px;
    border-radius: 10px 10px 0 0;
    background: #262628
}

.browser-context .browser-tab strong {
    font-size: 24px;
    font-weight: 400
}

.browser-context .browser-tab em {
    margin-left: auto;
    font-style: normal;
    font-size: 30px;
    line-height: 1;
    color: #8a8fa2;
    font-weight: 200
}

.browser-context .favicon-tile {
    width: 34px!important;
    height: 34px!important;
    flex: 0 0 34px;
    border-radius: 0;
    background: transparent;
    overflow: visible
}

.browser-context .favicon-tile svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: var(--yellow)
}

.browser-context .browser-head>b {
    float: none;
    width: 62px;
    height: 60px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background: #101011;
    font-size: 31px;
    font-weight: 300;
    color: #8a8fa2
}

.browser-context .browser-mockup>p {
    height: 96px;
    margin: 0;
    padding: 24px 24px;
    border: 8px solid #262628;
    border-radius: 0 10px 10px;
    background: #101011;
    color: #8a8fa2;
    font-size: 22px;
    line-height: 32px
}

footer.site-footer {
    position: relative;
    isolation: isolate;
    height: 100svh;
    min-height: 700px;
    display: block;
    overflow: hidden;
    padding: 20px;
    background: #000;
    color: #fff
}

.footer-ribbon {
    position: absolute;
    z-index: -2;
    inset: -20%;
    background: radial-gradient(ellipse at 72% 28%,rgba(255,221,0,.74),rgba(255,221,0,.18) 34%,transparent 62%),radial-gradient(ellipse at 12% 92%,rgba(255,221,0,.28),transparent 48%);
    filter: blur(28px);
    animation: footerRibbon 9s ease-in-out infinite alternate
}

.footer-ribbon:after {
    content: "";
    position: absolute;
    inset: 20% -10% 10% 24%;
    border-radius: 50%;
    background: #000;
    filter: blur(32px);
    transform: rotate(8deg)
}

@keyframes footerRibbon {
    to {
        transform: translate3d(4%,-3%,0) rotate(2deg) scale(1.05)
    }
}

.footer-top {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start
}

.footer-top>div>p {
    width: 275px;
    margin: 36px 0 0;
    font-size: 15px;
    line-height: 1.18;
    color: #f5f4ef;
    text-align: left
}

.footer-to-top {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    text-decoration: none
}

.footer-to-top span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    color: #111318;
    font-size: 16px
}

.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 38px
}

.footer-socials a {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: transform .25s ease,opacity .25s ease
}

.footer-socials a:hover {
    transform: translateY(-3px)
}

.footer-socials a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 50%
}

.footer-socials img {
    position: absolute;
    inset: 0;
    display: block;
    width: 48px;
    height: 48px;
    transition: opacity .25s ease
}

.footer-socials .social-icon-hover {
    opacity: 0
}

.footer-socials a:hover .social-icon-base,
.footer-socials a:focus-visible .social-icon-base {
    opacity: 0
}

.footer-socials a:hover .social-icon-hover,
.footer-socials a:focus-visible .social-icon-hover {
    opacity: 1
}

.site-footer>.hero-glass-mark {
    z-index: -1;
    right: -82px;
    top: -82px
}

.footer-groups {
    position: absolute;
    z-index: 3;
    left: 4px;
    right: 4px;
    bottom: 4px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 4px
}

.footer-groups article {
    height: 326px;
    padding: 20px;
    background: rgba(17,17,18,.78);
    border-radius: 8px;
    backdrop-filter: blur(18px)
}

.footer-groups article>div {
    display: flex;
    align-items: center;
    gap: 45px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(200,203,219,.14)
}

.footer-groups h3 {
    margin: 0;
    font-family: Bounded;
    font-size: 19px;
    font-weight: 500;
    line-height: 1
}

.footer-groups b {
    font-size: 14px
}

.footer-groups a {
    display: flex;
    align-items: center;
    margin-left: 72px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(200,203,219,.14);
    text-decoration: none;
    color: #f5f4ef;
    font-size: 14px
}

.footer-copy {
    position: absolute;
    left: 20px;
    bottom: 350px;
    margin: 0;
    font-size: 9px;
    color: #9b9ca1
}

@media(max-width: 809px) {
    .typography-detail .hierarchy-panel {
        height:auto!important;
        min-height: 0!important;
        grid-template-rows: auto auto auto;
        padding: 16px;
        gap: 4px
    }

    .type-scale {
        padding: 12px;
        grid-template-rows: auto;
        display: block
    }

    .type-scale+.type-scale {
        margin-top: 4px
    }

    .type-scale header {
        height: 36px
    }

    .type-scale .type-row {
        grid-template-columns: 46px minmax(0,1fr);
        min-height: 66px;
        padding: 8px 0
    }

    .type-scale .type-row>span {
        display: block;
        grid-column: 2;
        font-size: 7px;
        margin-top: 3px
    }

    .type-scale .title-r0 p {
        font-size: 38px;
        line-height: 40px
    }

    .type-scale .title-r1 p {
        font-size: 32px;
        line-height: 36px
    }

    .type-scale .title-r2 p {
        font-size: 28px;
        line-height: 32px
    }

    .type-scale .title-r3 p {
        font-size: 25px;
        line-height: 30px
    }

    .type-scale .title-r4 p {
        font-size: 22px;
        line-height: 28px
    }

    .type-scale .title-r5 p {
        font-size: 19px;
        line-height: 24px
    }

    .type-scale-text .bounded p {
        font-size: 35px;
        line-height: 38px
    }

    .browser-context>.browser-mockup {
        width: calc(100% - 32px);
        height: 140px;
        padding: 7px;
        border-radius: 22px;
        box-shadow: 0 0 0 6px #020202
    }

    .browser-head {
        height: 50px
    }

    .browser-context .browser-tab {
        height: 50px;
        padding: 0 10px;
        gap: 8px;
        border-radius: 16px 16px 7px 7px
    }

    .browser-context .browser-tab strong {
        font-size: 15px
    }

    .browser-context .browser-tab em {
        font-size: 23px
    }

    .browser-context .favicon-tile {
        width: 28px!important;
        height: 28px!important;
        flex-basis: 28px
    }

    .browser-context .favicon-tile svg {
        width: 22px;
        height: 22px
    }

    .browser-context .browser-head>b {
        width: 50px;
        height: 50px;
        font-size: 25px;
        border-radius: 16px
    }

    .browser-context .browser-mockup>p {
        height: 76px;
        padding: 24px 14px;
        font-size: 13px
    }

    footer.site-footer {
        height: auto;
        min-height: 1760px;
        padding: 18px;
        display: block
    }

    .footer-ribbon {
        inset: -5% -80%;
        filter: blur(22px)
    }

    .footer-top {
        display: block
    }

    .footer-top>div>p {
        width: 235px;
        margin-top: 28px;
        font-size: 13px
    }

    .footer-to-top {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 12px
    }

    .footer-socials {
        margin-top: 28px
    }

    .site-footer>.hero-glass-mark {
        right: -40px;
        top: -40px
    }

    .footer-groups {
        left: 4px;
        right: 4px;
        bottom: 40px;
        grid-template-columns: 1fr;
        gap: 4px
    }

    .footer-groups article {
        height: 325px
    }

    .footer-groups a {
        margin-left: 55px;
        font-size: 13px
    }

    .footer-groups article>div {
        gap: 38px
    }

    .footer-copy {
        left: 18px;
        bottom: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    .footer-ribbon {
        animation: none
    }
}

/* Founder statement — reference-inspired full-screen interlude */
.founder-manifest {
    position: relative;
    isolation: isolate;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--yellow);
    color: #111318;
}

.founder-edge-marks {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

.founder-corner {
    position: absolute;
    width: 500px;
    height: 500px;
    animation: founderMarkFloat 9s ease-in-out infinite alternate
}

.founder-corner svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.founder-corner-fill {
    opacity: .09;
    filter: brightness(.55);
    transform: rotate(var(--corner-rotation));
    -webkit-mask-image: var(--corner-mask);
    mask-image: var(--corner-mask)
}

.founder-corner-sheen {
    opacity: .17;
    filter: invert(1);
    transform: rotate(var(--corner-rotation));
    -webkit-mask-image: linear-gradient(var(--sheen-angle),transparent 16%,#000 48%,transparent 78%);
    mask-image: linear-gradient(var(--sheen-angle),transparent 16%,#000 48%,transparent 78%)
}

.founder-corner-1 {
    left: -210px;
    top: -258px;
    --corner-rotation: 8deg;
    --corner-mask: linear-gradient(140deg,transparent 8%,#000 72%);
    --sheen-angle: 135deg
}

.founder-corner-2 {
    right: -210px;
    top: -258px;
    --corner-rotation: -8deg;
    --corner-mask: linear-gradient(220deg,transparent 8%,#000 72%);
    --sheen-angle: 225deg;
    animation-delay: -2.2s
}

.founder-corner-3 {
    left: -210px;
    bottom: -258px;
    --corner-rotation: -8deg;
    --corner-mask: linear-gradient(40deg,transparent 8%,#000 72%);
    --sheen-angle: 45deg;
    animation-delay: -4.4s
}

.founder-corner-4 {
    right: -210px;
    bottom: -258px;
    --corner-rotation: 8deg;
    --corner-mask: linear-gradient(320deg,transparent 8%,#000 72%);
    --sheen-angle: 315deg;
    animation-delay: -6.6s
}

.founder-manifest blockquote {
    position: relative;
    z-index: 1;
    width: min(760px,62vw);
    margin: -3vh 0 0;
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(25px,1.9vw,36px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    text-align: center;
}

.founder-signature {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    text-align: center;
}

.founder-signature p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    line-height: 1.1
}

.founder-signature strong {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 15px;
    font-weight: 600
}

.founder-signature span {
    font-size: 11px
}

.founder-signature .brand-logo {
    width: 108px
}

@keyframes founderMarkFloat {
    from {
        translate: 0 0
    }

    to {
        translate: 12px -8px
    }
}

@media(max-width: 809px) {
    .founder-manifest {
        height:100svh;
        min-height: 640px;
        padding: 24px
    }

    .founder-corner {
        width: 300px;
        height: 300px
    }

    .founder-corner-1 {
        left: -145px;
        top: -160px
    }

    .founder-corner-2 {
        right: -145px;
        top: -160px
    }

    .founder-corner-3 {
        left: -145px;
        bottom: -160px
    }

    .founder-corner-4 {
        right: -145px;
        bottom: -160px
    }

    .founder-manifest blockquote {
        width: 100%;
        margin: -5vh 0 0;
        font-size: clamp(20px,5.6vw,26px);
        line-height: 1.02
    }

    .founder-signature {
        bottom: 24px;
        gap: 11px;
        width: 100%
    }

    .founder-signature p {
        font-size: 11px
    }

    .founder-signature strong {
        font-size: 12px
    }

    .founder-signature span {
        font-size: 10px
    }

    .founder-signature .brand-logo {
        width: 102px
    }
}

@media(prefers-reduced-motion:reduce) {
    .founder-corner {
        animation: none
    }
}

/* Brand personality — four petals around the ADDU mark */
.traits-grid {
    position: relative;
    overflow: hidden
}

.traits-grid article {
    position: relative;
    justify-content: center;
    padding: 34px
}

.traits-grid article:nth-of-type(1) {
    border-bottom-right-radius: 150px
}

.traits-grid article:nth-of-type(2) {
    border-bottom-left-radius: 150px
}

.traits-grid article:nth-of-type(3) {
    border-top-right-radius: 150px
}

.traits-grid article:nth-of-type(4) {
    border-top-left-radius: 150px
}

.trait-content {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    width: min(78%,390px);
    margin: auto
}

.trait-content>img {
    width: 28px;
    height: 28px;
    object-fit: contain
}

.traits-grid .trait-content h4 {
    font-size: 27px;
    line-height: 1;
    margin: 2px 0 10px
}

.traits-grid .trait-content p {
    font-size: 13px;
    line-height: 1.22;
    margin: 0;
    color: #85858d
}

.traits-center {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 66px;
    height: 66px;
    overflow: visible;
    fill: var(--yellow);
    filter: brightness(0) saturate(100%) invert(81%) sepia(99%) saturate(1000%) hue-rotate(359deg) brightness(104%) drop-shadow(0 0 12px rgba(255,221,0,.24))
}

/* Voice and tone markers */
.voice-grid header span {
    display: flex;
    align-items: center;
    gap: 12px
}

.voice-row p {
    gap: 14px
}

.voice-row p span {
    margin: 0;
    font-size: inherit
}

.voice-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-style: normal;
    font-size: 11px;
    line-height: 1
}

.voice-icon.yes {
    color: #8cdc00
}

.voice-icon.no {
    color: #f05715
}

/* Palette — readable labels and compact copy control */
.color-card {
    border: 0;
    border-radius: 5px;
    text-align: left;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
}

.color-card small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .015em
}

.color-values {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.color-card .color-values b {
    margin: 0;
    font-family: Bounded;
    font-size: 20px;
    font-weight: 500
}

.color-card .color-values span {
    display: flex;
    gap: 18px;
    margin: 0;
    font-size: 10px
}

.color-card .color-values em {
    font-style: normal;
    min-width: 24px;
    opacity: .58
}

.color-card.yellow {
    color: #111318
}

.color-card.graphite,.color-card.ink {
    color: #fff
}

.color-card.white,.color-card.mist,.color-card.pure {
    color: #111318
}

.copy-color {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-35%) scale(.96);
    border: 0;
    border-radius: 999px;
    padding: 7px 11px;
    background: rgba(20,20,22,.72);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity .18s ease,transform .18s ease,background .18s ease;
    backdrop-filter: blur(8px)
}

.color-card:hover .copy-color,.copy-color:focus-visible,.copy-color.copied {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%,-50%) scale(1)
}

.copy-color.copied {
    background: rgba(75,78,89,.72)
}

@media(max-width: 900px) {
    html {
        scroll-snap-type:y proximity
    }

    .traits-grid article {
        border-radius: 5px!important
    }

    .traits-center {
        display: none
    }

    .trait-content {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-snap-type: y proximity
    }
}

/* Hero light ribbon and calibrated type scale */
.hero {
    isolation: isolate;
    background: #000
}

.hero-wave {
    inset: -28vh -26vw -30vh 12vw;
    width: auto;
    height: auto;
    border-radius: 0;
    background: conic-gradient(from 208deg at 63% 46%,transparent 0deg,rgba(255,221,0,.03) 25deg,rgba(255,221,0,.35) 51deg,rgba(255,221,0,.96) 70deg,rgba(255,221,0,.42) 91deg,rgba(255,221,0,.04) 113deg,transparent 138deg);
    filter: blur(34px);
    transform: rotate(-4deg) scale(1.05);
    animation: lightRibbon 9s cubic-bezier(.55,.08,.42,.95) infinite alternate;
    will-change: transform
}

.hero-wave:after {
    content: "";
    position: absolute;
    width: 74%;
    height: 48%;
    right: -4%;
    top: 19%;
    border-radius: 50%;
    background: #000;
    filter: blur(28px);
    transform: rotate(-9deg)
}

.hero-ray {
    background: radial-gradient(ellipse at 96% 98%,rgba(255,221,0,.66),rgba(255,221,0,.22) 34%,transparent 64%);
    mix-blend-mode: screen;
    opacity: .8
}

.hero-mark {
    display: none
}

@keyframes lightRibbon {
    0% {
        transform: translate3d(-3%,-2%,0) rotate(-7deg) scale(1.03)
    }

    50% {
        transform: translate3d(1%,1%,0) rotate(-2deg) scale(1.08)
    }

    100% {
        transform: translate3d(4%,-1%,0) rotate(3deg) scale(1.04)
    }
}

.hero-top p {
    font-size: 13px;
    line-height: 1.18;
    max-width: 255px;
    margin-top: 24px;
}

.hero-title small {
    padding: 6px 10px;
    line-height: 1
}

.hero-title h1 {
    font-size: clamp(66px,6.5vw,120px);
    line-height: .82;
    letter-spacing: -.065em;
    font-weight: 600
}

.inside h2 {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.035em
}

.inside-cards h3 {
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -.025em
}

.inside-cards a {
    line-height: 1.15
}

.chapter-intro h2 {
    font-size: clamp(64px,5.9vw,112px);
    line-height: .84;
    letter-spacing: -.055em;
    font-weight: 600
}

.chapter-intro>p,.detail-copy p {
    line-height: 1.24
}

.detail-copy h3 {
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em
}

.quote-panel p {
    font-size: clamp(26px,2.05vw,40px);
    line-height: 1.04;
    letter-spacing: -.04em
}

@media(max-width: 560px) {
    .hero-title h1 {
        font-size:52px
    }

    .chapter-intro h2 {
        font-size: 50px
    }

    .hero-wave {
        inset: -12vh -90vw -15vh -25vw
    }

    .hero-top p {
        font-size: 12px;
        max-width: 225px
    }
}

/* Typography roles: Bounded for display, Wix Madefor Display for reading */
body {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    -webkit-font-smoothing: antialiased
}

h1,h2,h3,h4,h5,h6 {
    font-family: Bounded,Arial,sans-serif;
    font-weight: 500
}

p,a,button,input,small,span {
    font-family: inherit
}

.hero-title h1 {
    font-family: Bounded,Arial,sans-serif;
    font-weight: 500;
    font-size: clamp(68px,6.3vw,120px);
    line-height: .8;
    letter-spacing: -.02em
}

.hero-top p {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 15px;
    line-height: 1.2;
    /* letter-spacing: -.02em; */
}

.hero-title small {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0
}

.inside h2 {
    font-size: 41px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em
}

.inside-cards h3 {
    font-family: Bounded,Arial,sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em
}

.inside-cards b,.inside-cards a {
    /* font-family: Bounded,Arial,sans-serif; */
    font-size: 14px;
    line-height: 1.2;
}

.chapter-intro h2 {
    font-size: clamp(72px,5.3vw,100px);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.02em
}

.chapter-intro>p {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2;
    /* letter-spacing: -.02em; */
}

.detail-meta span,.detail-meta b,.detail-content>article>small,.detail-content>div>small {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
}

.detail-copy h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
}

.detail-copy p {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 14px;
    /* line-height: 1.2; */
    letter-spacing: -.02em
}

.quote-panel p {
    font-size: clamp(32px,2.35vw,45px);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.02em
}

.traits-grid .trait-content h4 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em
}

.traits-grid .trait-content p {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 14px;
    /* line-height: 1.2; */
    letter-spacing: -.02em
}

.voice-grid header span {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1
}

.voice-row p {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.02em
}

.color-card small,.color-card .color-values b,.color-card .color-values span,.copy-color {
    font-family: Wix Madefor Display,Arial,sans-serif
}

.color-card .color-values b {
    font-size: 20px;
    font-weight: 500;
    line-height: 1
}

.color-card .color-values span {
    font-size: 12px;
    line-height: 1.2
}

.nav-groups h3 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em
}

.nav-groups a {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.2
}

@media(max-width: 1199px) {
    .hero-title h1 {
        font-size:clamp(64px,6.4vw,88px)
    }

    .chapter-intro h2 {
        font-size: clamp(62px,6vw,80px)
    }
}

@media(max-width: 560px) {
    .hero-top p {
        font-size:13px
    }

    .hero-title h1 {
        font-size: 50px
    }

    .chapter-intro h2 {
        font-size: 48px
    }

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

    .detail-copy p,.chapter-intro>p {
        font-size: 13px
    }
}

/* Nested slides inside long sticky chapters */
@media(min-width: 901px) {
    .detail.tall {
        scroll-snap-align:start
    }

    .detail.tall .detail-info {
        position: sticky;
        top: 3px;
        height: calc(100svh - 6px)
    }

    .detail.tall .detail-content {
        grid-auto-rows: calc(50svh - 4.5px)
    }

    .detail.tall .detail-content>* {
        min-height: calc(50svh - 4.5px)
    }

    .detail.tall .detail-content>:nth-child(odd) {
        scroll-snap-align: start;
        scroll-snap-stop:always}

    .detail.tall .detail-content>:nth-child(even) {
        scroll-snap-align: none
    }
}

/* Reference menu control */
.nav-toggle {
    right: 32px;
    top: 32px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(200,203,219,.12);
    border-radius: 50%;
    background: rgba(38,38,40,.48);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: none;
    transition: background-color .25s ease,border-color .25s ease,transform .25s ease
}

.nav-toggle:hover {
    background: rgba(38,38,40,.8);
    border-color: rgba(200,203,219,.22)
}

.nav-toggle:active {
    transform: scale(.96)
}

.nav-toggle i {
    width: 13px;
    height: 1px;
    flex: 0 0 1px;
    background: #c8cbdb;
    transform-origin: center;
    transition: transform .35s cubic-bezier(.65,0,.35,1),background-color .25s ease
}

.nav-toggle.active {
    background: #101011;
    border-color: rgba(255,255,255,.12)
}

.nav-toggle.active i:first-child {
    transform: translateY(3px) rotate(45deg)
}

.nav-toggle.active i:last-child {
    transform: translateY(-3px) rotate(-45deg)
}

.nav-toggle:focus-visible {
    outline: 1px solid var(--yellow);
    outline-offset: 3px
}

/* Logo chapter fixes */
.detail-info>.download-pill {
    position: absolute;
    z-index: 5;
    left: 20px;
    bottom: 20px;
    top: auto;
    right: auto;
    width: max-content;
    height: auto;
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    align-self: auto;
    justify-self: auto;
    line-height: 1;
    text-decoration: none
}

.detail-info:has(>.download-pill) .detail-copy {
    bottom: 92px
}

/* Download actions: ADDU adaptation of the referenced vertical swap button */
.detail-info>.download-action {
    width: max-content;
    height: 70px;
    padding: 0 40px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--yellow);
    color: #111;
    font-family: Bounded,Arial,sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
    align-items: flex-start;
    transition: background-color .25s ease,box-shadow .25s ease,transform .25s ease
}

.detail-info>.download-action:hover {
    background: #0c0d10;
    color: var(--yellow);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    transform: translateY(-2px)
}

.download-action__track {
    position: static;
    display: block;
    height: 140px;
    transform: translateY(-70px);
    transition: transform .32s cubic-bezier(.65,0,.35,1)
}

.download-action__icon,.download-action__label {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap
}

.download-action__icon {
    color: var(--yellow);
    opacity: 0;
    transition: opacity .2s ease
}

.download-action__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.download-action__label {
    opacity: 1;
    transition: opacity .2s ease
}

.download-action:hover .download-action__track,.download-action:focus-visible .download-action__track {
    transform: translateY(0)
}

.detail-info>.download-action:focus-visible {
    background: #0c0d10;
    color: var(--yellow)
}

.download-action:hover .download-action__icon,.download-action:focus-visible .download-action__icon {
    opacity: 1
}

.download-action:hover .download-action__label,.download-action:focus-visible .download-action__label {
    opacity: 0
}

.detail-info:has(>.download-action) .detail-copy {
    bottom: 112px
}

@media (max-width:809px) {
    .detail-info>.download-action {
        position: relative!important;
        height: 58px;
        margin: 0 20px 28px;
        padding: 0 28px;
        font-size: 14px;
        line-height: 20px
    }

    .download-action__track {
        height: 116px;
        transform: translateY(-58px)
    }

    .download-action__icon,.download-action__label {
        height: 58px
    }

    .download-action__icon svg {
        width: 26px;
        height: 26px
    }
}

@media (prefers-reduced-motion:reduce) {
    .download-action,.download-action__track,.download-action__icon,.download-action__label {
        transition-duration:.01ms!important
    }
}

.color-usage article {
    position: relative;
    overflow: hidden
}

.color-usage article>small {
    position: absolute;
    top: 18px;
    left: 18px;
    right: auto;
    bottom: auto;
    z-index: 2
}

.color-usage article:nth-child(1)>small,.color-usage article:nth-child(2)>small {
    color: #101011!important
}

.color-usage article:nth-child(3)>small {
    color: #fff!important
}

.color-usage article>small {
    display: block;
    width: auto;
    max-width: calc(100% - 36px);
    opacity: 1!important;
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 12px!important;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap
}

.brand-logo .logo-accent {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--yellow);
    clip-path: polygon(0 0,30% 0,30% 100%,0 100%);
    filter: none;
    -webkit-mask: url('logo_addu.svg') center/100% 100% no-repeat;
    mask: url('logo_addu.svg') center/100% 100% no-repeat
}

.brand-logo.on-light .logo-accent {
    display: none
}

/* Official ADDU mark as an animated glass object */
.hero-glass-mark {
    position: absolute;
    z-index: 2;
    right: -14vw;
    top: -22vw;
    width: min(66vw,1120px);
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(138deg,rgba(255,221,0,.38) 4%,rgba(255,221,0,.07) 34%,rgba(0,0,0,.34) 59%,rgba(255,221,0,.25) 100%);
    -webkit-mask: url('logo_addu.svg') left center/333% 100% no-repeat;
    mask: url('logo_addu.svg') left center/333% 100% no-repeat;
    filter: drop-shadow(0 0 1px #ffdd00) drop-shadow(0 0 12px rgba(255,221,0,.72)) drop-shadow(0 24px 46px rgba(0,0,0,.7));
    animation: glassMarkFloat 8s cubic-bezier(.55,.08,.42,.95) infinite alternate;
    will-change: transform
}

.hero-glass-mark:before {
    content: "";
    position: absolute;
    inset: -35%;
    background: conic-gradient(from 210deg,transparent 0 13%,rgba(255,255,255,.36) 19%,rgba(255,221,0,.08) 27%,transparent 36% 55%,rgba(255,221,0,.54) 65%,rgba(0,0,0,.18) 78%,transparent 88%);
    filter: blur(20px);
    mix-blend-mode: screen;
    animation: glassLiquid 11s linear infinite;
    will-change: transform
}

.hero-glass-mark:after {
    content: "";
    position: absolute;
    width: 22%;
    height: 160%;
    left: -42%;
    top: -30%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),rgba(255,221,0,.2),transparent);
    filter: blur(16px);
    transform: rotate(18deg);
    mix-blend-mode: screen;
    animation: glassSweep 6.5s cubic-bezier(.45,0,.2,1) infinite;
    will-change: transform
}

.hero-glass-mark i:first-child {
    position: absolute;
    inset: 3%;
    background: radial-gradient(ellipse at 32% 26%,rgba(255,255,255,.28),transparent 24%),radial-gradient(ellipse at 68% 72%,rgba(255,221,0,.38),transparent 42%);
    filter: blur(13px);
    animation: glassBreath 5.5s ease-in-out infinite alternate
}

.hero-glass-mark i:last-child {
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg,rgba(255,255,255,.1),transparent 30%,rgba(0,0,0,.22) 58%,rgba(255,221,0,.16));
    mix-blend-mode: overlay
}

@keyframes glassMarkFloat {
    0% {
        transform: translate3d(-1.2%,-.8%,0) rotate(-2deg)
    }

    100% {
        transform: translate3d(1.5%,1.1%,0) rotate(2deg)
    }
}

@keyframes glassLiquid {
    to {
        transform: rotate(360deg) scale(1.08)
    }
}

@keyframes glassSweep {
    0%,14% {
        transform: translateX(0) rotate(18deg);
        opacity: 0
    }

    28% {
        opacity: .95
    }

    58%,100% {
        transform: translateX(720%) rotate(18deg);
        opacity: 0
    }
}

@keyframes glassBreath {
    to {
        transform: translate3d(3%,-2%,0) scale(1.08);
        opacity: .7
    }
}

@media(max-width: 900px) {
    .hero-glass-mark {
        width:90vw;
        right: -34vw;
        top: -25vw
    }
}

@media(max-width: 560px) {
    .hero-glass-mark {
        width:125vw;
        right: -64vw;
        top: -28vw;
        opacity: .8
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-glass-mark,.hero-glass-mark:before,.hero-glass-mark:after,.hero-glass-mark i {
        animation: none!important
    }
}

/* One continuous animated background across the first two screens */
.opening {
    height: 200svh;
    min-height: 1400px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000
}

.opening>section {
    scroll-snap-align: start;
    scroll-snap-stop:always}

.opening .hero,.opening .inside {
    position: relative;
    z-index: 1;
    background: transparent;
    overflow: visible
}

.opening-wave {
    position: absolute;
    z-index: 0;
    left: -31vw;
    top: -4svh;
    width: 174vw;
    height: 176svh;
    transform: rotate(13deg);
    pointer-events: none;
    background: linear-gradient(132deg,rgba(255,221,0,.05) 7%,rgba(255,221,0,.38) 31%,rgba(255,221,0,.95) 53%,rgba(255,221,0,.44) 72%,rgba(255,221,0,.05) 92%);
    -webkit-mask: radial-gradient(ellipse at center,transparent 0 43%,#000 51% 66%,transparent 75%);
    mask: radial-gradient(ellipse at center,transparent 0 43%,#000 51% 66%,transparent 75%);
    filter: blur(31px) saturate(1.12);
    animation: openingRibbon 10s cubic-bezier(.55,.08,.42,.95) infinite alternate;
    will-change: transform
}

.opening-wave:before {
    content: "";
    position: absolute;
    inset: 7% 3%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 70% 38%,rgba(255,255,255,.2),transparent 24%),radial-gradient(ellipse at 24% 68%,rgba(255,221,0,.38),transparent 34%);
    mix-blend-mode: screen;
    filter: blur(22px);
    animation: openingLight 8s ease-in-out infinite alternate
}

.opening-wave:after {
    content: "";
    position: absolute;
    width: 34%;
    height: 125%;
    left: 14%;
    top: -10%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    filter: blur(38px);
    transform: rotate(22deg);
    mix-blend-mode: screen;
    animation: openingSweep 9s ease-in-out infinite alternate
}

.opening-wave i:first-child {
    position: absolute;
    width: 60%;
    height: 48%;
    right: -2%;
    top: 46%;
    border-radius: 50%;
    background: radial-gradient(ellipse,rgba(255,221,0,.55),rgba(255,221,0,.12) 48%,transparent 72%);
    filter: blur(36px)
}

.opening-wave i:last-child {
    position: absolute;
    width: 54%;
    height: 34%;
    left: 7%;
    top: 57%;
    border-radius: 50%;
    background: radial-gradient(ellipse,rgba(255,221,0,.28),transparent 70%);
    filter: blur(42px)
}

@keyframes openingRibbon {
    0% {
        transform: translate3d(-2%,-1.4%,0) rotate(10deg) scale(1.02)
    }

    50% {
        transform: translate3d(1%,.7%,0) rotate(14deg) scale(1.05)
    }

    100% {
        transform: translate3d(3%,-.5%,0) rotate(17deg) scale(1.02)
    }
}

@keyframes openingLight {
    to {
        transform: translate3d(4%,-3%,0) scale(1.08);
        opacity: .76
    }
}

@keyframes openingSweep {
    to {
        transform: translateX(150%) rotate(22deg);
        opacity: .45
    }
}

.opening .hero-wave,.opening .hero-ray,.opening .inside-glow {
    display: none
}

@media(max-width: 900px) {
    .opening-wave {
        left:-58vw;
        width: 225vw;
        height: 185svh
    }
}

@media(max-width: 560px) {
    .opening {
        min-height:1400px
    }

    .opening-wave {
        left: -112vw;
        top: -2svh;
        width: 320vw;
        height: 190svh;
        filter: blur(24px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .opening-wave,.opening-wave:before,.opening-wave:after {
        animation: none!important
    }
}

/* WebGL implementation matching the two-canvas Framer scene */
.opening-gradflow {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 200svh;
    display: block;
    pointer-events: none
}

.gradflow-surface {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none
}

.gradflow-root {
    transform: scaleX(-1);
    transform-origin: center
}

.footer-gradflow {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none
}

.site-footer>.footer-ribbon {
    display: none
}

main {
    position: relative;
    isolation: isolate
}

.opening>.hero,.opening>.inside {
    position: relative;
    z-index: 1;
    background: transparent;
    overflow: visible
}

.opening>.hero .hero-wave,.opening>.hero .hero-ray,.opening>.inside .inside-glow {
    display: none
}

.hero-glass-mark {
    background: #060704;
    filter: drop-shadow(0 0 1px #ffdd00) drop-shadow(0 0 8px rgba(255,221,0,.95)) drop-shadow(0 20px 46px rgba(0,0,0,.78));
    animation: glassMarkFloat 7s cubic-bezier(.55,.08,.42,.95) infinite alternate
}

.hero-glass-mark:before,.hero-glass-mark:after {
    display: none
}

.hero-glass-mark>canvas {
    display: block;
    width: 100%;
    height: 100%
}

/* Vaultx-style compact glass menu */
.nav-overlay {
    position: fixed;
    z-index: 99;
    inset: 84px 32px auto auto;
    width: 205px;
    height: auto;
    padding: 0;
    background: transparent;
    color: #fff;
    visibility: hidden;
    pointer-events: none;
    clip-path: none;
    border: 0;
    transition: visibility 0s linear .42s
}

.nav-overlay.active {
    visibility: visible;
    pointer-events: auto;
    clip-path: none;
    transition-delay: 0s
}

.nav-overlay>a {
    height: 35px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 5px;
    background: rgba(16,16,17,.76);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    letter-spacing: -.02em;
    opacity: 0;
    transform: translateY(-9px) scale(.985);
    transform-origin: top right;
    transition: opacity .32s ease,transform .4s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease
}

.nav-overlay>a+a {
    margin-top: 3px
}

.nav-overlay.active>a {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.nav-overlay.active>a:nth-child(1) {
    transition-delay: .02s
}

.nav-overlay.active>a:nth-child(2) {
    transition-delay: .075s
}

.nav-overlay.active>a:nth-child(3) {
    transition-delay: .13s
}

.nav-overlay.active>a:nth-child(4) {
    transition-delay: .185s
}

.nav-overlay>a:hover,.nav-overlay>a:focus-visible {
    background: rgba(255,221,0,.92);
    color: #101011;
    outline: none
}

.nav-overlay>a>span {
    font: inherit
}

.nav-overlay>a>span:last-child {
    font-size: 12px;
    color: #8a8fa2;
    transition: color .2s ease
}

.nav-overlay>a:hover>span:last-child,.nav-overlay>a:focus-visible>span:last-child {
    color: #101011
}

.nav-toggle.active i:first-child {
    transform: translateY(3px) rotate(0)
}

.nav-toggle.active i:last-child {
    transform: translateY(-3px) rotate(0)
}

/* Hero and contents are two independent slides; the wrapper must not become a duplicate target. */
.opening {
    scroll-snap-align: none;
    scroll-snap-stop:normal}

.opening>.hero,.opening>.inside {
    scroll-snap-align: start;
    scroll-snap-stop:always}

#top {
    scroll-margin-top: 0
}

/* Two-stage mark intro: contour first, liquid glass second */
.hero-glass-mark {
    overflow: visible;
    background: none;
    filter: none;
    -webkit-mask: none;
    mask: none;
    animation: glassMarkFloat 7s cubic-bezier(.55,.08,.42,.95) 2.1s infinite alternate
}

.hero-glass-mark>canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-mask: url('logo_addu.svg') left center/333% 100% no-repeat;
    mask: url('logo_addu.svg') left center/333% 100% no-repeat;
    filter: drop-shadow(0 0 9px rgba(255,221,0,.58));
    animation: glassCanvasReveal 1.15s cubic-bezier(.22,1,.36,1) 1.72s forwards
}

.hero-mark-outline {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--yellow);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(255,221,0,.95)) drop-shadow(0 0 10px rgba(255,221,0,.42));
    pointer-events: none
}

.hero-mark-outline use {
    fill: none;
    stroke: inherit;
    stroke-width: inherit;
    stroke-dasharray: 4200;
    stroke-dashoffset: 4200;
    animation: heroContourDraw 1.8s cubic-bezier(.65,0,.35,1) .08s forwards
}

@keyframes heroContourDraw {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes glassCanvasReveal {
    0% {
        opacity: 0;
        filter: blur(14px) drop-shadow(0 0 2px rgba(255,221,0,0))
    }

    100% {
        opacity: 1;
        filter: blur(0) drop-shadow(0 0 9px rgba(255,221,0,.58))
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-mark-outline use {
        stroke-dashoffset: 0;
        animation: none
    }

    .hero-glass-mark>canvas {
        opacity: 1;
        animation: none
    }
}

/* Clean two-font specimen */
@media(min-width: 901px) {
    .typography-detail .detail-content {
        grid-auto-rows:calc(100svh - 6px)!important
    }

    .typography-detail .detail-content>* {
        height: calc(100svh - 6px)!important;
        min-height: calc(100svh - 6px)!important;
        scroll-snap-align: start!important;
        scroll-snap-stop:always}
}

.typefaces-panel {
    padding: 20px;
    display: grid;
    grid-template-rows: repeat(2,minmax(0,1fr));
    gap: 3px;
    background: #101011!important;
    overflow: hidden
}

.typefaces-panel>small {
    position: static!important;
    align-self: start
}

.font-specimen {
    min-height: 0;
    border-radius: 5px;
    background: #171718;
    display: grid;
    grid-template-columns: minmax(250px,38%) minmax(0,1fr);
    grid-template-rows: 1fr 78px;
    gap: 3px;
    padding: 18px;
    overflow: hidden
}

.font-specimen header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0
}

.font-specimen header b {
    font-size: clamp(38px,3.4vw,64px);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.04em
}

.wix-specimen header b {
    max-width: 12ch;
    font-size: clamp(28px,2.45vw,44px);
    line-height: .94;
    overflow-wrap: anywhere
}

.wix-specimen .glyph-sample {
    font-size: clamp(16px,1.25vw,23px)
}

.font-specimen header span {
    margin-top: 14px;
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 9px;
    color: #8a8fa2;
    letter-spacing: .04em
}

.font-specimen .glyph-sample {
    align-self: center;
    margin: 0;
    font-size: clamp(17px,1.45vw,27px);
    line-height: 1.28;
    letter-spacing: -.025em;
    white-space: nowrap;
    overflow: hidden
}

.bounded-specimen header b,.bounded-specimen .glyph-sample,.bounded-specimen .specimen-weights strong {
    font-family: Bounded,Arial,sans-serif
}

.wix-specimen header b,.wix-specimen .glyph-sample,.wix-specimen .specimen-weights strong {
    font-family: Wix Madefor Display,Arial,sans-serif
}

.specimen-weights {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 3px;
    min-height: 0
}

.specimen-weights>span {
    background: #202021;
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 0
}

.specimen-weights strong {
    font-size: 27px;
    line-height: 1;
    font-weight: inherit
}

.specimen-weights small {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 8px;
    color: #8a8fa2
}

.typography-detail .hierarchy-panel {
    padding: 20px
}

/* Crisp favicon context */
.browser-context .browser-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 224px;
    height: 44px;
    padding: 7px 14px 7px 8px;
    border-radius: 14px;
    background: #262628;
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap
}

.browser-context .browser-tab strong {
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 17px;
    font-weight: 600
}

.browser-context .favicon-tile {
    width: 30px!important;
    height: 30px!important;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--yellow)
}

.browser-context .favicon-tile .mark-window {
    width: 21px!important;
    height: 21px!important;
    flex: 0 0 21px
}

.browser-context .favicon-tile .mark-window img {
    height: 21px;
    width: auto;
    max-width: none
}

.icon-grid .icon-download {
    position: absolute;
    right: 12px;
    bottom: 12px;
    opacity: 0;
    border: 0;
    border-radius: 99px;
    padding: 6px 9px;
    background: #242426;
    color: #fff;
    font-family: Wix Madefor Display,Arial,sans-serif;
    font-size: 8px;
    text-decoration: none;
    transition: opacity .2s ease
}

.icon-grid article:hover .icon-download,.icon-grid .icon-download:focus-visible {
    opacity: 1
}

@media(max-width: 900px) {
    .typefaces-panel {
        height:auto!important;
        grid-template-rows: repeat(2,minmax(460px,auto))
    }

    .font-specimen {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 78px
    }

    .wix-specimen header b {
        max-width: none
    }

    .specimen-weights {
        grid-template-columns: repeat(3,1fr)
    }

    .font-specimen .glyph-sample {
        white-space: normal
    }
}

/* Voice scale and semantic colors */
.voice-grid header span:first-child {
    color: #8cdc00
}

.voice-grid header span:last-child {
    color: #f05715
}

.voice-grid header span {
    font-size: 14px
}

.voice-row p {
    font-size: 15px
}

/* Hero logo: exact reference staging — fixed 500px frame, 2s contour, depth-aware shader. */
.hero-glass-mark {
    right: -80px;
    top: -80px;
    width: 500px;
    height: 500px;
    aspect-ratio: 1;
    animation: none!important;
    transform: none!important
}

.hero-glass-mark>canvas {
    opacity: 0;
    filter: none;
    -webkit-mask: url('logo_addu.svg') left center/333% 100% no-repeat!important;
    mask: url('logo_addu.svg') left center/333% 100% no-repeat!important;
    animation: glassCanvasReveal .55s cubic-bezier(.22,1,.36,1) 2s forwards;
    pointer-events: auto
}

.hero-mark-outline {
    stroke-width: 12;
    filter: none;
    mix-blend-mode: screen
}

.hero-mark-outline use {
    stroke-dasharray: 4200;
    stroke-dashoffset: 4200;
    animation: heroContourDraw 2s cubic-bezier(.49,0,.22,.99) forwards
}

@keyframes glassCanvasReveal {
    from {
        opacity: .001
    }

    to {
        opacity: 1
    }
}

@media(max-width: 809px) {
    .hero-glass-mark {
        right:-40px;
        top: -40px;
        width: 250px;
        height: 250px
    }
}

/* Phone layout follows the reference as its own flow, not a compressed desktop. */
@media(max-width: 809px) {
    .inside::after {
        display:none!important
    }

    html {
        scroll-snap-type: none!important;
        overscroll-behavior-y: auto
    }

    html,body,main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden
    }

    main>section,main>footer {
        scroll-snap-align: none;
        scroll-snap-stop:normal}

    .opening-gradflow {
        height: calc(100svh + 1532px)
    }

    .nav-toggle {
        top: 18px;
        right: 18px;
        width: 40px;
        height: 40px
    }

    .nav-overlay {
        top: 66px;
        right: 18px;
        width: 205px
    }

    .opening {
        height: auto;
        min-height: 0
    }

    .opening>.hero {
        height: 100svh;
        min-height: 0;
        overflow: hidden;
        padding: 16px
    }

    .hero-top {
        top: 18px;
        left: 18px;
        width: auto
    }

    .hero-top .brand-logo {
        width: 118px
    }

    .hero-top p {
        display: none
    }

    .hero-title {
        left: 16px;
        right: 16px;
        bottom: 48px;
        max-width: calc(100vw - 32px)
    }

    .hero-title small {
        font-size: 10px;
        padding: 6px 9px
    }

    .hero-title h1 {
        font-size: clamp(38px,10.6vw,46px);
        line-height: .82;
        letter-spacing: -.025em;
        margin-top: 16px;
        max-width: 100%;
        white-space: normal
    }

    .hero-title h1 span {
        white-space: nowrap
    }

    .hero-glass-mark {
        right: -40px;
        top: -40px;
        width: 250px;
        height: 250px
    }

    .opening>.inside {
        height: auto;
        min-height: 1532px;
        overflow: hidden;
        padding: 100px 0 0
    }

    .inside h2 {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 20px;
        font-size: 36px;
        line-height: .8;
        letter-spacing: -.025em
    }

    .inside-cards {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 64px 4px 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        align-items: stretch
    }

    .inside-cards article,.inside-cards article:nth-child(n) {
        display: flex!important;
        height: 325px;
        min-height: 325px;
        padding: 20px;
        border-radius: 8px;
        background: rgba(255,255,255,.05)
    }

    .inside-cards article[data-reveal] {
        opacity: 1!important;
        transform: none!important
    }

    .inside-cards article>div {
        gap: 38px;
        padding-bottom: 17px
    }

    .inside-cards h3 {
        font-size: 17px;
        line-height: 1
    }

    .inside-cards b {
        font-size: 14px
    }

    .inside-cards a {
        margin-left: 55px;
        padding: 18px 0;
        font-size: 13px;
        line-height: 1.15
    }

    .chapter-intro {
        height: 100svh;
        min-height: 0;
        overflow: hidden
    }

    .chapter-intro>.brand-logo {
        top: 34%;
        left: 20px;
        width: 108px
    }

    .chapter-intro h2 {
        left: 20px;
        right: 20px;
        top: 43%;
        bottom: auto;
        width: auto;
        font-size: clamp(40px,11.4vw,50px);
        line-height: .92;
        letter-spacing: -.025em;
        overflow-wrap: anywhere
    }

    .chapter-intro>p {
        left: 20px;
        right: 20px;
        top: 60%;
        bottom: auto;
        width: auto;
        max-width: 345px;
        font-size: 13px;
        line-height: 1.25
    }

    .ghost-marks {
        display: none
    }

    .detail,.detail.tall {
        display: block;
        padding: 4px;
        background: #050505
    }

    .detail-info,.detail.tall .detail-info {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 250px;
        border-radius: 8px;
        overflow: hidden
    }

    .detail-meta {
        padding: 20px
    }

    .detail-watermark {
        display: none
    }

    .detail-copy,.detail-info:has(>.download-pill) .detail-copy {
        position: static;
        width: auto;
        padding: 24px 20px 36px
    }

    .detail-copy h3 {
        font-size: 24px;
        line-height: 1;
        margin: 0 0 28px
    }

    .detail-copy p {
        font-size: 13px;
        line-height: 1.25;
        max-width: 350px
    }

    .detail-info>.download-pill {
        position: static!important;
        margin: 0 20px 28px;
        padding: 12px 18px
    }

    .detail-content,.detail.tall .detail-content {
        display: grid;
        gap: 4px;
        grid-auto-rows: auto
    }

    .detail-content>* {
        width: 100%;
        min-width: 0;
        box-sizing: border-box
    }

    .detail-content>article,.detail-content>div,.detail.tall .detail-content>* {
        height: auto;
        min-height: 0;
        border-radius: 8px
    }

    .quote-panel {
        height: 275px!important;
        min-height: 275px!important;
        padding: 20px
    }

    .quote-panel p {
        font-size: clamp(22px,6.5vw,28px);
        line-height: 1;
        width: 82%
    }

    .traits-grid {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 4px
    }

    .traits-grid article {
        height: 250px;
        min-height: 250px!important;
        border-radius: 8px!important;
        padding: 28px
    }

    .traits-center {
        display: none
    }

    .trait-content {
        width: 100%;
        gap: 18px
    }

    .trait-content>img {
        width: 26px;
        height: 26px
    }

    .traits-grid .trait-content h4 {
        font-size: 25px
    }

    .traits-grid .trait-content p {
        font-size: 13px
    }

    .voice-grid {
        height: auto;
        min-height: 0;
        grid-template-rows: 64px repeat(5,auto);
        gap: 4px
    }

    .voice-grid header,.voice-row {
        grid-template-columns: 1fr 1fr;
        gap: 4px
    }

    .voice-grid header span,.voice-row p {
        padding: 16px 12px
    }

    .voice-grid header span {
        font-size: 11px
    }

    .voice-row p {
        min-height: 150px;
        font-size: 12px;
        align-items: center
    }

    .voice-icon {
        width: 17px;
        height: 17px;
        flex-basis: 17px
    }

    .asset-panel,.ui-panel,.app-sizes,.browser-context,.social-panel {
        height: 325px!important;
        min-height: 325px!important;
        padding: 20px
    }

    .logo-primary .brand-logo {
        width: min(76%,260px)
    }

    .logo-secondary .mark-window {
        width: 92px
    }

    .logo-secondary>b {
        font-size: 36px
    }

    .symbol-panel .mark-window {
        width: 170px
    }

    .color-usage {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .color-usage article {
        height: 270px;
        min-height: 270px!important
    }

    .palette-grid {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3,240px);
        gap: 4px
    }

    .color-card {
        height: 240px;
        min-height: 240px!important;
        padding: 16px
    }

    .color-card .color-values b {
        font-size: 17px
    }

    .copy-color {
        opacity: 1;
        padding: 7px 9px;
        font-size: 8px
    }

    .typefaces-panel {
        height: auto!important;
        min-height: 0!important;
        padding: 16px;
        grid-template-rows: repeat(2,520px);
        gap: 4px
    }

    .font-specimen {
        height: 520px;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 150px;
        padding: 16px
    }

    .font-specimen header b {
        font-size: 42px
    }

    .wix-specimen header b {
        max-width: none;
        font-size: 36px;
        line-height: .98
    }

    .font-specimen .glyph-sample {
        font-size: 17px;
        white-space: normal;
        overflow-wrap: anywhere
    }

    .specimen-weights {
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 1fr 1fr
    }

    .hierarchy-panel {
        min-height: 0!important;
        padding: 16px
    }

    .type-row {
        grid-template-columns: 42px 1fr;
        padding: 14px 0
    }

    .type-row span {
        display: none
    }

    .type-row.r0 p {
        font-size: 34px
    }

    .type-row.r1 p {
        font-size: 30px
    }

    .type-row.r2 p {
        font-size: 27px
    }

    .type-row.r3 p {
        font-size: 24px
    }

    .type-row.r4 p {
        font-size: 21px
    }

    .type-row.r5 p {
        font-size: 17px
    }

    .type-row.r6 p {
        font-size: 14px
    }

    .type-row.r7 p {
        font-size: 10px
    }

    .icon-grid {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6,180px);
        gap: 4px
    }

    .icon-grid article {
        height: 180px;
        min-height: 180px!important
    }

    .icon-grid img {
        width: 40px;
        height: 40px
    }

    .icon-grid .icon-download {
        opacity: 1
    }

    .ui-panel>div,.ui-panel>form,.source-project-card {
        width: 100%;
        max-width: 340px
    }

    .source-buttons {
        align-items: stretch
    }

    .source-btn {
        width: 100%
    }

    .source-filters {
        gap: 18px 22px
    }

    .source-filter {
        padding-bottom: 12px;
        font-size: 12px
    }

    .source-project-image {
        height: 170px;
        border-radius: 28px
    }

    .source-project-info h4 {
        font-size: 23px
    }

    .app-sizes {
        overflow: hidden
    }

    .app-sizes>div {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 20px 0 4px
    }

    .app-sizes i {
        max-width: 140px;
        max-height: 140px
    }

    .browser-context>div {
        width: calc(100% - 32px)
    }

    .browser-context .browser-tab {
        min-width: 0;
        max-width: 80%;
        font-size: 14px
    }

    .browser-context .browser-tab strong {
        font-size: 14px
    }

    .social-profile,.post {
        width: min(100%,300px)
    }

    .post p {
        font-size: 24px;
        margin-top: 58px
    }

    .post p b {
        font-size: 28px
    }

    footer {
        height: auto;
        min-height: 360px;
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 28px 20px
    }

    footer a,footer p {
        justify-self: start;
        text-align: left
    }
}

/* Three typography slides and an 11px readability floor. */
@media(min-width: 810px) {
    .hero-top .brand-logo,.chapter-intro>.brand-logo {
        width:108px
    }

    .hero-top p {
        width: 358px;
        max-width: 358px;
        font-size: 16px;
        line-height: 1.2;
    }

    .hero-title small {
        font-size: 16px!important
    }

    .typography-detail .hierarchy-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 18px 1fr;
        gap: 4px
    }

    .hierarchy-panel>small {
        grid-column: 1;
        grid-row: 1
    }

    .hierarchy-panel>.type-scale {
        grid-column: 1;
        grid-row: 2
    }

    .type-scale .title-r0 p {
        font-size: clamp(64px,5vw,96px)
    }
}

@media(max-width: 809px) {
    .typography-detail .hierarchy-panel {
        grid-template-columns:1fr;
        grid-template-rows: auto auto auto
    }

    .hierarchy-panel>small,.type-scale-titles,.type-scale-text {
        grid-column: 1;
        grid-row: auto
    }
}

.nav-overlay>p,.hero-title small,.detail-meta span,.detail-meta b,.detail-content>article>small,.detail-content>div>small,.traits-grid b,.voice-grid header span,.color-usage small,.color-card small,.color-card span,.font-weights small,.type-row b,.type-row span,.icon-grid span,.icon-grid button,.badges-panel span,.fields-panel em,.mini-card em,.app-sizes b,.social-profile p,footer p,.type-scale header span,.type-scale .type-row>b,.type-scale .type-row>span,.footer-socials a,.footer-copy,.founder-signature span,.copy-color,.font-specimen header span,.specimen-weights small,.icon-grid .icon-download {
    /* font-size: 11px!important; */
}

/* Exact brand yellow for every logo state. */
.logo-secondary .mark-window {
    filter: none;
    background: var(--yellow);
    -webkit-mask: url('logo_addu.svg') left center/333% 100% no-repeat;
    mask: url('logo_addu.svg') left center/333% 100% no-repeat
}

.logo-secondary .mark-window img {
    opacity: 0
}

/* Final optical pass: opening screens, contents cards and typography rails. */
@media(min-width: 810px) {
    html {
        scroll-snap-type:none!important
    }

    .opening>.hero,.opening>.inside {
        min-height: 0
    }

    .hero-title {
        left: 20px;
        bottom: 24px;
        max-width: calc(100vw - 40px)
    }

    .hero-title h1 {
        margin-top: 17px;
        font-size: clamp(68px,4.9vw,94px);
        line-height: 1;
        /* letter-spacing:-.025em; */
        font-weight: 500;
        /* bottom: 32px; */
    }

    .inside h2 {
        top: 32px;
        left: 32px;
        font-size: 40px;
        line-height: .8;
        font-weight: 400;
        letter-spacing: -.02em
    }

    .inside-cards {
        left: 4px;
        right: 4px;
        bottom: 4px;
        gap: 4px;
        align-items: stretch
    }

    .inside-cards article {
        height: auto;
        min-height: 0;
        padding: 20px;
        background: rgba(255,255,255,.05);
        border-radius: 8px;
        justify-content: center
    }

    .inside-cards article>div {
        gap: 50px;
        padding-bottom: 20px;
        border-color: rgba(255,255,255,.1)
    }

    .inside-cards b {
        font-size: 21px!important;
        font-weight: 400;
        line-height: .8;
        letter-spacing: -.02em;
        font-family: Bounded,Arial,sans-serif;
    }

    .inside-cards h3 {
        font-size: 21px;
        font-weight: 400;
        /* line-height: .8; */
        letter-spacing: -.02em
    }

    .inside-cards a {
        justify-content: flex-start;
        align-items: flex-start;
        width: calc(100% - 72px);
        max-width: none;
        overflow: visible;
        margin-left: 70px;
        padding: 20px 0px 20px 0px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        font-size: 18px;
        line-height: .9;
        color: #fff;
    }

    .inside-cards a+a {
        /* margin-top:20px; */
    }

    .inside-cards a .arrow-icon {
        margin-left: 2px;
        color: inherit
    }

    .inside-cards a:hover,.inside-cards a:focus-visible {
        color: #fff;
        outline: none
    }

    .inside-cards a:hover .arrow-out,.inside-cards a:focus-visible .arrow-out {
        transform: translate(16px,-16px)
    }

    .inside-cards a:hover .arrow-in,.inside-cards a:focus-visible .arrow-in {
        transform: translate(16px,-16px)
    }

    .typography-detail .hierarchy-panel {
        container-type: inline-size
    }

    .type-scale {
        padding: 12px 16px
    }

    .type-scale .type-row {
        grid-template-columns: 56px minmax(0,1fr) 100px;
        column-gap: 10px
    }

    .type-scale .type-row>p {
        min-width: 0;
        text-align: left;
        justify-self: stretch;
        transform: none
    }

    .type-scale .type-row>span {
        text-align: right;
        white-space: nowrap
    }

    .type-scale .title-r0 p {
        font-size: clamp(40px,6.4cqw,88px);
        line-height: .94
    }

    .type-scale .title-r1 p {
        font-size: clamp(34px,4.2cqw,48px);
        line-height: 1.04
    }

    .type-scale .title-r2 p {
        font-size: clamp(30px,3.4cqw,38px);
        line-height: 1.06
    }

    .type-scale .title-r3 p {
        font-size: clamp(26px,2.85cqw,32px);
        line-height: 1.18
    }

    .type-scale .title-r4 p {
        font-size: clamp(21px,2.2cqw,24px);
        line-height: 1.3
    }

    .type-scale .title-r5 p {
        font-size: clamp(18px,1.85cqw,20px);
        line-height: 1.2
    }
}

html.lenis,html.lenis body {
    height: auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip
}

.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

.lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete
}

.hero-glass-mark>canvas {
    pointer-events: none!important
}

.footer-groups a {
    justify-content: flex-start;
    overflow: hidden
}

.footer-groups a .arrow-icon {
    margin-left: 2px
}

.footer-groups a:hover .arrow-out,.footer-groups a:focus-visible .arrow-out {
    transform: translate(16px,-16px)
}

.footer-groups a:hover .arrow-in,.footer-groups a:focus-visible .arrow-in {
    transform: translate(16px,-16px)
}

/* Arrow hover movement matches the 18px icon size. */
.inside-cards a:hover .arrow-out,.inside-cards a:focus-visible .arrow-out,.inside-cards a:hover .arrow-in,.inside-cards a:focus-visible .arrow-in,.footer-groups a:hover .arrow-out,.footer-groups a:focus-visible .arrow-out,.footer-groups a:hover .arrow-in,.footer-groups a:focus-visible .arrow-in {
    transform: translate(18px,-18px)
}

/* Favicon in context: direct dimensions from the reference component. */
.browser-context>.browser-mockup {
    width: 580px!important;
    max-width: none;
    height: 212px!important;
    padding: 8px 8px 48px!important;
    background: #000!important;
    border-radius: 14px 14px 0 0!important;
    box-shadow: none!important
}

.browser-context .browser-head {
    height: 68px!important;
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.browser-context .browser-tab {
    flex: 0 0 392px!important;
    width: 392px!important;
    height: 68px!important;
    padding: 0 20px!important;
    gap: 16px!important;
    border-radius: 10px 10px 0 0!important;
    background: #262628!important
}

.browser-context .browser-tab strong {
    font-family: Wix Madefor Display,Arial,sans-serif!important;
    font-size: 24px!important;
    font-weight: 400!important;
    line-height: 1!important
}

.browser-context .browser-tab em {
    margin-left: auto;
    font-size: 30px!important;
    font-weight: 200;
    color: #8a8fa2
}

.browser-context .favicon-tile {
    width: 34px!important;
    height: 34px!important;
    flex: 0 0 34px!important;
    /* border-radius: 0!important; */
    /* background: transparent!important; */
    overflow: visible!important
}

.browser-context .favicon-tile svg {
    display: block;
    width: 28px!important;
    height: 28px!important;
    fill: #000000 !important;
}

.browser-context .browser-head>b {
    width: 62px!important;
    height: 60px!important;
    margin: 0!important;
    padding: 0!important;
    border-radius: 8px!important;
    background: #101011!important;
    color: #8a8fa2!important;
    font-size: 31px!important;
    font-weight: 300!important
}

.browser-context .browser-mockup>p {
    height: 96px!important;
    margin: 0!important;
    padding: 24px!important;
    border: 8px solid #262628!important;
    border-radius: 0 10px 10px!important;
    background: #101011!important;
    color: #8a8fa2!important;
    font-family: Wix Madefor Display,Arial,sans-serif!important;
    font-size: 22px!important;
    line-height: 32px!important
}

@media(max-width: 809px) {
    .inside-cards article,.inside-cards article:nth-child(n) {
        height:auto;
        min-height: 0;
        padding: 20px;
        justify-content: center
    }

    .inside-cards article>div {
        gap: 50px;
        padding-bottom: 20px;
        border-color: rgba(255,255,255,.1)
    }

    .inside-cards b,.inside-cards h3 {
        font-size: 20px!important;
        line-height: 1
    }

    .inside-cards a {
        width: calc(100% - 55px);
        margin-left: 55px;
        padding: 0 0 20px;
        overflow: visible;
        border-bottom: 1px solid rgba(255,255,255,.1);
        font-size: 18px;
        line-height: .9
    }

    .inside-cards a+a {
        margin-top: 20px
    }

    .inside-cards a .arrow-icon {
        margin-left: 2px
    }

    .inside-cards a:hover .arrow-out,.inside-cards a:focus-visible .arrow-out {
        transform: translate(16px,-16px)
    }

    .inside-cards a:hover .arrow-in,.inside-cards a:focus-visible .arrow-in {
        transform: translate(16px,-16px)
    }

    .browser-context>.browser-mockup {
        width: 580px!important;
        transform: translate(-50%,-50%) scale(.56);
        transform-origin: center
    }
}

/* Measured system corrections — REFERENCE_AUDIT.md §§ layout-01, type-01, content-01. */
@media(min-width: 810px) {
    .detail {
        grid-template-columns:33% 67%;
        gap: 0;
        padding: 0
    }

    .detail-info {
        height: calc(100svh - 8px);
        min-height: 0;
        margin: 4px 0 4px 4px;
        top: 4px;
        border-radius: 8px;
        background: linear-gradient(180deg,#101011,#090909)
    }

    .detail-content {
        gap: 4px;
        padding: 4px;
        background: #050505
    }

    .detail-content>article,.detail-content>div {
        border-radius: 8px
    }

    .detail-meta {
        padding: 20px
    }

    .detail-meta span,.detail-meta b {
        font-size: 12px!important;
        line-height: 1;
        letter-spacing: -.02em
    }

    .detail-copy,.detail-info:has(>.download-pill) .detail-copy {
        left: 20px;
        right: 20px;
        bottom: 40px;
        width: auto
    }

    .detail-copy h3 {
        font-size: 32px;
        line-height: 1;
        letter-spacing: -.02em;
        margin-bottom: 32px;
    }

    .detail-copy p {
        max-width: 320px;
        font-size: 16px;
        /* line-height: 1.2; */
        letter-spacing: -.02em
    }

    .detail-info:has(>.download-pill) .detail-copy {
        bottom: 92px
    }

    .quote-panel {
        height: calc(50svh - 6px);
        min-height: 0;
        padding: 20px
    }

    .quote-panel>small {
        position: absolute;
        left: 100px;
        top: 155px;
    }

    .quote-panel p {
        inset: 198px 0 auto 100px;
        width: auto;
        margin: 0;
        font-size: 32px;
        line-height: 1;
        letter-spacing: -.02em;
        transform: none
    }

    .inside-cards {
        bottom: 4px
    }

    .inside-cards article {
        height: 36.1667svh;
        min-height: 0;
        justify-content: flex-start
    }

    #logo .detail-content>:nth-child(n+3) {
        height: calc(100svh - 8px);
        min-height: calc(100svh - 8px);
        grid-row: span 2
    }
}

.hero-glass-mark:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: #050604;
    -webkit-mask: url('logo_addu.svg') left center/333% 100% no-repeat;
    mask: url('logo_addu.svg') left center/333% 100% no-repeat
}

.hero-glass-mark>canvas {
    z-index: 1
}

@media(max-width: 809px) {
    .hero-top p {
        display:block;
        width: 280px;
        max-width: calc(100vw - 40px);
        margin-top: 24px;
        font-size: 18px;
        line-height: .9
    }

    .quote-panel>small {
        position: absolute;
        left: 38px;
        top: 80px
    }

    .quote-panel p {
        left: 38px;
        right: 20px;
        top: 118px;
        width: auto;
        margin: 0;
        inset-block-end: auto;
        transform: none;
        font-size: 28px;
        line-height: 1
    }
}

/* Hero keeps the original contour/WebGL sequence, using the dedicated icon
   only as a reliable alpha mask so the canvas can never render as a square. */
.hero-glass-mark:before {
    -webkit-mask: url('addu-icon-white.svg') center/94% 94% no-repeat!important;
    mask: url('addu-icon-white.svg') center/94% 94% no-repeat!important
}

.hero-glass-mark>canvas {
    -webkit-mask: url('addu-icon-white.svg') center/94% 94% no-repeat!important;
    mask: url('addu-icon-white.svg') center/94% 94% no-repeat!important
}

/* Reliable hero sequence: self-drawing SVG outline, then a masked animated
   glass fill. The WebGL canvas remains active above the fallback fill. */
.hero-mark-outline {
    position: absolute;
    z-index: 3;
    inset: 3%;
    display: block;
    width: 94%;
    height: 94%;
    pointer-events: none
}

.hero-glass-mark:after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 3%;
    display: block!important;
    width: auto;
    height: auto;
    left: 3%;
    top: 3%;
    opacity: 0;
    background: radial-gradient(circle at 18% 18%,rgba(255,255,255,.92) 0 5%,transparent 23%),radial-gradient(circle at 78% 72%,rgba(255,221,0,.92) 0 8%,transparent 34%),radial-gradient(circle at 42% 58%,rgba(255,246,176,.72),transparent 29%),conic-gradient(from 205deg at 50% 50%,#050604,#7c6c00,#ffdd00,#fff4a6,#252000,#ffdd00,#050604);
    background-size: 145% 145%,155% 155%,170% 170%,190% 190%;
    background-position: 0% 0%,100% 100%,20% 80%,0% 30%;
    -webkit-mask: url('addu-icon-white.svg') center/contain no-repeat!important;
    mask: url('addu-icon-white.svg') center/contain no-repeat!important;
    filter: saturate(1.25) contrast(1.08) drop-shadow(0 0 12px rgba(255,221,0,.68));
    mix-blend-mode: normal;
    animation: heroGlassFillReveal .9s cubic-bezier(.22,1,.36,1) 1.75s forwards,heroGlassFlow 4.8s ease-in-out 2.65s infinite alternate!important
}

@keyframes heroGlassFillReveal {
    from { opacity: 0; filter: blur(14px) drop-shadow(0 0 0 rgba(255,221,0,0)) }
    to { opacity: .9; filter: blur(0) saturate(1.25) contrast(1.08) drop-shadow(0 0 12px rgba(255,221,0,.68)) }
}

@keyframes heroGlassFlow {
    from { background-position: 0% 0%,100% 100%,20% 80%,0% 30% }
    to { background-position: 100% 80%,0% 10%,90% 10%,100% 70% }
}

.hero-glass-mark:after {
    z-index: 1!important
}

.hero-glass-mark>canvas {
    z-index: 2!important;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 12px rgba(255,221,0,.68))!important
}

/* New production logo assets. */
.brand-logo img {
    filter: none!important
}

.brand-logo .logo-accent {
    display: none!important
}

.logo-secondary .mark-window {
    width: 120px;
    background: none!important;
    -webkit-mask: none!important;
    mask: none!important;
    filter: none!important
}

.logo-secondary .mark-window img {
    width: 100%;
    height: 100%;
    opacity: 1!important;
    filter: none!important
}

/* Dedicated transparent corner artwork; no rectangular mask containers. */
.founder-corner-art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(var(--corner-rotation));
    overflow: visible
}

.founder-corner-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none
}

.founder-corner-fill {
    opacity: .14;
    filter: none;
    -webkit-mask-image: var(--corner-mask);
    mask-image: var(--corner-mask)
}

.founder-corner-sheen {
    opacity: .2;
    filter: none;
    -webkit-mask-image: linear-gradient(var(--sheen-angle),transparent 16%,#000 48%,transparent 78%);
    mask-image: linear-gradient(var(--sheen-angle),transparent 16%,#000 48%,transparent 78%)
}

/* One subtle dedicated mark on chapter covers. */
.chapter-intro .ghost-marks {
    display: block!important;
    right: -80px;
    top: -80px;
    width: 390px;
    opacity: .18
}

.chapter-intro .ghost-marks .mark-window:first-child {
    width: 100%;
    margin: 0;
    filter: none
}

.chapter-intro .ghost-marks .mark-window:first-child img {
    width: 100%;
    height: 100%;
    filter: none
}

.chapter-intro .ghost-marks .mark-window:nth-child(2) {
    display: none
}

/* The personality mark rotates independently from the centered wrapper. */
.traits-center {
    position: absolute!important;
    z-index: 8;
    display: block!important;
    visibility: visible;
    opacity: 1;
    left: 50%;
    top: 50%;
    width: 66px;
    height: 66px;
    transform: translate(-50%,-50%);
    filter: drop-shadow(0 0 10px rgba(255,221,0,.35))
}

.traits-center img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    transform-origin: center;
    animation: traitsIconSpin 8s linear infinite
}

@keyframes traitsIconSpin {
    to { transform: rotate(360deg) }
}

/* App icon geometry is shared by the size samples and browser tab mockup. */
.app-sizes .mark-window {
    width: 76%;
    filter: none
}

.browser-context .favicon-tile {
    width: 34px!important;
    height: 34px!important;
    flex: 0 0 34px!important;
    display: grid!important;
    place-items: center!important;
    overflow: hidden!important;
    border-radius: 20%!important;
    background: var(--yellow)!important
}

.browser-context .favicon-tile .mark-window {
    display: block!important;
    width: 26px!important;
    height: 26px!important;
    min-width: 0!important;
    flex: 0 0 26px!important;
    aspect-ratio: 1;
    padding: 0!important;
    border-radius: 0!important;
    background: transparent!important;
    overflow: visible!important
}

.browser-context .favicon-tile .mark-window img {
    display: block;
    width: 26px!important;
    height: 26px!important;
    max-width: none;
    object-fit: contain;
    filter: none!important
}

/* Thin symbols inside semantic color rings. */
.voice-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 1
}

/* Final hero treatment: true translucent glass over the GradFlow background. */
.hero-title h1 {
    text-transform: uppercase
}

.hero-glass-mark {
    isolation: isolate;
    animation: glassMarkFloat 7s cubic-bezier(.55,.08,.42,.95) 2.1s infinite alternate!important
}

.hero-glass-mark:before {
    display: block!important;
    opacity: .82;
    background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,221,0,.055) 42%,rgba(0,0,0,.14) 76%,rgba(255,255,255,.1))!important;
    -webkit-backdrop-filter: blur(18px) saturate(1.7) contrast(1.08);
    backdrop-filter: blur(18px) saturate(1.7) contrast(1.08);
    -webkit-mask: url('addu-icon-white.svg') center/94% 94% no-repeat!important;
    mask: url('addu-icon-white.svg') center/94% 94% no-repeat!important;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.34)) drop-shadow(0 14px 30px rgba(0,0,0,.28))
}

.hero-glass-mark:after {
    opacity: .52;
    background: radial-gradient(circle at 22% 18%,rgba(255,255,255,.92) 0 3%,transparent 19%),radial-gradient(circle at 76% 74%,rgba(255,221,0,.68) 0 6%,transparent 30%),linear-gradient(118deg,transparent 18%,rgba(255,255,255,.42) 38%,transparent 55%),linear-gradient(305deg,rgba(255,187,0,.18),transparent 46%,rgba(255,255,255,.15))!important;
    background-size: 155% 155%,170% 170%,220% 220%,180% 180%!important;
    mix-blend-mode: screen!important;
    filter: blur(1px) saturate(1.25) drop-shadow(0 0 10px rgba(255,221,0,.38))!important;
    animation: liquidGlassHighlights 5.4s ease-in-out infinite alternate!important
}

.hero-glass-mark>canvas {
    opacity: 1;
    mix-blend-mode: screen!important;
    filter: saturate(1.08) contrast(.94) drop-shadow(0 0 10px rgba(255,221,0,.42))!important
}

@keyframes liquidGlassHighlights {
    from { background-position: 0% 0%,100% 100%,0% 55%,20% 80% }
    to { background-position: 100% 75%,0% 18%,100% 42%,85% 12% }
}

@media(prefers-reduced-motion:reduce) {
    .hero-glass-mark,.hero-glass-mark:after {
        animation: none!important
    }
}

/* Keep a single mark silhouette: glass base + WebGL refraction. */
.hero-glass-mark {
    animation: none!important;
    transform: none!important
}

.hero-glass-mark .hero-mark-outline,
.hero-glass-mark:after {
    display: none!important;
    animation: none!important
}

.hero-glass-mark:before {
    opacity: .46;
    background: linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,221,0,.035) 48%,rgba(0,0,0,.12))!important;
    -webkit-backdrop-filter: blur(14px) saturate(1.45) contrast(1.06);
    backdrop-filter: blur(14px) saturate(1.45) contrast(1.06);
    filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(0,0,0,.22))
}

.hero-glass-mark>canvas {
    opacity: 1;
    mix-blend-mode: normal!important;
    -webkit-mask: none!important;
    mask: none!important;
    filter: drop-shadow(0 0 1px rgba(255,235,103,.8)) drop-shadow(0 18px 28px rgba(0,0,0,.34))!important
}

.hero-glass-mark:before {
    display: block!important;
    opacity: 0;
    background: rgba(255,221,0,.16)!important;
    -webkit-backdrop-filter: blur(38px) saturate(1.85) contrast(1.1)!important;
    backdrop-filter: blur(38px) saturate(1.85) contrast(1.1)!important;
    filter: none!important;
    animation: physicsGlassBaseReveal .62s cubic-bezier(.22,1,.36,1) 2.15s forwards!important
}

@keyframes physicsGlassBaseReveal {
    to { opacity: .88 }
}

/* Final hero mark: the original yellow outline reveal, without glass layers. */
.hero-glass-mark {
    isolation: auto!important;
    overflow: visible!important;
    background: none!important;
    -webkit-mask: none!important;
    mask: none!important;
    filter: none!important;
    animation: none!important;
    transform: none!important
}

.hero-glass-mark:before,
.hero-glass-mark:after,
.hero-glass-mark>canvas {
    display: none!important;
    content: none!important;
    animation: none!important
}

.hero-glass-mark:before {
    content: ""!important;
    position: absolute;
    z-index: 0;
    inset: 3%;
    display: block!important;
    opacity: 0;
    background: transparent!important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-mask: url('addu-icon-white.svg') center/97.5% 97.5% no-repeat!important;
    mask: url('addu-icon-white.svg') center/97.5% 97.5% no-repeat!important;
    mix-blend-mode: normal!important;
    transform: none!important;
    will-change: opacity;
    filter: none!important;
    animation: heroOutlineInnerReveal .5s cubic-bezier(.22,1,.36,1) 2s forwards!important
}

@keyframes heroOutlineInnerReveal {
    to { opacity: 1 }
}

.hero-glass-mark .hero-mark-fill {
    position: absolute;
    z-index: 0;
    left: 4.175%;
    top: 4.175%;
    display: block;
    width: 91.65%;
    height: 91.65%;
    opacity: 0;
    pointer-events: none;
    animation: heroMarkFillReveal .5s cubic-bezier(.22,1,.36,1) 2s forwards
}

@keyframes heroMarkFillReveal {
    to { opacity: .1 }
}

.hero-glass-mark .hero-mark-outline {
    position: absolute;
    z-index: 1;
    inset: 3%;
    display: block!important;
    width: 94%;
    height: 94%;
    opacity: 1!important;
    filter: drop-shadow(0 0 7px rgba(255,221,0,.42));
    pointer-events: none
}

@media(prefers-reduced-motion:reduce) {
    .hero-glass-mark .hero-mark-fill {
        opacity: .1;
        animation: none
    }

    .hero-glass-mark .hero-mark-outline {
        filter: drop-shadow(0 0 4px rgba(255,221,0,.32))
    }
}

/* Animated alphabet and real-world typography examples. */
.font-specimen .alphabet-pairs {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: .12em .48em;
    white-space: normal;
    overflow: visible
}

.alphabet-pairs>span {
    display: inline-block;
    color: #f5f4ef;
    transition: color .9s cubic-bezier(.22,1,.36,1),text-shadow .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)
}

.alphabet-pairs>span.is-accent {
    color: var(--yellow);
    text-shadow: 0 0 18px rgba(255,221,0,.16);
    transform: translateY(-1px)
}

.alphabet-pairs>em {
    flex: 0 0 100%;
    margin-top: .2em;
    color: #797a80;
    font: inherit;
    font-size: .72em;
    letter-spacing: .04em
}

.typography-use-panel {
    box-sizing: border-box;
    padding: 20px;
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
    gap: 16px;
    overflow: hidden;
    background: #101011;
    color: #f5f4ef
}

.type-use-heading {
    box-sizing: border-box;
    padding-right: 72px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px
}

.type-use-heading small,.type-use-label {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .055em;
    color: #87888e
}

.type-use-heading p {
    width: min(430px,48%);
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 13px;
    line-height: 1.35;
    color: #a4a5aa
}

.type-use-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: 1.32fr .9fr .82fr;
    grid-template-rows: 1.05fr .95fr;
    gap: 4px
}

.type-use-grid>section,.type-use-grid>aside {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 20px;
    overflow: hidden;
    border-radius: 6px;
    background: #171718
}

.type-use-hero {
    grid-row: 1/-1;
    display: flex;
    flex-direction: column;
    background: var(--yellow)!important;
    color: #0a0a0a
}

.type-use-hero .type-use-label {
    color: rgba(0,0,0,.58)
}

.type-use-hero h3 {
    margin: auto 0 22px;
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(34px,3.1vw,60px);
    line-height: .96;
    font-weight: 600;
    letter-spacing: -.04em
}

.type-use-hero h3 em {
    font-style: normal;
    -webkit-text-stroke: 1.2px #0a0a0a;
    color: transparent
}

.type-use-hero>p {
    max-width: 410px;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 17px;
    line-height: 1.25
}

.type-use-hero>a {
    width: fit-content;
    margin-top: 26px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 34px;
    border-radius: 4px;
    background: #0a0a0a;
    color: #fff;
    font-family: Bounded,Arial,sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none
}

.type-use-hero>a b {
    color: var(--yellow);
    font-size: 16px
}

.type-use-case {
    grid-column: 2;
    grid-row: 1/-1;
    display: flex;
    flex-direction: column
}

.type-use-case time {
    margin-top: auto;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    color: var(--yellow)
}

.type-use-case h4 {
    margin: 12px 0 16px;
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(23px,2vw,36px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -.035em
}

.type-use-case>p {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 14px;
    line-height: 1.36;
    color: #b5b6ba
}

.type-use-link {
    margin-top: 24px;
    padding-top: 13px;
    border-top: 1px solid #343436;
    font-family: Bounded,Arial,sans-serif;
    font-size: 10px;
    font-weight: 500
}

.type-use-ui {
    display: flex;
    flex-direction: column
}

.type-use-ui>div {
    margin: auto 0 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end
}

.type-use-ui>div>span,.type-use-ui>div>em,.type-use-ui li {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 10px;
    font-style: normal;
    color: #929399
}

.type-use-ui strong {
    grid-row: 1/3;
    grid-column: 2;
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(34px,3vw,54px);
    line-height: .82;
    color: var(--yellow)
}

.type-use-ui ul {
    margin: 0;
    padding: 12px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #343436;
    list-style: none
}

.type-use-ui li:first-child {
    color: #f5f4ef
}

.type-use-ui li i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--yellow)
}

.type-use-rules {
    display: grid;
    grid-template-rows: auto repeat(3,1fr)
}

.type-use-rules>div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: center;
    border-top: 1px solid #343436
}

.type-use-rules>div>b {
    font-family: Bounded,Arial,sans-serif;
    font-size: 10px;
    color: var(--yellow)
}

.type-use-rules p {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.type-use-rules strong {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 13px;
    font-weight: 600
}

.type-use-rules p span {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 10px;
    line-height: 1.25;
    color: #929399
}

@media(max-width:900px) {
    .font-specimen .alphabet-pairs {
        align-content: flex-start;
        padding-top: 18px
    }

    .typography-use-panel {
        height: auto!important;
        min-height: 0!important;
        overflow: visible
    }

    .type-use-heading {
        padding-right: 0;
        flex-direction: column;
        gap: 10px
    }

    .type-use-heading p {
        width: 100%
    }

    .type-use-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(520px,auto) repeat(2,minmax(300px,auto))
    }

    .type-use-hero {
        grid-column: 1/-1;
        grid-row: 1
    }

    .type-use-case {
        grid-column: 1;
        grid-row: 2/4
    }
}

@media(max-width:600px) {
    .type-use-grid {
        display: flex;
        flex-direction: column
    }

    .type-use-grid>section,.type-use-grid>aside {
        min-height: 300px
    }

    .type-use-hero {
        min-height: 500px!important
    }

    .type-use-case {
        min-height: 430px!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .alphabet-pairs>span {
        transition: none
    }
}

/* Typography usage sheet: scale, rhythm and spacing without decorative UI. */
.type-scale-text .type-row {
    grid-template-columns: minmax(0,1fr) 170px
}

.type-scale-text .type-row>b {
    display: none
}

.type-scale-text .type-row>span {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis
}

.typography-use-panel {
    display: block;
    padding: 20px;
    background: #101011
}

.type-use-sheet {
    box-sizing: border-box;
    height: 100%;
    padding: 26px 28px 22px;
    display: grid;
    grid-template-rows: 92px minmax(0,1fr);
    overflow: hidden;
    border-radius: 6px;
    background: #f3f2ee;
    color: #151515
}

.type-use-sheet>header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #d4d2cc
}

.type-use-sheet>header h3 {
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(27px,2.6vw,44px);
    line-height: .88;
    font-weight: 600;
    letter-spacing: -.04em
}

.type-use-sheet>header span {
    padding-top: 3px;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #777772
}

.type-use-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0,1.42fr) minmax(250px,.82fr);
    gap: 34px
}

.type-use-scale-board {
    min-height: 0;
    padding-top: 18px;
    display: grid;
    grid-template-rows: 60px 48px 40px minmax(150px,1fr) 34px
}

.use-scale-row,.use-caption,.use-body-sample {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    align-items: center
}

.use-scale-row small,.use-caption small,.use-body-sample>small {
    align-self: center;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    color: #696966
}

.use-scale-row b {
    white-space: nowrap;
    overflow: hidden;
    font-family: Bounded,Arial,sans-serif;
    font-weight: 600;
    letter-spacing: -.035em
}

.use-h1 b {
    font-size: clamp(29px,3.1vw,48px);
    line-height: 1
}

.use-h2 b {
    font-size: clamp(23px,2.3vw,32px);
    line-height: 1.05
}

.use-h3 b {
    font-size: 22px;
    line-height: 1.1
}

.use-body-sample {
    align-items: start;
    padding-top: 18px;
    border-top: 1px solid #d4d2cc;
    border-bottom: 1px solid #d4d2cc
}

.use-body-sample>small {
    align-self: start;
    padding-top: 3px
}

.use-body-sample>div {
    max-width: 330px;
    padding-right: 70px;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 14px;
    line-height: 20px
}

.use-body-sample p+p {
    margin-top: 16px
}

.use-body-sample i {
    position: absolute;
    right: 0;
    width: 64px;
    border-top: 1px solid #7b7b76;
    font-style: normal
}

.use-body-sample i:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 1px;
    height: 7px;
    background: #7b7b76
}

.use-body-sample i span {
    position: absolute;
    top: 5px;
    left: 0;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    line-height: 1.15;
    color: #696966
}

.measure-leading {
    top: 30px
}

.measure-paragraph {
    top: 106px
}

.use-caption b {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 11px;
    font-weight: 600
}

.type-use-composition {
    min-height: 0;
    padding: 20px 0 4px 28px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #d4d2cc
}

.type-use-composition article {
    position: relative
}

.type-use-composition article+article {
    margin-top: 30px
}

.type-use-composition h4,.type-use-composition h5,.type-use-composition h6 {
    margin: 0;
    font-family: Bounded,Arial,sans-serif;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.035em
}

.type-use-composition h4 {
    font-size: clamp(24px,2.3vw,36px)
}

.type-use-composition h5 {
    font-size: 24px
}

.type-use-composition h6 {
    font-size: 17px
}

.type-use-composition p {
    max-width: 300px;
    margin-top: 16px;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 13px;
    line-height: 18px
}

.type-use-composition article>i {
    position: absolute;
    top: -9px;
    left: -22px;
    width: 14px;
    border-top: 1px solid #7b7b76;
    font-style: normal
}

.type-use-composition article>i span {
    position: absolute;
    right: 20px;
    top: -5px;
    width: 46px;
    text-align: right;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    color: #696966
}

@media(max-width:900px) {
    .type-scale-text .type-row {
        grid-template-columns: minmax(0,1fr) 160px
    }

    .typography-use-panel {
        padding: 16px
    }

    .type-use-sheet {
        height: auto;
        min-height: 900px
    }

    .type-use-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .type-use-composition {
        padding-bottom: 24px
    }
}

@media(max-width:600px) {
    .type-scale-text .type-row {
        grid-template-columns: minmax(0,1fr)
    }

    .type-scale-text .type-row>span {
        display: none
    }

    .type-use-sheet {
        padding: 22px 18px;
        grid-template-rows: 105px auto
    }

    .type-use-sheet>header h3 {
        font-size: 29px
    }

    .type-use-sheet>header span {
        max-width: 110px;
        text-align: right
    }

    .type-use-scale-board {
        grid-template-rows: 56px 46px 38px minmax(240px,auto) 36px
    }

    .use-scale-row,.use-caption,.use-body-sample {
        grid-template-columns: 44px minmax(0,1fr)
    }

    .use-h1 b {
        font-size: 28px
    }

    .use-h2 b {
        font-size: 22px
    }

    .use-h3 b {
        font-size: 18px
    }

    .use-body-sample>div {
        padding-right: 0
    }

    .use-body-sample i {
        display: none
    }
}

/* Native dark typography slide. Each measurement sits inside the gap it describes. */
.typography-use-panel {
    padding: 20px;
    display: grid;
    grid-template-rows: 38px minmax(0,1fr);
    gap: 4px;
    background: #101011;
    color: #f5f4ef
}

.type-use-title {
    padding: 0 56px 10px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #303032
}

.type-use-title small,.type-use-title span,
.type-use-scale-clean header,.type-use-rhythm header {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .05em;
    color: #8a8b91
}

.type-use-title span {
    letter-spacing: 0;
    text-transform: none
}

.type-use-dark-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 4px
}

.type-use-scale-clean,.type-use-rhythm {
    min-width: 0;
    min-height: 0;
    padding: 18px;
    border-radius: 6px;
    background: #171718;
    overflow: hidden
}

.type-use-scale-clean {
    display: grid;
    grid-template-rows: 28px repeat(5,minmax(0,1fr))
}

.type-use-scale-clean>header,.type-use-rhythm>header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.type-use-scale-clean>header b,.type-use-rhythm>header b {
    color: #f5f4ef;
    font-weight: 600
}

.clean-scale-row {
    min-height: 0;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 76px;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #303032
}

.clean-scale-row small,.clean-scale-row em {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    font-style: normal;
    color: #8a8b91
}

.clean-scale-row small {
    color: var(--yellow)
}

.clean-scale-row em {
    text-align: right;
    white-space: nowrap
}

.clean-scale-row strong {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    font-family: Bounded,Arial,sans-serif;
    font-weight: 600;
    letter-spacing: -.035em
}

.clean-h1 strong {
    font-size: clamp(27px,2.1vw,31px);
    line-height: 1
}

.clean-h2 strong {
    font-size: clamp(21px,1.75vw,24px);
    line-height: 1.05
}

.clean-h3 strong {
    font-size: 18px;
    line-height: 1.1
}

.clean-body strong,.clean-caption strong {
    white-space: normal;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    letter-spacing: 0
}

.clean-body strong {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400
}

.clean-caption strong {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500
}

.type-use-rhythm {
    display: grid;
    grid-template-rows: 28px minmax(0,1fr)
}

.rhythm-example {
    min-height: 0;
    padding: 30px 8px 0;
    border-top: 1px solid #303032
}

.rhythm-example h3 {
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(28px,2.45vw,40px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -.04em
}

.rhythm-measure {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--yellow)
}

.rhythm-measure i {
    position: relative;
    align-self: stretch;
    width: 9px;
    flex: 0 0 9px;
    border-left: 1px solid var(--yellow)
}

.rhythm-measure i:before,.rhythm-measure i:after {
    content: "";
    position: absolute;
    left: -1px;
    width: 7px;
    border-top: 1px solid var(--yellow)
}

.rhythm-measure i:before {
    top: 0
}

.rhythm-measure i:after {
    bottom: 0
}

.rhythm-measure span,.rhythm-paragraph aside span {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    line-height: 1.15;
    color: var(--yellow)
}

.rhythm-heading-gap {
    height: 24px
}

.rhythm-paragraph-gap {
    height: 20px
}

.rhythm-caption-gap {
    height: 16px
}

.rhythm-paragraph {
    position: relative;
    padding-right: 72px
}

.rhythm-paragraph>p,.rhythm-second-paragraph {
    max-width: 310px;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 16px;
    line-height: 28px
}

.rhythm-paragraph aside {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-style: normal
}

.rhythm-paragraph aside i {
    position: relative;
    width: 8px;
    height: 28px;
    border-left: 1px solid var(--yellow)
}

.rhythm-paragraph aside i:before,.rhythm-paragraph aside i:after {
    content: "";
    position: absolute;
    left: -1px;
    width: 7px;
    border-top: 1px solid var(--yellow)
}

.rhythm-paragraph aside i:before {
    top: 0
}

.rhythm-paragraph aside i:after {
    bottom: 0
}

.rhythm-caption {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    letter-spacing: .045em;
    color: #8a8b91
}

@media(max-width:900px) {
    .typography-use-panel {
        height: auto!important;
        min-height: 0!important;
        grid-template-rows: auto auto
    }

    .type-use-title {
        padding-right: 0
    }

    .type-use-dark-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(570px,auto) minmax(570px,auto)
    }
}

@media(max-width:600px) {
    .type-use-title {
        flex-direction: column;
        gap: 5px
    }

    .type-use-scale-clean,.type-use-rhythm {
        padding: 14px
    }

    .clean-scale-row {
        grid-template-columns: 42px minmax(0,1fr) 66px
    }

    .clean-h1 strong {
        font-size: 27px
    }

    .clean-h2 strong {
        font-size: 22px
    }

    .clean-h3 strong {
        font-size: 18px
    }
}

/* Icon system: four meanings across four contrast modes. */
.icon-system {
    box-sizing: border-box;
    height: calc(100svh - 6px);
    min-height: 694px;
    padding: 20px;
    display: grid;
    grid-template-rows: 48px minmax(0,1fr);
    gap: 4px;
    overflow: hidden;
    background: #101011
}

.icon-system>header {
    padding-right: 54px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #303032
}

.icon-system>header small,.icon-system>header p,.icon-matrix-corner,.icon-column-title,.icon-row-title,.icon-cell>span {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .045em
}

.icon-system>header small {
    color: #f5f4ef
}

.icon-system>header p {
    display: flex;
    gap: 22px;
    color: #8a8b91
}

.icon-system>header p span {
    display: flex;
    align-items: center;
    gap: 6px
}

.icon-system>header p i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow)
}

.icon-matrix {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 116px repeat(4,minmax(0,1fr));
    grid-template-rows: 34px repeat(4,minmax(0,1fr));
    gap: 3px
}

.icon-matrix-corner,.icon-column-title,.icon-row-title {
    border-radius: 5px;
    background: #171718;
    color: #85868c
}

.icon-matrix-corner,.icon-column-title {
    display: grid;
    place-items: center
}

.icon-column-title {
    color: #f5f4ef
}

.icon-row-title {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px
}

.icon-row-title b {
    color: #f5f4ef;
    font: inherit
}

.icon-row-title span {
    color: #77787e;
    font: inherit;
    letter-spacing: 0
}

.icon-cell {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 5px;
    color: inherit;
    text-decoration: none;
    cursor: pointer
}

.icon-cell img {
    width: 64px;
    height: 64px;
    max-width: none;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.22,1,.36,1)
}

.icon-cell img[src*="team-"] {
    width: 74px;
    height: 64px
}

.icon-cell>span {
    position: absolute;
    right: 10px;
    bottom: 9px;
    padding: 5px 7px;
    border-radius: 99px;
    opacity: 0;
    background: rgba(12,13,16,.82);
    color: #fff;
    letter-spacing: 0;
    transform: translateY(4px);
    transition: opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1)
}

.icon-cell:hover img,.icon-cell:focus-visible img {
    transform: scale(1.12)
}

.icon-cell:hover>span,.icon-cell:focus-visible>span {
    opacity: 1;
    transform: translateY(0)
}

.icon-cell:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: -2px
}

.surface-light {
    background: #f5f5f5
}

.surface-dark {
    background: #0c0d10
}

.surface-yellow {
    background: var(--yellow)
}

.surface-graphite {
    background: #1d2029
}

@media(max-width:900px) {
    .icon-system {
        height: auto;
        min-height: 760px;
        padding: 16px;
        overflow-x: auto
    }

    .icon-system>header {
        min-width: 650px;
        padding-right: 0
    }

    .icon-matrix {
        min-width: 650px;
        grid-template-columns: 100px repeat(4,minmax(115px,1fr))
    }
}

@media(max-width:600px) {
    .icon-system>header p {
        gap: 10px
    }

    .icon-cell img {
        width: 56px;
        height: 56px
    }

    .icon-cell img[src*="team-"] {
        width: 65px;
        height: 56px
    }
}

/* Twelve-card gallery. Finished icons cycle through their four contrast modes on hover. */
.icon-gallery {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(3,minmax(0,1fr));
    gap: 3px
}

.icon-gallery-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 5px;
    background: #171718
}

.icon-gallery-card.is-legacy {
    display: grid;
    place-items: center
}

.icon-gallery-card.is-legacy>img {
    width: 54px;
    height: 54px;
    opacity: .74;
    filter: grayscale(1);
    transition: opacity .25s ease,filter .3s ease,transform .45s cubic-bezier(.22,1,.36,1)
}

.icon-gallery-card.is-legacy:hover>img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.1)
}

.icon-gallery-name {
    position: absolute;
    z-index: 8;
    left: 12px;
    bottom: 11px;
    padding: 5px 7px;
    border-radius: 99px;
    background: rgba(12,13,16,.78);
    color: #fff;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .045em
}

.icon-gallery-name em {
    margin-left: 5px;
    color: var(--yellow);
    font: inherit
}

.icon-gallery-download,.icon-variant-links {
    position: absolute;
    z-index: 9;
    right: 10px;
    bottom: 9px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1)
}

.icon-gallery-download {
    padding: 5px 7px;
    border-radius: 99px;
    background: #242426;
    color: #fff;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    line-height: 1;
    text-decoration: none
}

.icon-gallery-card:hover .icon-gallery-download,.icon-gallery-card:hover .icon-variant-links,.icon-gallery-card:focus-within .icon-gallery-download,.icon-gallery-card:focus-within .icon-variant-links {
    opacity: 1;
    transform: translateY(0)
}

.icon-cycle {
    position: absolute;
    inset: 0
}

.icon-cycle-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0
}

.icon-cycle-state:first-child {
    opacity: 1
}

.icon-cycle-state:after {
    position: absolute;
    top: 10px;
    left: 11px;
    padding: 4px 6px;
    border-radius: 99px;
    background: rgba(12,13,16,.72);
    color: #fff;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .04em
}

.icon-cycle-state:nth-child(1):after {
    content: "СВЕТЛЫЙ"
}

.icon-cycle-state:nth-child(2):after {
    content: "ТЁМНЫЙ"
}

.icon-cycle-state:nth-child(3):after {
    content: "ЖЁЛТЫЙ"
}

.icon-cycle-state:nth-child(4):after {
    content: "МОНО"
}

.icon-cycle-state img {
    width: 62px;
    height: 62px;
    max-width: none;
    object-fit: contain
}

.icon-cycle-state img[src*="team-"] {
    width: 72px;
    height: 62px
}

.icon-cycle-state img[src*="promotion-"] {
    width: 72px;
    height: 62px
}

.icon-cycle-state img[src*="effect-"] {
    width: 48px;
    height: 62px
}

.is-developed:hover .icon-cycle-state,.is-developed:focus-within .icon-cycle-state {
    animation: iconVariantCycle 4.8s linear infinite
}

.is-developed:hover .icon-cycle-state:nth-child(2),.is-developed:focus-within .icon-cycle-state:nth-child(2) {
    animation-delay: 1.2s
}

.is-developed:hover .icon-cycle-state:nth-child(3),.is-developed:focus-within .icon-cycle-state:nth-child(3) {
    animation-delay: 2.4s
}

.is-developed:hover .icon-cycle-state:nth-child(4),.is-developed:focus-within .icon-cycle-state:nth-child(4) {
    animation-delay: 3.6s
}

@keyframes iconVariantCycle {
    0%,20% { opacity: 1 }
    25%,100% { opacity: 0 }
}

.icon-variant-links {
    display: flex;
    gap: 3px
}

.icon-variant-links a {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(12,13,16,.86);
    color: #fff;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 7px;
    line-height: 1;
    text-decoration: none
}

.icon-variant-links a:hover,.icon-variant-links a:focus-visible {
    background: var(--yellow);
    color: #0c0d10;
    outline: none
}

@media(max-width:900px) {
    .icon-system {
        min-height: 1220px;
        overflow: hidden
    }

    .icon-system>header {
        min-width: 0
    }

    .icon-gallery {
        min-width: 0;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-template-rows: repeat(6,minmax(180px,1fr))
    }
}

@media(max-width:560px) {
    .icon-system {
        grid-template-rows: 62px minmax(0,1fr)
    }

    .icon-system>header {
        flex-direction: column;
        gap: 6px
    }

    .icon-system>header p {
        font-size: 7px
    }

    .icon-gallery-name em {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .is-developed:hover .icon-cycle-state,.is-developed:focus-within .icon-cycle-state {
        animation: none
    }
}

.icon-system {
    grid-template-rows: minmax(0,1fr)
}

@media(max-width:560px) {
    .icon-system {
        grid-template-rows: minmax(0,1fr)
    }
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.hero-title .hero-badges small {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    box-sizing: border-box;
    white-space: nowrap
}

/* The hero mark fills only after its initial contour reveal is complete. */
.hero > .hero-glass-mark .hero-hover-fill {
    position: absolute;
    z-index: 0;
    inset: 3%;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(255,237,122,.45));
    will-change: filter
}

.hero > .hero-glass-mark .hero-hover-fill i {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--yellow);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: url('addu-icon-white.svg') center/97.5% 97.5% no-repeat;
    mask: url('addu-icon-white.svg') center/97.5% 97.5% no-repeat;
    filter: drop-shadow(0 0 0 rgba(255,221,0,0));
    animation: none!important;
    mix-blend-mode: normal!important;
    transform: none!important;
    transition: opacity 1s ease,filter 1s ease;
    will-change: opacity,filter
}

.hero > .hero-glass-mark .hero-hover-fill i:nth-child(1) { clip-path: polygon(50% 50%,50% 0,100% 0) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(2) { clip-path: polygon(50% 50%,100% 0,100% 50%) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(3) { clip-path: polygon(50% 50%,100% 50%,100% 100%) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(4) { clip-path: polygon(50% 50%,100% 100%,50% 100%) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(5) { clip-path: polygon(50% 50%,50% 100%,0 100%) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(6) { clip-path: polygon(50% 50%,0 100%,0 50%) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(7) { clip-path: polygon(50% 50%,0 50%,0 0) }
.hero > .hero-glass-mark .hero-hover-fill i:nth-child(8) { clip-path: polygon(50% 50%,0 0,50% 0) }

.hero > .hero-glass-mark.is-outline-ready .hero-hover-fill i {
    pointer-events: auto
}

.hero > .hero-glass-mark.is-outline-ready .hero-hover-fill i:hover {
    opacity: .92;
    filter: drop-shadow(0 0 2px rgba(255,237,122,.9)) drop-shadow(0 0 30px rgba(255,221,0,.48));
    transition-duration: .35s
}

@media(max-width:560px) {
    .hero-badges {
        gap: 5px
    }

    .hero-title .hero-badges small {
        min-height: 25px;
        padding: 5px 8px;
        font-size: 8px
    }
}

.principle-copy {
    width: 82%
}

.founder-manifest blockquote p + p {
    margin-top: .62em
}

.principle-copy h3 {
    margin-bottom: 22px
}

.principle-copy p + p {
    margin-top: 14px
}

.principle-copy .principle-lead {
    color: #f5f4ef;
    font-size: 18px;
    line-height: 1.12
}

.thinking-grid {
    grid-template-rows: 48px 42px repeat(5,1fr)
}

.thinking-title {
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #101011;
    color: #f5f4ef;
    font-family: Bounded,Arial,sans-serif;
    font-size: 18px;
    letter-spacing: -.02em
}

.thinking-grid .voice-row p:first-child strong {
    color: #f5f4ef;
    font-weight: 600
}

@media(max-width:809px) {
    .thinking-grid {
        grid-template-rows: 52px 64px repeat(5,auto)
    }

    .principle-copy {
        width: 86%
    }

    .detail-info>.download-action {
        position: relative!important;
        height: 58px;
        padding: 0 28px
    }
}

html {
    scroll-behavior: smooth
}

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

/* Realistic social previews */
.social-content {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: minmax(346px,calc(50svh - 4.5px)) minmax(346px,calc(50svh - 4.5px))
}

.social-content>.social-panel {
    width: auto;
    height: auto;
    min-height: 346px
}

.social-panel-telegram {
    grid-column: 1;
    grid-row: 1
}

.social-panel-vk {
    grid-column: 2;
    grid-row: 1
}

.social-panel {
    overflow: hidden
}

.social-panel-telegram {
    background: #181818
}

.telegram-demo {
    width: min(500px,88%);
    overflow: hidden;
    border: 1px solid #303033;
    border-radius: 14px;
    background: #212121;
    box-shadow: 0 18px 48px rgba(0,0,0,.32);
    color: #f4f4f5;
    font-family: Arial,sans-serif
}

.tg-chat {
    position: relative;
    min-width: 0;
    height: 76px;
    padding: 8px 18px 8px 10px;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    box-sizing: border-box
}

.tg-chat + .tg-chat {
    border-top: 1px solid rgba(255,255,255,.035)
}

.tg-chat.is-muted {
    opacity: .38;
    filter: saturate(.45)
}

.tg-chat-addu {
    background: #2b2b2d;
    box-shadow: inset 3px 0 0 var(--yellow)
}

.tg-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700
}

.tg-avatar img {
    width: 72%;
    height: 72%;
    object-fit: contain
}

.tg-avatar-addu {
    background: var(--yellow)
}

.tg-avatar-digital {
    background: linear-gradient(145deg,#45526c,#191c24);
    color: #b8c1d2
}

.tg-avatar-product {
    background: linear-gradient(145deg,#41584e,#18221e);
    color: #b9cec4
}

.tg-chat-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.tg-chat-copy strong,.tg-chat-copy>span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tg-chat-copy strong {
    color: #f4f4f5;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px
}

.tg-chat-copy>span {
    color: #aaa;
    font-size: 14px;
    line-height: 17px
}

.tg-chat time {
    align-self: start;
    padding-top: 5px;
    color: #969699;
    font-size: 12px;
    font-weight: 400
}

.tg-verified,.vk-verified {
    display: inline-grid;
    place-items: center;
    font-style: normal;
    color: #fff;
    background: #3390ec;
    border-radius: 50%
}

.tg-verified {
    width: 15px;
    height: 15px;
    margin-left: 3px;
    font-size: 10px;
    vertical-align: 1px
}

.tg-muted {
    color: #777;
    font-size: 9px;
    font-style: normal
}

.social-panel-vk {
    background: #141414
}

.vk-demo {
    width: min(366px,88%);
    overflow: hidden;
    border: 1px solid #292929;
    border-radius: 13px;
    background: #191919;
    box-shadow: 0 18px 48px rgba(0,0,0,.34);
    color: #f5f5f5;
    font-family: Arial,sans-serif
}

.vk-cover {
    position: relative;
    height: 92px;
    overflow: hidden;
    padding: 15px 18px;
    box-sizing: border-box;
    background: var(--yellow);
    color: #101011
}

.vk-cover::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -46px;
    top: -48px;
    opacity: .13;
    background: #101011;
    -webkit-mask: url('addu-icon-black.svg') center/contain no-repeat;
    mask: url('addu-icon-black.svg') center/contain no-repeat;
    transform: rotate(13deg)
}

.vk-cover .brand-logo {
    position: relative;
    z-index: 1;
    width: 92px
}

.vk-cover p {
    position: absolute;
    z-index: 1;
    right: 18px;
    bottom: 14px;
    color: #101011;
    font-family: Bounded,Arial,sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.03;
    text-align: right
}

.vk-profile-body {
    position: relative;
    padding: 42px 15px 14px
}

.vk-avatar {
    position: absolute;
    top: -41px;
    left: 14px;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 4px solid #191919;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--yellow)
}

.vk-avatar img {
    width: 72%;
    height: 72%;
    object-fit: contain
}

.vk-profile-body h4 {
    margin: 0 0 6px;
    color: #f5f5f5;
    font-family: Arial,sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 23px
}

.vk-verified {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    font-size: 10px;
    vertical-align: 2px
}

.vk-profile-body .vk-stats,.vk-profile-body .vk-description {
    color: #c4c4c6;
    font-size: 13px;
    line-height: 17px
}

.vk-profile-body .vk-stats {
    margin-bottom: 10px;
    color: #f0f0f0
}

.vk-profile-body .vk-description {
    margin-bottom: 8px
}

.vk-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #71a7e8;
    font-size: 13px;
    text-decoration: none
}

.vk-link span {
    color: #8f8f92;
    font-size: 18px
}

.vk-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.vk-actions span {
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f5f5f5;
    color: #111;
    font-size: 13px;
    font-weight: 600
}

.vk-actions span:last-child {
    background: #2c2c2e;
    color: #f5f5f5
}

.social-posts-panel {
    grid-column: 1/-1;
    grid-row: 2;
    min-height: 346px;
    padding: 52px 24px 20px;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-sizing: border-box
}

.social-posts-panel>small {
    position: absolute;
    top: 20px;
    left: 20px
}

.social-post-examples {
    width: min(940px,94%);
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.social-post-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 8px;
    font-style: normal
}

.social-post-card .brand-logo {
    width: 92px
}

.social-post-card p {
    margin: auto 0;
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(18px,1.35vw,26px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.04em
}

.social-post-card p strong {
    font-weight: 750
}

.social-post-card em,.social-post-card>small {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .08em
}

.post-yellow {
    background: var(--yellow);
    color: #101011
}

.post-dark {
    background: #101011;
    color: #f5f4ef
}

.post-dark p strong {
    color: var(--yellow)
}

.post-mark {
    position: absolute;
    width: 64%;
    right: -18%;
    bottom: -16%;
    opacity: .13;
    transform: rotate(11deg)
}

.post-mark img {
    width: 100%;
    height: auto
}

.post-dark>small,.post-dark em,.post-dark p {
    position: relative;
    z-index: 1
}

.post-light {
    background: #f5f4ef;
    color: #101011
}

.post-light p strong {
    color: #101011;
    font-size: 1.7em
}

.post-light .brand-logo {
    align-self: flex-end
}

/* Reference-inspired publication series */
.social-post-card header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.social-post-card header small {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .07em
}

.social-post-card h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: Bounded,Arial,sans-serif;
    font-size: clamp(18px,1.16vw,23px);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.045em
}

.social-post-card h3 strong {
    font-weight: 760
}

.post-ivan {
    background: #f5f4ef;
    color: #101011
}

.post-ivan header .brand-logo {
    width: 82px
}

.post-ivan h3 {
    width: 72%;
    margin-top: 26px
}

.post-ivan h3 strong {
    display: inline-block;
    margin-top: 3px;
    padding: 4px 6px 5px;
    border-radius: 4px;
    background: var(--yellow)
}

.post-ivan-photo {
    position: absolute;
    z-index: 5;
    right: -3%;
    bottom: 0;
    width: 58%;
    height: 78%;
    object-fit: contain;
    object-position: right bottom
}

.post-ivan::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: -17%;
    bottom: -19%;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow)
}

.post-ivan figcaption {
    position: absolute;
    z-index: 4;
    left: 18px;
    bottom: 17px;
    min-width: 116px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid rgba(16,16,17,.2);
    border-radius: 5px;
    background: rgba(245,244,239,.88);
    backdrop-filter: blur(8px)
}

.post-ivan figcaption b {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 10px;
    line-height: 1
}

.post-ivan figcaption span {
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 7px;
    color: #5e5e60
}

.post-metrics {
    padding-bottom: 14px;
    background: var(--yellow);
    color: #101011
}

.post-metrics header .brand-logo {
    width: 82px
}

.post-metrics h3 {
    margin: 24px 0 15px;
    font-size: clamp(19px,1.28vw,25px)
}

.post-metrics h3 strong {
    color: #101011
}

.post-metric-list {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: grid;
    gap: 3px
}

.post-metric-list span {
    min-height: 42px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    background: #f5f4ef;
    color: #101011
}

.post-metric-list span:nth-child(2) {
    background: #101011;
    color: #f5f4ef
}

.post-metric-list em {
    max-width: 58%;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    font-weight: 550;
    line-height: 1.05;
    font-style: normal;
    letter-spacing: 0
}

.post-metric-list b {
    font-family: Bounded,Arial,sans-serif;
    font-size: 18px;
    line-height: 1
}

.post-cycle {
    background: #101011;
    color: #f5f4ef
}

.post-cycle header .brand-logo {
    width: 82px
}

.post-cycle header small {
    color: #9a9a9c
}

.post-cycle h3 {
    margin: 28px 0 15px;
    font-size: clamp(21px,1.45vw,29px)
}

.post-cycle h3 strong {
    color: var(--yellow)
}

.post-cycle-mark {
    position: absolute;
    right: -24%;
    bottom: -21%;
    width: 88%;
    opacity: .12;
    transform: rotate(10deg)
}

.post-cycle-mark img {
    width: 100%;
    height: auto
}

.post-cycle-steps {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.post-cycle-steps span {
    padding: 6px 8px;
    border: 1px solid #4a4a4d;
    border-radius: 999px;
    color: #d9d9da;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    line-height: 1
}

.post-cycle-steps span:nth-child(3) {
    border-color: var(--yellow);
    background: var(--yellow);
    color: #101011
}

.post-cycle-footer {
    position: absolute;
    z-index: 3;
    left: 20px;
    right: 20px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Wix Madefor Display',Arial,sans-serif;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .08em
}

.post-cycle-footer i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    color: #101011;
    font-family: Arial,sans-serif;
    font-size: 15px;
    font-style: normal
}

@media(max-width:809px) {
    .social-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 4px
    }

    .social-panel-telegram {
        grid-column: 1;
        grid-row: auto;
        height: 325px!important;
        min-height: 325px!important
    }

    .social-panel-vk {
        grid-column: 1;
        grid-row: auto;
        height: 390px!important;
        min-height: 390px!important
    }

    .social-posts-panel {
        grid-column: 1;
        grid-row: auto;
        min-height: 360px
    }

    .telegram-demo {
        width: min(100%,430px)
    }

    .tg-chat {
        height: 70px;
        grid-template-columns: 50px minmax(0,1fr) auto
    }

    .tg-avatar {
        width: 48px;
        height: 48px
    }

    .tg-chat-copy strong {
        font-size: 14px
    }

    .tg-chat-copy>span {
        font-size: 12px
    }

    .vk-demo {
        width: min(100%,354px)
    }

    .social-post-examples {
        width: 100%;
        grid-template-columns: repeat(3,minmax(220px,1fr));
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--yellow) #222
    }

    .detail-info>.download-action {
        margin: 22px 20px 28px
    }
}

/* Working media photography */
.environment-detail .detail-content {
    padding: 4px;
    background: #050505
}

.environment-detail .detail-content>.work-media-grid {
    height: calc(100svh - 8px);
    min-height: 694px;
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-template-rows: repeat(6,minmax(0,1fr));
    gap: 4px;
    overflow: hidden;
    border-radius: 8px;
    background: #050505
}

.work-media-slot {
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border-radius: 8px;
    background: #111;
    color: #f5f4ef
}

.work-media-slot::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg,rgba(5,5,5,.3) 0,transparent 28%);
    pointer-events: none
}

.work-media-slot::after {
    content: none
}

.work-media-photo {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22,1,.36,1),filter .4s ease
}

.work-media-slot:hover .work-media-photo {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.02)
}

.work-media-main .work-media-photo {
    object-position: 50% 50%
}

.work-media-presentation .work-media-photo {
    object-position: 54% 50%
}

.work-media-cabinet .work-media-photo {
    object-position: 50% 52%
}

.work-media-team .work-media-photo {
    object-position: 50% 52%
}

.work-media-slot>span {
    position: absolute;
    z-index: 2;
    left: 19px;
    top: 18px;
    color: rgba(255,255,255,.76);
    font-family: Bounded,Arial,sans-serif;
    font-size: 12px
}

.work-media-slot>div {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 44px 1px 1px
}

.work-media-slot h4 {
    margin: 0;
    font-family: Bounded,Arial,sans-serif;
    font-size: 19px;
    font-weight: 550;
    line-height: 1;
    letter-spacing: -.03em;
    text-shadow: 0 2px 18px rgba(0,0,0,.62)
}

.work-media-main {
    grid-column: 1/8;
    grid-row: 1/5
}

.work-media-main h4 {
    font-size: 30px
}

.work-media-presentation {
    grid-column: 8/13;
    grid-row: 1/3
}

.work-media-report {
    grid-column: 8/13;
    grid-row: 3/5
}

.work-media-cabinet {
    grid-column: 1/6;
    grid-row: 5/7
}

.work-media-team {
    grid-column: 6/13;
    grid-row: 5/7
}

@media(max-width:809px) {
    .environment-detail .detail-content>.work-media-grid {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: visible
    }

    .work-media-slot,.work-media-main,.work-media-presentation,.work-media-report,.work-media-cabinet,.work-media-team {
        grid-column: 1;
        grid-row: auto;
        min-height: 270px
    }

    .work-media-main {
        min-height: 380px
    }

}

@media(max-width:560px) {
    .thinking-grid {
        grid-template-rows: 48px 54px repeat(5,auto)
    }

    .thinking-title {
        padding: 0 12px;
        font-size: 15px
    }

    .principle-copy .principle-lead {
        font-size: 16px
    }
}

@media(min-width:810px) {
    .detail-info:has(>.download-action) .detail-copy {
        bottom: 130px
    }

    .typography-detail .hierarchy-panel {
        grid-template-rows: 1fr;
        gap: 0
    }

    .hierarchy-panel>.type-scale {
        grid-row: 1
    }

    .components-detail .detail-content {
        height: calc(100svh - 8px);
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-template-rows: repeat(2,minmax(0,1fr))
    }

    .components-detail .ui-panel {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 20px
    }

    .components-detail .cards-panel {
        padding: 44px 20px 12px
    }

    .components-detail .buttons-panel>small,
    .components-detail .filters-panel>small,
    .components-detail .fields-panel>small,
    .components-detail .cards-panel>small {
        left: 20px;
        top: 20px
    }

    .components-detail .source-btn {
        min-height: 54px;
        padding: 16px 26px
    }

    .components-detail .source-btn-outline {
        padding: 13px 23px
    }

    .components-detail .source-buttons {
        gap: 12px
    }

    .components-detail .source-filter-demo,
    .components-detail .source-form {
        width: min(100%,360px)
    }

    .components-detail .source-filter-demo {
        gap: 22px
    }

    .components-detail .source-filters {
        gap: 16px 22px
    }

    .components-detail .source-filter {
        padding-bottom: 12px;
        font-size: 12px
    }

    .components-detail .source-form {
        gap: 20px
    }

    .components-detail .source-form-group,
    .components-detail .source-form-group input {
        height: 54px;
        min-height: 54px
    }

    .components-detail .source-form-group label {
        top: 20px
    }

    .components-detail .source-form-group input:focus+label,
    .components-detail .source-form-group input:not(:placeholder-shown)+label {
        top: 3px
    }

    .components-detail .source-tags {
        gap: 8px 14px
    }

    .components-detail .source-tags span {
        font-size: 10px
    }
}

@media(max-width:809px) {
    .components-detail .detail-content {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none
    }
}

/* Final mobile layout pass: the opening, navigation cards and company story
   use content-driven heights instead of compressed desktop proportions. */
@media(max-width:809px) {
    .opening-gradflow {
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 100svh;
        overflow: hidden
    }

    .opening-gradflow .gradflow-surface {
        position: sticky;
        top: 0;
        width: 100vw!important;
        height: 100svh!important;
        min-width: 100vw;
        min-height: 100svh
    }

    .opening>.hero {
        height: 100svh;
        min-height: 640px
    }

    .hero-title {
        left: 16px;
        right: 16px;
        bottom: 30px;
        width: auto;
        max-width: none
    }

    .hero-badges {
        width: 100%;
        gap: 6px
    }

    .hero-title .hero-badges small {
        min-height: 29px;
        padding: 6px 9px;
        font-size: 12px!important;
        line-height: 1
    }

    .hero-title h1 {
        width: 100%;
        max-width: none;
        margin-top: 14px;
        font-size: clamp(32px,9.3vw,40px);
        line-height: .98;
        letter-spacing: -.04em
    }

    .hero-title h1 span {
        white-space: nowrap
    }

    .opening>.inside {
        height: auto;
        min-height: 0;
        padding: 64px 4px 24px;
        overflow: visible
    }

    .inside h2 {
        margin: 0 16px 30px;
        font-size: 34px;
        line-height: 1
    }

    .inside-cards,
    .footer-groups {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0;
        grid-template-columns: 1fr;
        gap: 4px
    }

    .inside-cards article,
    .inside-cards article:nth-child(n),
    .footer-groups article,
    .footer-groups article:nth-child(n) {
        height: auto;
        min-height: 0;
        padding: 18px;
        justify-content: flex-start
    }

    .inside-cards article>div,
    .footer-groups article>div {
        display: grid;
        grid-template-columns: 30px minmax(0,1fr);
        align-items: center;
        gap: 12px;
        padding-bottom: 16px
    }

    .inside-cards b,
    .inside-cards h3,
    .footer-groups b,
    .footer-groups h3 {
        font-size: 18px!important;
        line-height: 1.1
    }

    .inside-cards a,
    .footer-groups a {
        width: calc(100% - 42px);
        margin: 0 0 0 42px;
        padding: 14px 0;
        font-size: 15px;
        line-height: 1.15;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .inside-cards a+a,
    .footer-groups a+a {
        margin-top: 0
    }

    .inside-cards article>a:last-child,
    .footer-groups article>a:last-child {
        border-bottom: 0;
        padding-bottom: 2px
    }

    .founder-manifest {
        margin-top: 0
    }

    .quote-panel,
    .detail-content>.quote-panel {
        height: auto!important;
        min-height: 0!important;
        padding: 72px 34px 38px
    }

    .quote-panel>small {
        left: 34px;
        top: 32px
    }

    .quote-panel p,
    .detail-content>.quote-panel p {
        position: static;
        inset: auto;
        width: 100%;
        margin: 0;
        transform: none;
        font-size: clamp(24px,7.2vw,30px);
        line-height: 1.03;
        overflow-wrap: break-word
    }

    footer.site-footer {
        height: auto;
        min-height: 0;
        padding: 18px 4px 22px
    }

    .footer-top {
        padding: 0 14px
    }

    .footer-groups {
        margin: 56px 0 22px
    }

    .footer-copy {
        position: static;
        margin: 0 14px
    }
}

@media(max-width:390px) {
    .hero-title h1 {
        font-size: clamp(30px,9vw,35px)
    }

    .hero-title .hero-badges small {
        padding-inline: 8px
    }
}

/* The cached external SVG may otherwise resume from its final frame. Keep the
   mark hidden until JS assigns a fresh per-navigation SVG timeline. */
.hero > .hero-glass-mark .hero-mark-outline {
    visibility: hidden
}

.hero > .hero-glass-mark.is-animating .hero-mark-outline {
    visibility: visible
}

.hero > .hero-glass-mark .hero-mark-fill {
    opacity: 0;
    animation: none
}

.hero > .hero-glass-mark.is-animating .hero-mark-fill {
    animation: heroMarkFillReveal .5s cubic-bezier(.22,1,.36,1) 2s forwards
}

.hero > .hero-glass-mark:before {
    opacity: 0;
    animation: none!important
}

.hero > .hero-glass-mark.is-animating:before {
    animation: heroOutlineInnerReveal .5s cubic-bezier(.22,1,.36,1) 2s forwards!important
}

@media(max-width:809px) {
    #personality .traits-grid article {
        height: auto;
        min-height: 280px!important
    }

    #personality .traits-grid .trait-content h4 {
        font-size: 22px;
        line-height: 1.06
    }
}