html { margin: 0; padding: 0; }
body.recommend-screen { margin: 0; padding: 0; }
.recommend-screen .entire-navbar { top: 0; left: 0; margin: 0; padding: 0; }
.recommend-page { background: #f5f5f5; color: #181818; padding: 110px 24px 72px; font-family: 'Poppins', sans-serif; min-height: 80vh; box-sizing: border-box; }
.recommend-page * { box-sizing: border-box; }
.recommend-page [hidden] { display: none !important; }
.recommend-layout { max-width: 1080px; margin: auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
.recommend-story { padding: 30px; position: sticky; top: 100px; min-height: 540px; display: flex; flex-direction: column; border: 2px solid white; background: linear-gradient(180deg, #000c, #0005 45%, #000e), var(--recommend-photo) center / cover; color: white; }
.recommend-story .recommend-eyebrow { color: white; border-bottom: 8px solid #b40c29; padding-bottom: 12px; width: fit-content; }
.recommend-story .recommend-story-note { margin-top: auto; border-color: #ffffff55; }
.recommend-story .recommend-story-note strong, .recommend-story .recommend-story-note p, .recommend-story .recommend-story-note > span, .recommend-story > a { color: white; }
.recommend-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .15em; color: #b40c29; }
.recommend-story h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; text-shadow: 0 2px 8px #0008; line-height: 1.08; letter-spacing: -.045em; margin: 22px 0; color: white; }
.recommend-story > p { font-size: 16px; line-height: 1.7; color: #fff; }
.recommend-story-note { display: flex; gap: 18px; border-top: 1px solid #d6e0d4; padding: 25px 0; margin-top: 35px; }
.recommend-story-note > span { font-size: 30px; color: #a54431; }
.recommend-story-note p { font-size: 14px; line-height: 1.7; color: #585858; margin: 8px 0; }
.recommend-story > a { font-size: 12px; color: #4d6757; overflow-wrap: anywhere; }
.recommend-panel { min-width: 0; background: white; padding: 36px; border: 1px solid #ddd; border-top: 8px solid #b40c29; border-radius: 0; box-shadow: 0 8px 24px #0000000a; }
.recommend-panel h2 { color: #181818; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; margin: 12px 0; }
.recommend-muted { color: #646464; line-height: 1.65; font-size: 14px; }
#recommend-form { margin-top: 26px; }
#recommend-form label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 700; color: #181818; }
.recommend-optional { font-size: 11px; color: #7b877e; font-weight: 400; margin-left: 5px; }
#recommend-form input:not([type=hidden]), #recommend-form textarea { width: 100%; border: 1px solid #d8d8d8; border-radius: 3px; padding: 13px 14px; background: #fff; font: 16px/1.5 'Open Sans', sans-serif; color: #181818; }
#recommend-form textarea { resize: vertical; min-height: 110px; }
#recommend-form input:focus, #recommend-form textarea:focus { outline: 2px solid crimson; outline-offset: 2px; }
.recommend-search { position: relative; }
.recommend-search > span { position: absolute; top: 16px; left: 12px; color: #63826c; }
#recommend-form .recommend-search input { padding-left: 42px; }
.recommend-help { font-size: 12px; line-height: 1.6; color: #758177; margin: 8px 0; }
.recommend-submit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 3px; background: crimson; color: white; padding: 16px; font: 800 14px 'Poppins', sans-serif; margin-top: 24px; cursor: pointer; text-decoration: none; transition: background 150ms; }
.recommend-submit:hover { background: #a60929; }
.recommend-submit:disabled { opacity: .75; cursor: wait; }
.recommend-panel button:focus-visible, .recommend-panel a:focus-visible { outline: 3px solid crimson; outline-offset: 4px; }
.recommend-spinner { display: none; width: 18px; height: 18px; border: 2px solid #ffffff60; border-top-color: white; border-radius: 50%; animation: recommend-spin .7s linear infinite; flex-shrink: 0; }
.is-sending .recommend-spinner { display: inline-block; }
#recommend-error { padding: 12px; background: #fff0ed; color: #9d3523; border-radius: 8px; font-size: 14px; }
.cf-turnstile { margin-top: 22px; }
#recommend-success { text-align: center; padding: 20px 0; animation: recommend-enter 300ms ease-out; }
.recommend-success-mark { margin: 0 auto 24px; width: 66px; height: 66px; display: grid; place-items: center; background: #ffe9ee; color: crimson; border-radius: 50%; font-size: 32px; }
.recommend-join { margin: 28px 0; padding: 24px; background: #f6f6f6; border-radius: 3px; }
.recommend-join h3 { color: #181818; font-size: 20px; margin: 0 0 12px; }
.recommend-join p { font-size: 14px; line-height: 1.65; color: #585858; }
.recommend-google { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; width: 100%; border: 1px solid #d8d8d8; border-radius: 9px; background: white; color: #181818; font: 600 14px 'Open Sans', sans-serif; cursor: pointer; }
.recommend-join small { display: block; margin-top: 12px; font-size: 11px; line-height: 1.6; color: #646464; }
.recommend-another, .recommend-home { display: block; color: crimson; font-size: 14px; margin-top: 20px; }
.recommend-home { color: #748075; font-size: 12px; }
.pac-container { z-index: 10000; }
@keyframes recommend-spin { to { transform: rotate(360deg); } }
@keyframes recommend-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width: 760px) { .recommend-page { padding: 90px 16px 40px; } .recommend-layout { grid-template-columns: 1fr; gap: 24px; } .recommend-story { position: static; padding: 24px; min-height: 300px; } .recommend-story h1 { margin: 14px 0; } .recommend-story-note { display: none; } .recommend-story > a { display: inline-block; margin-top: 6px; } .recommend-panel { padding: 24px 20px; } }
@media(prefers-reduced-motion: reduce) { .recommend-page *, #recommend-success { animation: none; transition: none; } }

.recommend-google-icon { display: block; flex: 0 0 22px; }