/* Frame — content styles for the SEO tool & guide pages.
   Loaded alongside frame.css, which supplies the design tokens and the
   generator UI. Only additive: nothing here overrides homepage rules. */

/* ---------- breadcrumb ---------- */
.crumbs{max-width:1180px;margin:0 auto;padding:18px 32px 0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-dim);position:relative;z-index:3;}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--gold);}
.crumbs span{margin:0 8px;opacity:.5;}
.crumbs [aria-current]{color:var(--ink-soft);}

/* ---------- long-form prose ---------- */
.prose{padding:78px 0 20px;position:relative;z-index:2;}
.prose .wrap{max-width:820px;}
.prose h2{font-family:'Archivo',sans-serif;font-size:clamp(23px,3vw,31px);font-weight:800;letter-spacing:-.01em;margin:52px 0 16px;line-height:1.2;scroll-margin-top:88px;}
.prose h2:first-of-type{margin-top:0;}
.prose h3{font-family:'Archivo',sans-serif;font-size:17.5px;font-weight:700;margin:30px 0 10px;}
.prose p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:16px;}
.prose ul,.prose ol{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin:0 0 18px 22px;}
.prose li{margin-bottom:9px;}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--laser);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--gold);}

/* ---------- callout ---------- */
.tip{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:12px;padding:20px 24px;margin:26px 0;scroll-margin-top:88px;}
.tip p{margin:0;font-size:14.5px;}
.tip strong{color:var(--gold);}

/* ---------- in-page table of contents (guide pages, opt-in via .guide-toc) ---------- */
.guide-toc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 22px;margin:0 0 26px;}
.guide-toc b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-dim);font-weight:600;margin-bottom:10px;}
.guide-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;}
.guide-toc li{margin:0;}
.guide-toc a{display:inline-block;font-size:13px;color:var(--ink-soft);text-decoration:none;background:var(--surface-2,rgba(0,0,0,.03));border:1px solid var(--border-soft);border-radius:20px;padding:5px 12px;transition:color .15s ease,border-color .15s ease;}
.guide-toc a:hover{color:var(--gold);border-color:var(--gold);}

/* ---------- data table ---------- */
.data-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px;}
.data-table th,.data-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-soft);color:var(--ink-soft);}
.data-table th{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-dim);font-weight:600;}
.data-table td:first-child{color:var(--ink);font-weight:500;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- steps ---------- */
.steps{counter-reset:s;list-style:none;margin:24px 0 26px;padding:0;}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px;color:var(--ink-soft);font-size:15.5px;line-height:1.7;}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:8px;background:var(--gold-soft);border:1px solid var(--border);color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.steps li strong{display:block;color:var(--ink);margin-bottom:2px;}

/* ---------- related links ---------- */
.related{padding:26px 0 84px;position:relative;z-index:2;}
.related .wrap{max-width:820px;}
.related h2{font-family:'Archivo',sans-serif;font-size:20px;font-weight:800;margin-bottom:18px;}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:13px;}
.rel-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:18px 20px;text-decoration:none;transition:border-color .25s ease,transform .25s ease;}
.rel-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.rel-card b{display:block;font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.rel-card span{font-size:13px;color:var(--ink-dim);line-height:1.55;}

/* ---------- page footer ---------- */
.page-foot{border-top:1px solid var(--border-soft);padding:34px 32px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-dim);position:relative;z-index:2;}
.page-foot a{color:var(--ink-dim);text-decoration:none;}
.page-foot a:hover{color:var(--gold);}

@media(max-width:600px){
  .prose{padding:52px 0 14px;}
  .prose h2{margin:40px 0 14px;}
  .crumbs{padding:14px 20px 0;font-size:11.5px;}
  .rel-grid{grid-template-columns:1fr;}
}

/* ---------- guide hero (pages with no generator on them) ---------- */
.guide-hero{padding:56px 0 8px;position:relative;z-index:2;}
.guide-hero .wrap{max-width:820px;}
.guide-hero h1{font-family:'Archivo',sans-serif;font-size:clamp(31px,5vw,52px);font-weight:900;line-height:1.08;letter-spacing:-.02em;margin:14px 0 18px;}
.guide-hero h1 .accent{background:linear-gradient(100deg,var(--gold),var(--laser));-webkit-background-clip:text;background-clip:text;color:transparent;}
.guide-lead{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:640px;}
@media(max-width:600px){.guide-hero{padding:34px 0 4px;}}

/* ---------- site-wide footer navigation ----------
   Carried on every page so each tool and guide has a crawlable inbound link
   from everywhere else on the site. */
.foot-nav{border-top:1px solid var(--border-soft);padding:44px 32px 10px;position:relative;z-index:2;}
.foot-nav-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;}
.foot-col b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-dim);margin-bottom:13px;font-weight:600;}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-soft);text-decoration:none;margin-bottom:9px;transition:color .2s ease;}
.foot-col a:hover{color:var(--gold);}
@media(max-width:600px){.foot-nav{padding:34px 20px 6px;}.foot-nav-inner{gap:24px;}}

/* ---------- QR Code Checker tool ---------- */
.qc-wrap{max-width:820px;margin:0 auto;padding:0 32px;position:relative;z-index:2;}
.qc-drop{border:2px dashed var(--border);border-radius:16px;padding:46px 26px;text-align:center;cursor:pointer;background:var(--surface);transition:border-color .25s ease,background .25s ease;}
.qc-drop:hover,.qc-drop.drag{border-color:var(--gold);background:var(--gold-soft);}
.qc-drop:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.qc-drop b{display:block;font-family:'Archivo',sans-serif;font-size:16px;color:var(--ink);margin-bottom:6px;}
.qc-drop span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-dim);}
.qc-status{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-dim);min-height:20px;margin-top:14px;}
.qc-preview{margin:22px auto 0;max-width:220px;}
.qc-preview img{width:100%;border-radius:12px;border:1px solid var(--border);background:#fff;}

.qc-report{margin-top:26px;}
.qc-overall{display:flex;align-items:center;gap:22px;border-radius:16px;padding:24px 26px;margin-bottom:18px;border:1px solid var(--border);}
.qc-overall .qc-score{font-family:'Archivo',sans-serif;font-size:42px;font-weight:900;line-height:1;min-width:64px;text-align:center;}
.qc-overall b{display:block;font-family:'Archivo',sans-serif;font-size:17px;margin-bottom:4px;}
.qc-overall p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.6;}
.qc-pass-bg{background:rgba(78,232,195,.07);border-color:rgba(78,232,195,.3);}
.qc-pass-bg .qc-score{color:var(--laser);}
.qc-warn-bg{background:var(--gold-soft);border-color:rgba(232,185,78,.35);}
.qc-warn-bg .qc-score{color:var(--gold);}
.qc-fail-bg{background:rgba(255,107,107,.07);border-color:rgba(255,107,107,.3);}
.qc-fail-bg .qc-score{color:#FF6B6B;}

.qc-row{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:17px 20px;margin-bottom:11px;}
.qc-row-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px;}
.qc-label{font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);}
.qc-badge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.07em;padding:4px 9px;border-radius:6px;flex-shrink:0;}
.qc-pass{background:rgba(78,232,195,.13);color:var(--laser);}
.qc-warn{background:rgba(232,185,78,.15);color:var(--gold);}
.qc-fail{background:rgba(255,107,107,.13);color:#FF6B6B;}
.qc-na{background:rgba(255,255,255,.06);color:var(--ink-dim);}
.qc-value{font-size:14.5px;color:var(--ink);margin-bottom:5px;word-break:break-word;}
.qc-note{font-size:13px;color:var(--ink-dim);line-height:1.6;}
.qc-code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:rgba(255,255,255,.05);border:1px solid var(--border-soft);border-radius:7px;padding:8px 10px;display:block;white-space:pre-wrap;word-break:break-all;color:var(--ink-soft);}
@media(max-width:600px){
  .qc-wrap{padding:0 20px;}
  .qc-drop{padding:34px 18px;}
  .qc-overall{gap:16px;padding:20px;}
  .qc-overall .qc-score{font-size:34px;min-width:50px;}
}

/* ---------- Batch QR Code tool ---------- */
.batch-wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2;}
.batch-input-row textarea{width:100%;min-height:180px;padding:16px 18px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--ink);outline:none;resize:vertical;line-height:1.6;}
.batch-input-row textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.batch-item-count{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-dim);margin-top:8px;min-height:18px;}
.batch-controls{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:18px 0;}
.batch-controls-head{font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:16px;}
.batch-contrast-warning{color:#FF6B6B;font-weight:600;font-size:13px;margin-top:12px;}
.batch-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0;}
.batch-status{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-dim);min-height:20px;flex-basis:100%;}
.batch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px;}
.batch-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.batch-thumb{width:100%;aspect-ratio:1/1;max-width:160px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;margin-bottom:10px;overflow:hidden;}
.batch-thumb img{width:100%;height:100%;object-fit:contain;}
.batch-label{font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.batch-payload{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-dim);margin-bottom:10px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.batch-error{font-size:12px;color:#FF6B6B;padding:20px 10px;line-height:1.5;}
.batch-dl-btn{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;padding:8px 14px;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s;}
.batch-dl-btn:hover{border-color:var(--gold);color:var(--gold);}
@media(max-width:600px){
  .batch-wrap{padding:0 20px;}
  .batch-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;}
  .batch-controls{padding:16px 18px;}
}


/* ---------- homepage type cards: secondary "Learn more" link ---------- */
.type-cell{position:relative;}
.cell-more{display:block;margin-top:7px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.03em;color:var(--ink-dim);text-decoration:none;opacity:0;transform:translateY(-3px);transition:opacity .22s ease,color .2s ease,transform .22s ease;}
.type-cell:hover .cell-more,.cell-more:focus-visible{opacity:1;transform:translateY(0);color:var(--gold);}
@media(hover:none){.cell-more{opacity:1;transform:none;}}

/* ---------- supporting tagline under the primary H1 ----------
   The creative headline each page used to lead with. It keeps its original
   Archivo weight and gradient .accent span, one step down from the H1 so the
   SEO heading reads first without losing the brand voice. */
.hero-tagline{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(19px,2.6vw,29px);line-height:1.18;letter-spacing:-.01em;
  color:var(--ink-soft);margin:0 0 20px;max-width:19em;
}
.hero-head .hero-tagline,
.guide-hero .hero-tagline{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(19px,2.6vw,29px);line-height:1.18;letter-spacing:-.01em;
  color:var(--ink-soft);max-width:19em;
}
.hero-head .hero-tagline{margin:-6px 0 22px;}
.guide-hero .hero-tagline{margin:-4px 0 20px;}
@media(max-width:600px){.hero-tagline{margin-bottom:16px;}}
/* the scoped colour above out-specifies the global .accent rule, so restore
   the gold->green gradient on the tagline's accent span */
.hero-head .hero-tagline .accent,
.guide-hero .hero-tagline .accent{
  background:linear-gradient(100deg,var(--gold),var(--laser));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}