/* Scope all additions to the approved hero. Existing card/theme rules stay intact. */
.hero-qualification{max-width:500px}
.hero-qualification .lede{margin-top:28px}
.qualification-hint{font-size:14px;margin-top:10px;color:var(--muted)}
.qualification-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.qualification-controls button{background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-radius:6px;padding:9px 14px;font:inherit;font-size:14px}
.qualification-controls label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.qualification-controls input{accent-color:var(--fg)}
.qualification-terminal{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:8px;height:158px;box-sizing:border-box;color:var(--muted);overflow:auto}
.qualification-terminal pre{font-family:var(--mono);font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.qualification-terminal[data-state=yes],.qualification-terminal[data-state=copied]{background:#14291b;border-color:#386547;color:#c5f5d2}
.qualification-terminal[data-state=no],.qualification-terminal[data-state=failed]{background:#291d1c;border-color:#78534e;color:#ffe0da}
.qualification-terminal[data-state=no] pre::first-line,.qualification-terminal[data-state=failed] pre::first-line{color:#ffada2}
.qualification-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-copy:has(.hero-qualification) .link-card{position:relative;margin-top:16px}
.qualification-cursor{position:absolute;right:34px;bottom:8px;width:25px;height:32px;opacity:0;pointer-events:none}
.qualification-cursor svg{width:100%;height:100%;fill:#fff;stroke:#0c0c0b;stroke-width:2}
.hero-next{max-width:500px;margin-top:18px;font-size:15px;line-height:1.6;color:var(--muted)}
.hero-copy-fallback{max-width:500px;margin-top:18px;font-size:14px}
.hero-copy-fallback textarea{display:block;margin-top:8px;width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);border:1px solid var(--fg);border-radius:6px;padding:12px;font-family:var(--mono);font-size:12px;resize:vertical}
.hero-qualification button:focus-visible,.hero-qualification input:focus-visible,.hero-copy-fallback textarea:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.qualification-cursor{display:none}}
/* Longer approved headline fits the existing left column without resizing the demo. */
@media(min-width:761px){.hero-copy:has(.hero-qualification) h1{font-size:clamp(46px,4.4vw,64px)}.qualification-terminal{height:126px}}
/* Reserve the longest phrase so rotation never shifts the qualification or CTA. */
.hero h1 .hero-rotating-phrase{display:grid;position:relative;isolation:isolate;cursor:pointer}
.hero-rotating-phrase [data-phrase]{grid-area:1/1;opacity:0;transition:opacity .55s ease;position:relative;z-index:1;isolation:isolate}
.hero-rotating-phrase [data-phrase]:not([aria-hidden=true]){opacity:1}
/* Measure each text line once; animate compositor-friendly transforms, not paint size. */
.hero-phrase-ink{background:none}
.hero-highlight-line{position:absolute;z-index:-1;pointer-events:none;border-radius:3px;background:linear-gradient(90deg,rgba(196,92,62,.32),rgba(196,92,62,.15));transform:scaleX(0);transform-origin:left center;opacity:0}
.hero-rotating-phrase [data-phrase]:not([aria-hidden=true]) .hero-highlight-line{animation:headline-sweep 3.8s cubic-bezier(.22,.61,.36,1) both;animation-play-state:var(--headline-play,running)}
.hero-rotating-phrase:focus-visible{outline:2px solid var(--fg);outline-offset:5px}
@keyframes headline-sweep{0%,8%{transform:scaleX(0);opacity:0}16%{opacity:1}52%,78%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-highlight-line{display:none;animation:none!important}.hero-rotating-phrase [data-phrase]{transition:none}}

/* Approved Enter glyph replacement; retain the existing demo button and handler. */
.hero .send .send-enter{display:block;width:21.6px;height:21.6px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero .send{background:var(--paper);padding:0;place-items:center}
.hero .send:hover{background:#fff}

@media(prefers-reduced-motion:no-preference){.hero .send,.qualification-controls button{transition:background-color .2s ease,color .2s ease}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Compact publishing links occupy the space below the example, within its column. */
.hero-demo .makes{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:0}
.hero-demo .makes nav{gap:4px 22px;font-size:15px}
.hero-demo .makes nav a{display:inline-flex;align-items:center;min-height:40px}
@media(max-width:760px){.hero-demo .makes{margin-top:24px;padding:20px 0 0;gap:12px}.hero-demo .makes nav{gap:4px 20px}}

.hero .site-claim{border:0;cursor:pointer}
.claim-info-dialog{max-width:440px;width:calc(100% - 40px);margin:auto;padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg)}
.claim-info-dialog::backdrop{background:rgba(0,0,0,.65)}
.claim-info-dialog h2{font-family:var(--display);font-size:24px;line-height:1.2}
.claim-info-dialog p{margin:16px 0 24px;color:var(--muted)}
.claim-info-dialog button{padding:12px 18px;border:0;border-radius:24px;background:var(--fg);color:var(--bg)}