:root {
  --ivory: #fbf7f2;
  --cream: #f3e8de;
  --card: #fffdf9;
  --blush: #f1ddd5;
  --bronze: #b77a66;
  --bronze-deep: #9e6353;
  --rose-gold: #d4a18f;
  --gold: #c9a46a;
  --charcoal: #3a302c;
  --brown: #756962;
  --taupe: #a4968d;
  --line: #e6d8cf;
  --shadow: 0 24px 70px rgba(72, 46, 35, .11);
  --soft-shadow: 0 14px 36px rgba(91, 62, 49, .08);
  --tg-safe-bottom: 0px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ivory);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--charcoal);
  background:
    radial-gradient(circle at 18% 12%, rgba(241, 221, 213, .72), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(243, 232, 222, .88), transparent 32%),
    var(--ivory);
  font-family: Inter, Avenir, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-family: Satoshi, Inter, Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.app {
  width: min(1180px, calc(100vw - 36px));
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(36px, 7vw, 92px);
  margin: 0 auto;
  padding: 28px 0;
}

.brand-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.brand-lockup {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin-bottom: clamp(22px, 4vh, 52px);
}

.brand-symbol {
  width: 34px;
  height: 42px;
  display: inline-block;
  position: relative;
}

.brand-symbol::before,
.brand-symbol::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border: 1.5px solid var(--bronze);
  border-radius: 70% 30% 70% 30%;
  transform: rotate(45deg);
}

.brand-symbol::after {
  transform: rotate(-45deg);
}

.brand-lockup strong,
.wordmark {
  color: var(--charcoal);
  font-family: "Playfair Display", "Cormorant Garamond", "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 9px;
}

.brand-lockup small {
  color: var(--brown);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.brand-panel h1,
.screen h2 {
  margin: 0;
  color: var(--charcoal);
  font-family: "Playfair Display", "Cormorant Garamond", "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.brand-panel h1 {
  max-width: 460px;
  font-size: clamp(40px, 4.2vw, 52px);
  line-height: 1.16;
}

em {
  font-style: italic;
}

.brand-panel > p {
  max-width: 420px;
  margin: 20px 0 24px;
  color: var(--brown);
  font-size: 15px;
  line-height: 1.65;
}

.brand-photo {
  width: min(352px, 100%);
  aspect-ratio: 1.45 / 1;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(230, 216, 207, .8);
  background: var(--card);
  box-shadow: var(--soft-shadow);
}

.brand-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.96) brightness(1.03);
}

.promise-list {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.promise-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--charcoal);
  font-size: 14px;
}

.phone-stage {
  display: grid;
  justify-items: center;
}

.phone-frame {
  width: min(354px, 100%);
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(145deg, #2e2825, #0f0d0c 44%, #c89575 49%, #1c1715 55%, #080706);
  box-shadow: 0 35px 90px rgba(61, 42, 34, .28);
}

.phone-screen {
  position: relative;
  min-height: min(620px, calc(100vh - 44px));
  max-height: calc(100vh - 56px);
  overflow: hidden auto;
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 3%, rgba(241, 221, 213, .78), transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #fbf7f2 100%);
  border: 1px solid rgba(255, 255, 255, .58);
  scrollbar-width: none;
}

.phone-screen::-webkit-scrollbar {
  display: none;
}

.phone-top {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 6px;
  /*background: linear-gradient(180deg, rgba(255, 253, 249, .96), rgba(255, 253, 249, .78));*/
  backdrop-filter: blur(18px);
}

.wordmark {
  border: 0;
  background: transparent;
  font-size: 15px;
  letter-spacing: 5px;
  justify-self: center;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
}

[data-icon] {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  color: var(--bronze);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

[data-icon="heart"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6c-1.8-1.7-4.7-1.7-6.5.1L12 7 9.7 4.7C7.9 2.9 5 2.9 3.2 4.6c-1.9 1.9-1.9 4.9 0 6.8L12 20l8.8-8.6c1.9-1.9 1.9-4.9 0-6.8Z'/%3E%3C/svg%3E"); }
[data-icon="sparkle"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l1.6 5.2L19 9l-5.4 1.8L12 16l-1.6-5.2L5 9l5.4-1.8L12 2Z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z'/%3E%3Cpath d='M5 14l.7 1.8L8 16.5l-2.3.7L5 19l-.7-1.8-2.3-.7 2.3-.7L5 14Z'/%3E%3C/svg%3E"); }
[data-icon="diamond"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9l4-6Z'/%3E%3Cpath d='M2 9h20M6 3l6 18 6-18M6 3l-4 6M18 3l4 6'/%3E%3C/svg%3E"); }
[data-icon="gift"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2V7ZM12 7v14M12 7H8.5A2.5 2.5 0 1 1 12 3.5V7ZM12 7h3.5A2.5 2.5 0 1 0 12 3.5V7Z'/%3E%3C/svg%3E"); }
[data-icon="person"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
[data-icon="calendar"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
[data-icon="pen"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 3 5 5L8 21H3v-5L16 3Z'/%3E%3Cpath d='m14 5 5 5'/%3E%3C/svg%3E"); }
[data-icon="bag"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8h12l1 13H5L6 8Z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
[data-icon="choice"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E"); }
[data-icon="back"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
[data-icon="lock"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
[data-icon="check"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); }
[data-icon="chat"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 18.5 3.5 22l4-1.2A9.5 9.5 0 1 0 3 12.6'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E"); }
[data-icon="chevron"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
[data-icon="ring"] { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 3 2.4 4h3.2L16 3H8Z'/%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='m9.5 7 2.5 2.5L14.5 7'/%3E%3C/svg%3E"); }

.screen {
  min-height: 548px;
  display: none;
  flex-direction: column;
  padding: 18px 20px 22px;
}

.screen.active {
  display: flex;
}

body.start-view {
  background: #fbf7f2;
}

body.start-view .app {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: stretch center;
  gap: 0;
  overflow-x: hidden;
  padding: 0;
}

body.start-view .brand-panel {
  display: none;
}

body.start-view .phone-stage {
  width: min(100vw, 430px);
  min-height: 100vh;
  display: block;
}

body.start-view .phone-frame {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.start-view .phone-screen {
  min-height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, .64), rgba(251, 247, 242, .18) 34%, rgba(251, 247, 242, .58) 100%),
    url("/static/images/start_background.png") center bottom / cover no-repeat,
    #fbf7f2;
}

body.start-view .phone-top {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 28px 30px 8px;
  /*background: linear-gradient(180deg, rgba(255, 253, 249, .9), rgba(255, 253, 249, .62));*/
  backdrop-filter: blur(16px);
}

body.start-view .wordmark {
  font-size: 19px;
  letter-spacing: 8px;
}

body.start-view .phone-top .icon-button {
  color: var(--bronze-deep);
}

body.start-view #onboardingSection {
  /*min-height: 100vh;*/
  padding: 112px 30px 24px;
  justify-content: flex-start;
  text-align: center;
}

body.start-view #onboardingSection .kicker {
  margin-bottom: 12px;
  color: var(--bronze-deep);
  font-size: 11px;
  letter-spacing: 5px;
}

body.start-view #onboardingSection h2 {
  max-width: 330px;
  font-size: clamp(38px, 11vw, 48px);
  line-height: 1.06;
}

body.start-view #onboardingSection h2 em {
  color: var(--bronze);
}

body.start-view #onboardingSection .screen-copy {
  max-width: 292px;
  margin: 18px auto 0;
  color: #5f5752;
  font-size: 15px;
  line-height: 1.58;
  text-align: left;
}

.start-hero {
  display: grid;
  justify-items: center;
}

.start-divider {
  width: 96px;
  height: 13px;
  margin-top: 20px;
  position: relative;
  color: var(--rose-gold);
}

.start-divider::before,
.start-divider::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 38px;
  height: 1px;
  background: currentColor;
}

.start-divider::before {
  left: 0;
}

.start-divider::after {
  right: 0;
}

.start-divider::before,
.start-divider::after {
  box-shadow: 0 0 0 1px rgba(255, 253, 249, .35);
}

.start-divider {
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 4px, transparent 5px);
}

.start-steps {
  display: grid;
  gap: 0;
  margin: clamp(58px, 12vh, 108px) 0 0;
  text-align: left;
}

.start-steps article {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(183, 122, 102, .18);
}

.start-steps article:last-child {
  border-bottom: 0;
}

.start-steps [data-icon] {
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid rgba(183, 122, 102, .24);
  border-radius: 50%;
  color: var(--bronze-deep);
}

.start-steps strong {
  display: block;
  margin-bottom: 3px;
  color: var(--bronze-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.start-steps p {
  margin: 0;
  color: #5f5752;
  font-size: 13px;
  line-height: 1.36;
}

.start-summary {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  background: rgba(255, 253, 249, .7);
  box-shadow: 0 18px 46px rgba(91, 62, 49, .08);
  backdrop-filter: blur(14px);
  text-align: left;
}

.start-summary img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
}

.start-summary p {
  margin: 0;
  color: var(--charcoal);
  font-size: 13px;
  line-height: 1.38;
}

.start-summary p em {
  font-family: "Playfair Display", "Cormorant Garamond", "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.start-summary ol {
  display: grid;
  grid-template-columns: 1fr 16px 1fr 16px 1fr;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.start-summary li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--brown);
  font-size: 10px;
  text-align: center;
}

.start-summary li [data-icon] {
  color: var(--bronze-deep);
}

body.start-view #beginStory {
  min-height: 58px;
  margin-top: 26px;
  border-radius: 12px;
  background: linear-gradient(180deg, #d18a79 0%, #b76e5e 100%);
  box-shadow: 0 18px 36px rgba(143, 82, 67, .23);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 3px;
}

body.start-view #beginStory::after {
  content: "✧";
  margin-left: 10px;
}

body.start-view #onboardingSection > .text-button {
  margin-top: 10px;
  color: var(--bronze-deep);
  font-size: 13px;
  font-weight: 800;
}

@media (min-width: 421px) and (max-width: 880px) {
  body.start-view .phone-stage {
    width: 100vw;
  }

  body.start-view .phone-screen {
    background:
      linear-gradient(180deg, rgba(255, 253, 249, .64), rgba(251, 247, 242, .18) 34%, rgba(251, 247, 242, .58) 100%),
      url("/static/images/start_background.png") center bottom / cover no-repeat,
      #fbf7f2;
  }
}

@media (min-width: 881px) {
  body {
    background:
      radial-gradient(circle at 16% 8%, rgba(241, 221, 213, .52), transparent 26%),
      radial-gradient(circle at 86% 82%, rgba(243, 232, 222, .7), transparent 30%),
      var(--ivory);
  }

  .brand-panel {
    display: none;
  }

  body:not(.start-view) .app {
    width: 100%;
    min-height: 100vh;
    display: block;
    padding: 0;
  }

  body:not(.start-view) .phone-stage {
    width: min(980px, calc(100vw - 72px));
    min-height: 100vh;
    display: block;
    margin: 0 auto;
  }

  body:not(.start-view) .phone-frame {
    width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.start-view) .phone-screen {
    min-height: 100vh;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.start-view) .phone-top {
    grid-template-columns: 48px 1fr 48px;
    width: min(980px, calc(100vw - 72px));
    margin: 0 auto;
    padding: 24px 0 18px;
    border-radius: 0;
    /*background: linear-gradient(180deg, rgba(251, 247, 242, .96), rgba(251, 247, 242, .74));*/
  }

  body:not(.start-view) .wordmark {
    font-size: 18px;
    letter-spacing: 7px;
  }

  body:not(.start-view) .screen {
    min-height: calc(100vh - 90px);
    padding: 34px 0 56px;
  }

  body:not(.start-view) .screen:not(#onboardingSection) {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
  }

  body:not(.start-view) #questionSection,
  body:not(.start-view) #customizeSection,
  body:not(.start-view) #orderSection,
  body:not(.start-view) #historySection {
    max-width: 860px;
  }

  body:not(.start-view) .choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.start-view) .custom-answer,
  body:not(.start-view) .bottom-actions,
  body:not(.start-view) #previewDesignButton {
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
  }

  body:not(.start-view) .bottom-actions {
    position: static;
    align-self: stretch;
    margin-top: 34px;
    background: transparent;
  }

  body:not(.start-view) .design-card {
    width: min(430px, 100%);
    margin-inline: auto;
  }

  body:not(.start-view) .result-actions {
    width: min(520px, 100%);
    margin: 28px auto 0;
    padding-top: 0;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  body:not(.start-view) .result-actions:has(#openOrderFromResult[hidden]) {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
  }

  body:not(.start-view) .ordered-note {
    grid-column: 1 / -1;
  }

  body:not(.start-view) .history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.start-view) #orderForm {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    flex: 0 0 auto;
  }

  body:not(.start-view) #orderForm .primary-button {
    margin-top: 16px;
  }

  body.start-view {
    overflow: auto;
  }

  body.start-view .app,
  body.start-view .phone-stage,
  body.start-view .phone-frame,
  body.start-view .phone-screen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }

  body.start-view .phone-screen {
    overflow-x: hidden;
    overflow-y: auto;
    background:
      linear-gradient(90deg, rgba(255, 253, 249, .9) 0%, rgba(255, 253, 249, .76) 38%, rgba(255, 253, 249, .22) 64%, rgba(255, 253, 249, .08) 100%),
      url("/static/images/start_background_desktop.png") center center / cover no-repeat,
      #fbf7f2;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.start-view .phone-top {
    display: flex;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr;
    width: min(980px, calc(100vw - 72px));
    margin: 0 auto;
    padding: 28px 0 18px;
  }

  body.start-view #backButton {
    display: none;
  }

  body.start-view .wordmark {
    justify-self: center;
    font-size: 27px;
    letter-spacing: 13px;
  }

  body.start-view .phone-top .icon-button {
    display: none;
    justify-self: end;
    width: 44px;
    height: 44px;
  }

  body.start-view .phone-top .icon-button [data-icon] {
    width: 31px;
    height: 31px;
  }

  body.start-view #onboardingSection {
    width: min(660px, calc(100vw - 120px));
    /*min-height: 100vh;*/
    margin-left: clamp(96px, calc((100vw - 1050px) / 2 + 120px), 460px);
    padding: min(10vh, 96px) 0 28px;
    text-align: left;
  }

  body.start-view .start-hero {
    justify-items: start;
  }

  body.start-view #onboardingSection .kicker {
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 6px;
    text-align: left;
  }

  body.start-view #onboardingSection h2 {
    margin: 0;
    max-width: 520px;
    font-size: clamp(48px, 4.4vw, 68px);
    line-height: 1.03;
    text-align: left;
  }

  body.start-view .start-divider {
    margin-top: 18px;
  }

  body.start-view #onboardingSection .screen-copy {
    max-width: 560px;
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.52;
  }

  body.start-view .start-steps {
    width: min(100%, 560px);
    margin-top: 18px;
  }

  body.start-view .start-steps article {
    grid-template-columns: 50px 1fr;
    gap: 14px;
    padding: 7px 0;
  }

  body.start-view .start-steps [data-icon] {
    width: 39px;
    height: 39px;
    padding: 10px;
  }

  body.start-view .start-steps strong {
    font-size: 11px;
    letter-spacing: 3.4px;
  }

  body.start-view .start-steps p {
    font-size: 13px;
  }

  body.start-view .start-summary {
    width: min(100%, 600px);
    grid-template-columns: 88px 1fr;
    gap: 18px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 16px;
  }

  body.start-view .start-summary img {
    width: 82px;
    height: 82px;
  }

  body.start-view .start-summary p {
    font-size: 14px;
  }

  body.start-view .start-summary p em {
    font-size: 18px;
  }

  body.start-view .start-summary ol {
    margin-top: 10px;
    grid-template-columns: 1fr 18px 1fr 18px 1fr;
    gap: 6px;
  }

  body.start-view .start-summary li {
    font-size: 11px;
  }

  body.start-view #beginStory {
    width: 360px;
    min-height: 58px;
    margin: 20px 0 0;
    font-size: 20px;
  }

  body.start-view #onboardingSection > .text-button {
    width: auto;
    margin: -52px 0 0 400px;
    min-height: 44px;
    /*border-bottom: 1px solid rgba(183, 122, 102, .42);*/
    border-radius: 0;
    font-size: 15px;
  }
}

.screen.centered {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.spacer {
  min-height: 4px;
}

.kicker {
  margin: 0 0 12px;
  color: var(--brown);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-align: center;
}

.screen h2 {
  margin-inline: auto;
  text-align: center;
  font-size: 26px;
  line-height: 1.16;
}

#questionText {
  font-size: 24px;
}

#questionText.long-question {
  font-size: 21px;
  line-height: 1.18;
}

#questionText.very-long-question {
  font-size: 18px;
  line-height: 1.2;
}

.screen-copy {
  max-width: 270px;
  margin: 13px 0 0;
  color: var(--brown);
  font-size: 14px;
  line-height: 1.55;
}

.screen-copy.center {
  margin-inline: auto;
  text-align: center;
}

.botanical-line {
  width: 118px;
  height: 96px;
  margin: 18px 28px auto auto;
  opacity: .52;
  background:
    radial-gradient(circle at 74% 18%, var(--rose-gold) 0 4px, transparent 5px),
    radial-gradient(circle at 42% 34%, var(--rose-gold) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 55%, var(--rose-gold) 0 3px, transparent 4px),
    linear-gradient(120deg, transparent 49%, var(--rose-gold) 50% 51%, transparent 52%);
  border-radius: 60% 40% 60% 40%;
}

.primary-button,
.secondary-button,
.text-button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  min-height: 52px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
}

.primary-button {
  margin-top: auto;
  color: #fffdf9;
  background: linear-gradient(180deg, #c98b76, var(--bronze));
  box-shadow: 0 13px 28px rgba(183, 122, 102, .25);
}

.primary-button:hover {
  background: linear-gradient(180deg, #b97965, var(--bronze-deep));
}

.secondary-button {
  color: var(--bronze-deep);
  background: rgba(255, 253, 249, .78);
  border: 1px solid var(--line);
}

.text-button {
  width: auto;
  min-height: 36px;
  margin-inline: auto;
  color: var(--bronze-deep);
  background: transparent;
  font-size: 12px;
}

#skipQuestion {
  width: auto;
  flex: 1;
  min-height: 52px;
  margin-inline: 0;
  border: 1px solid rgba(183, 122, 102, .32);
  border-radius: 12px;
  padding: 0 16px;
  background: rgba(255, 253, 249, .84);
  color: var(--brown);
}

.choice-list {
  display: grid;
  gap: 11px;
  margin-top: 24px;
}

.choice-list.compact {
  margin-top: 28px;
}

.choice-card {
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(230, 216, 207, .9);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 253, 249, .74);
  color: var(--charcoal);
  box-shadow: 0 9px 20px rgba(91, 62, 49, .035);
}

.choice-card [data-icon] {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.choice-card strong {
  font-size: 14px;
  font-weight: 700;
}

.choice-card small {
  margin-top: 2px;
  color: var(--brown);
  font-size: 11px;
}

.memory-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.note-card {
  position: relative;
  display: block;
  margin-top: 24px;
}

textarea,
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 249, .82);
  color: var(--charcoal);
  outline: none;
  padding: 15px 16px;
}

textarea {
  resize: none;
  line-height: 1.55;
}

input:focus,
textarea:focus {
  border-color: var(--rose-gold);
  box-shadow: 0 0 0 4px rgba(212, 161, 143, .18);
}

.note-card textarea {
  min-height: 210px;
  padding-bottom: 36px;
}

.note-card span {
  position: absolute;
  right: 15px;
  bottom: 13px;
  color: var(--taupe);
  font-size: 11px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 31px;
  margin-top: 13px;
}

.tag-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--bronze-deep);
  background: rgba(255, 253, 249, .62);
  font-size: 11px;
}

.hint {
  margin: auto 0 14px;
  color: var(--brown);
  font-size: 12px;
  text-align: center;
}

.custom-answer {
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.custom-answer .secondary-button {
  width: 100%;
}

.custom-answer.active {
  display: grid;
}

.bottom-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 0 0;
  background: linear-gradient(180deg, rgba(251, 247, 242, 0), rgba(251, 247, 242, .96) 26%, rgba(251, 247, 242, .98));
}

.bottom-actions .secondary-button {
  width: 112px;
}

.bottom-actions #backQuestion {
  width: 112px;
}

.sparkle-loader {
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  color: var(--bronze);
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 6l6 24 24 10-24 10-6 24-6-24-24-10 24-10 6-24Z'/%3E%3Cpath d='M65 8l2 8 8 3-8 3-2 8-2-8-8-3 8-3 2-8Z'/%3E%3C/svg%3E");
  animation: pulse 1.7s ease-in-out infinite;
}

.generation-progress {
  width: min(260px, 100%);
  height: 8px;
  overflow: hidden;
  margin: 22px auto 0;
  border: 1px solid rgba(230, 216, 207, .9);
  border-radius: 999px;
  background: rgba(255, 253, 249, .72);
}

.generation-progress span {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose-gold), var(--bronze));
  transition: width .55s ease;
}

.progress-note {
  min-height: 34px;
  margin: 10px auto 0;
  color: var(--brown);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

@keyframes pulse {
  0%, 100% { transform: scale(.94); opacity: .6; }
  50% { transform: scale(1); opacity: 1; }
}

.design-card,
.product-card,
.checkout-summary,
.history-card {
  border: 1px solid rgba(230, 216, 207, .86);
  border-radius: 18px;
  background: rgba(255, 253, 249, .76);
  box-shadow: var(--soft-shadow);
}

.design-card {
  margin-top: 20px;
  padding: 12px 12px 14px;
}

.design-card img,
.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  background: var(--cream);
  filter: sepia(.1) saturate(.94) brightness(1.04);
}

.icon-row {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin: 13px 0 0;
}

.result-specs {
  margin-top: 14px;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.result-actions .primary-button,
.result-actions .secondary-button {
  width: 100%;
  margin-top: 0;
}

.ordered-note {
  display: none;
  margin: 2px 0 0;
  color: var(--brown);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.ordered-note.active {
  display: block;
}

.result-prompt {
  display: none;
}

.product-card {
  margin: 24px 0 16px;
  padding: 12px;
}

.spec-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.spec-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(230, 216, 207, .7);
  padding-bottom: 8px;
}

.spec-list dt,
.spec-list dd {
  margin: 0;
  font-size: 12px;
}

.spec-list dt {
  color: var(--taupe);
}

.spec-list dd {
  color: var(--brown);
  text-align: right;
}

.selector-group {
  margin-top: 24px;
}

.selector-group label,
.engraving-label,
#orderForm label {
  display: block;
  margin: 0 0 10px;
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 700;
}

.swatches,
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.swatch {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.8), transparent 28%),
    var(--swatch);
}

.swatch.selected,
.pill-grid button.selected {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(183, 122, 102, .16);
}

.pill-grid button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 13px;
  background: rgba(255, 253, 249, .7);
  color: var(--brown);
  font-size: 12px;
}

.engraving-label {
  margin-top: 24px;
}

#customWishesInput {
  min-height: 88px;
}

#previewDesignButton {
  margin-top: 24px;
  flex: 0 0 auto;
}

.checkout-summary {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  margin: 18px 0 18px;
  padding: 10px;
}

.checkout-summary img {
  width: 86px;
  height: 86px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--cream);
}

.checkout-summary strong,
.checkout-summary small,
.checkout-summary b {
  display: block;
}

.checkout-summary small {
  margin: 5px 0 10px;
  color: var(--brown);
  font-size: 11px;
  line-height: 1.35;
}

#orderForm {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

#orderForm input,
#orderForm textarea {
  margin-bottom: 12px;
}

.secure-note {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--taupe);
  font-size: 11px;
  text-align: center;
}

.secure-note [data-icon] {
  width: 14px;
  height: 14px;
  color: var(--taupe);
}

.success-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(183, 122, 102, .12);
}

.history-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.history-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 10px;
}

.history-card img {
  width: 82px;
  height: 82px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--cream);
}

.history-card strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Playfair Display", "Cormorant Garamond", "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
}

.history-card p {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  color: var(--brown);
  font-size: 11px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.history-card button {
  width: auto;
  min-height: 30px;
  padding: 0 12px;
  font-size: 11px;
}

.empty-state {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  color: var(--brown);
  background: rgba(255, 253, 249, .68);
  font-size: 13px;
  line-height: 1.5;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  max-width: min(420px, calc(100vw - 28px));
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  pointer-events: none;
  border-radius: 14px;
  padding: 12px 15px;
  background: var(--charcoal);
  color: var(--card);
  box-shadow: var(--shadow);
  transition: .2s ease;
  font-size: 13px;
}

.toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 880px) {
  body {
    background: var(--ivory);
  }

  .app {
    width: 100%;
    min-height: 100vh;
    display: block;
    padding: 0;
  }

  .brand-panel {
    display: none;
  }

  .phone-frame {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .phone-screen {
    min-height: 100vh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .screen {
    min-height: calc(100vh - 64px);
    padding-inline: max(22px, env(safe-area-inset-left));
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  body.telegram-webapp .screen {
    padding-bottom: calc(34px + env(safe-area-inset-bottom) + var(--tg-safe-bottom));
  }

  body.telegram-webapp .bottom-actions {
    padding-bottom: calc(8px + env(safe-area-inset-bottom) + var(--tg-safe-bottom));
  }
}

@media (max-width: 380px) {
  .screen h2 {
    font-size: 29px;
  }

  .phone-top {
    padding-inline: 14px;
  }

  .screen {
    padding-inline: 16px;
  }
}