/* Direction A: refine. Keeps the current layout, tightens hierarchy and calms the decoration. */
.kh-h1{margin:0;font-weight:400}
.kh-hero-copy .lead{margin-top:26px}
.kh-wash-1{right:-14vw;top:-30px;width:min(52vw,640px);opacity:.28;transform:scaleX(-1)}
.kh-wash-2{right:-16vw;top:30%;width:min(44vw,560px);opacity:.22}
.kh-wash-3{left:-8vw;top:-60px;width:min(26vw,320px);opacity:.28}
/* Video keeps its original 9:16 frame, uncropped */
.kh-hero .film video{aspect-ratio:9/16;object-fit:contain;max-width:400px;margin:0 auto;border-radius:22px;background:#dce4d8}
.card-h{font-family:var(--font-headline);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.15;color:var(--text-primary)}
.kh-principle-grid .principle{background:rgba(255,255,255,.55);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.kh-scope .card{padding:clamp(28px,3.4vw,40px)}
.kh-flow .step{background:rgba(255,255,255,.7)}
.kh-access form{background:rgba(255,255,255,.5);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px)}
@media (max-width:900px){
  .kh-wash-1,.kh-wash-2{opacity:.18}
}

/* A2 additions: subtle painted underlines under key headings, and softer divider strokes */
.kh-brush-ul{position:relative;display:inline-block;white-space:nowrap}
.kh-brush-ul::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.3em;opacity:.38;background:url("../img/brush/underline-1.svg") 0 0/100% 100% no-repeat;z-index:-1;clip-path:inset(0 100% 0 0)}
.js-motion .is-in .kh-brush-ul::after{clip-path:inset(0 0 0 0);transition:clip-path 3.2s cubic-bezier(.3,.1,.2,1)}
.brush-divider::before{opacity:.6}

/* A2: one faint painted stroke behind the "is / is not" cards, centred on the card row, painting in as the cards arrive */
.kh-scope-row{position:relative}
.kh-scope-row::before{content:"";position:absolute;left:-4vw;right:-4vw;top:50%;height:min(240px,75%);transform:translateY(-50%);background:url("../img/brush/stroke-warm.svg") center/100% 100% no-repeat;opacity:.3;z-index:0;pointer-events:none}
.kh-scope-row > .grid-2{position:relative;z-index:1}
.js-motion .kh-scope-row::before{clip-path:inset(0 100% 0 0);transition:clip-path 4.6s cubic-bezier(.3,.1,.2,1)}
.js-motion .kh-scope-row.is-in::before{clip-path:inset(0 0 0 0)}

/* A2 mobile: cards stack into one column, so the single stroke would fall on the seam between them. Hide it below tablet width. */
@media (max-width:760px){
  .kh-scope-row::before{display:none}
}
@media (max-width:480px){.kh-brush-ul{font-size:.9em}}