/* VAANG*N*GO — presentation layout and responsive styles */

:root {
  --bone:#f5f1e8;
  --paper:#fffdf8;
  --cream:#f8f5ee;
  --cream2:#eee7d9;
  --sand:#e7ddcb;
  --ink:#342b24;
  --muted:#796a57;
  --gold:#b18b48;
  --gold-dark:#805316;
  --gold-light:#dfca9f;
  --line:#dfd2bc;
  --espresso:#59472e;
  --shadow:0 10px 34px rgba(70,54,30,.08)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:Arial,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit
}

button,input {
  font:inherit
}

button {
  cursor:pointer
}

button:focus-visible,a:focus-visible {
  outline:3px solid #bd9652;
  outline-offset:3px
}

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

.deck {
  max-width:1580px;
  margin:auto;
  padding:0 28px 12px;
  min-height:100vh;
  display:flex;
  flex-direction:column
}

.masthead {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid #e4dacb;
  flex-shrink:0
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  flex-shrink:0
}

.brand-mark {
  width:52px;
  height:48px;
  display:block
}

.brand-word {
  font-size:15px;
  letter-spacing:.205em;
  font-weight:850;
  white-space:nowrap;
  line-height:1.4
}

.brand-caption {
  font-size:11px;
  color:#94836d;
  letter-spacing:.04em;
  margin-top:3px
}

.mast-center {
  text-align:center;
  line-height:1.75
}

.mast-center span {
  display:block;
  font-size:9px;
  letter-spacing:.3em;
  font-weight:700;
  color:#74654e
}

.mast-center strong {
  font:normal 18px Georgia,serif;
  letter-spacing:.015em
}

.mast-right {
  display:flex;
  gap:10px;
  align-items:center
}

.pill {
  border:1px solid #dac7a3;
  padding:10px 15px;
  font-weight:700;
  letter-spacing:.09em;
  font-size:10px;
  text-transform:uppercase;
  border-radius:999px;
  color:#84683b;
  white-space:nowrap;
  background:#fbf9f4
}

.watch {
  border:1px solid #805516;
  border-radius:8px;
  background:#805516;
  color:#fffdf8;
  padding:11px 15px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px
}

.watch svg {
  display:block;
  flex-shrink:0
}

.step-nav {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  margin:14px 0 12px;
  flex-shrink:0
}

.step-btn {
  height:58px;
  background:#eee8dc;
  border:1px solid transparent;
  border-radius:8px;
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:center;
  color:#6b5c48;
  transition:background .15s,box-shadow .15s;
  position:relative
}

.step-btn:hover {
  background:#e4d9c4
}

.step-btn[aria-current="step"] {
  background:#d1c4a8;
  color:#3c3023;
  border-color:#b7a27b
}

.step-number {
  font-size:10px;
  line-height:1;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #c7aa68;
  color:#9e7830;
  background:#f9f5eb;
  position:absolute;
  top:5px;
  left:6px
}

.step-name {
  font-size:11px;
  white-space:nowrap;
  margin-top:12px;
  letter-spacing:.01em;
  font-weight:600
}

.step-btn[aria-current="step"] .step-name {
  font-weight:800
}

.stage {
  background:var(--paper);
  border:1px solid #dccdb4;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
  flex:1;
  min-height:605px;
  isolation:isolate
}

.slide {
  display:none;
  position:relative;
  width:100%;
  min-height:605px;
  animation:appear .3s ease
}

.slide.active {
  display:block
}

@keyframes appear {
  from {
    opacity:.3;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

.inner {
  min-height:605px;
  padding:45px 60px;
  position:relative
}

.inner.tight {
  padding-top:36px;
  padding-bottom:34px
}

.eyebrow {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--gold-dark);
  font-size:10px;
  font-weight:800;
  letter-spacing:.21em;
  text-transform:uppercase;
  margin-bottom:19px
}

.eyebrow:before {
  content:"";
  width:26px;
  height:1px;
  background:var(--gold);
  display:block
}

.serif,h1,h2,h3 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.035em
}

h1 {
  font-size:clamp(56px,5.65vw,92px);
  line-height:1.03;
  margin:0 0 24px
}

h2 {
  font-size:clamp(44px,4.6vw,73px);
  line-height:1.06;
  margin:0 0 20px
}

h3 {
  font-size:24px;
  line-height:1.12;
  margin:0 0 12px
}

.accent {
  font-style:italic;
  color:var(--gold-dark)
}

.bodycopy {
  font-size:17px;
  line-height:1.67;
  color:#675945;
  max-width:570px;
  margin:0 0 20px
}

.smallcap {
  font-size:10px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#7d6c52;
  font-weight:700
}

.proto-note {
  color:#897963;
  font-size:10px;
  letter-spacing:.03em;
  line-height:1.4
}

.action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-size:13px;
  font-weight:700;
  background:var(--gold-dark);
  color:white;
  text-decoration:none;
  border:1px solid var(--gold-dark);
  border-radius:8px;
  padding:14px 19px;
  white-space:nowrap
}

.action:hover {
  background:#6e450d
}

.action.outline {
  background:#fffdf8;
  color:var(--ink);
  border-color:#d2ba8d
}

.inline-link {
  color:#8b601f;
  font-weight:800;
  text-underline-offset:4px;
  font-size:13px
}

.rule {
  border-top:1px solid #e6dac6
}

/* 01 */
.hero-slide {
  background:linear-gradient(112deg,#fffdf8 0,#fffdf8 48%,#eee4d1 100%)
}

.hero-grid {
  display:grid;
  grid-template-columns:42% 58%;
  min-height:605px
}

.hero-copy {
  padding:60px 0 43px 65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:2
}

.hero-copy h1 {
  max-width:600px
}

.hero-copy .bodycopy {
  max-width:390px
}

.hero-kickers {
  display:flex;
  gap:7px;
  margin-top:28px;
  flex-wrap:wrap
}

.hero-kickers span {
  border:1px solid #d9c9aa;
  padding:7px 10px;
  font-size:10px;
  letter-spacing:.06em;
  border-radius:6px;
  color:#6d583e
}

.hero-image {
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  padding:36px 28px 32px 0
}

.gallery-visual {
  position:relative;
  overflow:hidden;
  border:5px solid #fbf8ef;
  border-radius:14px;
  box-shadow:0 14px 38px #66513b39;
  background:#e1d6c6
}

.hero-image .gallery-visual {
  width:100%;
  height:430px
}

.gallery-svg {
  width:100%;
  height:100%;
  display:block
}

.scene-badge {
  position:absolute;
  bottom:14px;
  left:15px;
  right:auto;
  background:#fcf9f1e8;
  border:1px solid #e3d7bd;
  border-radius:6px;
  color:#5b4631;
  font-weight:700;
  letter-spacing:.055em;
  font-size:10px;
  padding:8px 11px;
  backdrop-filter:blur(4px)
}

.hero-embellish {
  position:absolute;
  top:8%;
  right:7%;
  width:350px;
  height:350px;
  border:1px solid #cdbb9d;
  border-radius:50%;
  z-index:-1;
  opacity:.55
}

/* 02 */
.world-slide {
  background:linear-gradient(120deg,#fffdf9 40%,#f2ecdf)
}

.world-grid {
  display:grid;
  grid-template-columns:42% 58%;
  gap:6px;
  min-height:605px
}

.world-copy {
  padding:51px 0 42px 62px;
  display:flex;
  justify-content:center;
  flex-direction:column
}

.world-copy h2 {
  max-width:550px
}

.world-path {
  margin:21px 0 0;
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:8px 18px;
  align-items:center;
  width:max-content;
  max-width:100%
}

.path-step {
  font-size:11px;
  color:#68583f;
  border:1px solid #decfb5;
  background:#fffdf7;
  border-radius:6px;
  padding:8px 12px;
  white-space:nowrap
}

.path-step:last-child {
  background:#e3d4b7;
  border-color:#bf9f68
}

.path-arr {
  color:#a17d3d
}

.world-graphic {
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}

.orbit {
  position:absolute;
  border-radius:50%;
  border:1px solid #d5bd8e;
  width:500px;
  height:500px;
  opacity:.5;
  transform:rotate(-18deg)
}

.orbit:nth-child(2) {
  width:620px;
  height:340px;
  transform:rotate(34deg)
}

.globe {
  height:430px;
  width:430px;
  border:1px solid #ccb381;
  border-radius:50%;
  background:radial-gradient(circle at 28% 25%,#fffdf8 0%,#e6d7bd 58%,#b79965 100%);
  box-shadow:inset -20px -16px 36px #9e824b48,0 28px 42px #81664027;
  position:relative;
  overflow:hidden
}

.globe svg {
  width:100%;
  height:100%
}

.globe-floating {
  position:absolute;
  background:#fffdf8d9;
  border:1px solid #d4c3a2;
  box-shadow:0 14px 30px #60482722;
  border-radius:7px;
  padding:11px 15px;
  color:#5c482e;
  font-size:11px;
  font-weight:700
}

.globe-floating.one {
  right:6%;
  top:25%
}

.globe-floating.two {
  left:7%;
  bottom:23%
}

.globe-floating small {
  display:block;
  color:#997a44;
  font-size:9px;
  letter-spacing:.13em;
  margin-bottom:4px
}

/* 03 */
.space-slide {
  background:#faf7f0
}

.space-slide .inner {
  padding:38px 57px 39px
}

.space-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px
}

.space-head .bodycopy {
  max-width:430px;
  margin-bottom:7px
}

.space-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-top:14px
}

.space-card {
  border-radius:11px;
  background:#fffdf9;
  border:1px solid #dcccc0;
  overflow:hidden;
  box-shadow:0 7px 16px #6e553217
}

.space-card-visual {
  height:215px;
  position:relative;
  background:linear-gradient(135deg,#f9efe1,#e4d5be);
  overflow:hidden
}

.space-card-visual img {
  width:100%;
  height:100%;
  object-fit:cover
}

.space-card-img1 {
  background:#d8cbb8
}

.space-card-img1 .gallery-svg {
  width:100%;
  height:100%
}

.space-card-img2 {
  background:linear-gradient(135deg,#e7d0b2,#cab597)
}

.studio-room {
  position:absolute;
  inset:0
}

.studio-room:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(169deg,#e8dac7 0 46%,#ad8e69 46% 100%)
}

.studio-room .floor-lines {
  position:absolute;
  inset:65% 0 0;
  background:repeating-linear-gradient(8deg,transparent 0 28px,#86664c3d 29px 30px)
}

.studio-room .hang {
  position:absolute;
  top:21%;
  height:60%;
  width:33%;
  background:#fffdf6;
  border:9px solid #a67c4c;
  box-shadow:0 7px 12px #674c3533;
  left:12%
}

.studio-room .hang:nth-of-type(2) {
  left:54%;
  width:28%;
  top:27%;
  height:53%
}

.studio-room .hang img {
  height:100%;
  width:100%;
  object-fit:cover
}

.space-card-img3 {
  background:radial-gradient(ellipse at 50% 25%,#fef4df 0,#ddd2be 74%)
}

.island {
  position:absolute;
  bottom:13%;
  left:21%;
  width:64%;
  height:53%;
  background:#b78a55;
  clip-path:polygon(0 29%,58% 0,100% 39%,44% 73%);
  box-shadow:0 17px 30px #72562d33
}

.island:after {
  content:"";
  position:absolute;
  inset:35% 0 0;
  background:#8a6d51;
  clip-path:polygon(0 0,44% 43%,100% 0,100% 33%,44% 86%,0 46%)
}

.mini-building {
  position:absolute;
  left:34%;
  top:19%;
  width:43%;
  height:51%;
  background:#f4e6d1;
  clip-path:polygon(0 24%,56% 0,100% 21%,100% 92%,56% 100%,0 76%);
  box-shadow:0 5px 22px #63513e33
}

.mini-building img {
  position:absolute;
  left:56%;
  top:18%;
  width:29%;
  height:45%;
  object-fit:cover;
  border:3px solid #a77a45
}

.space-card-body {
  padding:18px 18px 20px
}

.space-card-body h3 {
  font-size:24px;
  margin-bottom:7px
}

.space-card-body p {
  font-size:13px;
  line-height:1.55;
  color:#7a6d5c;
  margin:0 0 17px
}

.space-card-body .microtag {
  color:#916f3c;
  font-weight:800;
  letter-spacing:.1em;
  font-size:9px
}

/* 04 */
.explore-slide {
  background:#e9dfd0
}

.immersive-intro {
  position:absolute;
  z-index:3;
  top:31px;
  left:42px;
  background:#fffdf9ed;
  max-width:480px;
  border:1px solid #d9c7aa;
  border-radius:9px;
  padding:20px 23px 18px;
  box-shadow:0 13px 33px #2e1e1378
}

.immersive-intro h2 {
  font-size:42px;
  line-height:1.05;
  margin-bottom:8px
}

.immersive-intro .bodycopy {
  font-size:12px;
  margin-bottom:0;
  line-height:1.45
}

.immersive-scene {
  position:absolute;
  inset:0
}

.immersive-scene .gallery-svg {
  height:100%;
  width:100%
}

.viewer-toolbar {
  position:absolute;
  bottom:22px;
  left:25px;
  right:25px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  z-index:3
}

.viewer-tools {
  display:flex;
  align-items:center;
  gap:8px
}

.viewer-tool {
  background:#f9f3e6ee;
  border:1px solid #d5bea1;
  border-radius:100px;
  padding:12px 15px;
  color:#4b3827;
  font-size:11px;
  font-weight:700;
  box-shadow:0 8px 20px #6d53343d
}

.viewer-coll {
  background:#f9f3e6ee;
  border:1px solid #d5bea1;
  border-radius:100px;
  padding:12px 17px;
  color:#4b3827;
  font-size:11px;
  font-weight:700;
  box-shadow:0 8px 20px #6d53343d
}

.viewer-head {
  position:absolute;
  top:11px;
  right:24px;
  z-index:3;
  text-align:center;
  background:#f9f5ece8;
  border-radius:5px;
  padding:10px 16px;
  border:1px solid #dcc6a5
}

.viewer-head small {
  font-size:8px;
  letter-spacing:.23em;
  font-weight:700;
  color:#9a793c
}

.viewer-head strong {
  display:block;
  font:normal 24px Georgia,serif;
  letter-spacing:-.035em
}

/* 05 */
.workflow-slide {
  background:#f6f1e8
}

.workflow-slide .inner {
  padding:30px 43px 36px
}

.workflow-top {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:end;
  margin-bottom:14px
}

.workflow-top .bodycopy {
  font-size:14px;
  max-width:470px;
  line-height:1.5
}

.merchant-panel {
  height:370px;
  background:#fffcf7;
  border:1px solid #dfcfae;
  border-radius:12px;
  padding:17px;
  box-shadow:0 10px 25px #59441b13
}

.merchant-steps {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;
  margin-bottom:13px
}

.merchant-step {
  background:#f0eadf;
  border-radius:5px;
  padding:10px 7px 8px;
  text-align:center;
  font-size:10px;
  color:#6b5a42;
  position:relative;
  min-height:49px
}

.merchant-step b {
  display:inline-grid;
  place-items:center;
  position:absolute;
  left:5px;
  top:4px;
  width:14px;
  height:14px;
  border-radius:100%;
  font-size:8px;
  border:1px solid #bfa16b;
  color:#97723b
}

.merchant-step.current {
  background:#d4c7ad;
  color:#413324
}

.merchant-step span {
  display:block;
  margin-top:11px;
  font-weight:650
}

.merchant-body {
  display:grid;
  grid-template-columns:1fr 1.03fr;
  gap:20px;
  align-items:stretch;
  height:269px
}

.merchant-settings {
  padding:18px 20px;
  border:1px solid #e0d4bf;
  border-radius:8px;
  background:white
}

.merchant-settings h3 {
  font-size:27px;
  margin-bottom:5px
}

.merchant-settings p {
  font-size:11px;
  color:#806f5a;
  line-height:1.5;
  margin:0 0 15px
}

.formrow {
  display:flex;
  gap:9px;
  align-items:center;
  margin-bottom:11px
}

.faux-input {
  height:37px;
  border-radius:6px;
  border:1px solid #d5c09c;
  background:#fffcf7;
  display:flex;
  align-items:center;
  padding:0 10px;
  color:#624a2d;
  font-size:11px;
  flex:1
}

.dark-mini {
  background:#59452e;
  padding:10px 14px;
  border-radius:6px;
  color:white;
  font-size:11px;
  display:inline-block
}

.merchant-photo-panel {
  background:#f5f0e5;
  border-radius:8px;
  border:1px solid #e1d6c5;
  padding:10px 12px;
  display:grid;
  grid-template-columns:37% 1fr;
  gap:15px
}

.merchant-photo-panel>img {
  width:100%;
  height:100%;
  min-height:198px;
  object-fit:cover;
  border:8px solid #fffaf2;
  box-shadow:0 5px 12px #67513925
}

.product-micro .smallcap {
  margin:12px 0 7px;
  display:block
}

.product-micro h3 {
  font-size:25px;
  margin:0 0 6px
}

.product-micro p {
  font-size:12px;
  line-height:1.45;
  color:#786957;
  margin-bottom:9px
}

.price-sample {
  font:normal 21px Georgia,serif
}

.gold-stamp {
  display:inline-block;
  background:#ece3d1;
  padding:6px 8px;
  border-radius:5px;
  color:#835a23;
  font-size:10px;
  font-weight:700
}

.merchant-summary {
  position:absolute;
  bottom:19px;
  right:42px;
  color:#84735a;
  font-size:10px;
  letter-spacing:.02em
}

/* 06 */
.pricing-slide {
  background:radial-gradient(circle at 88% 8%,#efe4cb,transparent 30%),#fffdf8
}

.pricing-slide .inner {
  padding:40px 34px 26px
}

.fees-layout {
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:36px;
  align-items:start
}

.fees-left {
  max-width:620px
}

.fees-right {
  padding-top:74px
}

.fees-right .bodycopy {
  font-size:15px;
  line-height:1.65;
  max-width:330px;
  color:#6c5b45
}

.fees-heading {
  font:normal clamp(42px,5vw,71px) Georgia,serif;
  letter-spacing:-.05em;
  line-height:.98;
  color:#23170f;
  margin:8px 0 0
}

.fees-heading .accent {
  display:block;
  font-style:italic;
  color:#9a6a27
}

.fees-grid {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px
}

.fee-card {
  border:1px solid #d9c5a0;
  border-radius:11px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,#fffdfa,#f7f1e7);
  min-height:332px;
  display:flex;
  flex-direction:column;
  box-shadow:inset 0 1px 0 #fff
}

.fee-card.dark {
  background:linear-gradient(180deg,#5a4731,#4e3d2a);
  border-color:#73593b;
  color:#fff8eb
}

.fee-card .smallcap {
  font-size:10px;
  letter-spacing:.19em;
  color:#886d44;
  margin-bottom:18px
}

.fee-card.dark .smallcap {
  color:#d8bf8e
}

.fee-price {
  font:normal 57px Georgia,serif;
  letter-spacing:-.08em;
  line-height:.88;
  color:#2d2015;
  margin:8px 0 20px
}

.fee-card.dark .fee-price {
  color:#fff7ea
}

.fee-price small {
  font:normal 17px Arial,sans-serif;
  letter-spacing:-.02em;
  vertical-align:16px
}

.fee-sub {
  font-size:12px;
  color:#8d7657;
  margin-bottom:18px
}

.fee-card.dark .fee-sub {
  color:#d8c7af
}

.fee-title {
  font:600 17px/1.4 Arial,sans-serif;
  color:#241a12;
  margin:0 0 10px
}

.fee-card.dark .fee-title {
  color:#fff7ea
}

.fee-card p {
  font-size:13px;
  line-height:1.55;
  color:#715f49;
  margin:0 0 18px;
  max-width:340px
}

.fee-card.dark p {
  color:#eadbc5
}

.fee-inline {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px;
  color:#7b6442;
  margin-top:auto;
  margin-bottom:20px;
  flex-wrap:wrap
}

.fee-card.dark .fee-inline {
  color:#ead7b7
}

.fee-inline .mini-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  border:1px solid currentColor;
  border-radius:3px;
  font-size:10px;
  line-height:1;
  opacity:.85
}

.fee-inline .arrow {
  opacity:.7
}

.fee-foot {
  border-top:1px solid #d8c7aa;
  padding-top:14px;
  font-size:11px;
  line-height:1.45;
  color:#7c6546
}

.fee-card.dark .fee-foot {
  border-top-color:#8a7456;
  color:#ebdbc5
}

.pricing-disclaimer {
  margin-top:12px;
  font-size:10px;
  line-height:1.35;
  color:#90785a
}

/* 07 */
.demo-slide {
  background:#faf7f1
}

.demo-slide .inner {
  padding:34px 45px
}

.demo-grid {
  display:grid;
  grid-template-columns:40% 60%;
  gap:14px;
  min-height:538px;
  align-items:center
}

.demo-copy h2 {
  font-size:clamp(46px,4vw,65px)
}

.demo-copy .bodycopy {
  font-size:15px;
  max-width:450px
}

.linkline {
  border:1px solid #d7c9b1;
  padding:13px 14px;
  font-size:13px;
  font-weight:750;
  color:#835923;
  border-radius:6px;
  background:white;
  max-width:420px;
  margin:20px 0 14px
}

.demo-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.demo-info {
  margin-top:19px;
  font-size:10px;
  color:#8d7a61;
  line-height:1.5;
  max-width:445px
}

.demo-mock {
  background:#ebe2d2;
  border:1px solid #ceba94;
  border-radius:11px;
  box-shadow:0 17px 37px #5e493225;
  overflow:hidden;
  height:443px;
  margin-right:10px;
  position:relative
}

.mock-header {
  height:47px;
  background:#f4f0e7;
  border-bottom:1px solid #cdbda4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  color:#544434
}

.mock-header span {
  font-size:8px;
  letter-spacing:.18em;
  font-weight:700
}

.mock-header strong {
  font:normal 18px Georgia,serif
}

.mock-header .bag {
  font-size:19px
}

.demo-frame {
  height:343px;
  position:relative;
  overflow:hidden;
  background:#ebdfca
}

.demo-frame .gallery-svg {
  height:100%;
  width:100%
}

.demo-view {
  position:absolute;
  inset:0;
  display:none
}

.demo-view.on {
  display:block
}

.demo-view[data-view="select"] .select-overlay {
  display:flex
}

.select-overlay {
  position:absolute;
  inset:0;
  background:#20171265;
  align-items:center;
  justify-content:center;
  display:flex
}

.item-preview {
  display:flex;
  align-items:center;
  gap:12px;
  width:min(90%,490px);
  height:78%;
  background:#fffaf1;
  border:1px solid #d3bb96;
  border-radius:9px;
  padding:15px
}

.item-preview img {
  height:100%;
  width:38%;
  object-fit:cover;
  border:4px solid #f5e9d5
}

.item-preview h4 {
  font:normal 25px Georgia,serif;
  margin:0 0 9px
}

.item-preview p {
  font-size:11px;
  color:#6a5843;
  line-height:1.5
}

.item-preview .gold-stamp {
  font-size:9px
}

.details-view {
  background:#2b211a88;
  display:flex;
  align-items:center;
  justify-content:center
}

.detail-modal {
  width:94%;
  height:90%;
  background:#f5eddf;
  border-radius:7px;
  display:grid;
  grid-template-columns:51% 49%;
  overflow:hidden;
  box-shadow:0 12px 35px #21140e7a
}

.detail-left {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#eae0d0
}

.detail-left img {
  height:80%;
  max-width:72%;
  object-fit:contain;
  border:8px solid #fff9ef;
  box-shadow:0 10px 25px #644d3766
}

.detail-left small {
  font-size:10px;
  color:#8e785b
}

.detail-right {
  padding:19px 16px
}

.detail-right span {
  font-size:9px;
  letter-spacing:.1em;
  color:#8d6c3e
}

.detail-right h4 {
  font:normal 29px Georgia,serif;
  margin:8px 0
}

.detail-right p {
  font-size:10px;
  line-height:1.55;
  color:#74614b;
  margin:0 0 13px
}

.detail-right .detail-price {
  font:normal 17px Georgia,serif;
  display:block;
  margin-bottom:10px
}

.detail-right .detail-line {
  font-size:10px;
  padding:5px 0;
  border-top:1px solid #d3c3aa;
  display:flex;
  justify-content:space-between
}

.checkout-view {
  background:linear-gradient(120deg,#faf5e9,#d4bd99);
  display:flex;
  align-items:center;
  justify-content:center
}

.checkout-card {
  background:#fffdf7;
  border:1px solid #d5c09d;
  border-radius:8px;
  width:84%;
  padding:18px;
  display:flex;
  gap:18px;
  align-items:center;
  box-shadow:0 15px 35px #58402a3e
}

.checkout-card img {
  width:38%;
  height:225px;
  object-fit:cover
}

.checkout-card h4 {
  font:normal 30px Georgia,serif;
  margin:9px 0
}

.checkout-card p {
  font-size:12px;
  line-height:1.55;
  color:#6b593e
}

.checkout-card .sample-tag {
  font-size:10px;
  border:1px solid #d5c09d;
  border-radius:6px;
  padding:8px 10px;
  background:#f4e9d5;
  display:inline-block
}

.demo-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:52px;
  background:#f6f2e9;
  border-top:1px solid #cbb89b;
  gap:0
}

.demo-tab {
  border:0;
  border-right:1px solid #dbceb6;
  background:transparent;
  color:#6f5c44;
  font-size:11px;
  font-weight:700
}

.demo-tab.on {
  background:#d9c5a4;
  color:#3b2f21
}

.demo-tab span {
  display:block;
  font-size:8px;
  letter-spacing:.07em;
  font-weight:700;
  opacity:.65;
  margin-bottom:4px
}

/* 08 */
.end-slide {
  background:linear-gradient(113deg,#fffdf8 0 50%,#ebdfcc)
}

.end-grid {
  display:grid;
  grid-template-columns:56% 44%;
  min-height:605px
}

.end-copy {
  padding:55px 25px 52px 62px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.end-copy h2 {
  font-size:clamp(58px,5.2vw,82px)
}

.end-copy .bodycopy {
  max-width:500px
}

.end-links {
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  margin-top:13px
}

.end-visual {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}

.end-visual .gallery-visual {
  width:94%;
  height:360px;
  transform:rotate(2deg)
}

.end-badge {
  position:absolute;
  bottom:18%;
  left:2%;
  z-index:3;
  background:#fffaf1;
  border:1px solid #d0ba98;
  padding:11px 15px;
  border-radius:7px;
  box-shadow:0 7px 19px #745f3b31;
  font-size:11px;
  color:#755533;
  font-weight:800;
  max-width:240px
}

.end-small {
  font-size:10px;
  color:#8a775b;
  margin-top:26px
}

/* fixed nav */
.foot-controls {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-shrink:0
}

.foot-controls .leftfoot,.foot-controls .rightfoot {
  display:flex;
  align-items:center;
  gap:10px
}

.foot-btn {
  font-weight:750;
  display:inline-flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  padding:11px 15px;
  border-radius:7px;
  border:1px solid #cfbea1;
  background:#fffdf8;
  color:#5b442a;
  font-size:12px;
  min-width:102px
}

.foot-btn.primary {
  border-color:#805516;
  background:#805516;
  color:#fff
}

.foot-btn:disabled {
  opacity:.4;
  cursor:not-allowed
}

.counter {
  font:normal 17px Georgia,serif;
  letter-spacing:.08em;
  color:#8b6a34;
  padding:0 8px
}

.dots {
  display:flex;
  gap:6px;
  align-items:center
}

.dot {
  width:14px;
  height:4px;
  background:#d8c8a9;
  border-radius:10px;
  border:0;
  padding:0;
  cursor:pointer
}

.dot.on {
  background:#815711;
  width:33px
}

.footer-note {
  font-size:10px;
  color:#907d62;
  line-height:1.4;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px
}

.modal[hidden] {
  display:none
}

.modal {
  position:fixed;
  inset:0;
  z-index:1000;
  background:#2f261ee6;
  display:grid;
  place-items:center;
  padding:25px
}

.modal-panel {
  background:#fbf8f1;
  border:1px solid #dbc8a8;
  border-radius:13px;
  padding:30px;
  max-width:940px;
  width:100%;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 24px 80px #0007
}

.modal-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.modal-top h2 {
  font-size:34px;
  margin:0 0 20px
}

.close-modal {
  background:#fff;
  border:1px solid #d5c4a5;
  padding:8px 12px;
  border-radius:7px;
  color:#423528
}

.overview-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px
}

.overview-card {
  border:1px solid #d9c8aa;
  background:white;
  border-radius:8px;
  padding:23px 13px;
  text-align:left;
  color:#5f4a30;
  min-height:95px
}

.overview-card span {
  display:block;
  color:#ae873d;
  font-size:12px;
  letter-spacing:.12em;
  margin-bottom:9px
}

.overview-card strong {
  font:normal 20px Georgia,serif;
  line-height:1.15
}

.hidden-desc {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}

@media(max-width:1200px) {
  .deck {
    padding:0 17px 10px
  }
  .mast-center {
    display:none
  }
  .step-btn {
    gap:4px
  }
  .step-name {
    font-size:10px
  }
  .hero-copy {
    padding-left:48px
  }
  .world-copy {
    padding-left:48px
  }
  .inner {
    padding:35px 45px
  }
  .space-slide .inner {
    padding:35px
  }
  .space-card-visual {
    height:185px
  }
  .pricing-slide .inner {
    padding:36px 28px
  }
  .fees-layout {
    grid-template-columns:1fr .85fr;
    gap:24px
  }
  .fees-right {
    padding-top:66px
  }
}

@media(max-width:850px) {
  .step-nav {
    display:flex;
    overflow-x:auto;
    padding-bottom:7px;
    scroll-snap-type:x mandatory
  }
  .step-btn {
    min-width:120px;
    flex:0 0 120px;
    scroll-snap-align:start
  }
  .masthead {
    height:70px
  }
  .hero-grid,.world-grid,.end-grid {
    grid-template-columns:1fr
  }
  .stage,.slide {
    min-height:auto
  }
  .hero-copy,.world-copy,.end-copy {
    padding:40px 33px 5px;
    min-height:0
  }
  .hero-copy h1 {
    font-size:64px
  }
  .hero-image {
    padding:15px 24px 30px
  }
  .hero-image .gallery-visual {
    height:330px
  }
  .world-graphic {
    min-height:420px
  }
  .space-cards {
    grid-template-columns:repeat(3,1fr)
  }
  .space-card-visual {
    height:155px
  }
  .space-card-body h3 {
    font-size:20px
  }
  .workflow-slide .inner {
    padding:28px
  }
  .merchant-panel {
    height:390px
  }
  .merchant-body {
    height:285px
  }
  .fees-layout {
    grid-template-columns:1fr
  }
  .fees-right {
    padding-top:0
  }
  .fees-right .bodycopy {
    max-width:100%
  }
  .fees-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .fee-card {
    min-height:0
  }
  .demo-grid {
    grid-template-columns:1fr
  }
  .demo-mock {
    margin:0 0 17px;
    height:380px
  }
  .demo-frame {
    height:280px
  }
  .demo-copy .bodycopy {
    max-width:100%
  }
  .end-visual {
    padding:10px 28px 38px
  }
  .end-badge {
    left:8%;
    bottom:8%
  }
}

@media(max-width:600px) {
  .deck {
    padding:0 9px 10px
  }
  .masthead {
    height:65px
  }
  .brand-mark {
    width:37px;
    height:38px
  }
  .brand-word {
    font-size:11px;
    letter-spacing:.14em
  }
  .brand-caption {
    font-size:9px
  }
  .pill {
    display:none
  }
  .watch {
    padding:9px 10px;
    font-size:10px
  }
  .step-nav {
    margin:8px 0
  }
  .step-btn {
    min-width:106px;
    flex-basis:106px;
    height:49px
  }
  .step-name {
    font-size:9px;
    margin-top:12px
  }
  .step-number {
    width:16px;
    height:16px;
    font-size:9px
  }
  .stage {
    border-radius:9px
  }
  .slide .inner {
    min-height:0;
    padding:28px 20px
  }
  .hero-copy,.world-copy,.end-copy {
    padding:31px 23px 0
  }
  .hero-copy h1 {
    font-size:52px
  }
  .hero-copy .bodycopy,.world-copy .bodycopy,.end-copy .bodycopy {
    font-size:15px
  }
  .hero-kickers {
    margin-top:16px
  }
  .hero-image {
    padding:13px 10px 23px
  }
  .hero-image .gallery-visual {
    height:248px
  }
  .scene-badge {
    font-size:8px;
    bottom:9px;
    left:9px;
    padding:6px 8px
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:15px
  }
  h2 {
    font-size:42px
  }
  .world-graphic {
    min-height:310px
  }
  .globe {
    height:270px;
    width:270px
  }
  .orbit {
    width:320px;
    height:320px
  }
  .orbit:nth-child(2) {
    width:370px;
    height:220px
  }
  .globe-floating {
    padding:8px 9px;
    font-size:9px
  }
  .globe-floating.one {
    right:1%;
    top:18%
  }
  .globe-floating.two {
    left:3%;
    bottom:14%
  }
  .world-path {
    gap:7px 9px
  }
  .path-step {
    font-size:9px;
    padding:6px 8px
  }
  .space-head {
    display:block
  }
  .space-head .bodycopy {
    font-size:14px
  }
  .space-cards {
    grid-template-columns:1fr;
    margin-top:20px
  }
  .space-card {
    display:grid;
    grid-template-columns:42% 58%;
    min-height:166px
  }
  .space-card-visual {
    height:100%
  }
  .space-card-body {
    padding:16px 13px
  }
  .space-card-body h3 {
    font-size:20px
  }
  .space-card-body p {
    font-size:11px;
    margin-bottom:6px
  }
  .space-card-body .microtag {
    font-size:8px
  }
  .explore-slide {
    height:605px
  }
  .immersive-intro {
    left:10px;
    right:10px;
    top:12px;
    max-width:none;
    padding:11px 13px
  }
  .immersive-intro h2 {
    font-size:28px;
    margin-bottom:5px
  }
  .immersive-intro .bodycopy {
    font-size:10px;
    line-height:1.3
  }
  .viewer-head {
    display:none
  }
  .viewer-toolbar {
    bottom:12px;
    left:9px;
    right:9px
  }
  .viewer-tools {
    gap:4px
  }
  .viewer-tool,.viewer-coll {
    font-size:9px;
    padding:10px 8px
  }
  .workflow-slide .inner {
    padding:26px 14px
  }
  .workflow-top {
    display:block
  }
  .workflow-top .bodycopy {
    font-size:13px
  }
  .merchant-panel {
    height:auto;
    padding:9px
  }
  .merchant-steps {
    grid-template-columns:repeat(3,1fr);
    gap:3px
  }
  .merchant-step {
    min-height:40px;
    font-size:9px;
    padding:4px
  }
  .merchant-step span {
    margin-top:10px
  }
  .merchant-body {
    display:flex;
    flex-direction:column;
    height:auto;
    gap:10px
  }
  .merchant-settings {
    padding:12px
  }
  .merchant-settings h3 {
    font-size:24px
  }
  .merchant-photo-panel {
    height:210px
  }
  .merchant-summary {
    position:static;
    margin-top:10px;
    font-size:9px
  }
  .pricing-slide .inner {
    padding:28px 14px 20px
  }
  .fees-layout {
    display:block
  }
  .fees-right {
    padding-top:16px
  }
  .fees-right .bodycopy {
    font-size:13px;
    max-width:none
  }
  .fees-heading {
    font-size:52px
  }
  .fees-grid {
    grid-template-columns:1fr;
    gap:10px;
    margin-top:16px
  }
  .fee-card {
    padding:14px 12px 13px;
    min-height:0
  }
  .fee-card .smallcap {
    font-size:9px
  }
  .fee-price {
    font-size:44px
  }
  .fee-sub {
    font-size:11px;
    margin-bottom:12px
  }
  .fee-title {
    font-size:16px
  }
  .fee-card p {
    font-size:11px;
    margin-bottom:12px
  }
  .fee-inline {
    font-size:10px;
    gap:8px;
    margin-bottom:12px
  }
  .fee-foot {
    font-size:9px
  }
  .demo-slide .inner {
    padding:25px 12px
  }
  .demo-copy h2 {
    font-size:44px
  }
  .demo-copy .bodycopy {
    font-size:13px
  }
  .demo-mock {
    height:347px
  }
  .mock-header {
    height:46px;
    padding:0 9px
  }
  .mock-header strong {
    font-size:14px
  }
  .demo-frame {
    height:251px
  }
  .demo-tab {
    font-size:9px
  }
  .item-preview h4 {
    font-size:18px
  }
  .item-preview p {
    font-size:9px
  }
  .detail-right h4 {
    font-size:20px
  }
  .detail-right p {
    font-size:9px
  }
  .detail-left img {
    height:70%
  }
  .detail-modal {
    width:97%;
    height:92%
  }
  .detail-right {
    padding:12px
  }
  .checkout-card {
    width:95%;
    padding:11px;
    gap:10px
  }
  .checkout-card img {
    height:175px
  }
  .checkout-card h4 {
    font-size:22px
  }
  .checkout-card p {
    font-size:10px
  }
  .end-visual {
    padding:20px 8px 45px
  }
  .end-visual .gallery-visual {
    height:260px
  }
  .end-badge {
    bottom:10%;
    left:3%;
    font-size:9px;
    padding:7px
  }
  .foot-controls {
    height:66px;
    gap:6px
  }
  .foot-controls .leftfoot,.foot-controls .rightfoot {
    gap:5px
  }
  .foot-btn {
    min-width:0;
    padding:11px 9px;
    font-size:10px
  }
  .counter {
    font-size:11px;
    padding:0
  }
  .dots {
    display:none
  }
  .footer-note {
    font-size:9px
  }
  .overview-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .modal-panel {
    padding:20px
  }
  .modal-top h2 {
    font-size:26px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important
  }
}

@media print {
  body {
    background:white
  }
  .deck {
    display:block;
    padding:0
  }
  .masthead,.step-nav,.foot-controls,.footer-note,.modal {
    display:none!important
  }
  .stage {
    box-shadow:none;
    border:0;
    overflow:visible
  }
  .slide,.slide.active {
    display:block!important;
    min-height:0;
    break-after:page;
    page-break-after:always;
    animation:none
  }
  .slide {
    height:100vh
  }
  .slide .inner {
    height:100%;
    min-height:0
  }
}

/* Slide 05: contain the merchant workflow preview within its card boundaries. */
.workflow-slide .merchant-body  {
  grid-template-rows: minmax(0,1fr);
}

.workflow-slide .merchant-settings,
.workflow-slide .merchant-photo-panel  {
  min-width:0;
  min-height:0;
}

.workflow-slide .merchant-photo-panel  {
  grid-template-columns:minmax(0,37%) minmax(0,1fr);
  overflow:hidden;
}

.workflow-slide .merchant-photo-panel > img  {
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  object-fit:cover;
  object-position:center;
}

.workflow-slide .product-micro  {
  min-width:0;
  min-height:0;
}

.workflow-slide .product-micro .smallcap  {
  margin-top:4px;
}

.workflow-slide .merchant-summary  {
  line-height:1.35;
}

@media (max-width:850px)  {
  .workflow-slide .workflow-top  {
    display:block;
  }
  .workflow-slide .workflow-top .bodycopy  {
    max-width:660px;
    margin-top:10px;
  }
  .workflow-slide .merchant-panel  {
    height:auto;
  }
  .workflow-slide .merchant-body  {
    height:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:12px;
  }
  .workflow-slide .merchant-settings  {
    padding:16px 18px;
  }
  .workflow-slide .merchant-photo-panel  {
    min-height:240px;
    height:240px;
    grid-template-columns:minmax(0,36%) minmax(0,1fr);
  }
  .workflow-slide .merchant-summary  {
    position:static;
    text-align:right;
    margin-top:9px;
  }
}

@media (max-width:600px)  {
  .workflow-slide .merchant-steps  {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .workflow-slide .merchant-settings  {
    padding:12px;
  }
  .workflow-slide .merchant-photo-panel  {
    min-height:230px;
    height:auto;
    grid-template-columns:minmax(0,36%) minmax(0,1fr);
    align-items:stretch;
  }
  .workflow-slide .merchant-photo-panel > img  {
    height:100%;
    max-height:100%;
  }
  .workflow-slide .merchant-summary  {
    text-align:left;
    margin-top:10px;
  }
}

.brand-mark {
  object-fit:contain;
  object-position:center;
  flex:none
}

/* Preserve the full transparent emblem at every breakpoint. */
.brand-mark{object-fit:contain;object-position:center;flex-shrink:0;aspect-ratio:400/340;height:auto;}