/* AISearch Global — AEO Toolkit shared page chrome
   Used by: schema-generator.html, ai-crawler-checker.html, schema-detector.html,
   robots-txt-checker.html, llms-txt-checker.html, meta-tag-checker.html,
   canonical-checker.html, open-graph-checker.html
   Ported from the aeo-score-calculator.html inline style system so every tool
   page matches the site's existing dark/teal editorial look. */

:root {
  --tiffany: #0abab5;
  --accent: #0abab5;
  --tiffany-glow: rgba(10,186,181,.13);
  --tiffany-mid: rgba(10,186,181,.25);
  --black: #0d0e10;
  --charcoal: #16181c;
  --charcoal-mid: #15181d;
  --surface: #1e2025;
  --border: #2e2f33;
  --white: #e3e8ee;
  --silver: #95a0ad;
  --muted: #6b7684;
  --red: #e05252;
  --amber: #e0a852;
  --orange: #e07a52;
  --green: #52c98a;
  --fh: 'Space Grotesk', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'DM Mono', monospace;

  /* Card-shade ramp — overridden per page so each tool's own calculator card
     reads as a distinct, genuinely Tiffany-coloured step, darkest (AEO Score
     Calculator) to lightest (Open Graph Checker). Deliberately NOT mixed with
     charcoal/grey (color-mix toward a grey base reads as muddy/washed out) —
     instead it's the same Tiffany hue and saturation at varying lightness, so
     every step still looks like a clean shade of the brand teal, just darker
     or lighter. The page background itself stays the site's normal dark —
     only the card surfaces are tinted. See "AEO Toolkit card ramp" in
     CLAUDE.md for the full table. */
  --tiffany-h: 178deg;
  --tiffany-s: 70%;
  --card-l: 22%;
  --glass-b: .7;
  --glass-blur: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: radial-gradient(circle at top left, rgba(10,186,181,.07), transparent 30%), var(--black);
  color: var(--white);
  font-family: var(--fb);
  font-weight: 400;
  line-height: 1.7;
  font-size: 15px;
  min-height: 100vh;
}

a { color: var(--tiffany); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }

/* ── HEADER / NAV (layout for header injected by main.js) ── */
header { position: sticky; top: 0; z-index: 100; background: rgba(21,24,29,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand { font: 700 1.1rem var(--fh); text-decoration:none; color:var(--white); }
.brand span { color:var(--tiffany); }
.brand img { display:block; height:34px; width:auto; max-width:260px; }
.nav-toggle { display:none; background:none; border:1px solid var(--border); color:var(--white); padding:.45rem .65rem; border-radius:0; cursor:pointer; font:inherit; }
.links { display:flex; gap:1rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.links a { text-decoration:none; color:var(--silver); font-weight:500; }
.links a:hover, .links a:focus { color:var(--tiffany); }
.cta-link { padding:.55rem .9rem; border:1px solid var(--tiffany); border-radius:0; color:var(--tiffany)!important; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1.1; }
@media (max-width:720px) {
  .nav-toggle { display:block; }
  .links { display:none; position:absolute; left:1rem; right:1rem; top:4.2rem; flex-direction:column; background:#111317; border:1px solid var(--border); padding:.8rem; border-radius:0; z-index:200; }
  .links.open { display:flex; }
}

/* ── BRAND BANNER ── */
.brand-banner { background: linear-gradient(135deg, rgba(10,186,181,.1) 0%, rgba(10,186,181,.03) 100%); border-bottom: 1px solid rgba(10,186,181,.15); padding: 12px 0; text-align: center; }
.brand-banner-inner { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tiffany); }
.brand-banner-inner strong { color: var(--white); font-family: var(--fh); font-size: .78rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.brand-divider { color: var(--muted); }

/* ── PAGE LAYOUT ── */
.page-wrap { max-width: 700px; margin: 0 auto; padding: 52px 24px 100px; }
.page-wrap.wide { max-width: 1140px; }

/* ── BREADCRUMB ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-family: var(--fm); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 28px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--tiffany); }
.breadcrumb-sep { color: var(--border); }

/* ── HERO ── */
.tool-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fm); font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tiffany); background: var(--tiffany-glow); border: 1px solid rgba(10,186,181,.2); padding: 5px 14px; border-radius: 0; margin-bottom: 22px; }
.tool-eyebrow .dot { width: 6px; height: 6px; background: var(--tiffany); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-title { font-family: var(--fh); font-size: clamp(2rem, 5.5vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 10px; }
.hero-title .accent { color: var(--tiffany); }
.hero-sub { font-size: 1rem; color: var(--silver); max-width: 560px; margin-bottom: 32px; line-height: 1.75; }

/* ── FORM ──
   Calculator surfaces are flat solid Tiffany — same fill as the buttons —
   with a light graph-paper grid, matching the bento cards on /ai-toolkit.
   Text sits directly on that bright fill, so it goes dark; the submit
   button and brand tag flip to dark-on-Tiffany so they still read as
   distinct pressable "keys" against the card body, not blend into it. */
.assessment-form, .loading-state, .result-card {
  position: relative;
  background-color: var(--tiffany);
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 2px solid rgba(0,0,0,.22);
  border-top: 3px solid var(--black);
  border-radius: 0;
}
.assessment-form { padding: 28px; margin-bottom: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.form-brand-tag { position: absolute; top: -1px; right: 20px; background: var(--black); color: var(--tiffany); font-family: var(--fh); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 12px; border-radius: 0; }
.hub-url-bar .form-brand-tag { background: var(--tiffany); color: var(--black); }
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

label { display: block; font-family: var(--fm); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 7px; }
.input-hint { margin-top: 7px; font-family: var(--fm); font-size: .56rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.assessment-form label, .assessment-form .input-hint, .assessment-form .form-note { color: rgba(13,14,16,.72); }
input[type="text"], input[type="url"], input[type="email"], select { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 0; color: var(--white); font-family: var(--fb); font-size: .92rem; font-weight: 500; padding: 11px 14px; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; color-scheme: dark; }
input[type="url"], input[type="email"] { letter-spacing: 0; }
input:focus, select:focus { border-color: var(--tiffany); box-shadow: 0 0 0 3px rgba(10,186,181,.12); }
input::placeholder { color: var(--muted); opacity: 1; }
/* On the bright flat-Tiffany calculator cards, a translucent dark input box
   reads as barely-there. Solid white with dark text is unambiguous. */
.assessment-form input[type="text"], .assessment-form input[type="url"], .assessment-form input[type="email"] {
  background: #fff; color: #0d0e10; border-color: rgba(13,14,16,.3); color-scheme: light;
}
.assessment-form input::placeholder { color: rgba(13,14,16,.45); opacity: 1; }
.assessment-form input:focus { border-color: #0d0e10; box-shadow: 0 0 0 3px rgba(13,14,16,.18); }
.assessment-form input:-webkit-autofill, .assessment-form input:-webkit-autofill:hover, .assessment-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0d0e10;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #0d0e10;
}
/* Browser autofill (saved emails/addresses) forces its own background and
   text color, ignoring the rules above, unless overridden explicitly. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px rgba(13,14,16,.9) inset;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}
.hub-card input:-webkit-autofill, .assessment-form input:-webkit-autofill, .result-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--black);
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.5) inset;
}
select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
select option { background: var(--charcoal); color: var(--white); font-family: var(--fb); font-weight: 500; }

.consent-group { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.consent-item { display: flex; gap: 10px; align-items: flex-start; color: var(--silver); font-size: .84rem; line-height: 1.55; }
.consent-item input[type="checkbox"] { margin-top: .2rem; accent-color: var(--tiffany); flex: 0 0 auto; }
.consent-item label { margin: 0; font-family: var(--fb); font-size: .84rem; text-transform: none; letter-spacing: 0; color: var(--silver); cursor: pointer; }
.consent-item a { color: var(--tiffany); }
.consent-note { font-family: var(--fm); font-size: .56rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.assessment-form .consent-item, .assessment-form .consent-item label { color: rgba(13,14,16,.72); }
.assessment-form .consent-group { border-top-color: rgba(0,0,0,.15); }

.btn-submit { width: 100%; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--black); color: var(--tiffany); font-family: var(--fh); font-size: 1rem; font-weight: 700; padding: 14px 24px; border-radius: 0; border: none; transition: opacity .15s, transform .15s; letter-spacing: -.01em; }
.btn-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.btn-submit:disabled { opacity: .38; cursor: not-allowed; transform: none; }

.form-note { margin-top: 11px; font-family: var(--fm); font-size: .58rem; color: var(--muted); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ── LOADING ── */
.loading-state { display: none; text-align: center; padding: 52px 24px; }
.loading-state.active { display: block; }
.loader { width: 40px; height: 40px; border: 3px solid rgba(13,14,16,.2); border-top-color: var(--black); border-radius: 50%; margin: 0 auto 22px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-domain { font-family: var(--fh); font-size: 1rem; font-weight: 600; color: var(--black); margin-bottom: 6px; }
.loading-sub { font-family: var(--fm); font-size: .62rem; color: rgba(13,14,16,.62); text-transform: uppercase; letter-spacing: .08em; }
.loading-brand { margin-top: 24px; font-family: var(--fm); font-size: .58rem; color: rgba(13,14,16,.62); }
.loading-brand span { color: var(--black); font-weight: 700; }

/* ── ERROR ── */
.error-state { display: none; background-color: var(--surface); border: 1px solid rgba(224,82,82,.3); border-left: 3px solid var(--red); border-radius: 0; padding: 20px 22px; }
.error-state.active { display: block; }
.error-state p { font-size: .9rem; color: var(--silver); margin-bottom: 10px; }
.btn-retry { font-family: var(--fb); font-size: .82rem; color: var(--tiffany); background: none; border: 1px solid rgba(10,186,181,.3); padding: 7px 16px; border-radius: 0; cursor: pointer; transition: border-color .15s; }
.btn-retry:hover { border-color: var(--tiffany); }

/* ── RESULT CARD ── */
.result-card { display: none; overflow: hidden; }
.result-card.active { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Header and check rows are dark inset panels sitting on the bright card,
   so their existing light-text scheme (built for a dark surface) still works
   without touching every value below. */
.card-header { background-color: rgba(13,14,16,.82); border-bottom: 2px solid rgba(0,0,0,.3); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.card-header-brand { display: flex; align-items: center; gap: 8px; font-family: var(--fm); font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tiffany); }
.card-header-brand strong { font-family: var(--fh); font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--white); font-weight: 600; }
.card-header-domain { font-family: var(--fm); font-size: .7rem; color: var(--silver); }

.card-section { padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,.15); }
.card-section:last-of-type { border-bottom: none; }
.section-eyebrow { font-family: var(--fm); font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: var(--black); margin-bottom: 8px; }
.section-text { font-size: .9rem; color: rgba(13,14,16,.78); line-height: 1.7; }
.section-text em { font-style: normal; color: var(--black); font-weight: 700; }

.card-cta { background: rgba(13,14,16,.1); border-top: 2px solid var(--black); padding: 28px 24px; text-align: center; }
.cta-heading { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--black); }
.card-cta p { font-size: .88rem; color: rgba(13,14,16,.7); margin-bottom: 20px; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-cta-primary { display: inline-block; background: var(--black); color: var(--tiffany); font-family: var(--fh); font-size: .9rem; font-weight: 700; padding: 12px 24px; border-radius: 0; text-decoration: none; transition: opacity .15s; }
.btn-cta-primary:hover { opacity: .85; text-decoration: none; }
.btn-cta-secondary { display: inline-block; background: none; color: var(--black); font-family: var(--fh); font-size: .9rem; font-weight: 700; padding: 12px 24px; border-radius: 0; text-decoration: none; border: 1.5px solid rgba(13,14,16,.45); transition: opacity .15s, border-color .15s; }
.btn-cta-secondary:hover { opacity: .85; text-decoration: none; border-color: var(--black); }
.btn-retake { display: inline-block; background: none; color: rgba(13,14,16,.65); font-family: var(--fb); font-size: .84rem; padding: 12px 18px; border-radius: 0; border: 1px solid rgba(13,14,16,.3); cursor: pointer; transition: color .15s, border-color .15s; }
.btn-retake:hover { color: var(--black); border-color: rgba(13,14,16,.6); }
.cta-brand-note { margin-top: 16px; font-family: var(--fm); font-size: .58rem; color: rgba(13,14,16,.6); text-transform: uppercase; letter-spacing: .08em; }
.cta-brand-note a { color: var(--black); text-decoration: underline; }

.disclaimer { margin-top: 16px; font-family: var(--fm); font-size: .58rem; color: var(--muted); text-align: center; line-height: 1.6; padding: 0 12px; }
.result-card .disclaimer { color: rgba(13,14,16,.6); }

/* ── CHECK ITEM ROWS ── */
.check-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(0,0,0,.25); border-radius: 0; margin-bottom: 8px; background-color: rgba(13,14,16,.78); }
.check-item:last-child { margin-bottom: 0; }
.check-item-text { min-width: 0; }
.check-label { font-family: var(--fh); font-size: .82rem; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.check-value { font-family: var(--fm); font-size: .74rem; color: var(--silver); word-break: break-word; }
.check-badge { flex-shrink: 0; font-family: var(--fm); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 0; white-space: nowrap; margin-top: 2px; }
.check-badge.found { color: var(--green); background: rgba(82,201,138,.08); border: 1px solid rgba(82,201,138,.22); }
.check-badge.missing { color: var(--red); background: rgba(224,82,82,.08); border: 1px solid rgba(224,82,82,.22); }
.check-badge.warning { color: var(--amber); background: rgba(224,168,82,.08); border: 1px solid rgba(224,168,82,.22); }
.check-badge.info { color: var(--silver); background: rgba(255,255,255,.03); border: 1px solid var(--border); }

/* ── SCHEMA OUTPUT PANEL ── */
.output-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-output { font-family: var(--fb); font-size: .82rem; font-weight: 600; color: var(--black); background: rgba(13,14,16,.1); border: 1.5px solid rgba(13,14,16,.4); padding: 9px 16px; border-radius: 0; cursor: pointer; transition: background .15s, border-color .15s; display: inline-flex; align-items: center; gap: 7px; }
.btn-output:hover { background: rgba(13,14,16,.18); border-color: var(--black); }
.btn-output.copied { color: #0a3d24; border-color: rgba(10,61,36,.5); background: rgba(82,201,138,.35); }
.output-code { background: rgba(0,0,0,.35); border: 1px solid var(--border); border-radius: 0; padding: 16px; font-family: var(--fm); font-size: .74rem; color: var(--silver); line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; }

/* ── CROSS-TOOL LINKS ── */
.crosslinks-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.crosslinks-heading { font-family: var(--fm); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; }
.crosslinks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.crosslink-chip { display: block; font-family: var(--fb); font-size: .82rem; font-weight: 500; color: var(--silver); background: rgba(255,255,255,.02); border: 1px solid var(--border); padding: 10px 14px; border-radius: 0; transition: border-color .15s, color .15s; }
.crosslink-chip:hover { color: var(--tiffany); border-color: rgba(10,186,181,.35); text-decoration: none; }

/* ── ABOUT / FAQ SECTION ── */
.about-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.about-section h2 { font-family: var(--fh); font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.about-section h3 { font-family: var(--fh); font-size: 1.02rem; font-weight: 700; margin: 20px 0 8px; }
.about-section p { font-size: .95rem; color: var(--silver); margin-bottom: 14px; line-height: 1.75; }
.about-section a { color: var(--tiffany); }
.about-brand-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(10,186,181,.07); border: 1px solid rgba(10,186,181,.18); padding: 8px 16px; border-radius: 0; margin-top: 8px; font-family: var(--fh); font-size: .85rem; font-weight: 700; color: var(--white); }
.about-brand-icon { display: block; flex-shrink: 0; }
.about-brand-tag span { color: var(--tiffany); }

/* ── COVERAGE BADGE ── */
.coverage-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--silver); background: rgba(255,255,255,.03); border: 1px solid var(--border); padding: 6px 13px; border-radius: 0; margin-bottom: 28px; }
.coverage-badge.global { color: var(--tiffany); border-color: rgba(10,186,181,.25); background: var(--tiffany-glow); }
.coverage-badge i { font-size: .78rem; }

/* ── HUB DASHBOARD (ai-toolkit.html) ──
   A plain, quiet dark panel, not another bright card. Tiffany stays an
   accent only (border, icons, focus ring, button), so the one thing asking
   for attention here is the URL field itself, not the container. */
.hub-url-bar {
  background-color: var(--charcoal);
  border: 1px solid var(--border);
  border-top: 3px solid var(--tiffany);
  padding: 24px;
  margin-bottom: 44px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.hub-url-bar .input-hint, .hub-url-bar label { color: var(--silver); }
.hub-primary-field { margin-bottom: 20px; }
.hub-primary-field label { font-size: .68rem; margin-bottom: 9px; }

/* Generic icon+field wrap — used for the URL field and every optional field
   (industry, location, email) so they all read as one consistent input style,
   same height, same padding, same font size, no field standing out by size. */
.hub-field-wrap { position: relative; display: flex; }
.hub-field-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tiffany); font-size: 1.05rem; pointer-events: none; transition: color .2s, transform .2s; z-index: 1; }
.hub-field-wrap input, .hub-field-wrap select { width: 100%; padding: 11px 14px 11px 40px; font-size: .92rem; background: rgba(0,0,0,.32); border-width: 1.5px; }
.hub-field-wrap select { padding-right: 36px; }
.hub-field-wrap select:invalid { color: var(--muted); }
.hub-field-wrap input:focus, .hub-field-wrap select:focus { box-shadow: 0 0 0 3px rgba(10,186,181,.14); }
.hub-field-wrap input:focus + i, .hub-field-wrap select:focus + i,
.hub-field-wrap:focus-within i { color: var(--white); }

.hub-consent { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.hub-select-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.hub-select-actions button { background: none; border: none; color: var(--tiffany); font-family: var(--fb); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; }
.hub-select-actions button:hover { text-decoration: underline; }
.hub-select-count { font-family: var(--fm); font-size: .62rem; color: var(--silver); text-transform: uppercase; letter-spacing: .08em; margin-left: auto; }
.hub-run-btn { width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--tiffany); color: var(--black); font-family: var(--fh); font-size: 1rem; font-weight: 700; padding: 14px 24px; border: none; letter-spacing: -.01em; transition: opacity .15s, transform .15s; cursor: pointer; }
.hub-run-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.hub-run-btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.hub-run-btn.secondary { background: none; color: var(--tiffany); border: 1px solid rgba(10,186,181,.4); margin-top: 6px; font-size: .88rem; padding: 11px 20px; }
.hub-run-btn.secondary:hover:not(:disabled) { background: rgba(10,186,181,.06); }
.hub-note { margin-top: 14px; font-family: var(--fm); font-size: .58rem; color: var(--muted); text-align: center; }
.hub-note.error { color: var(--red); }

/* One quiet disclosure holds every optional field, so the collapsed state
   is a single line, not a stack of headings and hints. */
.hub-details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.hub-details summary { cursor: pointer; font-family: var(--fb); font-size: .86rem; font-weight: 600; color: var(--silver); list-style: none; display: flex; align-items: center; gap: 8px; }
.hub-details summary::-webkit-details-marker { display: none; }
.hub-details summary i.bi-chevron-right { color: var(--tiffany); font-size: .74rem; flex-shrink: 0; transition: transform .2s; }
.hub-details[open] summary i.bi-chevron-right { transform: rotate(90deg); }
.hub-details-hint { font-family: var(--fm); font-size: .62rem; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.hub-details-body { margin-top: 16px; display: grid; gap: 16px; }
.hub-details-body .form-row { gap: 14px; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* ── BENTO STEP ZONES ── */
.hub-step-zone { margin-bottom: 48px; }
.hub-step-label { font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tiffany); margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.hub-step-label .num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--tiffany); border-radius: 50%; font-size: .62rem; color: var(--tiffany); flex-shrink: 0; }
.hub-step-heading { font-family: var(--fh); font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.hub-step-sub { font-size: .9rem; color: var(--silver); margin-bottom: 22px; max-width: 640px; line-height: 1.6; }

.hub-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hub-bento .hub-card.span-2 { grid-column: span 2; }
.hub-bento .hub-card.span-4 { grid-column: span 4; }
@media (max-width: 900px) {
  .hub-bento { grid-template-columns: repeat(2, 1fr); }
  .hub-bento .hub-card.span-4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .hub-bento { grid-template-columns: 1fr; }
  .hub-bento .hub-card.span-2, .hub-bento .hub-card.span-4 { grid-column: span 1; }
}
.hub-card.hero-card { padding: 30px 28px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hub-card.hero-card .hub-card-icon { font-size: 2.4rem; }
.hub-card.hero-card .hub-card-title { font-size: 1.5rem; }
.hub-card.hero-card .hub-card-desc { min-height: 0; max-width: 46ch; }
.hub-card.hero-card .hub-card-main { flex: 1; min-width: 240px; }

/* Calculator cards match the buttons exactly — flat solid Tiffany, same fill
   as .hub-run-btn — with a light graph-paper grid overlaid for the "cute
   calculator" texture. Text sits directly on that bright fill, so it goes
   dark (same convention as the buttons' black-on-Tiffany label). */
.hub-card {
  position: relative;
  background-color: var(--tiffany);
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 2px solid rgba(0,0,0,.22);
  border-top: 3px solid var(--black);
  padding: 22px 20px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  cursor: pointer;
}
.hub-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.hub-card.selected { border-color: var(--black); box-shadow: 0 0 0 1px var(--black), 0 16px 40px rgba(0,0,0,.24); }
.hub-card a, .hub-card label { cursor: pointer; }
.hub-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hub-card-check { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.hub-card-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--black); cursor: pointer; }
.hub-card-icon { color: var(--black); font-size: 1.1rem; }
.hub-card-step { font-family: var(--fm); font-size: .56rem; color: rgba(13,14,16,.62); text-transform: uppercase; letter-spacing: .08em; }
.hub-card-title { font-family: var(--fh); font-size: 1.02rem; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.hub-card-desc { font-size: .84rem; color: rgba(13,14,16,.78); line-height: 1.6; margin-bottom: 14px; min-height: 3.2em; }
.hub-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hub-card-link { font-family: var(--fb); font-size: .8rem; font-weight: 600; color: var(--black); text-decoration: underline; }
.hub-card-link:hover { opacity: .7; }
/* The teal-on-glow coverage-badge is built for a dark card; on the flat
   Tiffany fill it needs dark text/border instead or it disappears. */
.hub-card .coverage-badge, .hub-card .coverage-badge.global { color: var(--black); background: rgba(13,14,16,.12); border-color: rgba(13,14,16,.3); }

.hub-email-row { display: none; margin-top: 10px; }
.hub-email-row.active { display: block; }

/* ── CONSOLIDATED RESULTS — bento dashboard ── */
.hub-results { margin-top: 12px; margin-bottom: 48px; }
.hub-results:empty { display: none; }
.hub-results-heading { font-family: var(--fm); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tiffany); margin-bottom: 16px; }
/* Column-flow, not CSS grid — the checker cards vary a lot in height (a 7-item
   list vs. a 3-item one, a tall JSON-LD block), and grid's row-based sizing
   left ragged empty space under the shorter cards in each row. Columns pack
   cards by height instead, so there's no dead space between them. */
.hub-results-grid { column-count: 3; column-gap: 16px; }
.hub-result-card { break-inside: avoid; margin-bottom: 16px; }
.hub-result-card.hero { column-span: all; }
.hub-result-card.hero .card-header-brand strong { font-size: .95rem; }
@media (max-width: 900px) { .hub-results-grid { column-count: 2; } }
@media (max-width: 640px) { .hub-results-grid { column-count: 1; } }
.hub-result-loading { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-family: var(--fm); font-size: .68rem; color: rgba(13,14,16,.62); }
.hub-result-loading .mini-loader { width: 16px; height: 16px; border: 2px solid rgba(13,14,16,.2); border-top-color: var(--black); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
.hub-grade-row { display: flex; align-items: center; gap: 16px; padding: 20px; flex-wrap: wrap; }
.hub-grade-letter { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 700; font-size: 1.5rem; border-radius: 0; flex-shrink: 0; }
.hub-grade-info { flex: 1; min-width: 180px; }
.hub-grade-score { font-family: var(--fh); font-size: 1.15rem; font-weight: 700; color: var(--black); }
.hub-grade-label { font-family: var(--fm); font-size: .62rem; color: rgba(13,14,16,.6); text-transform: uppercase; letter-spacing: .06em; }
.hub-result-link { font-family: var(--fb); font-size: .8rem; font-weight: 600; color: var(--black); text-decoration: underline; white-space: nowrap; }
.hub-result-link:hover { opacity: .7; }

/* ── RESPONSIVE ── */
@media (max-width: 520px) {
  .page-wrap { padding: 32px 16px 72px; }
  .assessment-form { padding: 22px 16px; }
  .card-header { padding: 12px 16px; }
  .card-section { padding: 16px; }
  .card-cta { padding: 22px 16px; }
  .check-item { flex-direction: column; }
  .hub-url-bar { padding: 20px 16px; }
  .hub-select-count { margin-left: 0; }
}