/* Page 449: shared comparison cards and a decorative continuous hero. */
.op-hub .cl-selection .mc-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.op-hub .cl-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:var(--paper)}
.op-hub .cl-visual{position:absolute;inset:0;z-index:-2;overflow:hidden}
.op-hub .cl-hero-image{width:100%;height:100%;object-fit:cover;object-position:center;animation:cl-drift 22s ease-in-out infinite alternate}
.op-hub .cl-hero-second{position:absolute;inset:0;opacity:0;animation:cl-crossfade 24s ease-in-out infinite;object-position:center 62%}
.op-hub .cl-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,24,43,.78),rgba(3,24,43,.3) 45%,transparent 65%)}
.op-hub .cl-hero-inner{min-height:570px;display:flex;align-items:center;padding-block:3rem}
.op-hub .cl-hero-copy{max-width:46%;padding-right:1rem}
.op-hub .cl-hero h1{color:var(--paper);font-size:clamp(2.8rem,4.5vw,4.4rem);line-height:1.07;letter-spacing:-.035em;margin:.75rem 0 1.4rem}
.op-hub .cl-hero .eyebrow,.op-hub .cl-hero p{color:var(--paper)}
.op-hub .cl-hero p{line-height:1.65}
.op-hub .cl-hero .button{margin-top:1.5rem}
.op-hub .cl-hero .mc-lead{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.3}
.op-hub .cl-advice{padding:1rem 1.5rem}
.op-hub .cl-advice p+p,.op-hub .cl-selection .mc-method p+p{margin-top:1rem}
.op-hub .cl-workshop{background:var(--deep);color:var(--paper);padding-block:3rem}
.op-hub .cl-workshop-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.op-hub .cl-workshop figure{margin:0;min-width:0}
.op-hub .cl-workshop img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.op-hub .cl-workshop figcaption{margin-top:.75rem;font-size:.85rem;line-height:1.6}
.op-hub .cl-workshop h2,.op-hub .cl-workshop a,.op-hub .cl-workshop .eyebrow{color:var(--paper)}
.op-hub .cl-workshop h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:1.5rem}
.op-hub .cl-workshop p{line-height:1.75}
.op-hub .cl-workshop .text-link{display:inline-block;margin-top:1.25rem}
@keyframes cl-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes cl-crossfade{0%,38%,100%{opacity:0}50%,86%{opacity:1}}
@media(max-width:760px){
 .op-hub .cl-selection .mc-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .op-hub .cl-hero-inner{min-height:0;padding-top:290px;padding-bottom:2rem}
 .op-hub .cl-hero-copy{max-width:none;padding:0;width:100%}
 .op-hub .cl-visual{bottom:auto;height:340px}
 .op-hub .cl-hero-image{object-position:78% center}
 .op-hub .cl-hero:after{background:linear-gradient(180deg,transparent 180px,var(--deep) 340px)}
 .op-hub .cl-hero h1{font-size:2.7rem}
 .op-hub .cl-workshop-inner{grid-template-columns:1fr;gap:1.5rem}
 .op-hub .cl-selection .td-pitch{min-height:0}
 .op-hub .cl-advice{padding:1rem}
}
@media(prefers-reduced-motion:reduce){.op-hub .cl-hero-image{animation:none}.op-hub .cl-hero-second{display:none}}
.op-hub .cl-selection .mc-selection-note{padding-block:1.5rem;color:var(--muted);font-size:.9rem;line-height:1.6}
.op-hub .cl-selection .mc-selection-note p+p{margin-top:.5rem}

/* Four illustrated beginner lessons: scoped to the keys selection only. */
.op-hub .cl-learning{padding-block:3rem;scroll-margin-top:2rem}
.op-hub .cl-learning-heading{max-width:58rem;margin-bottom:2rem}
.op-hub .cl-learning-heading h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;margin:.75rem 0 1rem}
.op-hub .cl-learning-heading>p:last-child{line-height:1.7}
.op-hub .cl-learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.op-hub .cl-learning-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;box-shadow:0 8px 20px #03182b1a}
@media(hover:hover) and (pointer:fine){.op-hub .cl-learning-card:hover{box-shadow:0 16px 32px #03182b26;border-color:var(--blue)}}
@media(prefers-reduced-motion:no-preference){.op-hub .cl-learning-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}@media(hover:hover) and (pointer:fine){.op-hub .cl-learning-card:hover{transform:translateY(-4px)}}}
.op-hub .cl-learning-title{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 1rem}
.op-hub .cl-learning-title>span{display:grid;place-items:center;flex:0 0 2.5rem;height:2.5rem;border-radius:50%;background:var(--blue);color:var(--paper);font-weight:700}
.op-hub .cl-learning-title h3{font-size:1.3rem;line-height:1.35;margin:0;align-self:center}
.op-hub .cl-learning-card figure{margin:0;padding:0 1.5rem}
.op-hub .cl-learning-card img{display:block;width:100%;height:auto;aspect-ratio:12/7}
.op-hub .cl-learning-copy{padding:1.25rem 1.5rem;line-height:1.7}
.op-hub .cl-learning-copy p+p{margin-top:1rem}
.op-hub .cl-learning-takeaway{margin:auto 1.5rem 1.5rem;padding:1rem;background:var(--pale);border-radius:var(--radius);line-height:1.65}
@supports(grid-template-rows:subgrid){
 @media(min-width:761px){
  .op-hub .cl-learning-grid{row-gap:0}
  .op-hub .cl-learning-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;margin-bottom:1.5rem}
 }
}
@media(max-width:760px){
 .op-hub .cl-learning{padding-block:2rem}
 .op-hub .cl-learning-grid{grid-template-columns:1fr}
 .op-hub .cl-learning-title{padding:1.25rem 1rem 1rem;gap:.75rem}
 .op-hub .cl-learning-title h3{font-size:1.2rem}
 .op-hub .cl-learning-title>span{flex-basis:2rem;height:2rem}
 .op-hub .cl-learning-card figure{padding:0 .5rem}
 .op-hub .cl-learning-copy{padding:1rem;line-height:1.7}
 .op-hub .cl-learning-takeaway{margin:0 1rem 1rem}
}

/* Keep dimensions visible without adding a row to the shared card grid. */
.op-hub .cl-selection .cl-size-range{display:block;margin-top:.75rem;color:var(--deep);font-size:1.05rem;font-weight:700;line-height:1.5}
.op-hub .cl-selection .cl-size-note{display:block;margin-top:.25rem;color:var(--muted);font-size:.85rem;line-height:1.5}

/* KS Tools store: deep red fading into charcoal, confined to page 449. */
.op-hub .cl-selection .cl-ks-store{background:radial-gradient(ellipse at 12% 0,rgba(198,21,48,.35),transparent 65%),linear-gradient(110deg,#851629 0%,#47121e 46%,#111318 100%);color:var(--paper);border-block:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px #03182b33}
.op-hub .cl-selection .cl-ks-store h2{color:var(--paper)}
.op-hub .cl-selection .cl-ks-store .eyebrow{color:rgba(255,255,255,.85)}
.op-hub .cl-selection .cl-ks-store .o99-amazon-disclosure{color:rgba(255,255,255,.8)}
.op-hub .cl-selection .cl-ks-store .button{box-shadow:0 6px 18px #00000040;border:1px solid rgba(255,255,255,.35)}
.op-hub .cl-selection .cl-ks-store .button:focus-visible{outline:3px solid var(--paper);outline-offset:4px}

/* Keep the image against the site header; breadcrumb stays on the hero. */
.op-hub .cl-hero:before{content:"";position:absolute;inset:0 0 auto;height:140px;background:linear-gradient(180deg,rgba(3,24,43,.88),transparent);z-index:-1;pointer-events:none}
.op-hub .cl-hero .breadcrumbs{position:relative;color:var(--paper);text-shadow:0 1px 3px #03182b}
.op-hub .cl-hero .breadcrumbs a,.op-hub .cl-hero .breadcrumbs li+li:before{color:var(--paper)}
.op-hub .cl-hero .breadcrumbs a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}