/* Modulus Seventeen home page sections below the hero:
   marquee, Try The Ecosystem (js/demo.js), Built for Your Business, Neighborhood, FAQ + suggestion, Talk to Our Team.
   Ported from the design team's export and reworked to scale smoothly between the 400px and 1440px Figma frames:
   clamp(MIN, calc(MIN + (MAX - MIN) * (100vw - 400px) / 1040), MAX) */

.c-navy { color: var(--sell); }
.c-red { color: var(--buy); }
.c-blue { color: var(--sell-bright); }

/* section headings */
.sec-title {
    font-weight: 600;
    font-size: clamp(25px, calc(25px + 25 * (100vw - 400px) / 1040), 50px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--title);
    text-align: center;
}

.sec-sub {
    font-size: clamp(12px, calc(12px + 13 * (100vw - 400px) / 1040), 25px);
    line-height: 1.4;
    letter-spacing: -0.025em;
    color: var(--muted-2);
    text-align: center;
}

/* blinking dot (Try demo: new-order flag) */
@keyframes sync-dot { 50% { background: var(--sell-bright); transform: scale(1.25); } }

/* ---------------- MARQUEE ---------------- */
.marquee { margin-top: 106px; background: #0b0b0f; padding: 8px 0; overflow: hidden; border-block: 1px solid #0b0b0f; }
/* js/site.js repeats the group and sets --mq-duration from its width, so the strip scrolls at a steady speed and wraps without a jump */
.marquee-track { display: flex; width: max-content; }
.marquee-track.is-looping { animation: marquee var(--mq-duration, 200s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; }
.mq { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-size: 16px; line-height: 20px; color: #a6a6b2; white-space: nowrap; }
.mq b { color: #fff; font-weight: 600; }
.mq img { width: 12px; height: 12px; animation: spin 6s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- TRY ---------------- */
.try { padding-top: 130px; }
.try-head { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 16px; }
.try-head .sec-title { margin-bottom: -16px; }
.steps { display: flex; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0; }
.step { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 20px; line-height: 1.1; letter-spacing: -0.5px; color: #525252; white-space: nowrap; }
.step-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 28px; background: rgba(82, 82, 82, .1); transition: background .5s, color .5s, transform .5s var(--ease-spring); }
.step.is-active .step-n, .step.is-done .step-n { background: var(--sell-bright); color: #fff; }
.step.is-active .step-n { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(63, 78, 227, .15); }
.step-line svg { display: block; overflow: visible; }
.step-line path { stroke: #c4c4c4; stroke-dasharray: 90; stroke-dashoffset: 0; }
.step-line.is-done path { stroke: var(--sell-bright); animation: draw-line .8s var(--ease-out); }
@keyframes draw-line { from { stroke-dashoffset: 90; } }

.try-stage-wrap { position: relative; display: flex; justify-content: center; margin-top: 48px; }
.try-stage { position: relative; width: 1221px; height: 719px; flex: none; zoom: var(--tz, 1); }
.phone-col { position: absolute; top: 2px; width: 433px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone-col-sell { left: 0; }
.phone-col-buy { left: 788px; top: 3px; }
.app-logo { height: 40px; width: auto; transition: transform .5s var(--ease-spring); }
.phone-col.is-busy .app-logo { animation: logo-bob .6s var(--ease-spring); }
@keyframes logo-bob { 50% { transform: translateY(-6px) scale(1.06); } }
.phone {
  position: relative; width: 433px; height: 659px; overflow: hidden; background: #fff;
  border: 1px solid #b7b7b7; box-shadow: 4px 4px 0 #b7b7b7; isolation: isolate;
}
.phone-sell { border-radius: 33px; }
.phone-buy { border-radius: 20px; }
.phone.is-glow { animation: phone-glow 1.2s var(--ease-out); }
@keyframes phone-glow { 30% { box-shadow: 4px 4px 0 #b7b7b7, 0 0 0 8px rgba(63, 78, 227, .18); } }
.phone-buy.is-glow { animation-name: phone-glow-r; }
@keyframes phone-glow-r { 30% { box-shadow: 4px 4px 0 #b7b7b7, 0 0 0 8px rgba(165, 34, 38, .18); } }

.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out), visibility 0s .7s; }
.scr.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out), transform .7s var(--ease-out), visibility 0s; }
.scr.is-left { transform: translateX(-40px); }

/* shared phone UI */
.scr-head { display: flex; align-items: center; gap: 8px; }
.round-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50px; flex: none; }
.rb-navy { background: rgba(33, 27, 126, .02); }
.rb-navy2 { background: rgba(33, 27, 126, .11); width: 60px; }
.rb-red { background: rgba(165, 34, 38, .1); width: 60px; }
.scr-title21 { font-weight: 500; font-size: 21px; line-height: 1.1; letter-spacing: -0.42px; color: #000; white-space: nowrap; }
.scr-title20 { font-weight: 500; font-size: 20px; line-height: 1.1; letter-spacing: -0.4px; color: #000; white-space: nowrap; }
.scr-sub12 { font-size: 12px; line-height: 1.1; letter-spacing: -0.24px; color: #777; margin-top: 5px; white-space: pre; }
.pbtn {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; border: 0; border-radius: 30px;
  font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: #fff; cursor: pointer;
  transition: transform .2s, filter .2s;
}
.pbtn-navy { background: var(--sell); }
.pbtn:hover { filter: brightness(1.15); }
.pbtn:active, .is-press { transform: scale(.96) !important; }
.price-row { display: flex; align-items: flex-end; gap: 4px; }
.price25 { font-weight: 600; font-size: 25px; line-height: 1.2; color: #000; }
.strike { font-size: 12px; line-height: 1.2; color: #b0b0b0; text-decoration: none; position: relative; padding-bottom: 4px; }
.strike::after { content: ""; position: absolute; left: 2px; right: 1px; top: 8px; height: 1px; background: #b0b0b0; }
.off-chip { display: inline-flex; padding: 4px 8px; border-radius: 33px; background: rgba(1, 174, 15, .1); color: #01ae0f; font-size: 8px; line-height: 1.1; white-space: nowrap; }
.unit-chip { display: inline-flex; padding: 4px 8px; border-radius: 33px; background: rgba(165, 34, 38, .1); color: var(--buy); font-size: 8px; line-height: 1.1; letter-spacing: -0.16px; }
.qty { display: inline-flex; padding: 4px 8px; border-radius: 16px; background: #edecec; color: #7a7a7a; font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: -0.12px; }
.items-list { display: flex; flex-direction: column; gap: 8px; }
.items-list p { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.1; letter-spacing: -0.12px; color: #7a7a7a; white-space: nowrap; }
.items-list p > span { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.sc-title { font-weight: 500; font-size: 14px; line-height: 1.1; letter-spacing: -0.14px; color: #2c2c2c; }
.caret { display: none; width: 1.5px; height: 18px; background: var(--sell); margin-left: 1px; animation: blink 1s steps(1) infinite; }
.inp.is-focus { border-color: var(--sell); box-shadow: 0 0 0 3px rgba(38, 31, 142, .1); }
.inp.is-focus .caret { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }

/* S1 add product */
.scr-add { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.add-top { display: flex; justify-content: space-between; align-items: center; }
.add-top .scr-head { align-items: flex-end; }
.feature-toggle { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ft-track { width: 70px; padding: 4px; border-radius: 20px; background: var(--buy); display: flex; justify-content: flex-end; }
.ft-knob { display: flex; padding: 4px 8px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.feature-toggle small { font-weight: 500; font-size: 10px; line-height: 1.2; letter-spacing: -0.3px; color: #a2a2a2; }
.add-body { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; flex: 1; }
.tiles { display: flex; gap: 8px; justify-content: center; }
.tile-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tile { position: relative; width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; border: 1px solid #e4e4e4; border-radius: 20px; background: #fff; font-weight: 500; font-size: 12px; line-height: 1.2; text-align: center; color: var(--sell); overflow: hidden; }
.tile .grey { color: #8c8c8c; }
.tile-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.2); transition: opacity .5s, transform .6s var(--ease-out); }
.tile.has-img .tile-thumb { opacity: 1; transform: none; }
.req, .opt { font-weight: 300; font-size: 10px; line-height: 1.2; letter-spacing: -0.25px; white-space: pre; }
.req { color: #f20004; }
.opt { color: #a0a0a0; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld-grow { flex: 1; }
.fld-row { display: flex; gap: 8px; }
.fld-label { font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: -0.35px; color: #646464; white-space: nowrap; }
.fld-label b { color: #fb2c36; font-weight: 700; }
.inp { display: flex; align-items: center; gap: 6px; padding: 16px; min-height: 52px; border: 1px solid #e4e4e4; border-radius: 20px; background: #fff; font-size: 16px; line-height: 1.1; color: #1d293d; transition: border-color .3s, box-shadow .3s; }
.inp-price { padding: 16px 8px; gap: 4px; }
.inp-unit { border-color: #e9e9e9; }
.inp-val:empty::before { content: attr(data-ph); color: rgba(29, 41, 61, .5); }
.inp.is-focus .inp-val:empty::before { content: ""; }
.grey2 { color: #959595; white-space: nowrap; }
.add-link { display: flex; align-items: center; gap: 4px; padding: 4px 0; font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.36px; color: var(--sell); margin-top: -8px; }

/* S2 / S4 blue success */
.scr-blue { background: linear-gradient(180deg, #261f8e 3.046%, #261f8e 15.52%, #fff 50%); }
/* no status bar or inner SELL logo (the app logo sits above the phone): the printer starts in the navy band */
.blue-top { position: absolute; left: 15px; right: 15px; top: 84px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.printer { position: relative; width: 340px; height: 24px; border-radius: 38px; background: rgba(255, 255, 255, .3); z-index: 2; margin-bottom: -37px; }
.printer span { position: absolute; left: 8px; top: 6px; width: 326px; height: 12px; border-radius: 38px; background: rgba(0, 0, 0, .3); }
.receipt-clip { height: 0; display: flex; align-items: flex-end; overflow: hidden; margin-top: 13px; }
.scr.is-on .receipt-clip { animation: print 1s ease-in-out forwards; }
@keyframes print { to { height: 346px; } }
.receipt-clip-tall { }
.scr.is-on .receipt-clip-tall { animation-name: print-tall; }
@keyframes print-tall { to { height: 377px; } }
.receipt { position: relative; width: 310px; height: 346px; flex: none; }
.receipt-tall { height: 377px; }
.receipt-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.receipt-body { position: absolute; left: 50%; transform: translateX(calc(-50% - .5px)); top: 25px; width: 267px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.receipt-tall .receipt-body { top: 29px; }
.receipt-body > :first-child { margin-bottom: 8px; }
.rc-title { font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.4px; color: #000; }
.rc-title2 { margin-bottom: -4px; }
.rc-chip { display: inline-flex; padding: 8px 16px; border-radius: 32px; background: rgba(38, 31, 142, .1); color: var(--sell); font-size: 12px; line-height: 1.1; letter-spacing: -0.24px; white-space: nowrap; }
.rc-name { font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; color: #696969; }
.rc-date { font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.24px; color: #767676; }
.rc-btns { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mini-btn { display: flex; justify-content: center; padding: 10px 16px; border-radius: 30px; border: 1px solid var(--sell); color: var(--sell); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.36px; }
.mini-solid { background: var(--sell); color: #fff; }
.pbtn-bottom { position: absolute; left: 15px; right: 15px; bottom: 39px; width: auto; }
.dlv-info { position: absolute; left: 15px; right: 15px; top: 539px; display: flex; flex-direction: column; gap: 8px; }
.cust-card { border: 1px solid #dbdbdb; border-radius: 25px; padding: 8px; display: flex; flex-direction: column; gap: 16px; }
.cust-card .cust-l b { font-size: 16px; }
.cust-card .cust-l small { font-size: 12px; }

/* success art (box + check badge) */
.box-art { position: relative; width: 130px; height: 104px; flex: none; }
.box-art .ba-g { position: absolute; transform-origin: 50% 60%; }
.box-art .ba-g img, .open-box .ba-g img { position: absolute; display: block; }
.scr.is-on .ba-group { animation: box-pop 2s linear forwards; }
.ba-group { position: absolute; inset: 0; transform: scale(0); }
@keyframes box-pop {
  0% { transform: scale(0); animation-timing-function: linear(0, .0188, .0679, .1374, .2195, .308, .3978, .4856, .5686, .6452, .7142, .7753, .8283, .8735, .9113, .9423, .9671, .9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, .9997, .9995, .9993, .9992, .9992, .9993); }
  35.759%, 100% { transform: scale(1); }
}
.sbadge { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); border: calc(var(--s) * .0435) solid var(--cb, rgba(38, 31, 142, .1)); transform: scale(0); }
.scr.is-on .sbadge { animation: badge-pop 2s linear forwards; }
@keyframes badge-pop {
  0%, 6.925% { transform: scale(0); animation-timing-function: linear(0, .0188, .0679, .1374, .2195, .308, .3978, .4856, .5686, .6452, .7142, .7753, .8283, .8735, .9113, .9423, .9671, .9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, .9997, .9995, .9993, .9992, .9992, .9993); }
  56.975%, 100% { transform: scale(1); }
}
.sbadge .chk { position: absolute; overflow: visible; }
.sbadge .chk path { stroke-dasharray: 0 1; }
.scr.is-on .sbadge .chk path { animation: chk 2s linear forwards; }
@keyframes chk { 0%, 6.925% { stroke-dasharray: 0 1; } 57.627%, 100% { stroke-dasharray: 1 1; } }
.sbadge .ray { position: absolute; overflow: visible; }
.sbadge .ray line { stroke-dasharray: 0 1; stroke-dashoffset: 0; }
.scr.is-on .sbadge .ray line { animation: ray 2s linear infinite; }
@keyframes ray {
  0%, 21.132% { stroke-dasharray: 0 1; stroke-dashoffset: 0; }
  39.975% { stroke-dasharray: .9999 1; stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.496, .01, .499, 1); }
  62.341%, 100% { stroke-dasharray: 0 1; stroke-dashoffset: -1; }
}
.open-box { position: relative; width: 150px; height: 97px; flex: none; }
.open-box-lg { width: 191.483px; height: 124px; }

/* S3 order details */
.scr-order { background: linear-gradient(180deg, #cfcdf4 3.046%, #fff 10.767%); }
.od-wrap { position: absolute; left: 15px; right: 15px; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.od-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.od-head .scr-head { align-items: flex-start; gap: 9px; }
.od-meta { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; line-height: 1.1; letter-spacing: -0.24px; color: #777; }
.tag-online { border: 1px solid var(--sell); border-radius: 5px; padding: 4px 8px; font-size: 10px; color: var(--sell); }
.new-order-flag {
  position: absolute; right: 0; top: 50px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 20px; background: var(--sell); color: #fff; font-size: 11px; font-weight: 500;
  opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .4s, transform .5s var(--ease-spring);
}
.new-order-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5dff6b; animation: sync-dot 1s infinite; }
.scr-order.flag-on .new-order-flag { opacity: 1; transform: none; }
.cust { display: flex; justify-content: space-between; align-items: center; }
.cust-l { display: flex; align-items: center; gap: 8px; }
.cust-l > span:last-child { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.cust-l b { font-weight: 500; font-size: 20px; letter-spacing: -0.2px; color: #3b3b3b; }
.cust-l small { font-size: 14px; letter-spacing: -0.14px; color: #9f9f9f; }
.initials { display: grid; place-items: center; height: 42px; padding: 10px; border-radius: 50px; background: rgba(38, 31, 142, .1); color: var(--sell); font-weight: 500; font-size: 15px; line-height: 1; }
.call-btn { display: flex; padding: 8px 16px; border-radius: 35px; background: rgba(38, 31, 142, .1); }
.addr { display: flex; gap: 4px; font-size: 14px; line-height: 1.6; letter-spacing: -0.14px; color: #827f7f; white-space: nowrap; }
.addr img { margin-top: 4px; flex: none; }
.status-card { border: 1px solid #e6e6e6; border-radius: 15px; padding: 8px; display: flex; flex-direction: column; gap: 16px; }
.tracker { display: flex; align-items: flex-start; justify-content: space-between; height: 57px; }
.tk { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tk-ic { position: relative; display: flex; justify-content: center; width: 58px; padding: 8px 16px; border: 1px solid #ececec; border-radius: 35px; transition: background .4s, border-color .4s, transform .5s var(--ease-spring); }
.tk-ic img { width: 24px; height: 24px; }
.tk-ic .on { position: absolute; top: 8px; opacity: 0; transition: opacity .4s; }
.tk small { font-weight: 500; font-size: 10px; line-height: 1.3; letter-spacing: -0.1px; color: #5e5e5e; text-align: center; }
.tk.is-done .tk-ic { background: linear-gradient(180deg, rgba(38, 31, 142, .1), rgba(38, 31, 142, .05)); border-color: var(--sell); }
.tk.is-done .tk-ic .on { opacity: 1; }
.tk.is-new .tk-ic { animation: tk-pop .7s var(--ease-spring); }
@keyframes tk-pop { 40% { transform: scale(1.18); } }
.tk-line { width: 38px; height: 7.36px; margin-top: 17.3px; flex: none; }
.partner { display: flex; align-items: center; gap: 16px; padding: 8px; border-radius: 15px; border: 1px solid rgba(38, 31, 142, .02); background: linear-gradient(90deg, rgba(38, 31, 142, .05), rgba(38, 31, 142, .02)); }
.partner-av { width: 55px; height: 75.23px; overflow: hidden; position: relative; flex: none; }
.partner-av img { position: absolute; left: 0; top: -29.87%; width: 100%; height: 162.4%; max-width: none; }
.partner > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.partner b { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.16px; color: #2c2c2c; }
.partner small { font-size: 12px; line-height: 1.6; letter-spacing: -0.12px; color: #827f7f; margin-bottom: 4px; }
.outline-chip { display: inline-flex; align-items: center; height: 34px; padding: 6px 12px; border: 1px solid var(--sell); border-radius: 25px; font-weight: 500; font-size: 12px; color: var(--sell); }
.items-box { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px; border: 1px solid #ececec; border-radius: 15px; margin-top: -8px; }
.fade-bottom { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%); z-index: 2; }
.sheet-dim { position: absolute; inset: 0; z-index: 4; background: rgba(15, 12, 50, .25); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.sheet { position: absolute; left: 0; right: 0; bottom: -1px; height: 358px; z-index: 5; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .33); padding: 16px; display: flex; flex-direction: column; gap: 16px; transform: translateY(105%); transition: transform .6s var(--ease-out); }
.scr-order.sheet-open .sheet { transform: none; }
.scr-order.sheet-open .sheet-dim { opacity: 1; visibility: visible; transition: opacity .4s; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet-title { font-weight: 500; font-size: 20px; line-height: 1.1; letter-spacing: -0.4px; color: #000; }
.otp-row { display: flex; gap: 8px; }
.otp-row span { flex: 1; display: grid; place-items: center; padding: 16px; height: 57px; border: 1px solid #e4e4e4; border-radius: 30px; font-weight: 500; font-size: 20px; color: #736d6d; transition: all .25s; }
.otp-row span.is-cur { background: rgba(38, 31, 142, .1); border-color: var(--sell); color: var(--sell); }
.otp-row span.pop { animation: tk-pop .4s var(--ease-spring); }
.otp-info { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 15px; background: #f6f6f7; }
.otp-info p { font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; color: #868686; }
.sheet .pbtn { position: absolute; left: 18px; right: 17px; bottom: 23px; width: auto; }

/* BUY screens */
.scr-pink { background: linear-gradient(180deg, #f5cccd 0%, #fff 15.034%); }
.scr-pink2 { background: linear-gradient(180deg, #f9e1e2 3.046%, #fff 10.767%); }
.b-wrap { position: absolute; left: 15px; right: 15px; top: 15px; display: flex; flex-direction: column; gap: 24px; }
.b-center { align-items: center; gap: 8px; text-align: center; }
.b-center-tight { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.scr-head-full { width: 100%; margin-bottom: 0; }
.pd-img { position: relative; height: 330px; border-radius: 15px; overflow: hidden; margin-top: -8px; }
.pd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease-out; }
.scr-product.is-on .pd-img img { transform: scale(1.06); }
.pd-new { position: absolute; left: 10px; top: 10px; padding: 6px 10px; border-radius: 20px; background: var(--buy); color: #fff; font-size: 11px; font-weight: 500; opacity: 0; transform: translateY(-6px); transition: all .5s var(--ease-spring); }
.scr-product.is-live .pd-new { opacity: 1; transform: none; }
.pd-info { display: flex; justify-content: space-between; align-items: flex-start; margin-top: -8px; }
.pd-info > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pd-name { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.32px; color: #696969; }
.pd-info .price-row { margin-bottom: -4px; }
.pd-desc { display: flex; flex-direction: column; gap: 4px; }
.pd-desc-t { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.48px; color: #717171; }
.pd-desc-b { font-size: 14px; line-height: 1.6; letter-spacing: -0.28px; color: #a5a5a5; }
.read-more { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; letter-spacing: -0.42px; color: var(--buy); margin-top: 4px; }
.more-t { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.32px; color: #000; margin-bottom: -16px; }
.more-row { display: flex; gap: 8px; }
.mcard { width: 160px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 9.14px; border: 1.14px solid rgba(0, 0, 0, .09); border-radius: 20px; background: #fff; }
.mc-img { position: relative; width: 100%; height: 140px; border-radius: 12px; overflow: hidden; }
.mc-img > img { width: 100%; height: 100%; object-fit: cover; }
.mc-add { position: absolute; left: 0; bottom: 0; display: flex; padding: 5px 9px; border-radius: 999px; background: #f4c8c9; border: 1px solid var(--buy); filter: drop-shadow(2px 3px 0 #000); }
.mc-meta { width: 100%; display: flex; justify-content: space-between; }
.rate { display: flex; align-items: center; gap: 2px; font-weight: 500; font-size: 12px; color: var(--buy); }
.mc-name { font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: -0.24px; color: #696969; }
.mc-price { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.2; }
.mc-price b { font-weight: 600; color: #000; }
.mc-price s { color: #b0b0b0; }

.bottom-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 100%; height: 103px; z-index: 3; display: flex; gap: 8px; align-items: flex-start; padding: 24px 16px 48px; background: #fff; border-radius: 20px 20px 0 0; filter: drop-shadow(0 -2px 7.1px rgba(0, 0, 0, .15)); }
.rbtn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; border-radius: 20px; border: 1px solid transparent; font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; white-space: nowrap; cursor: pointer; transition: transform .2s, filter .3s, opacity .3s, box-shadow .3s; }
.rbtn-solid { background: var(--buy); color: #fff; box-shadow: 2px 4px 0 #000; }
.rbtn-soft { background: rgba(165, 34, 38, .1); border-color: var(--buy); color: var(--buy); box-shadow: 2px 4px 0 #000; }
.rbtn:active { transform: translate(2px, 3px); box-shadow: 0 1px 0 #000; }
.bb-add { flex: 1; }
.bb-add:disabled { background: #cfcfcf; color: #fff; box-shadow: none; cursor: not-allowed; }
.bb-add.just-enabled { animation: enable-pop .9s var(--ease-spring); }
@keyframes enable-pop { 0% { transform: scale(.9); } 50% { transform: scale(1.04); box-shadow: 2px 4px 0 #000, 0 0 0 8px rgba(165, 34, 38, .15); } }
.bb-cart { display: none; flex: 1; gap: 8px; }
.bb-cart > * { flex: 1; }
.in-cart .bb-add { display: none; }
.in-cart .bb-cart { display: flex; animation: cart-in .5s var(--ease-spring); }
@keyframes cart-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.cart-count { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 51px; background: var(--buy); color: #f6e9ea; font-size: 12px; line-height: 1; }
.cart-count.bump { animation: tk-pop .5s var(--ease-spring); }
.stepper { gap: 16px; padding: 16px 20px; cursor: default; }
.stepper button { border: 0; background: none; padding: 0; cursor: pointer; display: flex; }
.stepper span { font-weight: 600; min-width: 12px; text-align: center; }

.cart-count-t { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.32px; color: #000; margin-bottom: -24px; }
.cart-list { display: flex; flex-direction: column; }
.ci { display: flex; align-items: center; gap: 8px; padding: 16px 0; }
.ci-img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; flex: none; }
.ci-mid { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ci-mid > p:not(.mc-price) { font-weight: 500; font-size: 12px; line-height: 1.1; letter-spacing: -0.24px; color: #4d4d4d; }
.qty-pill { display: flex; align-items: center; gap: 10px; padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--buy); filter: drop-shadow(2px 3px 0 #000); font-weight: 500; font-size: 20px; line-height: 1; color: var(--buy); }
.ci-div { width: 100%; height: 1px; }
.free-dlv { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #eaeaea; border-radius: 15px; }
.free-dlv > div { display: flex; flex-direction: column; gap: 4px; }
.free-dlv b { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.32px; color: #585858; }
.free-dlv small { font-size: 12px; line-height: 1.1; color: #a0a0a0; }
.free-dlv em { font-style: normal; font-weight: 500; color: #000; }
.see-offers { text-align: center; font-weight: 500; font-size: 12px; color: var(--buy); margin-top: -16px; }
.bottom-bar-cart { justify-content: space-between; }
.total { display: flex; flex-direction: column; gap: 4px; }
.total b { font-weight: 600; font-size: 25px; line-height: 1.2; color: #000; }
.total span { font-weight: 500; font-size: 12px; line-height: 1.1; color: var(--buy); text-decoration: underline; text-underline-offset: 3px; }

.otp-chip { display: inline-flex; padding: 8px 16px; border-radius: 32px; background: rgba(165, 34, 38, .1); color: var(--buy); font-weight: 500; font-size: 12px; line-height: 1.1; letter-spacing: -0.24px; white-space: nowrap; }
.ok-title { font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.4px; color: #040404; margin-top: 4px; }
.ok-title-2 { line-height: 1.2; color: #000; }
.ok-sub { font-size: 14px; line-height: 1.6; letter-spacing: -0.28px; color: #929292; width: 295px; margin-top: -4px; }
.ok-sub-w { width: auto; white-space: nowrap; }
.ok-time { font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.12px; color: var(--buy); }
.b-btns { width: 100%; display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.b-btns .rbtn { height: 52px; }
.summary { width: 100%; margin-top: 16px; border: 1px solid #dfdfdf; border-radius: 15px; padding: 8px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.sum-t { font-weight: 600; font-size: 14px; line-height: 1.1; letter-spacing: -0.28px; color: #000; }
.sum-line { width: 100%; height: 1px; }
.sum-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; }
.sum-l { display: flex; align-items: center; gap: 8px; }
.sum-l > span { display: flex; flex-direction: column; gap: 4px; }
.sum-l b { font-weight: 600; font-size: 14px; line-height: 1.1; letter-spacing: -0.28px; color: #000; }
.sum-l small { font-size: 10px; line-height: 1.6; color: #8e8e8e; }
.txn-ic { width: 30px; height: 30px; object-fit: cover; object-position: 0 40%; }
.copy { display: flex; align-items: center; gap: 4px; height: 34px; padding: 6px 12px; border: 1px solid var(--buy); border-radius: 25px; font-weight: 500; font-size: 12px; color: var(--buy); }
.scooter { width: 130px; height: 115.2px; position: relative; }
.scooter svg { position: absolute; left: 0; top: 0; width: 151px; height: 116px; overflow: visible; }
.scr.is-on .scooter svg [id="Group 1597885140"] { animation: road 2s linear infinite; }
.scr.is-on .scooter svg [id="Group 1597885139"] { animation: parcel 2s linear infinite; }
.scr.is-on .scooter svg { animation: scoot 0.5s ease-in-out infinite alternate; }

@keyframes road { from { transform: translateX(0); } to { transform: translateX(-32.6px); } }
@keyframes parcel { 0% { transform: translateY(3.1px); } 20.8% { transform: translateY(-3.1px); } 51.5% { transform: translateY(1.6px); } 100% { transform: translateY(-3.9px); } }
@keyframes scoot { to { transform: translateY(-1.5px); } }
.home-ind { position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 412px; height: 36px; }

/* middle column */
.try-mid { position: absolute; left: 497px; top: 105px; width: 228px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.smiley-card { width: 100%; display: flex; justify-content: center; padding: 20px; background: #fff; border: 1px solid #cfcfcf; border-radius: 87px; transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s; }
.smiley-card svg { overflow: visible; width: 53px; height: 52px; }
.smiley-card.is-happy { transform: scale(1.05) rotate(-2deg); border-color: var(--sell-bright); box-shadow: 3px 3px 0 var(--sell-bright); }
.smiley-card.is-red.is-happy { border-color: var(--buy); box-shadow: 3px 3px 0 var(--buy); }
.sm-eye { transition: transform .25s var(--ease-out); }
.sm-pupil { transition: cx .2s, cy .2s; }
.sm-lid { transform-box: fill-box; transform-origin: center; }
.smiley-card.blink .sm-lid { animation: lid .18s ease-in-out; }
@keyframes lid { 50% { transform: scaleY(.12); } }
.sm-mouth { transition: d .4s var(--ease-spring); }
.mid-copy { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mid-step { font-size: 11px; line-height: 1.2; letter-spacing: -0.33px; color: var(--sell-bright); }
.mid-step.is-buy { color: var(--buy); }
.mid-text { font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: -0.45px; color: #838383; min-height: 76px; }
.mid-copy.swap { animation: swap .6s var(--ease-out); }
@keyframes swap { 0% { opacity: 0; transform: translateY(10px); } }
.replay { display: inline-flex; align-items: center; gap: 4px; padding: 7px 15px; border: 1px solid #636363; border-radius: 30px; background: transparent; font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.48px; color: #636363; cursor: pointer; transition: background .25s, color .25s; }
.replay:hover { background: #111; color: #fff; }
.replay:hover img { filter: invert(1); animation: spin 1s var(--ease-out); }
.your-turn { font-size: 12px; color: var(--sell-bright); font-weight: 600; letter-spacing: -0.2px; text-align: center; opacity: 0; transition: opacity .4s; margin-top: -12px; }
.your-turn.show { opacity: 1; }

/* travel path + box */
.travel-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.travel-path path { fill: none; stroke: #9a9a9a; stroke-width: 2; stroke-dasharray: 8 8; animation: dash-flow 1.2s linear infinite paused; }
.travel-path.is-flowing path { animation-play-state: running; stroke: var(--sell-bright); }
.travel-path.is-flowing.red path { stroke: var(--buy); }
@keyframes dash-flow { to { stroke-dashoffset: -16; } }
.travel-box {
  position: absolute; left: 0; top: 0; z-index: 6; width: calc(58px * var(--tz, 1)); height: calc(58px * var(--tz, 1));
  display: grid; place-items: center; background: #fff; border: 1px solid var(--sell-bright); border-radius: 50px; pointer-events: none;
  transform: translate(-50%, -50%); transition: border-color .3s, box-shadow .3s;
}
.travel-box img { width: 69%; height: 69%; }
.travel-box.is-moving { box-shadow: 0 8px 24px rgba(63, 78, 227, .3); }
.travel-box.red { border-color: var(--buy); box-shadow: 0 8px 24px rgba(165, 34, 38, .3); }
.travel-box.red img { filter: hue-rotate(115deg) saturate(1.4); }

/* hand cursor */
.hand { position: absolute; left: 50%; top: 50%; z-index: 20; pointer-events: none; opacity: 0; transition: left .9s cubic-bezier(.45, 0, .2, 1), top .9s cubic-bezier(.45, 0, .2, 1), opacity .4s; transform: translate(-30%, -6%); }
.hand.show { opacity: 1; }
.hand svg { filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .18)); transition: transform .15s; }
.hand.click svg { transform: scale(.82) rotate(-6deg); }
.hand-ripple { position: absolute; left: 11px; top: 2px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid var(--sell-bright); opacity: 0; }
.hand.click .hand-ripple { animation: ripple .6s var(--ease-out); }
@keyframes ripple { from { opacity: .9; transform: scale(.2); } to { opacity: 0; transform: scale(1.4); } }
.hint { animation: hint 1.4s ease-in-out infinite; position: relative; }
@keyframes hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 78, 227, .0); } 50% { box-shadow: 0 0 0 7px rgba(63, 78, 227, .3); } }
.demo-auto [data-act] { pointer-events: none; }

/* ---------- marquee + Try: fluid sizes and responsive layout ---------- */

.marquee {
    margin-top: clamp(48px, calc(48px + 58 * (100vw - 400px) / 1040), 106px);
    padding: 7px 0;   /* 8px in Figma, less the 1px border */
}

.mq {
    gap: clamp(16px, calc(16px + 12 * (100vw - 400px) / 1040), 28px);
    padding-right: clamp(16px, calc(16px + 12 * (100vw - 400px) / 1040), 28px);
    font-size: clamp(10px, calc(10px + 6 * (100vw - 400px) / 1040), 16px);
    line-height: 1.25;
}

.mq img {
    width: clamp(9px, calc(9px + 3 * (100vw - 400px) / 1040), 12px);
    height: auto;
}

.try {
    padding-top: clamp(42px, calc(42px + 88 * (100vw - 400px) / 1040), 130px);
}

.try-head {
    gap: clamp(8px, calc(8px + 16 * (100vw - 400px) / 1040), 24px);
}

/* the step bar scales with the demo stage below it, so it never runs into the screen edges */
.steps {
    zoom: var(--tz, 1);
}

/* phones and tablets: one column, Replay on top, the SELL phone above the BUY phone (Figma 1890:5993) */
@media (max-width: 960px) {
    .try-head .sec-title {
        margin-bottom: 0;
    }

    .try-head .sec-sub {
        max-width: 234px;
    }

    .steps,
    .smiley-card,
    .mid-copy {
        display: none;
    }

    .try-stage-wrap {
        margin-top: 24px;
    }

    .try-stage {
        zoom: 1;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 120px;   /* room for the dashed path and the travelling parcel between the phones */
        padding: 0 var(--gutter);
    }

    .try-mid {
        position: static;
        order: -1;
        width: 100%;
        margin-bottom: -94px;
    }

    .phone-col {
        position: relative;
        left: auto !important;
        top: auto !important;
        zoom: var(--pz, 0.85);
    }

    .phone-col .app-logo {
        height: 32px;
    }

    /* the Add Product screen is short: shrink the SELL phone to fit it instead of leaving an empty gap */
    .phone-sell {
        transition: height 0.5s var(--ease-out);
    }

    .phone-sell:has(.scr-add.is-on) {
        height: 520px;
    }
}

/* ---------------- BUILT FOR YOUR BUSINESS (1890:4901 desktop / 1890:6949 mobile) ---------------- */

.biz {
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin: 0 auto;
    padding: clamp(60px, calc(60px + 83 * (100vw - 400px) / 1040), 143px) var(--gutter) 0;
}

.biz-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 730px;
    margin: 0 auto 24px;
}

.biz-head .sec-title {
    font-size: clamp(35px, calc(35px + 15 * (100vw - 400px) / 1040), 50px);
    color: #1a1a1a;
    letter-spacing: -2.33px;
}

.biz-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* card text is sized from the card's own width (290px of content in Figma = 30px / 20px) */
.biz-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 30px;
    transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-out), border-color 0.3s, opacity 1s var(--ease-out);
}

.biz-card:hover {
    transform: translateY(-8px);
    border-color: var(--sell-bright);
    box-shadow: 6px 6px 0 var(--sell-bright);
}

.biz-ill {
    aspect-ratio: 290 / 167;
    border-radius: 12px;
    overflow: hidden;
}

.biz-ill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
}

.biz-card:hover .biz-ill img {
    transform: scale(1.06);
}

.biz-card h3 {
    font-weight: 600;
    font-size: clamp(22px, 10.35cqw, 30px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--title);
}

.biz-card ul {
    margin-top: -7px;
    padding-left: 1.5em;
    font-size: clamp(16px, 6.9cqw, 20px);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--muted-2);
}

/* ---------------- NEIGHBORHOOD (1890:5326 desktop / 1890:7231 mobile) ---------------- */

.hood {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, calc(16px + 24 * (100vw - 400px) / 1040), 40px);
    padding: clamp(60px, calc(60px + 121 * (100vw - 400px) / 1040), 181px) var(--gutter) 0;
}

.hood-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, calc(8px + 3 * (100vw - 400px) / 1040), 11px);
    width: 100%;
    max-width: 1095px;
    text-align: center;
}

.hood-title {
    width: 790px;
    max-width: 100%;
    font-size: clamp(25px, calc(25px + 25 * (100vw - 400px) / 1040), 50px);
    line-height: 1.4;
}

.hood-sub {
    font-size: clamp(12px, calc(12px + 8 * (100vw - 400px) / 1040), 20px);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--muted-2);
}

/* ---------------- FAQ + SUGGESTION (1890:5243 desktop / 1890:7269 mobile) ---------------- */

.faq-wrap {
    display: grid;
    grid-template-columns: minmax(0, 708fr) minmax(0, 588fr);
    gap: 48px;
    align-items: start;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin: 0 auto;
    padding: clamp(60px, calc(60px + 121 * (100vw - 400px) / 1040), 181px) var(--gutter) 0;
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-title {
    font-weight: 600;
    font-size: clamp(25px, calc(25px + 15 * (100vw - 400px) / 1040), 40px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #1a1a1a;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.qa {
    padding-bottom: 24px;
    margin-bottom: 24px;
    background: repeating-linear-gradient(90deg, #c0c0c0 0 11px, transparent 11px 22px) 0 100% / 100% 1px no-repeat;
}

.qa:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    background: none;
}

.qa-q {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    font-size: clamp(16px, calc(16px + 4 * (100vw - 400px) / 1040), 20px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #616161;
}

.qa-n {
    flex: none;
    min-width: 22px;
    font-size: 20px;
}

.qa-t {
    flex: 1;
    transition: color 0.3s;
}

.qa-q:hover .qa-t {
    color: var(--sell-bright);
}

.qa-q:focus-visible {
    outline: 2px solid var(--sell-bright);
    outline-offset: 4px;
    border-radius: 4px;
}

.qa-chev {
    flex: none;
    margin-left: 8px;
    transition: transform 0.5s var(--ease-spring);
}

.qa.is-open .qa-chev {
    transform: rotate(180deg);
}

.qa-a {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 48px 0 38px;
    transition: grid-template-rows 0.5s var(--ease-out);
}

.qa.is-open .qa-a {
    grid-template-rows: 1fr;
}

.qa-a > p {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #706e69;
}

.qa.is-open .qa-a > p {
    padding-top: 8px;
}

.qa-a a {
    color: var(--sell-bright);
    text-decoration: underline;
}

.idea {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #000;
    border-radius: clamp(24px, calc(24px + 10 * (100vw - 400px) / 1040), 34px);
    box-shadow: 5px 5px 0 #000;
}

.idea-head h3 {
    font-weight: 600;
    font-size: clamp(20px, calc(20px + 10 * (100vw - 400px) / 1040), 30px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #1a1a1a;
}

.idea-head p {
    margin-top: 8px;
    font-size: clamp(12px, calc(12px + 8 * (100vw - 400px) / 1040), 20px);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--muted-2);
}

.idea-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.idea-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fl {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #646464;
}

.select-box {
    position: relative;
    display: block;
}

.select-box img {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 16px text keeps phones from zooming into the fields */
.idea select,
.idea textarea,
.idea input,
.idea .select-trigger {
    width: 100%;
    padding: 16px;
    border: 1px solid #cbcbcb;
    border-radius: 20px;
    background: #fff;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #333;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.idea select:invalid {
    color: rgba(114, 114, 114, 0.7);
}

/* ---- custom dropdown (js/site.js swaps it in for the native select) ---- */

.select-box.is-custom select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.idea .select-trigger {
    display: block;
    padding-right: 48px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.select-trigger .select-value.is-placeholder {
    color: rgba(114, 114, 114, 0.7);
}

.select-box.is-custom img {
    transition: transform 0.25s var(--ease-out);
}

.select-box.is-open img {
    transform: translateY(-50%) rotate(180deg);
}

.select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.select-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.select-pop {
    position: absolute;
    top: 0;   /* parked at the top while closed; js/site.js moves it under the field when it opens */
    left: 0;
    z-index: 100;
    padding: 6px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    box-shadow: 4px 4px 0 #000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s, transform 0.22s var(--ease-out), visibility 0.18s;
}

.select-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.select-sheet-head {
    display: none;
}

.select-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    outline: none;
}

.select-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.select-opt + .select-opt {
    margin-top: 2px;
}

.select-opt.is-active {
    background: #f1f2fc;
}

.select-opt[aria-selected="true"] {
    background: var(--sell-tint);
    font-weight: 600;
    color: var(--sell);
}

.select-opt svg {
    flex: none;
    opacity: 0;
}

.select-opt[aria-selected="true"] svg {
    opacity: 1;
}

@media (max-width: 899px) {
    /* phones: the list slides up from the bottom as a sheet */
    .select-pop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid #000;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
        transition: transform 0.3s var(--ease-out), visibility 0.3s;
    }

    .select-pop.is-open {
        transform: none;
    }

    .select-sheet-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding-bottom: 12px;
    }

    .select-grab {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #d2d2d2;
    }

    .select-sheet-head b {
        align-self: flex-start;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: -0.025em;
        color: #1a1a1a;
    }

    .select-list {
        max-height: min(60vh, 420px);
    }

    .select-opt {
        padding: 16px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .select-pop,
    .select-backdrop,
    .select-box.is-custom img {
        transition: none;
    }
}

.idea textarea {
    height: 142px;
    resize: none;
}

.idea ::placeholder {
    color: rgba(114, 114, 114, 0.5);
}

.idea select:focus,
.idea textarea:focus,
.idea input:focus,
.idea .select-trigger:focus-visible,
.idea .select-trigger[aria-expanded="true"] {
    border-color: var(--sell-bright);
    box-shadow: 0 0 0 4px rgba(63, 78, 227, 0.12);
}

.idea .is-error {
    border-color: #e5484d;
    animation: shake 0.4s;
}

@keyframes shake {
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.idea-row {
    display: flex;
    gap: 4px;
}

.idea .idea-btn {
    width: 100%;
    padding: 15px;
}

/* ---------------- TALK TO OUR TEAM (1890:5183 desktop / 1890:7334 mobile) ---------------- */

.team-talk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin: 0 auto;
    padding: clamp(60px, calc(60px + 164 * (100vw - 400px) / 1040), 224px) var(--gutter) 0;
}

.tt-left {
    flex: none;
    width: 435px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, calc(16px + 24 * (100vw - 400px) / 1040), 40px);
}

.tt-head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 100%;
}

.tt-title {
    font-weight: 600;
    font-size: clamp(25px, calc(25px + 25 * (100vw - 400px) / 1040), 50px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--title);
}

.tt-sub {
    font-size: clamp(12px, calc(12px + 8 * (100vw - 400px) / 1040), 20px);
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--muted-2);
}

.langs {
    display: flex;
    gap: 4px;
    margin-top: clamp(0px, calc(11px - 11 * (100vw - 400px) / 1040), 11px);
    white-space: nowrap;
}

.langs span {
    flex: none;
    padding: 4px 8px;
    border-radius: 20px;
    background: #f6f6f6;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--muted-2);
    transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-spring);
}

.langs span:hover,
.langs span.is-hot {
    background: rgba(63, 78, 227, 0.1);
    color: var(--sell-bright);
    transform: translateY(-2px);
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(16px + 8 * (100vw - 400px) / 1040), 24px);
    padding: 0;
    list-style: none;
}

.contact-list a,
.contact-list span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(16px, calc(16px + 4 * (100vw - 400px) / 1040), 20px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #5d5d5d;
    transition: color 0.25s, transform 0.3s var(--ease-out);
}

.contact-list a:hover {
    color: var(--sell-bright);
    transform: translateX(4px);
}

.contact-list img {
    flex: none;
    width: clamp(18px, calc(18px + 6 * (100vw - 400px) / 1040), 24px);
    height: auto;
}

.team-talk .about-btn {
    gap: 8px;
    padding: clamp(7px, calc(7px + 8 * (100vw - 400px) / 1040), 15px) clamp(15px, calc(15px + 16 * (100vw - 400px) / 1040), 31px);
}

.about-btn:hover img {
    filter: invert(1);
}

.tt-logo {
    flex: 0 1 596px;
    min-width: 0;
    aspect-ratio: 596 / 437;
    opacity: 0.1;
}

.tt-logo img {
    width: 100%;
    height: 100%;
    animation: logo-breathe 7s ease-in-out infinite;
}

@keyframes logo-breathe {
    50% { transform: scale(1.03) rotate(-1deg); }
}

/* ---------- Business / Neighborhood / FAQ / Talk: tablets and phones ---------- */

@media (max-width: 1199px) {
    .biz-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1099px) {
    .faq-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 899px) {
    ul.m-only {
        display: block;
    }

    .faq-title .serif-i {
        font-family: inherit;
        font-style: normal;
        font-weight: inherit;
        color: inherit;
    }

    .team-talk .about-btn {
        font-weight: 500;
    }

    /* "Actually" sits on its own line under the phone title */
    .biz-accent {
        display: block;
        line-height: inherit;   /* a full line of its own */
    }

    /* phones show four questions (05 and 06 are desktop only), so 04 closes the list */
    .qa:nth-child(4) {
        margin-bottom: 0;
        padding-bottom: 0;
        background: none;
    }

    .tt-logo {
        display: none;
    }

    .tt-left {
        width: 100%;
    }

    /* the language chips wrap onto a second line instead of running off the screen edge and getting cut */
    .langs {
        flex-wrap: wrap;
        gap: 8px 4px;
    }
}

@media (max-width: 699px) {
    .biz-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Figma's phone frame draws the first card's picture shorter (336 x 167) than the others (336 x 194) */
    .biz-card:first-child .biz-ill {
        aspect-ratio: 336 / 167;
    }

    .idea-row {
        flex-direction: column;
    }
}

/* ---------- BUY: the shop's page, first screen of the BUY phone (Figma 1965:3938) ---------- */

.st-head { position: absolute; left: 31px; right: 31px; top: 31px; display: flex; align-items: center; justify-content: space-between; }
.st-shop { display: flex; align-items: center; gap: 8px; }
.st-av { width: 40px; height: 40px; border: 1px solid #000; border-radius: 50%; object-fit: cover; }
.st-name { display: flex; align-items: center; gap: 5px; font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.48px; color: #000; white-space: nowrap; }
.st-loc { display: flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 10px; line-height: 1.1; letter-spacing: -0.2px; color: #777; white-space: nowrap; }
.st-acts { display: flex; gap: 8px; }
.st-btn { display: grid; place-items: center; padding: 9px; border: 1px solid var(--buy); border-radius: 999px; background: #fff; filter: drop-shadow(2px 3px 0 #000); }
.st-btn.st-17 { border-color: var(--sell); }
.st-body { position: absolute; left: 15px; right: 15px; top: 95px; bottom: 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.st-search { display: flex; align-items: center; gap: 4px; padding: 16px; border: 1px solid #ddd; border-radius: 20px; background: #fff; font-size: 14px; line-height: 1.2; letter-spacing: -0.14px; color: #aba7a7; }
.st-count { font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.48px; color: #000; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.scard { width: auto; min-width: 0; }
.scard .mc-price { margin-top: 0; }
.scard .mc-meta { justify-content: flex-start; }

/* the new product slides into the shop's first spot; until then the page shows the shop's other products */
.scard.st-new { display: none; cursor: pointer; }
.scr-store.is-live .scard.st-new { display: flex; animation: st-new-in .8s var(--ease-spring) both; }
.scr-store.is-live .scard.st-new .mc-img::after { content: "Just added"; position: absolute; right: 8px; top: 8px; padding: 4px 8px; border-radius: 20px; background: var(--buy); color: #fff; font-size: 8px; font-weight: 500; line-height: 1.1; }
@keyframes st-new-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
.scard.st-new.hint { animation: hint 1.4s ease-in-out infinite; }