@charset "UTF-8";

:root {
  --ink: #172d38;
  --muted: #53636b;
  --blue: #185a7d;
  --navy: #153e56;
  --teal: #237888;
  --copper: #c96d42;
  --line: #dce2e4;
  --paper: #f5f6f4;
  --hero-bg: #edf0ec;
  --hero-shape: #dbe5e3;

  /* Exact Commercial Printer Business Card Ratios
     Full Bleed: 3.75 in × 2.25 in
     Trim Size:  3.50 in × 2.00 in (0.125 in bleed on each side)
     Safe Zone:  3.25 in × 1.75 in (0.250 in from bleed edge / 0.125 in inside trim)
     Screen scale: 184px per inch => 690px × 414px on screen (exact 5:3 ratio) */
  --inch: 184px;
  --bleed-w: calc(3.75 * var(--inch));
  --bleed-h: calc(2.25 * var(--inch));
  --bleed-pad: calc(0.125 * var(--inch));
  --safe-pad: calc(0.25 * var(--inch));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: var(--ink);
  background: #f2f4f2;
  -webkit-font-smoothing: antialiased;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, p {
  margin: 0;
}

/* STUDIO HEADER */
.studio-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
  border-bottom: 1px solid #e2e7e8;
}

.studio-header-inner {
  height: 74px;
  width: min(1400px, calc(100% - 64px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1.2px;
}

.brand-mark {
  width: 59px;
  height: 43px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 1px #153e561a);
}

.header-divider {
  width: 1px;
  height: 24px;
  background: #bcc6cb;
  margin-left: 4px;
}

.header-label {
  font-size: 14px;
  font-weight: 600;
  color: #3d525c;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-right: 8px;
}

.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #c7d1d5;
  background: #ffffff;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}

.toolbar-btn:hover {
  background: #f5f7f7;
}

.toolbar-btn.active {
  border-color: #185a7d;
  background: #eef4f7;
  color: #153e56;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa8ae;
}

.toolbar-btn.active .indicator-dot {
  background: #c96d42;
}

.toolbar-btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}

.toolbar-btn.primary:hover {
  background: #103e59;
}

/* STUDIO MAIN LAYOUT */
.studio-main {
  width: min(1400px, calc(100% - 64px));
  margin-inline: auto;
  padding: 36px 0 72px;
}

.studio-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid #d8dfe1;
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.65px;
  color: #4a6069;
  margin-bottom: 8px;
}

.eyebrow-rule {
  width: 24px;
  height: 2px;
  background: var(--copper);
}

.studio-intro h1 {
  font-size: 32px;
  letter-spacing: -1px;
  margin-bottom: 6px;
}

.studio-subtitle {
  font-size: 14px;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.5;
}

.spec-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #d6dfe2;
  padding: 14px 18px;
}

.spec-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-right: 16px;
  border-right: 1px solid #e6ecee;
}

.spec-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.spec-swatch {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

.bleed-swatch {
  border: 2px dashed #d15834;
  background: #d1583415;
}

.trim-swatch {
  border: 2px solid #0e7c90;
  background: #0e7c9015;
}

.safe-swatch {
  border: 2px dotted #3b6998;
  background: #3b699815;
}

.spec-item strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.spec-item span {
  display: block;
  font-size: 12px;
  color: #2c434e;
  margin-top: 2px;
}

.spec-item small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* WORKSPACE */
.studio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 36px;
  align-items: start;
}

.cards-stage {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.card-sheet {
  background: #ffffff;
  border: 1px solid #d8dfe2;
  padding: 24px 28px 32px;
  box-shadow: 0 10px 28px -18px #153e5633;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eaeff0;
}

.side-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 3px;
}

.sheet-header h2 {
  font-size: 18px;
  letter-spacing: -0.4px;
}

.sheet-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.theme-switcher {
  display: inline-flex;
  border: 1px solid #cdd7db;
  background: #f5f7f8;
  padding: 2px;
}

.theme-btn {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #52636b;
}

.theme-btn.active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 3px #00000014;
}

/* CROP MARKS FRAME AROUND CARD */
.crop-frame {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  padding: 22px;
  background: #e6ebec;
  border: 1px solid #d5dde0;
}

.crop-mark {
  position: absolute;
  background: #172d38;
  pointer-events: none;
  z-index: 15;
}

/* Crop marks align strictly with the 3.5" x 2.0" TRIM line (22px frame padding + 0.125in bleed) */
.crop-mark.tl-h, .crop-mark.tr-h, .crop-mark.bl-h, .crop-mark.br-h {
  width: 14px;
  height: 1px;
}

.crop-mark.tl-v, .crop-mark.tr-v, .crop-mark.bl-v, .crop-mark.br-v {
  width: 1px;
  height: 14px;
}

.crop-mark.tl-h { top: calc(22px + var(--bleed-pad)); left: 4px; }
.crop-mark.tl-v { top: 4px; left: calc(22px + var(--bleed-pad)); }

.crop-mark.tr-h { top: calc(22px + var(--bleed-pad)); right: 4px; }
.crop-mark.tr-v { top: 4px; right: calc(22px + var(--bleed-pad)); }

.crop-mark.bl-h { bottom: calc(22px + var(--bleed-pad)); left: 4px; }
.crop-mark.bl-v { bottom: 4px; left: calc(22px + var(--bleed-pad)); }

.crop-mark.br-h { bottom: calc(22px + var(--bleed-pad)); right: 4px; }
.crop-mark.br-v { bottom: 4px; right: calc(22px + var(--bleed-pad)); }

/* ============================================================================
   THE ACTUAL BUSINESS CARD CANVAS (3.75" × 2.25" Full Bleed)
   All dimensions inside use proportional calc(... * var(--inch)) so the card
   scales with mathematical precision at screen size, 300 DPI, 600 DPI, or print.
   ============================================================================ */
.card-bleed {
  position: relative;
  width: var(--bleed-w);
  height: var(--bleed-h);
  overflow: hidden;
  box-shadow: 0 18px 40px -16px #102a3840;
  user-select: none;
}

/* Safe area container: inset by 0.25" from bleed edge (0.125" bleed + 0.125" safe margin) */
.card-safe-content {
  position: absolute;
  inset: var(--safe-pad);
  z-index: 5;
}

/* ----------------------------------------------------------------------------
   SIDE A: FRONT OF CARD
   ---------------------------------------------------------------------------- */
.card-front {
  background: #edf0ec;
  color: var(--ink);
}

.card-bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  width: 47%;
  height: 100%;
  background: #dbe5e3;
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.card-bg-ring {
  position: absolute;
  right: calc(-0.28 * var(--inch));
  top: calc(-0.22 * var(--inch));
  width: calc(1.38 * var(--inch));
  height: calc(1.38 * var(--inch));
  border: calc(0.008 * var(--inch)) solid #b7ccca;
  border-radius: 50%;
  z-index: 2;
}

.card-bottom-accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(0.165 * var(--inch));
  background: linear-gradient(90deg, #153e56 0%, #185a7d 62%, #237888 100%);
  z-index: 3;
}

.card-bottom-accent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  height: calc(0.018 * var(--inch));
  background: var(--copper);
}

.front-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.front-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.1 * var(--inch));
}

.card-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(0.036 * var(--inch));
}

.card-logo-mark {
  width: calc(0.46 * var(--inch));
  height: calc(0.33 * var(--inch));
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 calc(0.01 * var(--inch)) calc(0.012 * var(--inch)) #153e5624);
}

.card-logo-word {
  font-size: calc(0.185 * var(--inch));
  font-weight: 600;
  letter-spacing: calc(-0.009 * var(--inch));
  color: var(--ink);
  line-height: 1;
}

.card-logo-divider {
  width: 1px;
  height: calc(0.165 * var(--inch));
  background: #b5c1c6;
  margin-inline: calc(0.045 * var(--inch));
}

.card-logo-sub {
  font-size: calc(0.098 * var(--inch));
  font-weight: 600;
  color: #3f555f;
  letter-spacing: calc(-0.001 * var(--inch));
}

.card-index {
  font-size: calc(0.064 * var(--inch));
  font-weight: 700;
  letter-spacing: calc(0.014 * var(--inch));
  color: #395560;
}

.front-middle {
  margin-top: calc(0.04 * var(--inch));
}

.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(0.065 * var(--inch));
  font-size: calc(0.064 * var(--inch));
  font-weight: 700;
  letter-spacing: calc(0.013 * var(--inch));
  color: #3d555f;
  margin-bottom: calc(0.065 * var(--inch));
}

.card-eyebrow-rule {
  width: calc(0.17 * var(--inch));
  height: calc(0.014 * var(--inch));
  background: var(--copper);
}

.card-headline {
  font-size: calc(0.285 * var(--inch));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: calc(-0.011 * var(--inch));
  color: var(--ink);
}

.front-bottom {
  padding-top: calc(0.065 * var(--inch));
  border-top: 1px solid #cad4d6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-pillars {
  display: inline-flex;
  align-items: center;
  gap: calc(0.055 * var(--inch));
  font-size: calc(0.068 * var(--inch));
  font-weight: 600;
  color: #264350;
  letter-spacing: calc(0.001 * var(--inch));
  white-space: nowrap;
}

.card-pillars i {
  font-style: normal;
  color: var(--copper);
}

/* Deep Navy Front Variant */
body[data-front-theme="navy"] .card-front {
  background: #153e56;
  color: #ffffff;
}

body[data-front-theme="navy"] .card-bg-shape {
  background: #113347;
}

body[data-front-theme="navy"] .card-bg-ring {
  border-color: #255670;
}

body[data-front-theme="navy"] .card-bottom-accent {
  background: linear-gradient(90deg, #c96d42 0%, #237888 100%);
}

body[data-front-theme="navy"] .card-logo-word,
body[data-front-theme="navy"] .card-headline {
  color: #ffffff;
}

body[data-front-theme="navy"] .card-logo-divider {
  background: #38647c;
}

body[data-front-theme="navy"] .card-logo-sub,
body[data-front-theme="navy"] .card-index,
body[data-front-theme="navy"] .card-eyebrow {
  color: #b8cfd9;
}

body[data-front-theme="navy"] .front-bottom {
  border-top-color: #29546d;
}

body[data-front-theme="navy"] .card-pillars {
  color: #dce9ee;
}

/* ----------------------------------------------------------------------------
   SIDE B: BACK OF CARD
   ---------------------------------------------------------------------------- */
.card-back {
  background: #ffffff;
  color: var(--ink);
}

.back-top-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(0.155 * var(--inch));
  background: #153e56;
  z-index: 1;
}

.back-top-band::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(1.15 * var(--inch));
  height: calc(0.022 * var(--inch));
  background: var(--copper);
}

.back-side-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 41.5%;
  background: #f2f5f3;
  border-left: 1px solid #dce3e5;
  z-index: 0;
}

.back-layout {
  display: grid;
  grid-template-columns: 1.32fr 0.98fr;
  gap: calc(0.16 * var(--inch));
  align-items: stretch;
}

.back-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(0.03 * var(--inch));
  padding-right: calc(0.05 * var(--inch));
}

.back-eyebrow {
  font-size: calc(0.062 * var(--inch));
  font-weight: 700;
  letter-spacing: calc(0.014 * var(--inch));
  color: var(--copper);
  text-transform: uppercase;
  margin-bottom: calc(0.035 * var(--inch));
}

.back-name {
  font-size: calc(0.215 * var(--inch));
  font-weight: 600;
  letter-spacing: calc(-0.007 * var(--inch));
  color: var(--ink);
  line-height: 1.12;
  margin-bottom: calc(0.055 * var(--inch));
}

.back-tagline {
  font-size: calc(0.078 * var(--inch));
  line-height: 1.48;
  color: var(--muted);
  max-width: calc(1.78 * var(--inch));
}

.back-contacts {
  display: flex;
  flex-direction: column;
  gap: calc(0.048 * var(--inch));
  padding-top: calc(0.08 * var(--inch));
  border-top: 1px solid #dfe5e7;
}

.contact-row {
  display: grid;
  grid-template-columns: calc(0.42 * var(--inch)) 1fr;
  align-items: baseline;
  font-size: calc(0.08 * var(--inch));
}

.contact-label {
  font-size: calc(0.06 * var(--inch));
  font-weight: 700;
  letter-spacing: calc(0.012 * var(--inch));
  color: #647780;
}

.contact-value {
  font-weight: 600;
  color: var(--ink);
}

.contact-url {
  color: var(--blue);
  font-weight: 700;
}

.back-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(0.05 * var(--inch));
  padding-top: calc(0.03 * var(--inch));
}

.suite-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #ffffff;
  border: 1px solid #d5dfe2;
  border-top: calc(0.022 * var(--inch)) solid var(--teal);
  padding: calc(0.105 * var(--inch)) calc(0.105 * var(--inch));
  box-shadow: 0 calc(0.04 * var(--inch)) calc(0.12 * var(--inch)) #153e560d;
}

.suite-header {
  display: flex;
  align-items: center;
  gap: calc(0.045 * var(--inch));
  padding-bottom: calc(0.06 * var(--inch));
  border-bottom: 1px solid #e7ecef;
}

.suite-mini-logo {
  width: calc(0.24 * var(--inch));
  height: calc(0.175 * var(--inch));
  object-fit: contain;
}

.suite-header span {
  font-size: calc(0.058 * var(--inch));
  font-weight: 700;
  letter-spacing: calc(0.011 * var(--inch));
  color: #3f5661;
}

.suite-list {
  list-style: none;
  margin: calc(0.06 * var(--inch)) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0.052 * var(--inch));
  font-size: calc(0.068 * var(--inch));
  color: #334a54;
  line-height: 1.2;
}

.suite-list li {
  position: relative;
  padding-left: calc(0.088 * var(--inch));
  white-space: nowrap;
}

.suite-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.036 * var(--inch));
  width: calc(0.038 * var(--inch));
  height: calc(0.038 * var(--inch));
  border-radius: 50%;
  background: var(--copper);
}

.suite-list strong {
  font-weight: 600;
  color: var(--ink);
}

.suite-footer {
  display: flex;
  align-items: center;
  gap: calc(0.045 * var(--inch));
  padding-top: calc(0.055 * var(--inch));
  border-top: 1px solid #e7ecef;
  font-size: calc(0.066 * var(--inch));
  font-weight: 600;
  color: var(--teal);
}

.suite-dot {
  width: calc(0.042 * var(--inch));
  height: calc(0.042 * var(--inch));
  border-radius: 50%;
  background: var(--teal);
}

/* ----------------------------------------------------------------------------
   PRINTER BLEED / TRIM / SAFE OVERLAY GUIDES
   ---------------------------------------------------------------------------- */
.printer-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.15s ease;
}

body[data-guides="false"] .printer-guides {
  opacity: 0;
  visibility: hidden;
}

.guide-bleed {
  position: absolute;
  inset: 1px;
  border: 1px dashed #d15834;
}

.guide-trim {
  position: absolute;
  inset: var(--bleed-pad);
  border: 1px solid #0e7c90;
}

.guide-safe {
  position: absolute;
  inset: var(--safe-pad);
  border: 1px dotted #3b6998;
}

.guide-tag {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 1px 5px;
  line-height: 1.3;
  white-space: nowrap;
}

.guide-bleed .guide-tag {
  top: 2px;
  left: 4px;
  background: #d15834;
  color: #ffffff;
}

.guide-trim .guide-tag {
  bottom: 2px;
  right: 4px;
  background: #0e7c90;
  color: #ffffff;
}

.guide-safe .guide-tag {
  bottom: 2px;
  left: 4px;
  background: #3b6998;
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
   SIDEBAR: DOWNLOADS & CUSTOMIZER
   ---------------------------------------------------------------------------- */
.studio-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-panel {
  background: #ffffff;
  border: 1px solid #d8dfe2;
  padding: 24px;
}

.sidebar-panel h2 {
  font-size: 19px;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}

.panel-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 18px;
}

.download-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #ced8dc;
  background: #f9fbfb;
  transition: border-color 0.15s, background 0.15s;
}

.download-btn:hover {
  border-color: var(--blue);
  background: #f0f5f7;
}

.download-btn.primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.download-btn.primary:hover {
  background: #0f2f42;
}

.download-btn strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.download-btn span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.download-btn.primary span {
  color: #c2d6e0;
}

.download-subrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}

.download-subrow a:hover {
  text-decoration: underline;
}

.panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.text-reset {
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  padding: 4px 0;
}

.text-reset:hover {
  text-decoration: underline;
}

.card-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-form label span {
  font-size: 12px;
  font-weight: 600;
  color: #324852;
}

.card-form input {
  height: 38px;
  padding: 0 11px;
  border: 1px solid #c7d2d6;
  background: #ffffff;
  font-size: 13px;
}

.card-form input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* ============================================================================
   EXPORT / STANDALONE RENDER MODES (Used when generating 300/600 DPI Press Files)
   ============================================================================ */
body[data-export-side] {
  background: transparent;
  margin: 0;
  padding: 0;
}

body[data-export-side] .no-print,
body[data-export-side] .printer-guides,
body[data-export-side] .crop-mark {
  display: none !important;
}

body[data-export-side] .studio-main,
body[data-export-side] .studio-workspace,
body[data-export-side] .cards-stage,
body[data-export-side] .card-sheet,
body[data-export-side] .crop-frame {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

body[data-export-side] .card-bleed {
  box-shadow: none;
}

body[data-export-side="front"] #sheet-back {
  display: none !important;
}

body[data-export-side="back"] #sheet-front {
  display: none !important;
}

/* ============================================================================
   PRINT MEDIA RULES (Exact 1:1 Physical Inches: 3.75in × 2.25in Bleed)
   ============================================================================ */
@media print {
  :root {
    --inch: 1in;
  }

  body {
    background: #ffffff;
  }

  .no-print,
  .printer-guides {
    display: none !important;
  }

  .studio-main {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .studio-workspace {
    display: block;
  }

  .cards-stage {
    gap: 0.45in;
    align-items: center;
  }

  .card-sheet {
    border: 0;
    box-shadow: none;
    padding: 0.15in 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .crop-frame {
    background: transparent;
    border: 0;
    padding: 0.2in;
  }

  .crop-mark.tl-h { top: calc(0.2in + 0.125in); left: 0.02in; width: 0.14in; }
  .crop-mark.tl-v { top: 0.02in; left: calc(0.2in + 0.125in); height: 0.14in; }
  .crop-mark.tr-h { top: calc(0.2in + 0.125in); right: 0.02in; width: 0.14in; }
  .crop-mark.tr-v { top: 0.02in; right: calc(0.2in + 0.125in); height: 0.14in; }
  .crop-mark.bl-h { bottom: calc(0.2in + 0.125in); left: 0.02in; width: 0.14in; }
  .crop-mark.bl-v { bottom: 0.02in; left: calc(0.2in + 0.125in); height: 0.14in; }
  .crop-mark.br-h { bottom: calc(0.2in + 0.125in); right: 0.02in; width: 0.14in; }
  .crop-mark.br-v { bottom: 0.02in; right: calc(0.2in + 0.125in); height: 0.14in; }

  .card-bleed {
    box-shadow: none;
  }
}

@media (max-width: 1180px) {
  .studio-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  :root {
    --inch: 120px;
  }
  .studio-main,
  .studio-header-inner {
    width: calc(100% - 32px);
  }
}
.studio-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  padding: 24px;
  font-size: 14px;
}
.studio-legal-links a { text-decoration: underline; text-underline-offset: 4px; }