/* Preview "light design" (proposal A). Only active with html.look-light, set by ?look=light (see functions.php).
   Same layout; light surfaces instead of navy bands, hairline lines, zebra spec tables. */
html.look-light { --line: #E3E8F0; --tint: #EEF2F9; --tint-2: #F7F9FC; }
/* Top bar and header */
html.look-light .topbar { background: #F2F5FA; color: var(--steel); border-bottom: 1px solid var(--line); }
html.look-light .topbar a { color: var(--ink); }
html.look-light .topbar a:hover { color: var(--blue); }
/* Homepage hero without photo: light, with dark text */
html.look-light .hero:not(.hero--photo) { background: #F2F5FA; color: var(--text); border-bottom: 1px solid var(--line); }
html.look-light .hero:not(.hero--photo) h1 { color: var(--ink); }
html.look-light .hero:not(.hero--photo) .lead, html.look-light .hero:not(.hero--photo) .hero__facts span { color: var(--steel); }
html.look-light .hero:not(.hero--photo) .eyebrow { color: var(--blue); }
html.look-light .hero:not(.hero--photo) .hero__grid { background-image: linear-gradient(rgba(18,35,74,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(18,35,74,.05) 1px, transparent 1px); }
html.look-light .hero:not(.hero--photo) .hero__drawing { color: var(--ink); }
html.look-light .hero:not(.hero--photo) .hero__facts { border-top-color: var(--line); }
html.look-light .hero:not(.hero--photo) .btn--ghost { color: var(--blue); border-color: var(--blue); }
html.look-light .hero:not(.hero--photo) .hero__start { box-shadow: 0 12px 32px rgba(18,35,74,.10); border: 1px solid var(--line); }
html.look-light .hero--photo::before { background: linear-gradient(90deg, rgba(10,20,44,.78) 0%, rgba(10,20,44,.5) 45%, rgba(10,20,44,.12) 100%); }
/* Proof band under the hero */
html.look-light .proof { background: #fff; color: var(--steel); border-bottom: 1px solid var(--line); }
html.look-light .proof__facts strong, html.look-light .proof__cases a { color: var(--ink); }
html.look-light .proof__cases a { text-decoration-color: var(--line); }
/* Call-to-action banners: white card with a hairline, orange button stays */
html.look-light .cta { background: #fff; border: 1px solid var(--line); color: var(--steel); }
html.look-light .cta h2 { color: var(--ink); }
html.look-light .cta .btn--ghost { color: var(--blue); border-color: var(--blue); }
html.look-light .cards--dark .card { background: #fff; border-color: var(--line); color: var(--text); }
html.look-light .cards--dark .card h3 { color: var(--ink); }
html.look-light .cards--dark .card p { color: var(--steel); }
/* Footer: light, only the copyright line keeps a quiet rule */
html.look-light .site-footer { background: #F2F5FA; color: var(--steel); border-top: 1px solid var(--line); }
html.look-light .site-footer h4, html.look-light .brand__mark--light, html.look-light .footer__help-item strong { color: var(--ink); }
html.look-light .site-footer a { color: var(--text); }
html.look-light .site-footer a:hover { color: var(--blue); }
html.look-light .footer__help-item span { color: var(--steel); }
html.look-light .footer__help { border-bottom-color: var(--line); }
html.look-light .footer__badge { border-color: var(--line); color: var(--ink); background: #fff; }
html.look-light .footer__legal { border-top-color: var(--line); }
/* Finer lines */
html.look-light .tile, html.look-light .contact-card { border-left-width: 2px; }
html.look-light .specs__title { border-bottom-width: 1px; }
html.look-light .clist__row.is-group-start { border-top: 1px solid var(--steel-2); }
html.look-light .cfg-choice, html.look-light .cfg-choice::before { border-width: 1px; }
html.look-light .cfg-choice.is-active { box-shadow: 0 0 0 1px var(--blue); }
html.look-light .cfg-results__head, html.look-light .cfg-special { border-left-width: 2px; }
html.look-light .cfg-add, html.look-light .slider__btn, html.look-light .btn { border-width: 1.5px; }
html.look-light .page-hero { background: #F7F9FC; }
/* Spec tables: light zebra rows instead of dividers */
html.look-light .specs th, html.look-light .specs td { border-bottom: 0; }
html.look-light .specs tr:nth-child(odd) { background: #F7F9FC; }
/* Preview banner */
.look-bar { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 90; display: flex; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(18,35,74,.15); padding: .45rem .5rem .45rem 1rem; font-size: .88rem; color: var(--ink); white-space: nowrap; }
.look-bar a { font-weight: 700; color: var(--blue); }
.look-bar button { border: 0; background: var(--tint); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
@media (max-width: 760px) { .look-bar { top: 70px; font-size: .8rem; } }
/* Preview "fine lines" (?look=fine): the live colours, only thinner and softer lines */
html.look-fine { --line: #E3E8F0; }
html.look-fine .tile, html.look-fine .contact-card { border-left-width: 2px; }
html.look-fine .specs__title { border-bottom-width: 1px; }
html.look-fine .clist__row.is-group-start { border-top: 1px solid var(--steel-2); }
html.look-fine .cfg-choice, html.look-fine .cfg-choice::before { border-width: 1px; }
html.look-fine .cfg-choice.is-active { box-shadow: 0 0 0 1px var(--blue); }
html.look-fine .cfg-results__head, html.look-fine .cfg-special { border-left-width: 2px; }
html.look-fine .cfg-add, html.look-fine .slider__btn, html.look-fine .btn { border-width: 1.5px; }
html.look-fine .footer__help, html.look-fine .footer__legal { border-color: rgba(255,255,255,.08); }
html.look-fine .footer__badge { border-color: rgba(255,255,255,.18); }
html.look-fine .hero__facts { border-top-color: rgba(255,255,255,.08); }