:root {
    --golf-bg: #f7f8fa;
    --golf-surface: rgba(255, 255, 255, .88);
    --golf-ink: #20242a;
    --golf-muted: #727984;
    --golf-line: rgba(45, 52, 61, .13);
    --golf-signal: #60758e;
    --kwip-pink: #ef2b81;
    --kwip-red: #e83b3f;
    --kwip-orange: #f08319;
    --kwip-green: #26a66a;
    --kwip-blue: #2474df;
}

.app-main { background: var(--golf-bg); color: var(--golf-ink); min-height: 70vh; }
.app-container { margin: 0 auto; max-width: 1120px; padding-inline: 2rem; }

.app-spectrum {
    display: flex;
    gap: .35rem;
}

.app-spectrum span { border-radius: 99px; display: block; height: .35rem; width: 1.4rem; }
.app-spectrum span:nth-child(1) { background: var(--kwip-pink); }
.app-spectrum span:nth-child(2) { background: var(--kwip-red); }
.app-spectrum span:nth-child(3) { background: var(--kwip-orange); }
.app-spectrum span:nth-child(4) { background: var(--kwip-green); }
.app-spectrum span:nth-child(5) { background: var(--kwip-blue); }

.app-hero {
    background:
        radial-gradient(circle at 78% 40%, rgba(96, 117, 142, .09), transparent 25%),
        linear-gradient(180deg, #fff, var(--golf-bg));
    border-bottom: 1px solid var(--golf-line);
    overflow: hidden;
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    position: relative;
}

.app-hero::after {
    border: 1px solid rgba(96, 117, 142, .14);
    border-radius: 50%;
    content: "";
    height: 34rem;
    position: absolute;
    right: -12rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34rem;
}

.app-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(3rem, 8vw, 7rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
    position: relative;
    z-index: 1;
}

.app-label { color: var(--golf-signal); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-hero h1 { font-size: clamp(3.2rem, 7.5vw, 6.1rem); letter-spacing: -.055em; line-height: .95; margin: 1.25rem 0 1.5rem; max-width: 10ch; }
.app-lead { color: var(--golf-muted); font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.55; max-width: 42rem; }
.app-commercial { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.app-commercial strong { font-size: 1rem; }
.app-commercial span { color: var(--golf-muted); font-size: .82rem; }

.app-icon-stage {
    align-items: center;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.app-icon-stage::before,
.app-icon-stage::after { border: 1px solid var(--golf-line); border-radius: 50%; content: ""; position: absolute; }
.app-icon-stage::before { inset: 3%; }
.app-icon-stage::after { inset: 15%; }
.app-icon-stage img {
    aspect-ratio: 1 / 1;
    border-radius: 22%;
    flex: 0 0 auto;
    object-fit: contain;
    position: relative;
    width: 62%;
    z-index: 2;
}

.app-section { border-bottom: 1px solid var(--golf-line); padding: clamp(4rem, 8vw, 6.5rem) 0; }
.app-section-head { display: grid; gap: 2rem; grid-template-columns: 11rem 1fr; margin-bottom: 3rem; }
.app-section-head h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 18ch; }
.app-section-head p { color: var(--golf-muted); max-width: 44rem; }

.app-feature-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: var(--golf-line); border: 1px solid var(--golf-line); }
.app-feature { background: var(--golf-surface); min-height: 20rem; padding: 2rem; }
.app-feature .index { color: var(--golf-signal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.app-feature h3 { font-size: 1.4rem; margin: 3.5rem 0 .75rem; }
.app-feature p { color: var(--golf-muted); font-size: .94rem; }

.app-evidence { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.app-evidence article { background: #fff; border: 1px solid var(--golf-line); padding: 2rem; }
.app-evidence h3 { font-size: 1.35rem; margin: .7rem 0 1rem; }
.app-evidence ul { color: var(--golf-muted); margin: 0; padding-left: 1.1rem; }
.app-evidence li + li { margin-top: .55rem; }

.app-measure-strip { display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
.app-measure-strip div { background: #fff; border: 1px solid var(--golf-line); padding: 1.2rem; }
.app-measure-strip strong { display: block; font-size: .78rem; letter-spacing: .04em; margin-bottom: .35rem; text-transform: uppercase; }
.app-measure-strip span { color: var(--golf-muted); font-size: .83rem; }

.app-callout { background: #fff; border: 1px solid var(--golf-line); display: grid; gap: 2rem; grid-template-columns: 1fr auto; padding: clamp(2rem, 5vw, 4rem); }
.app-callout h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .75rem; }
.app-callout p { color: var(--golf-muted); max-width: 42rem; }
.app-status { align-self: center; border-left: 1px solid var(--golf-line); padding-left: 2rem; }
.app-status strong { display: block; font-size: 1.35rem; }
.app-status span { color: var(--golf-muted); font-size: .8rem; }

.apps-index-hero { border-bottom: 1px solid var(--golf-line); padding: 6rem 0 4.5rem; }
.apps-index-hero h1 { font-size: clamp(3.3rem, 8vw, 6rem); margin: 1rem 0 1.4rem; }
.apps-index-hero p { color: var(--golf-muted); font-size: 1.25rem; max-width: 46rem; }
.apps-list { padding: 4rem 0 6rem; }
.apps-card { align-items: center; background: #fff; border: 1px solid var(--golf-line); display: grid; gap: 2rem; grid-template-columns: 9rem 1fr auto; padding: 2rem; text-decoration: none; }
.apps-card:hover { border-color: var(--golf-signal); }
.apps-card img {
    aspect-ratio: 1 / 1;
    border-radius: 22%;
    object-fit: contain;
    width: 9rem;
}
.apps-card h2 { font-size: 2rem; margin-bottom: .65rem; }
.apps-card p { color: var(--golf-muted); max-width: 42rem; }
.apps-card-meta { color: var(--golf-signal); font-size: .8rem; font-weight: 700; text-align: right; }

.policy-hero { border-bottom: 1px solid var(--golf-line); padding: 5rem 0 3rem; }
.policy-hero h1 { font-size: clamp(2.8rem, 7vw, 4.8rem); margin: 1rem 0; }
.policy-hero p { color: var(--golf-muted); font-size: 1.1rem; max-width: 44rem; }
.policy-body { margin: 0 auto; max-width: 48rem; padding: 4rem 2rem 6rem; }
.policy-body > * + * { margin-top: 1.35rem; }
.policy-body h2 { font-size: 1.6rem; margin-top: 3rem; }
.policy-body h3 { font-size: 1.15rem; margin-top: 2rem; }
.policy-body p, .policy-body li { color: #4f5661; }
.policy-body a { color: #425d7a; text-underline-offset: 3px; }
.policy-body .policy-date { color: var(--golf-muted); font-size: .82rem; }

.app-footer { background: #fff; border-top: 1px solid var(--golf-line); padding: 2.5rem 0; }
.app-footer-inner { align-items: center; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.app-footer a { color: var(--golf-muted); font-size: .82rem; text-decoration: none; }
.app-footer a:hover { color: var(--golf-ink); }
.app-footer small { color: var(--golf-muted); }

@media (max-width: 800px) {
    .app-container { padding-inline: 1.25rem; }
    .app-hero-grid, .app-section-head, .app-callout { grid-template-columns: 1fr; }
    .app-hero h1 { max-width: 12ch; }
    .app-icon-stage { margin: 0 auto; max-width: 22rem; width: 100%; }
    .app-feature-grid, .app-measure-strip { grid-template-columns: 1fr; }
    .app-feature { min-height: 0; }
    .app-feature h3 { margin-top: 2rem; }
    .app-evidence { grid-template-columns: 1fr; }
    .app-status { border-left: 0; border-top: 1px solid var(--golf-line); padding: 1.5rem 0 0; }
    .apps-card { grid-template-columns: 5rem 1fr; }
    .apps-card img { width: 5rem; }
    .apps-card-meta { grid-column: 2; text-align: left; }
}