/* full home page v2: same depth as the hero (glass, dots, live motion) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1) }
.reveal.in { opacity: 1; transform: none }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #0e6f84; background: rgba(232,244,247,.9); border: 1px solid #d3e9ef; border-radius: 999px; padding: 5px 11px }
.tag svg { width: 14px; height: 14px } .tag b { width: 7px; height: 7px; border-radius: 50%; background: #19b5d3; animation: ping 1.6s infinite }
.center { text-align: center } .center .sub { margin: 0 auto }
h2 em { font-style: normal; background: linear-gradient(135deg, #1f8fab, #0f4c5e); -webkit-background-clip: text; background-clip: text; color: transparent }
.big2 { font-size: 54px; line-height: 1.03; letter-spacing: -.04em }

/* ── 1. payment flow: every payment is a dot ── */
.flowsec { position: relative; padding: 110px 0 30px; overflow: hidden }
.flowsec::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 55%, #ffffff 0%, rgba(255,255,255,0) 70%) }
.flow { position: relative; height: 560px; margin-top: 46px }
.flow canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.node { position: absolute; z-index: 2 }
.src { left: 0; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; font-size: 13px; font-weight: 500; transform: translateY(-50%) }
.src i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #f1f5f7; color: #4b5158 } .src i svg { width: 15px; height: 15px }
.hub { left: 50%; top: 46%; transform: translate(-50%,-50%); width: 168px; height: 168px; border-radius: 44px; display: grid; place-items: center; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(240,246,248,.9)); border: 1px solid #fff; box-shadow: 0 30px 60px rgba(15,76,94,.16), 0 0 0 10px rgba(255,255,255,.5), inset 0 1px 0 #fff }
.hub img { height: 17px } .hub span { display: block; font-size: 11.5px; color: #6b7280; margin-top: 8px }
.hub .ring { position: absolute; inset: -10px; border-radius: 52px; border: 1px solid rgba(31,127,151,.25); animation: hubring 2.8s ease-out infinite } .hub .ring + .ring { animation-delay: 1.4s }
@keyframes hubring { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }
.midc { right: 0; width: 210px; padding: 12px 14px; transform: translateY(-50%); transition: box-shadow .3s, transform .3s }
.midc.hit { box-shadow: 0 0 0 4px rgba(31,127,151,.12), 0 18px 40px rgba(15,76,94,.16) }
.midc .n { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280 } .midc .n b { color: #0e6f84; font-weight: 600 }
.midc .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px }
.midc .meter { height: 5px; border-radius: 3px; background: #eef1f3; margin-top: 8px; overflow: hidden } .midc .meter div { height: 100%; background: linear-gradient(90deg, #2a9bb6, #17667d); border-radius: 3px; transition: width .8s }
.recn { left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px }
.recn i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #f1f3f5; color: #4b5158 } .recn i svg { width: 16px; height: 16px }
.recn b { color: #0e5d72 }
.flowstats { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap }
.flowstats > div { padding: 14px 20px; min-width: 190px; text-align: center } .flowstats .k { font-size: 12.5px; color: #6b7280 } .flowstats .v { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums }

/* ── 2. scroll story: one app window, five chapters ── */
.story { position: relative; height: 520vh; background: linear-gradient(180deg, #f6f8fa, #eef3f5 50%, #f6f8fa) }
.sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 28px }
.chapters { position: relative; padding-left: 22px }
.chapters .track { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: #e1e7ea; border-radius: 2px }
.chapters .track i { position: absolute; left: 0; top: 0; width: 2px; background: linear-gradient(#2a9bb6, #0f4c5e); border-radius: 2px; transition: height .2s linear }
.chap { padding: 14px 0; opacity: .38; transition: opacity .4s; cursor: pointer }
.chap.on { opacity: 1 }
.chap .eb { font-size: 12px; font-weight: 600; color: #1f7f97 } .chap h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.02em }
.chap p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #4b5158; max-height: 0; overflow: hidden; transition: max-height .5s ease }
.chap.on p { max-height: 120px }
.win { position: relative; height: min(560px, 74vh); border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 50px 100px rgba(15,23,42,.14), 0 1px 2px rgba(15,23,42,.06); overflow: hidden }
.win .chrome { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #eef1f3; background: rgba(255,255,255,.7) }
.win .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #e3e7ea } .win .chrome span { margin-left: 12px; font-size: 12px; color: #8a9099; font-family: ui-monospace, Menlo, monospace }
.scr { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; padding: 26px; opacity: 0; transform: translateY(30px) scale(.985); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none }
.scr.on { opacity: 1; transform: none }
.win::after { content: ''; position: absolute; right: -80px; bottom: -80px; width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(31,127,151,.16) 1.3px, transparent 1.6px) 0 0/12px 12px; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%) }

/* screen 1: checkout */
.s1 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; height: 100% }
.s1 .sum { border-radius: 16px; background: linear-gradient(160deg, #f4f9fa, #e8f2f5); padding: 18px; display: flex; flex-direction: column; gap: 12px }
.s1 .brand { font-weight: 700; font-size: 15px } .s1 .it { display: flex; gap: 10px; align-items: center; font-size: 13px } .s1 .it i { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(135deg, #cfe6ec, #9fd0dc) }
.s1 .it b { display: block } .s1 .it span { color: #6b7280 } .s1 .it .p { margin-left: auto; font-weight: 700 }
.s1 .tot { margin-top: auto; display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; border-top: 1px solid #d7e6eb; padding-top: 12px }
.s1 .bump { border: 1px dashed #9fd3e0; border-radius: 12px; padding: 10px; font-size: 12.5px; background: rgba(255,255,255,.7) } .s1 .bump b { color: #0e5d72 }
.s1 form { display: flex; flex-direction: column; gap: 9px }
.wal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .wal div { height: 40px; border-radius: 10px; background: #111; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600 } .wal div + div { background: #fff; color: #111; border: 1px solid #e3e7ea }
.fld { border: 1px solid #e3e7ea; border-radius: 10px; padding: 7px 11px; font-size: 13px; min-height: 42px; background: #fff; transition: border-color .3s, box-shadow .3s }
.fld.f { border-color: #1f7f97; box-shadow: 0 0 0 3px rgba(31,127,151,.12) } .fld small { display: block; font-size: 10.5px; color: #8a9099 }
.cur { display: inline-block; width: 1px; height: 13px; background: #1f7f97; vertical-align: -2px; animation: blink 1s steps(2) infinite } @keyframes blink { 50% { opacity: 0 } }
.paybtn { height: 44px; border-radius: 11px; background: linear-gradient(135deg, #17667d, #0f4c5e); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; transition: transform .2s }
.toastok { position: absolute; right: 26px; top: 22px; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; opacity: 0; transform: translateY(-8px); transition: all .45s cubic-bezier(.2,.9,.3,1.1) }
.toastok.on { opacity: 1; transform: none }
.toastok .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #17667d, #0f4c5e); color: #fff } .toastok .ic svg { width: 16px; height: 16px }
.toastok .t { font-size: 13px; font-weight: 600 } .toastok .s { font-size: 12px; color: #6b7280 }

/* screen 2: vault */
.s2 { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 22px }
.vcard { width: 360px; height: 222px; border-radius: 20px; position: relative; overflow: hidden; color: #fff; padding: 24px; background: linear-gradient(135deg, #1c7790, #0c3f4e);
  box-shadow: 0 30px 60px rgba(15,76,94,.3); transform: perspective(900px) rotateX(8deg) rotateY(-12deg); transition: transform .3s }
.vcard::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.18) 1.2px, transparent 1.5px) 0 0/13px 13px; -webkit-mask-image: linear-gradient(120deg, transparent 35%, #000); mask-image: linear-gradient(120deg, transparent 35%, #000) }
.vcard .shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); animation: shine 4s ease-in-out infinite }
@keyframes shine { 0%, 30% { transform: translateX(-60%) } 70%, 100% { transform: translateX(60%) } }
.vcard .chip { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #ecdcad, #c8ab62) }
.vcard .num { margin-top: 38px; font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: .05em; white-space: nowrap; position: relative; z-index: 1 } .vcard .tok { color: #a5e8f6 }
.vcard .foot { display: flex; justify-content: space-between; margin-top: 20px; font-size: 12px; opacity: .85; position: relative; z-index: 1 }
.gws { display: flex; gap: 10px } .gws span { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid #e3e7ea; background: #fff; color: #8a9099; transition: all .4s }
.gws span.on { color: #0e6f84; border-color: #9fd3e0; background: #e8f4f7; box-shadow: 0 6px 16px rgba(31,127,151,.15) }
.vlog { font-size: 12.5px; color: #6b7280; min-height: 18px } .vlog b { color: #0e5d72 }

/* screen 3: routing */
.s3 { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; height: 100% }
.s3 .hd { display: flex; justify-content: space-between; align-items: center } .s3 .hd b { font-size: 16px } .s3 .hd span { font-size: 12.5px; color: #6b7280 }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end }
.col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; text-align: center }
.col .bar { margin: 0 auto; width: 70%; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #2a9bb6, #0f4c5e); transition: height .9s cubic-bezier(.2,.8,.2,1), filter .4s, opacity .4s; position: relative }
.col .bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(255,255,255,.22) 1.1px, transparent 1.4px) 0 0/9px 9px }
.col.off .bar { filter: grayscale(1); opacity: .35 }
.col b { font-size: 20px; font-variant-numeric: tabular-nums } .col span { font-size: 12px; color: #6b7280 }
.rlog { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 10px 12px; border-radius: 12px; background: #f4f8f9; color: #30353b } .rlog i { width: 8px; height: 8px; border-radius: 50%; background: #19b5d3; flex: none }

/* screen 4: recovery */
.s4 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; height: 100% }
.chartbox { border-radius: 16px; background: #fff; border: 1px solid #edf0f2; padding: 16px; display: flex; flex-direction: column }
.s4 .chartbox svg { flex: none; height: auto; margin-top: auto }
.chartbox .k { font-size: 12.5px; color: #6b7280 } .chartbox .v { font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums } .chartbox svg { flex: 1; width: 100% }
.chartbox .draw { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.2s ease } .scr.on .chartbox .draw { stroke-dashoffset: 0 }
.rlist { display: flex; flex-direction: column; gap: 8px; overflow: hidden }
.rl { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #edf0f2; font-size: 12.5px; animation: rowin .6s cubic-bezier(.2,.9,.3,1.1) }
@keyframes rowin { from { opacity: 0; transform: translateY(-10px) } }
.rl .d { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #17667d, #0f4c5e); flex: none }
.rl b { display: block; font-size: 13px } .rl span { color: #6b7280 } .rl .a { margin-left: auto; font-weight: 700; color: #0e5d72 }

/* screen 5: analytics */
.s5 { display: grid; grid-template-rows: auto 1fr; gap: 14px; height: 100% }
.kp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.kp > div { border-radius: 14px; background: #fff; border: 1px solid #edf0f2; padding: 12px } .kp .k { font-size: 11.5px; color: #6b7280 } .kp .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.kp > div.dark { background: linear-gradient(135deg, #17667d, #0f4c5e); border-color: #0f4c5e } .kp > div.dark .k { color: #a9d3de } .kp > div.dark .v { color: #fff }

/* ── 3. everything built in: spotlight grid ── */
.feats { position: relative; padding: 110px 0 }
.feats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(31,127,151,.22) 1.1px, transparent 1.4px) 0 0/18px 18px;
  -webkit-mask-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%); mask-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%); pointer-events: none }
.fgrid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 14px; margin-top: 50px }
.fc { position: relative; border-radius: 18px; padding: 22px; background: rgba(255,255,255,.82); border: 1px solid #e6ecef; backdrop-filter: blur(6px); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s }
.fc::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(31,143,171,.14), transparent 60%) }
.fc:hover { transform: translateY(-5px); box-shadow: 0 24px 46px rgba(15,23,42,.1) } .fc:hover::before { opacity: 1 }
.fc .ic { position: relative; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f8fab, #0f4c5e); box-shadow: 0 8px 18px rgba(15,76,94,.22); margin-bottom: 16px }
.fc .ic svg { width: 20px; height: 20px } .fc h3 { position: relative; margin: 0 0 6px; font-size: 15.5px } .fc p { position: relative; margin: 0; font-size: 13.5px; line-height: 1.55; color: #5b6168 }
.fc.wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center } .fc.wide .ic { margin: 0; width: 56px; height: 56px; border-radius: 16px } .fc.wide .ic svg { width: 26px; height: 26px }

/* ── 4. numbers ── */
.numsec { padding: 40px 0 100px }
.numrow { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #e6ecef; box-shadow: 0 30px 60px rgba(15,23,42,.06) }
.numrow > div { padding: 30px 26px 54px; position: relative } .numrow > div + div { border-left: 1px solid #eef1f3 }
.numrow b { display: block; font-size: 46px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #15171a, #0f4c5e); -webkit-background-clip: text; background-clip: text; color: transparent }
.numrow span { display: block; margin-top: 10px; font-size: 14px; color: #5b6168 }
.numrow svg { position: absolute; left: 26px; right: 26px; bottom: 14px; width: calc(100% - 52px); height: 26px; opacity: .8 }

/* ── 5. replace six tools ── */
.merge { position: relative; height: 340px; margin-top: 20px }
.tool { position: absolute; left: 50%; top: 50%; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #e3e8ec; font-size: 13.5px; font-weight: 500; color: #4b5158; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(15,23,42,.06); transition: transform 1.1s cubic-bezier(.7,0,.3,1), opacity .8s ease .5s }
.tool small { display: block; font-size: 11.5px; color: #9aa0a6; font-weight: 400 }
.merge .pl { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.6); opacity: 0; transition: all .9s cubic-bezier(.2,1.3,.4,1) .9s; width: 560px; max-width: 92vw; padding: 26px; text-align: center; border-radius: 24px }
.merge .pl .chips2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px } .merge .pl .chips2 span { font-size: 12px; font-weight: 600; color: #0e6f84; background: #e8f4f7; border-radius: 999px; padding: 5px 10px }
.merge .pl img { height: 20px } .merge .pl div { margin-top: 10px; font-size: 13.5px; color: #4b5158 } .merge .pl b { color: #0e5d72 }
.merge.go .tool { transform: translate(-50%,-50%) scale(.6) !important; opacity: 0 }
.merge.go .pl { transform: translate(-50%,-50%) scale(1); opacity: 1 }
.cmp { margin-top: 10px; background: #fff; border: 1px solid #e6eaee; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(15,23,42,.05) }
.cmp .tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; align-items: center; padding: 12px 22px; font-size: 14px } .cmp .tr + .tr { border-top: 1px solid #eef0f2 }
.cmp .th { background: #f7f9fa; font-size: 12.5px; color: #6b7280; font-weight: 600 } .cmp .th b { color: #0e5d72 } .cmp .note { display: block; font-size: 12px; color: #8a9099 }
.pv { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; width: max-content }
.pv.yes { background: #e3f2f6; color: #0e6f84 } .pv.partial { background: #f3f4f6; color: #4b5158 } .pv.no { color: #9aa0a6; border: 1px solid #eceff2 }
.more { display: block; margin: 14px auto 0; font: inherit; font-size: 13.5px; font-weight: 600; color: #0e6f84; background: none; border: 0; cursor: pointer }
.cmp .tr.x { display: none } .cmp.open .tr.x { display: grid }

/* ── 6. security: dark ink band ── */
.secsec { margin: 0 28px; border-radius: 28px; padding: 90px 0; background: radial-gradient(80% 120% at 80% 0%, #1b3640 0%, #0d1417 60%); color: #fff; position: relative; overflow: hidden }
.secsec::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(140,215,232,.16) 1.1px, transparent 1.4px) 0 0/16px 16px; -webkit-mask-image: radial-gradient(60% 80% at 85% 20%, #000, transparent 70%); mask-image: radial-gradient(60% 80% at 85% 20%, #000, transparent 70%); pointer-events: none }
.secsec h2 { color: #fff } .secsec .sub { color: #a7b8bf }
.secgrid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px }
.secgrid > div { border-radius: 18px; padding: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .3s, border-color .3s }
.secgrid > div:hover { background: rgba(255,255,255,.07); border-color: rgba(140,215,232,.3) }
.secgrid .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(140,215,232,.12); color: #8cd7e8; margin-bottom: 14px } .secgrid .ic svg { width: 18px; height: 18px }
.secgrid h3 { margin: 0 0 6px; font-size: 15.5px } .secgrid p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #a7b8bf }

/* ── 7. finale: the world again, with the apply form ── */
.fin { position: relative; height: 900px; margin-top: 90px; overflow: hidden; background: radial-gradient(110% 90% at 60% 0%, #ffffff 0%, #f1f4f6 60%, #e9edf0 100%) }
.fin > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .fin > canvas.globe { height: 82% }
.fin .fwrap { position: relative; z-index: 3; height: 100%; display: flex; align-items: center }
.fin .formcard { width: 470px; padding: 26px; border-radius: 22px }
.fin .formcard h2 { font-size: 36px; margin: 12px 0 8px } .fin .formcard .sub { font-size: 15px }
.ff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px }
.ff .f { border: 1px solid #e3e7ea; border-radius: 11px; padding: 11px 12px; font-size: 14px; color: #8a9099; background: #fff }
.ff .f.full { grid-column: span 2 }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px } .opts span { font-size: 12.5px; border: 1px solid #e3e7ea; border-radius: 999px; padding: 6px 11px; background: #fff; cursor: pointer; transition: all .2s }
.opts span.on, .opts span:hover { border-color: #1f7f97; color: #0e6f84; background: #f0f8fa }
.fin .formcard .btn { width: 100%; justify-content: center; margin-top: 16px }
.fin .steps { display: flex; gap: 14px; margin-top: 14px; font-size: 12px; color: #6b7280 } .fin .steps b { color: #0e5d72 }
.fin .toast { right: 6%; top: 16% }

@media (max-width: 900px) {
  .big2 { font-size: 36px }
  /* phones: stores on top, Payloop in the middle with recovery beside it, MIDs at the bottom */
  .flow { height: 560px } .src { display: none }
  .src.keep { display: flex; top: 0 !important; transform: none; width: 31%; padding: 8px; font-size: 11.5px; justify-content: center; text-align: center } .src.keep i { display: none }
  .src.keep:nth-of-type(1) { left: 0 } .src.keep:nth-of-type(3) { left: 34.5% } .src.keep:nth-of-type(5) { left: 69% }
  .hub { width: 116px; height: 116px; border-radius: 32px; top: 45%; left: 62% } .hub img { height: 14px } .hub span { font-size: 10px }
  .recn { left: 0; top: 45%; bottom: auto; transform: translateY(-50%); width: 34%; padding: 8px 10px; font-size: 12px } .recn i { display: none }
  .midc { width: 31%; padding: 9px 10px; right: auto; top: auto !important; bottom: 0; transform: none } .midc .v { font-size: 16px } .midc .n b { display: none } .midc .n span { font-size: 10.5px }
  .midc[data-mid="0"] { left: 0 } .midc[data-mid="1"] { left: 34.5% } .midc[data-mid="2"] { left: 69% }
  .flowstats > div { min-width: 0; flex: 1; padding: 10px } .flowstats .v { font-size: 20px }
  .story { height: auto } .sticky { position: static; height: auto; grid-template-columns: 1fr; gap: 24px; padding: 60px 18px } .chapters { display: none }
  .win { height: 440px } .scr { padding: 16px }
  .s1, .s4 { grid-template-columns: 1fr } .s1 .sum { display: none } .rlist { display: none } .kp { grid-template-columns: 1fr 1fr } .vcard { width: 290px; height: 182px; padding: 18px } .vcard .num { font-size: 14px; margin-top: 26px }
  .mstep { display: block !important; margin: 0 0 12px } .mstep .eb { font-size: 12px; font-weight: 600; color: #1f7f97 } .mstep h3 { margin: 4px 0 6px; font-size: 22px } .mstep p { margin: 0; color: #4b5158; font-size: 15px }
  .fgrid { grid-template-columns: 1fr 1fr } .fc.wide { grid-column: span 2 }
  .numrow { grid-template-columns: 1fr 1fr } .numrow > div:nth-child(3) { border-left: 0 } .numrow > div:nth-child(n+3) { border-top: 1px solid #eef1f3 } .numrow b { font-size: 34px }
  .merge { height: 360px } .tool { font-size: 12px; padding: 9px 12px }
  .cmp .tr { grid-template-columns: 1.3fr .9fr .9fr; padding: 10px 12px; font-size: 13px } .cmp .note { display: none }
  .secsec { margin: 0 12px; padding: 60px 0 } .secgrid { grid-template-columns: 1fr }
  .fin { height: auto } .fin .fwrap { height: auto; padding: 60px 18px 520px } .fin .formcard { width: 100% } .fin > canvas, .fin > canvas.globe { top: auto; bottom: 0; height: 540px } .fin .toast { display: none }
}
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr } .fc.wide { grid-column: auto; display: block } .fc.wide .ic { margin-bottom: 14px } }
.mstep { display: none }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none } }

/* ── 2b. platform bento: five live tiles, all visible at once ── */
.bento2 { padding: 70px 0 40px }
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 48px }
.tile { position: relative; display: flex; flex-direction: column; border-radius: 26px; padding: 26px; overflow: hidden;
  background: linear-gradient(170deg, rgba(255,255,255,.96), rgba(244,248,250,.9)); border: 1px solid #e3eaee;
  box-shadow: 0 30px 60px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s }
.tile:hover { transform: translateY(-4px); box-shadow: 0 40px 80px rgba(15,23,42,.11) }
.tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(31,143,171,.10), transparent 60%) }
.tile:hover::before { opacity: 1 }
.tile::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(circle, rgba(31,127,151,.18) 1.2px, transparent 1.5px) 0 0/12px 12px; -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 68%); mask-image: radial-gradient(circle, #000 15%, transparent 68%) }
.tile .th { position: relative; z-index: 1; max-width: 520px } .tile .th .eb { font-size: 12px; font-weight: 600; color: #1f7f97 }
.tile .th h3 { margin: 6px 0 6px; font-size: 24px; letter-spacing: -.025em; line-height: 1.15 } .tile .th p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #5b6168 }
.tv { position: relative; z-index: 1; flex: 1; margin-top: 22px; min-height: 0 }
.t-co { grid-column: span 7; height: 560px } .t-va { grid-column: span 5; height: 560px }
.t-ro { grid-column: span 5; height: 500px } .t-re { grid-column: span 7; height: 500px }
.t-an { grid-column: span 12; height: 380px; display: grid; grid-template-columns: 340px 1fr; gap: 30px }
.t-an .tv { margin-top: 0 }
.t-co .toastok { top: auto; bottom: 4px; right: 4px }
.t-co .s1 .sum { padding: 16px }
.t-va .vcard { width: 330px; height: 206px }
.tv .s1, .tv .s2, .tv .s3, .tv .s4, .tv .s5 { height: 100% }
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr } .tile { grid-column: auto !important; height: auto !important; padding: 20px }
  .t-an { display: flex } .tv { height: 380px; flex: none } .t-co .tv { height: 420px } .t-va .tv { height: 330px }
  .tile .th h3 { font-size: 21px }
}

.s5 { min-height: 0 } .s5 .chartbox { min-height: 0 } .s5 .chartbox svg { height: 100%; min-height: 0 }

/* ── 3b. everything built in: twelve tools orbiting Payloop ── */
.orbsec { padding: 100px 0 60px; overflow: hidden }
.orbit { position: relative; height: 620px; margin-top: 10px }
.orbit canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 260px; height: 260px; border-radius: 50%; display: grid; place-items: center; text-align: center; z-index: 50;
  background: radial-gradient(circle at 35% 30%, #fff, #eef4f6 70%); border: 1px solid #fff; box-shadow: 0 40px 80px rgba(15,76,94,.16), 0 0 0 14px rgba(255,255,255,.55), inset 0 -10px 30px rgba(15,76,94,.06) }
.core > * { max-width: 190px } .core img { height: 18px; margin: 0 auto } .ct { margin-top: 12px; min-height: 62px; transition: opacity .25s }
.ct b { display: block; font-size: 15px; letter-spacing: -.01em } .ct span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #5b6168 }
.pill2 { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; font-weight: 600; cursor: default;
  background: rgba(255,255,255,.9); border: 1px solid #fff; box-shadow: 0 12px 28px rgba(15,23,42,.09); backdrop-filter: blur(8px); will-change: transform; transition: box-shadow .25s, background .25s }
.pill2 i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f8fab, #0f4c5e) } .pill2 i svg { width: 14px; height: 14px }
.pill2.hov { background: #fff; box-shadow: 0 0 0 4px rgba(31,127,151,.15), 0 18px 36px rgba(15,76,94,.18) }
.marq { display: none }
@media (max-width: 900px) {
  .orbit { display: none } .marq { display: flex; flex-direction: column; gap: 10px; margin: 30px -18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
  .mrow { display: flex; gap: 10px; width: max-content; animation: marq 26s linear infinite } .mrow.rev { animation-direction: reverse }
  .mrow span { display: flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid #e6ecef; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 14px rgba(15,23,42,.05) }
  .mrow i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f8fab, #0f4c5e) } .mrow i svg { width: 13px; height: 13px }
  @keyframes marq { to { transform: translateX(-50%) } }
}

/* logos: an endless row (four copies, moved by half, so it never runs out) with wide white fades */
.logos2 { padding: 70px 0 40px; text-align: center }
.logos2 p { font-size: 15px; color: #6b7280; margin: 0 0 34px; font-weight: 500 }
.lm { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-image: linear-gradient(90deg, transparent 0, transparent 4%, #000 26%, #000 74%, transparent 96%) }
.lrow { display: flex; align-items: center; width: max-content; height: 80px; animation: lmove 70s linear infinite; filter: grayscale(1) brightness(0); opacity: .42 }
.lrow > * { flex: none; margin-right: 96px }
.lrow img { width: auto; display: block }
.lm:hover .lrow { animation-play-state: paused }
.lrow b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap } .lrow b:nth-of-type(3n+1) { letter-spacing: .18em }
@keyframes lmove { to { transform: translateX(-50%) } }
@media (max-width: 900px) { .logos2 { padding: 50px 0 20px } .lrow { height: 60px; animation-duration: 50s } .lrow > * { margin-right: 56px; transform: scale(.78) } .lm { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent) } }
@media (prefers-reduced-motion: reduce) { .lrow { animation: none } }

/* logos built into the bottom of the hero, on the fading dot sea */
.logoband { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5 }
.logoband .wrap { display: flex; align-items: center; gap: 30px }
.logoband .lbl { flex: none; font-size: 13px; font-weight: 600; color: #6b7280; white-space: nowrap; padding-right: 30px; border-right: 1px solid #dde3e7 }
.logoband .lm { flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.logoband .lrow { zoom: .62; opacity: .5 }
.monly { display: none }
@media (max-width: 900px) { .logoband { display: none } .monly { display: block } }

/* logo section D: teal band, two endless rows of pills (they never pause) */
.dsec { padding: 60px 0 10px }
.d-band { border-radius: 28px; background: linear-gradient(135deg, #e9f4f7, #f4f9fa 50%, #e6f1f4); border: 1px solid #dcebf0; padding: 44px 0; overflow: hidden; position: relative }
.d-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(31,127,151,.14) 1.1px, transparent 1.4px) 0 0/16px 16px; -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent) }
.d-head { text-align: center; position: relative; z-index: 1; margin-bottom: 26px } .d-head .eb { font-size: 12.5px; font-weight: 600; color: #1f7f97 } .d-head h2 { font-size: 30px; margin: 8px 0 0; letter-spacing: -.03em }
.d-m { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) }
.d-row { display: flex; width: max-content; animation: lmove 60s linear infinite } .d-row.rev { animation-direction: reverse; animation-duration: 70s }
.d-row > div { flex: none; margin-right: 14px; height: 70px; padding: 0 30px; border-radius: 999px; background: #fff; border: 1px solid #e3ecef; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(15,23,42,.04) }
.d-row img { width: auto; display: block; filter: grayscale(1) brightness(0); opacity: .55; max-height: 58px }
.d-row b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; opacity: .55 } .d-row b.sp { letter-spacing: .18em }
@media (max-width: 900px) { .dsec { padding: 40px 0 0 } .d-band { padding: 30px 0; border-radius: 22px } .d-head h2 { font-size: 24px } .d-row > div { height: 56px; padding: 0 22px } .d-row img { transform: scale(.82) } }
@media (prefers-reduced-motion: reduce) { .d-row { animation: none } }

/* make more money: same orders, two checkouts */
.msec { padding: 100px 0 40px }
.msec .center { text-align: center } .msec .eb { font-size: 12.5px; font-weight: 600; color: #1f7f97 }
.msec h2 { font-size: 54px; letter-spacing: -.045em; line-height: 1.03; margin: 12px 0 14px }
.msec .sub { margin: 0 auto; max-width: 620px }
.msec .card { background: #fff; border: 1px solid #e6ecef; border-radius: 24px; box-shadow: 0 30px 60px rgba(15,23,42,.07) }
.msec .num { font-variant-numeric: tabular-nums }
.msec .a { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px }
.msec .mcol { padding: 26px; position: relative; overflow: hidden }
.msec .mcol.pl { background: linear-gradient(160deg, #17667d, #0b3b49); color: #fff; border-color: #0f4c5e }
.msec .ttl { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600 } .msec .ttl span { font-size: 12px; font-weight: 500; opacity: .7 }
.msec .big { text-align: left; font-size: 46px; font-weight: 700; letter-spacing: -.04em; margin-top: 14px }
.msec .rows { margin-top: 16px; display: grid; gap: 8px; position: relative; z-index: 1 }
.msec .r { display: flex; justify-content: space-between; font-size: 13.5px; padding: 9px 12px; border-radius: 11px; background: #f5f8f9 } .msec .pl .r { background: rgba(255,255,255,.08) }
.msec .r b { font-variant-numeric: tabular-nums } .msec .r.up b { color: #8be3f4 } .msec .r.lost b { color: #b0756a }
.msec canvas { position: absolute; right: 0; top: 0; width: 46%; height: 100%; opacity: .9 }
.msec .a-gap { margin-top: 18px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px }
.msec .a-gap .k { font-size: 14px; color: #5b6168 } .msec .a-gap .v { font-size: 40px; font-weight: 700; letter-spacing: -.035em; color: #0e5d72 }
@media (max-width: 900px) { .msec { padding: 70px 0 20px } .msec h2 { font-size: 34px } .msec .a { grid-template-columns: 1fr } .msec canvas { display: none } .msec .a-gap { flex-direction: column; align-items: flex-start } .msec .a-gap .v { font-size: 32px } }

/* logos, final (sample 2b): no band, one calm line, small chips, two endless rows */
.dsec { padding: 70px 0 20px } .d-band { display: none }
.dline { text-align: center; font-size: 15px; color: #6b7280; font-weight: 500; margin-bottom: 24px }
.dsec .d-m { gap: 9px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent) }
.dsec .d-row > div { height: 46px; padding: 0 20px; margin-right: 11px }
.dsec .d-row img { zoom: .65 } .dsec .d-row b { font-size: 14px }
@media (max-width: 900px) { .dsec { padding: 50px 0 10px } .dsec .d-row > div { height: 42px; padding: 0 16px } .dsec .d-row img { zoom: .58; transform: none } }
/* logos: closer to the top, and room inside the fade mask so the chip shadows aren't cut into a line */
.dsec { padding: 0 0 10px; margin-top: -8px; position: relative; z-index: 2 }
.dsec .d-m { padding: 6px 0 22px; margin-bottom: -16px }
.dline { margin-bottom: 16px }
@media (max-width: 900px) { .dsec { margin-top: -20px } }

/* money section spacing */
.msec { position: relative; padding: 110px 0 90px }
.msec > .wrap { position: relative }

/* growth line behind the money section (background sample I) */
.msec { overflow: hidden }
.msec .mfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.msec .gl { } @keyframes drawl { to { stroke-dashoffset: 0 } }

/* payment flow, simple (sample 2) */
.flowsec2 { padding: 0; height: 88vh; min-height: 580px; max-height: 880px; border-top: 1px dashed #dfe5e9; border-bottom: 1px dashed #dfe5e9; overflow: hidden; position: relative }
.flowsec2 > .wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 5vh; padding-bottom: 5vh }
.flowsec2 h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -.045em; margin: 14px 0 0 } .flowsec2 h2 em, .flowsec2 h3 em { font-style: normal; background: linear-gradient(135deg, #1f8fab, #0f4c5e); -webkit-background-clip: text; background-clip: text; color: transparent }
.flowsec2 .sub { font-size: 18px; margin: 14px auto 0 } .flowsec2 .center { text-align: center }
.flowsec2 .flow { flex: 1; height: auto; min-height: 0; margin-top: 4vh; max-height: 440px }
.flowsec2 .src { font-size: 15px; padding: 10px 16px 10px 10px } .flowsec2 .hub { width: 130px; height: 130px; border-radius: 36px } .flowsec2 .hub img { height: 19px }
.midc.mini { width: 150px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center } .midc.mini b { font-size: 16px } .midc.mini span { font-size: 12px; color: #1f7f97; font-weight: 600 }
.recn.mini { font-size: 13.5px; padding: 9px 14px 9px 9px; font-weight: 500 }
/* 2 */
.v2 > .wrap { flex-direction: row; align-items: center; gap: 40px } .v2 .side { width: 380px; flex: none } .v2 .flow { height: 400px; flex: 1; margin: 0 }
.v2 .one { margin-top: 30px } .v2 .one b { display: block; font-size: 72px; letter-spacing: -.05em; line-height: 1; color: #0e5d72 } .v2 .one span { font-size: 15px; color: #5b6168 }
/* 3 */
/* 4 */
@media (max-width: 900px) { .flowsec2 { height: auto; max-height: none } .v2 > .wrap { flex-direction: column } .v2 .side { width: 100% } .v2 .flow { height: 420px; flex: none } .words { grid-template-columns: 1fr } .st { width: 120px } .st span { display: none } }
.flowsec2 { border: 0 !important }

.bento2 .tiles { margin-top: 0 } .bento2 { padding: 20px 0 40px }

.bento2 .bhead { margin-bottom: 44px } .bento2 .bhead .sub { margin-top: 14px }

/* ── finishing pass ── */
/* the endless logo / tool rows are wider than the screen on purpose; clip them so the page never scrolls sideways */
.d-m, .marq { overflow-x: clip }
/* in-page links land below the fixed header */
html { scroll-behavior: smooth } section[id], #hero { scroll-margin-top: 64px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
.nav a { color: inherit; text-decoration: none } .nav .links a:hover { color: #15171a }
.nav .logo { display: flex }
footer a { color: inherit; text-decoration: none } footer a:hover { color: #15171a }

/* phone menu: a burger that opens a frosted panel under the header */
.burger { display: none; width: 40px; height: 36px; border: 1px solid #e2e7eb; border-radius: 10px; background: rgba(255,255,255,.75); cursor: pointer; padding: 0; place-items: center }
.burger span, .burger span::before, .burger span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: #15171a; position: relative; transition: transform .25s, background .25s }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0 } .burger span::before { top: -5px } .burger span::after { top: 5px }
.nav.open .burger span { background: transparent } .nav.open .burger span::before { transform: translateY(5px) rotate(45deg) } .nav.open .burger span::after { transform: translateY(-5px) rotate(-45deg) }
.mmenu { display: none }
@media (max-width: 900px) {
  .burger { display: grid } .nav .right .ghost { display: none }
  .mmenu { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); padding: 8px; border-radius: 18px; background: rgba(255,255,255,.96); border: 1px solid #e6ecef;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 50px rgba(15,23,42,.14); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s }
  .nav.open .mmenu { opacity: 1; transform: none; pointer-events: auto }
  .mmenu a { display: block; padding: 13px 14px; border-radius: 11px; font-size: 16px; font-weight: 500; color: #15171a } .mmenu a:active { background: #f0f8fa }
  .mmenu .btn { display: flex; justify-content: center; margin-top: 6px; color: #fff }
  .nav.open { background: rgba(246,248,250,.92) }
}

/* the apply form, with real fields */
.ff input.f { width: 100%; font: inherit; color: #15171a; outline: none; transition: border-color .2s, box-shadow .2s; box-sizing: border-box }
.ff input.f::placeholder { color: #8a9099 }
.ff input.f:focus { border-color: #1f7f97; box-shadow: 0 0 0 3px rgba(31,127,151,.12) }
.ff input.f.bad { border-color: #b0756a; box-shadow: 0 0 0 3px rgba(176,117,106,.12) }
.fin .formcard button.btn { font: inherit; font-weight: 600; font-size: 14.5px; border: 0 }
.fin .formcard .olbl { margin-top: 14px; font-size: 12px; font-weight: 600; color: #6b7280 } .fin .formcard .olbl + .opts { margin-top: 6px }
.fin .formcard .err { margin-top: 10px; font-size: 12.5px; color: #9a5f55; min-height: 0 }
.fin .formcard .done { display: none; text-align: left } .fin .formcard.sent > :not(.done) { display: none } .fin .formcard.sent .done { display: block }
.fin .formcard .done .ok { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f8fab, #0f4c5e); margin-bottom: 16px } .fin .formcard .done .ok svg { width: 22px; height: 22px }
.fin .formcard .done h2 { margin-top: 0 }
@media (max-width: 900px) { .ff input.f { font-size: 16px } .ff { grid-template-columns: 1fr } .ff .f.full { grid-column: auto } }

/* a little less empty space before the security block */
.secsec { margin-top: 60px !important }

/* phones: the logo rows sit clear of the hero's live stats */
@media (max-width: 900px) { .dsec { margin-top: 0; padding-top: 28px } }

/* phones: the routing flow stacks. Store on top, Payloop in the middle with retries beside it, the three MIDs along the bottom */
@media (max-width: 900px) {
  .flowsec2 { height: auto; max-height: none; min-height: 0 }
  .v2 > .wrap { flex-direction: column; align-items: stretch; gap: 0; padding-top: 64px; padding-bottom: 40px }
  .v2 .side { width: auto } .v2 .one { margin-top: 20px } .v2 .one b { font-size: 56px }
  .v2 .flow { flex: none; width: 100%; height: 430px; max-height: none; margin-top: 30px }
  .flowsec2 .src { display: flex; left: 50%; top: 0 !important; transform: translateX(-50%); font-size: 14px }
  .flowsec2 .hub { width: 112px; height: 112px; border-radius: 32px; top: 46%; left: 62% } .flowsec2 .hub img { height: 15px }
  .flowsec2 .recn { left: 0; top: 46%; width: auto; max-width: 36%; padding: 8px 10px; font-size: 12.5px }
  .midc.mini { width: 31%; padding: 9px 10px; flex-direction: column; align-items: flex-start; gap: 2px } .midc.mini b { font-size: 15px } .midc.mini span { font-size: 11px }
}

/* six tools: offsets come in as --x/--y; phones pull them in so no card sits past the screen edge */
.merge { overflow-x: clip } .merge .tool { transform: translate(calc(-50% + var(--x) * var(--k, 1)), calc(-50% + var(--y))) }
@media (max-width: 900px) { .merge { --k: .34 } }

/* phones: footer lines stack */
@media (max-width: 560px) { footer .wrap { flex-direction: column; gap: 6px } }

/* ── 3b. pick your problem (replaces the orbit): problems on the left, what fixes it on the right ── */
.probsec { padding: 100px 0 70px }
.probsec .pa { display: grid; grid-template-columns: 360px 1fr; gap: 20px; margin-top: 40px }
.probsec .probs { display: flex; flex-direction: column; gap: 7px }
.probsec .probs button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font: inherit; font-size: 15px; font-weight: 500; color: #3b4047; padding: 0 16px; height: 54px;
  border-radius: 14px; border: 1px solid #e3eaee; background: rgba(255,255,255,.75); cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s }
.probsec .probs button i { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s } .probsec .probs button i svg { width: 16px; height: 16px }
.probsec .probs button:hover { border-color: #cfe1e7; background: #fff }
.probsec .probs button.on { background: linear-gradient(135deg, #17667d, #0f4c5e); color: #fff; border-color: transparent; box-shadow: 0 12px 26px rgba(15,76,94,.25) } .probsec .probs button.on i { opacity: 1; transform: none }
.probsec .pan { padding: 28px; display: flex; flex-direction: column; background: rgba(255,255,255,.9); border: 1px solid #e3eaee; border-radius: 22px; box-shadow: 0 30px 60px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04) }
.probsec .pan .k { font-size: 12.5px; font-weight: 600; color: #1f7f97 }
.probsec .pbig { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; flex-wrap: wrap }
.probsec .pbig b { font-size: 62px; letter-spacing: -.05em; line-height: 1; background: linear-gradient(135deg, #1f8fab, #0f4c5e); -webkit-background-clip: text; background-clip: text; color: transparent } .probsec .pbig span { font-size: 16px; color: #4b5158 }
.probsec ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px }
.probsec li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #3b4047; line-height: 1.45; animation: pup .45s both } .probsec li:nth-child(2) { animation-delay: .07s } .probsec li:nth-child(3) { animation-delay: .14s }
.probsec li i { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; background: #e8f4f7; color: #0e6f84 } .probsec li i svg { width: 12px; height: 12px }
@keyframes pup { from { opacity: 0; transform: translateY(6px) } }
.probsec .pgrid { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px }
.probsec .ptl { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: #9aa3aa; background: #f4f7f8; border: 1px solid transparent; transition: all .35s }
.probsec .ptl i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #dfe6ea; color: #fff; transition: background .35s } .probsec .ptl i svg { width: 12px; height: 12px }
.probsec .ptl.lit { color: #0f3f4d; background: #fff; border-color: #cfe6ec; box-shadow: 0 8px 18px rgba(15,76,94,.10) } .probsec .ptl.lit i { background: linear-gradient(135deg, #1f8fab, #0f4c5e) }
@media (max-width: 900px) {
  .probsec { padding: 64px 0 40px } .probsec .pa { grid-template-columns: 1fr; margin-top: 28px }
  .probsec .probs button { height: 48px; font-size: 14.5px } .probsec .pan { padding: 20px } .probsec .pbig b { font-size: 46px } .probsec .pgrid { grid-template-columns: 1fr 1fr }
}
@media (prefers-reduced-motion: reduce) { .probsec li { animation: none } }
/* phones: the problems become one swipeable row so the answer stays in view right under it */
@media (max-width: 900px) {
  .probsec .probs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 14px; scroll-snap-type: x proximity } .probsec .probs::-webkit-scrollbar { display: none }
  .probsec .probs button { flex: none; height: 44px; white-space: nowrap; scroll-snap-align: start; border-radius: 999px } .probsec .probs button i { display: none }
  .probsec .pa { gap: 4px }
}

/* ── 7. the end of the page (ending sample A): dark finale with the application, then a dark footer ── */
.tag.dk { background: rgba(140,215,232,.1); border-color: rgba(140,215,232,.25); color: #bfe9f3 }
.ea { position: relative; overflow: hidden; margin-top: 90px; padding: 110px 0 120px; color: #fff; background: radial-gradient(70% 90% at 15% 0%, #134a59 0%, #0b2730 45%, #0a1418 100%) }
.ea::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(140,215,232,.14) 1px, transparent 1.3px) 0 0/18px 18px; -webkit-mask-image: radial-gradient(60% 70% at 80% 30%, #000, transparent); mask-image: radial-gradient(60% 70% at 80% 30%, #000, transparent) }
.ea .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 460px; gap: 70px; align-items: center }
.ea h2 { font-size: 64px; letter-spacing: -.045em; line-height: 1.02; margin: 14px 0 12px; color: #fff } .ea .sub { font-size: 17px; line-height: 1.55; color: #a9c3ca; margin: 0; max-width: 520px }
.tl3 { list-style: none; padding: 0; margin: 30px 0 0 } .tl3 li { display: flex; gap: 16px; position: relative; padding-bottom: 20px }
.tl3 li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 1px; background: linear-gradient(#2a9bb6, rgba(42,155,182,.1)) }
.tl3 i { flex: none; width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #8be3f4; background: rgba(140,215,232,.1); border: 1px solid rgba(140,215,232,.22) }
.tl3 b { display: block; font-size: 16px; margin-top: 6px } .tl3 span { font-size: 14px; color: #93acb3 }
.ea .trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font-size: 13px; color: #9fb6bd } .ea .trust span { display: inline-flex; align-items: center; gap: 7px }
.ea .trust i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(140,215,232,.12); color: #8be3f4 } .ea .trust i svg { width: 12px; height: 12px }
.ea .card { background: #fff; color: #15171a; border-radius: 24px; padding: 28px; box-shadow: 0 50px 100px rgba(0,0,0,.4) }
.ea .ff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 } .ea .ff .f.full { grid-column: span 2 }
.ea .f { width: 100%; font: inherit; font-size: 15px; color: #15171a; border: 1px solid #e3e7ea; border-radius: 12px; padding: 13px 14px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s }
.ea .f::placeholder { color: #8a9099 } .ea .f:focus { border-color: #1f7f97; box-shadow: 0 0 0 3px rgba(31,127,151,.12) } .ea .f.bad { border-color: #b0756a; box-shadow: 0 0 0 3px rgba(176,117,106,.12) }
.ea .olbl { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: #6b7280 } .ea .opts { margin-top: 0 } .ea .opts span { font-size: 13px; padding: 7px 12px }
.ea .ap .btn { width: 100%; justify-content: center; margin-top: 16px; font: inherit; font-weight: 600; font-size: 15px; border: 0; padding: 14px 18px } .ea .ap .btn svg { width: 15px; height: 15px }
.ea .err { margin-top: 10px; font-size: 12.5px; color: #9a5f55 } .ea .err:empty { display: none }
.ea .done { display: none } .ea .ap.sent > :not(.done) { display: none !important } .ea .ap.sent .done { display: block; animation: pup .5s both }
.ea .done .ok { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f8fab, #0f4c5e); margin-bottom: 14px } .ea .done .ok svg { width: 22px; height: 22px }
.ea .done h3 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 6px } .ea .done p { margin: 0; color: #5b6168; font-size: 15px }
footer.fa { background: #0a1418; color: #93acb3; padding: 70px 0 30px; position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); font-size: 14px }
footer.fa .wrap { display: block } .fa .top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px }
.fa .brand img { height: 26px; filter: brightness(0) invert(1) } .fa .brand p { font-size: 14px; line-height: 1.55; max-width: 300px; margin: 16px 0 }
.fa .mail { color: #8be3f4 } .fa .fcol { display: flex; flex-direction: column; gap: 9px } .fa .fcol b { color: #fff; font-size: 12.5px; letter-spacing: .02em; margin-bottom: 4px }
.fa a:hover { color: #8be3f4 }
.fa .word { margin-top: 60px; display: flex; justify-content: center } .fa .word img { width: 100%; height: auto; max-width: 1140px; filter: brightness(0) invert(1); opacity: .05 }
.fa .bot { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); font-size: 13px }
@media (max-width: 900px) {
  .ea { margin-top: 50px; padding: 70px 0 } .ea .wrap { grid-template-columns: 1fr; gap: 36px } .ea h2 { font-size: 42px } .ea .card { padding: 22px }
  .ea .ff { grid-template-columns: 1fr } .ea .ff .f.full { grid-column: auto } .ea .f { font-size: 16px }
  .fa .top { grid-template-columns: 1fr 1fr; gap: 30px } .fa .brand { grid-column: span 2 } .fa .bot { flex-direction: column; gap: 6px }
}

/* the step from the light page into the dark ending: rounded top, a teal glow rising out of it, a light line on its edge */
.probsec { padding-bottom: 40px }
.ea { margin-top: 50px; border-radius: 48px 48px 0 0; box-shadow: 0 -30px 90px rgba(31,127,151,.16), 0 -2px 0 rgba(31,127,151,.06) }
.ea::before { content: ''; position: absolute; z-index: 2; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(139,227,244,.6), transparent) }
@media (max-width: 900px) { .ea { margin-top: 30px; border-radius: 28px 28px 0 0 } .probsec { padding-bottom: 20px } }

/* the step into the dark ending is now the dot dissolve (dissolve.js), so the rounded top, glow and edge line go */
.dissolve { position: relative; height: 300px; margin-top: 10px; pointer-events: none } .dissolve canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.ea { margin-top: -1px; border-radius: 0; box-shadow: none }
.ea::before { display: none }
/* its top is the dots' exact colour; the teal glow and dot pattern start lower, so the join can't be seen */
.ea { background: linear-gradient(180deg, #0f2d36 0, rgba(15,45,54,0) 180px), radial-gradient(70% 80% at 15% 40%, #134a59 0%, rgba(19,74,89,0) 60%), linear-gradient(180deg, #0f2d36 0, #0f2d36 120px, #0b2730 45%, #0a1418 100%) }
.ea::after { -webkit-mask-image: radial-gradient(60% 60% at 80% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 80% 50%, #000, transparent) }
@media (max-width: 900px) { .dissolve { height: 200px; margin-top: 0 } .ea { margin-top: -1px; border-radius: 0 } }

/* section backgrounds (picked in full2-bg.html): routing = dot spotlight on the hub, problems = dot rain thinning toward the dissolve */
.flowsec2, .probsec { position: relative } .flowsec2 > .wrap, .probsec > .wrap { position: relative; z-index: 1 }
.bgx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden } .bgx > * { position: absolute; inset: 0 }
.flowsec2 > .bgx .a { background: radial-gradient(circle, rgba(31,127,151,.28) 1px, transparent 1.4px) 0 0/14px 14px;
  -webkit-mask-image: radial-gradient(35% 60% at var(--hx, 62%) var(--hy, 52%), #000, transparent 75%); mask-image: radial-gradient(35% 60% at var(--hx, 62%) var(--hy, 52%), #000, transparent 75%) }
.flowsec2 > .bgx .b { background: radial-gradient(28% 45% at var(--hx, 62%) var(--hy, 52%), rgba(31,143,171,.14), transparent 70%) }
.probsec > .bgx .a { background: radial-gradient(circle, rgba(31,127,151,.2) 1px, transparent 1.4px) 0 0/18px 18px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, rgba(0,0,0,.5) 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 25%, rgba(0,0,0,.5) 70%, transparent 100%) }
@media (max-width: 900px) { .flowsec2 > .bgx .a { -webkit-mask-image: radial-gradient(70% 40% at var(--hx, 62%) var(--hy, 52%), #000, transparent 75%); mask-image: radial-gradient(70% 40% at var(--hx, 62%) var(--hy, 52%), #000, transparent 75%) } }

/* the application in 4 steps (Apply section): header + reference, progress, one step at a time, review */
.ea .ap4 .aph { display: flex; justify-content: space-between; align-items: center } .ea .ap4 .aph b { font-size: 17px; letter-spacing: -.01em }
.ea .ap4 .ref { font: 600 11.5px ui-monospace, Menlo, monospace; color: #0e6f84; background: #eaf5f8; border-radius: 999px; padding: 4px 10px }
.ea .ap4 .prog { height: 4px; border-radius: 2px; background: #eef2f4; overflow: hidden; margin-top: 14px } .ea .ap4 .prog i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, #17667d, #5cc6dd); transition: width .35s }
.ea .ap4 .stl { display: flex; justify-content: space-between; margin: 8px 0 20px; font-size: 12px; color: #8a9099 } .ea .ap4 .stl b { color: #15171a }
.ea .ap4 .stp { display: none } .ea .ap4 .stp.on { display: block; animation: stin .3s ease }
@keyframes stin { from { opacity: 0; transform: translateX(10px) } to { opacity: 1; transform: none } }
.ea .ap4 .q { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; color: #15171a } .ea .ap4 .qs { font-size: 13.5px; color: #6b7280; margin: 0 0 16px }
.ea .ap4 .tiles4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .ea .ap4 .tiles4 span { display: block; border-radius: 14px; padding: 14px 15px; font-size: 13px }
.ea .ap4 .tiles4 span b { display: block; font-size: 15px; color: #15171a } .ea .ap4 .tiles4 span small { color: #8a9099; font-size: 12px }
.ea .ap4 .tiles4 span.on { box-shadow: 0 0 0 3px rgba(31,127,151,.12) }
.ea .ap4 .rev { background: #f5f8f9; border-radius: 14px; padding: 8px 16px; font-size: 14px }
.ea .ap4 .rev div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed #dfe6e9 } .ea .ap4 .rev div:last-child { border-bottom: 0 }
.ea .ap4 .rev span { color: #6b7280; flex: none } .ea .ap4 .rev b { text-align: right; overflow-wrap: anywhere }
.ea .ap4 .nv { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px }
.ea .ap4 .nv .btn { width: auto; margin-top: 0; padding: 13px 20px } .ea .ap4 .back { background: none; border: 0; font: inherit; font-size: 14.5px; color: #6b7280; cursor: pointer; padding: 10px 4px; visibility: hidden }
.ea .ap4 .back:hover { color: #15171a }
@media (max-width: 900px) { .ea .ap4 .nv .btn { flex: 1; justify-content: center } }

/* ── 2c. the film (video.html sample B): a dark band so the dark film feels at home ── */
.filmsec { position: relative; overflow: hidden; color: #fff; padding: 100px 0; margin: 40px 0 70px; background: radial-gradient(60% 70% at 70% 40%, #134a59 0%, #0b2730 45%, #0a1418 100%) }
.filmsec::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(140,215,232,.12) 1px, transparent 1.3px) 0 0/18px 18px; -webkit-mask-image: radial-gradient(50% 60% at 20% 70%, #000, transparent); mask-image: radial-gradient(50% 60% at 20% 70%, #000, transparent) }
.filmsec > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center }
.filmsec h2 { font-size: 52px; letter-spacing: -.045em; line-height: 1.03; margin: 12px 0 10px; color: #fff } .filmsec .sub { font-size: 17px; line-height: 1.55; color: #a9c3ca; margin: 0 }
.filmsec ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px } .filmsec li { display: flex; gap: 12px; font-size: 15px; color: #c9dde2 }
.filmsec li i { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(140,215,232,.12); color: #8be3f4; font-style: normal; font-size: 11px; font-weight: 700 }
.filmsec .player { position: relative; border-radius: 22px; padding: 1px; background: linear-gradient(135deg, rgba(139,227,244,.5), rgba(255,255,255,.06) 40%, rgba(31,127,151,.4)); box-shadow: 0 60px 140px -30px rgba(0,0,0,.6), 0 0 80px -20px rgba(31,143,171,.45) }
.filmsec .player .in { position: relative; border-radius: 21px; overflow: hidden; background: #07090c }
.filmsec .chrome { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02) }
.filmsec .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #2a2f36 }
.filmsec .chrome span { margin: 0 auto; padding-right: 40px; display: flex; align-items: center; gap: 7px; font: 500 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: #7d8790 }
.filmsec .chrome span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.9) }
.filmsec video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #07090c }
.filmsec .fprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08) } .filmsec .fprog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2a9bb6, #8be3f4) }
.filmsec .ctl { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none }
.filmsec .ctl button { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 14px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.filmsec .ctl button:hover { background: rgba(0,0,0,.75) } .filmsec .ctl svg { width: 15px; height: 15px }
.filmlb { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(7,9,12,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.filmlb.on { display: flex; animation: filmfi .3s both } @keyframes filmfi { from { opacity: 0 } }
.filmlb .box { position: relative; width: 100%; max-width: 1180px } .filmlb video { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 18px; background: #000; box-shadow: 0 60px 160px -40px rgba(31,143,171,.5) }
.filmlb .x { position: absolute; top: -44px; right: 0; font: inherit; font-size: 14px; color: #c9ced3; background: none; border: 0; cursor: pointer } .filmlb .x:hover { color: #fff }
@media (max-width: 900px) { .filmsec { padding: 64px 0; margin: 20px 0 40px } .filmsec > .wrap { grid-template-columns: 1fr; gap: 32px } .filmsec h2 { font-size: 36px } .filmsec .ctl button span { display: none } }

/* the film band meets the light page with the dot dissolve on both edges (filmedge.html sample 1):
   dots above it grow into the dark, and below it the dark breaks back into dots */
.dissolve.filmd { height: 220px; margin: 0 } .dissolve.filmd[data-dir="up"] { margin-bottom: 30px }
.filmsec { margin: -1px 0; background: radial-gradient(55% 45% at 70% 50%, #134a59 0%, rgba(19,74,89,0) 70%), #0f2d36 }
.filmsec::after { -webkit-mask-image: radial-gradient(45% 50% at 20% 55%, #000, transparent); mask-image: radial-gradient(45% 50% at 20% 55%, #000, transparent) }
@media (max-width: 900px) { .dissolve.filmd { height: 150px } .filmsec { margin: -1px 0 } }
/* phones: room under the player so its shadow fades out before the dots begin (no darker strip at the edge) */
@media (max-width: 900px) { .filmsec { padding: 64px 0 120px } }
@media (max-width: 900px) { .filmsec .player { box-shadow: 0 24px 50px -16px rgba(0,0,0,.55), 0 0 50px -16px rgba(31,143,171,.4) } }

/* the subscription section's dot wave now ends well before the film's dot dissolve, so only one dot effect leads into the film:
   the wave sits higher and fades out sooner, and the grey shade behind it ends in the page's light colour */
section.subsec canvas.wave { bottom: 9%; height: 26%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 55%, transparent 90%); mask-image: linear-gradient(180deg, transparent, #000 40%, #000 55%, transparent 90%) }
section.subsec .sbg { background: linear-gradient(180deg, rgba(246,248,250,0) 0%, rgba(233,237,240,.35) 45%, #e8edf0 66%, #f6f8fa 92%) }
@media (max-width: 900px) { section.subsec canvas.wave { bottom: 4%; height: 16% } }

/* the subscription section no longer has its dot wave (the film dissolve below is the only dot effect there) */
section.subsec canvas.wave { display: none !important }

/* film band, tighter and more cyan: a deeper teal base (#12404c, which its dot edges end in), cyan glows near the top and bottom
   that fade out before the edge (so the dots still meet it exactly), and less empty space above and below the player */
.filmsec { padding: 56px 0; background:
  radial-gradient(60% 34% at 50% 30%, rgba(42,155,182,.34), transparent 100%),
  radial-gradient(60% 34% at 50% 70%, rgba(42,155,182,.30), transparent 100%),
  radial-gradient(50% 45% at 70% 50%, rgba(31,143,171,.32), transparent 70%), #12404c }
.filmsec::after { background: radial-gradient(circle, rgba(160,232,245,.16) 1px, transparent 1.3px) 0 0/18px 18px }
.filmsec .sub { color: #b4d3da } .filmsec li { color: #d3e7eb }
.dissolve.filmd { height: 170px } .dissolve.filmd[data-dir="up"] { margin-bottom: 10px }
/* less light space between the subscription chart and the dots */
section.subsec { padding-bottom: 2vh; min-height: 0 }
@media (max-width: 900px) { .filmsec { padding: 44px 0 90px } .dissolve.filmd { height: 120px } }
.filmsec .player { box-shadow: 0 26px 60px -22px rgba(0,0,0,.5), 0 0 70px -20px rgba(42,155,182,.5) }

/* the whole film block (top dots, band, bottom dots) fits one screen below the menu: the dot edges and padding follow the
   screen height, and the player is sized so its height never pushes the block past the screen */
@media (min-width: 901px) {
  .dissolve.filmd { height: clamp(70px, 11vh, 170px) }
  .filmsec { padding: clamp(16px, 2.5vh, 56px) 0 }
  .filmsec > .wrap { grid-template-columns: 370px minmax(0, 1fr) }
  .filmsec .player { width: 100%; max-width: calc((100vh - 64px - 22vh - 5vh - 40px) * 16 / 9); justify-self: end }
}

/* the film band's edges are torn (breaks.html sample 2, torn.js) instead of dots. The band is exactly the tear's colour
   along its top and bottom, so the rip continues into it with no seam; the cyan glow stays in the middle */
.torn.filmd { position: relative; height: clamp(70px, 11vh, 170px); margin: 0; pointer-events: none } .torn.filmd canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.torn.filmd[data-dir="up"] { margin-bottom: 10px }
.filmsec::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #12404c 0, rgba(18,64,76,0) 140px, rgba(18,64,76,0) calc(100% - 140px), #12404c 100%) }
@media (max-width: 900px) { .torn.filmd { height: 100px } }

/* payment partner marks in colour (brandlogos.py) */
svg.bl { display: block; width: auto; height: 100% }
.dsec .d-row > div.c { padding: 0 22px } .dsec .d-row > div.c svg.bl { height: 19px } .dsec .d-row > div.c svg[aria-label="Mastercard"], .dsec .d-row > div.c svg[aria-label="Klarna"] { height: 22px }
.gws span { display: flex; align-items: center; height: 36px } .gws span svg.bl { height: 15px; filter: grayscale(1); opacity: .45; transition: filter .3s, opacity .3s } .gws span.on svg.bl { filter: none; opacity: 1 }
.vcard .foot .vb { display: flex; align-items: center; height: 14px }
.fld.cn { position: relative } .fld .cb { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; height: 12px } .fld .cb svg.bl { height: 12px }
.ea .accept { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08) } .ea .accept > span { display: block; font-size: 12.5px; font-weight: 600; color: #8fb0b8; margin-bottom: 10px }
.ea .accept > div { display: flex; flex-wrap: wrap; gap: 8px } .ea .accept i { display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 11px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.25) }
.ea .accept i svg.bl { height: 16px } .ea .accept i svg[aria-label="Mastercard"], .ea .accept i svg[aria-label="Klarna"] { height: 20px }
.ea .accept i { font-style: normal }

/* checkout tile: small product pictures instead of two plain squares */
.s1 .it i.pimg { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #ffffff, #eef3f5); border: 1px solid #e3eaee; box-shadow: 0 4px 10px rgba(15,23,42,.06) }
.s1 .it i.pimg svg { width: 40px; height: 40px }