:root {
  color: #171717;
  background: #f7f4ec;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --paper: #fffdf7;
  --ink: #171717;
  --blue: #2f62de;
  --blue-dark: #2148ab;
  --yellow: #f3d441;
  --mint: #bce8c2;
  --peach: #ffd8b5;
  --line: 2px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }

html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(23, 23, 23, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, .045) 1px, transparent 1px),
    #f7f4ec;
  background-size: 32px 32px;
  line-height: 1.5;
  max-width: 100%;
  overflow-x: clip;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:is(img, .decorative-image), svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  transform: translateY(-160%);
  padding: .75rem 1rem;
  background: var(--yellow);
  border: var(--line);
  font-weight: 900;
}
.skip-link:focus { transform: none; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.2rem;
  border-bottom: var(--line);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-size: 1.22rem; font-weight: 950; letter-spacing: -.03em; }
.brand > span > span { color: var(--blue); }
.top-nav { display: flex; align-items: center; gap: 1.45rem; font-size: .92rem; font-weight: 750; }
.top-nav a { text-decoration-thickness: 1px; text-underline-offset: .28rem; }
.locale-picker { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.locale-picker select { width: auto; min-width: 5.75rem; padding: .45rem 1.8rem .45rem .55rem; border-width: 1.5px; font-size: .82rem; background-color: var(--paper); }
.chapalab-link { display: inline-flex; align-items: center; gap: .45rem; }

.hero {
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.eyebrow { margin: 0 0 .7rem; color: var(--blue); font-size: .74rem; font-weight: 950; letter-spacing: .18em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin-top: 0; line-height: .98; letter-spacing: -.055em; font-family: Georgia, "Times New Roman", serif; }
h1 { margin-bottom: 1.6rem; font-size: clamp(4.6rem, 10vw, 8.6rem); }
h1 em, h2 em { color: var(--blue); font-style: italic; font-weight: 500; }
h2 { margin-bottom: 1rem; font-size: clamp(2.25rem, 5vw, 4.5rem); }
h3 { letter-spacing: -.035em; }
.hero-lead { max-width: 720px; margin: 0; font-size: clamp(1.08rem, 2vw, 1.35rem); }

.proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.proof-list li { padding-top: .75rem; border-top: var(--line); font-size: .83rem; font-weight: 760; }
.proof-list span { display: block; margin-bottom: .4rem; color: var(--blue); font-size: .72rem; }

.hero-stamp {
  aspect-ratio: 1;
  border: var(--line);
  background: var(--yellow);
  box-shadow: 12px 12px 0 var(--ink);
  display: grid;
  place-items: center;
  align-content: center;
  transform: rotate(3deg);
}
.hero-stamp span { font-family: Georgia, serif; font-size: clamp(5rem, 10vw, 9rem); font-weight: 900; line-height: .8; }
.hero-stamp strong { margin-top: -.6rem; color: var(--blue); font-size: 4rem; }
.hero-stamp small { margin-top: .5rem; font-weight: 950; letter-spacing: .18em; }

.workspace { margin-bottom: 7rem; border: var(--line); background: var(--paper); box-shadow: 10px 10px 0 var(--ink); }
.workspace-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 2rem; border-bottom: var(--line); }
.workspace-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); }
.free-pill, .status-dot { border: var(--line); background: var(--mint); padding: .45rem .7rem; font-size: .7rem; font-weight: 950; letter-spacing: .08em; white-space: nowrap; }

.type-tabs { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); width: 100%; min-width: 0; max-width: 100%; border-bottom: var(--line); overflow-x: auto; }
.type-tab { min-width: 110px; border: 0; border-inline-end: var(--line); background: #efebe2; padding: 1rem .7rem; font-weight: 850; cursor: pointer; }
.type-tab:last-child { border-inline-end: 0; }
.type-tab:hover { background: #fff; }
.type-tab.active { background: var(--blue); color: #fff; }
.type-tab span { display: block; font-size: .63rem; text-transform: uppercase; }
.premium-tab:not(.active) { background: var(--peach); }

.generator-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); }
.input-panel { min-width: 0; padding: clamp(1.4rem, 4vw, 3rem); border-inline-end: var(--line); }
.form-view { display: grid; gap: .75rem; }
.form-view > label, .two-columns > label, .three-columns > label { display: grid; gap: .4rem; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
input:not([type="checkbox"]):not([type="color"]), textarea, select {
  width: 100%;
  border: var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  padding: .85rem .9rem;
  outline: 0;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 4px solid rgba(47, 98, 222, .35); outline-offset: 2px; }
.field-help { margin: 0; color: #5b5852; font-size: .76rem; }
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.three-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.check-label { display: flex !important; grid-auto-flow: column; justify-content: start; align-items: center; gap: .55rem !important; text-transform: none !important; }
.check-label input { inline-size: 1.15rem; block-size: 1.15rem; }

.design-controls { margin: 2rem 0 0; padding: 1.2rem; border: var(--line); }
.design-controls legend { padding-inline: .4rem; font-size: .78rem; font-weight: 950; text-transform: uppercase; }
input[type="color"] { width: 100%; height: 47px; border: var(--line); padding: .25rem; background: #fff; }
.form-error { min-height: 1.5em; margin: 1rem 0 0; color: #a51d1d; font-weight: 760; }

.pdf-view { padding: 1.5rem; background: #fff3e7; border: var(--line); }
.pdf-view h3 { margin: 0; font-size: 2rem; }
.pdf-view > p { margin: 0; }
.pdf-kicker { color: #ad4816; font-size: .7rem; font-weight: 950; letter-spacing: .14em; }
.file-drop { display: grid; place-items: center; gap: .25rem; min-height: 130px; border: 2px dashed var(--ink); background: #fff; cursor: pointer; text-align: center; }
.file-drop input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.file-drop strong { font-family: Georgia, serif; font-size: 1.4rem; }
.file-drop span { color: #666; font-size: .75rem; }
.selected-file { display: flex; justify-content: space-between; gap: .8rem; padding: .8rem; border: var(--line); background: #fff; font-size: .8rem; }

.result-panel { min-width: 0; padding: clamp(1.4rem, 4vw, 3rem); background: #efebe2; }
.result-top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.result-top h3 { margin-bottom: 0; font-size: 2.3rem; }
.qr-stage { display: grid; place-items: center; min-height: 360px; margin-block: 1.5rem; padding: 1.2rem; border: var(--line); background: #fff; }
.qr-stage svg { width: min(100%, 340px); }
.qr-placeholder { display: grid; place-items: center; gap: .4rem; color: #6d6961; text-align: center; }
.qr-placeholder strong { font-family: Georgia, serif; font-size: 4rem; }
.qr-placeholder span { font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.payload-preview { display: block; min-height: 3.3rem; max-height: 7rem; overflow: auto; padding: .75rem; border: 1px solid #9d9990; background: #fff; font-size: .73rem; white-space: pre-wrap; word-break: break-all; }
.download-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.download-actions .ghost { grid-column: 1 / -1; }
.scan-tip { margin: 1rem 0 0; font-size: .72rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: var(--line);
  border-radius: 0;
  padding: .75rem 1rem;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.button:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.button:active:not(:disabled) { transform: none; box-shadow: none; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button.primary { background: var(--blue); color: #fff; }
.button.secondary { background: var(--yellow); }
.button.ghost { background: #fff; }
.button.wide { width: 100%; }
.button.coffee { background: var(--yellow); }

.value-section { padding-block: 2rem 7rem; }
.use-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; border: var(--line); }
.use-grid article { min-width: 0; min-height: 250px; padding: 1.5rem; border-inline-end: var(--line); background: var(--paper); }
.use-grid article:last-child { border-inline-end: 0; }
.use-grid span { color: var(--blue); font-size: .75rem; font-weight: 950; }
.use-grid h3 { margin: 2.3rem 0 .8rem; font-size: 1.65rem; }
.use-grid p { margin: 0; font-size: .86rem; }

.pricing-section { display: grid; grid-template-columns: 1.1fr .8fr .8fr; gap: 1.4rem; padding-block: 1rem 7rem; }
.pricing-copy { padding-right: 2rem; }
.pricing-copy h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.price-card { display: flex; flex-direction: column; align-items: start; border: var(--line); padding: 1.5rem; box-shadow: var(--shadow); }
.free-card { background: var(--mint); }
.paid-card { background: var(--peach); }
.price-card > span { font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.price-card > strong { margin: 1rem 0; font-family: Georgia, serif; font-size: 3.4rem; }
.price-card h3 { margin-bottom: .5rem; font-size: 1.55rem; }
.price-card ul { flex: 1; padding-left: 1.1rem; font-size: .82rem; }

.support-section { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; margin-bottom: 7rem; padding: 2rem; border: var(--line); background: var(--blue); color: #fff; box-shadow: 10px 10px 0 var(--ink); }
.support-section .eyebrow { color: var(--yellow); }
.support-section h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.support-section p:last-child { margin-bottom: 0; }

.brand-banner { background: #111; color: #fff; }
.brand-banner > .shell { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 94px; padding-block: 1rem; }
.brand-banner-copy { display: flex; align-items: center; gap: .9rem; }
.brand-banner-copy p { margin: .2rem 0 0; font-size: .72rem; }
.brand-banner nav { display: flex; flex-wrap: wrap; justify-content: end; gap: 1rem; font-size: .78rem; font-weight: 800; }

.toast { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; max-width: min(420px, calc(100% - 2rem)); border: var(--line); background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); padding: .9rem 1rem; font-weight: 850; transform: translateY(150%); transition: transform .2s ease; }
.toast.visible { transform: none; }

.legal-page main { min-height: 70vh; padding-block: 4rem 7rem; }
.legal-page h1 { font-size: clamp(3rem, 7vw, 6rem); }
.legal-page .legal-lead { max-width: 800px; font-size: 1.25rem; }
.legal-page .content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 3rem; }
.legal-page section { border: var(--line); background: var(--paper); padding: 1.5rem; }
.legal-page section h2 { font-size: 1.8rem; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stamp { width: min(420px, 80vw); justify-self: center; }
  .generator-grid { grid-template-columns: 1fr; }
  .input-panel { border-inline-end: 0; border-bottom: var(--line); }
  .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use-grid article:nth-child(2) { border-inline-end: 0; }
  .use-grid article:nth-child(-n+2) { border-bottom: var(--line); }
  .pricing-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-copy { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 1180px); }
  .site-header { align-items: start; flex-direction: column; }
  .top-nav { justify-content: start; flex-wrap: wrap; gap: .7rem 1rem; font-size: .78rem; }
  .proof-list, .two-columns, .three-columns, .pricing-section { grid-template-columns: 1fr; }
  .proof-list { gap: .4rem; }
  .workspace-heading { align-items: start; flex-direction: column; }
  .qr-stage { min-height: 280px; }
  .use-grid { grid-template-columns: 1fr; }
  .use-grid article, .use-grid article:nth-child(2) { border-inline-end: 0; border-bottom: var(--line); }
  .use-grid article:last-child { border-bottom: 0; }
  .support-section { grid-template-columns: 1fr; }
  .brand-banner > .shell { align-items: start; flex-direction: column; }
  .brand-banner nav { justify-content: start; }
  .legal-page .content-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.worked-example{margin-block:3rem;padding-top:2rem;border-top:1px solid #ccc}.worked-example h2{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.1}.worked-example p{max-width:85ch;line-height:1.65}.worked-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-block:2rem}.worked-cards figure{margin:0;padding:1rem;border:1px solid #ccc;border-radius:1rem;background:white;color:#171717;text-align:center}.worked-cards :is(img, .decorative-image){max-width:100%;height:auto}.worked-scroll{overflow:auto;max-width:100%;margin-block:1.5rem}.worked-scroll table{min-width:560px;width:100%;border-collapse:collapse}.worked-scroll th,.worked-scroll td{padding:.8rem;text-align:start;border-bottom:1px solid #ccc}.worked-downloads p{overflow-wrap:anywhere}.worked-sources a{display:inline-block;margin-block:.3rem}