@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Italiana&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
  color-scheme: dark;
  --paper: #0c0d10;
  --ink: #f1efe8;
  --acid: #d1fa57;
  --awe-surface: #17191d;
  --awe-surface-raised: #202327;
  --awe-muted: #b6bab4;
  --awe-border: rgba(241, 239, 232, .2);
  --awe-body: "DM Sans", Arial, sans-serif;
  --awe-display: "Space Grotesk", Arial, sans-serif;
  --awe-mono: "DM Mono", ui-monospace, monospace;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.5 Arial,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button,
a,
input,
textarea,
select {
  outline-offset: 5px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #6262e8;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
[hidden] {
  display: none !important;
}
.app-header {
  padding: 25px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #17191725;
  gap: 20px;
}
.wordmark {
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -1.5px;
}
.wordmark i {
  font-weight: 400;
}
.app-header nav {
  display: flex;
  gap: 25px;
  font-size: 12px;
}
.app-main {
  max-width: 1450px;
  margin: auto;
  padding: 60px 4vw;
}
.eyebrow {
  font: 11px monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 35px;
  align-items: end;
  margin-bottom: 45px;
}
.intro h1 {
  font-size: clamp(50px, 7vw, 100px);
  line-height: 0.97;
  letter-spacing: -0.065em;
  margin: 15px 0;
}
.intro h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
}
.intro p {
  max-width: 450px;
}
.availability {
  font: 11px monospace;
  border: 1px solid #171917;
  padding: 9px 14px;
  border-radius: 30px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.availability:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.wizard {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  border-top: 1px solid #171917;
  gap: 40px;
  padding-top: 30px;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 30px;
  align-self: start;
}
.steps li {
  border-bottom: 1px solid #17191725;
  padding: 17px 0;
  font-size: 12px;
  color: #6a6a61;
}
.steps .active {
  font-weight: bold;
  color: #171917;
}
.steps .active:after {
  content: "↗︎";
  float: right;
}
.step-count {
  font: 11px monospace;
  display: block;
  color: #68695d;
  margin-bottom: 20px;
}
.work-area {
  min-width: 0;
}
.work-area h2 {
  font-size: 36px;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 5px 0 20px;
}
.muted {
  color: #606356;
  font-size: 14px;
}
.choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 25px 0;
}
.choice-card {
  color: inherit;
  background: transparent;
  border: 1px solid #17191730;
  padding: 24px;
  text-align: left;
  min-height: 160px;
  position: relative;
  transition:
    transform 0.2s,
    border 0.2s;
}
.choice-card:hover {
  transform: translateY(-4px);
  border-color: #171917;
}
.choice-card[aria-pressed="true"] {
  border: 2px solid #171917;
  background: #e8ebd9;
}
.choice-card small {
  display: block;
  font: 11px monospace;
  margin-bottom: 40px;
}
.choice-card strong {
  font-size: 23px;
  line-height: 1.1;
  display: block;
  letter-spacing: -0.8px;
}
.choice-card .arrow {
  position: absolute;
  right: 15px;
  top: 15px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 25px 0;
}
.template-card {
  border: 1px solid #17191730;
  padding: 9px;
  background: transparent;
  min-width: 0;
}
.template-card[aria-pressed="true"] {
  outline: 2px solid #171917;
}
.template-art {
  height: 180px;
  position: relative;
  overflow: hidden;
  background: var(--tile);
  padding: 18px;
  color: var(--type, #fff);
}
.template-art .title {
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 0.9;
  letter-spacing: -2px;
  position: relative;
  z-index: 1;
}
.template-art:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 150px;
  border: 20px solid currentColor;
  border-radius: 50%;
  right: -20px;
  bottom: -20px;
  opacity: 0.4;
}
.template-art.folio {
  font-family: Georgia, serif;
  font-style: italic;
  background: #e4d5c4;
  color: #573d2c;
}
.template-art.still {
  background: #e8e6df;
  color: #353f33;
}
.template-art.still .title {
  font-size: 25px;
  letter-spacing: 2px;
  padding-top: 35px;
}
.template-art.afterhours {
  background: #141619;
  color: #b4acff;
}
.template-art.signal .title {
  transform: rotate(-6deg);
  font-weight: 900;
}
.template-art.daylight {
  border-radius: 20px;
  background: #ddd3f1;
  color: #6047a1;
}
.template-meta {
  padding: 14px 6px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.template-meta strong {
  display: block;
  font-size: 17px;
}
.template-meta small {
  font-size: 11px;
  color: #64675b;
}
.template-select {
  border: 0;
  background: none;
  text-align: left;
  padding: 0;
  color: inherit;
}
.demo-link {
  font-size: 12px;
}
.split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.5fr);
  gap: 28px;
}
.panel {
  background: white;
  border: 1px solid #17191725;
  padding: 25px;
  min-width: 0;
}
.panel h3 {
  margin-top: 0;
}
.field {
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 18px;
}
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #17191750;
  padding: 12px 0;
  color: inherit;
  border-radius: 0;
  min-width: 0;
}
.field textarea {
  min-height: 100px;
  resize: vertical;
}
.field input[type="color"] {
  height: 42px;
  padding: 0;
  border: 0;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 20px;
}
.checks label {
  padding: 8px;
  border: 1px solid #17191725;
}
.preview-shell {
  background: #deded5;
  padding: 15px;
  min-width: 0;
  align-self: start;
  position: static;
  top: auto;
}
.preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font: 10px monospace;
}
.preview-shell iframe {
  width: 100%;
  height: 540px;
  border: 0;
  background: white;
  display: block;
  margin: auto;
  max-width: 100%;
}
.preview-top button {
  border: 0;
  background: transparent;
  padding: 6px;
  font: 10px monospace;
}
.actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #17191725;
  margin-top: 32px;
  padding-top: 25px;
}
.btn {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 24px;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.btn.acid {
  background: var(--acid);
  color: var(--ink);
}
.btn.secondary {
  background: transparent;
  color: var(--ink);
}
.btn.small {
  padding: 10px 14px;
}
.notice {
  padding: 16px 20px;
  background: #e8ebda;
  border-left: 3px solid #4b5830;
  font-size: 13px;
  margin: 20px 0;
}
.feedback {
  color: #9e3222;
  font-size: 14px;
  min-height: 24px;
}
.summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.summary dt {
  font: 11px monospace;
  text-transform: uppercase;
}
.summary dd {
  margin: 5px 0 25px;
}
.terms {
  white-space: pre-wrap;
  font-size: 14px;
}
.auth {
  max-width: 440px;
  margin: 30px auto;
}
/* Keep the email and code labels clear of the focused input outline. */
.auth .field input:not([type="checkbox"]) {
  margin-top: 14px;
  outline-offset: 2px;
}

.table-scroll {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  text-align: left;
}
th,
td {
  padding: 16px 12px;
  border-bottom: 1px solid #17191725;
  white-space: nowrap;
}
th {
  font: 11px monospace;
  text-transform: uppercase;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 25px 0;
}
.stat {
  padding: 25px;
  background: #e7e8dc;
}
.stat strong {
  display: block;
  font-size: 36px;
  letter-spacing: -2px;
}
.stat small {
  font: 11px monospace;
}
.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.file-list {
  font-size: 13px;
  padding-left: 20px;
}
.section-divider {
  margin: 60px 0 25px;
  border-top: 1px solid;
  padding-top: 25px;
}
.audit {
  max-height: 250px;
  overflow: auto;
  font: 12px monospace;
}
.app-footer {
  padding: 35px 4vw;
  border-top: 1px solid #17191725;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 11px monospace;
}
.service-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 40px 0;
}
.service-option {
  padding: 35px;
  border: 1px solid currentColor;
}
.service-option:first-child {
  background: #d1fa57;
}
.service-option h3 {
  font-size: 42px;
  letter-spacing: -2px;
}
.service-option p {
  margin: 20px 0;
}
.modal {
  border: 1px solid;
  padding: 35px;
  max-width: 500px;
  width: calc(100% - 30px);
}
.modal::backdrop {
  background: #0008;
}
@media (max-width: 850px) {
  .wizard {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .steps {
    position: static;
    display: flex;
    overflow: auto;
    gap: 15px;
  }
  .steps li {
    min-width: 95px;
    padding: 12px 0;
  }
  .template-grid,
  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split {
    grid-template-columns: 1fr;
  }
  .preview-shell {
    position: static;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .intro {
    grid-template-columns: 1fr;
  }
  .intro p {
    margin-top: 0;
  }
  .service-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .app-header {
    padding: 20px;
  }
  .app-header nav {
    gap: 15px;
    font-size: 10px;
  }
  .app-main {
    padding: 35px 20px;
  }
  .intro {
    gap: 15px;
    margin-bottom: 25px;
  }
  .intro h1 {
    font-size: 57px;
  }
  .wizard {
    padding-top: 10px;
  }
  .choices {
    gap: 10px;
  }
  .choice-card {
    padding: 18px;
    min-height: 155px;
  }
  .choice-card strong {
    font-size: 20px;
  }
  .template-grid {
    gap: 10px;
  }
  .template-art {
    height: 145px;
    padding: 10px;
  }
  .template-meta {
    display: block;
  }
  .template-meta strong {
    font-size: 14px;
  }
  .demo-link {
    display: block;
    margin-top: 10px;
  }
  .summary {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: 20px;
  }
  .field-row {
    gap: 12px;
  }
  .btn {
    padding: 14px 18px;
    gap: 15px;
  }
  .preview-shell iframe {
    height: 440px;
  }
  .app-footer {
    flex-wrap: wrap;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 20px;
  }
  .work-area h2 {
    font-size: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
@media(max-width:360px){.choices,.template-grid{grid-template-columns:1fr}.choice-card{min-height:120px}.choice-card small{margin-bottom:25px}.choice-card strong{font-size:23px}.template-art{height:180px}.template-art .title{font-size:36px}.availability{font-size:9px}.app-header{align-items:flex-start}.app-header nav{flex-direction:column;gap:6px}.field-row{grid-template-columns:1fr}}

/* Premium owner-only visual editor */
.studio-tools{margin:32px 0;padding:25px;border:1px solid #17191740;background:#f2f4e7}
.studio-tools>h3{margin:0 0 8px;font-size:29px;letter-spacing:-.05em}
.studio-tools>h4{margin:32px 0 12px;border-top:1px solid #17191725;padding-top:25px;font-size:18px}
.studio-tools .field{margin-block:12px}
.studio-tools .field textarea{min-height:75px}
.studio-row{background:white;border:1px solid #17191730;padding:17px;margin:12px 0}
.studio-row-head,.studio-section{display:flex;justify-content:space-between;align-items:center;gap:10px}
.studio-row-head{border-bottom:1px solid #17191720;padding-bottom:10px}
.studio-row-head button,.studio-section button{border:1px solid #17191750;background:transparent;padding:5px 12px;cursor:pointer}
.studio-row-head button:disabled,.studio-section button:disabled{opacity:.3;cursor:not-allowed}
.studio-arrangement{display:grid;gap:8px}
.studio-section{padding:10px 14px;background:#fff;border:1px solid #17191730;font-size:13px}
.studio-preview-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.studio-preview-actions .muted{width:100%;margin:0}
#studio-live-frame{max-width:100%;margin-inline:auto}
@media(max-width:550px){.studio-tools{padding:15px}.studio-row{padding:12px}.studio-preview-actions .btn{font-size:10px;padding:9px}}


/* Immersive AWE Express selection: real, accessible preview rather than a static swatch. */
.experience-picker-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:35px}
.experience-picker-heading h2{font:900 clamp(36px,5vw,70px)/.95 system-ui,sans-serif;letter-spacing:-.075em}
.experience-picker-heading h2 em{font:italic 400 1.15em Georgia,serif}
.experience-picker-index{text-align:right;font:11px monospace;white-space:nowrap}
.experience-picker-index strong{display:block;font:900 clamp(50px,9vw,115px)/1 system-ui;letter-spacing:-.09em}
.experience-picker-index small{font-size:9px;letter-spacing:.14em}
.experience-theater{background:#121419;color:#f4f5f0;padding:15px;box-shadow:0 28px 85px #15172222;margin-bottom:38px}
.theater-header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:10px 12px 22px}
.theater-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.theater-tools button,.theater-tools a{color:inherit;text-decoration:none;background:none;border:1px solid #7779;padding:8px 13px;font:700 10px monospace;letter-spacing:.04em;cursor:pointer}
.theater-tools button[aria-pressed=true]{background:#d1fa57;color:#111;border-color:#d1fa57}
.theater-live{display:inline-block;width:8px;height:8px;background:#d1fa57;border-radius:50%;box-shadow:0 0 14px #d1fa57;margin-right:8px}
.theater-viewport{min-height:570px;background:linear-gradient(130deg,#2d3139,#17191f);display:flex;justify-content:center;align-items:stretch;overflow:hidden;padding:0;transition:padding .4s}
.theater-viewport iframe{display:block;width:100%;height:620px;border:0;background:#faf9f3;transition:width .55s cubic-bezier(.22,1,.36,1),border-radius .4s,box-shadow .4s}
.experience-theater.is-mobile .theater-viewport{padding:20px}
.experience-theater.is-mobile .theater-viewport iframe{width:min(375px,100%);border-radius:20px;box-shadow:0 20px 65px #0008}
.theater-caption{padding:22px 12px 12px;display:flex;gap:20px;align-items:end;justify-content:space-between}
.theater-caption h3{font:800 clamp(22px,3vw,40px)/1 system-ui;letter-spacing:-.07em;margin:5px 0 7px}
.theater-caption p{font-size:13px;margin:0;color:#d5d4d3}
.premium-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.template-poster{padding:0;border:0;overflow:hidden;background:transparent}
.template-poster .template-select{display:block;width:100%;padding:0;text-align:left;border:0;background:none;cursor:pointer}
.poster-art{height:clamp(225px,24vw,370px);position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:24px;overflow:hidden;isolation:isolate;background:var(--tile);color:white}
.poster-num{font:700 10px monospace;letter-spacing:.15em;position:relative;z-index:2}
.poster-art>strong{position:relative;z-index:2;font:900 clamp(28px,3.5vw,59px)/.9 system-ui;letter-spacing:-.08em;max-width:260px;text-transform:uppercase;overflow-wrap:anywhere}
.poster-style{position:relative;z-index:2;text-transform:uppercase;font:700 10px monospace;letter-spacing:.1em}
.poster-symbol{position:absolute;z-index:1;right:-10%;top:5%;font:400 clamp(170px,24vw,400px)/1 Georgia;color:#ffffff2f;transform:rotate(-15deg);transition:transform .75s cubic-bezier(.22,1,.36,1)}
.poster-art:after{content:"";position:absolute;z-index:0;width:56%;height:75%;border:25px solid #fff4;border-radius:50%;top:10%;right:-7%;transform:rotate(-28deg)}
.poster-index{background:linear-gradient(120deg,#0a2468,#3459dd 70%,#9bc1ff)}.poster-index:after{border-radius:0;transform:rotate(28deg)}
.poster-folio{background:#e2c9aa;color:#46231f}.poster-folio>strong{font:italic 400 clamp(38px,4.5vw,78px)/.8 Georgia,serif;text-transform:none}.poster-folio .poster-symbol{color:#913e3838}
.poster-still{background:#d0d1c2;color:#343a2e}.poster-still>strong{font:400 clamp(37px,4vw,70px)/1.02 Georgia,serif;text-transform:none}.poster-still:after{border-radius:50% 50% 0 0;border-color:#52604c65}
.poster-afterhours{background:radial-gradient(circle at 70% 20%,#4d427a,#0a0b12 65%);color:#f3eefa}.poster-afterhours .poster-symbol{color:#b4acff66}
.poster-signal{background:linear-gradient(130deg,#ea5b20 45%,#e8fa3d 46%);color:#171615}.poster-signal>strong{transform:rotate(-7deg);text-shadow:4px 5px #f7f8db}.poster-signal:after{border-color:#1919188c}
.poster-daylight{background:linear-gradient(135deg,#d8b8f6,#7854d1);color:#271c46}.poster-daylight>strong{font-weight:950;letter-spacing:-.09em}.poster-daylight:after{border-radius:70px 20px}
.poster-meta{min-height:86px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 2px}
.poster-meta strong{font-size:15px;line-height:1.3;max-width:65%}.poster-meta>span{font:700 10px monospace;letter-spacing:.04em;text-align:right}
.template-poster.chosen .poster-art{outline:5px solid #171917;outline-offset:-5px}
.template-poster.chosen .poster-meta>span{color:#3e5724}
.template-poster .template-select:hover .poster-symbol,.template-poster .template-select:focus-visible .poster-symbol{transform:rotate(22deg) scale(1.2)}
.template-poster .template-select:hover .poster-art{filter:saturate(1.2)}
.template-poster .template-select:focus-visible{outline:3px solid #6262e8;outline-offset:-3px}
.wizard .work-area{animation:wizard-enter .45s both}
@keyframes wizard-enter{from{opacity:.35;transform:translateY(17px)}to{opacity:1;transform:none}}
@media(max-width:900px){.premium-template-grid{grid-template-columns:repeat(2,1fr)}.theater-viewport iframe{height:540px}.experience-picker-index small{white-space:normal}}
@media(max-width:560px){.experience-picker-heading{align-items:start}.experience-picker-index{display:none}.premium-template-grid{gap:9px}.poster-art{height:240px;padding:13px}.poster-art>strong{font-size:clamp(23px,6vw,39px)}.poster-num,.poster-style{font-size:8px}.poster-meta{min-height:77px}.poster-meta strong{font-size:11px}.poster-meta>span{font-size:8px}.theater-header{align-items:start;flex-direction:column}.theater-tools button,.theater-tools a{font-size:9px;padding:7px 9px}.theater-viewport iframe{height:475px}.theater-caption>span{display:none}}
@media(prefers-reduced-motion:reduce){.wizard .work-area{animation:none}.poster-symbol,.theater-viewport iframe{transition:none!important}}


/* 20 individual art-directed selection posters — identity before customization. */
.poster-atlas{background:repeating-linear-gradient(90deg,#163e3c,#163e3c 1px,#cbe5db 1px,#cbe5db 28px);color:#122d2a}
.poster-atlas strong{font:850 clamp(28px,4vw,75px)/.9 Arial,sans-serif;letter-spacing:-.08em}
.poster-atlas:after{border-radius:0;border-color:#0c655b88;transform:rotate(25deg)}
.poster-terminal{background:repeating-linear-gradient(0deg,#101e15,#101e15 3px,#1c3521 4px);color:#b2ffaf}
.poster-terminal strong{font:750 clamp(27px,3.4vw,55px)/1 "Courier New",monospace;text-transform:lowercase}
.poster-terminal:after{border:1px solid #aafaad;border-radius:0;transform:none;width:90%;height:75%;top:10%;right:5%}
.poster-orbit{background:radial-gradient(circle at 75% 34%,#9a83ed,#1c0c48 68%);color:white}
.poster-orbit:after{border-color:#ffffff38;transform:rotate(25deg) scaleX(.55)}
.poster-orbit .poster-symbol{font-size:340px;color:#b4a3fe3b}
.poster-playbill{background:repeating-linear-gradient(90deg,#e9d3b2,#e9d3b2 25px,#d6bb92 26px,#d6bb92 27px);color:#662a20}
.poster-playbill strong{font:italic 400 clamp(38px,4.1vw,78px)/.9 Georgia,serif;text-transform:none}
.poster-playbill:after{border-color:#87352988}
.poster-monologue{background:#fff9eb;color:#1e2825}
.poster-monologue strong{font:700 clamp(24px,3vw,56px)/1.1 "Courier New",monospace}
.poster-monologue:after{border-radius:0;border-width:1px;border-color:#343b3766;transform:none}
.poster-portraiture{background:linear-gradient(145deg,#ffe9d6,#d28876);color:#593027}
.poster-portraiture strong{font:italic 400 clamp(32px,4vw,72px)/.9 Georgia,serif;text-transform:none}
.poster-portraiture:after{border-radius:48% 48% 0 0;border-color:#7d403650}
.poster-contactsheet{background:repeating-linear-gradient(0deg,#25352b,#25352b 70px,#688069 71px,#688069 74px);color:#e1f6d9}
.poster-contactsheet:after{border-radius:0;border-color:#a0bc8f6d}
.poster-atelier{background:linear-gradient(135deg,#d0c6b7,#ece8df);color:#45362d}
.poster-atelier strong{font:italic 400 clamp(32px,4vw,80px)/.8 Georgia,serif;text-transform:none}
.poster-atelier .poster-symbol{color:#957f6333}
.poster-museum{background:#e6dfc6;color:#4b432e}
.poster-museum strong{font:400 clamp(30px,4vw,72px)/.97 Georgia,serif;text-transform:none}
.poster-museum:after{border-radius:0;border-color:#938355aa;border-width:20px}
.poster-brutalist{background:#f84c56;color:#151718}
.poster-brutalist strong{text-shadow:5px 6px #f6ec36;transform:rotate(-5deg)}
.poster-brutalist:after{border-radius:0;border-width:30px;border-color:#151718b3;transform:rotate(13deg)}
.poster-nocturne{background:radial-gradient(circle at 50% 35%,#71513b,#110f14 74%);color:#efd5a6}
.poster-nocturne strong{font:italic 400 clamp(36px,4vw,72px)/.97 Georgia,serif;text-transform:none}
.poster-nocturne:after{border-width:1px;border-color:#e4c69d80}
.poster-foundry{background:linear-gradient(135deg,#e0a943,#d2bea0);color:#302719}
.poster-foundry strong{font:1000 clamp(30px,4vw,70px)/.85 Arial,sans-serif;letter-spacing:-.08em}
.poster-foundry:after{border-radius:0;transform:rotate(-18deg);border-color:#28251e90}
.poster-bloom{background:#f2d6e2;color:#8b4169}
.poster-bloom strong{font:italic 500 clamp(38px,4vw,70px)/.95 Georgia,serif;text-transform:none}
.poster-bloom .poster-symbol{color:#c681ac66}.poster-bloom:after{border-radius:45% 30% 49% 30%;border-color:#b97f9d66}
.poster-ledger{background:linear-gradient(135deg,#e0e9f2,#b3cfe8);color:#20405f}
.poster-ledger strong{font:900 clamp(30px,4vw,68px)/.87 Arial,sans-serif}
.poster-ledger:after{border-radius:0;border-color:#24608c6b;transform:skewY(-10deg)}
.premium-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.premium-template-grid .template-poster{animation:poster-enter .55s both}
.premium-template-grid .template-poster:nth-child(3n+2){animation-delay:.06s}
.premium-template-grid .template-poster:nth-child(3n+3){animation-delay:.12s}
@keyframes poster-enter{from{transform:translateY(20px);opacity:.5}to{transform:none;opacity:1}}
.premium-template-grid .poster-art{height:clamp(220px,25vw,390px)}
.premium-template-grid .poster-style{font-size:9px;line-height:1.35}
.premium-template-grid .template-poster.chosen .poster-art{outline-offset:-9px;outline-width:8px}
@media(max-width:850px){.premium-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.premium-template-grid{gap:10px}.premium-template-grid .poster-art{height:240px}.premium-template-grid .poster-art>strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.premium-template-grid .template-poster{animation:none}}

/* Use a true vector for the template posters / selector, not an emoji star. */
.poster-symbol{display:block;font-size:0;width:clamp(170px,24vw,400px);height:clamp(170px,24vw,400px);background:currentColor;-webkit-mask:url("/assets/icons/asterisk.svg") center/contain no-repeat;mask:url("/assets/icons/asterisk.svg") center/contain no-repeat}
.experience-picker-index strong{font-size:0;display:block;margin-left:auto;width:clamp(50px,9vw,115px);height:clamp(50px,9vw,115px);background:currentColor;-webkit-mask:url("/assets/icons/asterisk.svg") center/contain no-repeat;mask:url("/assets/icons/asterisk.svg") center/contain no-repeat}

/* Consistent studio and AWE Express brand marks */
.app-header .wordmark{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.app-header .wordmark img{display:block;width:clamp(126px,16vw,190px);height:auto;max-width:100%}
@media(max-width:500px){.app-header .wordmark img{width:126px}}

/* AWE-QA-004 — accessible keyboard-only skip link */
.skip-link{position:fixed;z-index:9999;left:12px;top:12px;transform:translateY(-165%);padding:12px 18px;
background:#d1fa57;color:#141914;font:800 13px/1.2 Arial,sans-serif;border:2px solid #141914;
text-decoration:none;opacity:0;pointer-events:none}
.skip-link:focus-visible,.skip-link:focus{transform:translateY(0);opacity:1;pointer-events:auto;outline:3px solid #141914;outline-offset:2px}

/* Re-audit: show full opening composition in builder's 375px preview. */
.experience-theater{position:relative}
.theater-viewport{min-height:0!important;overflow:hidden;isolation:isolate}
.theater-canvas{position:relative;min-width:0;overflow:hidden}
.theater-viewport iframe{background:#101714;max-width:none}
.experience-theater.is-mobile .theater-viewport{padding:20px 8px!important}
.experience-theater.is-mobile .theater-viewport iframe{height:880px!important;min-height:880px;width:min(375px,100%);transform:none!important}
.theater-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:17px;background:radial-gradient(ellipse at 75% 30%,#d1fa5721,transparent 64%),#101714;
text-align:center;padding:30px;color:#f5f7ef;z-index:3;font:700 11px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.11em}
.theater-loading[hidden]{display:none!important}
.theater-loading strong{font:850 clamp(20px,3vw,35px)/1 Arial,system-ui,sans-serif;letter-spacing:-.05em}
.theater-loading-mark{font:70px/1 Georgia,serif;color:#d1fa57;animation:theater-loader 5s linear infinite}
@keyframes theater-loader{to{transform:rotate(360deg)}}
@media(max-width:560px){.experience-theater.is-mobile .theater-viewport{padding:9px 0!important}
.experience-theater.is-mobile .theater-viewport iframe{width:min(375px,100%)!important;min-height:880px}}

/* Cohesive editorial visual identity on contact, customer, order and admin pages. */
.app-header{background:#0c1210;color:#f4f5e6;border-bottom:4px solid #d1fa57;
 padding:18px 4vw;box-shadow:0 13px 35px #1023191b}
.app-header .wordmark img{max-width:190px;max-height:58px;object-fit:contain}
.app-header nav{align-items:center;flex-wrap:wrap;gap:12px 25px}
.app-header nav a{font-weight:750;letter-spacing:.03em;text-decoration:none;transition:color .2s}
.app-header nav a:hover{color:#d1fa57}
.app-header nav a:focus-visible{outline-color:#d1fa57}
body{background:var(--paper);color:var(--ink)}
.app-main{position:relative}
.app-main:before{content:"A / C";position:absolute;right:4vw;top:20px;pointer-events:none;
 font:900 clamp(65px,14vw,230px)/1 Arial,sans-serif;letter-spacing:-.11em;color:#b7cba918;z-index:-1}
.intro{border-bottom:1px solid #34442b36;padding-bottom:40px;margin-bottom:45px}
.intro h1{font-size:clamp(54px,7.4vw,110px);letter-spacing:-.085em}
.intro h1 em{color:#486a35}
.intro .eyebrow,.step-count{font-weight:850;color:#47692e;letter-spacing:.14em}
.wizard{border-top:0;gap:clamp(24px,4vw,55px)}
.steps li.active{color:#274d21;border-color:#3d802d}
.choice-card,.panel,.template-card{box-shadow:0 8px 33px #1521190a}
.choice-card[aria-pressed=true]{background:#e5f4cb;border-color:#294322}
@media(max-width:650px){
 .app-header{padding:15px 18px;align-items:flex-start}
 .app-header .wordmark img{width:155px;height:auto}
 .app-header nav{font-size:10px;justify-content:flex-end;gap:9px}
 .app-main{padding:35px 18px}
 .intro{padding-bottom:23px}
 .intro h1{font-size:clamp(42px,11vw,72px)}
}


/* AWE Express tier-first shopping: uses the existing ink, paper and acid palette. */
.tier-lead{max-width:820px;margin-bottom:28px}
.tier-lead h2,.tier-gallery-top h2{font-size:clamp(38px,4.7vw,70px);line-height:1.04;letter-spacing:-.055em;margin:12px 0 18px}
.tier-lead h2 em{font:italic 400 1em Georgia,serif}
.tier-lead p{max-width:710px}
.tier-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0}
.tier-choice{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;width:100%;min-width:0;min-height:390px;padding:clamp(17px,2vw,30px);background:#fff;color:var(--ink);border:1px solid #17191736;transition:border-color .18s,transform .18s,box-shadow .18s}
.tier-choice:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 12px 28px #17191717}
.tier-choice:focus-visible{outline:3px solid #6262e8}
.tier-choice[aria-pressed=true]{background:#f0f4d9;border:2px solid var(--ink)}
.tier-choice-index{font:10px/1.4 ui-monospace,monospace;letter-spacing:.095em;text-transform:uppercase;color:#52564e}
.tier-choice strong{font-size:clamp(22px,2.3vw,33px);line-height:1;letter-spacing:-.035em}
.tier-choice-price{font-size:clamp(43px,4vw,66px);font-weight:800;letter-spacing:-.075em;line-height:1}
.tier-choice[data-tier="premium"] .tier-choice-price{font-size:clamp(27px,3vw,43px);line-height:1.12;letter-spacing:-.04em;overflow-wrap:normal}
.tier-choice-intro{font-size:14px;line-height:1.45;color:#40453d}
.tier-choice ul{list-style:none;margin:4px 0 16px;padding:0;font-size:13px;line-height:1.5;color:#40453d}
.tier-choice li{position:relative;padding-left:18px;margin:8px 0}
.tier-choice li:before{content:"↗︎";position:absolute;left:0;color:var(--ink)}
.tier-choice-link{display:block;margin-top:auto;width:100%;background:var(--acid);color:var(--ink);padding:13px 10px;font-size:11px;font-weight:800;letter-spacing:.02em;text-align:center}
.tier-disclaimer{font-size:12px;color:#53574f;max-width:870px;line-height:1.7}
.tier-gallery-top{display:flex;justify-content:space-between;gap:25px;align-items:end;flex-wrap:wrap}
.tier-gallery-top>div:first-child{max-width:700px}
.tier-switches,.purpose-chips{display:flex;flex-wrap:wrap;gap:8px}
.tier-switch,.purpose-chip{padding:11px 15px;min-height:44px;border:1px solid #1719174d;background:transparent;color:var(--ink);font:700 12px/1.2 Arial,sans-serif}
.tier-switch[aria-pressed=true],.purpose-chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tier-switch:hover,.purpose-chip:hover{border-color:var(--ink)}
.template-filterbar{border-top:1px solid #17191732;border-bottom:1px solid #17191732;padding:20px 0 14px;margin:24px 0;display:grid;gap:12px}
.template-filterbar .muted{margin:0}
#no-template-matches{margin:20px 0}
@media(max-width:1050px){.tier-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.tier-choices{grid-template-columns:1fr}.tier-choice{min-height:0}.tier-gallery-top h2{font-size:42px}.tier-switches{width:100%}.tier-switch{flex:1}.purpose-chip{font-size:11px}.tier-lead h2{font-size:clamp(38px,9vw,54px)}}

/* Reserve the account/builder region and prevent child margin collapse while loading. */
#app{display:flow-root;min-height:100svh}


/* Keep failures adjacent to the checkout control instead of beneath the full wizard. */
.actions .checkout-feedback{flex:1;align-self:center;text-align:right;color:#9e3222;font:650 13px/1.45 Arial,sans-serif;max-width:440px}
.actions .checkout-feedback:empty{display:none}
.checkout-consent-label{display:block;padding:14px 0;line-height:1.65}
.checkout-consent-label input{width:19px;height:19px;vertical-align:-4px;accent-color:#345b24;margin-right:8px;cursor:pointer}
.checkout-consent-label a{font-weight:700}
#consent-help{line-height:1.5}
@media(max-width:650px){.actions{flex-wrap:wrap}.actions .checkout-feedback{order:3;flex-basis:100%;max-width:none;text-align:left}}

/* AWE CONCEPTS / ONE STUDIO IDENTITY
   Homepage charcoal, soft white and lime are the UI shell on every
   public, client and owner page. Template demo artwork remains independent. */
html{background:var(--paper)}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--awe-body);-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--acid);outline-offset:4px}
::selection{background:var(--acid);color:#0c0d10}
.skip-link{position:fixed;top:-100px;left:12px;z-index:1000;background:var(--acid);color:#0c0d10;padding:12px}
.skip-link:focus{top:12px}
.app-header{
  background:rgba(12,13,16,.94);color:var(--ink);
  border-bottom:1px solid var(--awe-border);box-shadow:none;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.app-header nav a,.app-header>a:not(.wordmark),.app-footer a{color:inherit;text-decoration:none}
.app-header nav a:hover,.app-header>a:not(.wordmark):hover,.app-footer a:hover,
.app-main a:not(.btn):hover{color:var(--acid)}
.app-header .wordmark img{display:block;max-width:190px;height:auto}
.app-main:before{color:rgba(209,250,87,.045);z-index:0}
.app-main>*,.app-main #app{position:relative}
.app-main h1,.app-main h2,.app-main h3,.tier-choice strong,
.choice-card strong,.stat strong{font-family:var(--awe-display)}
.intro{border-bottom:1px solid var(--awe-border)}
.intro h1 em,.tier-lead h2 em,.tier-gallery-top h2 em{color:var(--acid)}
.eyebrow,.intro .eyebrow,.step-count,.availability{color:var(--acid)}
.availability{border:1px solid rgba(209,250,87,.5)}
.muted,.steps li,.template-meta small,.tier-choice-index,.tier-choice-intro,
.tier-choice ul,.tier-disclaimer,.tier-lead p,.template-filterbar .muted{color:var(--awe-muted)}
.steps li{border-bottom-color:var(--awe-border)}
.steps li.active{color:var(--acid);border-color:var(--acid)}
.wizard,.actions,.template-filterbar,.app-footer,.section-divider{border-color:var(--awe-border)}
.panel,.choice-card,.template-card,.tier-choice,.stat,.studio-tools,
.studio-row,.studio-section,.preview-shell,.modal{
  background:var(--awe-surface);color:var(--ink);
  border-color:var(--awe-border);box-shadow:none;
}
.panel,.choice-card,.tier-choice,.stat{border-radius:2px}
.choice-card:hover,.tier-choice:hover,.template-card:hover{border-color:var(--acid);box-shadow:none}
.choice-card[aria-pressed="true"],.tier-choice[aria-pressed=true],
.template-card[aria-pressed="true"]{
  background:#26311e;color:var(--ink);border-color:var(--acid);
  outline-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid);
}
.tier-choice[aria-pressed=true]{border-width:2px}
.tier-choice strong,.tier-choice-price,.tier-choice li:before,.stat strong{color:var(--ink)}
.tier-choice-link,.service-option:first-child,.btn,.btn.acid{
  background:var(--acid);color:#0c0d10;border-color:var(--acid);
}
.btn:not(.secondary):hover,.tier-choice-link:hover{background:#e0ff86;border-color:#e0ff86;color:#0c0d10}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--awe-border)}
.btn.secondary:hover{border-color:var(--acid);color:var(--acid)}
.notice{background:#1f291e;color:var(--ink);border-left-color:var(--acid)}
.feedback,.actions .checkout-feedback{color:#ffa48c}
.stat{border:1px solid var(--awe-border)}
th,td{border-bottom-color:var(--awe-border)}
.checks label,.service-option,.studio-row-head,.studio-section,
.studio-row-head button,.studio-section button{border-color:var(--awe-border)}
.studio-row-head button,.studio-section button,
.preview-top button{color:var(--ink)}
.preview-shell{background:var(--awe-surface-raised)}
/* Only the iframe itself represents the customer-selected site. */
.preview-shell iframe,.theater-viewport iframe{background:#fff}
.field input:not([type="checkbox"]),.field select,.field textarea{
  color:var(--ink);border-bottom-color:var(--awe-border);
}
.field input::placeholder,.field textarea::placeholder{color:var(--awe-muted)}
.field select option{background:var(--awe-surface);color:var(--ink)}
input[type="checkbox"],input[type="radio"],.checkout-consent-label input{accent-color:var(--acid)}
.tier-switch,.purpose-chip{background:transparent;color:var(--ink);border-color:var(--awe-border)}
.tier-switch:hover,.purpose-chip:hover{border-color:var(--acid)}
.tier-switch[aria-pressed=true],.purpose-chip[aria-pressed=true]{
  background:var(--acid);border-color:var(--acid);color:#0c0d10;
}
.tier-choice[aria-pressed=true] .tier-choice-intro,
.tier-choice[aria-pressed=true] ul{color:#e5eadf}
.app-footer{color:var(--awe-muted)}
/* Respect individual template preview thumbnails/posters and approved sites. */