/* ============================================================================
   FRAME — dedicated generator pages: below-the-tool content (Phase 3D)
   Loaded only by the 12 dedicated generator pages, after generator-premium.css
   (whose --fr-* palette it uses). Every rule is scoped to the sections that
   follow the tool: `#generator ~ section`. The tool, the header, the site
   footer, the homepage, the Checker and the Phone Cover Builder are never
   matched. Visual only: no copy, markup, links or schema change.

   Direction: remove chrome. Labels lose their pills, cards lose their
   borders/shadows/tinted icon tiles and become hairline grids and lists,
   one warm-neutral contrast band (the design gallery), dark-amber links.
   Containers remain only where they hold something (tables, tips,
   gallery thumbnails).
   ========================================================================= */

/* -------------------------------------------------- 1. section rhythm */
/* two background roles: the page (white) and one warm band (the gallery) */
#generator ~ section{background:transparent!important;}
#generator ~ section.templates{background:var(--fr-stage)!important;}
#generator ~ section.prose{padding:64px 0 12px!important;}
#generator ~ section.strip,#generator ~ section.templates{padding:64px 0!important;}
#generator ~ section.faq{padding:56px 0 24px!important;}
#generator ~ section.related{padding:32px 0 80px!important;}
@media (max-width:760px){
  #generator ~ section.prose{padding:44px 0 6px!important;}
  #generator ~ section.strip,#generator ~ section.templates{padding:44px 0!important;}
  #generator ~ section.faq{padding:40px 0 16px!important;}
  #generator ~ section.related{padding:24px 0 56px!important;}
}

/* --------------------------------------------------- 2. section labels */
/* the label text stays; the gold capsule and its dot go */
#generator ~ section .eyebrow{
  background:none!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;
  font-family:'Inter',sans-serif!important;font-size:13px!important;font-weight:600!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--fr-accent-ink)!important;
}
#generator ~ section .eyebrow::before,#generator ~ section .eyebrow::after{display:none!important;}

/* ------------------------------------------------------- 3. headings */
/* one editorial H2 for every section (the strip, gallery, article, FAQ and
   related headings had four different sizes) and one H3 */
#generator ~ section h2{
  font-size:clamp(23px,2.6vw,30px)!important;font-weight:800!important;line-height:1.2!important;
  letter-spacing:-.015em!important;color:var(--fr-ink)!important;
}
#generator ~ section.prose h2{margin:52px 0 14px!important;}
#generator ~ section.prose h2:first-of-type{margin-top:0!important;}
#generator ~ section .strip-head{margin-bottom:32px!important;}
#generator ~ section .strip-head h2{margin-top:10px!important;}
#generator ~ section h3{font-size:17px!important;font-weight:700!important;line-height:1.35!important;color:var(--fr-ink)!important;}
#generator ~ section.prose h3{margin:30px 0 8px!important;}

/* ------------------------------------------------- 4. reading and links */
/* the article keeps its 820px column (~75 characters); grids use the page */
#generator ~ section.prose p,#generator ~ section.prose li{color:var(--fr-ink-2)!important;}
#generator ~ section.prose strong{color:var(--fr-ink)!important;}
#generator ~ section a:not(.rel-card){
  color:var(--fr-accent-ink)!important;text-decoration:underline!important;
  text-decoration-thickness:1px!important;text-underline-offset:3px!important;
  text-decoration-color:rgba(122,74,8,.35)!important;
}
#generator ~ section a:not(.rel-card):hover{color:var(--fr-ink)!important;text-decoration-color:currentColor!important;}
#generator ~ section code{background:var(--fr-stage)!important;border:0!important;border-radius:4px!important;color:var(--fr-ink)!important;padding:1px 5px!important;}

/* ------------------------------------------------------------ 5. steps */
/* quiet numerals, strong step title; no tinted number tiles */
#generator ~ section .steps li::before{
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  width:auto!important;height:auto!important;top:0!important;
  font-size:14px!important;font-weight:700!important;color:var(--fr-accent-strong)!important;
  font-variant-numeric:tabular-nums;
}
#generator ~ section .steps li{padding-left:30px!important;margin-bottom:16px!important;}
#generator ~ section .steps li strong{color:var(--fr-ink)!important;}

/* ------------------------------------------------------------ 6. tables */
#generator ~ section .data-table{background:transparent!important;box-shadow:none!important;border:0!important;}
#generator ~ section .data-table th{
  background:transparent!important;color:var(--fr-dim)!important;
  border:0!important;border-bottom:1px solid var(--fr-line-strong)!important;
}
#generator ~ section .data-table td{border:0!important;border-bottom:1px solid var(--fr-line)!important;color:var(--fr-ink-2)!important;}
#generator ~ section .data-table td:first-child{color:var(--fr-ink)!important;}
#generator ~ section .data-table tr:last-child td{border-bottom:0!important;}
@media (max-width:640px){
  /* wide tables scroll inside their own box instead of the page */
  #generator ~ section .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #generator ~ section .data-table th,#generator ~ section .data-table td{padding:10px 12px!important;}
}

/* ----------------------------------------------------- 7. tips/callouts */
#generator ~ section .tip{
  background:var(--fr-stage)!important;border:0!important;border-left:2px solid var(--fr-accent)!important;
  border-radius:0 var(--fr-r-sm) var(--fr-r-sm) 0!important;box-shadow:none!important;
}
#generator ~ section .tip strong{color:var(--fr-ink)!important;}

/* -------------------------------------------- 8. feature grid (strip) */
/* editorial grid: small marker, title, description — no card, no tile */
#generator ~ section.strip .card{
  background:transparent!important;border:0!important;border-top:1px solid var(--fr-line)!important;
  border-radius:0!important;box-shadow:none!important;padding:20px 4px 4px 0!important;transform:none!important;
}
#generator ~ section.strip .card:hover{box-shadow:none!important;transform:none!important;border-color:var(--fr-line)!important;}
#generator ~ section.strip .card::before,#generator ~ section.strip .card::after{display:none!important;}
#generator ~ section .card-icon{
  background:none!important;border:0!important;width:auto!important;height:auto!important;
  justify-content:flex-start!important;margin-bottom:10px!important;color:var(--fr-accent-strong)!important;border-radius:0!important;
}
#generator ~ section.strip .card p{color:var(--fr-ink-2)!important;}

/* --------------------------------- 9. scenario blocks inside the article */
/* (div.rel-card: "Creator & community", "Customer support" ...) */
#generator ~ section.prose div.rel-card{
  background:transparent!important;border:0!important;border-top:1px solid var(--fr-line)!important;
  border-radius:0!important;box-shadow:none!important;padding:16px 0 4px!important;transform:none!important;
}
#generator ~ section.prose div.rel-card h3{margin:0 0 6px!important;font-size:16px!important;}
#generator ~ section.prose div.rel-card p{margin:0!important;font-size:14.5px!important;}

/* ----------------------------------------------------- 10. design gallery */
#generator ~ section .template-card{
  background:#fff!important;border:1px solid var(--fr-line)!important;border-radius:var(--fr-r-md)!important;
  box-shadow:none!important;transform:none!important;
}
#generator ~ section .template-card:hover{border-color:var(--fr-line-strong)!important;box-shadow:none!important;transform:none!important;}

/* --------------------------------------------------------------- 11. FAQ */
/* a hairline list, not a stack of cards; amber only on the open marker */
#generator ~ section .faq-item{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--fr-line)!important;
  border-radius:0!important;box-shadow:none!important;margin:0!important;
}
#generator ~ section .faq-item:first-of-type{border-top:1px solid var(--fr-line)!important;}
#generator ~ section .faq-q{color:var(--fr-ink)!important;font-weight:600!important;padding-left:0!important;padding-right:0!important;}
#generator ~ section .faq-q .plus{color:var(--fr-dim)!important;background:none!important;border:0!important;}
#generator ~ section .faq-item.open .faq-q .plus{color:var(--fr-accent-strong)!important;}
#generator ~ section .faq-a{padding-left:0!important;padding-right:0!important;}
#generator ~ section .faq-a p{color:var(--fr-ink-2)!important;}

/* ------------------------------------------------------ 12. related links */
/* editorial link list: title, one line, a quiet arrow; no boxes */
#generator ~ section.related .rel-card{
  background:transparent!important;border:0!important;border-top:1px solid var(--fr-line)!important;
  border-radius:0!important;box-shadow:none!important;padding:16px 4px 4px 0!important;transform:none!important;
  text-decoration:none!important;
}
#generator ~ section.related .rel-card b{color:var(--fr-ink)!important;}
#generator ~ section.related .rel-card b::after{content:'\2192';margin-left:6px;color:var(--fr-accent-strong);font-weight:600;}
#generator ~ section.related .rel-card span{color:var(--fr-dim)!important;}
#generator ~ section.related .rel-card:hover{transform:none!important;box-shadow:none!important;}
#generator ~ section.related .rel-card:hover b{color:var(--fr-accent-ink)!important;}
#generator ~ section.related .rel-card:focus-visible{outline:2px solid var(--fr-accent-strong)!important;outline-offset:2px;}

/* ------------------------------------------------ 13. review refinements */
/* neutral tokens for the content area (warm hairlines, warm gallery
   placeholders); --accent is deliberately NOT remapped here, links are
   set explicitly above */
#generator ~ section{
  --border:var(--fr-line);--border-soft:var(--fr-line);
  --ws-line:var(--fr-line);--ws-line-strong:var(--fr-line-strong);
  --ws-mist:var(--fr-stage);--ws-surface:var(--fr-stage);
}
/* two white sections meeting should not stack both paddings */
#generator ~ section.strip + section.prose{padding-top:8px!important;}
/* step numerals align with the article's left edge */
#generator ~ section .steps{margin-left:0!important;padding-left:0!important;}
/* hairline grids need air between columns */
#generator ~ section .rel-grid{column-gap:32px!important;row-gap:8px!important;}
/* FAQ questions align with the heading; the marker keeps the right edge */
#generator ~ section .faq-item{padding-left:0!important;padding-right:0!important;}
@media (max-width:640px){
  /* tables scroll inside their own box with readable columns instead of
     wrapping every word (this cramping predates Phase 3D) */
  #generator ~ section .data-table th,#generator ~ section .data-table td{min-width:132px;}
  #generator ~ section .data-table th:first-child,#generator ~ section .data-table td:first-child{min-width:104px;}
  #generator ~ section .rel-grid{column-gap:0!important;}
}