/* Product kit: shared components for product pages (TurboGet, Content OS, ...).
   Load after style.css + project-common.css and before a project-<name>.css that sets
   --accent, --accent-hover, --accent-soft and --accent-2 (gradient partner). */
:root{--accent-2:var(--sea)}

/* ---- hero ---- */
.tg-hero .hero-bg{opacity:.8}
.tg-hero-glow{
  position:absolute;inset:-20% -10% auto auto;width:60%;height:120%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
}
.tg-brand{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.tg-brand img{width:56px;height:56px;border-radius:14px}
.tg-brand-name{font-size:1.5rem;font-weight:700;line-height:1.1}
.tg-brand-by{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.tg-hero h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tg-hero-note{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);margin-top:var(--space-4);letter-spacing:.02em}
.tg-hero-shot{position:relative;z-index:1}

/* ---- screenshots ---- */
.shot{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-subtle);background:var(--bg-elevated);
  box-shadow:0 30px 60px -18px #00000080;
}
.shot img{width:100%;height:auto}
.shot-caption{
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);
  text-align:center;margin-top:var(--space-3);letter-spacing:.02em;
}
.shot-pair{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-6);align-items:start}

/* ---- stats ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.stat{padding:var(--space-6) var(--space-5);border-right:1px solid var(--border-subtle);background:var(--bg-elevated)}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--font-serif);font-style:italic;font-size:2.4rem;line-height:1;color:var(--accent)}
.stat-l{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:var(--space-2)}
.stat-d{font-size:.86rem;color:var(--text-secondary);margin-top:var(--space-3)}

/* ---- feature groups ---- */
.feature-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.feature-group{padding:var(--space-6);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-elevated)}
.feature-group h3{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--space-4);display:flex;align-items:center;gap:.6rem;
}
.feature-group h3 svg{width:20px;height:20px;flex-shrink:0}
.feature-group li{
  position:relative;padding-left:1.2rem;font-size:.9rem;color:var(--text-secondary);
  line-height:1.6;margin-bottom:var(--space-2);
}
.feature-group li::before{
  content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.feature-group li strong{color:var(--text-primary);font-weight:600}

/* ---- comparison table / spec tables ---- */
.table-scroll{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.tg-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:34rem}
.tg-table th,.tg-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.tg-table tr:last-child td{border-bottom:none}
.tg-table thead th{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);background:var(--bg-surface);font-weight:600;
}
.tg-table td{color:var(--text-secondary)}
.tg-table td:first-child{color:var(--text-primary);font-weight:600}
.tg-table .yes{color:var(--sea);font-weight:600}
.tg-table .no{color:var(--text-muted)}
.tg-table code{font-family:var(--font-mono);font-size:.84em;color:var(--text-primary);background:var(--bg-surface);padding:.08rem .35rem;border-radius:var(--radius-sm)}
.tg-table th.highlight,.tg-table td.highlight{background:var(--accent-soft)}

/* ---- browsers ---- */
.browser-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.browser-col{padding:var(--space-6);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-elevated)}
.browser-col h3{font-size:1.05rem;margin-bottom:var(--space-2)}
.browser-col > p{font-size:.88rem;color:var(--text-secondary);margin-bottom:var(--space-4)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.chip-row span{
  font-family:var(--font-mono);font-size:.72rem;padding:.35rem .8rem;border-radius:var(--radius-full);
  border:1px solid var(--border-subtle);color:var(--text-primary);background:var(--bg-surface);
}

/* ---- steps ---- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.steps li{
  counter-increment:step;position:relative;padding:var(--space-6) var(--space-5) var(--space-5);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-elevated);
}
.steps li::before{
  content:"0" counter(step);display:block;font-family:var(--font-mono);font-size:.72rem;
  color:var(--accent);letter-spacing:.08em;margin-bottom:var(--space-3);
}
.steps h3{font-size:1rem;margin-bottom:var(--space-2)}
.steps p{font-size:.86rem;color:var(--text-secondary)}
.steps code{font-family:var(--font-mono);font-size:.82em;color:var(--text-primary)}

/* ---- download box ---- */
.download-box{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-6);align-items:center;
  padding:var(--space-7) var(--space-6);border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border-subtle));
  background:linear-gradient(135deg,var(--bg-elevated),color-mix(in srgb,var(--accent-2) 10%,var(--bg-elevated)));
}
.download-box img{width:72px;height:72px;border-radius:18px}
.download-box h2{margin:0 0 var(--space-2);max-width:none;font-size:1.6rem}
.download-box p{color:var(--text-secondary);font-size:.92rem}
.download-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted)}
.download-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch;min-width:15rem}
.checksum{
  margin-top:var(--space-5);font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);
  word-break:break-all;
}
.checksum code{color:var(--text-secondary)}
.btn-icon svg{width:16px;height:16px;margin-right:.55rem}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--border-subtle);max-width:52rem}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--space-5) 2.5rem var(--space-5) 0;position:relative;
  font-weight:600;font-size:1rem;color:var(--text-primary);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:1.2rem;color:var(--accent);transition:transform .16s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq .faq-a{padding:0 0 var(--space-5);color:var(--text-secondary);font-size:.94rem;max-width:46rem}
.faq .faq-a p + p{margin-top:var(--space-3)}
.faq code{font-family:var(--font-mono);font-size:.85em;color:var(--text-primary)}

/* ---- changelog ---- */
.changelog{border-left:2px solid var(--border-subtle);padding-left:var(--space-6);max-width:46rem}
.release{position:relative;padding-bottom:var(--space-6)}
.release::before{
  content:"";position:absolute;left:calc(-1 * var(--space-6) - 6px);top:.35rem;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
}
.release h3{font-size:1rem;margin-bottom:var(--space-2)}
.release h3 span{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);margin-left:.6rem;font-weight:400}
.release li{font-size:.9rem;color:var(--text-secondary);padding-left:1rem;position:relative;margin-bottom:.3rem}
.release li::before{content:"–";position:absolute;left:0;color:var(--text-muted)}

/* ---- sub-navigation for the product's own pages ---- */
.subnav{border-bottom:1px solid var(--border-subtle);background:var(--bg-page)}
.subnav .wrap{display:flex;gap:var(--space-5);overflow-x:auto;padding-top:var(--space-4);padding-bottom:var(--space-4)}
.subnav a{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);white-space:nowrap;transition:color .16s var(--ease);
}
.subnav a:hover{color:var(--text-primary)}
.subnav a[aria-current="page"]{color:var(--accent)}

/* ---- legal / long-form documents ---- */
.legal-copy{max-width:46rem}
.legal-copy h2{font-size:1.35rem;margin:var(--space-7) 0 var(--space-3);max-width:none}
.legal-copy h2:first-child{margin-top:0}
.legal-copy h3{font-size:1.05rem;margin:var(--space-5) 0 var(--space-2)}
.legal-copy p{color:var(--text-secondary);margin-bottom:var(--space-4);font-size:.98rem}
.legal-copy ul,.legal-copy ol{margin:0 0 var(--space-4) 1.3rem;color:var(--text-secondary)}
.legal-copy ul{list-style:disc}
.legal-copy ol{list-style:decimal}
.legal-copy li{margin-bottom:var(--space-2);font-size:.96rem}
.legal-copy a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-copy strong{color:var(--text-primary)}
.legal-copy code{font-family:var(--font-mono);font-size:.85em;color:var(--text-primary);background:var(--bg-elevated);padding:.08rem .35rem;border-radius:var(--radius-sm)}
.legal-copy .tg-table{margin-bottom:var(--space-5)}
.legal-summary{
  padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-7);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-subtle));background:var(--accent-soft);
}
.legal-summary p{color:var(--text-primary);margin-bottom:var(--space-2)}
.legal-summary ul{margin-bottom:0}
.legal-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}

/* ---- product footer links ---- */
.product-footer-links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);justify-content:center;margin-bottom:var(--space-3)}
.product-footer-links a{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.product-footer-links a:hover{color:var(--accent)}

@media (max-width:900px){
  .shot-pair,.browser-cols,.feature-groups{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--border-subtle)}
  .steps{grid-template-columns:1fr 1fr}
  .download-box{grid-template-columns:1fr;text-align:left}
  .download-actions{min-width:0}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--border-subtle)}
  .stat:last-child{border-bottom:none}
}
.honest-list{list-style:disc;margin-left:1.2rem}
.honest-list li{color:var(--text-secondary);margin-bottom:var(--space-3);font-size:.95rem}
.honest-list strong{color:var(--text-primary)}
/* grid children must be allowed to shrink, or a wide table inside pushes the page sideways on phones */
.shot-pair > *,.browser-cols > *,.feature-groups > *{min-width:0}
.table-scroll{max-width:100%}

/* ---- product status chip (e.g. "Not for sale") ---- */
.product-chip{
  display:inline-flex;align-items:center;gap:.45rem;margin-left:var(--space-3);
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:.3rem .7rem;border-radius:var(--radius-full);color:var(--accent);background:var(--accent-soft);
  vertical-align:middle;
}

/* ---- "in the creator's words" quote cards ---- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.quote-card{
  margin:0;padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);
  background:var(--bg-elevated);position:relative;
}
.quote-card::before{
  content:"\201C";position:absolute;top:.2rem;left:1rem;font-family:var(--font-serif);font-size:3rem;
  line-height:1;color:var(--accent);opacity:.5;
}
.quote-card p{font-family:var(--font-serif);font-style:italic;font-size:1.15rem;color:var(--text-primary);line-height:1.45;margin-top:var(--space-4)}
.quote-card footer{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);margin-top:var(--space-4);text-transform:uppercase;letter-spacing:.05em}

/* ---- loop: a numbered cycle of steps ---- */
.loop{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);counter-reset:loop}
.loop li{
  counter-increment:loop;position:relative;padding:var(--space-5) var(--space-4);
  border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--bg-elevated);text-align:center;
}
.loop li::before{
  content:counter(loop);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3);
  width:2rem;height:2rem;border-radius:50%;font-family:var(--font-mono);font-size:.8rem;font-weight:600;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-hover));
}
.loop li:not(:last-child)::after{
  content:"";position:absolute;top:calc(var(--space-5) + 1rem);right:calc(-1 * var(--space-3));width:var(--space-3);
  height:1px;background:var(--border-subtle);
}
.loop h3{font-size:.95rem;margin-bottom:var(--space-2)}
.loop p{font-size:.8rem;color:var(--text-secondary);line-height:1.55}

/* ---- feature row: copy + screenshot, alternating ---- */
.feature-row{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--space-8);align-items:center}
.feature-row.is-reverse .feature-row-copy{order:2}
.feature-row + .feature-row{margin-top:var(--space-9)}
.feature-row-copy .section-tag{color:var(--accent)}
.feature-row-copy h2{margin-bottom:var(--space-4)}
.feature-row-copy > p{color:var(--text-secondary);margin-bottom:var(--space-4)}
.check-list li{position:relative;padding-left:1.6rem;color:var(--text-secondary);font-size:.94rem;margin-bottom:var(--space-3);line-height:1.6}
.check-list li::before{
  content:"";position:absolute;left:0;top:.38em;width:1rem;height:1rem;border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237c7cf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center/100% no-repeat;
}
.check-list strong{color:var(--text-primary)}
.feature-row > *{min-width:0}
.quote-grid > *,.loop > *{min-width:0}

@media (max-width:1100px){
  .loop{grid-template-columns:repeat(3,1fr)}
  .loop li::after{display:none}
}
@media (max-width:900px){
  .quote-grid{grid-template-columns:1fr}
  .feature-row{grid-template-columns:1fr;gap:var(--space-6)}
  .feature-row.is-reverse .feature-row-copy{order:0}
}
@media (max-width:560px){
  .loop{grid-template-columns:1fr 1fr}
}

/* ---- Shared extras for project pages (used where a project css doesn't define its own) ---- */
.callout{
  padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-subtle));background:var(--accent-soft);
}
.callout p{color:var(--text-primary);margin:0}
.callout p + p{margin-top:var(--space-3);color:var(--text-secondary)}
.code-block{
  font-family:var(--font-mono);font-size:.82rem;line-height:1.7;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-surface);
  color:var(--text-primary);overflow-x:auto;white-space:pre;margin:var(--space-3) 0 var(--space-4);
}
.legal-copy-steps{list-style:decimal;margin:0 0 0 1.2rem;color:var(--text-secondary)}
.legal-copy-steps li{margin-bottom:var(--space-3);font-size:.92rem;line-height:1.6;padding-left:.2rem}
.legal-copy-steps strong{color:var(--text-primary)}
.status-note{
  display:inline-block;margin-left:.5rem;vertical-align:middle;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:.18rem .55rem;border-radius:var(--radius-full);color:var(--accent);background:var(--accent-soft);
}
.frame-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);align-items:start}
.frame-grid > *{min-width:0}
.frame-grid figure{margin:0}
.frame-grid .shot-caption{text-align:left}
.frame-wide{grid-column:1 / -1}
@media (max-width:900px){.frame-grid{grid-template-columns:1fr}}

/* Long identifiers (API metric names, paths) must wrap on phones. */
.story-copy code,.arch-row code,.faq-a code,.check-list code,.feature-group code,.tg-table code{overflow-wrap:anywhere}

.frame-grid img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);border:1px solid var(--border-subtle)}