/* ============================================================
   KLF Course Finder — front-end styles
   Base brand: Poppins · #d8e0ff · #e94d80 · #243391
   The dialog is scoped to #klf-finder so theme rules for buttons, links and headings (pink borders, square
   hover, nowrap, Elementor heading sizes) cannot leak in. It is re-themed per school via --kc1 / --kc2
   (set by finder.js; --kc1 is always dark enough to carry white text). Animations use transform / opacity only.
   ============================================================ */
:root{
  --klf-pink:#e94d80;--klf-pink-deep:#c73868;--klf-navy:#243391;
  --klf-n0:#fff;--klf-n50:#f6f7fb;--klf-n100:#eef0f6;--klf-n200:#e3e6f0;--klf-n300:#cfd4e4;--klf-n500:#6b7194;--klf-n600:#4f5578;--klf-n700:#3a4066;--klf-n900:#141d54;
  --klf-font:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  --klf-ease:cubic-bezier(.2,.8,.2,1);--klf-spring:cubic-bezier(.2,1,.24,1);
  --klf-sh1:0 1px 2px rgba(20,29,84,.06),0 1px 3px rgba(20,29,84,.04);
  --klf-sh2:0 2px 4px rgba(20,29,84,.04),0 12px 28px -10px rgba(20,29,84,.18);
}

/* ---------- hero card (same look as the homepage template, for any other page) ---------- */
.klf-finder-card{font-family:var(--klf-font);width:100%;max-width:430px;background:#fff;border:1px solid var(--klf-n200);border-radius:24px;box-shadow:0 24px 60px -24px rgba(20,29,84,.35);padding:clamp(1.25rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1.4rem;box-sizing:border-box}
.klf-finder-card *,.klf-finder-card *::before,.klf-finder-card *::after{box-sizing:border-box}
.klf-fgroup{border:0;margin:0;padding:0;min-width:0}
.klf-flabel{display:block;padding:0;margin:0 0 .75rem;color:var(--klf-pink);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.klf-chips{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.klf-chips.chips-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.klf-chip{position:relative;display:flex;align-items:center;justify-content:center;gap:.4rem;min-width:0;min-height:44px;font-weight:600;font-size:.76rem;line-height:1.2;color:var(--klf-navy);background:#f4f6ff;border:1.5px solid transparent;border-radius:12px;padding:.6rem .5rem;cursor:pointer;text-align:center;transition:background-color .2s,color .2s,box-shadow .2s,opacity .2s}
.klf-chip>span{min-width:0;overflow-wrap:break-word}
.klf-chips.chips-2 .klf-chip{justify-content:flex-start;padding:.7rem .8rem;text-align:left}
.klf-chip svg{width:15px;height:15px;flex:none;opacity:.45}
.klf-chip:hover{background:#e9edff}
.klf-chip.is-active{background:var(--klf-pink);border-color:var(--klf-pink);color:#fff;box-shadow:0 8px 18px -8px rgba(233,77,128,.7)}
.klf-chip.is-active svg{opacity:1;color:#fff}
.klf-chip.is-disabled,.klf .chip.klf-chip.is-disabled{opacity:.38;cursor:not-allowed;background:#f4f6ff;color:var(--klf-navy);box-shadow:none;border-color:transparent}
.klf-chip-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}
.klf-chip:has(.klf-chip-input:focus-visible){outline:3px solid var(--klf-navy);outline-offset:2px}
.klf-finder-card .klf-explore{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:100%;margin-top:.4rem;padding:1rem;border:0;border-radius:100px;background:var(--klf-pink);color:#fff;font:600 .8rem/1.2 var(--klf-font);letter-spacing:.1em;text-transform:uppercase;white-space:normal;cursor:pointer;box-shadow:0 14px 30px -14px rgba(233,77,128,.6);transition:transform .4s var(--klf-spring),background-color .3s}
.klf-finder-card .klf-explore svg{width:16px;height:16px;flex:none}
.klf-finder-card .klf-explore:hover{background:var(--klf-pink-deep);color:#fff;transform:translateY(-2px)}
.klf-finder-card .klf-explore,.klf-finder-card .klf-explore:is(:hover,:focus,:active),.klf-finder-card .klf-explore *{color:#fff!important}
.klf-chip.is-active,.klf-chip.is-active *{color:#fff!important}
.klf-finder-card .klf-explore:focus-visible{outline:3px solid var(--klf-navy);outline-offset:3px}
.klf-finder-note{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.82rem;color:var(--klf-n500)}
.klf-finder-note svg{width:15px;height:15px;color:var(--klf-pink);flex:none}
@media (max-width:480px){.klf-chips.chips-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- crawlable course list (SEO) ---------- */
.klf-seo-list{font-family:var(--klf-font);margin:1.4rem 0 0;max-width:600px;font-size:.9rem;color:var(--klf-n500)}
.klf-seo-list summary{cursor:pointer;font-weight:600;color:var(--klf-navy);list-style:none;display:flex;align-items:center;gap:.5rem}
.klf-seo-list summary::-webkit-details-marker{display:none}
.klf-seo-list summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .3s}
.klf-seo-list[open] summary::before{transform:rotate(45deg)}
.klf-seo-list h3{font-size:.95rem;color:var(--klf-navy);margin:1rem 0 .3rem;font-weight:600}
.klf-seo-list ul{margin:0;padding:0;list-style:none;columns:2;column-gap:2rem}
.klf-seo-list li{margin:0 0 .25rem;break-inside:avoid}
.klf-seo-list a{color:var(--klf-n700);text-decoration:none;border-bottom:1px solid var(--klf-n200)}
.klf-seo-list a:hover{color:var(--klf-pink);border-color:var(--klf-pink)}
@media (max-width:560px){.klf-seo-list ul{columns:1}}

/* =========================================================
   Dialog
   ========================================================= */
html.klf-modal-open{overflow:hidden}
#klf-finder{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vh,32px) clamp(10px,3vw,32px);font-family:var(--klf-font);font-size:16px;line-height:1.55;color:var(--klf-n900);-webkit-font-smoothing:antialiased;
  --kc1:var(--klf-navy);--kc2:var(--klf-pink);--kc1-soft:rgba(36,51,145,.12);--kc1-tint:rgba(36,51,145,.06);--kc1-glow:rgba(36,51,145,.35)}
#klf-finder[hidden]{display:none}

/* reset: neutralise theme styles inside the dialog (ID scope out-ranks theme selectors; :where keeps it overridable) */
#klf-finder :where(*,*::before,*::after){box-sizing:border-box}
#klf-finder :where(h2,h3,h4,h5,p,ul,ol,li){margin:0;padding:0;list-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
#klf-finder :where(button),#klf-finder :where(button):hover,#klf-finder :where(button):focus,#klf-finder :where(button):active,
#klf-finder :where(a),#klf-finder :where(a):hover,#klf-finder :where(a):focus,#klf-finder :where(a):active{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none;text-align:inherit;white-space:normal;min-height:0;min-width:0;width:auto;height:auto;line-height:inherit;cursor:pointer;outline:none}
#klf-finder button:focus-visible,#klf-finder a:focus-visible{outline:2px solid var(--kc1);outline-offset:2px}
#klf-finder :where([tabindex="-1"]):focus{outline:none}
#klf-finder svg{display:block}

#klf-finder .klf-modal-backdrop{position:absolute;inset:0;background:rgba(10,14,40,.55);opacity:0;transition:opacity .35s ease}
#klf-finder.is-open .klf-modal-backdrop{opacity:1}
#klf-finder .klf-modal-card{position:relative;display:flex;flex-direction:column;width:min(1040px,100%);height:min(820px,100%);background:#fff;border-radius:20px;box-shadow:0 40px 100px -30px rgba(10,14,40,.55),0 0 0 1px rgba(20,29,84,.05);overflow:hidden;outline:none;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .3s ease,transform .5s var(--klf-spring)}
#klf-finder.is-open .klf-modal-card{opacity:1;transform:none}

/* header: brand · steps · close */
#klf-finder .klf-modal-head{flex:none;display:flex;align-items:center;gap:20px;padding:14px 16px 14px 24px;border-bottom:1px solid var(--klf-n100)}
#klf-finder .klf-brand{display:flex;align-items:center;gap:10px;min-width:0;font-size:.95rem;font-weight:600;color:var(--klf-n900);white-space:nowrap}
#klf-finder .klf-brand [data-klf-brand]{overflow:hidden;text-overflow:ellipsis}
#klf-finder .klf-brand-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--kc1-brand,var(--kc1));box-shadow:0 0 0 4px var(--kc1-soft);transition:background-color .4s,box-shadow .4s}
#klf-finder .klf-steps{flex:1;min-width:0}
#klf-finder .klf-steps ol{display:flex;justify-content:center;gap:6px}
#klf-finder .klf-steps li{flex:0 1 210px;min-width:0}
#klf-finder .klf-step{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:6px 12px 6px 6px;border-radius:12px;color:var(--klf-n900);text-align:left;transition:background-color .2s}
#klf-finder .klf-step:hover:not(:disabled){background:var(--klf-n50)}
#klf-finder .klf-step:disabled{cursor:default}
#klf-finder .klf-step:disabled .klf-step-text{opacity:.5}
#klf-finder .klf-step[aria-current="step"]{background:var(--kc1-tint)}
#klf-finder .klf-step-num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--klf-n300);font-size:.75rem;font-weight:600;color:var(--klf-n600);transition:background-color .3s,border-color .3s,color .3s}
#klf-finder .klf-step.is-done .klf-step-num{background:var(--kc1);border-color:var(--kc1);color:#fff}
#klf-finder .klf-step[aria-current="step"] .klf-step-num{border-color:var(--kc1);color:var(--kc1);background:#fff}
#klf-finder .klf-step-num svg{width:13px;height:13px;stroke-width:3}
#klf-finder .klf-step-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#klf-finder .klf-step-text small{font-size:.66rem;font-weight:500;color:var(--klf-n500)}
#klf-finder .klf-step-text b{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#klf-finder .klf-close{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--klf-n600);transition:background-color .2s,color .2s,transform .3s var(--klf-spring)}
#klf-finder .klf-close:hover{background:var(--klf-n100);color:var(--klf-n900);transform:rotate(90deg)}
#klf-finder .klf-close svg{width:18px;height:18px}

/* body + screens */
#klf-finder .klf-modal-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;background:#fff}
#klf-finder .klf-screen[hidden]{display:none}
@keyframes klfInRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes klfInLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes klfIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes klfRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes klfKen{from{transform:scale(1.12)}to{transform:scale(1.02)}}
#klf-finder .klf-in-right{animation:klfInRight .45s var(--klf-ease) both}
#klf-finder .klf-in-left{animation:klfInLeft .45s var(--klf-ease) both}
#klf-finder .klf-in{animation:klfIn .45s var(--klf-ease) both}

/* footer */
#klf-finder .klf-modal-foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid var(--klf-n100);background:#fff}
#klf-finder .klf-modal-foot[hidden]{display:none}
#klf-finder .klf-modal-foot [data-klf-back][hidden]{display:inline-flex;visibility:hidden}

/* buttons */
#klf-finder .klf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;font-size:.9rem;font-weight:600;line-height:1.2;text-align:center;transition:background-color .2s,border-color .2s,color .2s,box-shadow .25s,transform .3s var(--klf-spring)}
#klf-finder .klf-btn svg{flex:none;width:16px;height:16px;transition:transform .3s var(--klf-spring)}
#klf-finder .klf-btn:hover svg{transform:translateX(3px)}
#klf-finder .klf-btn[data-klf-back]:hover svg{transform:translateX(-3px)}
#klf-finder .klf-btn:disabled{opacity:.4;cursor:not-allowed}
#klf-finder .klf-btn-primary{background:var(--kc1);color:#fff;box-shadow:0 6px 16px -8px var(--kc1-glow)}
#klf-finder .klf-btn-primary:hover:not(:disabled){background:var(--kc1);color:#fff;box-shadow:0 10px 22px -8px var(--kc1-glow);transform:translateY(-1px)}
/* white text on every dark or school-coloured surface, whatever the theme says about a / button / span colours */
#klf-finder .klf-btn-primary,#klf-finder .klf-btn-primary:is(:hover,:focus,:active,:visited),#klf-finder .klf-btn-primary *{color:#fff!important}
#klf-finder .klf-btn-primary,#klf-finder .klf-btn-primary:is(:hover,:focus,:active){background-color:var(--kc1)!important}
#klf-finder .klf-badge-solid,#klf-finder .klf-step.is-done .klf-step-num,#klf-finder .klf-option.is-selected .klf-option-ic,#klf-finder .klf-option.is-selected .klf-option-check,
#klf-finder .klf-city-chip[aria-pressed="true"],#klf-finder .klf-city-chip[aria-pressed="true"] *,
#klf-finder .klf-r-hero-inner :is(h3,p,span,b,li,small):not(.klf-summary-edit):not(.klf-summary-edit *),#klf-finder .klf-summary-item,
#klf-finder .klf-other-name,#klf-finder .klf-other-name *{color:#fff!important}
#klf-finder .klf-summary-edit,#klf-finder .klf-summary-edit *{color:var(--klf-n900)!important}
#klf-finder .klf-btn-ghost{color:var(--klf-n700);border:1px solid var(--klf-n200);background:#fff}
#klf-finder .klf-btn-ghost:hover{background:var(--klf-n50);border-color:var(--klf-n300);color:var(--klf-n900)}
#klf-finder .klf-btn-text{min-height:0;padding:0;border-radius:0;color:var(--klf-n900);font-size:.86rem}
#klf-finder .klf-btn-text:hover{color:var(--kc1)}
#klf-finder .klf-course-cta .klf-btn{min-height:40px;padding:0 18px;font-size:.84rem}
#klf-finder .klf-link{display:inline-flex;align-items:center;gap:6px;color:var(--klf-n600);font-size:.85rem;font-weight:500;transition:color .2s}
#klf-finder .klf-link:hover{color:var(--klf-n900)}
#klf-finder .klf-link svg{width:15px;height:15px}
#klf-finder .klf-ic{display:inline-flex;flex:none}
#klf-finder .klf-ic svg{width:1.1em;height:1.1em}

/* =========================================================
   Questions
   ========================================================= */
#klf-finder .klf-screen-question{max-width:900px;margin:0 auto;padding:clamp(24px,4.5vw,48px) clamp(18px,4.5vw,48px) 32px}
#klf-finder .klf-q-head{margin-bottom:clamp(20px,3vw,28px)}
#klf-finder .klf-q-num{display:block;margin-bottom:6px;font-size:.78rem;font-weight:500;color:var(--klf-n500)}
#klf-finder .klf-q-title{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--klf-n900)}
#klf-finder .klf-q-help{margin-top:6px;max-width:60ch;font-size:.92rem;color:var(--klf-n500)}
#klf-finder .klf-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px}
@keyframes klfOpt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* radio cards */
#klf-finder .klf-option{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-width:0;min-height:68px;padding:14px 48px 14px 14px;background:#fff;border:1px solid var(--klf-n200);border-radius:14px;box-shadow:var(--klf-sh1);font-size:.93rem;font-weight:500;line-height:1.35;color:var(--klf-n900);text-align:left;transition:border-color .2s,box-shadow .25s,transform .3s var(--klf-spring),background-color .2s;animation:klfOpt .4s var(--klf-ease) both;animation-delay:calc(var(--i,0) * 40ms)}
#klf-finder .klf-option:hover{border-color:var(--klf-n300);box-shadow:var(--klf-sh2);transform:translateY(-1px)}
#klf-finder .klf-option-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--klf-n50);color:var(--klf-n700);transition:background-color .25s,color .25s}
#klf-finder .klf-option-ic svg{width:20px;height:20px}
#klf-finder .klf-option-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#klf-finder .klf-option-label{min-width:0;overflow-wrap:break-word}
#klf-finder .klf-option-sub{font-size:.76rem;font-weight:400;color:var(--klf-n500)}
#klf-finder .klf-option-check{position:absolute;top:50%;right:16px;display:grid;place-items:center;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid var(--klf-n300);background:#fff;color:transparent;transition:background-color .2s,border-color .2s,color .2s,transform .3s var(--klf-spring)}
#klf-finder .klf-option-check svg{width:11px;height:11px;stroke-width:3.5}
#klf-finder .klf-option.is-selected{border-color:var(--kc1);background:var(--kc1-tint);box-shadow:0 0 0 1px var(--kc1)}
#klf-finder .klf-option.is-selected .klf-option-ic{background:var(--kc1);color:#fff}
#klf-finder .klf-option.is-selected .klf-option-check{background:var(--kc1);border-color:var(--kc1);color:#fff;transform:scale(1.08)}
#klf-finder .klf-option.is-disabled{cursor:not-allowed;opacity:.5;box-shadow:none;transform:none}
#klf-finder .klf-option.is-disabled:hover{border-color:var(--klf-n200)}

/* destination photo tiles */
#klf-finder .klf-options-tiles{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:14px}
#klf-finder .klf-tile{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;overflow:hidden}
#klf-finder .klf-tile-media{position:relative;display:block;aspect-ratio:16/10;background:var(--oc,var(--klf-n100)) center/cover no-repeat;transition:transform .6s var(--klf-ease),filter .3s}
#klf-finder .klf-tile:hover .klf-tile-media{transform:scale(1.04)}
#klf-finder .klf-tile-body{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;background:inherit}
#klf-finder .klf-tile .klf-option-label{font-size:.98rem;font-weight:600}
#klf-finder .klf-tile .klf-option-check{top:12px;right:12px;margin:0;border-color:#fff;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(10,14,40,.25)}
#klf-finder .klf-tile.is-selected .klf-option-check{background:var(--kc1);border-color:#fff}
#klf-finder .klf-tile.is-disabled .klf-tile-media{filter:grayscale(1)}

/* =========================================================
   Result
   ========================================================= */
#klf-finder .klf-screen-result{padding-bottom:32px}

/* hero */
#klf-finder .klf-r-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(300px,42vh,400px);overflow:hidden;background:#0e1433;color:#fff;isolation:isolate}
#klf-finder .klf-r-hero-bg{position:absolute;inset:0;z-index:-2;background:var(--kc1) center/cover no-repeat;animation:klfKen 12s var(--klf-ease) both;will-change:transform}
#klf-finder .klf-r-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,14,40,.88) 0%,rgba(10,14,40,.66) 42%,rgba(10,14,40,.12) 100%),linear-gradient(0deg,rgba(10,14,40,.55) 0%,rgba(10,14,40,0) 45%)}
#klf-finder .klf-r-hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;max-width:680px;padding:clamp(28px,4.5vw,44px) clamp(20px,4.5vw,44px)}
#klf-finder .klf-r-hero-inner>*{animation:klfRise .6s var(--klf-ease) both}
#klf-finder .klf-r-hero-inner>:nth-child(2){animation-delay:.06s}
#klf-finder .klf-r-hero-inner>:nth-child(3){animation-delay:.12s}
#klf-finder .klf-r-hero-inner>:nth-child(4){animation-delay:.18s}
#klf-finder .klf-r-hero-inner>:nth-child(5){animation-delay:.24s}
#klf-finder .klf-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
#klf-finder .klf-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kc1-brand,var(--kc1));box-shadow:0 0 0 2px #fff}
#klf-finder .klf-r-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
#klf-finder .klf-r-city{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700;line-height:1.05;letter-spacing:-.025em;color:#fff}
#klf-finder .klf-r-school{display:flex;flex-direction:column;padding-left:18px;border-left:1px solid rgba(255,255,255,.35);line-height:1.25}
#klf-finder .klf-r-school b{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
#klf-finder .klf-r-school span{font-size:.78rem;opacity:.75}
#klf-finder .klf-r-tagline{max-width:48ch;font-size:clamp(.92rem,1.3vw,1.02rem);opacity:.92}
#klf-finder .klf-facts{display:flex;flex-wrap:wrap;gap:4px 0;font-size:.8rem;opacity:.85}
#klf-finder .klf-facts li+li::before{content:"·";margin:0 10px;opacity:.7}
#klf-finder .klf-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#klf-finder .klf-summary-item{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:7px 8px 7px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:.82rem;font-weight:500;line-height:1.3;transition:background-color .2s,border-color .2s}
#klf-finder .klf-summary-item:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
#klf-finder .klf-summary-text{min-width:0}
#klf-finder .klf-summary-edit{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:#fff;color:var(--klf-n900);font-size:.7rem;font-weight:600}
#klf-finder .klf-summary-edit svg{width:11px;height:11px}

/* compare cities: sticky tab bar */
#klf-finder .klf-city-switch{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:12px clamp(18px,4.5vw,44px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--klf-n100)}
#klf-finder .klf-city-switch-label{flex:none;font-size:.78rem;font-weight:500;color:var(--klf-n500)}
#klf-finder .klf-city-chips{display:flex;gap:6px;min-width:0;overflow-x:auto;padding:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#klf-finder .klf-city-chips::-webkit-scrollbar{display:none}
#klf-finder .klf-city-chip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--klf-n200);background:#fff;color:var(--klf-n700);font-size:.84rem;font-weight:500;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
#klf-finder .klf-city-chip:hover{border-color:var(--klf-n300);color:var(--klf-n900)}
#klf-finder .klf-city-dot{width:8px;height:8px;border-radius:50%;background:var(--oc)}
#klf-finder .klf-city-chip[aria-pressed="true"]{background:var(--klf-n900);border-color:var(--klf-n900);color:#fff;cursor:default}

#klf-finder .klf-notice{display:flex;gap:14px;max-width:880px;margin:24px clamp(18px,4.5vw,44px) 0;padding:16px 18px;border:1px solid var(--klf-n200);border-radius:14px;background:var(--klf-n50);font-size:.9rem;color:var(--klf-n700)}
#klf-finder .klf-notice>.klf-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--kc1);box-shadow:var(--klf-sh1)}
#klf-finder .klf-notice>.klf-ic svg{width:16px;height:16px}
#klf-finder .klf-notice .klf-city-chips{flex-wrap:wrap;overflow:visible;margin-top:10px}

/* sections */
#klf-finder .klf-r-section{max-width:968px;padding:clamp(24px,3.5vw,36px) clamp(18px,4.5vw,44px) 0}
#klf-finder .klf-r-head{margin-bottom:14px}
#klf-finder .klf-r-h{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;color:var(--klf-n900)}
#klf-finder .klf-r-sub{margin-top:2px;font-size:.88rem;color:var(--klf-n500)}
#klf-finder .klf-note{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding:12px 14px;border-radius:12px;background:var(--klf-n50);font-size:.86rem;color:var(--klf-n700)}
#klf-finder .klf-note .klf-ic{color:var(--kc1);margin-top:2px}

/* course cards */
#klf-finder .klf-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
#klf-finder .klf-course{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--klf-n200);border-radius:16px;box-shadow:var(--klf-sh1);overflow:hidden;transition:box-shadow .25s,transform .3s var(--klf-spring),border-color .2s;animation:klfRise .5s var(--klf-ease) both;animation-delay:calc(var(--i,0) * 60ms + .1s)}
#klf-finder .klf-course:hover{border-color:var(--klf-n300);box-shadow:var(--klf-sh2);transform:translateY(-2px)}
#klf-finder .klf-course-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;min-width:0;padding:18px 20px 20px}
#klf-finder .klf-badge{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--kc1-tint);color:var(--kc1);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#klf-finder .klf-badge-solid{background:var(--kc1);color:#fff}
#klf-finder .klf-course-title{font-size:1rem;font-weight:600;line-height:1.3;color:var(--klf-n900);overflow-wrap:break-word}
#klf-finder .klf-course-excerpt{font-size:.86rem;line-height:1.55;color:var(--klf-n600);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#klf-finder .klf-meta{display:flex;flex-wrap:wrap;gap:6px}
#klf-finder .klf-meta li{padding:3px 9px;border-radius:6px;background:var(--klf-n50);font-size:.74rem;font-weight:500;color:var(--klf-n600)}
#klf-finder .klf-course-cta{margin-top:auto;padding-top:6px}
#klf-finder .klf-course.is-top{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
#klf-finder .klf-course.is-top .klf-course-img{position:relative;min-height:240px;background:var(--klf-n100) center/cover no-repeat}
#klf-finder .klf-course.is-top .klf-course-img .klf-badge{position:absolute;top:14px;left:14px;box-shadow:0 4px 12px rgba(10,14,40,.25)}
#klf-finder .klf-course.is-top .klf-course-body{justify-content:center;gap:10px;padding:clamp(20px,3vw,32px)}
#klf-finder .klf-course.is-top .klf-course-title{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;letter-spacing:-.015em}
#klf-finder .klf-course.is-top .klf-course-excerpt{-webkit-line-clamp:5;font-size:.92rem}
#klf-finder .klf-course.is-top .klf-course-cta{margin-top:6px}
#klf-finder .klf-course.is-top:not(:has(.klf-course-img)){grid-template-columns:1fr}

/* other cities: photo cards */
#klf-finder .klf-others{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px}
#klf-finder .klf-other{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--klf-n200);border-radius:16px;box-shadow:var(--klf-sh1);overflow:hidden;text-align:left;transition:box-shadow .25s,transform .3s var(--klf-spring),border-color .2s;animation:klfRise .5s var(--klf-ease) both;animation-delay:calc(var(--i,0) * 70ms + .1s)}
#klf-finder .klf-other:hover{border-color:var(--klf-n300);box-shadow:var(--klf-sh2);transform:translateY(-2px)}
#klf-finder .klf-other-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--oc,var(--klf-n100)) center/cover no-repeat}
#klf-finder .klf-other-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,40,.7) 0%,rgba(10,14,40,0) 60%)}
#klf-finder .klf-other-name{position:absolute;left:14px;right:14px;bottom:10px;z-index:1;color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
#klf-finder .klf-other-body{display:flex;flex-direction:column;gap:4px;flex:1;padding:12px 14px 14px}
#klf-finder .klf-other-school{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--klf-n500)}
#klf-finder .klf-other-school::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--oc)}
#klf-finder .klf-other-course{font-size:.88rem;font-weight:500;line-height:1.35;color:var(--klf-n900)}
#klf-finder .klf-other-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-size:.82rem;font-weight:600;color:var(--klf-n900)}
#klf-finder .klf-other-go svg{width:14px;height:14px;transition:transform .3s var(--klf-spring)}
#klf-finder .klf-other:hover .klf-other-go svg{transform:translateX(3px)}

/* plan your stay */
#klf-finder .klf-addons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
#klf-finder .klf-addon{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border:1px solid var(--klf-n200);border-radius:12px;background:#fff;font-size:.88rem;font-weight:500;color:var(--klf-n900);transition:background-color .2s,border-color .2s}
#klf-finder .klf-addon:hover{background:var(--klf-n50);border-color:var(--klf-n300)}
#klf-finder .klf-addon>span:not(.klf-ic){flex:1;min-width:0}
#klf-finder .klf-addon .klf-ic:first-child{color:var(--kc1)}
#klf-finder .klf-addon .klf-ic:first-child svg{width:19px;height:19px}
#klf-finder .klf-addon-arrow{color:var(--klf-n500);transition:transform .3s var(--klf-spring)}
#klf-finder .klf-addon:hover .klf-addon-arrow{transform:translateX(3px)}

#klf-finder .klf-r-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;max-width:968px;margin-top:32px;padding:20px clamp(18px,4.5vw,44px) 0;border-top:1px solid var(--klf-n100)}
#klf-finder .klf-r-disc{max-width:60ch;font-size:.78rem;color:var(--klf-n500)}
#klf-finder .klf-r-foot-actions{display:flex;flex-wrap:wrap;gap:18px}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
  #klf-finder .klf-modal-head{flex-wrap:wrap;gap:8px 12px;padding:12px 12px 10px 18px}
  #klf-finder .klf-brand{flex:1}
  #klf-finder .klf-steps{order:3;flex:1 0 100%}
  #klf-finder .klf-steps li{flex:1 1 0}
  #klf-finder .klf-step{padding:5px 8px 5px 5px;gap:8px}
  #klf-finder .klf-course.is-top{grid-template-columns:1fr}
  #klf-finder .klf-course.is-top .klf-course-img{min-height:0;aspect-ratio:16/8}
  #klf-finder .klf-modal-foot{padding:10px 16px}
}
@media (max-width:560px){
  #klf-finder .klf-modal-card{border-radius:16px}
  #klf-finder .klf-step-num{width:24px;height:24px;font-size:.7rem}
  #klf-finder .klf-step-text small{display:none}
  #klf-finder .klf-step-text b{font-size:.74rem}
  #klf-finder .klf-options-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #klf-finder .klf-tile-body{padding:10px 12px 12px}
  #klf-finder .klf-tile .klf-option-label{font-size:.9rem}
  #klf-finder .klf-r-hero{min-height:280px}
  #klf-finder .klf-r-hero::after{background:linear-gradient(0deg,rgba(10,14,40,.9) 0%,rgba(10,14,40,.55) 60%,rgba(10,14,40,.25) 100%)}
  #klf-finder .klf-r-school{padding-left:0;border-left:0;flex-direction:row;flex-wrap:wrap;gap:0 8px;flex-basis:100%}
  #klf-finder .klf-city-switch{flex-direction:column;align-items:stretch;gap:6px}
  #klf-finder .klf-btn{padding:0 18px;font-size:.86rem}
  #klf-finder .klf-r-foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){
  #klf-finder .klf-options-tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  #klf-finder *,#klf-finder *::before,#klf-finder *::after{animation:none!important;transition-duration:.01ms!important}
}