/* ==========================================================================
   PrinterDojo SECTION MODERNIZATION v3 (loaded AFTER nextlevel.css)
   Hero search, Trending, Newsletter, FAQ, Footer. Generated from the
   design-panel workflow; token-audited; markup-free (styles existing classes).
   ========================================================================== */


/* ################# Hero search box ################# */
/* =========================================================================
   HERO SEARCH: premium glass command bar  (append to nextlevel.css)
   Synthesis of 3 proposals. Wider frosted glass slab (up to 620px), injected
   magnifier on the FORM gutter, strong on-brand teal focus glow, refined
   gradient submit with springy arrow. Zero markup change: icon + arrow are
   data-URI backgrounds on existing elements.
   IMPORTANT: we never set animation / opacity / transform on .hero__search
   itself, so the existing .reveal / heroIn entrance stays intact.
   ========================================================================= */

/* ---- Glass shell: layered sheen + real blur + injected magnifier -------- */
.hero__search{
  position:relative;
  box-sizing:border-box;
  max-width:620px;
  gap:.5rem;
  padding:.42rem .45rem .42rem 3.1rem;            /* left gutter reserves the icon */
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-pill);
  /* layer 1 = magnifier glyph, layer 2 = soft top-to-bottom glass sheen */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 1.2rem center / 20px 20px,
    linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.07) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 20px 46px -22px rgba(4,8,14,.72);
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.hero__search:hover{
  border-color:rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 24px 52px -22px rgba(4,8,14,.78);
}
/* Strong on-brand focus glow ring around the whole field */
.hero__search:focus-within{
  border-color:color-mix(in srgb, var(--brand-primary) 60%, #fff);
  box-shadow:
    0 0 0 4px var(--ring),
    0 0 32px -2px color-mix(in srgb, var(--brand-primary) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* ---- Input: larger, cleaner, teal caret -------------------------------- */
.hero__search input{
  flex:1; min-width:0; border:0; background:transparent;
  color:#fff; font-family:var(--font-body); font-size:var(--step-0);
  line-height:1.3; letter-spacing:.005em;
  padding:.7rem .25rem;
  caret-color:var(--primary-300);
}
.hero__search input::placeholder{ color:rgba(255,255,255,.66); }
/* neutralize any global input focus outline/shadow so only the field ring shows */
.hero__search input:focus{ outline:none; box-shadow:none; }
.hero__search input::-webkit-search-cancel-button,
.hero__search input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }

/* ---- Submit: refined gradient pill with lift + springy arrow ----------- */
.hero__search .btn--primary{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:46px;
  padding:.72em 1.4em;
  font-family:var(--font-heading); font-weight:700; letter-spacing:.01em;
  border:0;
  background:var(--grad-brand); color:#fff;
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--brand-primary) 65%, transparent);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    filter var(--dur-1) var(--ease-out);
}
.hero__search .btn--primary::after{
  content:""; flex:0 0 auto;
  width:1.05em; height:1.05em; margin-left:-.05em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform var(--dur-2) var(--ease-out);
}
.hero__search .btn--primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 18px 34px -14px color-mix(in srgb, var(--brand-primary) 72%, transparent);
}
.hero__search .btn--primary:hover::after{ transform:translateX(3px); }
.hero__search .btn--primary:active{ transform:translateY(0); }
.hero__search .btn--primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring), 0 12px 26px -12px color-mix(in srgb, var(--brand-primary) 65%, transparent);
}

/* ---- Tablet: bar simply flexes to the column width --------------------- */
@media (max-width:768px){
  .hero__search{ max-width:100%; }
}

/* ---- Desktop: larger, more premium ------------------------------------- */
@media (min-width:1280px){
  .hero__search{
    max-width:620px;
    padding:.48rem .5rem .48rem 3.35rem;
    background-position:1.3rem center, 0 0;
    background-size:22px 22px, auto;
  }
  .hero__search input{ font-size:var(--step-1); padding:.86rem .25rem; }
  .hero__search .btn--primary{ min-height:50px; padding:.78em 1.6em; }
}

/* ---- Mobile: tighten gutter, drop arrow to protect the "Search" label --- */
@media (max-width:480px){
  .hero__search{
    gap:.35rem;
    padding:.36rem .38rem .36rem 2.55rem;
    background-position:.9rem center, 0 0;
    background-size:18px 18px, auto;
  }
  .hero__search input{ font-size:var(--step-0); padding:.62rem .2rem; }
  .hero__search .btn--primary{ min-height:44px; padding:.66em 1.05em; }
  .hero__search .btn--primary::after{ display:none; }
}

/* ---- Reduced motion: keep the static glow, drop the movement ----------- */
@media (prefers-reduced-motion:reduce){
  .hero__search,
  .hero__search .btn--primary,
  .hero__search .btn--primary::after{ transition:none !important; }
  .hero__search .btn--primary:hover{ transform:none; filter:none; }
  .hero__search .btn--primary:hover::after{ transform:none; }
}


/* ################# Trending now (numbered list) ################# */
/* =========================================================================
   TRENDING NOW  |  editorial rank cards (synthesized, production)
   Appended to nextlevel.css (loads last). Scoped to .trending-wrap so every
   rule out-specifies theme.css (.trending__* = 0,1,0 -> here 0,2,0+),
   guaranteeing the override regardless of source order.
   Markup: .trending-wrap > .trending(ol) > .trending__item(li) with
   .trending__rank + .trending__body(.trending__title>a, .trending__meta).
   ========================================================================= */

/* Grid: explicit 1 / 2 / 3 columns for 375 / 768 / 1280, equal-height cards */
.trending-wrap .trending{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
  align-items:stretch;
  list-style:none;
  margin:0;
  padding:0;
}

/* Card: hairline tile, faint teal-tinted floor, soft depth. Replaces the
   flat bottom divider from theme.css. */
.trending-wrap .trending__item{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-sm);
  align-items:start;
  padding:var(--space-md);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,#fff 90%,transparent) 0%,
      color-mix(in srgb,var(--primary-50) 60%,transparent) 100%);
  box-shadow:var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.6);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}

/* Brand hairline that sweeps across the top edge on hover / keyboard focus */
.trending-wrap .trending__item::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--grad-brand);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-out);
  pointer-events:none;
  z-index:2;
}

/* Rank numeral: gradient-filled teal ramp folio, springs on interaction */
.trending-wrap .trending__rank{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--step-4);
  line-height:.82;
  letter-spacing:-.04em;
  margin-top:-.06em;
  min-width:1.7ch;
  font-variant-numeric:tabular-nums;
  -webkit-text-stroke:0;
  background:linear-gradient(150deg,
    var(--primary-300) 0%, var(--primary-500) 48%, var(--primary-700) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-spring), filter var(--dur-2) var(--ease-out);
}

/* Body + title: underline removed for a cleaner editorial read */
.trending-wrap .trending__body{ min-width:0; }
.trending-wrap .trending__title{ margin:0; }
.trending-wrap .trending__title a{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--step-1);
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--neutral-900);
  text-decoration:none;
  display:block;
  transition:color var(--dur-1) var(--ease-out);
}
/* Stretched link: the whole card becomes the click / tap target */
.trending-wrap .trending__title a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
}

/* Meta ("N min read") with a masked teal clock glyph that shifts with the text */
.trending-wrap .trending__meta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:var(--space-2xs);
  color:var(--text-muted);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--step--1);
  transition:color var(--dur-1) var(--ease-out);
}
.trending-wrap .trending__meta::before{
  content:"";
  flex:0 0 auto;
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ----- Interaction: hover and keyboard focus mirror each other ----- */
.trending-wrap .trending__item:hover,
.trending-wrap .trending__item:focus-within{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--brand-primary) 34%,var(--border));
  box-shadow:
    var(--shadow-md),
    var(--shadow-glow),
    inset 0 1px 0 rgba(255,255,255,.7);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,#fff 94%,transparent) 0%,
      color-mix(in srgb,var(--primary-50) 85%,transparent) 100%);
}
.trending-wrap .trending__item:hover::before,
.trending-wrap .trending__item:focus-within::before{ transform:scaleX(1); }

.trending-wrap .trending__item:hover .trending__rank,
.trending-wrap .trending__item:focus-within .trending__rank{
  transform:scale(1.07);
  filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--brand-primary) 32%,transparent));
}

.trending-wrap .trending__item:hover .trending__title a,
.trending-wrap .trending__item:focus-within .trending__title a,
.trending-wrap .trending__title a:hover{ color:var(--primary-700); }

.trending-wrap .trending__item:hover .trending__meta,
.trending-wrap .trending__item:focus-within .trending__meta{ color:var(--primary-700); }

/* ----- Focus: card-level ring + crisp per-link outline ----- */
.trending-wrap .trending__item:focus-within{
  box-shadow:var(--shadow-md), 0 0 0 3px var(--ring);
  border-color:var(--brand-primary);
}
.trending-wrap .trending__title a:focus-visible{
  outline:2px solid var(--brand-primary);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

/* ----- Responsive ----- */
@media (min-width:768px){
  .trending-wrap .trending{
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-md) var(--space-lg);
  }
  .trending-wrap .trending__item{ padding:var(--space-lg); gap:var(--space-md); }
}
@media (min-width:1280px){
  .trending-wrap .trending{
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-lg);
  }
}
@media (max-width:767px){
  .trending-wrap .trending__item{ align-items:center; }
  .trending-wrap .trending__rank{ font-size:var(--step-3); }
  .trending-wrap .trending__title a{ font-size:var(--step-0); line-height:1.3; }
}

/* ----- Reduced motion: keep color / shadow cues, remove all movement ----- */
@media (prefers-reduced-motion:reduce){
  .trending-wrap .trending__item,
  .trending-wrap .trending__item::before,
  .trending-wrap .trending__rank,
  .trending-wrap .trending__title a,
  .trending-wrap .trending__meta{ transition:none !important; }
  .trending-wrap .trending__item:hover,
  .trending-wrap .trending__item:focus-within{ transform:none; }
  .trending-wrap .trending__item:hover .trending__rank,
  .trending-wrap .trending__item:focus-within .trending__rank{ transform:none; filter:none; }
  .trending-wrap .trending__item:hover::before,
  .trending-wrap .trending__item:focus-within::before{ transform:scaleX(1); }
}


/* ################# Newsletter "Stay in the loop" (homepage CTA band) ################# */
/* =====================================================================
   NEWSLETTER "Stay in the loop" homepage subscribe band
   Premium glass subscribe field on the teal brand gradient.
   Appended to nextlevel.css (loads last), so it wins over theme.css.
   Synthesis: frosted glass split-pill, white mail glyph, confident
   white Subscribe button with a masked arrow, legible white focus
   halo (a teal --ring would vanish on teal), restrained amber depth,
   and an intentional two-pill mobile stack. Reduced-motion safe.
   ===================================================================== */

/* ---- Band: responsive padding + a touch more presence ---- */
.newsletter{
  padding: clamp(2rem, 1.4rem + 3vw, 3.25rem) clamp(1.15rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
}
/* Warm amber glow anchored bottom-right: subtle on-token depth cue.
   Decorative, non-interactive, clipped by the band's overflow:hidden. */
.newsletter::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(42% 80% at 100% 106%, rgba(245,158,11,.16), transparent 62%);
  mix-blend-mode: screen;
}
.newsletter__inner{ position:relative; z-index:2; }

/* ---- Eyebrow: glass "signal" badge with an amber pulse dot ---- */
.newsletter .section__eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font-size:var(--step--1); letter-spacing:.12em;
}
.newsletter .section__eyebrow::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--accent-400); box-shadow:0 0 0 3px rgba(245,158,11,.28);
}

/* ---- Title + copy: crisp legibility on teal ---- */
.newsletter .section__title{
  color:#fff; letter-spacing:-.02em; text-wrap:balance;
  text-shadow:0 2px 12px rgba(4,8,14,.16);
}
.newsletter p{
  color:rgba(255,255,255,.9); font-size:var(--step-0);
  max-width:46ch; margin-inline:auto;
}

/* ---- The frosted glass split-pill field ---- */
.newsletter__form{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;
  gap:.45rem; margin-top:clamp(1.5rem, 1rem + 2vw, 2rem);
  padding:.4rem; max-width:520px; margin-inline:auto;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 20px 44px -22px rgba(4,8,14,.55);
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}
/* Strong, legible white focus halo (survives the busy teal gradient) */
.newsletter__form:focus-within{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 1px rgba(255,255,255,.6),
    0 0 0 5px rgba(255,255,255,.16),
    0 24px 50px -22px rgba(4,8,14,.6);
}

/* ---- Email input with inline white mail glyph ---- */
.newsletter__form input{
  flex:1 1 auto; min-width:0; min-height:48px;
  border:0; color:#fff; caret-color:#fff;
  font-family:var(--font-body); font-size:var(--step-0);
  padding:.85rem 1.1rem .85rem 3rem;
  background:transparent
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2.5'/%3E%3Cpath%20d='m3.5%207.5%208.5%206%208.5-6'/%3E%3C/svg%3E")
    no-repeat left 1.1rem center;
  background-size:20px 20px;
}
.newsletter__form input::placeholder{ color:rgba(255,255,255,.75); }
.newsletter__form input:focus{ outline:none; } /* pill focus-within is the visible cue */
/* Keep autofill glassy + legible (no yellow box, white text) */
.newsletter__form input:-webkit-autofill,
.newsletter__form input:-webkit-autofill:hover,
.newsletter__form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff; caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}

/* ---- Subscribe button: confident white pill with a springy arrow ---- */
.newsletter__form .btn{
  flex:0 0 auto; background:#fff; color:var(--primary-800);
  border-color:transparent; padding:.85em 1.4em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 22px -12px rgba(4,8,14,.5);
}
/* Arrow via CSS mask so it inherits the exact button text color */
.newsletter__form .btn::after{
  content:""; width:1.05em; height:1.05em; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h15'/%3E%3Cpath%20d='m13%206%206%206-6%206'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h15'/%3E%3Cpath%20d='m13%206%206%206-6%206'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--dur-2) var(--ease-out);
}
.newsletter__form .btn:hover{
  background:#fff; color:var(--primary-900); transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 16px 32px -12px rgba(4,8,14,.55);
}
.newsletter__form .btn:hover::after{ transform:translateX(4px); }
.newsletter__form .btn:active{ transform:translateY(0); }
/* Focus ring that stays visible against both the white button and teal band */
.newsletter__form .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--primary-800), 0 0 0 5px rgba(255,255,255,.9);
}

/* ---- Tablet / desktop scale-ups ---- */
@media (min-width:768px){
  .newsletter__form{ max-width:540px; }
}
@media (min-width:1280px){
  .newsletter__form{ max-width:560px; }
  .newsletter__form input{ padding-block:.95rem; }
}

/* ---- Mobile (<=640px): intentional two full-width pills ----
   The container dissolves; the input and button each become their own
   full-width rounded glass pill so the stacked state looks deliberate. */
@media (max-width:640px){
  .newsletter__form{
    flex-direction:column; gap:.7rem; padding:0; max-width:420px;
    background:transparent; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .newsletter__form:focus-within{
    background:transparent; border:0; box-shadow:none;
  }
  .newsletter__form input{
    width:100%; min-height:54px; border-radius:var(--radius-pill);
    padding:1rem 1.1rem 1rem 3rem;
    background-color:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
    transition:border-color var(--dur-2) var(--ease-out),
               box-shadow var(--dur-2) var(--ease-out),
               background-color var(--dur-2) var(--ease-out);
  }
  .newsletter__form input:focus{
    outline:none; border-color:rgba(255,255,255,.7);
    background-color:rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 4px rgba(255,255,255,.16);
  }
  .newsletter__form .btn{ width:100%; min-height:54px; justify-content:center; }
}

/* ---- Small phones (<=390px): trim so the glyph never crowds text ---- */
@media (max-width:390px){
  .newsletter__form input{ padding-left:2.85rem; background-position:left .95rem center; }
}

/* ---- Reduced motion: keep the glow, drop the movement ---- */
@media (prefers-reduced-motion:reduce){
  .newsletter__form,
  .newsletter__form input,
  .newsletter__form .btn,
  .newsletter__form .btn::after{ transition:none !important; }
  .newsletter__form .btn:hover{ transform:none; }
  .newsletter__form .btn:hover::after{ transform:none; }
}


/* ################# FAQ accordion (homepage) ################# */
/* ============================================================
   FAQ ACCORDION - premium refresh (append to nextlevel.css)
   Loads last; overrides theme.css .faq* and the earlier nextlevel
   chevron rules via equal/higher specificity plus source order.
   DOM: section.faq > .wrap > .section__head + .faq__list
        > .faq__item > button.faq__q (span + span.faq__icon)
        + .faq__a[hidden]
   Open state is driven by aria-expanded on .faq__q, hooked through
   .faq__item:has(.faq__q[aria-expanded="true"]).
   ============================================================ */

/* Layout: release the tinted band to full bleed (matches the other
   section--alt bands) and center a ~820px reading column for both the
   head and the list so their edges align. Head keeps the theme's own
   layout, just boxed to 820 for consistency with the rest of the site. */
.faq.section{
  max-width: none;
  margin-inline: 0;
  display: block;
}
.faq .section__head,
.faq .faq__list{
  max-width: 820px;
  margin-inline: auto;
}
.faq .faq__list{
  display: grid;
  gap: clamp(.7rem, .55rem + .4vw, 1rem);
}

/* Card shell: premium rounding, quiet resting depth, room for a rail. */
.faq__list .faq__item{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow   var(--dur-2) var(--ease-out),
    transform    var(--dur-2) var(--ease-out);
}

/* Left accent bar: grows in on open, clipped to the card radius. */
.faq__list .faq__item::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  z-index: 2;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-4) var(--ease-out);
  pointer-events: none;
}

/* Question trigger (a real <button>): full reset, whole row is the target. */
.faq .faq__q{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1.1rem var(--space-md);
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--neutral-900);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-2) var(--ease-out),
    color      var(--dur-2) var(--ease-out);
}
.faq .faq__q > span:first-child{
  min-width: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.faq .faq__q:hover{ color: var(--primary-700); }

/* Single indicator: keep the literal "+" glyph hidden. */
.faq .faq__q .faq__icon{ display: none; }

/* Chevron chip: circular affordance, teal caret on a soft teal fill.
   Layer 1 = inline SVG caret, layer 2 = fill. Resets the theme arrow. */
.faq .faq__q::after{
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230F766E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
    var(--primary-50);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 16%, transparent);
  transform: none;
  transition:
    transform        var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    box-shadow       var(--dur-2) var(--ease-out);
}
.faq .faq__q:hover::after{ background-color: var(--primary-100); }

/* Answer body. */
.faq .faq__a{
  padding: .9rem var(--space-md) 1.2rem;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
.faq .faq__a p{ margin: 0 0 .75rem; max-width: 64ch; }
.faq .faq__a p:last-child{ margin-bottom: 0; }

/* ---- Hover: lift closed items only, so the open card never bobs. ---- */
.faq__list .faq__item:not(:has(.faq__q[aria-expanded="true"])):hover{
  transform: translateY(-2px);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
  z-index: 3;
}

/* ---- Open state ---- */
.faq__list .faq__item:has(.faq__q[aria-expanded="true"]){
  border-color: color-mix(in srgb, var(--brand-primary) 42%, transparent);
  box-shadow: var(--shadow-md);
  z-index: 4;
}
.faq__list .faq__item:has(.faq__q[aria-expanded="true"])::before{
  transform: scaleY(1);
}
.faq .faq__item:has(.faq__q[aria-expanded="true"]) .faq__q{
  background: var(--grad-brand-soft);
  color: var(--primary-800);
}
/* Chevron on open: gradient fill, white caret, flip to point up.
   Higher specificity than theme and the earlier nextlevel rotate rule. */
.faq .faq__q[aria-expanded="true"]::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
    var(--grad-brand);
  box-shadow: 0 6px 16px -6px var(--ring);
  transform: rotate(180deg);
}
/* Hairline where the tinted head meets the white answer, plus soft reveal. */
.faq .faq__item:has(.faq__q[aria-expanded="true"]) .faq__a{
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
  animation: faqReveal var(--dur-4) var(--ease-out) both;
}
@keyframes faqReveal{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}

/* ---- Focus: inset outline survives overflow:hidden, plus a card ring. ---- */
.faq .faq__q:focus-visible{
  outline: 2px solid var(--primary-600);
  outline-offset: -3px;
}
.faq__list .faq__item:has(.faq__q:focus-visible){
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-sm);
  z-index: 5;
}

/* ---- Responsive ---- */
/* Mobile (<=480, covers 375): tighter padding, smaller chip, calmer type. */
@media (max-width: 480px){
  .faq .faq__q{
    padding: .95rem 1rem;
    gap: .6rem;
    font-size: var(--step-0);
  }
  .faq .faq__q::after{ width: 32px; height: 32px; }
  .faq .faq__a{ padding: .8rem 1rem 1.1rem; }
}
/* Desktop (>=1280): a touch more air. */
@media (min-width: 1280px){
  .faq .faq__q{ padding: 1.2rem 1.5rem; }
  .faq .faq__a{ padding: 1rem 1.5rem 1.35rem; }
}

/* ---- Reduced motion: kill movement, keep the open indicators static. ---- */
@media (prefers-reduced-motion: reduce){
  .faq__list .faq__item,
  .faq .faq__q,
  .faq .faq__q::after,
  .faq__list .faq__item::before,
  .faq .faq__item:has(.faq__q[aria-expanded="true"]) .faq__a{
    transition: none !important;
    animation: none !important;
  }
  .faq__list .faq__item:not(:has(.faq__q[aria-expanded="true"])):hover{
    transform: none;
  }
  .faq .faq__q[aria-expanded="true"]::after{ transform: rotate(180deg); }
  .faq__list .faq__item:has(.faq__q[aria-expanded="true"])::before{ transform: scaleY(1); }
}


/* ################# Footer ################# */
/* =========================================================================
   FOOTER v2 (synthesis): balanced 4-col grid, single-column no-wrap Site nav,
   refined link + legal hover, premium newsletter card with a soft teal glow.
   Appended to nextlevel.css (loads last), overrides enhancements.css footer.
   Tokens only. No new markup. No em dashes or en dashes.
   ========================================================================= */

/* ---- Column grid: rebalanced proportions, roomier row rhythm, seated under
   the CTA band with a hairline for premium structure. ---- */
.site-footer__cols{
  grid-template-columns:1.5fr 1fr 1.2fr 1.5fr;
  gap:var(--space-2xl) var(--space-xl);
  align-items:start;
  margin-top:var(--space-2xl);
  padding-top:var(--space-2xl);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Brand block rhythm */
.site-footer__brand{ display:flex; flex-direction:column; gap:.85rem; }
.site-footer__tagline{ margin:0; line-height:1.55; color:rgba(255,255,255,.68); }

/* ---- Column titles (Explore, Site): bold Sora with a short brand accent bar.
   The newsletter title stays clean because that card already has a gradient
   top bar of its own. ---- */
.site-footer__col .footer__col-title{
  position:relative; padding-bottom:.75rem; margin-bottom:1.1rem;
}
.site-footer__col .footer__col-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:1.75rem; height:3px; border-radius:var(--radius-pill);
  background:var(--grad-brand);
}

/* ---- Lists: reset the doubled spacing, let the 40px link rows carry rhythm. ---- */
.site-footer__col ul{ gap:.15rem; }
.site-footer__col li,
.site-footer__col ul li{ margin:0; }

/* ---- THE FIX: the Site menu becomes a single clean column, so multi-word
   links like "Editorial Policy", "Terms of Service" and "Affiliate Disclosure"
   never wrap mid-phrase. The higher specificity (0,3,0) beats both the base rule
   and the legacy mobile 2-col rule at every width. ---- */
.site-footer .site-footer__col .menu--footer{
  grid-template-columns:1fr; gap:.15rem;
}
/* nowrap is scoped to Site only, so long Explore category names may still wrap */
.site-footer__col .menu--footer a{ white-space:nowrap; }

/* ---- Refined link: 40px touch target, brighten to white, a subtle 3px indent,
   and a brand-gradient underline that scales in from the left. Transform and
   opacity only, so there is no reflow and no shift in wrap points. ---- */
.site-footer__col a{
  position:relative;
  display:inline-flex; align-items:center;
  min-height:40px; padding-block:.4rem;
  color:rgba(255,255,255,.72); font-size:var(--step--1); line-height:1.3;
  text-decoration:none;
  transition:color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.site-footer__col a::after{
  content:""; position:absolute; left:0; right:0; bottom:.5rem; height:2px;
  border-radius:var(--radius-pill); background:var(--grad-brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-out);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible{ color:#fff; transform:translateX(3px); }
.site-footer__col a:hover::after,
.site-footer__col a:focus-visible::after{ transform:scaleX(1); }

/* ---- Newsletter card: light glass polish, a soft teal glow for depth, a gentle
   hover lift, and focus-within emphasis. Core form styles are preserved. ---- */
.site-footer__newsletter{
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out);
}
.site-footer__newsletter::before{ z-index:2; }          /* keep the top gradient bar on top */
.site-footer__newsletter::after{                          /* diffuse teal glow, clipped by overflow:hidden */
  content:""; position:absolute; z-index:0; top:-30%; right:-12%;
  width:60%; aspect-ratio:1/1;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--brand-primary) 30%, transparent), transparent 70%);
  filter:blur(28px); opacity:.5; pointer-events:none;
}
.site-footer__newsletter > *{ position:relative; z-index:1; }
.site-footer__newsletter:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--brand-primary) 42%, transparent);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09);
}
.site-footer__newsletter:focus-within{
  border-color:color-mix(in srgb, var(--brand-primary) 45%, transparent);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.07);
}
.site-footer__newsletter .newsletter__form .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 55%, transparent),
             0 6px 18px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* ---- Legal bar: a cohesive underline-slide plus brighten. ---- */
.site-footer__legal a{
  position:relative; padding-bottom:2px; text-decoration:none;
  transition:color var(--dur-1) var(--ease-out);
}
.site-footer__legal a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:var(--radius-pill); background:var(--grad-brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-out);
}
.site-footer__legal a:hover{ color:#fff; }
.site-footer__legal a:hover::after,
.site-footer__legal a:focus-visible::after{ transform:scaleX(1); }

/* ---- Accessible focus ring on every footer link (bright on the dark surface). ---- */
.site-footer a:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand-primary) 65%, #fff);
  outline-offset:3px; border-radius:6px;
}

/* ---- Tablet (<=900, e.g. 768): 2 columns; brand and newsletter span the full
   width for a clean masthead and a full-width signup card. ---- */
@media (max-width:900px){
  .site-footer__cols{ grid-template-columns:1fr 1fr; gap:var(--space-xl); }
  .site-footer__brand{ grid-column:1 / -1; }
  .site-footer__newsletter{ grid-column:1 / -1; }
}

/* ---- Mobile (<=560, e.g. 375): single column; Site menu stays single column;
   stack the legal bar beneath the copyright. ---- */
@media (max-width:560px){
  .site-footer__cols{ grid-template-columns:1fr; gap:var(--space-xl); }
  .site-footer .site-footer__col .menu--footer{ grid-template-columns:1fr; }
  .site-footer__bar-inner{ flex-direction:column; align-items:flex-start; }
  .site-footer__col a{ min-height:44px; }   /* larger touch target on phones */
}

/* ---- Reduced motion: keep instant color and underline states, drop movement. ---- */
@media (prefers-reduced-motion:reduce){
  .site-footer__col a,
  .site-footer__col a::after,
  .site-footer__legal a,
  .site-footer__legal a::after,
  .site-footer__newsletter{ transition:none !important; }
  .site-footer__col a:hover,
  .site-footer__col a:focus-visible{ transform:none; }
  .site-footer__col a:hover::after,
  .site-footer__col a:focus-visible::after,
  .site-footer__legal a:hover::after,
  .site-footer__legal a:focus-visible::after{ transform:scaleX(1); }
  .site-footer__newsletter:hover{
    transform:none;
    box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.06);
  }
}


/* ################# SUBSCRIBE FOCUS REFINEMENTS (post-workflow) ################# */

/* (1) HOMEPAGE newsletter, horizontal pill (>640px): the email input was ALSO
   catching the GLOBAL input:focus ring (theme.css:1034 -> box-shadow 0 0 0 3px
   var(--primary-100)) INSIDE the pill's own focus-within halo, which read as a
   doubled/inner border. The pill halo is the only focus cue we want here, so
   silence the input's own ring. Untouched on mobile, where the input is its own
   pill and keeps its intended white ring. */
@media (min-width:641px){
  .newsletter .newsletter__form input:focus{
    box-shadow:none;
    border-color:transparent;
  }
}

/* (2) FOOTER subscribe: inline mail glyph. Glyph is set on the base AND :focus
   selector together so enhancements' focus `background` shorthand cannot wipe it. */
.site-footer__newsletter .newsletter__form input,
.site-footer__newsletter .newsletter__form input:focus{
  padding-left:2.9rem;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.6'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2.5'/%3E%3Cpath%20d='m3.5%207.5%208.5%206%208.5-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  background-size:18px 18px;
}
/* After clicking the footer email: no border, no ring, and no background box.
   The field goes fully transparent on focus (only the mail glyph + text remain).
   !important beats enhancements.css's amber input:focus rule at equal specificity. */
.site-footer__newsletter .newsletter__form input:focus{
  border-color:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
/* Remove the top border on the footer .newsletter__form: the unscoped homepage
   `.newsletter__form { box-shadow: inset 0 1px 0 rgba(255,255,255,.4) ... }` rule
   leaks its top-highlight onto this form, reading as a 1px top border. Kill it. */
.site-footer__newsletter .newsletter__form{ box-shadow:none; }
/* And on focus, the homepage `.newsletter__form:focus-within{ background:rgba(255,
   255,255,.18) ... }` rule leaks a grey box across the footer form. Keep the footer
   form fully transparent when a field inside it is focused. */
.site-footer__newsletter .newsletter__form:focus-within{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
@media (prefers-reduced-motion:reduce){
  .site-footer__newsletter .newsletter__form input{ transition:none !important; }
}