/* =======================================================================
   Install Day — COMPLETE, improved styles (mobile-first, print-ready)
   Last updated: 2025-08-19
   ======================================================================= */

/* -----------------------------
   Root tokens & fallbacks
   ----------------------------- */

   :root{
    /* Brand fallbacks (use values from core.css if present) */
    --clr-primary: var(--brand-primary, #2563eb);
    --clr-positive: var(--brand-positive, #16a34a);
    --clr-danger: var(--brand-danger, #dc2626);
  
    /* Surfaces */
    --install-surface: #ffffff;
    --install-elev: #fafafa;
    --install-border: #e5e7eb;
    --install-muted: #6b7280;
    --install-chip: #f3f4f6;
    --install-ring: rgba(37,99,235,.28);
  
    /* Radii & shadows */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 6px 16px rgba(0,0,0,.08);
  
    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  
    /* Layout */
    --container-max: 1100px;
  
    /* Safe areas */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  
    color-scheme: light dark;
  }
  
  :root[data-theme="light"],
  [data-theme="light"]{
    --install-surface: #ffffff;
    --install-elev: #fafafa;
    --install-border: #e5e7eb;
    --install-muted: #6b7280;
    --install-chip: #f3f4f6;
    --install-ring: rgba(37,99,235,.28);
  }
  
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --install-surface: #0f141b;
      --install-elev: #0b0f14;
      --install-border: #303744;
      --install-muted: #9ca3af;
      --install-chip: #121821;
      --install-ring: rgba(96,165,250,.35);
    }
  }
  :root[data-theme="dark"],
  [data-theme="dark"]{
    --install-surface: #0f141b;
    --install-elev: #0b0f14;
    --install-border: #303744;
    --install-muted: #9ca3af;
    --install-chip: #121821;
    --install-ring: rgba(96,165,250,.35);
  }
  
  /* -----------------------------
     Global containment & resets
     ----------------------------- */
  
  *, *::before, *::after { box-sizing: border-box; min-inline-size: 0; }
  
  html, body{
    margin: 0; padding: 0;
    overflow-x: hidden; /* kill rogue horizontal scrolls */
    font-family: var(--font-sans);
    background: var(--install-surface);
  }
  
  img, svg, video, canvas, iframe{ max-width: 100%; height: auto; display: block; }
  
  p, h1, h2, h3, h4, h5, h6{
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }
  
  code, pre{ white-space: pre-wrap; word-break: break-word; }
  
  .visually-hidden{
    position: absolute !important; clip: rect(0 0 0 0);
    clip-path: inset(50%); height: 1px; width: 1px;
    overflow: hidden; white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }
  .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clamp-2{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  
  /* -----------------------------
     Layout
     ----------------------------- */
  
  .container{
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 1.25rem);
  }
  
  /* HERO */
  .hero--install{
    position: relative;
    overflow: clip;
    border: 1px solid var(--install-border);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(1200px 600px at 80% -20%, color-mix(in srgb, var(--clr-primary) 18%, transparent), transparent 60%),
      var(--install-surface);
    padding: clamp(1rem, 1.6vw, 1.25rem);
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1rem;
  }
  @media (max-width: 900px){ .hero--install{ grid-template-columns: 1fr; } }
  
  .hero--install .hero__content .eyebrow{
    font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--clr-primary);
    display: inline-flex; align-items: center; gap: .5rem;
  }
  .hero--install .hero__content h1{
    margin: .25rem 0 .5rem; line-height: 1.1; font-size: clamp(1.4rem, 4.2vw, 2rem);
    text-wrap: balance;
  }
  .hero--install .hero__content .lead{ max-width: 70ch; color: var(--install-muted); }
  .hero--install .hero__cta{ display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
  .hero--install .hero__art{ display: grid; place-items: center; }
  .hero--install .hero__art .rings{
    width: min(420px, 80%); height: min(420px, 80%); border-radius: 9999px;
    border: 40px solid color-mix(in srgb, var(--clr-primary) 12%, transparent);
    outline: 16px solid color-mix(in srgb, var(--clr-primary) 8%, transparent);
    transform: translate(10%, -10%);
  }
  
  /* PROGRESS */
  .progress.card{
    display: grid; gap: 1rem; margin-top: 1rem;
    background: var(--install-elev);
    border-radius: var(--radius-xl);
    border: 1px solid var(--install-border);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }
  .progress__bars{ display: grid; gap: .75rem; grid-template-columns: 1fr; }
  .prog{ display: grid; grid-template-columns: 140px 1fr 80px; gap: .75rem; align-items: center; }
  @media (max-width: 560px){ .prog{ grid-template-columns: 1fr; } .prog__meta{ text-align: left; } }
  .prog__label{ font-weight: 600; }
  .prog__bar{
    height: .6rem; background: var(--install-chip);
    border: 1px solid var(--install-border); border-radius: 999px; overflow: hidden;
  }
  .prog__bar > span{ display: block; height: 100%; width: 0%; background: var(--clr-primary); transition: width .35s ease; }
  .prog__meta{ color: var(--install-muted); font-size: .9rem; text-align: right; }
  .progress__actions{ display: flex; flex-wrap: wrap; gap: .5rem; }
  
  /* CHECKLIST SECTIONS */
  .checklists{ display: grid; gap: 1rem; margin-top: 1rem; }
  
  .install-block{
    border: 1px solid var(--install-border);
    border-radius: var(--radius-lg);
    background: var(--install-surface);
    overflow: clip;
    box-shadow: var(--shadow-sm);
  }
  .install-block > summary{
    display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center;
    padding: 1rem 1.25rem; cursor: pointer; list-style: none; position: relative;
  }
  .install-block > summary::-webkit-details-marker{ display: none; }
  .install-block > summary::after{
    content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); opacity: .65; margin-inline-start: .5rem;
  }
  .install-block[open] > summary::after{ transform: rotate(45deg); }
  .install-block > summary:hover{ background: color-mix(in srgb, var(--clr-primary) 6%, transparent); }
  .install-block[open] > summary{ border-bottom: 1px solid var(--install-border); }
  .install-block .badge{
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
    background: var(--clr-primary); color: #fff; font-weight: 700;
  }
  .install-block .summary__text h2{ margin: 0; font-size: 1.25rem; }
  .install-block .summary__text p{ margin: 0; color: var(--install-muted); }
  .install-block .pill{ padding: .25rem .6rem; border-radius: 999px; background: var(--install-chip); border: 1px solid var(--install-border); font-size: .85rem; }
  .block__content{ padding: 1rem 1.25rem 1.25rem; }
  
  /* TASK LISTS */
  .task-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
  .task-list label{
    display: grid; grid-template-columns: 1.35rem 1fr; align-items: start; gap: .65rem; line-height: 1.35;
  }
  .task-list input[type="checkbox"]{ margin-top: .2rem; transform: scale(1.05); accent-color: var(--clr-primary); }
  
  /* TWO-COLUMN GRID WRAPPER */
  .grid.two{ display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
  @media (max-width: 960px){ .grid.two{ grid-template-columns: 1fr; } }
  
  /* CALCULATOR */
  .calc{ margin-top: .75rem; }
  .calc__row{ display: grid; gap: .75rem; grid-template-columns: repeat(3,1fr); align-items: end; }
  .calc__row + .calc__row{ grid-template-columns: 1fr auto; align-items: center; }
  @media (max-width: 640px){
    .calc__row{ grid-template-columns: 1fr; }
    .calc__row + .calc__row{ grid-template-columns: 1fr 1fr; }
  }
  .calc input[type="number"], .calc input[type="range"]{
    width: 100%; padding: .6rem .75rem; border: 1px solid var(--install-border);
    border-radius: var(--radius-md); background: var(--install-surface);
  }
  .calc__out{ margin-top: .5rem; display: grid; gap: .25rem; }
  
  /* EQUIPMENT GALLERY (examples) */
  .equip-grid{
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem;
    align-items: start; /* prevent stretching → no tall empty columns */
  }
  @media (max-width: 1100px){ .equip-grid{ grid-template-columns: repeat(3,1fr); } }
  @media (max-width: 800px){ .equip-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 520px){ .equip-grid{ grid-template-columns: 1fr; } }
  
  .equip-card{
    display: grid; gap: .35rem; padding: .75rem; border: 1px solid var(--install-border);
    border-radius: var(--radius-md); background: var(--install-surface); box-shadow: var(--shadow-sm);
    align-self: start; height: auto; /* size to content, not grid row height */
  }
  .equip-card figure{
    margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--install-chip);
    aspect-ratio: auto; min-height: 160px; /* keep fallback visible with no image */
  }
  .equip-card img{
    width: 100%; height: auto; object-fit: cover; display: block;
  }
  .equip-card .fallback{ position: absolute; inset: 0; display: grid; place-items: center; color: var(--install-muted); font-size: 2rem; }
  .equip-card h4{ margin: .25rem 0 0; font-size: 1rem; }
  .equip-card p{ margin: 0; color: var(--install-muted); font-size: .9rem; overflow-wrap: anywhere; }
  
  /* =========================
     MOVING GEAR (authoritative)
     ========================= */
  
  .gear-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
    align-items: start; /* prevent card stretching causing blank columns */
  }
  @media (max-width: 1100px){ .gear-grid{ grid-template-columns: 1fr; } }
  
  .gear-card{
    display: grid;
    gap: 1rem;
    align-items: start; /* critical: no inner stretch → no tall white space */
    border: 1px solid var(--install-border);
    border-radius: var(--radius-md);
    background: var(--install-surface);
    padding: .95rem;
    box-shadow: var(--shadow-sm);
    container-type: inline-size; /* for @container rule below (supported browsers) */
    align-self: start; height: auto;
  }
  @media (max-width: 640px){ .gear-card{ grid-template-columns: 1fr; } }
  
  .gear-card figure{
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--install-chip);
    position: relative;
    aspect-ratio: auto;       /* prefer natural media height */
    min-height: 180px;        /* ensures visible fallback if image missing */
    flex-shrink: 0;           /* avoid image eating text width */
  }
  .gear-card img{ width: 100%; height: auto; object-fit: cover; display: block; }
  .gear-card .fallback{
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--install-muted); font-size: 2rem;
  }
  
  /* Text column containment: absolutely no overflow */
  .gear-card > div{
    min-width: 0;
    display: grid;
    align-content: start;
    gap: .45rem;
  }
  .gear-card h4,
  .gear-card p,
  .gear-card .tags,
  .gear-card .howto{ min-width: 0; overflow-wrap: anywhere; }
  
  /* Typography polish */
  .gear-card h4{
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .005em;
    font-size: 1.05rem;
  }
  .gear-card p{
    margin: 0;
    line-height: 1.5;
    color: var(--install-muted);
    hyphens: auto;
  }
  
  /* Spec tags (wrap gracefully) */
  .tags{ display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .45rem; align-items: center; }
  .tag{
    display: inline-block; font-size: .78rem; padding: .18rem .5rem;
    border: 1px solid var(--install-border); border-radius: 999px; background: var(--install-chip);
    max-width: 100%; white-space: normal; word-break: break-word; hyphens: auto;
  }
  
  /* “Why it’s good” as bullets */
  .why{ list-style: none; padding: 0; margin: .35rem 0 .1rem; display: grid; gap: .3rem; }
  .why li{
    display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start;
  }
  .why li::before{
    content: "\f00c"; /* Font Awesome check */
    font: var(--fa-font-solid);
    line-height: 1;
    opacity: .9;
    margin-top: .15rem;
  }
  
  /* “How to use” disclosure */
  .howto details{ border-top: 1px dashed var(--install-border); margin-top: .5rem; padding-top: .5rem; }
  .howto summary{
    list-style: none; cursor: pointer; font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .25rem; border-radius: 6px;
  }
  .howto summary::-webkit-details-marker{ display: none; }
  .howto summary::after{
    content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); opacity: .6; margin-inline-start: .25rem;
  }
  .howto details[open] summary::after{ transform: rotate(45deg); }
  .howto summary:hover{ background: color-mix(in srgb, var(--clr-primary) 6%, transparent); }
  .howto ol{ margin: .45rem 0 0 1rem; padding: 0; }
  .howto li{ margin: .22rem 0; }
  
  /* Container-aware stack for narrow cards */
  @container (max-width: 560px){
    .gear-card{ grid-template-columns: 1fr; }
    .gear-card figure{ min-height: 160px; }
  }
  /* Fallback for browsers without container queries */
  @media (max-width: 600px){
    .gear-card{ grid-template-columns: 1fr; }
    .gear-card figure{ min-height: 160px; }
  }
  
  /* Ultra-small tightening */
  @media (max-width: 420px){
    .gear-card{ padding: .85rem; gap: .75rem; }
    .gear-card h4{ font-size: 1rem; }
    .tag{ font-size: .76rem; padding: .16rem .45rem; }
  }
  
  /* Dark theme subtlety for spec pills */
  :root[data-theme="dark"] .tag,
  [data-theme="dark"] .tag{
    border-color: color-mix(in srgb, var(--install-border) 70%, transparent);
    background: var(--install-chip);
  }
  
  /* -----------------------------
     Callout
     ----------------------------- */
  .callout{
    display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: 1rem;
    border: 1px solid var(--install-border); border-radius: var(--radius-lg); background: var(--install-chip);
    margin-top: .75rem;
  }
  .callout__icon{
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
    background: var(--clr-primary); color: #fff;
  }
  .callout--info{ border-color: var(--install-border); }
  
  /* -----------------------------
     Sticky action bar
     ----------------------------- */
  .bar-actions.bottom{
    position: sticky; bottom: 0;
    background: color-mix(in srgb, var(--install-surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
    border-top: 1px solid var(--install-border);
    padding: calc(.75rem + var(--safe-bottom)) clamp(.75rem, 2vw, 1rem) .75rem;
    margin: 1.25rem 0 0;
    display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-start;
    z-index: 10;
  }
  .micro-note{ color: var(--install-muted); }
  
  /* -----------------------------
     Cards & typography utils
     ----------------------------- */
  .card{
    background: var(--install-surface);
    border: 1px solid var(--install-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }
  .h4{ font-size: 1.1rem; margin: 0 0 .3rem; }
  .steps{ margin: .5rem 0 0 1rem; }
  .steps li{ margin: .25rem 0; }
  
  /* Focus ring improvements */
  :where(button, a, input, select, summary, [role="button"]):focus-visible{
    outline: 3px solid var(--install-ring);
    outline-offset: 2px;
    border-radius: 8px;
  }
  
  /* -----------------------------
     Print Setup Dialog
     ----------------------------- */
  #printSetup{
    border: 1px solid var(--install-border);
    border-radius: 12px;
    padding: 0;
    max-width: 640px;
    width: min(92vw, 640px);
    background: var(--install-surface);
    color: inherit;
    box-shadow: var(--shadow-md);
  }
  .print-form{ padding: .75rem; }
  .print-form__head{
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem .5rem .25rem; border-bottom: 1px solid var(--install-border);
  }
  .print-form__grid{
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; padding: .75rem .25rem;
  }
  @media (max-width: 520px){ .print-form__grid{ grid-template-columns: 1fr; } }
  .field label{ font-weight: 600; display: block; margin-bottom: .25rem; }
  .field select{
    width: 100%; padding: .55rem .6rem; border: 1px solid var(--install-border); border-radius: 8px;
    background: var(--install-surface); color: inherit;
  }
  .field .switch{ display: inline-flex; gap: .6rem; align-items: center; font-weight: 600; }
  .field .switch input{ transform: scale(1.05); accent-color: var(--clr-primary); }
  .print-form__actions{
    display: flex; gap: .5rem; justify-content: flex-end; padding: .25rem .25rem .5rem;
    border-top: 1px solid var(--install-border);
  }
  .icon-btn{ background: transparent; border: 0; padding: .4rem; border-radius: 8px; cursor: pointer; color: inherit; }
  .icon-btn:hover{ background: var(--install-chip); }
  
  /* -----------------------------
     Print styles (professional)
     ----------------------------- */
  @media print{
    /* Default page setup (JS may override with a dynamic @page) */
    @page{ size: Letter portrait; margin: 12mm; }
  
    :root{ color-scheme: light only; } /* Force legible palette */
    html, body{
      background: #fff !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  
    /* Hide chrome */
    header.nav, .footer, .bar-actions.bottom, .hero__art, #printSetup{ display: none !important; }
  
    /* Print header block (provided in HTML) */
    .print-header{
      display: block !important;
      border-bottom: 2px solid #e5e7eb;
      margin-bottom: .6rem; padding-bottom: .4rem;
    }
    .print-header__brand{ font-weight: 800; font-size: 1rem; }
    .print-header__title{ font-size: 1.25rem; font-weight: 800; }
    .print-header__meta{ color: #6b7280; font-size: .9rem; }
  
    /* Layout tweaks */
    .container{ max-width: none; padding: 0; }
    .hero--install{ border: 0; border-radius: 0; padding: 0; background: transparent; }
    .hero--install .lead{ color: #374151; }
  
    /* Components */
    .card{ border: 1px solid #e5e7eb; box-shadow: none !important; }
    .install-block{ break-inside: avoid; }
    .install-block > summary{ background: #f9fafb; }
    .install-block .pill{ background: #f3f4f6; border-color: #e5e7eb; }
    .callout{ background: #f9fafb; border-color: #e5e7eb; }
  
    /* Print-friendly checkboxes */
    .task-list input[type="checkbox"]{
      appearance: none; -webkit-appearance: none;
      width: 14px; height: 14px; border: 1.6px solid #111827; border-radius: 3px; display: inline-grid; place-content: center;
      transform: none; margin-top: .2rem;
    }
    .task-list input[type="checkbox"]:checked::after{
      content: "✓"; font-weight: 800; font-size: 12px; line-height: 1; transform: translateY(-.5px);
    }
  
    /* Page breaks */
    .install-block + .install-block{ break-before: page; }
    .install-block .grid.two > .card{ break-inside: avoid; }
  
    /* Optional toggles driven by JS (class names on <html>) */
    html.print-mono *{ color: #111 !important; background: #fff !important; box-shadow: none !important; }
    html.print-compact .card{ padding: .7rem; }
    html.print-compact .install-block > summary{ padding: .6rem .8rem; }
    html.print-compact .block__content{ padding: .6rem .8rem .8rem; }
    html.print-compact .task-list{ gap: .4rem; }
    html.print-compact .equip-grid{ grid-template-columns: repeat(3, 1fr); }
    html.print-compact .equip-card{ padding: .5rem; }
  
    html.print-no-hero .hero--install{ display: none !important; }
    html.print-no-progress .progress{ display: none !important; }
    html.print-no-gallery .equip-grid,
    html.print-no-gallery .gear-grid{ display: none !important; }
  
    /* Give summaries a static look on paper */
    details > summary::-webkit-details-marker{ display: none; }
    details > summary::marker{ content: ""; }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){ .prog__bar > span{ transition: none; } }
  
  /* Active nav helper (if core.css lacks it) */
  .nav__links .nav__link.active{
    color: var(--clr-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
  /* -----------------------------
     Overflow hardening (global)
     ----------------------------- */
  
  /* Contain long links/URLs */
  .card a, .micro-note a{ word-break: break-word; }
  
  /* Ensure figures never overflow their cards */
  .card figure, .equip-card figure, .gear-card figure{ max-width: 100%; }
  
  /* Tables (future-proofing) */
  .card table{ width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius-sm); }
  .card table th, .card table td{ text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--install-border); }
  .card table tr:last-child td{ border-bottom: 0; }
  

  /* --- Affiliate click-through cards --- */
.gear-card{
  position: relative;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}
.gear-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Full-card, accessible overlay link */
.gear-card a.card-link{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-md);
}
.gear-card a.card-link:focus-visible{
  outline: 3px solid var(--install-ring);
  outline-offset: 0;
  border-radius: var(--radius-md);
}

/* Keep interactive content above the overlay so details/summary still work */
.gear-card .howto,
.gear-card details,
.gear-card summary,
.gear-card .tags{
  position: relative;
  z-index: 2;
}
/* --- Centered "Last updated" badge in hero rings --- */
.hero--install .hero__art .rings{
  position: relative;
  display: grid;
  place-items: center;
  /* subtle inner glow */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clr-primary) 10%, transparent),
              inset 0 0 60px color-mix(in srgb, var(--clr-primary) 12%, transparent);
}

/* Badge container */
.rings__badge{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: grid;
  gap: .25rem;
  place-items: center;
  text-align: center;
  padding: .6rem .9rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--install-surface) 70%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid var(--install-border);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  min-width: clamp(200px, 48vw, 280px);
}

/* Badge text */
.rings__badge .label{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}
.rings__badge time{
  font-weight: 800;
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  line-height: 1.15;
}

/* Gentle pulse ring accent */
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-primary) 30%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.rings__badge::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  animation: ringPulse 2.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .rings__badge::after{ animation: none; }
}

/* Hide the inline "last updated" text line in the hero micro-note once badge mounts (JS adds .has-badge on <html>) */
html.has-badge .hero--install .micro-note strong + time#lastUpdated,
html.has-badge .hero--install .micro-note strong{
  display: none !important;
}
/* Also remove the preceding <br> spacing if present */
html.has-badge .hero--install .micro-note br:last-of-type{ display: none !important; }
/* --- Mobile fix: center rings + badge with content and prevent clipping --- */
@media (max-width: 900px){
  /* Let the ring be fully visible on small screens */
  .hero--install{ overflow: visible; }

  /* Center the art column within the single-column hero */
  .hero--install .hero__art{
    justify-self: center;
    align-self: start;
  }

  /* Center the ring, remove desktop offset, and size responsively */
  .hero--install .hero__art .rings{
    transform: none !important;
    margin: 0 auto !important;
    width: clamp(240px, 72vw, 380px);
    aspect-ratio: 1 / 1;                   /* keep it perfectly circular */
    border-width: min(8vw, 40px);
    outline-width: min(3.5vw, 16px);
  }

  /* Scale the badge neatly on phones */
  .rings__badge{
    min-width: clamp(180px, 84vw, 280px);
    padding: .55rem .8rem;
  }
  .rings__badge time{
    font-size: clamp(1rem, 5.2vw, 1.15rem);
  }
}
/* =========================
   Bottom full-width notes
   ========================= */
.install-notes{
  position: relative;
  width: 100%;
  margin-top: 1.25rem;
  padding: clamp(1rem, 3.5vw, 2rem) 0;
  overflow: clip;
  /* soft gradient that stands out */
  background:
    radial-gradient(1200px 500px at 95% 10%, color-mix(in srgb, var(--clr-primary) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--clr-primary) 8%, transparent), transparent 22%),
    color-mix(in srgb, var(--install-elev) 92%, transparent);
  border-top: 1px solid var(--install-border);
  border-bottom: 1px solid var(--install-border);
}
.install-notes__bg::before,
.install-notes__bg::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.install-notes__bg::before{
  background:
    radial-gradient(800px 240px at -10% 100%, color-mix(in srgb, var(--clr-primary) 16%, transparent), transparent 70%);
  opacity: .55;
}
.install-notes__bg::after{
  inset: auto 0 0 0;
  height: 16px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--clr-primary) 55%, transparent),
      color-mix(in srgb, var(--clr-primary) 25%, transparent));
  opacity: .25;
}

.install-notes__inner{ display: grid; gap: 1rem; }

.install-notes__head .eyebrow{
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-primary);
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
}
.install-notes__head h2{ margin: .15rem 0 .25rem; line-height: 1.15; }
.install-notes__head .sublead{ margin: 0; color: var(--install-muted); max-width: 72ch; }

.install-notes__grid{
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px){ .install-notes__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .install-notes__grid{ grid-template-columns: 1fr; } }

.notes-card{
  background: var(--install-surface);
  border: 1px solid var(--install-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  display: grid; gap: .5rem;
  align-self: start; height: auto;
}
.notes-title{
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; margin: 0;
}
.notes-list{
  margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem;
}
.notes-list li{
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; line-height: 1.45;
}
.notes-list li::before{
  content: "\f111"; /* Font Awesome circle */
  font: var(--fa-font-solid);
  font-size: .5rem;
  line-height: 1.2;
  margin-top: .45rem;
  color: var(--clr-primary);
}

/* Big reminder pill */
.notes-shout{
  display: grid; place-items: center; text-align: center;
  padding: 1rem; border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--clr-primary) 60%, var(--install-border));
  background: color-mix(in srgb, var(--clr-primary) 10%, var(--install-chip));
  color: inherit;
  font-weight: 900; letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
}
.notes-shout i{ font-size: 1.15rem; margin-right: .5rem; }
.notes-shout span{
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  text-transform: uppercase; /* keep original style strong */
}

/* Dark theme polish */
:root[data-theme="dark"] .install-notes{
  background:
    radial-gradient(1000px 420px at 100% 0%, color-mix(in srgb, var(--clr-primary) 22%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--clr-primary) 10%, transparent), transparent 22%),
    var(--install-elev);
}
/* ============================
   Bottom Feel-Good Full-Width (unchanged)
   ============================ */
   .install-feelgood{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(1rem, 3vw, 1.5rem) 0;
    background:
      radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--clr-primary) 12%, transparent), transparent 60%),
      radial-gradient(900px 500px at 110% 120%, color-mix(in srgb, var(--clr-positive) 14%, transparent), transparent 60%),
      linear-gradient(180deg, color-mix(in srgb, var(--install-elev) 96%, transparent), var(--install-elev));
    border-top: 1px solid var(--install-border);
  }
  
  .card--feelgood{
    display: grid;
    gap: .75rem;
    padding: clamp(1rem, 2.4vw, 1.35rem);
    border-radius: var(--radius-xl);
    background: var(--install-surface);
    box-shadow: var(--shadow-md);
    overflow: clip;
  }
  .card--feelgood__body{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  @media (max-width: 640px){
    .card--feelgood__body{ grid-template-columns: 1fr; }
  }
  
  /* ============== NEW: Technician header chip ============== */
  .card--feelgood__head{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .note-chip{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .82rem;
    background: color-mix(in srgb, var(--clr-primary) 10%, var(--install-chip));
    border: 1px solid var(--install-border);
  }
  .note-chip i{ font-size: 1rem; color: var(--clr-primary); }
  
  /* Smiley badge */
  .card--feelgood__icon{
    display: grid; place-items: center;
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--clr-primary) 12%, var(--install-chip));
    border: 1px solid var(--install-border);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }
  .card--feelgood__icon i{ font-size: 1.4rem; color: var(--clr-primary); }
  
  /* Content */
  .card--feelgood__content{ display: grid; gap: .75rem; align-content: start; min-width: 0; }
  .card--feelgood__content p{ margin: 0; line-height: 1.6; }
  
  /* Shout line */
  .card--feelgood .callout-shout{
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .5rem .75rem;
    border: 2px dashed color-mix(in srgb, var(--clr-primary) 40%, var(--install-border));
    background: color-mix(in srgb, var(--clr-primary) 6%, var(--install-chip));
    border-radius: 10px;
    display: inline-block;
  }
  
  /* Confetti accent */
  .card--note-tech{ position: relative; }
  .card--note-tech::after{
    content: "";
    position: absolute; inset: -20%;
    pointer-events: none; opacity: .18; mix-blend-mode: multiply;
    background-image:
      radial-gradient(2px 2px at 20% 30%, color-mix(in srgb, var(--clr-primary) 30%, transparent) 55%, transparent 60%),
      radial-gradient(2px 2px at 70% 60%, color-mix(in srgb, var(--clr-positive) 30%, transparent) 55%, transparent 60%),
      radial-gradient(2px 2px at 40% 80%, color-mix(in srgb, var(--clr-primary) 22%, transparent) 55%, transparent 60%);
  }
  :root[data-theme="dark"] .card--note-tech::after,
  [data-theme="dark"] .card--note-tech::after{ opacity: .24; mix-blend-mode: screen; }