:root {
    --paper: var(--portal-color-paper);
    --paper-deep: var(--portal-color-paper-deep);
    --surface: var(--portal-color-surface);
    --ink: var(--portal-color-ink);
    --muted: var(--portal-color-muted);
    --line: var(--portal-color-line);
    --blue: var(--portal-color-blue);
    --blue-deep: var(--portal-color-blue-deep);
    --coral: var(--portal-color-coral);
    --orange: var(--portal-color-orange);
    --lime: var(--portal-color-lime);
    --radius: 1.25rem;
    --shadow: 0 1.5rem 4rem var(--portal-color-value-094);
    --shell: min(91vw, 88rem);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.landing-page {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Onest", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    overflow-x: hidden;
}

body.landing-page.menu-open {
    overflow: hidden;
}

.channel-landing {
    min-width: 20rem;
    overflow: clip;
}

.channel-landing button,
.channel-landing input {
    font: inherit;
}

.channel-landing a {
    color: inherit;
    text-decoration: none;
}

.channel-landing img {
    display: block;
    max-width: 100%;
}

.channel-landing h1,
.channel-landing h2,
.channel-landing h3,
.channel-landing p {
    margin-top: 0;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.section-pad {
    padding-block: clamp(5rem, 9vw, 9rem);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    padding-block: 1rem;
    transition: background-color 200ms ease, box-shadow 200ms ease, padding 200ms ease;
}

.site-header.is-scrolled {
    padding-block: .65rem;
    background: var(--portal-color-value-131);
    box-shadow: 0 .25rem 2rem var(--portal-color-value-096);
    backdrop-filter: blur(1rem);
}

.header-inner,
.site-nav,
.brand,
.hero-actions,
.trust-row,
.studio-topline,
.studio-controls,
.style-info,
.footer-main,
.footer-bottom {
    display: flex;
    align-items: center;
}

.header-inner {
    justify-content: space-between;
}

.brand {
    gap: .7rem;
    font-family: "Unbounded", sans-serif;
    font-size: .72rem;
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.04em;
}

.brand-mark {
    position: relative;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: .14rem;
    border-radius: .65rem;
    color: var(--paper);
    background: var(--blue);
    transform: rotate(-4deg);
}

.brand-mark i {
    display: block;
    width: .24rem;
    border-radius: 1rem;
    background: currentColor;
}

.brand-mark i:nth-child(1) { height: .65rem; }
.brand-mark i:nth-child(2) { height: 1.2rem; }
.brand-mark i:nth-child(3) { height: .9rem; }

.site-nav {
    gap: clamp(1.2rem, 2.5vw, 2.5rem);
    font-size: .84rem;
    font-weight: 700;
}

.site-nav > a:not(.nav-cta) {
    position: relative;
}

.site-nav > a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -.4rem;
    left: 0;
    height: .12rem;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 180ms ease;
}

.site-nav > a:hover::after,
.site-nav > a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-cta,
.button {
    display: inline-flex;
    min-height: 3.4rem;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    border: 0;
    border-radius: .2rem;
    padding: .9rem 1.25rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.channel-landing .nav-cta {
    min-height: 2.8rem;
    color: var(--paper);
    background: var(--blue);
}

.channel-landing .nav-cta:hover {
    background: var(--blue-deep);
}

.nav-cta span,
.button span {
    font-size: 1.1em;
}

.nav-cta:hover,
.button:hover {
    transform: translateY(-.2rem);
}

.menu-toggle {
    display: none;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    background: var(--paper);
    cursor: pointer;
}

.menu-toggle > span:not(.sr-only) {
    display: block;
    width: 1.1rem;
    height: .12rem;
    margin: .28rem auto;
    background: currentColor;
    transition: transform 180ms ease;
}

.hero {
    position: relative;
    min-height: 48rem;
    padding-top: clamp(8.5rem, 14vw, 11rem);
    background:
        radial-gradient(circle at 5% 18%, var(--portal-color-value-119) 0 7rem, transparent 7.1rem),
        linear-gradient(125deg, transparent 0 72%, var(--portal-color-value-105) 72% 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
}

.eyebrow,
.kicker,
.section-index {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.8rem;
}

.eyebrow span {
    padding: .32rem .5rem;
    color: var(--paper);
    background: var(--blue);
}

.hero h1,
.section-heading h2,
.problem h2,
.kit h2,
.start h2,
.faq h2 {
    font-family: "Unbounded", sans-serif;
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.075em;
}

.hero h1 {
    max-width: 12ch;
    margin-bottom: 1.8rem;
    font-size: clamp(3.05rem, 5.7vw, 6.2rem);
}

.hero h1 em {
    position: relative;
    color: var(--blue);
    font-style: normal;
}

.hero h1 em::after {
    content: "";
    position: absolute;
    right: -.12em;
    bottom: -.05em;
    left: -.06em;
    height: .1em;
    background: var(--lime);
    transform: rotate(-2deg);
    z-index: -1;
}

.hero-lead {
    max-width: 39rem;
    margin-bottom: 2rem;
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.hero-actions {
    flex-wrap: wrap;
    gap: 1.4rem;
}

.channel-landing .button-primary {
    color: var(--portal-color-white);
    background: var(--blue);
    box-shadow: .5rem .5rem 0 var(--line);
}

.button-primary:hover {
    box-shadow: .3rem .3rem 0 var(--line);
    background: var(--blue-deep);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-block: .75rem;
    border-bottom: 2px solid currentColor;
    font-weight: 800;
}

.trust-row {
    margin-top: 3.5rem;
    gap: 1.4rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.trust-row b {
    color: var(--blue);
}

.hero-studio {
    position: relative;
    padding: .8rem;
    border: 1px solid var(--ink);
    background: var(--surface);
    box-shadow: 1rem 1rem 0 var(--lime), var(--shadow);
    transform: rotate(1deg);
}

.studio-topline {
    justify-content: space-between;
    padding: .2rem .2rem .75rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.status-dot::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 .25rem var(--portal-color-value-107);
}

.preview-window {
    position: relative;
    display: grid;
    min-height: 27rem;
    place-items: center;
    overflow: hidden;
    color: white;
    background: var(--blue);
    isolation: isolate;
    transition: background 350ms ease;
}

.preview-window::before,
.preview-window::after {
    content: "";
    position: absolute;
    z-index: -1;
    transition: transform 400ms ease, background 400ms ease;
}

.preview-window::before {
    width: 19rem;
    height: 19rem;
    border: 3rem solid var(--lime);
    border-radius: 50%;
    right: -6rem;
    top: -7rem;
}

.preview-window::after {
    width: 12rem;
    height: 12rem;
    left: -4rem;
    bottom: -5rem;
    background: var(--coral);
    transform: rotate(36deg);
}

.preview-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .17;
    background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px);
    background-size: 2.8rem 2.8rem;
}

.preview-chip {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .3rem .55rem;
    border: 1px solid currentColor;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.preview-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: rotate(-3deg);
}

.preview-icon {
    display: grid;
    width: 4.7rem;
    height: 4.7rem;
    place-items: center;
    border: .35rem solid currentColor;
    font-family: "Unbounded", sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
}

.preview-logo strong {
    font-family: "Unbounded", sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.8rem);
    line-height: .83;
}

.preview-window > p {
    position: absolute;
    right: 1.2rem;
    bottom: 4.6rem;
    max-width: 16rem;
    margin: 0;
    font-size: .77rem;
    font-weight: 800;
    text-align: right;
    text-transform: uppercase;
}

.preview-lower {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    align-items: stretch;
    color: var(--ink);
    background: var(--paper);
}

.preview-lower b {
    padding: .65rem .8rem;
    color: var(--paper);
    background: var(--ink);
}

.preview-lower span {
    padding: .65rem .8rem;
    font-size: .78rem;
    font-weight: 800;
}

.play-button {
    position: absolute;
    right: 1.2rem;
    top: 1rem;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: var(--lime);
    cursor: pointer;
    transition: transform 180ms ease;
}

.play-button:hover {
    transform: scale(1.08) rotate(4deg);
}

.preview-window.is-playing .preview-logo {
    animation: logo-pulse 1s ease-in-out infinite alternate;
}

.preview-window.theme-travel {
    background: var(--ink);
}

.preview-window.theme-travel::before {
    border-radius: 0;
    border-color: var(--orange);
    transform: rotate(28deg);
}

.preview-window.theme-travel::after {
    border-radius: 50%;
    background: var(--blue);
}

.preview-window.theme-expert {
    background: var(--blue-deep);
}

.preview-window.theme-expert::before {
    width: 25rem;
    height: 8rem;
    border: 0;
    border-radius: 0;
    background: var(--coral);
    transform: rotate(-12deg);
}

.preview-window.theme-expert::after {
    background: var(--lime);
    transform: rotate(0);
}

.studio-controls {
    justify-content: center;
    gap: .6rem;
    padding-top: .8rem;
}

.style-dot {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border: 1px solid transparent;
    color: var(--muted);
    background: transparent;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
}

.style-dot span {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--blue);
}

.style-dot:nth-child(2) span { background: var(--orange); }
.style-dot:nth-child(3) span { background: var(--coral); }
.style-dot.is-active { border-color: var(--ink); color: var(--ink); }

.hero-stamp {
    position: absolute;
    right: -1.7rem;
    bottom: 4rem;
    display: grid;
    width: 7.5rem;
    height: 7.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--paper);
    background: var(--coral);
    font-family: "Unbounded", sans-serif;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    transform: rotate(12deg);
}

.hero-stamp span { font-size: .55rem; }

.ticker {
    overflow: hidden;
    color: var(--paper);
    background: var(--ink);
    transform: rotate(-1deg) scale(1.02);
}

.ticker-track {
    display: flex;
    width: max-content;
    gap: 1.8rem;
    align-items: center;
    padding-block: .8rem;
    font-family: "Unbounded", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    animation: ticker 25s linear infinite;
}

.ticker-track b { color: var(--lime); }

.problem-grid {
    display: grid;
    grid-template-columns: .3fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
}

.section-index {
    color: var(--blue);
}

.kicker {
    margin-bottom: 1rem;
    color: var(--coral);
}

.problem h2,
.section-heading h2,
.kit h2,
.start h2,
.faq h2 {
    margin-bottom: 1.8rem;
    font-size: clamp(2.4rem, 4.8vw, 5.2rem);
}

.problem h2 span,
.section-heading h2 span,
.kit h2 span,
.start h2 span,
.faq h2 span {
    color: var(--blue);
}

.problem-copy > p:last-child,
.kit-intro > p,
.start-copy > p {
    max-width: 38rem;
    color: var(--muted);
    font-size: 1.06rem;
}

.before-after {
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--ink);
    background: var(--surface);
    box-shadow: .7rem .7rem 0 var(--coral);
}

.compare-labels {
    display: flex;
    justify-content: space-between;
    padding: .2rem .2rem .6rem;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.compare-frame {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    background: var(--paper-deep);
}

.compare-before,
.compare-after {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.compare-before {
    color: var(--portal-color-value-102);
    background: linear-gradient(135deg, var(--portal-color-value-063), var(--portal-color-value-047));
}

.compare-before span {
    padding: .5rem;
    border: 2px solid currentColor;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.compare-after {
    left: 50%;
    flex-direction: row;
    gap: 1rem;
    clip-path: inset(0 0 0 0);
    color: white;
    background: var(--blue);
}

.compare-after b {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: .25rem solid var(--lime);
    font-family: "Unbounded", sans-serif;
    font-size: 2rem;
}

.compare-after span {
    font-family: "Unbounded", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: .9;
}

.compare-before small,
.compare-after small {
    position: absolute;
    bottom: 2rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.compare-divider {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: white;
    transition: left 500ms cubic-bezier(.2, .8, .2, 1);
}

.compare-divider i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.3rem;
    height: 2.3rem;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--ink);
    transform: translate(-50%, -50%);
}

.before-after.is-after .compare-divider { left: 8%; }

.compare-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: .7rem;
    padding: .6rem .2rem .1rem;
    border: 0;
    color: var(--ink);
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.how {
    background: var(--surface);
}

.section-heading {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.section-heading h2 {
    margin: 0;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.step {
    position: relative;
    min-height: 23rem;
    padding: 1.2rem;
    border-left: 1px solid var(--ink);
}

.step:last-child { border-right: 1px solid var(--ink); }

.step-number {
    font-family: "Unbounded", sans-serif;
    font-size: .65rem;
    font-weight: 800;
}

.step-icon {
    display: grid;
    width: 5rem;
    height: 5rem;
    margin-block: 4rem 2.5rem;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    color: var(--blue);
    font-family: "Unbounded", sans-serif;
    font-size: 1.8rem;
    transition: border-radius 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.step:hover .step-icon {
    border-radius: .4rem;
    background: var(--lime);
    transform: rotate(-5deg);
}

.step h3 {
    font-family: "Unbounded", sans-serif;
    font-size: .92rem;
    line-height: 1.2;
}

.step p {
    color: var(--muted);
    font-size: .88rem;
}

.styles {
    color: var(--paper);
    background: var(--ink);
}

.section-heading.light .section-index { color: var(--lime); }
.section-heading.light .kicker { color: var(--orange); }
.section-heading.light h2 span { color: var(--lime); }

.style-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.style-card {
    padding: .65rem;
    color: var(--ink);
    background: var(--paper);
    transition: transform 250ms ease;
}

.style-card:nth-child(2) { transform: translateY(2.3rem); }
.style-card:hover,
.style-card:focus-visible { transform: translateY(-.7rem) rotate(-1deg); outline: none; }
.style-card:nth-child(2):hover,
.style-card:nth-child(2):focus-visible { transform: translateY(1.6rem) rotate(1deg); }

.style-art {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--paper-deep);
}

.style-art::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--portal-color-value-092);
    pointer-events: none;
}

.style-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease;
}

.style-card:hover img,
.style-card:focus-visible img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.03);
}

.style-tag {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 1;
    padding: .25rem .45rem;
    color: var(--paper);
    background: var(--ink);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.style-info {
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem .3rem .4rem;
}

.style-info h3 {
    margin-bottom: .25rem;
    font-family: "Unbounded", sans-serif;
    font-size: .85rem;
}

.style-info p {
    margin: 0;
    color: var(--muted);
    font-size: .74rem;
}

.palette {
    display: flex;
}

.palette i {
    width: .8rem;
    height: 2.7rem;
    background: var(--blue);
}

.palette i:nth-child(2) { background: var(--coral); }
.palette i:nth-child(3) { background: var(--lime); }
.style-travel .palette i:first-child { background: var(--orange); }
.style-travel .palette i:nth-child(2) { background: var(--blue); }
.style-expert .palette i:first-child { background: var(--blue-deep); }

.gallery-note {
    margin: 4.5rem 0 0;
    color: var(--portal-color-value-113);
    font-size: .78rem;
    text-align: right;
}

.gallery-note span { color: var(--lime); }

.kit-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(3rem, 7vw, 8rem);
    align-items: center;
}

.kit-intro .text-link {
    margin-top: 1.2rem;
}

.kit-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    box-shadow: 1rem 1rem 0 var(--blue);
}

.kit-item {
    position: relative;
    min-height: 13rem;
    padding: 1rem;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: var(--surface);
}

.kit-item > span {
    font-family: "Unbounded", sans-serif;
    font-size: .6rem;
    font-weight: 800;
}

.kit-item h3 {
    position: absolute;
    bottom: .8rem;
    left: 1rem;
    margin: 0;
    font-family: "Unbounded", sans-serif;
    font-size: .75rem;
}

.mini-logo {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 2rem auto;
    place-items: center;
    border-radius: 50%;
    color: var(--paper);
    background: var(--coral);
    font-family: "Unbounded", sans-serif;
    font-weight: 800;
}

.color-swatches {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.color-swatches i {
    width: 2.4rem;
    height: 4rem;
    background: var(--ink);
    transform: rotate(-7deg);
}

.color-swatches i:nth-child(2) { background: var(--blue); transform: rotate(4deg); }
.color-swatches i:nth-child(3) { background: var(--coral); transform: rotate(-3deg); }
.color-swatches i:nth-child(4) { background: var(--lime); transform: rotate(7deg); }

.type-demo {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.4rem;
}

.type-demo b {
    font-family: "Unbounded", sans-serif;
    font-size: 3.5rem;
    line-height: 1;
}

.type-demo small { font-weight: 700; }

.timeline {
    position: relative;
    display: flex;
    height: 4rem;
    margin-top: 2rem;
    align-items: center;
    gap: .25rem;
    border-block: 1px solid var(--ink);
}

.timeline i { flex: 1; height: 1.4rem; background: var(--blue); }
.timeline i:nth-child(2) { background: var(--lime); }
.timeline i:nth-child(3) { background: var(--coral); }
.timeline b { position: absolute; top: -.9rem; right: 0; padding: .1rem .25rem; color: white; background: var(--ink); font-size: .6rem; }

.chapter-demo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .7rem;
    align-items: center;
    margin: 2.1rem auto 0;
    max-width: 10rem;
}

.chapter-demo b { grid-row: 1 / 3; color: var(--blue); font-family: "Unbounded", sans-serif; font-size: 2.4rem; }
.chapter-demo i { height: .3rem; background: var(--coral); }
.chapter-demo small { font-weight: 800; text-transform: uppercase; }

.lower-third {
    max-width: 12rem;
    margin: 2rem auto 0;
    padding: .65rem;
    border-left: .4rem solid var(--lime);
    color: white;
    background: var(--blue-deep);
}

.lower-third b,
.lower-third small { display: block; }
.lower-third b { font-size: .78rem; }
.lower-third small { color: var(--portal-color-value-114); font-size: .6rem; }

.start {
    position: relative;
    color: var(--paper);
    background: var(--blue);
}

.start::before {
    content: "";
    position: absolute;
    top: 12%;
    left: -5rem;
    width: 15rem;
    height: 15rem;
    border: 2.5rem solid var(--lime);
    border-radius: 50%;
    opacity: .8;
}

.start-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 9rem);
    align-items: center;
}

.start .section-index,
.start .kicker { color: var(--lime); }
.start h2 span { color: var(--lime); }
.start-copy > p { color: var(--portal-color-value-121); }

.brief-card {
    padding: clamp(1.4rem, 3vw, 2.4rem);
    color: var(--ink);
    background: var(--paper);
    box-shadow: 1rem 1rem 0 var(--ink);
    transform: rotate(-1deg);
}

.form-row label,
.brief-card legend {
    display: block;
    margin-bottom: .65rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-row input {
    width: 100%;
    min-height: 3.5rem;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    padding: .6rem .1rem;
    color: var(--ink);
    background: transparent;
    font-size: 1.05rem;
}

.form-row input:focus {
    outline: 0;
    border-color: var(--blue);
}

.brief-card fieldset {
    margin: 2rem 0;
    padding: 0;
    border: 0;
}

.mood-options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.mood-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mood-options span {
    display: block;
    padding: .55rem .8rem;
    border: 1px solid var(--ink);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.mood-options input:checked + span {
    color: white;
    background: var(--blue);
    box-shadow: .2rem .2rem 0 var(--ink);
}

.mood-options input:focus-visible + span {
    outline: 3px solid var(--lime);
    outline-offset: 2px;
}

.channel-landing .button-dark {
    width: 100%;
    color: white;
    background: var(--ink);
}

.form-hint {
    margin: .8rem 0 0;
    color: var(--muted);
    font-size: .7rem;
    text-align: center;
}

.form-result {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--ink);
    background: var(--lime);
    font-weight: 700;
}

.form-result.is-visible { display: block; }

.faq {
    background: var(--paper-deep);
}

.faq-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(3rem, 8vw, 9rem);
}

.faq-list {
    border-top: 1px solid var(--ink);
}

.faq-list details {
    border-bottom: 1px solid var(--ink);
}

.faq-list summary {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    font-weight: 800;
    cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--blue); font-family: "Unbounded", sans-serif; font-size: 1.2rem; transition: transform 180ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 38rem; padding: 0 2.5rem 1.5rem 0; color: var(--muted); }

.site-footer {
    padding-block: 4rem 1.5rem;
    color: var(--paper);
    background: var(--ink);
}

.footer-main {
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 3.5rem;
}

.brand-light .brand-mark { color: var(--ink); background: var(--lime); }
.footer-main p { margin: 0; color: var(--portal-color-value-111); font-size: .85rem; }
.channel-landing .button-light { color: var(--ink); background: var(--portal-color-orange); }

.footer-bottom {
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--portal-color-value-110);
    color: var(--portal-color-value-108);
    font-size: .68rem;
    text-transform: uppercase;
}

.reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

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

@keyframes ticker {
    to { transform: translateX(-50%); }
}

@keyframes logo-pulse {
    to { transform: rotate(2deg) scale(1.04); }
}

@media (max-width: 68rem) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { max-width: 52rem; }
    .hero-studio { max-width: 43rem; margin-inline: auto; width: 100%; }
    .hero-stamp { display: none; }
    .problem-grid { grid-template-columns: .2fr 1fr; }
    .before-after { grid-column: 2; max-width: 38rem; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step:nth-child(3), .step:nth-child(4) { border-top: 1px solid var(--ink); }
    .step:nth-child(3) { border-left: 1px solid var(--ink); }
    .style-gallery { grid-template-columns: repeat(2, 1fr); }
    .style-card:last-child { grid-column: 1 / 3; width: calc(50% - .5rem); margin-left: auto; }
    .kit-grid, .start-grid, .faq-grid { grid-template-columns: 1fr; }
    .kit-intro, .start-copy, .faq-grid > div:first-child { max-width: 46rem; }
}

@media (max-width: 52rem) {
    .site-header { padding-block: .7rem; }
    .menu-toggle { display: block; position: relative; z-index: 2; }
    .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(.2rem) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-.2rem) rotate(-45deg); }
    .site-nav {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 8vw;
        color: var(--paper);
        background: var(--ink);
        font-family: "Unbounded", sans-serif;
        font-size: clamp(1.5rem, 7vw, 3rem);
        transform: translateX(100%);
        transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
    }
    .site-nav.is-open { transform: translateX(0); }
    .site-nav .nav-cta { margin-top: 1rem; color: var(--ink); background: var(--lime); font-size: 1rem; }
    .menu-open .menu-toggle { color: var(--paper); background: transparent; border-color: var(--paper); }
    .section-heading { grid-template-columns: 1fr; gap: 1rem; }
    .problem-grid { grid-template-columns: 1fr; }
    .before-after { grid-column: auto; }
    .style-gallery { grid-template-columns: 1fr; }
    .style-card:nth-child(2) { transform: none; }
    .style-card:nth-child(2):hover, .style-card:nth-child(2):focus-visible { transform: translateY(-.7rem) rotate(1deg); }
    .style-card:last-child { grid-column: auto; width: auto; margin: 0; }
    .gallery-note { margin-top: 2rem; }
    .footer-main { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 38rem) {
    :root { --shell: min(90vw, 32rem); }
    .section-pad { padding-block: 4.5rem; }
    .hero { min-height: auto; padding-top: 7.5rem; }
    .hero-grid { gap: 3.5rem; }
    .hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
    .eyebrow { align-items: flex-start; flex-direction: column; gap: .45rem; }
    .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
    .trust-row span { display: flex; flex-direction: column; }
    .hero-studio { padding: .5rem; box-shadow: .55rem .55rem 0 var(--lime); transform: none; }
    .preview-window { min-height: 19rem; }
    .preview-logo { gap: .6rem; }
    .preview-icon { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
    .preview-window > p { display: none; }
    .style-dot { padding-inline: .3rem; font-size: .58rem; }
    .problem h2, .section-heading h2, .kit h2, .start h2, .faq h2 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
    .steps { grid-template-columns: 1fr; border-bottom: 0; }
    .step { min-height: auto; padding: 1.2rem 1rem 1.7rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
    .step:nth-child(2) { border-top: 1px solid var(--ink); }
    .step-icon { width: 4rem; height: 4rem; margin-block: 2.2rem 1.5rem; }
    .kit-board { grid-template-columns: 1fr; box-shadow: .55rem .55rem 0 var(--blue); }
    .kit-item { min-height: 11rem; }
    .start::before { display: none; }
    .brief-card { box-shadow: .55rem .55rem 0 var(--ink); transform: none; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: .5rem; }
}

/* Редактируемые продуктовые SEO-страницы. */
.product-landing { --product-accent: var(--blue); }
.product-landing--coral { --product-accent: var(--coral); }
.product-landing--lime { --product-accent: var(--lime); }
.product-landing--orange { --product-accent: var(--orange); }
.product-hero { min-height: 46rem; padding-top: clamp(8.5rem, 14vw, 11rem); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent 0 68%, color-mix(in oklch, var(--product-accent) 18%, var(--paper)) 68%), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: auto, 4rem 4rem, 4rem 4rem; }
.product-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(25rem, .92fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.product-hero__copy .eyebrow span { background: var(--product-accent); }
.product-hero h1 { max-width: 15ch; margin: 1.5rem 0 1.8rem; font-family: "Unbounded", sans-serif; font-size: clamp(3rem, 5.8vw, 6rem); font-weight: 800; line-height: .96; letter-spacing: -.07em; }
.product-hero__lead { max-width: 42rem; margin-bottom: 2rem; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.product-hero__note { margin-top: 1.25rem; color: var(--muted); font-size: .82rem; }
.product-board { color: var(--paper); background: var(--ink); box-shadow: 1.2rem 1.2rem 0 var(--product-accent); transform: rotate(1deg); }
.product-board__top, .product-board__timeline { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--portal-color-value-122); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-board__top b { color: var(--product-accent); }
.product-board__stage { position: relative; min-height: 22rem; overflow: hidden; padding: 2rem; background: linear-gradient(135deg, color-mix(in oklch, var(--product-accent) 38%, var(--ink)), var(--ink) 68%); }
.product-board__stage::before { position: absolute; right: -5rem; bottom: -5rem; width: 19rem; aspect-ratio: 1; border: 3.4rem solid var(--product-accent); border-radius: 50%; content: ""; opacity: .86; }
.product-board__stage strong { position: relative; z-index: 1; display: block; margin-top: 3.8rem; font-family: "Unbounded", sans-serif; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .82; letter-spacing: -.08em; }
.product-board__number { color: var(--product-accent); font-family: "Unbounded", sans-serif; font-size: .75rem; font-weight: 800; }
.product-board__stage small { position: absolute; z-index: 1; right: 2rem; bottom: 1.5rem; max-width: 13rem; text-align: right; }
.product-board__timeline { border-top: 1px solid var(--portal-color-value-122); border-bottom: 0; gap: .45rem; }
.product-board__timeline span { height: .28rem; flex: 1; background: var(--product-accent); }
.product-board__timeline span:nth-child(2) { opacity: .6; }.product-board__timeline span:nth-child(3) { opacity: .25; }
.product-content { border-bottom: 1px solid var(--line); }
.product-content__grid { display: grid; grid-template-columns: minmax(11rem, .34fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.product-content__rail { position: sticky; top: 7rem; }
.product-content__rail p { max-width: 15rem; margin-top: 1.5rem; color: var(--muted); font-size: .78rem; }
.product-content__body { max-width: 58rem; }
.product-content__body h2 { margin: clamp(3.8rem, 7vw, 6rem) 0 1.4rem; font-family: "Unbounded", sans-serif; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.055em; }
.product-content__body h2:first-child { margin-top: 0; }
.product-content__body h3 { margin: 2.5rem 0 .8rem; font-family: "Unbounded", sans-serif; font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.12; }
.product-content__body p, .product-content__body li { color: var(--muted); font-size: 1.05rem; line-height: 1.72; }
.product-content__body ul, .product-content__body ol { margin: 1.5rem 0 2.5rem; padding-left: 1.4rem; }
.product-content__body li { margin-bottom: .65rem; padding-left: .35rem; }.product-content__body li::marker { color: var(--product-accent); font-weight: 800; }
.product-content__body details { border-top: 1px solid var(--line); }.product-content__body details:last-child { border-bottom: 1px solid var(--line); }
.product-content__body summary { padding: 1.25rem 0; font-weight: 750; cursor: pointer; }.product-content__body details p { padding: 0 0 1.25rem; }
.product-content__body a { border-bottom: 1px solid var(--product-accent); font-weight: 700; }
.product-final { background: var(--product-accent); }
.product-final__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .55fr); gap: clamp(3rem, 8vw, 10rem); align-items: end; }
.product-final h2 { margin: 1.4rem 0 0; font-family: "Unbounded", sans-serif; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .95; letter-spacing: -.065em; }
.product-final__grid > div:last-child p { max-width: 34rem; font-size: 1.05rem; }
@media (max-width: 68rem) { .product-hero__grid { grid-template-columns: 1fr; }.product-board { width: min(100% - 1.2rem, 42rem); margin-inline: auto; } }
@media (max-width: 52rem) { .product-content__grid, .product-final__grid { grid-template-columns: 1fr; }.product-content__rail { position: static; }.product-content__rail p { max-width: 30rem; } }
@media (max-width: 38rem) { .product-hero { padding-top: 7.5rem; background-size: auto, 3rem 3rem, 3rem 3rem; }.product-hero h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); }.product-board { box-shadow: .7rem .7rem 0 var(--product-accent); transform: none; }.product-board__stage { min-height: 18rem; }.product-board__stage strong { font-size: 3.4rem; } }

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

/* Тестовая страница брифа */
.brief-showcase {
    --brief-measure: 54rem;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), var(--portal-color-value-093) 50%, transparent calc(50% + 1px)),
        var(--paper);
}

.brief-showcase button,
.brief-showcase input,
.brief-showcase textarea {
    font: inherit;
}

.brief-topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    border-bottom: 1px solid var(--ink);
    background: var(--portal-color-value-128);
    backdrop-filter: blur(1rem);
}

.brief-topbar__inner {
    display: grid;
    min-height: 5.3rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.brief-topbar__status {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .7rem;
    text-transform: uppercase;
}

.brief-topbar__status span { color: var(--muted); }
.brief-topbar__status strong { padding: .35rem .55rem; color: var(--paper); background: var(--ink); }

.notes-toggle {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}

.notes-toggle input { position: absolute; opacity: 0; }
.notes-toggle > span { position: relative; width: 2.3rem; height: 1.25rem; border: 1px solid var(--ink); border-radius: 2rem; }
.notes-toggle > span::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ink); transition: transform 180ms ease, background-color 180ms ease; }
.notes-toggle input:checked + span { background: var(--lime); }
.notes-toggle input:checked + span::after { transform: translateX(1.02rem); }
.notes-toggle input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

.brief-main { padding-block: clamp(3rem, 7vw, 7rem); }
.brief-layout { display: grid; grid-template-columns: 13rem minmax(0, var(--brief-measure)); gap: clamp(3rem, 7vw, 8rem); justify-content: center; align-items: start; }

.brief-rail { position: sticky; top: 8rem; }
.brief-rail ol { margin: 2rem 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.brief-rail li { border-bottom: 1px solid var(--line); }
.brief-rail a { display: grid; grid-template-columns: 2rem 1fr; gap: .55rem; padding-block: .8rem; color: var(--muted); font-size: .78rem; }
.brief-rail b { color: var(--blue); font-family: "Unbounded", sans-serif; font-size: .6rem; }
.brief-rail li.is-active a { color: var(--ink); font-weight: 800; }
.brief-rail__hint { color: var(--muted); font-size: .7rem; }

.brief-intro { margin-bottom: clamp(4rem, 9vw, 7rem); }
.brief-intro .eyebrow span { color: var(--paper); background: var(--blue); }
.brief-intro h1 { max-width: 50rem; margin-bottom: 1.5rem; font-family: "Unbounded", sans-serif; font-size: clamp(3rem, 7vw, 6.7rem); letter-spacing: -.075em; line-height: .9; }
.brief-intro h1 em { color: var(--blue); font-style: normal; }
.brief-lead { max-width: 42rem; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }

.brief-section { scroll-margin-top: 7.5rem; margin-bottom: clamp(4.5rem, 9vw, 8rem); }
.brief-section__heading { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.2rem; margin-bottom: 2.8rem; padding-top: 1.1rem; border-top: 1px solid var(--ink); }
.brief-section__heading > span { font-family: "Unbounded", sans-serif; font-size: .72rem; font-weight: 800; }
.brief-section__heading .kicker { margin-bottom: .4rem; }
.brief-section__heading h2 { margin-bottom: .5rem; font-family: "Unbounded", sans-serif; font-size: clamp(1.7rem, 3.4vw, 3.15rem); letter-spacing: -.055em; line-height: 1.05; }
.brief-section__heading p:last-child { margin-bottom: 0; color: var(--muted); }

.field-group { margin-bottom: 1.8rem; }
.field-group > label,
.reference-link-panel > label { display: block; margin-bottom: .45rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field-group input,
.field-group textarea,
.reference-link-panel input { display: block; width: 100%; border: 1px solid var(--ink); border-radius: 0; padding: .9rem 1rem; color: var(--ink); background: var(--surface); transition: box-shadow 180ms ease, border-color 180ms ease; }
.field-group input { min-height: 3.7rem; font-size: 1.05rem; }
.field-group textarea { min-height: 10rem; resize: vertical; font-size: 1.02rem; line-height: 1.6; }
.field-group input:focus,
.field-group textarea:focus,
.reference-link-panel input:focus { outline: 0; border-color: var(--blue); box-shadow: .3rem .3rem 0 var(--blue); }
.field-group input:disabled { color: var(--muted); border-color: var(--line); background: var(--paper-deep); }
.field-caption,
.field-meta { margin: .45rem 0 0; color: var(--muted); font-size: .7rem; }
.field-meta { display: flex; justify-content: space-between; }
.field-error { min-height: 1.2em; margin: .45rem 0 0; color: var(--portal-color-value-099); font-size: .76rem; font-weight: 700; }
.has-error input,
.has-error textarea { border-color: var(--portal-color-value-099); }

.check-row { display: flex; align-items: flex-start; gap: .8rem; margin: -1rem 0 2.8rem; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; }
.custom-check { display: grid; flex: 0 0 1.4rem; height: 1.4rem; place-items: center; border: 1px solid var(--ink); color: transparent; background: var(--surface); font-size: .75rem; }
.check-row input:checked + .custom-check { color: var(--ink); background: var(--lime); }
.check-row input:focus-visible + .custom-check { outline: 3px solid var(--blue); outline-offset: 2px; }
.check-row strong,
.check-row small { display: block; }
.check-row strong { font-size: .82rem; }
.check-row small { margin-top: .15rem; color: var(--muted); font-size: .7rem; }

.choice-fieldset { margin: 0; padding: 0; border: 0; }
.format-options { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.format-options label:last-child { grid-column: 1 / -1; }
.format-options input,
.personality-options input,
.avoid-options input { position: absolute; opacity: 0; }
.format-options label > span { position: relative; display: flex; min-height: 8.7rem; flex-direction: column; padding: 1rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--surface); cursor: pointer; transition: color 180ms ease, background-color 180ms ease; }
.format-options i { color: var(--blue); font-family: "Unbounded", sans-serif; font-size: .62rem; font-style: normal; }
.format-options b { max-width: 17rem; margin-top: auto; font-size: .88rem; }
.format-options small { margin-top: .2rem; color: var(--muted); font-size: .68rem; }
.format-options input:checked + span { color: var(--paper); background: var(--blue); box-shadow: inset 0 0 0 .28rem var(--lime); }
.format-options input:checked + span i,
.format-options input:checked + span small { color: var(--paper); }
.format-options input:focus-visible + span,
.personality-options input:focus-visible + span,
.avoid-options input:focus-visible + span { z-index: 1; outline: 3px solid var(--blue); outline-offset: -3px; }

.brief-step-divider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-block: clamp(5rem, 10vw, 9rem); color: var(--blue); font-family: "Unbounded", sans-serif; font-size: .65rem; text-transform: uppercase; }
.brief-step-divider i { height: 1px; background: var(--blue); }
.brief-step-divider b { color: var(--ink); }

.personality-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.personality-options label > span { position: relative; display: flex; min-height: 7.7rem; flex-direction: column; justify-content: space-between; padding: .8rem; border: 1px solid var(--ink); background: var(--surface); font-family: "Unbounded", sans-serif; font-size: .72rem; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease; }
.personality-options small { align-self: flex-end; color: var(--muted); font-family: "Onest", sans-serif; font-size: .62rem; }
.personality-options input:checked + span { color: var(--paper); background: var(--ink); box-shadow: .35rem .35rem 0 var(--lime); transform: translate(-.15rem, -.15rem); }
.personality-options input:checked + span small { color: var(--lime); }
.personality-options label.is-blocked > span { animation: brief-shake 220ms ease; }
.selection-status { display: flex; justify-content: space-between; margin-top: 1rem; color: var(--muted); font-size: .7rem; }
.selection-status b { color: var(--blue); }

.reference-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.reference-button { display: grid; min-height: 9.5rem; grid-template-columns: 2.4rem 1fr; grid-template-rows: 1fr auto; gap: .2rem .7rem; align-items: center; padding: 1.1rem; border: 1px dashed var(--ink); color: var(--ink); background: transparent; text-align: left; cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; }
.reference-button:hover { background: var(--surface); transform: translateY(-.2rem); }
.reference-button input { position: absolute; width: 1px; opacity: 0; }
.reference-button > span { grid-row: 1 / 3; font-family: "Unbounded", sans-serif; font-size: 1.4rem; }
.reference-button b { align-self: end; font-size: .82rem; }
.reference-button small { align-self: start; color: var(--muted); font-size: .67rem; }
.reference-button:focus-visible,
.reference-button:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

.reference-link-panel { display: grid; grid-template-rows: 0fr; margin-top: .8rem; overflow: hidden; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease; }
.reference-link-panel > * { min-height: 0; }
.reference-link-panel.is-open { grid-template-rows: auto; padding: 1rem; border: 1px solid var(--ink); opacity: 1; overflow: visible; }
.reference-link-panel > div { display: grid; grid-template-columns: 1fr auto; }
.reference-link-panel button { border: 0; padding-inline: 1rem; color: var(--paper); background: var(--ink); font-weight: 800; cursor: pointer; }
.reference-list { display: grid; gap: .45rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.reference-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border: 1px solid var(--line); background: var(--surface); font-size: .72rem; }
.reference-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-list button { border: 0; color: var(--muted); background: transparent; cursor: pointer; }

.avoid-details { margin-top: 2.5rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.avoid-details summary { display: flex; min-height: 5.5rem; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.avoid-details summary::-webkit-details-marker { display: none; }
.avoid-details summary b,
.avoid-details summary small { display: block; }
.avoid-details summary b { font-size: .9rem; }
.avoid-details summary small { margin-top: .15rem; color: var(--muted); font-size: .68rem; }
.avoid-details summary i { color: var(--blue); font-family: "Unbounded", sans-serif; font-size: 1.3rem; font-style: normal; transition: transform 180ms ease; }
.avoid-details[open] summary i { transform: rotate(45deg); }
.avoid-options { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1.3rem; }
.avoid-options label > span { display: block; padding: .55rem .75rem; border: 1px solid var(--ink); font-size: .75rem; font-weight: 700; cursor: pointer; }
.avoid-options input:checked + span { color: var(--paper); background: var(--coral); box-shadow: .2rem .2rem 0 var(--ink); }

.product-note { display: none; margin-top: 1.2rem; padding: .75rem; border: 1px dashed var(--blue); color: var(--blue-deep); background: var(--portal-color-value-118); font-size: .7rem; }
.brief-showcase.show-notes .product-note { display: block; }

.brief-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2rem; color: var(--paper); background: var(--ink); box-shadow: 1rem 1rem 0 var(--lime); }
.brief-actions p { max-width: 25rem; margin: .5rem 0 0; color: var(--portal-color-value-116); font-size: .82rem; }
.brief-actions .section-index { color: var(--lime); }
.brief-actions__buttons { display: flex; flex: 0 0 auto; gap: .6rem; }
.brief-showcase .button-primary { color: var(--ink); background: var(--lime); }
.brief-showcase .button-secondary { border: 1px solid var(--portal-color-value-130); color: var(--paper); background: transparent; }

.brief-success { display: none; margin-top: 2rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--ink); background: var(--lime); box-shadow: 1rem 1rem 0 var(--blue); }
.brief-success.is-visible { display: block; }
.brief-success > span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brief-success h2 { margin: 1rem 0; font-family: "Unbounded", sans-serif; font-size: clamp(1.8rem, 4vw, 3.3rem); line-height: 1; }
.brief-success p { max-width: 36rem; }
.brief-success button { border: 0; border-bottom: 1px solid currentColor; padding: 0 0 .2rem; background: transparent; font-weight: 800; cursor: pointer; }

@keyframes brief-shake { 30% { transform: translateX(-.3rem); } 70% { transform: translateX(.3rem); } }

@media (max-width: 68rem) {
    .brief-layout { grid-template-columns: minmax(0, 1fr); }
    .brief-rail { display: none; }
    .brief-form { width: min(100%, var(--brief-measure)); min-width: 0; margin-inline: auto; }
}

@media (max-width: 52rem) {
    .brief-topbar__inner { grid-template-columns: 1fr auto; }
    .brief-topbar__status { display: none; }
    .personality-options { grid-template-columns: repeat(2, 1fr); }
    .brief-actions { align-items: stretch; flex-direction: column; }
    .brief-actions__buttons { justify-content: flex-end; }
}

@media (max-width: 38rem) {
    .notes-toggle { font-size: 0; }
    .brief-main { padding-top: 3.5rem; }
    .brief-intro h1 { font-size: clamp(2.4rem, 12vw, 3.3rem); }
    .brief-section__heading { grid-template-columns: 2.6rem 1fr; }
    .format-options,
    .reference-actions { grid-template-columns: 1fr; }
    .format-options label:last-child { grid-column: auto; }
    .format-options label > span { min-height: 7.5rem; }
    .personality-options { gap: .4rem; }
    .personality-options label > span { min-height: 6.6rem; font-size: .65rem; }
    .brief-step-divider { grid-template-columns: auto 1fr; }
    .brief-step-divider b { display: none; }
    .reference-link-panel > div { grid-template-columns: 1fr; }
    .reference-link-panel button { min-height: 3rem; }
    .brief-actions { padding: 1.2rem; box-shadow: .55rem .55rem 0 var(--lime); }
    .brief-actions__buttons { flex-direction: column-reverse; }
    .brief-actions__buttons .button { width: 100%; }
}

/* Семантические страницы: редакционный маршрут для начинающих авторов. */
.semantic-landing {
    --semantic-accent: var(--blue);
    --semantic-accent-soft: var(--portal-color-value-101);
}

.semantic-landing--name {
    --semantic-accent: var(--coral);
    --semantic-accent-soft: var(--portal-color-value-106);
}

.semantic-landing--content {
    --semantic-accent: var(--orange);
    --semantic-accent-soft: var(--portal-color-value-109);
}

.semantic-landing--video {
    --semantic-accent: var(--lime);
    --semantic-accent-soft: var(--portal-color-value-118);
}

.semantic-hero {
    position: relative;
    min-height: 48rem;
    padding-top: clamp(8.5rem, 14vw, 11rem);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, transparent 0 66%, var(--semantic-accent-soft) 66% 100%),
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: auto, 4rem 4rem, 4rem 4rem;
}

.semantic-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 9rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--paper));
}

.semantic-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(26rem, .92fr);
    gap: clamp(3rem, 7vw, 8rem);
    align-items: center;
}

.semantic-breadcrumbs {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: 1.7rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.semantic-breadcrumbs a {
    border-bottom: 1px solid currentColor;
}

.semantic-hero__copy .eyebrow span {
    background: var(--semantic-accent);
}

.semantic-hero h1 {
    max-width: 52rem;
    margin: 1.5rem 0 1.8rem;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(3.05rem, 6.3vw, 6.7rem);
    font-weight: 800;
    line-height: .94;
    letter-spacing: -.07em;
}

.semantic-hero h1 em {
    display: inline;
    color: var(--blue);
    font-family: "Onest", Arial, sans-serif;
    font-weight: 500;
}

.semantic-hero__lead {
    max-width: 43rem;
    margin-bottom: 2rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

.semantic-hero__note {
    max-width: 36rem;
    margin-top: 1.4rem;
    padding-left: 1rem;
    border-left: .2rem solid var(--semantic-accent);
    color: var(--muted);
    font-size: .84rem;
}

.semantic-canvas {
    color: var(--paper);
    background: var(--ink);
    box-shadow: 1.25rem 1.25rem 0 var(--semantic-accent);
    transform: rotate(1.2deg);
}

.semantic-canvas__top,
.semantic-canvas__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--portal-color-value-122);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.semantic-canvas__top b {
    color: var(--semantic-accent);
}

.semantic-canvas__body {
    padding: clamp(1.5rem, 4vw, 3rem);
}

.semantic-canvas__body > p {
    max-width: 18rem;
    margin-bottom: 2rem;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
}

.semantic-canvas__items article {
    display: grid;
    grid-template-columns: 2.3rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.15rem 0;
    border-top: 1px solid var(--portal-color-value-122);
}

.semantic-canvas__items article > span {
    color: var(--semantic-accent);
    font-family: "Unbounded", sans-serif;
    font-size: .68rem;
    font-weight: 800;
}

.semantic-canvas__items strong,
.semantic-canvas__items small {
    display: block;
}

.semantic-canvas__items strong {
    margin-bottom: .15rem;
    font-size: 1.05rem;
}

.semantic-canvas__items small {
    color: var(--portal-color-value-125);
}

.semantic-canvas__footer {
    border-top: 1px solid var(--portal-color-value-122);
    border-bottom: 0;
}

.semantic-canvas__footer i {
    display: block;
    width: 2.6rem;
    height: .45rem;
    background: repeating-linear-gradient(90deg, var(--semantic-accent) 0 .45rem, transparent .45rem .7rem);
}

.semantic-answer__grid {
    display: grid;
    grid-template-columns: minmax(6rem, .35fr) minmax(0, 1fr) minmax(21rem, .8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.semantic-answer__copy h2,
.semantic-plan__heading h2,
.semantic-result__copy h2,
.semantic-cta h2,
.semantic-related__heading h2,
.seo-entry h2 {
    margin-bottom: 1.5rem;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(2rem, 4.4vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.055em;
}

.semantic-answer__copy > p:not(.kicker),
.semantic-result__copy > p:not(.kicker) {
    max-width: 46rem;
    color: var(--muted);
    font-size: 1.05rem;
}

.semantic-answer__points {
    margin: 0;
    padding: 0;
    border-top: .2rem solid var(--ink);
    list-style: none;
}

.semantic-answer__points li {
    display: grid;
    grid-template-columns: 4.8rem 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

.semantic-answer__points li > span {
    color: var(--blue);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.semantic-answer__points strong {
    display: block;
    margin-bottom: .25rem;
}

.semantic-answer__points p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .87rem;
}

.semantic-plan {
    color: var(--paper);
    background: var(--ink);
}

.semantic-plan .section-index,
.semantic-plan .kicker {
    color: var(--semantic-accent);
}

.semantic-plan__heading {
    display: grid;
    grid-template-columns: minmax(10rem, .4fr) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, 8rem);
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.semantic-plan__heading > div:last-child > p {
    max-width: 43rem;
    color: var(--portal-color-value-127);
    font-size: 1.05rem;
}

.semantic-steps {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--portal-color-value-124);
    list-style: none;
}

.semantic-steps li {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) 10rem;
    gap: clamp(1.2rem, 4vw, 4rem);
    align-items: start;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--portal-color-value-123);
}

.semantic-steps li > span {
    color: var(--semantic-accent);
    font-family: "Unbounded", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
}

.semantic-steps h3 {
    margin-bottom: .45rem;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    line-height: 1.1;
}

.semantic-steps p {
    max-width: 45rem;
    margin-bottom: 0;
    color: var(--portal-color-value-126);
}

.semantic-steps small {
    padding: .55rem .7rem;
    border: 1px solid var(--portal-color-value-124);
    color: var(--semantic-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.semantic-result__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(23rem, .75fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: center;
}

.semantic-result__board {
    border: .15rem solid var(--ink);
    background: var(--surface);
    box-shadow: 1rem 1rem 0 var(--blue);
}

.semantic-result__board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-bottom: .15rem solid var(--ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.semantic-result__board-head b {
    color: var(--blue);
}

.semantic-result__board ul {
    margin: 0;
    padding: 1rem 1.4rem 1.4rem;
    list-style: none;
}

.semantic-result__board li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .65rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
}

.semantic-result__board li:last-child {
    border-bottom: 0;
}

.semantic-result__board li span {
    color: var(--blue);
    font-weight: 900;
}

.semantic-cta {
    padding-block: clamp(4rem, 7vw, 7rem);
    background: var(--semantic-accent);
}

.semantic-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .55fr);
    gap: clamp(3rem, 8vw, 10rem);
    align-items: end;
}

.semantic-cta h2 {
    max-width: 54rem;
    margin-bottom: 0;
}

.semantic-cta__grid > div:last-child p {
    max-width: 35rem;
    font-size: 1.05rem;
}

.semantic-related {
    border-bottom: 1px solid var(--line);
}

.semantic-related__heading,
.seo-entry__heading {
    display: grid;
    grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: start;
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.semantic-related__links,
.seo-entry__links {
    border-top: .15rem solid var(--ink);
}

.semantic-related__links a,
.seo-entry__links a {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    gap: clamp(1.2rem, 4vw, 4rem);
    align-items: center;
    min-height: 7rem;
    border-bottom: 1px solid var(--line);
    transition: padding 180ms ease, background-color 180ms ease;
}

.semantic-related__links a:hover,
.semantic-related__links a:focus-visible,
.seo-entry__links a:hover,
.seo-entry__links a:focus-visible {
    padding-inline: 1rem;
    background: var(--surface);
}

.semantic-related__links a > span,
.seo-entry__links a > span {
    color: var(--blue);
    font-family: "Unbounded", sans-serif;
    font-size: .72rem;
    font-weight: 800;
}

.semantic-related__links h3,
.seo-entry__links h3 {
    margin-bottom: .3rem;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.6rem);
}

.semantic-related__links p,
.seo-entry__links p {
    margin-bottom: 0;
    color: var(--muted);
}

.semantic-related__links b,
.seo-entry__links b {
    font-size: 1.5rem;
}

.seo-entry {
    border-top: 1px solid var(--line);
    background: var(--paper-deep);
}

.seo-entry__heading > p {
    max-width: 42rem;
    color: var(--muted);
    font-size: 1.05rem;
}

@media (max-width: 68rem) {
    .semantic-hero__grid,
    .semantic-answer__grid,
    .semantic-result__grid {
        grid-template-columns: 1fr;
    }

    .semantic-hero__grid {
        gap: 5rem;
    }

    .semantic-hero h1 {
        max-width: 64rem;
    }

    .semantic-canvas {
        width: min(100% - 1.25rem, 42rem);
        margin-inline: auto;
    }

    .semantic-answer__grid > .section-index {
        margin-bottom: -1rem;
    }

    .semantic-answer__points {
        margin-top: 1rem;
    }

    .semantic-result__board {
        width: min(100% - 1rem, 42rem);
    }
}

@media (max-width: 52rem) {
    .semantic-plan__heading,
    .semantic-cta__grid,
    .semantic-related__heading,
    .seo-entry__heading {
        grid-template-columns: 1fr;
    }

    .semantic-steps li {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .semantic-steps small {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 38rem) {
    .semantic-hero {
        padding-top: 7.5rem;
        background-size: auto, 3rem 3rem, 3rem 3rem;
    }

    .semantic-hero h1 {
        font-size: clamp(2.45rem, 12vw, 3.6rem);
    }

    .semantic-hero__grid {
        gap: 3.5rem;
    }

    .semantic-canvas {
        box-shadow: .7rem .7rem 0 var(--semantic-accent);
        transform: none;
    }

    .semantic-canvas__body {
        padding: 1.4rem;
    }

    .semantic-answer__points li {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .semantic-steps li {
        grid-template-columns: 2.1rem minmax(0, 1fr);
        gap: .8rem;
    }

    .semantic-result__board {
        box-shadow: .6rem .6rem 0 var(--blue);
    }

    .semantic-result__board-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .semantic-related__links a,
    .seo-entry__links a {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        gap: .7rem;
        min-height: 6rem;
    }

    .semantic-related__links p,
    .seo-entry__links p {
        font-size: .82rem;
    }
}