/* Clarity refresh: start-here doors, contact form, two-up project grid. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.doors-section{padding-top:56px}
.doors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.door-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px;border:1px solid var(--refresh-line);border-radius:20px;background:var(--refresh-surface);color:var(--text);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.door-card:hover{border-color:var(--gold);color:var(--text);transform:translateY(-2px)}
.door-kind{font:500 11px/1.5 var(--mono);letter-spacing:.14em;color:var(--refresh-label)}
.door-card h3{font:600 24px/1.15 var(--display);letter-spacing:-.015em;margin:0}
.door-card p{font-size:16px;line-height:1.55;color:var(--prose);margin:0}
.door-go{margin-top:auto;padding-top:6px;font-size:15px;font-weight:600;color:var(--refresh-accent)}
@media(max-width:1000px){.doors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.doors-grid{gap:12px}.door-card{padding:18px}.door-card h3{font-size:20px}.door-card p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.door-card,.door-card:hover{transition:none;transform:none}}

.ideas-section{margin-top:72px}
.field-note-preview .btn-gold{color:#0a0f1e;margin-top:6px;align-self:flex-start;width:auto;justify-self:start}

.refresh-project-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.refresh-project-grid.two-up{grid-template-columns:1fr}}

.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;border-top:1px solid var(--refresh-line);padding-top:48px}
.contact-alt,.contact-note{font-size:16px;line-height:1.7;color:var(--prose);margin:0 0 16px}
.contact-note{font-size:14px;color:var(--refresh-muted)}
.contact-alt a,.contact-note a{color:var(--refresh-accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.contact-form{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3vw,32px);border:1px solid var(--refresh-line);border-radius:24px;background:var(--refresh-surface)}
.contact-form label{font-size:14px;font-weight:600;color:var(--text);margin-top:8px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;box-sizing:border-box;font:16px/1.5 var(--body);color:var(--text);background:transparent;border:1px solid var(--refresh-line);border-radius:12px;padding:12px 14px}
.contact-form select option{color:#15203B;background:#fff}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.contact-form button{align-self:flex-start;margin-top:14px;color:#0a0f1e;min-height:48px}
.contact-form button[disabled]{opacity:.6;cursor:default}
.contact-status{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--text);min-height:1.5em}
.contact-status.is-error{color:#ff9b8a}
html[data-theme=light] .contact-status.is-error{color:#a3301c}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr;padding-top:32px}.contact-form button{align-self:stretch}}

/* Subpage nav: keep three links readable on phones */
.sub-nav-links{display:flex;align-items:center;gap:22px}
.sub-nav-links a:not(.btn-gold){font-size:15px;font-weight:500}
@media(max-width:560px){.sub-nav-links{gap:12px}.sub-nav-links a:not(.btn-gold){font-size:14px}.sub-nav-links .btn-gold{padding:10px 14px;font-size:13px}.sub-nav-links .theme-toggle{min-width:44px;padding:8px}}
@media(max-width:400px){.sub-nav-links .sub-nav-optional{display:none}}

/* Compact AI Brief block */
.writing-head .refresh-intro{max-width:620px}
.writing-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:8px}
.writing-feature{display:block;overflow:hidden;border:1px solid var(--refresh-line);border-radius:22px;background:var(--refresh-surface);color:var(--text)}
.writing-feature img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#16255C}
.writing-feature-body{padding:22px 24px 24px}
.writing-feature h3{font:600 clamp(24px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.015em;margin:8px 0 10px}
.writing-feature p{font-size:16px;line-height:1.6;color:var(--prose);margin:0 0 14px}
.writing-read{font-weight:600;color:var(--refresh-accent)}
.writing-feature:hover{border-color:var(--gold);color:var(--text)}
.writing-side .ideas-list{margin-top:0}
.writing-follow{font-size:15px;line-height:1.6;color:var(--prose);margin:8px 0 0}
.writing-follow a{color:var(--refresh-accent);font-weight:600}
@media(max-width:860px){.writing-grid{grid-template-columns:1fr}}

/* AI use cases */
.usecase-group{font:600 22px/1.2 var(--display);color:var(--text);margin:36px 0 16px}
.usecase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.usecase{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid var(--refresh-line);border-radius:20px;background:var(--refresh-surface)}
.usecase-tag{font:500 11px/1.5 var(--mono);letter-spacing:.12em;color:var(--refresh-label);margin:0 0 10px}
.usecase h4{font:600 22px/1.2 var(--display);letter-spacing:-.01em;color:var(--text);margin:0 0 10px}
.usecase>p:not(.usecase-tag):not(.usecase-tip){font-size:16px;line-height:1.6;color:var(--prose);margin:0 0 16px}
.usecase ul{margin:0 0 16px;padding-left:20px;font-size:15px;line-height:1.6;color:var(--prose)}
.usecase ul li{margin-bottom:6px}
.usecase-prompt{border-top:1px solid var(--refresh-line);padding-top:12px;margin-bottom:12px}
.usecase-prompt summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--refresh-accent);min-height:44px;display:flex;align-items:center}
.usecase-prompt pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 var(--mono);color:var(--text);background:rgba(127,140,180,.1);border:1px solid var(--refresh-line);border-radius:12px;padding:14px;margin:6px 0 10px}
.usecase-copy{min-height:40px;padding:8px 16px;border:1px solid var(--refresh-line);border-radius:999px;background:transparent;color:var(--text);font:600 14px var(--body);cursor:pointer}
.usecase-copy:hover{border-color:var(--gold)}
.usecase-tip{margin-top:auto;font-size:14px;line-height:1.55;color:var(--refresh-muted)}
.usecase-tip a{color:var(--refresh-accent);font-weight:600}
.usecase-check{border-color:rgba(232,180,76,.35)}
.usecase-more{margin:28px 0 0;font-size:16px;color:var(--prose)}
.usecase-more a{color:var(--refresh-accent);font-weight:600}
@media(max-width:1000px){.usecase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.usecase-grid{grid-template-columns:1fr}.usecase{padding:20px}}

/* Slim About teaser */
.about-teaser-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,64px);align-items:center;border-top:1px solid var(--refresh-line);padding-top:48px}
.about-teaser-art{position:relative;display:block;border-radius:22px;overflow:hidden;max-width:320px;justify-self:center}
.about-teaser-art img{display:block;width:100%;height:auto}
.about-teaser-art .about-film-label{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--gold);color:#0a0f1e;font-weight:600;font-size:14px}
@media(max-width:760px){.about-teaser-grid{grid-template-columns:1fr;padding-top:32px}.about-teaser-art{max-width:240px}}

/* AI, explained */
.concept>p:not(.usecase-tag):not(.concept-step):not(.concept-gist){font-size:16px;line-height:1.6;color:var(--prose);margin:0 0 16px}
.concept p a{color:var(--refresh-accent);text-decoration:underline;text-underline-offset:3px}
.concept-step{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--refresh-line);font-size:15px;line-height:1.6;color:var(--prose)}
.concept-step strong{color:var(--text)}
.concept-source{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--refresh-muted)}
.concept-source a{color:var(--refresh-accent)}
.writing-feature.no-cover .writing-feature-body{padding-top:28px}

/* In the Loop signup + contact opt-in */
.loop-signup{margin:16px 0 0;padding:18px;border:1px solid var(--refresh-line);border-radius:18px;background:var(--refresh-surface)}
.loop-signup-title{margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--prose)}
.loop-signup-title strong{color:var(--text)}
.loop-signup-row{display:flex;gap:10px;flex-wrap:wrap}
.loop-signup-row input[type=email]{flex:1 1 200px;min-width:0;box-sizing:border-box;font:16px/1.4 var(--body);color:var(--text);background:transparent;border:1px solid var(--refresh-line);border-radius:999px;padding:11px 16px}
.loop-signup-row input[type=email]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.loop-signup-row .btn-gold{color:#0a0f1e;min-height:44px}
.loop-signup-row button[disabled]{opacity:.6}
.loop-signup-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--refresh-muted)}
.loop-signup-note a,.contact-privacy a{color:var(--refresh-accent)}
.loop-signup-note.is-error{color:#ff9b8a}
html[data-theme=light] .loop-signup-note.is-error{color:#a3301c}
.contact-form .contact-optin{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;line-height:1.5;color:var(--prose);margin-top:12px}
.contact-form .contact-optin input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--gold)}
.contact-privacy{margin:4px 0 0;font-size:13px;color:var(--refresh-muted)}
.privacy-main h2{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);margin:40px 0 12px}
.privacy-main p,.privacy-main li{font-size:17px;line-height:1.7;color:var(--prose)}
.privacy-main a{color:var(--link-blue);text-decoration:underline}

/* In the Loop card (AI Brief side column) */
.loop-card{margin-top:24px;padding:24px;border:1px solid rgba(232,180,76,.35);border-radius:22px;background:linear-gradient(160deg,var(--refresh-surface),rgba(232,180,76,.06));scroll-margin-top:96px}
.loop-card-head{display:flex;align-items:center;gap:14px}
.loop-icon{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:14px;background:rgba(232,180,76,.14);color:var(--gold)}
.loop-kicker{margin:0;font:500 11px/1.5 var(--mono);letter-spacing:.14em;color:var(--refresh-label)}
.loop-card h3{margin:2px 0 0;font:600 26px/1.1 var(--display);letter-spacing:-.015em;color:var(--text)}
.loop-lede{margin:14px 0 12px;font-size:16px;line-height:1.55;color:var(--prose)}
.loop-perks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.loop-perks li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.4;color:var(--text)}
.loop-perks svg{width:18px;height:18px;flex:none;color:var(--gold)}
.loop-card .loop-signup{margin:0;padding:0;border:0;background:none}
.loop-signup-note.is-success{color:var(--text)}
@media(max-width:520px){.loop-card{padding:20px}.loop-signup-row .btn-gold{flex:1 1 100%;justify-content:center}}

/* AI, explained: scannable cards */
.concept-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.concept-top .usecase-tag{margin:0}
.concept-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px;background:rgba(232,180,76,.12);color:var(--gold)}
.concept h4{font-size:21px}
.concept>p.concept-gist{font-size:17px;line-height:1.55;color:var(--text);margin:0 0 18px}
.concept .concept-step{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.concept-try{font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--refresh-label)}
.concept-more{margin-top:14px}
.concept-more summary{cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--refresh-accent);list-style:none}
.concept-more summary::-webkit-details-marker{display:none}
.concept-more summary::after{content:"+";font-size:16px;line-height:1}
.concept-more[open] summary::after{content:"−"}
.concept-more p{font-size:15px;line-height:1.6;color:var(--prose);margin:8px 0 0}
.concept-more p strong{color:var(--text)}
html[data-theme=light] .loop-icon,html[data-theme=light] .concept-icon{color:#805715}
html[data-theme=light] .loop-perks svg{color:#805715}