/* Existing site tokens and shadcn/Radix primitives, scoped to this free tool. */
.fq-workspace{display:grid;grid-template-columns:minmax(290px,.85fr) minmax(0,1.15fr);grid-template-areas:"controls preview" "controls output";grid-template-rows:min-content 1fr;gap:22px 28px;align-items:start;padding-bottom:48px;--primary-rgb:17 17 17;--background-rgb:255 255 255;--ring-rgb:57 181 74;--muted-rgb:242 245 241;--foreground-rgb:17 17 17}
.fq-editor,.fq-preview-shell{display:contents}.fq-controls{grid-area:controls}.fq-preview{grid-area:preview}.fq-output{grid-area:output}
.fq-card{padding:26px;border:1.5px solid #1c1b18;border-radius:26px;background:#fff;min-width:0}.fq-card h2{font-size:27px;line-height:1.15;margin:0 0 18px}.fq-card h3{font-size:18px;line-height:1.3;margin:0 0 12px}.fq-card p{font-size:14px;line-height:1.65}.fq-controls fieldset{border:0;padding:0;margin:0;min-width:0}.fq-output{display:grid;gap:22px;min-width:0}.fq-field{display:grid;gap:8px;margin:16px 0;font-size:14px;font-weight:600;min-width:0}.fq-field>input,.fq-field textarea,.fq-colour input:not([type=color]){font:400 16px var(--sans);border:1px solid #aaa;border-radius:12px;padding:12px;width:100%;min-width:0;background:#fff;color:#111}.fq-field textarea{resize:vertical}.fq-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fq-divider{border-top:1px solid #ddd;margin-top:24px;padding-top:24px}.fq-help{color:#595954;font-size:14px!important;margin:10px 0;line-height:1.6}.fq-colour{display:flex;align-items:center;gap:8px;min-width:0}.fq-colour input[type=color]{width:44px;height:44px;padding:3px;flex-shrink:0;border:1px solid #aaa;border-radius:10px;cursor:pointer;background:white}.fq-presets{display:flex;flex-wrap:wrap;gap:8px}.fq-workspace [data-slot=button]{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid #111;border-radius:999px;min-height:44px;padding:10px 16px;font:600 14px/1.3 var(--sans);background:#fff;color:#111;cursor:pointer;white-space:normal}.fq-workspace [data-slot=button][data-variant=default]{background:#39b54a}.fq-workspace [data-slot=button]:hover:enabled{background:#e3f5e5}.fq-workspace [data-slot=button]:disabled{opacity:.45;cursor:not-allowed}.fq-workspace [data-slot=button][data-variant=ghost]{border:0;background:none}.fq-upload{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:1.5px dashed #777;border-radius:14px;cursor:pointer;font-size:14px}.fq-upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.fq-upload:focus-within{outline:3px solid var(--gold);outline-offset:3px}.fq-check{display:flex;align-items:center;gap:8px;font-size:14px;margin:18px 0 10px}.fq-check input{flex-shrink:0}.fq-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.fq-tabs [data-slot=tabs-trigger]{border:1px solid #bbb;border-radius:999px;padding:9px 12px;background:white;color:#111;font:500 14px var(--sans);cursor:pointer}.fq-tabs [data-state=active]{background:#dff4e2;border-color:#111;font-weight:700}.fq-select{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #aaa;border-radius:12px;padding:12px;background:#fff;color:#111;font:400 14px var(--sans);min-height:44px;text-align:left;width:100%;cursor:pointer}.fq-select-popover{z-index:13000;display:flex;flex-direction:column;overflow:hidden;background:white;border:1px solid #bbb;border-radius:14px;padding:6px;box-shadow:0 12px 35px #0002}.fq-select-menu{position:relative;flex:1;min-height:0;border-radius:8px;font:400 14px var(--sans);overflow:auto;scrollbar-color:#bcbcbc transparent}.fq-select-menu::-webkit-scrollbar{width:6px}.fq-select-menu::-webkit-scrollbar-thumb{background:#bcbcbc;border-radius:999px}.fq-select-menu::-webkit-scrollbar-track{background:transparent}.fq-select-menu [data-slot=select-item]{display:flex;align-items:center;position:relative;gap:8px;padding:12px 28px 12px 12px;border-radius:9px;cursor:pointer}.fq-select-menu [data-highlighted]{background:#dff4e2;outline:0}.fq-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.fq-preview-heading h2{margin:0}.fq-preview-heading>span{font-size:12px;color:#276b32}.fq-preview-art{margin:20px 0;padding:18px;display:grid;place-items:center;background:#f3f5f1;border-radius:18px;min-height:240px}.fq-preview-art img{display:block;width:min(100%,360px);height:auto}.fq-preview-art[aria-busy=true]{opacity:.5}.fq-placeholder{padding:50px 10px;text-align:center;color:#666}.fq-scan{display:flex;align-items:center;gap:8px;color:#21662b;min-height:26px}.fq-error{color:#a32820}.fq-eyebrow{font-size:12px;font-weight:700;letter-spacing:0;color:#276b32}.fq-print h2{margin-top:10px}.fq-product{display:grid;grid-template-columns:90px minmax(0,1fr);gap:18px;padding-top:0;margin-top:24px}.fq-product img{width:90px;height:90px;object-fit:cover;border-radius:12px}.fq-product h3{margin-bottom:8px}.fq-product p{font-size:14px}.fq-product .fq-field{margin:12px 0}.fq-downloads{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.fq-downloads>button{flex:1}.fq-note{min-height:24px;color:#595954;overflow-wrap:anywhere}.fq-private{display:flex;align-items:flex-start;gap:8px;font-size:14px!important;color:#595954;border-top:1px solid #ddd;padding-top:14px}.fq-private svg{flex-shrink:0}.fq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.fq-seo{padding:34px 0;border-top:1px solid #ddd}.fq-seo h2{font-size:32px}.fq-seo p,.fq-seo li{max-width:780px}.fq-formats{width:100%;border-collapse:collapse;font-size:14px}.fq-formats th,.fq-formats td{border-bottom:1px solid #ddd;padding:12px;text-align:left}.fq-table-scroll{overflow-x:auto}.fq-nojs{padding:20px;background:#eff5ee;border-radius:18px}
@media(min-width:1000px){.fq-preview-art img{max-height:330px;width:auto;max-width:100%}}
@media(max-width:760px){.fq-workspace{grid-template-columns:1fr;gap:20px}.fq-card{padding:20px}.fq-row{gap:10px}.fq-product{grid-template-columns:70px minmax(0,1fr);gap:12px}.fq-product img{width:70px;height:88px}.fq-preview-art{padding:12px}.fq-card h2{font-size:25px}.fq-colour{flex-wrap:wrap}.fq-colour input:not([type=color]){flex:1;min-width:75px}.fq-tabs [data-slot=tabs-trigger]{padding:9px 10px}.fq-seo h2{font-size:28px}}

.fq-intro .page-intro{padding-bottom:24px;margin-bottom:0}.fq-intro .lede{margin-bottom:0}
.fq-select-wrap{position:relative;display:block}.fq-select-wrap select{appearance:none;padding-right:38px}.fq-select-wrap>svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.fq-colour input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.fq-colour input[type=color]::-webkit-color-swatch{border:1px solid #999;border-radius:6px}.fq-colour input[type=color]::-moz-color-swatch{border:1px solid #999;border-radius:6px}
.fq-logo-settings{display:flex;gap:18px;align-items:center;margin:18px 0}.fq-logo-preview{position:relative;flex-shrink:0;padding:8px;border:1px solid #ddd;border-radius:12px;background:#f3f5f1}.fq-logo-preview img{display:block;object-fit:contain;width:80px;height:80px}.fq-logo-preview button{position:absolute;right:-8px;top:-8px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #111;border-radius:50%;background:#fff;color:#111;cursor:pointer}.fq-logo-settings .fq-field{flex:1;margin:0}.fq-logo-preview button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.fq-style-picker+.fq-style-picker{margin-top:22px}.fq-style-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.fq-workspace .fq-style-options [data-slot=button]{display:flex;flex-direction:column;gap:7px;min-width:0;min-height:82px;padding:9px 4px;border:1px solid #ddd;border-radius:12px;font-size:12px;line-height:1.2;font-weight:500;background:#fff}.fq-workspace .fq-style-options [aria-pressed=true]{border:2px solid #21662b;padding:8px 3px;background:#dff4e2}.fq-style-icon{display:block;width:42px;height:42px;color:#111}.fq-style-icon svg{display:block;width:100%;height:100%}.fq-style-options button:focus-visible{outline:3px solid #805600;outline-offset:3px}@media(max-width:360px){.fq-style-options{gap:5px}.fq-style-icon{width:36px;height:36px}.fq-workspace .fq-style-options [data-slot=button]{font-size:12px}}

.fq-select-menu [role=option]{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:9px;cursor:pointer;min-height:44px}.fq-select-menu [aria-selected=true]{font-weight:600;background:#dff4e2}.fq-option-space{width:16px;flex-shrink:0}.fq-product img{aspect-ratio:1;object-fit:cover}

.fq-logo-preview button{padding:0!important;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}.fq-logo-preview button svg{display:block;margin:0;width:16px;height:16px;flex:none}
.fq-workspace input:focus,.fq-workspace textarea:focus{outline:none!important;box-shadow:none!important;border-color:#666}.fq-workspace button:focus{box-shadow:none!important}.fq-workspace button:focus:not(:focus-visible){outline:none!important}.fq-workspace button:focus-visible,.fq-workspace [role=tab]:focus-visible{outline:2px solid #777!important;outline-offset:2px!important}.fq-upload:focus-within{outline:none}.fq-upload:has(input:focus-visible){outline:2px solid #777;outline-offset:2px}
.fq-style-options{grid-template-columns:repeat(3,minmax(0,1fr))}@media(min-width:1000px){.fq-style-options{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fq-wa-link{display:block;overflow-wrap:anywhere;font-size:14px;line-height:1.6;padding:12px;background:#f3f5f1;border-radius:10px}

.fq-wa-phone{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px}.fq-wa-phone .fq-select{height:46px}

.fq-intro .page-intro{max-width:none}.fq-intro .page-intro h1{white-space:nowrap;font-size:clamp(26px,7.1vw,64px);letter-spacing:-.04em}
.fq-select-display{display:flex;align-items:center;gap:8px;min-width:0}.fq-select>svg,.fq-select-menu [role=option]>svg{flex-shrink:0}.fq-select-menu{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}.fq-select-menu [role=option]{gap:8px}.fq-option-flag{display:inline-flex;align-items:center;justify-content:center;width:22px;flex:0 0 22px;font-size:18px;line-height:1}.fq-option-label{min-width:0;flex:1;white-space:normal;overflow-wrap:anywhere}.fq-option-detail{flex-shrink:0;padding:3px 7px;border:1px solid #e1e4de;border-radius:7px;background:#fff;font-size:12px;font-variant-numeric:tabular-nums;color:#41453e}.fq-select-menu [data-highlighted]:not([aria-selected=true]){background:#f2f5ef}.fq-select-menu [aria-selected=true] .fq-option-detail{border-color:#b3d9bc;color:#21662b}.fq-wa-phone{grid-template-columns:112px minmax(0,1fr)}
.fq-intro .page-intro h1 em{font-size:1.22em!important}

/* Keep one live preview above the mobile controls, bounded by the editor rather
   than the purchase/download sections. It sits just under the floating nav card
   while the nav shows, and moves up to the nav's inset when the nav tucks away on
   scrolling down (the same rule as .sticky-mini-card in brand.css). */
@media(max-width:760px){
 .fq-workspace{display:flex;flex-direction:column;align-items:stretch;--fq-preview-size:clamp(96px,min(44vw,24svh),176px)}
 .fq-editor{display:flex;flex-direction:column;gap:16px;min-width:0}
 .fq-preview-shell{display:block;position:sticky;top:var(--nav-inset,10px);z-index:20;isolation:isolate;flex:none;transition:top .42s cubic-bezier(.2,.8,.2,1)}
 @media(prefers-reduced-motion:reduce){.fq-preview-shell{transition:none}}
 body:has(.masthead:not(.is-tucked)) .fq-preview-shell{top:calc(var(--nav-inset,10px) + var(--nav-card-h,68px) + 8px)}
 .fq-preview-shell::before{content:"";position:absolute;inset:-12px -12px -16px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#fff 0,#fff calc(100% - 16px),#fff0 100%)}
 .fq-preview{display:grid;grid-template-columns:var(--fq-preview-size) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:8px 12px;padding:8px;border-radius:18px;box-shadow:0 6px 16px #0000000d}
 .fq-preview-heading{grid-column:2;grid-row:1;align-self:end}
 .fq-preview-heading h2{font-size:18px;line-height:1.2}
 .fq-preview-art{grid-column:1;grid-row:1 / 3;width:var(--fq-preview-size);height:var(--fq-preview-size);min-height:0;margin:0;padding:0;border-radius:10px;overflow:hidden}
 .fq-preview-art img{width:100%;height:100%;object-fit:contain}
 .fq-placeholder{font-size:14px;padding:10px}
 .fq-preview .fq-scan{grid-column:2;grid-row:2;align-self:start;align-items:flex-start;min-height:0;margin:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
 .fq-scan svg{flex-shrink:0}
 .fq-controls :is(input,textarea,button,[role=tab]){scroll-margin-top:calc(var(--nav-inset,10px) + var(--nav-card-h,68px) + var(--fq-preview-size) + 48px)}
}

/* Type landing pages (docs/free-qr-seo.md): the family of QR types as link
   tiles in the generator's card language, a quiet tip and table links. */
.fq-family ul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.fq-seo .fq-family li{max-width:none}
.fq-family a{display:grid;gap:4px;height:100%;box-sizing:border-box;padding:16px 18px;border:1.5px solid #1c1b18;border-radius:18px;background:#fff;color:#111;text-decoration:none}
.fq-family a:hover{background:#f3f5f1}
.fq-family a:focus-visible{outline:2px solid #777;outline-offset:2px}
.fq-family a[aria-current=page]{background:#dff4e2}
.fq-family strong{font-size:16px;line-height:1.3}
.fq-family span{font-size:14px;line-height:1.5;color:#595954}
.fq-tip{padding:16px 20px;background:#eff5ee;border-radius:18px}
.fq-formats .text-link{margin:0}
.fq-seo p,.fq-seo li{overflow-wrap:break-word}