/*!
 * it-quote30-gallery-v1.css (29 Sep 2026)
 *
 * Layout for the 30-design premium quote strip added to the Quote Templates gallery page
 * (quote-templates). Scoped entirely under #q30Strip so nothing here can leak into the
 * page's own React-owned #root gallery above it. The .qgm-* classes here are a small,
 * self-contained recreation of quotegenerator's own document shape (see
 * it-quote30-gallery-v1.js's own header comment for why - quotegenerator's real Tailwind
 * utility classes are compiled only into that page's own inline stylesheet and are not safe
 * to import wholesale here, since that stylesheet ships a universal `*,:before,:after` reset).
 */
#q30Strip{max-width:1180px;margin:44px auto 0;padding:0 20px 8px}
#q30Strip .i30-head{margin:0 0 6px}
#q30Strip .i30-head h2{font-size:clamp(20px,2.6vw,26px);line-height:1.2;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;color:#171717}
#q30Strip .i30-head p{margin:0 0 22px;font-size:14px;line-height:1.55;color:#5A544B;max-width:640px}
#q30Strip .i30-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
#q30Strip .i30-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;border-radius:10px;padding:8px;border:1px solid transparent;transition:border-color .15s,box-shadow .15s}
#q30Strip .i30-card:hover{border-color:#E3E0D8;box-shadow:0 8px 20px -12px rgba(23,23,23,.18)}
#q30Strip .i30-card:focus-visible{outline:3px solid #F26207;outline-offset:2px;border-radius:10px}
#q30Strip .i30-mini{position:relative;display:block;width:100%;aspect-ratio:700/900;overflow:hidden;border-radius:6px;background:#F4F1EA;box-shadow:0 1px 2px rgba(11,20,25,.08),0 10px 22px -14px rgba(11,20,25,.22)}
#q30Strip .i30-mini .qg-mini-doc{position:absolute;left:0;top:0;width:700px;transform-origin:top left;box-sizing:border-box;background:#fff;font-family:'Inter',ui-sans-serif,sans-serif;color:#171717}
#q30Strip .i30-name{font-size:13px;font-weight:600;color:#171717;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  #q30Strip .i30-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

/* ---- the .qg-mini-doc's own internal shape (plain custom classes, no Tailwind) ---- */
#q30Strip .qg-mini-doc *{box-sizing:border-box}
#q30Strip .qgm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px;border-bottom:1px solid #F0F0EF}
#q30Strip .qgm-head-left{display:flex;gap:14px;align-items:center;min-width:0}
#q30Strip .qgm-logo{width:56px;height:56px;border-radius:14px;background:#FAFAF9;border:1px solid #EDEDEC;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
#q30Strip .qgm-biz-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
#q30Strip .qgm-biz-line{margin-top:3px;font-size:11px;line-height:1.3;color:#737373}
#q30Strip .qgm-head-right{text-align:right;flex-shrink:0}
#q30Strip .qgm-doctype{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
#q30Strip .qgm-meta{margin-top:4px;font-size:11px;font-weight:500;color:#737373}
#q30Strip .qgm-body{padding:24px;display:flex;flex-direction:column;gap:24px}
#q30Strip .qgm-badge{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.1em;background:#111;color:#fff}
#q30Strip .qgm-project{margin:12px 0 0;font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:#111}
#q30Strip .qgm-project::before{content:'Project: ';color:#a3a3a3}
#q30Strip .qgm-label{font-size:10px;letter-spacing:.1em;font-weight:600;color:#a3a3a3}
#q30Strip .qgm-terms{margin:8px 0 0;font-size:12px;line-height:1.6;color:#525252}
#q30Strip .qgm-client{border-radius:14px;background:#FAFAF9;border:1px solid #F0F0EF;padding:12px}
#q30Strip .qgm-client-name{margin-top:4px;font-size:13px;font-weight:500}
#q30Strip .qgm-row-head{display:flex;align-items:center;justify-content:space-between}
#q30Strip .qgm-count{font-size:11px;color:#a3a3a3}
#q30Strip .qgm-table{margin-top:12px;border:1px solid #E5E5E5;border-radius:14px;overflow:hidden}
#q30Strip .qgm-thead,#q30Strip .qgm-row{display:flex;align-items:flex-start;gap:8px;padding:10px 12px}
#q30Strip .qgm-thead{background:#FAFAF9;font-size:10px;letter-spacing:.1em;font-weight:600;color:#737373;padding:8px 12px}
#q30Strip .qgm-row{border-top:1px solid #F5F5F4;font-size:12px}
#q30Strip .qgm-row-n{width:22px;color:#a3a3a3;font-size:11px}
#q30Strip .qgm-row-t{flex:1;min-width:0}
#q30Strip .qgm-row-q,#q30Strip .qgm-row-r{width:56px;text-align:right}
#q30Strip .qgm-row-a{width:70px;text-align:right;font-weight:500}
#q30Strip .qgm-totals{background:#FCFCFB;border-top:1px solid #E5E5E5;padding:14px}
#q30Strip .qgm-totals>div{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
#q30Strip .qgm-total-line{font-weight:600;border-top:1px solid #E5E5E5;padding-top:8px}
#q30Strip .qgm-balance{margin-top:6px;background:#111;color:#fff;border-radius:10px;padding:10px 14px;font-weight:600}
#q30Strip .qgm-lists{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#q30Strip .qgm-list{border:1px solid #E5E5E5;border-radius:14px;padding:12px}
#q30Strip .qgm-list-b{background:#FAFAF9}
#q30Strip .qgm-list ul{margin:8px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.6}
#q30Strip .qgm-list li::before{content:'\2022  ';color:#d4d4d4}
#q30Strip .qgm-pills{display:flex;flex-wrap:wrap;gap:8px}
#q30Strip .qgm-pill{font-size:11px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #E5E5E5}
#q30Strip .qgm-steps{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
#q30Strip .qgm-steps li{display:flex;align-items:center;gap:8px;font-size:12px}
#q30Strip .qgm-step-n{width:20px;height:20px;border-radius:999px;background:#111;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#q30Strip .qgm-sig{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:20px;border-top:1px dashed #E5E5E5}
#q30Strip .qgm-sig-line div{margin-top:24px;height:1px;background:#171717}
#q30Strip .qgm-sig-line span{display:block;margin-top:4px;font-size:10px;color:#737373}
#q30Strip .qgm-sig-name{text-align:right;font-size:12px}
#q30Strip .qgm-powered{margin-top:8px;font-size:10px;color:#a3a3a3;text-align:center}