/* The small Advanced ("Tray") menu and website windows drawn by tray-mock.js. Everything is sized in container units, so one drawing fits any phone. */
.tm-host { position: absolute; inset: 0; display: block; }
.tm { container-type: inline-size; position: absolute; inset: 0; background: var(--bg); color: var(--ink); font-family: var(--bf); overflow: hidden; line-height: 1.25; text-align: start; }
.tm *, .tm *::before { box-sizing: border-box; margin: 0; padding: 0; }
.tm svg { display: block; width: 1em; height: 1em; }
.tm h3, .tm h4, .tm h5 { font-family: var(--hf); font-weight: var(--hw); font-style: var(--hs); }

.tm-head { background: var(--c1); color: var(--on); padding: 8cqw 5cqw 5.5cqw; text-align: center; display: grid; justify-items: center; gap: 1.4cqw; position: relative; }
.tm-head.soft { background: var(--bg); color: var(--ink); border-bottom: .5cqw solid var(--line); }
.tm-head h3 { font-size: 7.2cqw; line-height: 1.1; }
.tm-head small { font-size: 3.2cqw; opacity: .85; }
.tm-lang { position: absolute; top: 3.4cqw; inset-inline-end: 3.4cqw; font-size: 2.8cqw; font-weight: 600; padding: 1.1cqw 2.6cqw; border-radius: 9cqw; background: rgba(255, 255, 255, .2); }
.tm-head.soft .tm-lang { background: var(--c1); color: var(--on); }
.tm-links { display: flex; gap: 2cqw; margin-top: 1.4cqw; }
.tm-links i { font-style: normal; font-size: 2.8cqw; padding: 1.5cqw 3cqw; border-radius: 9cqw; background: rgba(255, 255, 255, .18); }
.tm-head.soft .tm-links i { background: var(--card); box-shadow: inset 0 0 0 .4cqw var(--line); }

.tm-logo { width: 13cqw; height: 13cqw; display: grid; place-items: center; font-size: 6.8cqw; margin-bottom: .6cqw; }
.tm-lr { border-radius: 50%; box-shadow: inset 0 0 0 .7cqw currentColor; }
.tm-ls { border-radius: 50%; background: var(--on); color: var(--c1); }
.tm-head.soft .tm-ls { background: var(--c1); color: var(--on); }
.tm-li { border-radius: calc(var(--r) * .9); background: var(--on); color: var(--c1); font: var(--hs) var(--hw) 6cqw/1 var(--hf); letter-spacing: -.02em; }
.tm-head.soft .tm-li { background: var(--c1); color: var(--on); }

.tm-body { padding: 3.4cqw 3.6cqw 0; display: grid; gap: 2.6cqw; }
.tm-wel { background: var(--card); border: .4cqw solid var(--line); border-radius: var(--r); padding: 3cqw; display: grid; gap: 1.4cqw; }
.tm-wr { display: flex; justify-content: space-between; align-items: baseline; font-size: 3.6cqw; } .tm-wr i { font-style: normal; font-size: 2.8cqw; color: var(--mut); text-decoration: underline; }
.tm-wel p { font-size: 3.2cqw; color: var(--mut); }
.tm-wi { display: flex; align-items: center; gap: 2.4cqw; background: var(--bg); border-radius: calc(var(--r) * .8); padding: 2cqw; }
.tm-wi b { flex: 1; font-size: 3.5cqw; display: grid; gap: .4cqw; } .tm-wi small { color: var(--c2); font-size: 3.1cqw; }
.tm-wi .tm-ph { width: 9cqw; height: 9cqw; border-radius: calc(var(--r) * .6); }
.tm-btn { background: var(--c2); color: var(--on2); font-size: 3cqw; font-weight: 700; padding: 1.8cqw 3.4cqw; border-radius: 9cqw; }
.tm-search { display: flex; align-items: center; gap: 2cqw; background: var(--card); border: .4cqw solid var(--line); border-radius: calc(var(--r) * .9); padding: 2.4cqw 3cqw; font-size: 3.3cqw; color: var(--mut); }
.tm-search svg { font-size: 4cqw; }
.tm-body h4 { font-size: 5cqw; margin-top: .6cqw; }
.tm-it { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; background: var(--card); border: .4cqw solid var(--line); border-radius: var(--r); padding: 3cqw; }
.tm-it > div { display: grid; gap: .8cqw; min-width: 0; justify-items: start; }
.tm-it b { font-size: 4cqw; font-weight: 700; } .tm-it p { font-size: 3cqw; color: var(--mut); }
.tm-it em { font-style: normal; font-weight: 700; font-size: 3.5cqw; color: var(--c2); }
.tm-it u { text-decoration: none; font-size: 2.6cqw; padding: .6cqw 2cqw; border-radius: 9cqw; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 .3cqw var(--line); }
.tm-ph { display: block; width: 17cqw; height: 17cqw; border-radius: calc(var(--r) * .8); flex: none; position: relative; overflow: hidden; }
.tm-ph::after { content: ''; position: absolute; width: 60%; height: 60%; border-radius: 50%; inset-inline-end: -12%; bottom: -14%; background: rgba(255, 255, 255, .28); }
.tm-p0 { background: var(--ph0); } .tm-p1 { background: var(--ph1); } .tm-p2 { background: var(--ph2); } .tm-p3 { background: var(--ph3); }

.tm-tray { position: absolute; inset-inline: 3.4cqw; bottom: 3.4cqw; height: 13.4cqw; border-radius: 9cqw; background: var(--c1); color: var(--on); display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .28); }
.tm-sr { width: 10cqw; height: 10cqw; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: 4.6cqw; flex: none; }
.tm-tc { flex: 1; border-radius: 7cqw; height: 10cqw; background: rgba(255, 255, 255, .1); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 3.6cqw; position: relative; }
.tm-tc b { font-size: 3.6cqw; } .tm-tc i { font-style: normal; font-size: 2.6cqw; opacity: .7; }
.tm-tc s { position: absolute; bottom: 1cqw; inset-inline: 0; display: flex; justify-content: center; gap: .9cqw; text-decoration: none; }
.tm-tc s s { position: static; width: 1cqw; height: 1cqw; border-radius: 50%; background: currentColor; opacity: .4; } .tm-tc s s:first-child { width: 3.6cqw; border-radius: 1cqw; opacity: .9; }

/* cart and tracking sheets */
.tm-plain { background: var(--bg); }
.tm-sheet { position: absolute; inset: 14cqw 0 0 0; background: var(--card); border-radius: 6cqw 6cqw 0 0; padding: 5cqw 6cqw; display: grid; align-content: start; gap: 3cqw; box-shadow: 0 -2cqw 6cqw rgba(0, 0, 0, .12); }
.tm-grab { width: 11cqw; height: 1.2cqw; border-radius: 2cqw; background: var(--line); justify-self: center; }
.tm-sheet h3 { font-size: 7cqw; margin-top: 1cqw; }
.tm-lines { display: grid; gap: 2.6cqw; font-size: 3.9cqw; padding-bottom: 3cqw; border-bottom: .4cqw dashed var(--line); }
.tm-lines div { display: flex; justify-content: space-between; } .tm-lines em { font-style: normal; font-family: 'IBM Plex Mono', monospace; }
.tm-tot { display: flex; justify-content: space-between; align-items: baseline; font-size: 3.8cqw; } .tm-tot b { font: 600 8cqw 'IBM Plex Mono', monospace; }
.tm-sheet h5 { font-size: 3.6cqw; color: var(--mut); margin-top: 2cqw; font-weight: 600; }
.tm-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.tm-pay span { text-align: center; font-size: 3.5cqw; font-weight: 600; padding: 3cqw 1cqw; border-radius: calc(var(--r) * .9); box-shadow: inset 0 0 0 .5cqw var(--line); }
.tm-pay .on { box-shadow: inset 0 0 0 .8cqw var(--c1); background: var(--bg); }
.tm-go { margin-top: 3cqw; background: var(--c2); color: var(--on2); text-align: center; font-weight: 700; font-size: 4cqw; padding: 4cqw; border-radius: 9cqw; }
.tm-trk small { font: 500 3cqw 'IBM Plex Mono', monospace; color: var(--mut); margin-top: 1cqw; } .tm-trk h3 { font-size: 7.6cqw; margin: 0 0 4cqw; }
.tm-trk ul { list-style: none; display: grid; gap: 0; } .tm-trk li { display: flex; align-items: center; gap: 3.4cqw; padding: 3.4cqw 0; font-size: 4cqw; color: var(--mut); }
.tm-trk li i { width: 6cqw; height: 6cqw; border-radius: 50%; box-shadow: inset 0 0 0 .5cqw var(--line); flex: none; }
.tm-trk li.done { color: var(--ink); } .tm-trk li.done i { background: var(--c1); box-shadow: none; }
.tm-trk li.now { color: var(--ink); font-weight: 700; } .tm-trk li.now i { background: var(--c2); box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--c2) 25%, transparent); }
.tm-call { margin-top: 5cqw; background: var(--bg); border-radius: var(--r); padding: 3.4cqw; font-size: 3.3cqw; color: var(--mut); line-height: 1.5; }

/* the brand gallery: four phones, an even row on a laptop, a swipe row on a phone (buttons sit above it, close to the heading) */
.brands-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 26px; }
.brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); justify-items: center; max-width: 1040px; margin: 0 auto; }
.bp { width: 100%; max-width: 236px; }
.bp .phone { position: relative; width: 100%; height: auto; aspect-ratio: 196 / 400; border-radius: 12% / 6%; padding: 4%; }
.bp .phone .scr { border-radius: 9.5% / 4.8%; }
@media (max-width: 860px) {
  .brands { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; max-width: none; justify-content: flex-start; padding: 4px clamp(20px, 4vw, 48px) 14px; margin-inline: calc(clamp(20px, 4vw, 48px) * -1); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .brands::-webkit-scrollbar { display: none; }
  .bp { flex: 0 0 min(58vw, 230px); scroll-snap-align: center; }
}

/* website windows (the website-creator page) */
.sm { background: var(--bg); color: var(--ink); font-family: var(--bf); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 40px -24px rgba(14, 47, 51, .45), 0 0 0 1px rgba(14, 47, 51, .12); container-type: inline-size; aspect-ratio: 16 / 11; position: relative; line-height: 1.25; }
.sm *, .sm *::before { box-sizing: border-box; margin: 0; padding: 0; }
.sm h3 { font-family: var(--hf); font-weight: var(--hw); font-style: var(--hs); }
.sm-bar { display: flex; gap: 1.2cqw; padding: 2cqw 2.6cqw; background: rgba(128, 128, 128, .14); } .sm-bar i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(128, 128, 128, .45); }
.sm-nav { display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 4cqw; font-size: 3.4cqw; } .sm-nav b { font-family: var(--hf); font-weight: var(--hw); font-style: var(--hs); }
.sm-nav span { display: flex; gap: 2cqw; } .sm-nav span i { width: 7cqw; height: 1cqw; border-radius: 1cqw; background: var(--mut); opacity: .5; }
.sm-nav u, .sm-hero u { text-decoration: none; background: var(--c2); color: var(--on2); font-size: 2.8cqw; font-weight: 700; padding: 1.4cqw 3.4cqw; border-radius: calc(var(--r) * 1.4); width: fit-content; }
.sm-hero { padding: 5cqw 4cqw 4cqw; display: grid; gap: 1.8cqw; } .sm-hero h3 { font-size: 7.4cqw; line-height: 1.05; } .sm-hero p, .sm-hero small { font-size: 3cqw; color: var(--mut); }
.sm-hero.c { justify-items: center; text-align: center; background: var(--c1); color: var(--on); } .sm-hero.c p { color: var(--on); opacity: .8; }
.sm-hero.e { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 4cqw; } .sm-hero.e > div { display: grid; gap: 1.8cqw; } .sm-hero .big { width: 100%; aspect-ratio: 1; border-radius: var(--r); }
.sm-hero.n { background: #0d0d0d; color: #f3ece0; text-align: center; justify-items: center; } .sm-hero.n hr { width: 12cqw; border: 0; border-top: .4cqw solid var(--c2); } .sm-hero.n p, .sm-hero.n small { color: #b8ad9a; } .sm-hero.n h3 { font-size: 9cqw; letter-spacing: .06em; text-transform: uppercase; }
.sm-hero.ph { position: relative; padding: 0; height: 30cqw; align-items: end; } .sm-hero.ph .cover { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; } .sm-hero.ph > div { position: relative; padding: 4cqw; display: grid; gap: 1.6cqw; color: var(--on); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); } .sm-hero.ph h3 { color: #fff; }
.sm-hero.w { background: var(--c1); color: var(--on); padding-bottom: 9cqw; position: relative; } .sm-hero.w p { color: var(--on); opacity: .8; } .sm-hero.w svg { position: absolute; bottom: -.4cqw; left: 0; width: 100%; height: 6cqw; fill: var(--bg); }
.sm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; padding: 3cqw 4cqw; } .sm-noir .sm-row, .sm-hero.n + .sm-row { background: #0d0d0d; }
.sm-c { background: var(--card); border-radius: var(--r); padding: 2cqw; display: grid; gap: .8cqw; font-size: 2.8cqw; box-shadow: inset 0 0 0 .3cqw var(--line); } .sm-c .tm-ph { width: 100%; height: 9cqw; } .sm-c em { font-style: normal; color: var(--c2); font-weight: 700; }
.sm .tm-ph { border-radius: calc(var(--r) * .8); }

/* website-creator page */
.wc .eyebrow { margin-bottom: 14px; }
.wc-list, .wc-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: s; }
.doc.wc .wc-list li, .doc.wc .wc-steps li { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; display: grid; gap: 6px; margin: 0; list-style: none; }
.wc-list b, .wc-steps b { font: 700 18px var(--f-head); color: var(--ink); }
.wc-steps li { counter-increment: s; } .wc-steps b::before { content: counter(s, decimal-leading-zero) ' · '; font: 500 13px var(--f-mono); color: var(--clay); }
.layouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px 26px; margin-top: 22px; }
.layouts figure { margin: 0; display: grid; gap: 12px; } .layouts figcaption { display: grid; gap: 2px; color: var(--ink-3); font-size: 14px; } .layouts figcaption b { color: var(--ink); font: 700 16px var(--f-head); }
.wc-phones { margin-top: 20px; }
.doc.wc .cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* the Advanced menu (tray): top bar, hero card, picture cards, tray */
.tt { background: var(--bg); }
.tt-top { display: flex; align-items: center; gap: 2.4cqw; padding: 7cqw 4.4cqw 2.6cqw; }
.tt-top .tt-logo { width: 11.4cqw; height: 11.4cqw; border-radius: 50%; background: var(--c1); color: var(--on); font-size: 6cqw; flex: none; margin: 0; box-shadow: none; }
.tt-top .tt-logo.tm-li { font-size: 5cqw; }
.tt-nm { flex: 1; min-width: 0; display: grid; gap: .6cqw; } .tt-nm b { font: var(--hs) var(--hw) 4.4cqw/1.1 var(--hf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-nm small { font-size: 2.5cqw; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-nm s { display: inline-block; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #2DA062; margin-inline-end: 1.2cqw; vertical-align: .1cqw; }
.tt-btn { width: 8.6cqw; height: 8.6cqw; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 .4cqw var(--line); display: grid; place-items: center; font-size: 4cqw; flex: none; }
.tt-l { font: 700 3.6cqw var(--bf); }
.tt-hero { position: relative; margin: 1cqw 4cqw 0; border-radius: 8cqw; background: var(--c1); color: var(--on); padding: 6cqw 5.6cqw 5.6cqw; height: 55cqw; overflow: hidden; display: grid; align-content: start; gap: 2.4cqw; }
.tt-hero .tt-c1 { position: absolute; width: 42cqw; height: 42cqw; border-radius: 50%; background: color-mix(in srgb, var(--on) 9%, transparent); top: -18cqw; inset-inline-end: -10cqw; }
.tt-hero .tt-c2 { position: absolute; width: 34cqw; height: 34cqw; border-radius: 50%; background: color-mix(in srgb, var(--c2) 70%, var(--c1)); bottom: -16cqw; inset-inline-end: 12cqw; }
.tt-hero small { position: relative; display: flex; align-items: center; gap: 1.8cqw; font-size: 3.5cqw; font-weight: 600; opacity: .8; letter-spacing: .02em; }
.tt-hero h3 { position: relative; font-size: 7cqw; line-height: 1.06; max-width: 70%; }
.tt-chips { position: relative; display: grid; gap: 1.8cqw; justify-items: start; margin-top: 1cqw; }
.tt-chips i { display: inline-flex; align-items: center; gap: 1.6cqw; font-style: normal; font-weight: 700; font-size: 3.1cqw; padding: 1.8cqw 3.6cqw; border-radius: 9cqw; background: color-mix(in srgb, var(--on) 14%, transparent); }
.tt-chips svg { font-size: 3.4cqw; }
.tt-art { position: absolute; width: 44cqw; height: 44cqw; inset-inline-end: -7cqw; bottom: -9cqw; }
.tt-art svg { width: 100%; height: 100%; filter: drop-shadow(0 1cqw 2cqw rgba(0, 0, 0, .25)); }
.tt-dot { display: block; width: 9cqw; height: 1.6cqw; border-radius: 2cqw; background: var(--mut); opacity: .55; margin: 3cqw auto 0; }
.tt-cat { display: flex; justify-content: space-between; align-items: baseline; padding: 4cqw 4.6cqw 2.6cqw; } .tt-cat h4 { font-size: 6cqw; } .tt-cat span { font-size: 3.4cqw; color: var(--mut); }
.tt-list { display: grid; gap: 3cqw; padding: 0 4cqw; }
.tt-card { display: flex; align-items: center; gap: 3.2cqw; min-height: 25cqw; border-radius: 8cqw; background: var(--c1); color: var(--on); padding-inline-end: 4cqw; }
.tt-tile { width: 26cqw; height: 26cqw; flex: none; border-radius: 8cqw; background: color-mix(in srgb, var(--on) 86%, var(--c1)); display: grid; place-items: center; box-shadow: 1cqw 1cqw 2.6cqw rgba(0, 0, 0, .2); }
.tt-tile svg { width: 76%; height: 76%; }
.tt-card > div { display: grid; gap: 1cqw; min-width: 0; }
.tt-card b { font-size: 4.4cqw; font-weight: 700; } .tt-card p { font-size: 3.2cqw; opacity: .8; }
.tt-card em { font-style: normal; font-weight: 700; font-size: 4.6cqw; display: flex; align-items: center; gap: 1.6cqw; } .tt-card em small { font-size: 3cqw; font-weight: 500; opacity: .7; }
.tt-card u { text-decoration: none; font-size: 2.8cqw; font-weight: 700; padding: 1cqw 2.6cqw; border-radius: 9cqw; background: color-mix(in srgb, var(--on) 18%, transparent); }
.tt .tm-tray, .tt-tray { position: absolute; inset-inline: 2.6cqw; bottom: 2.8cqw; height: 16cqw; border-radius: 8cqw; background: var(--c1); color: var(--on); display: grid; align-items: center; padding: 1.6cqw; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .3), inset 0 0 0 .5cqw color-mix(in srgb, var(--on) 14%, transparent); }
.tt-tc { height: 12.4cqw; border-radius: 6.4cqw; background: color-mix(in srgb, var(--on) 12%, transparent); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 4.6cqw; position: relative; }
.tt-tc b { font-size: 4.4cqw; text-align: center; grid-column: 1; } .tt-tc i { font-style: normal; font-size: 3cqw; opacity: .7; position: absolute; inset-inline-end: 4.6cqw; }
.tt-tc s { position: absolute; bottom: 1.4cqw; inset-inline: 0; display: flex; justify-content: center; gap: 1cqw; text-decoration: none; }
.tt-tc s s { position: static; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: currentColor; opacity: .4; } .tt-tc s s:first-child { width: 4.4cqw; border-radius: 1cqw; opacity: .9; }

/* Basic menu: the category chips under the header */
.tm-chips { display: flex; gap: 2cqw; padding: 3cqw 3.6cqw; border-bottom: .4cqw solid var(--line); overflow: hidden; } .tm-chips i { font-style: normal; font-size: 3.2cqw; padding: 1.8cqw 3.4cqw; border-radius: 9cqw; background: var(--card); box-shadow: inset 0 0 0 .4cqw var(--line); white-space: nowrap; }
.tt-hero { height: 61cqw; }
.tt-hero h3 { font-size: 6.4cqw; }
.tt-chips { gap: 1.4cqw; } .tt-chips i { padding: 1.4cqw 3.2cqw; font-size: 2.9cqw; }
.tm[dir=rtl] .tt-hero h3 { font-size: 5.6cqw; line-height: 1.25; }
.tt-tc b { max-width: 62%; justify-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-tc i { max-width: 28%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }