/* Blue Bottom fiberglass review site R2: additions to Blue Bottom's unchanged styles.css for the
   name-and-email form, review notes and demonstration controls. Same palette; no new branding. */
[hidden]{display:none!important}
.minimal-header{gap:12px}
.header-actions{display:flex;align-items:center;gap:10px}
.notes-toggle{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(243,197,78,.6);background:transparent;color:var(--cream);font:600 14px var(--sans);cursor:pointer;white-space:nowrap}
.notes-toggle[aria-pressed="false"]{border-style:dashed;color:var(--mist)}
.cta-short{display:none}
@media (max-width:480px){.cta-long{display:none}.cta-short{display:inline}}

/* Review notes (review-only; the toggle hides them) */
.rn{margin:18px 0 0;padding:10px 14px;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;background:rgba(243,197,78,.1);font-size:15px;line-height:1.5}
.landing-hero .copy .rn,.dark .rn,footer .rn,.summary .rn{color:#f5e6b8}
.light .rn,.paper .rn,.reply-card .rn{background:#fff7dc;color:#5b4300}
.rn strong{color:inherit}
body.notes-off .rn,body.notes-off .demo{display:none}

/* Fiberglass feature */
.fg-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.fg-feature figure{position:relative}
.fg-feature .media-label{position:absolute;left:12px;bottom:12px}
@media (max-width:860px){.fg-feature{grid-template-columns:1fr}}

/* Request section: a short "what happens" card beside the form */
.reply-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:900px){.reply-shell{grid-template-columns:1fr}}
.reply-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow);color:var(--ink)}
.reply-card h3{margin:0 0 10px}
.reply-steps{margin:0;padding-left:22px;display:grid;gap:8px;color:var(--ink-2)}

/* Request panel: the dark summary card from styles.css, holding the two-field form */
.request-panel .form-intro{margin:0 0 4px;font-size:15px;color:#d7e1e7}
.request-panel .field{margin:16px 0 0;padding:0;border:0;min-width:0}
.request-panel .field > label{display:block;margin-bottom:6px;padding:0;font:700 15px/1.4 var(--sans);color:var(--cream)}
.request-panel .input{display:block;width:100%;min-height:48px;padding:11px 14px;border-radius:12px;border:1.5px solid rgba(201,214,222,.6);background:#0b1d2b;color:var(--cream);font:400 16px/1.4 var(--sans)}
.request-panel .input:focus{border-color:var(--pool);outline:none;box-shadow:0 0 0 3px rgba(127,227,234,.35)}
.request-panel .input[aria-invalid="true"]{border-color:#f59e8b;box-shadow:0 0 0 1px #f59e8b}
.request-panel .input[readonly]{color:#a9bcc8}
.request-panel .hint{margin:6px 0 0;font-size:14px;line-height:1.45;color:#a9bcc8}
.request-panel .field-error{margin:6px 0 0;color:#ffb4a6;font-size:14px;font-weight:600;line-height:1.45}
.request-panel .error-summary{margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1.5px solid #f59e8b;background:rgba(245,158,139,.1)}
.request-panel .error-summary:focus{outline:3px solid var(--gold);outline-offset:3px}
.request-panel .error-summary h4{margin:0;font:700 16px var(--sans);color:#ffd3c9}
.request-panel .error-summary ul{margin:6px 0 0;padding-left:20px}
.request-panel .error-summary a{display:inline-block;min-height:32px;color:#ffd3c9}
.request-panel .privacy{margin:14px 0 0;font-size:14px;color:#a9bcc8}
.request-panel .form-status{min-height:1.4em;margin:12px 0 0;font-size:15px;color:#d7e1e7}
.request-panel .form-status[data-tone="ready"]{color:var(--pool-soft)}
.request-panel .button{margin-top:12px}
.request-panel .result{margin-top:16px;padding:16px;border-radius:14px;background:rgba(127,227,234,.1);border:1px solid rgba(127,227,234,.4)}
.request-panel .result--fail{background:rgba(245,158,139,.1);border-color:rgba(245,158,139,.55)}
.request-panel .result:focus{outline:3px solid var(--gold);outline-offset:3px}
.request-panel .result__tag{display:inline-block;margin:0 0 8px;padding:2px 9px;border-radius:999px;border:1px solid rgba(243,197,78,.65);color:var(--gold);font:700 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.request-panel .result h4{margin:0 0 6px;font:700 18px/1.3 var(--sans);color:var(--cream)}
.request-panel .result p{margin:0 0 8px;font-size:15px}
.request-panel .result__ref{color:#a9bcc8;font-size:13px}
.request-panel .result__ref code{background:transparent;color:var(--mist);padding:0;overflow-wrap:anywhere}
.request-panel .result__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.request-panel .ghost-btn{min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);background:transparent;color:var(--cream);font:600 15px var(--sans);cursor:pointer}
.request-panel .ghost-btn:hover{background:rgba(255,255,255,.1)}

/* Demonstration controls (review only) */
.demo{margin-top:28px;padding:16px 18px;border:1.5px dashed #c9a43a;border-radius:14px;background:#fff7dc;color:#5b4300}
.demo summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:44px;font:700 16px var(--sans)}
.state-badge{padding:2px 9px;border-radius:999px;border:1px solid #5b4300;font:700 12px/1.5 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.demo__body{display:grid;gap:12px;margin-top:10px;font-size:15px}
.demo .demo__body p{margin:0;color:#4a3700}
.demo__row{display:flex;flex-wrap:wrap;gap:8px}
.demo-btn{min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid #5b4300;background:#fff;color:#3b2c00;font:600 15px var(--sans);cursor:pointer}
.demo-btn:hover{background:#fffbea}
.demo__outcome{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.demo__outcome legend{padding:0;margin-bottom:6px;font-weight:700}
.demo__outcome label{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer}
.demo .adapter-status{padding:8px 12px;border-radius:10px;border:1px dashed #b89a3a;background:#fffbea;line-height:1.5}
.payload__title{font-weight:700}
.payload__pre{margin:6px 0 0;max-height:280px;overflow:auto;padding:12px;border-radius:10px;background:#0b1d2b;color:#dbe7ee;font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}