:root {
  --cream: #f7f3ea;
  --ink: #171914;
  --line: #20231d;
  --blue: #2e5de5;
  --yellow: #ffd84d;
  --green: #0b8b64;
  --muted: #64685f;
  --panel: #fff;
  --shadow: 9px 9px 0 #1c201a;
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--cream);
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #2e5de5;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.site-nav {
  display: flex;
  width: min(1500px, calc(100% - 48px));
  min-height: 80px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 0;
}
.site-nav nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-nav nav a {
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}
.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero,
.templates-section,
.workspace,
.guide,
.faq {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
}
.hero {
  min-height: 480px;
  padding: 78px 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(310px, 0.5fr);
  align-items: end;
  gap: 80px;
  border-bottom: 2px solid var(--line);
}
.hero h1 {
  max-width: 1050px;
  margin: 12px 0 16px;
  font-size: clamp(4rem, 8vw, 8.8rem);
  line-height: 0.84;
  letter-spacing: -0.075em;
}
.hero-copy > p {
  max-width: 760px;
  margin: 0 0 28px;
  color: #4e554d;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.55;
}
.primary-link,
.output-actions button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  background: var(--ink);
  color: #fff;
  padding: 0 22px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--blue);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.primary-link:hover,
.output-actions button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--blue);
}
.hero-note {
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  padding: 28px;
}
.hero-note strong {
  font-size: 1.25rem;
}
.hero-note p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.templates-section {
  padding: 68px 0;
}
.section-heading,
.workspace-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 28px;
}
.section-heading h2,
.workspace-head h2,
.guide > h2,
.faq > h2 {
  margin: 8px 0 0;
  font-size: clamp(2.25rem, 4vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.section-heading > p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.55;
}
.filter-row {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding: 3px 3px 14px;
  scrollbar-width: thin;
}
.filter-row button,
.editor-tabs button,
.segmented button,
.history-actions button,
.preview-actions button {
  min-height: 42px;
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 8px 15px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.filter-row button[aria-pressed="true"],
.editor-tabs button[aria-selected="true"],
.segmented button[aria-pressed="true"],
.mobile-view-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.template-card {
  position: relative;
  min-width: 0;
  border: 2px solid var(--line);
  background: #fff;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--line);
  transition:
    transform 0.16s,
    box-shadow 0.16s;
}
.template-card:hover {
  transform: translateY(-3px);
  box-shadow: 7px 8px 0 var(--line);
}
.template-card[aria-pressed="true"] {
  outline: 4px solid var(--blue);
  outline-offset: 2px;
}
.template-card[hidden] {
  display: none;
}
.template-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5/11;
  overflow: hidden;
  background: #e6e6e1;
  border: 1px solid #aaa;
}
.template-preview .flyer-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 816px !important;
  height: 1056px !important;
  transform-origin: top left;
  pointer-events: none;
}
.template-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 13px 4px 3px;
}
.template-meta strong {
  font-size: 1.03rem;
}
.template-meta small {
  grid-column: 1;
  color: var(--muted);
  font-weight: 700;
}
.favorite-toggle {
  align-self: start;
  border: 0;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.favorite-toggle[aria-pressed="true"] {
  color: #c47b00;
}
.workspace {
  padding: 62px 0 86px;
  border-top: 2px solid var(--line);
}
.workspace-head {
  align-items: center;
}
.history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.history-actions button {
  background: transparent;
}
.history-actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.mobile-view-tabs {
  display: none;
}
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(330px, 480px) minmax(0, 1fr);
  min-height: 860px;
  border: 2px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.editor-panel {
  border-right: 1.5px solid var(--line);
  background: #fff;
}
.editor-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1.5px solid var(--line);
}
.editor-tabs button {
  border: 0;
  border-right: 1px solid #c7c9c3;
  padding: 15px 8px;
  font-size: 0.9rem;
  white-space: normal;
}
.editor-tabs button:last-child {
  border-right: 0;
}
.tab-panel {
  padding: 24px;
  max-height: none;
  overflow: visible;
}
.field {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}
.field > span,
.choice-group legend,
.range-field > span {
  font-weight: 850;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid #8b8e87;
  background: #fff;
  padding: 11px 13px;
}
.field textarea {
  min-height: 86px;
  resize: vertical;
  line-height: 1.45;
}
.field small,
.upload-block p,
.output-note {
  color: var(--muted);
  line-height: 1.45;
}
.field small[data-count] {
  justify-self: end;
  margin-top: -4px;
}
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.choice-group {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
}
.choice-group legend {
  margin-bottom: 10px;
}
.layer-controls {
  margin: 28px 0 0;
  border: 1.5px solid var(--line);
  padding: 18px;
  background: #f7f4ec;
}
.layer-controls legend {
  padding: 0 7px;
  font-weight: 900;
}
.layer-controls > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.45;
}
.layer-controls .selected-layer-readout {
  margin-bottom: 8px;
  color: var(--ink);
}
.text-effect-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
}
.text-effect-controls .check-row {
  min-height: 44px;
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 8px 10px;
}
.save-layout-button {
  width: 100%;
  min-height: 48px;
  margin: 0 0 8px;
  border: 1.5px solid var(--line);
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.layer-controls .save-layout-help {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.4;
}
.layer-reset-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.layer-reset-actions button {
  min-height: 45px;
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 8px;
  font-weight: 850;
  cursor: pointer;
}
.color-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.color-preset {
  min-height: 64px;
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 8px;
  cursor: pointer;
}
.color-preset[aria-pressed="true"] {
  outline: 3px solid var(--blue);
}
.swatches {
  display: flex;
  margin-bottom: 7px;
}
.swatches i {
  width: 28px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.22);
}
.color-field input {
  padding: 4px;
  height: 48px;
}
.segmented {
  display: flex;
}
.segmented button {
  flex: 1;
  border-right: 0;
}
.segmented button:last-child {
  border-right: 1.5px solid var(--line);
}
.upload-block,
.qr-block {
  border-bottom: 1px solid #d4d5d0;
  padding: 2px 0 24px;
  margin-bottom: 24px;
}
.upload-block > div:first-child p {
  margin: 5px 0 14px;
}
.upload-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line);
  background: #fff4c7;
  font-weight: 900;
  cursor: pointer;
}
.text-button {
  margin-top: 10px;
  border: 0;
  background: transparent;
  text-decoration: underline;
  font-weight: 800;
  cursor: pointer;
}
.range-field {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.range-field span {
  display: flex;
  justify-content: space-between;
}
.range-field input {
  width: 100%;
  accent-color: var(--blue);
}
.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 900;
}
.check-row input {
  width: 22px;
  height: 22px;
  accent-color: var(--blue);
}
.field-error {
  color: #a31621 !important;
  font-weight: 750;
}
.output-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.output-actions button {
  box-shadow: 4px 4px 0 var(--blue);
}
.output-actions button:last-child {
  background: #fff;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--yellow);
}
.preview-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  background: #e7e6e0;
}
.preview-toolbar {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 18px;
  border-bottom: 1.5px solid var(--line);
  background: #fff;
}
.preview-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}
.preview-toolbar span {
  color: var(--muted);
  font-size: 0.9rem;
}
.preview-actions {
  display: flex;
  gap: 8px;
}
.preview-stage {
  min-height: 700px;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 34px;
  background-color: #dfded8;
  background-image:
    linear-gradient(45deg, #d1d0ca 25%, transparent 25%),
    linear-gradient(-45deg, #d1d0ca 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d1d0ca 75%),
    linear-gradient(-45deg, transparent 75%, #d1d0ca 75%);
  background-size: 24px 24px;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}
.status {
  min-height: 48px;
  margin: 0;
  padding: 13px 18px;
  border-top: 1.5px solid var(--line);
  background: #fff;
  color: #14664f;
  font-weight: 800;
}
#previewWrap {
  position: relative;
}
.flyer-canvas {
  --primary: #102a43;
  --accent: #2f80ed;
  --paper: #f4f8fb;
  --ink: #10212f;
  --unit: 8.16px;
  --type-scale: 1;
  --align: left;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 816px;
  height: 1056px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--flyer-font, "Montserrat", sans-serif);
  font-size: calc(1.65 * var(--unit) * var(--type-scale));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  text-align: var(--align);
}
.flyer-canvas * {
  box-sizing: border-box;
}
.flyer-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.flyer-art:before,
.flyer-art:after {
  content: "";
  position: absolute;
}
.flyer-photo {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--paper),
    #eef1f4
  );
}
.flyer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}
.flyer-photo.is-fit img {
  object-fit: contain;
}
.flyer-logo {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
}
.flyer-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.flyer-copy {
  position: absolute;
  inset: 0;
  padding: calc(7 * var(--unit));
  display: grid;
  align-content: start;
}
.flyer-business {
  font-size: 1.05em;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flyer-headline {
  margin: 0.45em 0 0.26em;
  font-size: 3.9em;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.flyer-description {
  max-width: 34em;
  margin: 0.5em 0 1em;
  font-size: 1.18em;
  line-height: 1.42;
}
.flyer-offer {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-weight: 900;
}
.flyer-offer-label {
  font-size: 1.05em;
  letter-spacing: 0.06em;
}
.flyer-price {
  font-size: 2.1em;
}
.flyer-cta {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 2.8em;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
  padding: 0.65em 1.1em;
  background: var(--primary);
  color: #fff;
  font-weight: 950;
  letter-spacing: 0.04em;
}
.flyer-contact {
  display: flex;
  gap: 0.55em 1.15em;
  flex-wrap: wrap;
  margin-top: 1em;
  font-size: 0.9em;
  font-weight: 780;
}
.flyer-contact span:empty {
  display: none;
}
.flyer-canvas [data-text-layer] {
  transform: var(--layer-transform, translate(0, 0) scale(1)) var(--layer-base-transform, rotate(0deg));
  transform-origin: center center;
}
.flyer-canvas.is-text-editing [data-text-layer] {
  cursor: grab;
  touch-action: none;
}
.flyer-canvas.is-text-editing [data-text-layer][data-selected="true"] {
  outline: calc(.22 * var(--unit)) dashed #2d5bff;
  outline-offset: calc(.45 * var(--unit));
}
.flyer-canvas.is-text-editing [data-text-layer]:active {
  cursor: grabbing;
}
.flyer-canvas.exporting [data-text-layer],
#printRoot .flyer-canvas [data-text-layer] {
  outline: 0 !important;
}
.flyer-address {
  flex-basis: 100%;
}
.flyer-qr {
  position: absolute;
  z-index: 4;
  background: #fff;
  padding: 1.3%;
  border-radius: 3%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.flyer-qr canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.long-headline .flyer-headline {
  font-size: 3.25em;
}
.very-long-headline .flyer-headline {
  font-size: 2.7em;
}
.long-business .flyer-business {
  font-size: 0.88em;
}
.flyer-canvas.font-bold {
  font-family: var(--flyer-font, "Oswald", sans-serif);
}
.flyer-canvas.font-bold .flyer-description,
.flyer-canvas.font-bold .flyer-contact {
  font-family: var(--flyer-body-font, "Montserrat", sans-serif);
}
.flyer-canvas.font-classic {
  font-family: var(--flyer-font, "Bitter", serif);
}
.flyer-canvas.font-classic .flyer-business,
.flyer-canvas.font-classic .flyer-contact,
.flyer-canvas.font-classic .flyer-cta {
  font-family: var(--flyer-body-font, "Montserrat", sans-serif);
}
.flyer-canvas.aspect-square .flyer-copy,
.flyer-canvas.aspect-story .flyer-copy,
.flyer-canvas.aspect-portrait .flyer-copy {
  padding: calc(7 * var(--unit));
}
.flyer-canvas.aspect-square .flyer-headline {
  font-size: 3.2em;
}
.flyer-canvas.aspect-story .flyer-headline {
  font-size: 4.35em;
}
.flyer-canvas.aspect-square .flyer-description {
  max-width: 28em;
}
.flyer-canvas.aspect-square .flyer-contact {
  font-size: 0.84em;
}

/* 24 layout systems. Each changes hierarchy, image placement, and information flow. */
.layout-clean-grid .flyer-art:before {
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 49.8%,
      rgba(46, 93, 229, 0.18) 50%,
      transparent 50.2%
    ),
    linear-gradient(
      transparent 49.8%,
      rgba(46, 93, 229, 0.14) 50%,
      transparent 50.2%
    );
  background-size: 9% 9%;
}
.layout-clean-grid .flyer-art:after {
  width: 38%;
  height: 100%;
  right: 0;
  background: var(--primary);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
.layout-clean-grid .flyer-copy {
  width: 70%;
  padding-right: 4%;
}
.layout-clean-grid .flyer-headline {
  max-width: 8em;
}
.layout-clean-grid .flyer-cta {
  margin-top: auto;
}
.layout-clean-grid .flyer-contact {
  margin-top: 2em;
}
.layout-clean-grid .flyer-logo {
  right: 5%;
  top: 5%;
  width: 22%;
  height: 10%;
}
.layout-clean-grid .flyer-qr {
  right: 8%;
  bottom: 8%;
  width: 15%;
  aspect-ratio: 1;
}
.layout-consultant-column {
  border: calc(1.5 * var(--unit)) solid var(--primary);
}
.layout-consultant-column .flyer-art:before {
  left: 8%;
  top: 9%;
  width: 1px;
  height: 82%;
  background: var(--accent);
}
.layout-consultant-column .flyer-art:after {
  right: 0;
  top: 0;
  width: 34%;
  height: 34%;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.layout-consultant-column .flyer-copy {
  padding-left: 14%;
  padding-top: 13%;
  width: 80%;
}
.layout-consultant-column .flyer-headline {
  font-size: 3.45em;
  max-width: 9em;
  margin-top: 1em;
}
.layout-consultant-column .flyer-offer {
  margin-top: 2em;
  border-top: 1px solid var(--accent);
  padding-top: 1em;
}
.layout-consultant-column .flyer-contact {
  position: absolute;
  left: 14%;
  right: 10%;
  bottom: 8%;
  border-top: 1px solid var(--primary);
  padding-top: 1em;
}
.layout-consultant-column .flyer-logo {
  right: 6%;
  top: 5%;
  width: 23%;
  height: 10%;
}
.layout-consultant-column .flyer-cta {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.layout-consultant-column .flyer-qr {
  right: 8%;
  bottom: 17%;
  width: 14%;
  aspect-ratio: 1;
}
.layout-home-service-band .flyer-photo {
  left: 0;
  top: 0;
  width: 100%;
  height: 44%;
}
.layout-home-service-band .flyer-photo:empty {
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--accent)
  );
}
.layout-home-service-band .flyer-art:after {
  left: 0;
  top: 40%;
  width: 100%;
  height: 11%;
  background: var(--accent);
  clip-path: polygon(0 42%, 100% 0, 100% 58%, 0 100%);
}
.layout-home-service-band .flyer-copy {
  padding-top: 48%;
}
.layout-home-service-band .flyer-headline {
  max-width: 12em;
}
.layout-home-service-band .flyer-description {
  max-width: 42em;
}
.layout-home-service-band .flyer-contact {
  position: absolute;
  bottom: 6%;
  left: 7%;
  right: 7%;
}
.layout-home-service-band .flyer-logo {
  left: 7%;
  top: 5%;
  width: 26%;
  height: 10%;
  background: rgba(255, 255, 255, 0.9);
  padding: 1%;
}
.layout-home-service-band .flyer-qr {
  right: 7%;
  bottom: 5%;
  width: 13%;
  aspect-ratio: 1;
}
.layout-realty-window .flyer-art:before {
  inset: 0;
  background: linear-gradient(135deg, var(--paper) 0 61%, var(--primary) 61%);
}
.layout-realty-window .flyer-photo {
  right: 5%;
  top: 6%;
  width: 45%;
  height: 57%;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}
.layout-realty-window .flyer-copy {
  width: 62%;
  padding-top: 13%;
}
.layout-realty-window .flyer-headline {
  font-size: 3.2em;
  max-width: 7em;
}
.layout-realty-window .flyer-offer {
  position: absolute;
  left: 7%;
  bottom: 20%;
}
.layout-realty-window .flyer-contact {
  position: absolute;
  bottom: 7%;
  left: 7%;
  width: 60%;
}
.layout-realty-window .flyer-logo {
  right: 7%;
  bottom: 8%;
  width: 20%;
  height: 9%;
}
.layout-realty-window .flyer-qr {
  right: 8%;
  bottom: 19%;
  width: 13%;
  aspect-ratio: 1;
}
.layout-sale-burst {
  background: var(--primary);
  color: #fff;
}
.layout-sale-burst .flyer-art:before {
  width: 90%;
  aspect-ratio: 1;
  left: 24%;
  top: 7%;
  background: var(--accent);
  clip-path: polygon(
    50% 0,
    60% 34%,
    85% 15%,
    66% 40%,
    100% 50%,
    66% 60%,
    85% 85%,
    60% 66%,
    50% 100%,
    40% 66%,
    15% 85%,
    34% 60%,
    0 50%,
    34% 40%,
    15% 15%,
    40% 34%
  );
  opacity: 0.95;
}
.layout-sale-burst .flyer-copy {
  align-content: center;
  text-align: center;
}
.layout-sale-burst .flyer-headline {
  font-size: 5.2em;
  --layer-base-transform: rotate(-3deg);
  text-shadow: 0.06em 0.06em 0 var(--ink);
}
.layout-sale-burst .flyer-offer {
  justify-content: center;
  flex-direction: column;
  gap: 0;
}
.layout-sale-burst .flyer-price {
  font-size: 4.5em;
  color: var(--primary);
  text-shadow: 0.035em 0.035em 0 #fff;
}
.layout-sale-burst .flyer-description {
  margin: 2em auto 0;
  max-width: 32em;
}
.layout-sale-burst .flyer-cta {
  margin: 1.6em auto 0;
  background: #fff;
  color: var(--primary);
}
.layout-sale-burst .flyer-contact {
  justify-content: center;
}
.layout-sale-burst .flyer-logo {
  left: 6%;
  top: 4%;
  width: 23%;
  height: 8%;
}
.layout-sale-burst .flyer-qr {
  right: 5%;
  bottom: 5%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-grand-opening .flyer-art:before {
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(255, 216, 77, 0.45) 0 4%,
      transparent 4.3%
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 216, 77, 0.35) 0 3%,
      transparent 3.3%
    ),
    linear-gradient(165deg, transparent 0 68%, var(--primary) 68%);
}
.layout-grand-opening .flyer-photo {
  left: 12%;
  top: 13%;
  width: 76%;
  height: 34%;
  border-radius: 50% 50% 4% 4%;
}
.layout-grand-opening .flyer-copy {
  padding-top: 49%;
  text-align: center;
  align-content: start;
}
.layout-grand-opening .flyer-headline {
  font-size: 3.2em;
}
.layout-grand-opening .flyer-offer {
  justify-content: center;
}
.layout-grand-opening .flyer-cta {
  margin: 0.7em auto 0;
}
.layout-grand-opening .flyer-contact {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 2.5%;
  justify-content: center;
  color: #fff;
  font-size: 0.76em;
}
.layout-grand-opening .flyer-logo {
  left: 38%;
  top: 3%;
  width: 24%;
  height: 8%;
}
.layout-grand-opening .flyer-qr {
  right: 7%;
  top: 51%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-coupon-cutout {
  border: calc(2 * var(--unit)) dashed var(--primary);
}
.layout-coupon-cutout .flyer-art:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 25%;
  background: var(--primary);
}
.layout-coupon-cutout .flyer-copy {
  text-align: center;
  padding-top: 10%;
  align-content: start;
}
.layout-coupon-cutout .flyer-business {
  color: #fff;
}
.layout-coupon-cutout .flyer-headline {
  margin-top: 1.6em;
}
.layout-coupon-cutout .flyer-offer {
  margin: 1.5em auto 0;
  flex-direction: column;
  gap: 0;
  border: 3px dashed var(--accent);
  padding: 1.3em 2.5em;
}
.layout-coupon-cutout .flyer-price {
  font-size: 4.2em;
  color: var(--primary);
}
.layout-coupon-cutout .flyer-description {
  margin: 1.5em auto;
}
.layout-coupon-cutout .flyer-cta {
  margin: auto auto 0;
}
.layout-coupon-cutout .flyer-contact {
  justify-content: center;
}
.layout-coupon-cutout .flyer-logo {
  left: 7%;
  top: 4%;
  width: 20%;
  height: 8%;
}
.layout-coupon-cutout .flyer-qr {
  right: 6%;
  top: 4%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-limited-offer-split {
  background: var(--primary);
  color: #fff;
}
.layout-limited-offer-split .flyer-photo {
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
}
.layout-limited-offer-split .flyer-copy {
  width: 58%;
  padding: 9% 5% 7% 7%;
  align-content: center;
}
.layout-limited-offer-split .flyer-headline {
  font-size: 4em;
}
.layout-limited-offer-split .flyer-offer {
  display: block;
  border-left: 0.5em solid var(--accent);
  padding-left: 1em;
}
.layout-limited-offer-split .flyer-price {
  display: block;
  color: var(--accent);
  font-size: 3.2em;
}
.layout-limited-offer-split .flyer-cta {
  background: var(--accent);
  color: var(--primary);
}
.layout-limited-offer-split .flyer-logo {
  left: 7%;
  top: 4%;
  width: 26%;
  height: 8%;
}
.layout-limited-offer-split .flyer-qr {
  right: 5%;
  bottom: 4%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-barber-editorial .flyer-art:before {
  right: 0;
  top: 0;
  width: 36%;
  height: 100%;
  background: repeating-linear-gradient(
    -35deg,
    var(--primary) 0 3%,
    var(--paper) 3% 6%
  );
}
.layout-barber-editorial .flyer-photo {
  right: 8%;
  top: 14%;
  width: 42%;
  height: 62%;
  filter: grayscale(0.15);
}
.layout-barber-editorial .flyer-copy {
  width: 59%;
  padding-top: 12%;
}
.layout-barber-editorial .flyer-headline {
  font-size: 4.35em;
}
.layout-barber-editorial .flyer-offer {
  margin-top: 2em;
  display: block;
}
.layout-barber-editorial .flyer-price {
  display: block;
  color: var(--accent);
  font-size: 3.1em;
}
.layout-barber-editorial .flyer-contact {
  position: absolute;
  left: 7%;
  bottom: 7%;
  width: 50%;
}
.layout-barber-editorial .flyer-logo {
  right: 10%;
  top: 4%;
  width: 24%;
  height: 8%;
  background: #fff;
}
.layout-barber-editorial .flyer-qr {
  right: 10%;
  bottom: 7%;
  width: 14%;
  aspect-ratio: 1;
}
.layout-salon-soft-arch .flyer-art:before {
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--paper) 0 68%,
    #f1e7e0 68%
  );
}
.layout-salon-soft-arch .flyer-photo {
  left: 16%;
  top: 6%;
  width: 68%;
  height: 48%;
  border-radius: 50% 50% 0 0;
}
.layout-salon-soft-arch .flyer-copy {
  padding-top: 57%;
  text-align: center;
}
.layout-salon-soft-arch .flyer-headline {
  font-size: 3.45em;
}
.layout-salon-soft-arch .flyer-description {
  margin: 0.5em auto;
}
.layout-salon-soft-arch .flyer-offer,
.layout-salon-soft-arch .flyer-contact {
  justify-content: center;
}
.layout-salon-soft-arch .flyer-cta {
  margin: 1em auto 0;
}
.layout-salon-soft-arch .flyer-logo {
  left: 39%;
  top: 2%;
  width: 22%;
  height: 7%;
  z-index: 3;
}
.layout-salon-soft-arch .flyer-qr {
  right: 6%;
  bottom: 5%;
  width: 11%;
  aspect-ratio: 1;
}
.layout-nail-color-block .flyer-art:before {
  inset: 0;
  background:
    linear-gradient(90deg, var(--accent) 0 30%, transparent 30%),
    linear-gradient(180deg, transparent 0 72%, var(--primary) 72%);
}
.layout-nail-color-block .flyer-art:after {
  right: -12%;
  top: 8%;
  width: 58%;
  aspect-ratio: 1;
  border: calc(4 * var(--unit)) solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
}
.layout-nail-color-block .flyer-copy {
  padding-left: 36%;
  padding-top: 14%;
}
.layout-nail-color-block .flyer-headline {
  font-size: 4.1em;
  max-width: 8em;
}
.layout-nail-color-block .flyer-offer {
  margin-top: 2em;
}
.layout-nail-color-block .flyer-cta {
  margin-top: auto;
  background: var(--accent);
  color: var(--primary);
}
.layout-nail-color-block .flyer-contact {
  color: #fff;
}
.layout-nail-color-block .flyer-logo {
  left: 4%;
  top: 7%;
  width: 22%;
  height: 9%;
}
.layout-nail-color-block .flyer-qr {
  right: 5%;
  bottom: 4%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-cafe-menu .flyer-art:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 13%;
  background: var(--primary);
}
.layout-cafe-menu .flyer-art:after {
  left: 6%;
  right: 6%;
  bottom: 5%;
  height: 30%;
  border: 1px solid var(--accent);
}
.layout-cafe-menu .flyer-photo {
  left: 7%;
  top: 19%;
  width: 38%;
  height: 44%;
  border-radius: 50% 50% 4% 4%;
}
.layout-cafe-menu .flyer-copy {
  padding-top: 18%;
  padding-left: 50%;
}
.layout-cafe-menu .flyer-headline {
  font-size: 3.35em;
}
.layout-cafe-menu .flyer-offer {
  margin-top: 1.5em;
  display: block;
}
.layout-cafe-menu .flyer-price {
  display: block;
  color: var(--accent);
}
.layout-cafe-menu .flyer-contact {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 7%;
  justify-content: center;
  font-size: 0.72em;
}
.layout-cafe-menu .flyer-logo {
  left: 7%;
  top: 2%;
  width: 22%;
  height: 8%;
}
.layout-cafe-menu .flyer-qr {
  right: 8%;
  bottom: 8%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-lawn-diagonal .flyer-art:before {
  inset: 0;
  background: linear-gradient(155deg, var(--paper) 0 56%, var(--primary) 56%);
}
.layout-lawn-diagonal .flyer-photo {
  right: 0;
  top: 0;
  width: 48%;
  height: 58%;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 82%);
}
.layout-lawn-diagonal .flyer-copy {
  width: 62%;
  padding-top: 12%;
}
.layout-lawn-diagonal .flyer-headline {
  font-size: 3.85em;
}
.layout-lawn-diagonal .flyer-offer {
  margin-top: 2em;
}
.layout-lawn-diagonal .flyer-cta {
  margin-top: 2em;
}
.layout-lawn-diagonal .flyer-contact {
  position: absolute;
  left: 12%;
  bottom: 7%;
  color: #fff;
  width: 72%;
}
.layout-lawn-diagonal .flyer-logo {
  right: 6%;
  top: 3%;
  width: 23%;
  height: 8%;
}
.layout-lawn-diagonal .flyer-qr {
  right: 6%;
  bottom: 5%;
  width: 13%;
  aspect-ratio: 1;
}
.layout-pressure-wash-before-after .flyer-art:before {
  left: 50%;
  top: 0;
  width: 1.2%;
  height: 58%;
  background: var(--paper);
  z-index: 2;
}
.layout-pressure-wash-before-after .flyer-photo {
  left: 0;
  top: 0;
  width: 100%;
  height: 58%;
  background: linear-gradient(90deg, #8f9ca5 0 49.5%, #eaf8ff 49.5%);
}
.layout-pressure-wash-before-after .flyer-photo-label {
  position: absolute;
  z-index: 3;
  left: 4%;
  right: 4%;
  bottom: 44.32%;
  color: #fff;
  font: 900 1.1em var(--flyer-body-font, "Montserrat", sans-serif);
  text-align: center;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 4px #000;
  overflow-wrap: anywhere;
}
.layout-pressure-wash-before-after .flyer-copy {
  padding-top: 62%;
}
.layout-pressure-wash-before-after .flyer-headline {
  font-size: 3.4em;
}
.layout-pressure-wash-before-after .flyer-description {
  max-width: 42em;
}
.layout-pressure-wash-before-after .flyer-contact {
  margin-top: auto;
}
.layout-pressure-wash-before-after .flyer-logo {
  left: 6%;
  top: 4%;
  width: 22%;
  height: 8%;
  background: #fff;
}
.layout-pressure-wash-before-after .flyer-qr {
  right: 6%;
  bottom: 5%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-painter-swatch .flyer-art:before {
  right: -10%;
  top: 0;
  width: 58%;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--accent) 0 24%,
    #eadbc9 24% 49%,
    var(--primary) 49% 73%,
    #8aa09a 73%
  );
}
.layout-painter-swatch .flyer-copy {
  width: 62%;
  padding-top: 13%;
}
.layout-painter-swatch .flyer-headline {
  font-size: 4em;
}
.layout-painter-swatch .flyer-offer {
  margin-top: 2em;
  display: block;
}
.layout-painter-swatch .flyer-price {
  display: block;
  color: var(--accent);
}
.layout-painter-swatch .flyer-contact {
  position: absolute;
  left: 7%;
  bottom: 8%;
  width: 47%;
}
.layout-painter-swatch .flyer-logo {
  right: 6%;
  top: 6%;
  width: 26%;
  height: 10%;
  background: #fff;
  padding: 1%;
}
.layout-painter-swatch .flyer-qr {
  right: 8%;
  bottom: 7%;
  width: 14%;
  aspect-ratio: 1;
}
.layout-moving-checklist .flyer-art:before {
  right: -8%;
  bottom: -5%;
  width: 65%;
  height: 60%;
  background: linear-gradient(
    35deg,
    var(--accent) 0 28%,
    transparent 28% 34%,
    var(--primary) 34% 65%,
    transparent 65%
  );
}
.layout-moving-checklist .flyer-photo {
  right: 6%;
  top: 8%;
  width: 43%;
  height: 43%;
  clip-path: polygon(0 8%, 92% 0, 100% 92%, 8% 100%);
}
.layout-moving-checklist .flyer-copy {
  width: 63%;
  padding-top: 12%;
}
.layout-moving-checklist .flyer-headline {
  font-size: 3.7em;
}
.layout-moving-checklist .flyer-description {
  max-width: 24em;
}
.layout-moving-checklist .flyer-offer {
  margin-top: 2em;
  display: block;
}
.layout-moving-checklist .flyer-price {
  display: block;
}
.layout-moving-checklist .flyer-contact {
  position: absolute;
  bottom: 6%;
  color: #fff;
  width: 67%;
}
.layout-moving-checklist .flyer-logo {
  right: 8%;
  top: 3%;
  width: 22%;
  height: 7%;
}
.layout-moving-checklist .flyer-qr {
  right: 7%;
  bottom: 7%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-restaurant-feature {
  background: #181513;
  color: #fff;
}
.layout-restaurant-feature .flyer-photo {
  left: 0;
  top: 0;
  width: 100%;
  height: 55%;
}
.layout-restaurant-feature .flyer-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, #181513);
}
.layout-restaurant-feature .flyer-copy {
  padding-top: 51%;
  text-align: center;
}
.layout-restaurant-feature .flyer-headline {
  font-size: 3.05em;
}
.layout-restaurant-feature .flyer-description {
  margin: 0.5em auto;
}
.layout-restaurant-feature .flyer-offer,
.layout-restaurant-feature .flyer-contact {
  justify-content: center;
}
.layout-restaurant-feature .flyer-cta {
  margin: 1em auto 0;
  background: var(--accent);
  color: #24180a;
}
.layout-restaurant-feature .flyer-logo {
  left: 38%;
  top: 4%;
  width: 24%;
  height: 9%;
  background: rgba(255, 255, 255, 0.88);
}
.layout-restaurant-feature .flyer-qr {
  right: 5%;
  bottom: 4%;
  width: 11%;
  aspect-ratio: 1;
}
.layout-food-truck-route .flyer-art:before {
  left: -16%;
  top: 25%;
  width: 132%;
  height: 29%;
  background: var(--accent);
  transform: rotate(-7deg);
}
.layout-food-truck-route .flyer-art:after {
  right: 5%;
  bottom: 7%;
  width: 27%;
  height: 20%;
  border: calc(1 * var(--unit)) solid var(--primary);
  border-radius: calc(4 * var(--unit)) calc(4 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit));
  background: var(--paper);
}
.layout-food-truck-route .flyer-copy {
  align-content: start;
  padding-top: 10%;
}
.layout-food-truck-route .flyer-headline {
  font-size: 3.25em;
  max-width: 10.5em;
  --layer-base-transform: rotate(-3deg);
}
.layout-food-truck-route .flyer-description {
  margin-top: 3.4em;
  width: 62%;
}
.layout-food-truck-route .flyer-offer {
  margin-top: 1em;
}
.layout-food-truck-route .flyer-contact {
  position: absolute;
  left: 7%;
  bottom: 8%;
  width: 60%;
}
.layout-food-truck-route .flyer-logo {
  right: 6%;
  top: 5%;
  width: 25%;
  height: 9%;
}
.layout-food-truck-route .flyer-qr {
  right: 10%;
  bottom: 10%;
  width: 13%;
  aspect-ratio: 1;
}
.layout-bakery-window .flyer-art:before {
  inset: 0;
  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(255, 216, 77, 0.3) 0 2%,
      transparent 2.3%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(255, 216, 77, 0.26) 0 2.5%,
      transparent 2.8%
    );
}
.layout-bakery-window .flyer-photo {
  left: 10%;
  top: 18%;
  width: 80%;
  height: 35%;
  border-radius: 48% 48% 5% 5%;
}
.layout-bakery-window .flyer-copy {
  padding-top: 7%;
  text-align: center;
}
.layout-bakery-window .flyer-headline {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 54%;
  font-size: 2.65em;
  line-height: 0.96;
}
.layout-bakery-window .flyer-description {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 66%;
  margin: auto;
}
.layout-bakery-window .flyer-offer {
  position: absolute;
  left: 10%;
  bottom: 12%;
  justify-content: center;
  width: 80%;
}
.layout-bakery-window .flyer-cta {
  position: absolute;
  left: 32%;
  bottom: 5%;
  width: 36%;
}
.layout-bakery-window .flyer-contact {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 1.5%;
  justify-content: center;
  font-size: 0.65em;
}
.layout-bakery-window .flyer-logo {
  left: 38%;
  top: 3%;
  width: 24%;
  height: 9%;
}
.layout-bakery-window .flyer-qr {
  right: 5%;
  bottom: 5%;
  width: 10%;
  aspect-ratio: 1;
}
.layout-coffee-poster .flyer-art:before {
  left: -25%;
  bottom: -10%;
  width: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
}
.layout-coffee-poster .flyer-photo {
  right: 5%;
  top: 8%;
  width: 46%;
  height: 54%;
  border-radius: 50%;
}
.layout-coffee-poster .flyer-copy {
  width: 63%;
  padding-top: 12%;
}
.layout-coffee-poster .flyer-headline {
  font-size: 3.05em;
}
.layout-coffee-poster .flyer-description {
  max-width: 24em;
}
.layout-coffee-poster .flyer-offer {
  margin-top: 2em;
  display: block;
}
.layout-coffee-poster .flyer-price {
  display: block;
}
.layout-coffee-poster .flyer-cta {
  margin-top: 2em;
}
.layout-coffee-poster .flyer-contact {
  position: absolute;
  left: 7%;
  right: -45%;
  bottom: 6%;
  justify-content: center;
}
.flyer-canvas.aspect-portrait.layout-coffee-poster .flyer-contact {
  position: static;
  width: auto;
  justify-content: flex-start;
}
.layout-coffee-poster .flyer-logo {
  right: 7%;
  top: 3%;
  width: 24%;
  height: 8%;
}
.layout-coffee-poster .flyer-qr {
  right: 7%;
  bottom: 8%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-community-calendar .flyer-art:before {
  inset: 0;
  background:
    radial-gradient(circle at 8% 10%, var(--accent) 0 3%, transparent 3.3%),
    radial-gradient(circle at 92% 15%, var(--primary) 0 2.5%, transparent 2.8%),
    radial-gradient(circle at 15% 88%, var(--primary) 0 2%, transparent 2.3%),
    radial-gradient(circle at 85% 80%, var(--accent) 0 3%, transparent 3.3%);
}
.layout-community-calendar .flyer-copy {
  text-align: center;
  align-content: center;
}
.layout-community-calendar .flyer-headline {
  font-size: 3.55em;
}
.layout-community-calendar .flyer-description {
  margin: 0.8em auto;
  max-width: 31em;
}
.layout-community-calendar .flyer-offer {
  justify-content: center;
  flex-direction: column;
  gap: 0.2em;
}
.layout-community-calendar .flyer-price {
  font-size: 3em;
  color: var(--primary);
}
.layout-community-calendar .flyer-cta {
  margin: 1.2em auto 0;
}
.layout-community-calendar .flyer-contact {
  justify-content: center;
}
.layout-community-calendar .flyer-logo {
  left: 39%;
  top: 5%;
  width: 22%;
  height: 8%;
}
.layout-community-calendar .flyer-qr {
  right: 6%;
  bottom: 5%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-garage-sale-tags {
  background: #fff6c7;
}
.layout-garage-sale-tags .flyer-art:before {
  left: 4%;
  top: 4%;
  width: 92%;
  height: 92%;
  border: calc(1.2 * var(--unit)) dashed var(--primary);
}
.layout-garage-sale-tags .flyer-art:after {
  right: -4%;
  top: 25%;
  width: 36%;
  height: 15%;
  background: var(--accent);
  transform: rotate(6deg);
}
.layout-garage-sale-tags .flyer-copy {
  text-align: center;
  align-content: start;
  padding-top: 13%;
}
.layout-garage-sale-tags .flyer-business {
  font-size: 1.35em;
}
.layout-garage-sale-tags .flyer-headline {
  font-size: 4.6em;
  margin-top: 1.3em;
}
.layout-garage-sale-tags .flyer-offer {
  justify-content: center;
  display: grid;
  margin: 1.4em auto 0;
  padding: 1em 3em;
  background: #fff;
  border: 3px solid var(--primary);
}
.layout-garage-sale-tags .flyer-price {
  color: var(--primary);
  font-size: 3em;
}
.layout-garage-sale-tags .flyer-description {
  margin: 1.5em auto;
}
.layout-garage-sale-tags .flyer-cta {
  margin: 1em auto 0;
}
.layout-garage-sale-tags .flyer-contact {
  justify-content: center;
}
.layout-garage-sale-tags .flyer-logo {
  left: 7%;
  top: 6%;
  width: 22%;
  height: 8%;
}
.layout-garage-sale-tags .flyer-qr {
  right: 7%;
  bottom: 7%;
  width: 12%;
  aspect-ratio: 1;
}
.layout-church-gathering .flyer-art:before {
  inset: 0;
  background: linear-gradient(180deg, var(--primary) 0 31%, transparent 31%);
}
.layout-church-gathering .flyer-photo {
  left: 17%;
  top: 15%;
  width: 66%;
  height: 38%;
  border-radius: 50% 50% 0 0;
  border: calc(0.8 * var(--unit)) solid #fff;
}
.layout-church-gathering .flyer-copy {
  text-align: center;
  padding-top: 56%;
}
.layout-church-gathering .flyer-headline {
  font-size: 2.75em;
}
.layout-church-gathering .flyer-business {
  font-size: 0.78em;
}
.layout-church-gathering .flyer-description {
  margin: 0.5em auto;
}
.layout-church-gathering .flyer-offer,
.layout-church-gathering .flyer-contact {
  justify-content: center;
}
.layout-church-gathering .flyer-cta {
  margin: 1em auto 0;
}
.layout-church-gathering .flyer-logo {
  left: 39%;
  top: 3%;
  width: 22%;
  height: 8%;
  filter: brightness(0) invert(1);
}
.layout-church-gathering .flyer-qr {
  right: 5%;
  bottom: 4%;
  width: 11%;
  aspect-ratio: 1;
}
.layout-workshop-board {
  background: #f5efe3;
}
.layout-workshop-board .flyer-art:before {
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  border: 1px solid var(--primary);
  box-shadow: inset 0 0 0 calc(1.2 * var(--unit)) var(--paper);
}
.layout-workshop-board .flyer-photo {
  left: 8%;
  top: 8%;
  width: 84%;
  height: 42%;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.layout-workshop-board .flyer-copy {
  padding-top: 53%;
  text-align: center;
}
.layout-workshop-board .flyer-headline {
  font-size: 2.7em;
}
.layout-workshop-board .flyer-description {
  margin: 0.4em auto;
}
.layout-workshop-board .flyer-offer {
  justify-content: center;
}
.layout-workshop-board .flyer-cta {
  margin: 0.8em auto 0;
}
.layout-workshop-board .flyer-contact {
  justify-content: center;
}
.layout-workshop-board .flyer-logo {
  left: 38%;
  top: 2%;
  width: 24%;
  height: 8%;
  background: #fff;
}
.layout-workshop-board .flyer-qr {
  right: 7%;
  bottom: 6%;
  width: 11%;
  aspect-ratio: 1;
}

/* Alternate aspect ratios reflow rather than stretch. */
.flyer-canvas.aspect-square .flyer-photo {
  height: 42%;
}
.flyer-canvas.aspect-square .flyer-copy {
  width: auto;
  max-width: none;
  padding-top: 48%;
  text-align: center;
}
.flyer-canvas.aspect-square .flyer-description {
  margin: 0.5em auto;
}
.flyer-canvas.aspect-square .flyer-offer,
.flyer-canvas.aspect-square .flyer-contact {
  justify-content: center;
}
.flyer-canvas.aspect-square .flyer-cta {
  margin: 0.8em auto 0;
}
.flyer-canvas.aspect-square .flyer-logo {
  left: 5%;
  top: 4%;
  right: auto;
  width: 22%;
  height: 9%;
}
.flyer-canvas.aspect-square .flyer-qr {
  right: 5%;
  bottom: 5%;
  width: 12%;
  aspect-ratio: 1;
}
.flyer-canvas.aspect-square .flyer-contact {
  position: static;
  color: inherit;
  width: auto;
}
.flyer-canvas.aspect-square.layout-sale-burst .flyer-copy,
.flyer-canvas.aspect-square.layout-community-calendar .flyer-copy,
.flyer-canvas.aspect-square.layout-garage-sale-tags .flyer-copy {
  padding-top: 8%;
  align-content: center;
}
.flyer-canvas.aspect-square.layout-consultant-column .flyer-photo,
.flyer-canvas.aspect-square.layout-clean-grid .flyer-photo,
.flyer-canvas.aspect-square.layout-nail-color-block .flyer-photo,
.flyer-canvas.aspect-square.layout-food-truck-route .flyer-photo,
.flyer-canvas.aspect-square.layout-garage-sale-tags .flyer-photo,
.flyer-canvas.aspect-square.layout-community-calendar .flyer-photo {
  display: none;
}
.flyer-canvas.aspect-story .flyer-photo {
  height: 40%;
  width: 100%;
  left: 0;
  right: auto;
  top: 0;
  clip-path: none;
  border-radius: 0;
}
.flyer-canvas.aspect-story .flyer-copy {
  width: auto;
  padding-top: 45%;
  text-align: center;
}
.flyer-canvas.aspect-story .flyer-description {
  margin: 0.5em auto;
  max-width: 34em;
}
.flyer-canvas.aspect-story .flyer-offer,
.flyer-canvas.aspect-story .flyer-contact {
  justify-content: center;
}
.flyer-canvas.aspect-story .flyer-cta {
  margin: 1em auto 0;
}
.flyer-canvas.aspect-story .flyer-contact {
  position: static;
  color: inherit;
  width: auto;
}
.flyer-canvas.aspect-story .flyer-logo {
  left: 36%;
  top: 3%;
  right: auto;
  width: 28%;
  height: 7%;
}
.flyer-canvas.aspect-story .flyer-qr {
  right: 6%;
  bottom: 4%;
  width: 14%;
  aspect-ratio: 1;
}
.flyer-canvas.aspect-story.layout-sale-burst .flyer-copy,
.flyer-canvas.aspect-story.layout-community-calendar .flyer-copy,
.flyer-canvas.aspect-story.layout-garage-sale-tags .flyer-copy {
  padding-top: 12%;
  align-content: center;
}
.flyer-canvas.aspect-portrait:not(.layout-sale-burst):not(
    .layout-community-calendar
  ):not(.layout-garage-sale-tags)
  .flyer-photo {
  height: 43%;
}
.flyer-canvas.aspect-portrait:not(.layout-sale-burst):not(
    .layout-community-calendar
  ):not(.layout-garage-sale-tags)
  .flyer-copy {
  padding-top: 47%;
  width: auto;
}
.flyer-canvas.aspect-half .flyer-headline {
  font-size: 3.4em;
}

.guide {
  padding: 76px 0;
  border-top: 2px solid var(--line);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 36px 0 62px;
  border: 2px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.steps > div {
  padding: 28px;
  border-right: 1px solid var(--line);
}
.steps > div:last-child {
  border-right: 0;
}
.steps span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--yellow);
  font-weight: 900;
}
.steps h3 {
  font-size: 1.35rem;
  margin: 20px 0 8px;
}
.steps p,
.guide-grid p {
  color: var(--muted);
  line-height: 1.65;
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}
.guide-grid article,
.tips {
  border-top: 2px solid var(--line);
  padding-top: 22px;
}
.guide-grid h2,
.tips h2 {
  font-size: 2rem;
  margin: 0;
}
.tips {
  margin-top: 38px;
}
.tips ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0;
  list-style: none;
}
.tips li {
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 18px;
  font-weight: 800;
}
.faq {
  padding: 72px 0 92px;
}
.faq h2 {
  margin-bottom: 30px;
}
.faq details {
  border-top: 1.5px solid var(--line);
  background: #fff;
}
.faq details:last-child {
  border-bottom: 1.5px solid var(--line);
}
.faq summary {
  padding: 20px 48px 20px 0;
  cursor: pointer;
  font-size: 1.18rem;
  font-weight: 850;
  list-style: none;
  position: relative;
}
.faq summary:after {
  content: "+";
  position: absolute;
  right: 8px;
  font-size: 1.4rem;
}
.faq details[open] summary:after {
  content: "−";
}
.faq details p {
  max-width: 900px;
  margin: 0;
  padding: 0 0 22px;
  color: var(--muted);
  line-height: 1.65;
}
.busy {
  cursor: progress;
}
.busy button {
  pointer-events: none;
}
.flyer-canvas.exporting {
  box-shadow: none;
}
#printRoot {
  display: none;
}
@media (max-width: 1180px) {
  .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .workspace-grid {
    grid-template-columns: 390px minmax(0, 1fr);
  }
  .tips ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .site-nav {
    width: calc(100% - 24px);
    min-height: 68px;
    padding: 12px 0;
  }
  .site-nav nav {
    gap: 10px;
  }
  .site-nav nav a:not(.nav-pill) {
    display: none;
  }
  .hero,
  .templates-section,
  .workspace,
  .guide,
  .faq {
    width: calc(100% - 24px);
  }
  .hero {
    min-height: 0;
    padding: 44px 0 48px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero h1 {
    font-size: clamp(3.8rem, 18vw, 6.5rem);
  }
  .hero-note {
    box-shadow: 6px 6px 0 var(--line);
  }
  .section-heading,
  .workspace-head {
    display: block;
  }
  .section-heading > p {
    margin-top: 16px;
  }
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .mobile-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 12px;
  }
  .mobile-view-tabs button {
    min-height: 48px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-weight: 900;
  }
  .workspace-grid {
    display: block;
    min-height: 0;
    box-shadow: 5px 5px 0 var(--line);
  }
  .editor-panel {
    border: 0;
  }
  .workspace-grid[data-mobile-view="preview"] .editor-panel {
    display: none;
  }
  .workspace-grid[data-mobile-view="edit"] .preview-panel {
    display: none;
  }
  .tab-panel {
    max-height: none;
  }
  .preview-stage {
    min-height: 560px;
    padding: 20px;
  }
  .preview-toolbar {
    align-items: flex-start;
  }
  .preview-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .steps > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .steps > div:last-child {
    border-bottom: 0;
  }
  .tips ul {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .hero h1 {
    font-size: 3.75rem;
  }
  .section-heading h2,
  .workspace-head h2,
  .guide > h2,
  .faq > h2 {
    font-size: 2.45rem;
  }
  .template-grid {
    grid-template-columns: 1fr;
  }
  .template-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
  }
  .template-preview {
    width: 110px;
  }
  .template-meta {
    align-content: center;
  }
  .field-pair {
    grid-template-columns: 1fr;
  }
  .editor-tabs {
    grid-template-columns: 1fr 1fr;
  }
  .editor-tabs button:nth-child(-n + 2) {
    border-bottom: 1px solid #c7c9c3;
  }
  .output-actions {
    grid-template-columns: 1fr;
  }
  .preview-toolbar {
    display: grid;
  }
  .preview-actions {
    justify-content: start;
  }
  .history-actions {
    justify-content: start;
    margin-top: 16px;
  }
  .tips ul {
    grid-template-columns: 1fr;
  }
  .tab-panel {
    padding: 18px;
  }
  .preview-stage {
    min-height: 480px;
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .template-card,
  .primary-link,
  .output-actions button {
    transition: none;
  }
}
@media print {
  @page {
    size: Letter;
    margin: 0;
  }
  body {
    background: #fff !important;
  }
  .site-header,
  main,
  .site-footer {
    display: none !important;
  }
  #printRoot {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #printRoot .flyer-canvas {
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    transform: none !important;
  }
  #printRoot .flyer-canvas:not(:first-child) {
    break-before: page;
  }
}