.prism-landing {
    --prism-bg: #06080d;
    --prism-bg-soft: #0b0f16;
    --prism-surface: #101620;
    --prism-surface-raised: #151d29;
    --prism-ink: #f7f4ed;
    --prism-copy: #c6c4bd;
    --prism-muted: #8e929c;
    --prism-gold: #e8a33d;
    --prism-gold-bright: #ffc96b;
    --prism-cyan: #6ee7f2;
    --prism-border: rgba(232, 163, 61, 0.2);
    --prism-border-neutral: rgba(255, 255, 255, 0.09);
    min-height: 100vh;
    overflow: hidden;
    color: var(--prism-copy);
    background:
        radial-gradient(circle at 75% 4%, rgba(232, 163, 61, 0.1), transparent 25rem),
        radial-gradient(circle at 8% 34%, rgba(110, 231, 242, 0.06), transparent 26rem),
        var(--prism-bg);
}

.prism-landing *,
.prism-landing *::before,
.prism-landing *::after {
    box-sizing: border-box;
}

.prism-landing a {
    color: inherit;
}

.prism-shell {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
}

.prism-subnav {
    position: sticky;
    top: 0;
    z-index: 30;
    width: min(100% - 2rem, 1280px);
    min-height: 64px;
    margin: 0 auto;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-bottom: 1px solid var(--prism-border-neutral);
    background: rgba(6, 8, 13, 0.86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.prism-subnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--prism-ink) !important;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.prism-subnav__mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #17130c;
    background: linear-gradient(135deg, var(--prism-gold-bright), var(--prism-gold));
    box-shadow: 0 5px 22px rgba(232, 163, 61, 0.2);
}

.prism-subnav__links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.prism-subnav__links a {
    color: var(--prism-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.prism-subnav__links a:hover {
    color: var(--prism-ink);
}

.prism-button {
    min-height: 48px;
    padding: 0.75rem 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--prism-gold);
    border-radius: 9px;
    color: #17130c !important;
    background: linear-gradient(135deg, var(--prism-gold-bright), var(--prism-gold));
    box-shadow: 0 10px 30px rgba(232, 163, 61, 0.12);
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.prism-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(232, 163, 61, 0.2);
}

.prism-button--secondary {
    color: var(--prism-ink) !important;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.prism-button--secondary:hover {
    border-color: rgba(232, 163, 61, 0.45);
    background: rgba(232, 163, 61, 0.06);
}

.prism-button--small {
    min-height: 38px;
    padding: 0.5rem 0.75rem;
    font-size: 0.76rem;
}

.prism-eyebrow {
    color: var(--prism-gold-bright);
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.prism-hero {
    min-height: 720px;
    padding-block: clamp(4rem, 8vw, 7.5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.prism-hero h1 {
    max-width: 700px;
    margin: 0.85rem 0 1.35rem;
    color: var(--prism-ink);
    font-size: clamp(3.1rem, 6.5vw, 6.35rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.067em;
}

.prism-hero__lede {
    max-width: 650px;
    margin: 0;
    color: var(--prism-copy);
    font-size: clamp(1.04rem, 1.6vw, 1.22rem);
    line-height: 1.7;
}

.prism-actions {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.prism-hero__checks {
    margin: 1.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    color: var(--prism-muted);
    font-size: 0.78rem;
    list-style: none;
}

.prism-hero__checks span {
    margin-right: 0.3rem;
    color: var(--prism-cyan);
    font-weight: 900;
}

.prism-hero__media {
    position: relative;
    isolation: isolate;
}

.prism-hero__media::before {
    position: absolute;
    z-index: -1;
    inset: 8% -8% -10% 10%;
    border-radius: 50%;
    content: "";
    background: rgba(232, 163, 61, 0.12);
    filter: blur(70px);
}

.prism-browser-frame {
    overflow: hidden;
    border: 1px solid rgba(232, 163, 61, 0.34);
    border-radius: 20px;
    background: #101725;
    box-shadow: 0 38px 100px rgba(0, 0, 0, 0.48);
    transform: rotate(1.2deg);
}

.prism-browser-frame__bar {
    min-height: 42px;
    padding: 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #111725;
}

.prism-browser-frame__bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b4557;
}

.prism-browser-frame__bar span:first-child {
    background: #e8a33d;
}

.prism-browser-frame__bar b {
    margin-left: auto;
    color: #778095;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prism-browser-frame img {
    /* contain: this frame is 1.12:1 and a composed infographic is 0.46, so cover showed 41% of
       the artifact — measured on production. .prism-story__image and .prism-pack-grid keep
       cover deliberately: a 5:1 diagram and square packs match their boxes and lose nothing. */
    width: 100%;
    aspect-ratio: 1.12 / 1;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #F6F4F1;
}

.prism-float-card {
    position: absolute;
    max-width: 156px;
    padding: 0.85rem 0.95rem;
    display: grid;
    gap: 0.12rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;
    background: rgba(17, 22, 32, 0.92);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.prism-float-card strong {
    color: var(--prism-gold-bright);
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

.prism-float-card span {
    color: #aeb4c1;
    font-size: 0.67rem;
    line-height: 1.35;
}

.prism-float-card--top {
    top: -1.8rem;
    right: -1rem;
}

.prism-float-card--bottom {
    bottom: -1.8rem;
    left: -1.2rem;
}

.prism-proof {
    min-height: 105px;
    padding: 1rem 1.2rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(190px, 1.25fr);
    align-items: center;
    gap: 1rem;
    border-block: 1px solid var(--prism-border-neutral);
}

.prism-proof > div {
    display: grid;
    gap: 0.08rem;
}

.prism-proof strong {
    color: var(--prism-ink);
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.prism-proof span,
.prism-proof p {
    color: var(--prism-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.prism-proof p {
    margin: 0;
    padding-left: 1rem;
    border-left: 1px solid var(--prism-border-neutral);
}

.prism-section {
    padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.prism-section h2 {
    max-width: 820px;
    margin: 0.75rem 0 0;
    color: var(--prism-ink);
    font-size: clamp(2.25rem, 4.6vw, 4.45rem);
    line-height: 1.02;
    letter-spacing: -0.052em;
}

.prism-section--split {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.22fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.prism-section__heading > p {
    max-width: 660px;
    margin: 1.3rem 0 0;
    color: var(--prism-muted);
    line-height: 1.7;
}

.prism-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.prism-compare article {
    min-height: 240px;
    padding: 1.5rem;
    border: 1px solid var(--prism-border-neutral);
    border-radius: 16px;
    background: rgba(16, 22, 32, 0.62);
}

.prism-compare article.prism-compare__prism {
    border-color: rgba(232, 163, 61, 0.44);
    background:
        radial-gradient(circle at 100% 0, rgba(232, 163, 61, 0.15), transparent 55%),
        rgba(16, 22, 32, 0.8);
}

.prism-compare__symbol {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--prism-gold-bright);
    background: rgba(232, 163, 61, 0.12);
    font-weight: 900;
}

.prism-compare h3 {
    margin: 1.6rem 0 0.65rem;
    color: var(--prism-ink);
    font-size: 1.22rem;
}

.prism-compare p {
    margin: 0;
    color: var(--prism-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.prism-heading-row {
    margin-bottom: 2.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.6fr);
    align-items: end;
    gap: 3rem;
}

/* The heading and its paragraph in one column: the paragraph reads under the heading, not beside it. */
.prism-heading-row--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.prism-heading-row p {
    margin: 0 0 0.35rem;
    color: var(--prism-muted);
    line-height: 1.7;
}

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

.prism-maker-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--prism-border-neutral);
    border-radius: 17px;
    background: rgba(16, 22, 32, 0.7);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.prism-maker-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 163, 61, 0.45);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
}

.prism-maker-preview {
    height: 190px;
    padding: 1.25rem;
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--prism-border-neutral);
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        #0b111a;
    background-size: 24px 24px;
}

.prism-maker-card__copy {
    padding: 1.15rem;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.prism-maker-card__copy > span {
    color: var(--prism-gold-bright);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.prism-maker-card h3 {
    margin: 0.55rem 0 0.5rem;
    color: var(--prism-ink);
    font-size: 1.18rem;
}

.prism-maker-card p {
    margin: 0;
    color: var(--prism-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.prism-maker-card em {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--prism-cyan);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 850;
}

.prism-mini-chart {
    width: 100%;
    height: 125px;
    padding: 0.6rem 0.55rem 0;
    display: flex;
    align-items: end;
    gap: 0.55rem;
    border-bottom: 1px solid #465268;
}

.prism-mini-chart i {
    flex: 1;
    min-height: 12px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--prism-gold-bright), #c87526);
    box-shadow: 0 0 22px rgba(232, 163, 61, 0.14);
}

.prism-mini-diagram {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
}

.prism-mini-diagram b {
    padding: 0.7rem 0.5rem;
    border: 1px solid rgba(110, 231, 242, 0.3);
    border-radius: 8px;
    color: #d9fbff;
    background: rgba(110, 231, 242, 0.09);
    font-size: 0.59rem;
}

.prism-mini-diagram span,
.prism-mini-flow span {
    color: var(--prism-gold-bright);
}

.prism-mini-flow {
    display: grid;
    justify-items: center;
    gap: 0.27rem;
}

.prism-mini-flow b {
    min-width: 86px;
    padding: 0.48rem 0.6rem;
    border: 1px solid rgba(232, 163, 61, 0.34);
    border-radius: 8px;
    color: var(--prism-ink);
    background: rgba(232, 163, 61, 0.09);
    font-size: 0.62rem;
    text-align: center;
}

.prism-mini-flow b.is-decision {
    border-radius: 50%;
    border-color: rgba(110, 231, 242, 0.35);
    background: rgba(110, 231, 242, 0.08);
}

.prism-mini-card {
    width: 100%;
    min-height: 120px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(232, 163, 61, 0.34);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(232, 163, 61, 0.14), rgba(110, 231, 242, 0.06));
}

.prism-mini-card strong {
    color: var(--prism-gold-bright);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.07em;
}

.prism-mini-card span {
    margin-top: 0.35rem;
    color: #d6d7d8;
    font-size: 0.7rem;
    font-weight: 750;
}

.prism-story {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.7fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.prism-story__copy > p {
    max-width: 680px;
    margin: 1.3rem 0 0;
    color: var(--prism-muted);
    line-height: 1.7;
}

.prism-steps {
    margin: 2rem 0 1.2rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    list-style: none;
}

.prism-steps li {
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.8rem;
    border-bottom: 1px solid var(--prism-border-neutral);
}

.prism-steps li > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #17130c;
    background: var(--prism-gold);
    font-size: 0.7rem;
    font-weight: 900;
}

.prism-steps strong {
    display: block;
    color: var(--prism-ink);
    font-size: 0.88rem;
}

.prism-steps p {
    margin: 0.2rem 0 0;
    color: var(--prism-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.prism-text-link {
    color: var(--prism-cyan) !important;
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
}

.prism-text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.prism-story__image {
    position: relative;
    margin: 0;
}

.prism-story__image::before {
    position: absolute;
    z-index: -1;
    inset: 12% -10% -7% 8%;
    border-radius: 40%;
    content: "";
    background: rgba(92, 77, 230, 0.15);
    filter: blur(56px);
}

.prism-story__image img {
    width: 100%;
    max-height: 690px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.38);
}

.prism-story__image figcaption,
.prism-pack-workspace figcaption {
    margin-top: 0.65rem;
    color: var(--prism-muted);
    font-size: 0.68rem;
    text-align: center;
}

.prism-output-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.prism-output-card {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--prism-border-neutral);
    border-radius: 17px;
    background: rgba(16, 22, 32, 0.7);
}

.prism-output-card__image {
    aspect-ratio: 0.82 / 1;
    overflow: hidden;
    background: #e8edf2;
}

.prism-output-card img {
    /* contain: these cards showed 56% of the process guide and 70% of the comparison. */
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #F6F4F1;
    transition: transform 260ms ease;
}

.prism-output-card:hover img {
    transform: scale(1.025);
}

.prism-output-card figcaption {
    padding: 1rem;
    display: grid;
    gap: 0.35rem;
}

.prism-output-card figcaption span {
    color: var(--prism-gold-bright);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.prism-output-card figcaption strong {
    color: var(--prism-ink);
    font-size: 0.9rem;
}

.prism-pack-section {
    width: 100%;
    border-block: 1px solid var(--prism-border-neutral);
    background:
        radial-gradient(circle at 80% 45%, rgba(110, 231, 242, 0.08), transparent 32rem),
        var(--prism-bg-soft);
}

.prism-pack-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    align-items: center;
    gap: 2.4rem;
}

.prism-pack-workspace > figure {
    margin: 0;
}

.prism-pack-workspace > figure img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(110, 231, 242, 0.2);
    border-radius: 17px;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.34);
}

.prism-pack-workspace__copy {
    display: grid;
    gap: 0.9rem;
}

.prism-pack-workspace__copy > div {
    padding: 0.85rem 0;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0.7rem;
    border-bottom: 1px solid var(--prism-border-neutral);
}

.prism-pack-workspace__copy > div > span {
    color: var(--prism-gold-bright);
    font-size: 0.68rem;
    font-weight: 900;
}

.prism-pack-workspace__copy p {
    margin: 0;
    color: var(--prism-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.prism-pack-workspace__copy strong {
    margin-bottom: 0.22rem;
    display: block;
    color: var(--prism-ink);
    font-size: 0.88rem;
}

.prism-pack-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.prism-pack-grid figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--prism-border-neutral);
    border-radius: 15px;
    background: #111827;
}

.prism-pack-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.prism-pack-grid figcaption {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--prism-ink);
    background: rgba(6, 8, 13, 0.72);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    font-size: 0.72rem;
    font-weight: 800;
}

/* Campaign kit: one picture at each channel's shape. A frame's width comes from the channel's
   real size (inline --w / --h) at one shared height; max-width lets a wide frame shrink on a phone
   and aspect-ratio keeps its shape while it does. */
.prism-pack-grid--channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

.prism-pack-grid--channels figure {
    width: calc(var(--frame-height, 300px) * var(--w) / var(--h));
    max-width: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.prism-pack-grid--channels img {
    height: auto;
    aspect-ratio: var(--w) / var(--h);
    object-fit: contain;
    border-radius: 12px;
}

.prism-pack-grid--channels figcaption {
    position: static;
    margin-top: .6rem;
}

.prism-pack-sample-link {
    margin-top: 1.5rem;
    text-align: center;
}

.prism-use-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.prism-use-case-grid a {
    min-height: 290px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--prism-border-neutral);
    border-radius: 16px;
    background:
        linear-gradient(155deg, rgba(232, 163, 61, 0.08), transparent 48%),
        rgba(16, 22, 32, 0.62);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease;
}

.prism-use-case-grid a:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 163, 61, 0.45);
}

.prism-use-case-grid > a > span {
    color: var(--prism-gold-bright);
    font-size: 0.67rem;
    font-weight: 900;
}

.prism-use-case-grid h3 {
    max-width: 250px;
    margin: 3.2rem 0 0.75rem;
    color: var(--prism-ink);
    font-size: 1.45rem;
    line-height: 1.1;
}

.prism-use-case-grid p {
    margin: 0;
    color: var(--prism-muted);
    font-size: 0.82rem;
    line-height: 1.58;
}

.prism-use-case-grid em {
    margin-top: auto;
    padding-top: 1.3rem;
    color: var(--prism-cyan);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 850;
}

.prism-system {
    display: grid;
    grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.prism-system__visual {
    position: relative;
    height: 660px;
    overflow: hidden;
    border: 1px solid rgba(232, 163, 61, 0.27);
    border-radius: 18px;
    background: #e8edf2;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.35);
}

/* CONTAIN, not cover. A composed infographic is portrait — 1080x2352, an aspect of 0.46 —
   and this box is 660px tall and wider than it is high, so cover showed roughly the top
   quarter of the artifact and cut the rest. These pages exist to show what Prism produces;
   a quarter of it is not that. The paper tone is the artifact's own ground (DesignTokens
   .Prism paper #F6F4F1), so the matting reads as a mount rather than a gap. */
.prism-system__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #F6F4F1;
}

.prism-system__copy > h2 {
    font-size: clamp(2.2rem, 4.2vw, 4rem);
}

.prism-system__features {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.prism-system__features article {
    padding: 1rem;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0.65rem;
    border: 1px solid var(--prism-border-neutral);
    border-radius: 12px;
    background: rgba(16, 22, 32, 0.62);
}

.prism-system__features article > span {
    color: var(--prism-gold-bright);
    font-size: 0.75rem;
    font-weight: 900;
}

.prism-system__features h3 {
    margin: 0;
    color: var(--prism-ink);
    font-size: 0.87rem;
}

.prism-system__features p {
    margin: 0.32rem 0 0;
    color: var(--prism-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.prism-faq {
    display: grid;
    grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: start;
}

.prism-faq__heading {
    position: sticky;
    top: 100px;
}

.prism-faq__heading h2 {
    font-size: clamp(2.15rem, 4vw, 3.7rem);
    margin-bottom: 1.2rem;
}

.prism-faq__items {
    display: grid;
}

.prism-faq details {
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--prism-border-neutral);
}

.prism-faq summary {
    position: relative;
    padding-right: 2.2rem;
    color: var(--prism-ink);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.prism-faq summary::-webkit-details-marker {
    display: none;
}

.prism-faq summary::after {
    position: absolute;
    top: -0.1rem;
    right: 0;
    color: var(--prism-gold-bright);
    content: "+";
    font-size: 1.3rem;
}

.prism-faq details[open] summary::after {
    content: "−";
}

.prism-faq details p {
    max-width: 720px;
    margin: 0.75rem 0 0;
    color: var(--prism-muted);
    line-height: 1.65;
}

.prism-cta {
    padding: 2rem 0 5.5rem;
}

.prism-cta__inner {
    min-height: 340px;
    padding: clamp(2rem, 5vw, 4.5rem);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 20%, rgba(110, 231, 242, 0.13), transparent 28rem),
        radial-gradient(circle at 20% 120%, rgba(232, 163, 61, 0.16), transparent 30rem),
        #0e141e;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
}

.prism-cta h2 {
    max-width: 760px;
    margin: 0.8rem 0 0.85rem;
    color: var(--prism-ink);
    font-size: clamp(2.25rem, 4.5vw, 4.3rem);
    line-height: 1.01;
    letter-spacing: -0.055em;
}

.prism-cta p {
    max-width: 620px;
    margin: 0;
    color: var(--prism-muted);
    line-height: 1.6;
}

.prism-cta .prism-actions {
    flex-shrink: 0;
}

.prism-landing a:focus-visible,
.prism-landing summary:focus-visible {
    outline: 3px solid var(--prism-cyan);
    outline-offset: 4px;
}

@media (max-width: 1040px) {
    .prism-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
    }

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

    .prism-proof {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .prism-proof p {
        grid-column: 1 / -1;
        padding: 0.8rem 0 0;
        border-top: 1px solid var(--prism-border-neutral);
        border-left: 0;
    }
}

@media (max-width: 820px) {
    .prism-subnav__links {
        display: none;
    }

    .prism-subnav .prism-button {
        margin-left: auto;
    }

    .prism-hero,
    .prism-section--split,
    .prism-story,
    .prism-pack-workspace,
    .prism-system,
    .prism-faq {
        grid-template-columns: 1fr;
    }

    .prism-hero {
        padding-top: 4.5rem;
        gap: 4rem;
    }

    .prism-hero h1 {
        max-width: 680px;
    }

    .prism-heading-row {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

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

    .prism-system__visual {
        width: min(100%, 520px);
        height: 580px;
        margin-inline: auto;
    }

    .prism-faq__heading {
        position: static;
    }

    .prism-cta__inner {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 580px) {
    .prism-shell,
    .prism-subnav {
        width: min(100% - 1.2rem, 1240px);
    }

    .prism-subnav {
        min-height: 58px;
        padding-inline: 0.4rem;
    }

    .prism-subnav__brand {
        font-size: 0.8rem;
    }

    .prism-hero {
        min-height: auto;
        padding-block: 4rem 5.5rem;
    }

    .prism-hero h1 {
        font-size: clamp(2.75rem, 15vw, 4.25rem);
    }

    .prism-hero__checks {
        display: grid;
    }

    .prism-float-card--top {
        top: -1.5rem;
        right: -0.2rem;
    }

    .prism-float-card--bottom {
        bottom: -2.8rem;
        left: -0.2rem;
    }

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

    .prism-compare,
    .prism-maker-grid,
    .prism-output-grid,
    .prism-pack-grid,
    .prism-use-case-grid,
    .prism-system__features {
        grid-template-columns: 1fr;
    }

    .prism-compare article {
        min-height: auto;
    }

    .prism-pack-grid--channels figure {
        --frame-height: 220px;
    }

    .prism-story__image img,
    .prism-system__visual {
        max-height: 540px;
    }

    .prism-system__visual {
        height: 520px;
    }

    .prism-cta__inner {
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prism-landing *,
    .prism-landing *::before,
    .prism-landing *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}